/* ============================================================
   components.css — Atoms · Molecules · Organisms
   ============================================================ */

/* ============================================================
   Button
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 3.25rem;
  padding-inline: var(--sp-24);
  border: 1px solid transparent;
  border-radius: var(--r-none);
  font-size: var(--t-16);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-slow) var(--ease-expo-out),
              color var(--d-slow) var(--ease-expo-out),
              border-color var(--d-slow) var(--ease-expo-out);
}

.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

.btn--solid {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--btn-bg);
}

.btn--outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: currentColor;
  color: var(--c-cream);
}

/* 어두운 히어로/배경 이미지 위에 놓이는 고스트 버튼.
   배경은 투명, 글자는 항상 흰색을 유지한다. */
.btn--light {
  background: transparent;
  color: #fff;
  border-color: var(--c-cream);
}

/* 기본 상태가 투명이므로 호버는 반대로 채워서 변화를 만든다. */
.btn--light:hover,
.btn--light:focus-visible {
  background: var(--c-cream);
  color: var(--c-dark);
}

.btn--sm { min-height: 2.5rem; font-size: var(--t-14); padding-inline: var(--sp-16); }
.btn--lg { min-height: 3.625rem; }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 밑줄 링크 버튼 */
.btn-link {
  position: relative;
  display: inline-block;
  padding-bottom: .25rem;
  font-size: var(--t-16);
  color: inherit;
  background: none;
  cursor: pointer;
}

.btn-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .4s var(--ease-quart-out);
}

.btn-link:hover::after,
.btn-link:focus-visible::after { transform: scaleX(0); transform-origin: right center; }

/* ============================================================
   Badge · Eyebrow · Price
   ============================================================ */
.badge {
  display: inline-block;
  padding: .25rem .625rem;
  background: var(--c-gold);
  color: var(--c-gold-dark);
  font-size: var(--t-12);
  font-style: italic;
  letter-spacing: var(--tr-wide);
  white-space: nowrap;
}

.badge--sand { background: var(--c-sand); color: var(--c-dark); }
.badge--green { background: var(--c-green); color: var(--c-dark); }
.badge--pink { background: var(--c-pink); color: var(--c-dark); }

.price { font-size: var(--t-16); font-weight: var(--fw-medium); color: var(--fg-muted); }
.price s { margin-inline-end: var(--sp-8); opacity: .55; font-weight: var(--fw-regular); }

/* ============================================================
   Product card
   ============================================================ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__media {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--bg-surface);
  aspect-ratio: var(--card-ratio);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-image) var(--ease-expo-out);
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img { transform: scale(1.04); }

.product-card__badge {
  position: absolute;
  top: var(--sp-12);
  inset-inline-start: var(--sp-12);
  z-index: var(--z-raised);
}

.product-card__body {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-16);
  text-align: center;
}

.product-card__collection {
  font-size: var(--t-12);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.product-card__title {
  font-size: var(--t-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--c-dark);
}

.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-card--feature .product-card__media { aspect-ratio: 1 / 1; }

@media (min-width: 1024px) {
  .product-card--feature { grid-column: span 2; grid-row: span 2; }
  .product-card--feature .product-card__media { aspect-ratio: auto; flex: 1; }
  .product-card--feature .product-card__title { font-size: var(--t-20); }
}

/* ============================================================
   Product grid
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  column-gap: var(--gutter);
  row-gap: var(--sp-32);
  width: 100%;
}

.product-grid > .product-card--feature { grid-column: span 2; }

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--gutter); }
}

/* ============================================================
   Tab filter
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  width: 100%;
}

.tabs__item { display: flex; align-items: center; gap: var(--sp-16); }

.tabs__item:not(:last-child)::after {
  content: "·";
  color: var(--fg-subtle);
}

.tabs__link {
  font-size: var(--t-16);
  color: var(--fg-subtle);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.tabs__link:hover,
.tabs__link[aria-current] { color: var(--c-dark); }

@media (min-width: 1024px) {
  .tabs { gap: var(--sp-20); }
  .tabs__item { gap: var(--sp-20); }
  .tabs__link { font-size: var(--t-24); }
}

/* ============================================================
   Filter bar (PLP sticky)
   ============================================================ */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: 3.25rem;
  padding-inline: var(--margin);
  background: var(--c-cream);
  border-bottom: var(--bd-hairline);
}

.filter-bar__scroller {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--sp-12);
}

