/* ============================================================
   pages.css — 페이지 전용 레이아웃
   ============================================================ */

/* ============================================================
   PDP — 상품 상세
   ============================================================ */
.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
  padding-inline: var(--margin);
}

.pdp__info { display: grid; gap: var(--sp-24); align-content: start; }

.pdp__header { display: grid; gap: var(--sp-8); justify-items: center; text-align: center; }

.pdp__price { font-size: var(--t-18); font-weight: var(--fw-medium); color: var(--fg-muted); }

.pdp__desc { color: var(--fg-muted); line-height: var(--lh-relaxed); text-align: center; }

.pdp__options { display: grid; gap: var(--sp-12); }

.pdp__options-title {
  font-size: var(--t-13);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--c-dark-20);
  font-size: var(--t-14);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-quart-out),
              background-color var(--d-fast) var(--ease-quart-out);
}

.swatch:hover { border-color: var(--c-dark); }
.swatch[aria-pressed="true"] { border-color: var(--c-dark); background: var(--bg-raised); }

.swatch__dot { width: .875rem; height: .875rem; border-radius: var(--r-full); border: 1px solid var(--c-dark-20); }

.composition { display: grid; gap: var(--sp-8); }

.composition__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
  padding-block: var(--sp-12);
  border-bottom: var(--bd-hairline);
  font-size: var(--t-14);
}

.composition__name { color: var(--c-dark); }
.composition__desc { display: block; font-size: var(--t-12); color: var(--fg-subtle); margin-top: var(--sp-4); }
.composition__qty { color: var(--fg-muted); white-space: nowrap; }

.pdp__actions { display: grid; gap: var(--sp-12); }
.pdp__buy-row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: center; }

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    align-items: start;
  }

  .pdp__info {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-32));
    padding-inline: calc(var(--column) * 2);
  }
}

/* ============================================================
   문의 페이지
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-48);
  width: var(--grid-width);
  margin-inline: auto;
}

.contact-form { display: grid; gap: var(--sp-24); }
.contact-form__row { display: grid; gap: var(--sp-24); }

.contact-aside { display: grid; gap: var(--sp-24); align-content: start; }

.contact-aside__media { overflow: clip; background: var(--bg-surface); aspect-ratio: 3 / 2; }
.contact-aside__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-card {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-24);
  background: var(--c-ivory);
}

.contact-card__title { font-size: var(--t-13); letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg-muted); }
.contact-card__value { font-size: var(--t-18); }
.contact-card__note { font-size: var(--t-13); color: var(--fg-subtle); }

@media (min-width: 768px) {
  .contact-form__row--2 { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.35fr 1fr; gap: var(--gutter); }
}

/* ============================================================
   검색 페이지
   ============================================================ */
.search-hero {
  display: grid;
  justify-items: center;
  gap: var(--sp-24);
  padding: var(--sp-60) var(--margin);
  text-align: center;
}

.search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: min(100%, 34rem);
  padding-bottom: var(--sp-12);
  border-bottom: var(--bd-strong);
}

.search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--t-18);
  color: var(--c-dark);
}

.search-form input:focus { outline: none; }
.search-form button { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--c-dark); }
.search-form button svg { width: 1.25rem; height: 1.25rem; }

.search-meta { font-size: var(--t-14); color: var(--fg-muted); }

.search-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }

.search-suggestions a {
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--c-dark-20);
  border-radius: var(--r-full);
  font-size: var(--t-13);
  color: var(--fg-muted);
  transition: border-color var(--d-fast) var(--ease-quart-out), color var(--d-fast) var(--ease-quart-out);
}

.search-suggestions a:hover { border-color: var(--c-dark); color: var(--c-dark); }

@media (min-width: 1024px) {
  .search-hero { padding-block: var(--sp-120) var(--sp-60); }
}

/* ============================================================
   정책 페이지
   ============================================================ */
.policy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-40);
  width: var(--grid-width);
  margin-inline: auto;
}

.policy-nav__select { width: 100%; }

.policy-nav__list { display: none; }

.policy-doc { display: grid; gap: var(--sp-40); }

.policy-doc section { display: grid; gap: var(--sp-16); scroll-margin-top: calc(var(--header-h) + var(--sp-24)); }

