/* 전체 화면 검수에서 확인한 사진 비율·읽기·터치·고정 영역을 보정한다. */
:root {
  --muted: #71665b;
  --sticky-header-height: 91px;
}

/* HTML의 고정 높이가 갤러리 사진을 1000px로 늘리지 않도록 한다. */
.moment > img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.brand-mark img, .arch-sign img { height: auto; }
.header { background: var(--cream); }
.ed-tabs { top: var(--sticky-header-height); }
.mobile-menu { top: var(--sticky-header-height); padding-bottom: 100px; }
#detail-page h1:focus, main[tabindex="-1"]:focus { outline: none; }
.locked .ed-purchase-bar, .locked .mobile-dock { visibility: hidden; }
.pd-actions [data-save] { justify-content: center; }

/* 좁은 PC 창에서도 여섯 메뉴를 유지하고 모바일에서만 접는다. */
@media (min-width: 769px) {
  .desktop-nav { display: flex; }
  .desktop-nav a:nth-last-child(1) { display: block; }
  .desktop-nav a { min-height: 44px; }
  .menu-toggle { display: none; }
  .header-actions { margin-left: 0; flex-shrink: 0; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .header { padding-left: 3%; padding-right: 3%; gap: 16px; }
  .desktop-nav { gap: clamp(10px, 1.5vw, 17px); }
  .desktop-nav a { font-size: 10px; letter-spacing: .7px; white-space: nowrap; }
  .brand-type { font-size: 25px; }
  .header-actions { gap: 4px; }
}

@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 800px) {
  :root { --sticky-header-height: 74px; }
}

@media (max-width: 580px) {
  /* 상품·이용 조건은 작은 영문 장식과 구별해서 편하게 읽게 한다. */
  .pd-description, .ed-heading > p:last-child:not(.eyebrow),
  .ed-opening > p:last-of-type, .ed-reasons p, .ed-option-grid p,
  .ed-steps p, .ed-checks p, .cl-hero > div > p:not(.eyebrow),
  .ed-curriculum p, .brand-value > div > p:not(.eyebrow),
  .brand-paragraph, .guide-hero p:not(.eyebrow), .guide-contact > p,
  .value-photo-card > p:last-child, .story-copy > p:not(.eyebrow):not(.story-lead),
  .cake-copy > p:not(.eyebrow), .class-heading > p:last-child,
  .guide-heading > p:last-of-type, .visit-copy > p:not(.eyebrow):not(.quiet-note) {
    font-size: 14px;
    line-height: 1.95;
  }
  .ed-fine, .pd-intro .ed-fine, .quiet-note, .form-note,
  .form-story p, .faq-list details > p, .ed-faq details > p,
  .dialog-body > p:not(.eyebrow), .item-row p,
  .request-result .quiet-note { font-size: 12px !important; line-height: 1.9; }
  .ed-facts > div { font-size: 12px; grid-template-columns: 86px 1fr; }
  .ed-faq summary, .faq-list summary { font-size: 14px; padding-top: 20px; padding-bottom: 20px; }
  .ed-tabs button { font-size: 12px; padding: 16px 15px; }
  .ed-tabs button:focus-visible { outline-offset: -5px; }
  .pd-actions { flex-direction: column; }
  .pd-actions .button { font-size: 13px; width: 100%; min-height: 48px; }
  .pd-actions .outline { min-height: 44px; }
  .ed-purchase-bar .button { font-size: 13px; min-height: 48px; }
  .ed-purchase-bar { padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); }
  .ed-detail .back-top { bottom: calc(85px + env(safe-area-inset-bottom)); }
  .ed-detail .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .ed-detail .footer { padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
  .search-box input { font-size: 16px; min-height: 44px; }
  .filter { font-size: 12px; min-height: 44px; padding: 9px 14px; }
  .save-product { width: 44px; height: 44px; top: 6px; right: 6px; }
  .save-product svg { width: 19px; }
  .product-category, .product-english { font-size: 11px; }
  .product-more, .section-heading > .text-link { font-size: 12px; min-height: 35px; }
  .section-heading > .text-link { white-space: normal; max-width: 115px; }
  .hero-note { font-size: 14px; }
  .hero-ctas .button { font-size: 12px; padding: 12px 14px; gap: 10px; }
  .hero-ctas { flex-wrap: wrap; }
  .mini-steps { display: grid; gap: 12px; font-size: 12px; }
  .mini-steps span { width: 26px; height: 26px; font-size: 10px; }
  .class-row h3 { font-size: 16px; }
  .class-row .eyebrow { font-size: 10px; }
  .footer-links { font-size: 12px; }
  .footer-bottom { font-size: 10px; }
  .mobile-dock > a, .mobile-dock > button { font-size: 12px; min-height: 44px; }
  .form-field { font-size: 13px; }
  .quantity-controls button { width: 38px; height: 38px; }
  .item-row .text-link { font-size: 12px; }
  .request-result pre { font-size: 13px; }
  .time-option { min-height: 44px; font-size: 13px; }
  .calendar-header button { width: 44px; height: 44px; }
  .calendar-day { min-height: 44px; aspect-ratio: auto; border-radius: 8px; }
}

@media (max-width: 350px) {
  .header-actions { gap: 0; }
  .header-actions .icon-btn { width: 34px; }
  .section-heading h2 { font-size: 25px; }
  .ed-curriculum { grid-template-columns: 1fr; }
  .ed-curriculum img { aspect-ratio: 1.5; }
}