.filter-bar__scroller::-webkit-scrollbar { display: none; }

.filter-bar__link {
  font-size: var(--t-14);
  white-space: nowrap;
  color: var(--fg-subtle);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.filter-bar__link:hover,
.filter-bar__link[aria-current] { color: var(--c-dark); }

.filter-bar__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: none;
  font-size: var(--t-14);
}

.filter-bar__sort select {
  border: 0;
  background: transparent;
  font-size: var(--t-14);
  color: var(--c-dark);
  cursor: pointer;
}

/* 필터 칩 */
.chip {
  display: grid;
  place-items: center;
  min-width: 3.75rem;
  height: 3.75rem;
  padding-inline: var(--sp-12);
  border: 1px solid var(--c-dark-20);
  border-radius: var(--r-full);
  font-size: var(--t-16);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-quart-out),
              background-color var(--d-fast) var(--ease-quart-out);
}

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

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { padding-block: var(--sp-16); }

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }

.breadcrumb li { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--t-13); color: var(--fg-subtle); }

.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--fg-subtle); }

.breadcrumb a:hover { color: var(--c-dark); text-decoration: underline; text-underline-offset: 3px; }

.breadcrumb [aria-current] { color: var(--c-dark); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: clip;
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.hero--tall { min-height: 88svh; }
.hero--compact { min-height: 60svh; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 55%, rgba(29, 26, 23, .55) 0%, rgba(29, 26, 23, 0) 100%),
    linear-gradient(180deg,
      rgba(29, 26, 23, .5) 0%,
      rgba(29, 26, 23, .3) 38%,
      rgba(29, 26, 23, .58) 100%);
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-20);
  width: var(--grid-width);
  padding-block: var(--sp-96);
}

.hero__title {
  font-size: var(--t-40);
  font-weight: var(--fw-light);
  line-height: var(--lh-none);
  letter-spacing: var(--tr-tightest);
  text-transform: uppercase;
  color: #fff;
  max-width: 18ch;
}

.hero__eyebrow { color: rgba(255, 255, 255, .82); }

.hero__body {
  max-width: 46ch;
  font-size: var(--t-16);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, .9);
}

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-12); }

/* 페이지 헤더 (히어로 없는 서브 페이지) */
.page-header {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  padding: var(--sp-60) var(--margin);
  text-align: center;
}

.page-header__lead { max-width: 52ch; color: var(--fg-muted); line-height: var(--lh-relaxed); }

@media (min-width: 1024px) {
  .page-header { padding-block: var(--sp-120) var(--sp-100); }
}

/* ============================================================
   Diptych
   ============================================================ */
.diptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
  align-items: center;
}

.diptych__media {
  position: relative;
  overflow: clip;
  background: var(--bg-surface);
  aspect-ratio: 3 / 2;
}

.diptych__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-image) var(--ease-expo-out);
}

.diptych:hover .diptych__media img { transform: scale(1.03); }

.diptych__body { display: grid; gap: var(--sp-16); }

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

.diptych__actions { display: flex; flex-wrap: wrap; gap: var(--sp-16); margin-top: var(--sp-8); }

@media (min-width: 1024px) {
  .diptych { grid-template-columns: 1fr 1fr; gap: var(--gutter); min-height: 82svh; align-items: stretch; }
  .diptych__media { aspect-ratio: auto; height: 100%; }
  .diptych__body { align-self: center; }
  .diptych--reverse .diptych__media { order: 2; }
  .diptych__body { padding-inline: calc(var(--column) * 1.5); }
}

/* 배경 위 딥틱 */
.diptych-bg {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70svh;
  padding-block: var(--sp-96);
  overflow: clip;
  isolation: isolate;
  color: #fff;
}

.diptych-bg__media { position: absolute; inset: 0; z-index: -2; }
.diptych-bg__media img { width: 100%; height: 100%; object-fit: cover; }

.diptych-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(29, 26, 23, .58) 0%, rgba(29, 26, 23, .3) 100%),
    rgba(29, 26, 23, .38);
}

.diptych-bg__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-20);
  width: var(--grid-width);
  text-align: center;
}