.policy-doc h2 {
  font-size: var(--t-24);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  padding-bottom: var(--sp-12);
  border-bottom: var(--bd-hairline);
}

.policy-doc h3 { font-size: var(--t-18); font-weight: var(--fw-medium); }

.policy-doc p,
.policy-doc li { color: var(--fg-muted); line-height: var(--lh-loose); font-size: var(--t-15); }

.policy-doc ul { display: grid; gap: var(--sp-8); }
.policy-doc li { position: relative; padding-inline-start: var(--sp-20); }
.policy-doc li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--fg-subtle); }

.policy-doc dl { display: grid; gap: var(--sp-12); }
.policy-doc dt { font-size: var(--t-15); font-weight: var(--fw-medium); color: var(--c-dark); }
.policy-doc dd { font-size: var(--t-15); color: var(--fg-muted); line-height: var(--lh-loose); }

.policy-doc table { font-size: var(--t-14); }
.policy-doc th,
.policy-doc td { padding: var(--sp-12); border: var(--bd-hairline); text-align: start; vertical-align: top; }
.policy-doc th { background: var(--c-ivory); font-weight: var(--fw-medium); }
.policy-doc td { color: var(--fg-muted); }

.policy-meta { font-size: var(--t-13); color: var(--fg-subtle); }

.table-scroll { overflow-x: auto; }

@media (min-width: 1024px) {
  .policy-layout { grid-template-columns: calc(var(--column) * 4 + var(--gutter) * 3) 1fr; gap: var(--gutter); }
  .policy-nav__select { display: none; }
  .policy-nav__list { display: grid; gap: var(--sp-12); position: sticky; top: calc(var(--header-h) + var(--sp-32)); }
  .policy-nav__list a { font-size: var(--t-14); color: var(--fg-subtle); transition: color var(--d-fast) var(--ease-quart-out); }
  .policy-nav__list a:hover,
  .policy-nav__list a[aria-current] { color: var(--c-dark); }
  .policy-doc { max-width: 68ch; }
}

/* ============================================================
   404
   ============================================================ */
.error-page {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-inline: var(--margin);
  text-align: center;
}

.error-page__inner { display: grid; justify-items: center; gap: var(--sp-20); }

.error-page__code {
  font-size: var(--t-120);
  font-weight: var(--fw-light);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--c-gold);
}

/* 인라인 링크 (약관 동의 등) */
.inline-link { text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover { color: var(--c-dark); }

/* 섹션 제목 하단 여백 */
.section-title-spaced { margin-bottom: var(--sp-40); }

/* ============================================================
   브랜드 스토리 (에디토리얼)
   ============================================================ */
.editorial { display: grid; gap: var(--section-gap); }

.editorial__lead {
  width: var(--grid-width);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--sp-24);
  text-align: center;
}

.editorial__lead p { max-width: 62ch; color: var(--fg-muted); line-height: var(--lh-loose); font-size: var(--t-18); }

.editorial__block { width: var(--grid-width); margin-inline: auto; }

.quote {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  padding-block: var(--sp-48);
  text-align: center;
}

.quote blockquote {
  max-width: 42ch;
  font-size: var(--t-28);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--c-dark);
}

.quote cite { font-size: var(--t-13); font-style: normal; letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg-subtle); }

/* ============================================================
   컬렉션 결과 헤더
   ============================================================ */
.collection-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: var(--sp-24);
  font-size: var(--t-14);
  color: var(--fg-muted);
}

/* ============================================================
   Bundle push (마카롱 박스 구성)
   ============================================================ */
.bundle {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--sp-60);
  background: var(--c-ivory);
  text-align: center;
  overflow: clip;
}

.bundle__inner { display: grid; justify-items: center; gap: var(--sp-24); width: var(--grid-width); }

.bundle__media { width: 100%; overflow: clip; aspect-ratio: 3 / 2; background: var(--bg-surface); }
.bundle__media img { width: 100%; height: 100%; object-fit: cover; }

.bundle__text { max-width: 48ch; color: var(--fg-muted); line-height: var(--lh-relaxed); }

@media (min-width: 1024px) {
  .bundle { padding-block: var(--sp-100); }
  .bundle__media { aspect-ratio: 21 / 9; }
}