/* Mobile navigation and shared page layouts. Wide-screen layouts remain unchanged. */
@media (max-width: 1024px) {
  :root { --navigation-height: 76px; }
  .site-header {
    min-height: var(--navigation-height);
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    gap: 10px;
  }
  .site-header .brand { min-width: 0; }
  .site-header .brand-logo { --logo-size: 164px; }
  .site-header #main-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    background: var(--paper);
    padding: 12px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - var(--navigation-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header #main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .site-header #main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    font-size: 16px;
    white-space: normal;
  }
  .site-header #main-nav a::after { display: none; }
  .site-header #main-nav a[aria-current] { color: var(--gold); }
  .site-header .header-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px 12px;
    margin-left: auto;
    font-size: 14px;
    border: 1px solid #c8c0b5;
    border-radius: 8px;
    white-space: nowrap;
  }
  .header-contact-long { display: none; }
  .site-header .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 1px solid #c8c0b5;
    border-radius: 8px;
    background: transparent;
  }
  .site-header .menu-toggle span { width: 20px; height: 1px; background: var(--ink); }
}

@media (max-width: 800px) {
  .wrap {
    width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
  }
  .section { padding-block: 48px; }
  .page-top { padding-block: 34px 32px; }
  .page-top h1 { font-size: clamp(28px, 6.8vw, 36px); line-height: 1.55; margin-bottom: 20px; }
  .page-top p:last-child { font-size: 16px; line-height: 1.85; }
  .eyebrow { font-size: 12px; letter-spacing: .12em; margin-bottom: 16px; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: clamp(26px, 6vw, 32px); line-height: 1.55; }
  .section-head > p { font-size: 16px; margin-top: 14px; }
  .section-head > .text-link { margin-top: 14px; }
  .button, .hero-button, .filter, .text-link { min-height: 44px; }
  .button, .hero-button { max-width: 100%; text-align: center; }
  .filter { padding-inline: 16px; }
  .small-note, .image-caption { font-size: 14px; }
  main > section > *, .section > *, .statement .wrap > * { min-width: 0; }

  /* Home: comfortable reading width and full photographs. */
  .hero { padding-block: 32px 36px; gap: 28px; }
  .hero h1 { font-size: clamp(29px, 7.8vw, 38px); line-height: 1.5; margin-bottom: 20px; }
  .hero .lead { max-width: none; font-size: 16px; line-height: 1.85; margin-bottom: 22px; }
  .hero .lead br { display: none; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .hero-actions .hero-button { font-size: 14px; min-height: 48px; padding: 12px 16px; }
  .hero figure { width: 100%; max-width: 560px; }
  .hero-bottom { padding-block: 18px 26px; gap: 10px; font-size: 14px; }
  .hero-bottom span { min-width: 0; }
  .hero-bottom small { flex-shrink: 0; }
  .company-film { padding-block: 34px 40px; }
  .company-film-heading > p { font-size: 14px; }
  .selected-grid .product-card p { font-size: 14px; line-height: 1.8; }
  .brand-story-description { line-height: 1.85; }
  .brand-story-actions { gap: 12px 24px; }
  .brand-story-actions .text-link { font-size: 14px; }
  .statement .wrap { padding-block: 40px; }
  .statement h2 { font-size: clamp(27px, 6.5vw, 32px); line-height: 1.6; }
  .statement p { font-size: 16px; line-height: 1.8; }
  .statement .button { margin-top: 22px; white-space: normal; }

  /* Brand and service: keep numbered copy readable on narrow phones. */
  .brand-feature { gap: 28px; }
  .brand-feature h2, .service-highlight h2, .store-planning-copy h2 { font-size: 28px; line-height: 1.6; }
  .brand-feature p br { display: none; }
  .brand-principles article { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .brand-principles h3 { font-size: 18px; line-height: 1.55; }
  .brand-principles p { font-size: 16px; line-height: 1.85; }
  .brand-promise-board .brand-promise-top {
    width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
    padding-block: 36px;
    gap: 26px;
  }
  .brand-board-description, .brand-board-message { font-size: 16px; line-height: 1.85; }
  .process-layout { gap: 26px; }
  .process-layout .section-head { position: static; }
  .process-layout .section-head > p { margin-top: 16px; }
  .service-list article { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-block: 22px; }
  .service-list h3 { font-size: 18px; line-height: 1.6; }
  .service-list p { font-size: 16px; line-height: 1.85; }
  .service-fact strong { font-size: 16px; line-height: 1.7; }
  .service-fact span { font-size: 14px; }
  .store-planning-example { padding-block: 48px; gap: 28px; }
  .store-planning-spec, .store-planning-copy .store-planning-note, .store-planning-figure figcaption { font-size: 14px; }
  .store-planning-figure { width: min(100%, 340px); }

  /* Installation cases retain their complete images and clear controls. */
  main[data-page="cases"] .section { padding-top: 30px; }
  main[data-page="cases"] .case-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  main[data-page="cases"] .filter-row { gap: 8px; margin-bottom: 26px; }
  .case-card h3 { font-size: 18px; line-height: 1.6; }
  .case-card p { font-size: 14px; line-height: 1.8; }
  .case-card .overline { font-size: 12px; margin-top: 16px; }
  .case-more .button { min-width: 160px; min-height: 48px; }
  .series-case-heading p { font-size: 18px; line-height: 1.7; }
  .case-detail-heading { padding: 62px 20px 20px; }
  .case-detail-heading h2 { font-size: 26px; line-height: 1.55; }
  .case-detail-heading > p:last-child { font-size: 16px; line-height: 1.8; }
  .case-photo-viewer { padding: 0 12px 22px; }
  .case-view-stage img { height: auto; max-height: 58dvh; }
  .case-view-stage figcaption, .case-photo-navigation > span, .case-process-note { font-size: 14px; }
  .case-thumbnails { gap: 10px; overscroll-behavior-inline: contain; }
  .case-thumbnails button { flex-basis: 84px; }
  .case-process-toggle { min-height: 44px; font-size: 14px; padding-block: 10px; }
  .case-detail-body { padding: 24px 20px 30px; }
  .case-detail-body > p { font-size: 16px; line-height: 1.85; }
  .case-detail-body .button { width: 100%; }
  .tori-case-story { padding: 62px 20px 28px; }
  .tori-story-copy, .tori-caption-body, .tori-block-intro, .tori-plan-grid > div > p:not(.eyebrow), .tori-story-consult p, .tori-story-note { font-size: 14px; }

  /* Consultation and company details: no tiny fields or long email overflow. */
  .contact-layout { gap: 30px; }
  .contact-layout > *, .kakao-consultation-step > div, .company-contact-details strong { min-width: 0; }
  .contact-layout h2 { font-size: 28px; line-height: 1.6; }
  .contact-layout p { font-size: 16px; line-height: 1.85; }
  .contact-layout .small-note, .contact-layout .form-note, .contact-layout .photo-help, .contact-layout .photo-status { font-size: 14px; }
  .contact-layout > div > p br { display: none; }
  .contact-box { margin-top: 24px; padding-top: 20px; }
  .kakao-consultation-step { gap: 14px; }
  .kakao-consultation-step > span { flex-shrink: 0; font-size: 14px; }
  .kakao-consultation-step h4 { font-size: 17px; line-height: 1.6; }
  .kakao-consultation-guide h3 { font-size: 20px; line-height: 1.65; }
  .company-contact-details a { font-size: 15px; min-height: 44px; }
  .company-contact-details strong { overflow-wrap: anywhere; }
  #inquiry { padding: 24px 20px; }
  .field { font-size: 14px; min-width: 0; }
  .field input, .field select, .field textarea { min-width: 0; min-height: 48px; font-size: 16px; }
  .field textarea { min-height: 170px; }
  .inquiry-result { padding: 16px; font-size: 14px; }
  .photo-preview button { min-height: 44px; font-size: 14px; }
  .faq summary { font-size: 16px; min-height: 48px; line-height: 1.75; padding-right: 28px; }
  .faq details p { font-size: 16px; line-height: 1.85; padding-right: 0; }

  /* A modal always fits the visible phone screen, including the close target. */
  #detail, #detail:has(.tori-case-story) {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    margin: auto;
    border-radius: 10px;
    overscroll-behavior: contain;
  }
  #detail .dialog-close {
    top: 10px;
    min-width: 54px;
    min-height: 44px;
    margin: 10px 10px -54px 0;
    padding: 10px 14px;
    font-size: 14px;
    z-index: 5;
  }
  #detail .dialog-body { padding: 26px 20px 30px; }
  #detail .dialog-body h2 { font-size: 26px; }
  #detail .store-planning-dialog, #detail .installation-gallery-dialog { padding-top: 62px; }
  #tori-photo-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 58px 16px 20px;
  }
  #tori-photo-image { max-height: 70dvh; }
  .tori-photo-close { min-width: 54px; min-height: 44px; font-size: 14px; }

  .site-footer { padding-top: 36px; padding-bottom: env(safe-area-inset-bottom); }
  .site-footer .footer-top { gap: 24px; padding-bottom: 26px; }
  .site-footer .footer-links { gap: 4px 20px; font-size: 14px; }
  .site-footer .footer-links a { min-height: 44px; }
  .site-footer .footer-bottom { align-items: flex-start; font-size: 14px; gap: 12px; }
  .footer-bottom #business-info { overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
  .footer-bottom span { font-size: 14px; }
  .company-kakao-qr > span { font-size: 14px; }
}

@media (max-width: 480px) {
  .hero-actions .hero-button { flex: 1 1 0; white-space: normal; padding-inline: 10px; }
  .selected-grid { gap: 30px; }
  .selected-grid .product-card { display: block; }
  .selected-grid h3 { font-size: 20px; }
  .home-case-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .brand-story-inner { min-height: 560px; padding-block: 40px; }
  .brand-story h2 { font-size: 30px; }
  .brand-story-description br { display: none; }
  .statement .button { width: 100%; }
  .brand-promise-board .brand-promise-identity .brand-logo { --logo-size: 192px; }
  .brand-board-pledge { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kakao-consultation .contact-items > .button { width: 100%; font-size: 15px; }
  .contact-items a[href^="mailto:"] { overflow-wrap: anywhere; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .site-header .brand-logo { --logo-size: 148px; }
  .site-header { gap: 8px; }
  .site-header .header-contact { padding-inline: 9px; }
  .hero h1 { font-size: 29px; }
  .page-top h1 { font-size: 27px; }
  .brand-story h2 { font-size: 28px; }
  .brand-principles article, .service-list article { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
}