.diptych-bg__title { color: #fff; }
.diptych-bg__text { max-width: 52ch; color: rgba(255, 255, 255, .88); line-height: var(--lh-relaxed); }

@media (min-width: 1024px) {
  .diptych-bg { min-height: 88svh; }
}

/* ============================================================
   Paragraph section
   ============================================================ */
.paragraph-section {
  display: grid;
  justify-items: center;
  gap: var(--sp-24);
  width: var(--grid-width);
  margin-inline: auto;
  margin-block: var(--sp-60);
  text-align: center;
}

.paragraph-section p {
  max-width: 60ch;
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   Form
   ============================================================ */
.field { display: grid; gap: var(--sp-8); }

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

.field__label .req { color: var(--c-danger); }

.field__control {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--sp-12) 0;
  border: 0;
  border-bottom: var(--bd-input);
  border-radius: var(--r-none);
  background: transparent;
  color: var(--c-dark);
  font-size: var(--t-16);
  transition: border-color var(--d-fast) var(--ease-quart-out);
}

.field__control::placeholder { color: var(--fg-subtle); }
.field__control:focus { outline: none; border-bottom-color: var(--c-dark); }
.field__control:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 4px; }

textarea.field__control { min-height: 8.75rem; resize: vertical; line-height: var(--lh-relaxed); }

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2c2a' stroke-width='1.25'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .25rem center;
  background-size: 1.125rem;
  padding-right: 2rem;
  cursor: pointer;
}

.field__error {
  font-size: var(--t-13);
  color: var(--c-danger);
}

.field__control[aria-invalid="true"] { border-bottom-color: var(--c-danger); }

.field--inline { position: relative; }

.field--inline .field__control { padding-right: 5rem; }

.field--inline .field__submit {
  position: absolute;
  inset-inline-end: 0;
  bottom: .25rem;
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-12);
  font-size: var(--t-14);
  color: var(--c-dark);
  background: none;
  cursor: pointer;
}

.field--inline .field__submit:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 체크박스 / 라디오 */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-12);
  align-items: start;
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  cursor: pointer;
}

.check input {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: .125rem;
  border: 1px solid var(--c-dark-40);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-quart-out),
              border-color var(--d-fast) var(--ease-quart-out);
}

.check input[type="radio"] { border-radius: var(--r-full); }

.check input:checked {
  background: var(--c-dark);
  border-color: var(--c-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefbf4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  background-size: .75rem;
  background-position: center;
  background-repeat: no-repeat;
}

.check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3px var(--c-cream); }

.form-note { font-size: var(--t-12); color: var(--fg-subtle); }

.form-status {
  padding: var(--sp-20);
  border: 1px solid var(--c-dark-20);
  background: var(--c-ivory);
  font-size: var(--t-14);
  color: var(--fg-muted);
}

.form-status--ok { border-color: var(--c-green); background: var(--c-green); color: var(--c-dark); }

/* 소셜 링크 */
.social-links { display: flex; align-items: center; gap: var(--sp-20); }

.social-links a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-dark-89);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.social-links a:hover { color: var(--c-dark); }
.social-links svg { width: 1.25rem; height: 1.25rem; }

/* 뉴스레터 */
.newsletter { display: grid; gap: var(--sp-16); }
.newsletter__title { font-size: var(--t-13); font-weight: var(--fw-medium); letter-spacing: var(--tr-widest); text-transform: uppercase; }
.newsletter__note { font-size: var(--t-12); color: var(--fg-subtle); }

/* ============================================================
   Accordion
   ============================================================ */
.accordion { border-top: var(--bd-hairline); }

.accordion__item { border-bottom: var(--bd-hairline); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
  padding-block: var(--sp-20);
  font-size: var(--t-16);
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--d-fast) var(--ease-quart-out);
}

.accordion__item[open] .accordion__summary svg { transform: rotate(180deg); }

.accordion__panel {
  padding-bottom: var(--sp-24);
  font-size: var(--t-15);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.accordion__panel > * + * { margin-top: var(--sp-12); }
.accordion__panel ul { display: grid; gap: var(--sp-8); }
.accordion__panel li { padding-inline-start: var(--sp-16); position: relative; }
.accordion__panel li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--fg-subtle); }

/* ============================================================
   Quantity stepper
   ============================================================ */
.stepper {
  display: inline-flex;
  align-items: center;
  border: var(--bd-strong);
}

.stepper button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--c-dark);
}

.stepper button svg { width: .875rem; height: .875rem; }
.stepper button[disabled] { opacity: .3; pointer-events: none; }

