/* Package overview and detail pages use their own stylesheet and navigation. */
.package-mobile-contact, .package-menu-toggle { display: none; }
.plan-scroll-hint { display: none; }
@media (max-width: 1024px) {
  html { scroll-padding-top: 80px; }
  .site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 76px; background: var(--paper); }
  .site-header .brand-logo { --logo-size: 164px; }
  .site-header > #package-main-nav { display: none; position: absolute; inset: 100% 0 auto; margin: 0; padding: 12px 20px 20px; border-bottom: 1px solid var(--line); background: var(--paper); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .site-header > #package-main-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .site-header > #package-main-nav a { display: flex; align-items: center; min-height: 48px; font-size: 16px; padding: 10px 0; }
  .site-header > #package-main-nav a::after { display: none; }
  .package-mobile-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
  .package-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 var(--line); border-radius: 8px; background: transparent; }
  .package-menu-toggle span { width: 20px; height: 1px; background: var(--ink); }
}
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .wrap {
    width: calc(100% - 32px);
  }

  .site-header { padding: 12px 16px; }

  .site-header > nav {
    gap: 0 16px;
    margin-top: 8px;
    padding-bottom: 0;
    font-size: 14px;
  }

  .site-header > nav a,
  .package-footer-top nav a,
  .package-footer-contacts a,
  .config-breadcrumb a,
  .detail-link,
  .extra-jump {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
    font-size: 14px;
    line-height: 1.6;
  }

  .intro-tag,
  .section-heading > p,
  .choice-description,
  .size-description,
  .furniture-list,
  .angle-reference > p,
  .price-note,
  .package-summary p:not(.eyebrow),
  .extra-caption,
  .extra-choice,
  .config-mood-photo figcaption,
  .config-section .section-heading > p,
  .config-mood-section .section-heading > p,
  .build-description,
  .config-build-note,
  .included-heading p,
  .config-note,
  .reference-plan figcaption,
  .plan-open > span,
  .config-summary-mood,
  .config-summary dl,
  .config-total > span,
  .config-extra-summary,
  .interior-toggle small,
  .interior-options,
  .interior-inclusions p,
  .interior-work,
  .detail-note,
  .package-footer-top > div > p,
  .package-footer-contacts,
  .package-footer-kakao,
  .package-footer-bottom {
    font-size: 14px;
    line-height: 1.8;
  }

  .eyebrow,
  .step {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .12em;
  }

  .config-top .config-lead {
    font-size: 15px;
  }

  :is(.intro, .section-heading, .size-card, .config-main, .config-summary, .config-top, .config-mood-photo, .config-build-choice, .included-card, .extra-card, .package-footer-top > *) {
    min-width: 0;
  }

  :is(.intro-tag, .choice-description, .furniture-list dt, .build-description, .included-caption h3, .plan-legend > span, .config-note, .config-extra-summary p, .config-summary h2, .package-footer-contacts strong, .detail-note) {
    overflow-wrap: anywhere;
  }

  .config-breadcrumb {
    gap: 12px;
    font-size: 14px;
    padding-block: 10px;
    flex-wrap: wrap;
  }

  .config-breadcrumb > span {
    margin-left: auto;
  }

  .config-build-choice {
    gap: 10px;
    padding: 16px 12px;
  }

  .build-title {
    font-size: 16px;
  }

  .build-description {
    min-height: 0;
  }

  .build-price {
    font-size: 18px;
  }

  .primary-button,
  .config-summary .primary-button {
    min-height: 48px;
    font-size: 15px;
  }

  .package-summary {
    display: block;
  }

  .package-detail-links {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: 18px;
  }

  .package-summary .package-detail-links .primary-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
  }

  .included-caption {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    min-height: 52px;
  }

  .included-caption h3,
  .included-caption strong {
    font-size: 14px;
    line-height: 1.6;
  }

  .included-caption strong {
    margin-left: 0;
  }

  .item-number {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  /* Match the image width to both the frame width and height, without cropping. */
  .included-photo {
    height: 150px;
    padding: 10px;
  }

  .included-photo .photo,
  .included-card[data-included-item="6"] .photo {
    width: min(100%, calc(var(--crop-w) / var(--crop-h) * 130px));
  }

  .plan-legend > span,
  .plan-legend strong {
    font-size: 14px;
    line-height: 1.6;
  }

  .plan-legend > span {
    min-width: 0;
    align-items: start;
  }

  .plan-legend strong {
    margin-left: auto;
  }

  .interior-toggle {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 16px 12px;
  }

  .interior-toggle input {
    grid-row: 1 / 3;
    align-self: start;
    margin: 4px 0 0;
    width: 20px;
    height: 20px;
  }

  .interior-toggle strong {
    font-size: 16px;
  }

  .interior-package-price {
    grid-column: 2;
    margin-left: 0;
    font-size: 16px;
  }

  .interior-options summary,
  .interior-work,
  .extra-choice {
    min-height: 48px;
  }

  .interior-options summary {
    padding-block: 12px;
  }

  .interior-work input,
  .extra-choice input {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  .config-summary {
    padding: 24px 18px;
  }

  .config-summary dl > div {
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .config-summary dd {
    margin-left: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .package-footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .package-footer-top nav {
    grid-row: auto;
    grid-column: auto;
    gap: 4px 20px;
  }

  .package-footer-contacts {
    gap: 6px;
  }

  .package-footer-contacts a {
    flex-wrap: wrap;
    gap: 4px 12px;
    overflow-wrap: anywhere;
  }

  .package-footer-contacts strong {
    display: inline;
    margin: 0;
  }

  .package-footer-kakao {
    width: 120px;
  }

  dialog,
  #photo-preview {
    width: calc(100% - 24px);
    max-width: 1040px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overscroll-behavior: contain;
  }

  .dialog-close {
    top: 10px;
    min-height: 44px;
    min-width: 60px;
    margin: 10px 12px -54px 0;
    padding: 8px 12px;
    font-size: 14px;
  }

  .dialog-body {
    padding: 64px 16px 24px;
  }

  .dialog-body h2 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  #photo-content {
    min-width: 0;
    max-width: 100%;
  }

  #photo-content > img {
    max-width: 100%;
    height: auto;
  }

  /* Keep the precise drawing legible in its own horizontal scroll area. */
  .expanded-plan {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .expanded-plan svg {
    display: block;
    min-width: 560px;
    height: auto;
  }
  .plan-scroll-hint { display: block; margin-top: 12px; font-size: 14px; }
}

@media (max-width: 380px) {
  .site-header { gap: 8px; }
  .site-header .brand-logo { --logo-size: 148px; }
  .package-mobile-contact { padding-inline: 9px; }
}

@media (max-width: 430px) {
  .choice-title {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 12px;
    gap: 5px;
    font-size: 16px;
    line-height: 1.5;
  }

  .choice-title .type {
    padding-right: 4px;
    font-size: 12px;
  }

  .choice-title .selection-marker {
    margin-left: 0;
    font-size: 12px;
  }

  .mood-choice {
    column-gap: 12px;
  }

  .config-mood-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .config-mood-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 44px;
  }

  .config-mood-choice > span:last-child {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.6;
    gap: 6px;
  }

  .included-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .included-caption {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px 6px;
  }

  .included-caption strong {
    grid-column: 2;
  }

  .plan-legend {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .plan-legend > span {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .extra-card > .reference-photo {
    height: 160px;
    padding: 8px;
  }

  .extra-card .photo {
    width: min(100%, calc(var(--crop-w) / var(--crop-h) * 144px));
  }
}

@media (max-width: 480px) {
  .interior-inclusions ul {
    grid-template-columns: minmax(0, 1fr);
  }
}