/* Keep the original desktop artwork and layout; adapt only smaller screens. */
.loading_out { pointer-events: none; }

@media (max-width: 900px) {
  html { font-size: 16px; }
  body { box-sizing: border-box; }
  .loading { min-height: 100svh; }

  .cv-page { min-height: 100svh; flex-direction: column; padding: 16px; }
  .cv-page .cv { box-sizing: border-box; width: 100%; margin: 1rem 0; }
  .cv-page .cv img { display: block; width: 100%; height: auto; }
  .cv-page .tt { position: static; align-self: flex-end; }
  .cv-page .title, .cv-page .title span { font-size: clamp(3rem, 12vw, 6rem); }
  .cv-page .title { padding: .25rem 0; }

  .project-page .container { box-sizing: border-box; width: calc(100% - 32px); margin: .5rem auto; }
  .project-page .brand { margin-left: 0; font-size: 1.2rem; }
  .chubang-page .brand { width: 50px; height: auto; }
  .chubang-page .brand img { display: block; width: 100%; height: auto; }
  .project-page .nav-link { display: flex; align-items: center; min-height: 44px; margin-right: 0; font-size: 1rem; }
  .project-page .main_logo { width: calc(100% - 32px); height: auto; margin-top: 6rem; margin-bottom: 2rem; }
  .project-page .main_logo-1 { width: 100%; height: auto; object-fit: contain; }
  .project-page .text-1 { width: calc(100% - 32px); height: auto; margin: 1rem 0 2rem; }
  .project-page .text-1 h1 { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.15; }
  .project-page .text-1 h2 { font-size: clamp(1rem, 3.5vw, 1.5rem); line-height: 1.4; margin-top: .75rem; }
  .project-page .text-2 { box-sizing: border-box; width: calc(100% - 32px); height: auto; margin: 0 0 2rem; }
  .project-page .text-2 h1 { font-size: 1.25rem; margin-top: 1.25rem; }
  .project-page .text-2 h2 { font-size: 1.125rem; margin-top: .75rem; }
  .project-page .text-2 p { font-size: 1rem; line-height: 1.6; }
  .project-page .text-3 { width: calc(100% - 32px); height: auto; flex-direction: column; margin-bottom: 3rem; }
  .project-page .main_infro { width: 100%; height: auto; margin-top: 1rem; }
  .project-page .main_infro-1 { width: 100%; height: auto; }

  .ming-page .page { min-width: 0; }
  .ming-page .phone { max-width: 100%; height: auto; aspect-ratio: 1 / 2; }
  .ming-page .phone iframe { position: absolute; inset: 0; }
}

@media (max-width: 380px) {
  .ming-page { padding: 18px; }
  .ming-page h1 { font-size: 38px; }
  .ming-page .phone { width: 280px; }
}

@media (hover: none) {
  .project-page div:hover { transform: none; }
  .cv-page .title:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loading svg circle { animation: none; }
  .project-page div, .cv-page .cv, .cv-page .title { transition: none; }
}