.stepper input {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--t-16);
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   Cart drawer
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(29, 26, 23, .45);
  opacity: var(--overlay-o, 0);
  visibility: var(--overlay-v, hidden);
  transition: opacity var(--d-base) var(--ease-quart-out), visibility var(--d-base);
}

.cart-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: min(92vw, 27rem);
  background: var(--c-cream);
  color: var(--c-dark);
  transform: translateX(var(--drawer-x, 100%));
  transition: transform var(--d-base) var(--ease-quint-inout);
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-20);
  border-bottom: var(--bd-hairline);
}

.cart-drawer__title { font-size: var(--t-16); letter-spacing: var(--tr-wide); text-transform: uppercase; }

.cart-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-20); }

.cart-drawer__foot { padding: var(--sp-20); border-top: var(--bd-hairline); display: grid; gap: var(--sp-16); }

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  border-bottom: var(--bd-hairline);
}

.cart-line__media { background: var(--bg-surface); aspect-ratio: var(--card-ratio); overflow: clip; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-size: var(--t-14); line-height: var(--lh-snug); }
.cart-line__meta { font-size: var(--t-12); color: var(--fg-subtle); margin-top: var(--sp-4); }
.cart-line__price { font-size: var(--t-14); font-weight: var(--fw-medium); white-space: nowrap; }
.cart-line__remove { font-size: var(--t-12); color: var(--fg-subtle); text-decoration: underline; text-underline-offset: 3px; }

.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--t-16); }
.cart-total strong { font-weight: var(--fw-semibold); }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  padding: var(--sp-60) var(--margin);
  text-align: center;
}

.empty-state__body { max-width: 44ch; color: var(--fg-muted); line-height: var(--lh-relaxed); }

/* ============================================================
   Gallery
   ============================================================ */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar { display: none; }

.gallery__item {
  scroll-snap-align: center;
  background: var(--bg-surface);
  overflow: clip;
  aspect-ratio: var(--card-ratio);
}

.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-dots { display: flex; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-16); }

.gallery-dots button {
  width: .5rem;
  height: .5rem;
  border-radius: var(--r-full);
  background: var(--c-dark-20);
  transition: background-color var(--d-fast) var(--ease-quart-out);
}

.gallery-dots button[aria-current="true"] { background: var(--c-dark); }

@media (min-width: 1024px) {
  .gallery {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    row-gap: var(--gutter);
    overflow: visible;
  }

  .gallery-dots { display: none; }
}

/* ============================================================
   Feature list (배송/보증 안내)
   ============================================================ */
.feature-list { display: grid; gap: var(--sp-16); }

.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-12);
  align-items: center;
  font-size: var(--t-14);
  color: var(--fg-muted);
}

.feature-list svg { width: 1.25rem; height: 1.25rem; color: var(--c-dark); }

/* 카드 그리드 (매장·연락처) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gutter);
}

/* ============================================================
   Timeline (브랜드 스토리)
   ============================================================ */
.timeline { display: grid; gap: var(--sp-40); }

.timeline__item {
  display: grid;
  gap: var(--sp-8);
  padding-top: var(--sp-24);
  border-top: var(--bd-hairline);
}

.timeline__year {
  font-size: var(--t-28);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tightest);
  color: var(--c-gold-dark);
}

.timeline__text { color: var(--fg-muted); line-height: var(--lh-relaxed); }

@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: var(--sp-40) var(--gutter); }
}

@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Gallery grid (에디토리얼)
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

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

.gallery-grid__media { overflow: clip; background: var(--bg-surface); aspect-ratio: var(--card-ratio); }
.gallery-grid__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-image) var(--ease-expo-out); }
.gallery-grid figure:hover .gallery-grid__media img { transform: scale(1.04); }
.gallery-grid figcaption { font-size: var(--t-13); color: var(--fg-subtle); text-align: center; }

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  inset-inline: var(--sp-16);
  bottom: var(--sp-16);
  z-index: var(--z-toast);
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - var(--sp-32));
  padding: var(--sp-12) var(--sp-24);
  background: var(--c-dark);
  color: var(--c-cream);
  font-size: var(--t-14);
  opacity: 0;
  transform: translateY(1rem);
  visibility: hidden;
  transition: opacity var(--d-fast) var(--ease-quart-out),
              transform var(--d-fast) var(--ease-quart-out),
              visibility var(--d-fast);
}

.toast.is-visible { opacity: 1; transform: none; visibility: visible; }