@layer pages {
  /* ── Hero ─────────────────────────────────────────── */
  .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(28px, 5vw, 72px)); overflow: hidden; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
      radial-gradient(60% 50% at 82% 30%, rgba(217, 185, 143, .22), transparent 70%),
      radial-gradient(50% 40% at 10% 90%, rgba(158, 130, 108, .12), transparent 70%); }
  .hero__grid { flex: 1; display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
  @media (min-width: 1040px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }
  .hero__copy { display: grid; gap: var(--s-7); align-content: center; }
  .hero__title { font-size: var(--fs-display-xl); line-height: 1.1; letter-spacing: -.055em; color: var(--ink-strong); }
  .hero__title-detail { display: block; font-size: var(--fs-display-sm); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin-top: var(--s-6); color: var(--accent-text); }
  .hero__lead { font-size: var(--fs-body-lg); color: var(--text-sub); max-width: 34ch; line-height: 1.75; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .br-md { display: none; }
  @media (min-width: 720px) { .br-md { display: inline; } }

  .hero__visual { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; padding-bottom: 48px; }
  /* 첫 화면 안에 히어로 전체(머리말·사진·스크롤 안내)가 들어오도록 사진 높이를 화면에 맞춰요 */
  .hero__main { --hero-h: clamp(420px, calc(100svh - 340px), 760px); grid-column: 2 / -1; aspect-ratio: 4 / 5; border-radius: var(--r-sm); height: var(--hero-h); justify-self: end; width: auto; }
  .hero__main img { object-position: 50% 85%; }
  .hero__sub { position: absolute; left: 0; bottom: 0; width: 40%; aspect-ratio: 4 / 5; border-radius: var(--r-sm); box-shadow: var(--sh-3); border: 6px solid var(--bg); }
  .hero__measure { position: absolute; right: calc(15.6% - 7px); top: 61.6%; bottom: 1%; width: 14px; pointer-events: none; transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease-inout) 1.4s; }
  .hero__measure::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--ivory-50); }
  .hero__measure::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-block: 1.5px solid var(--ivory-50); }
  .is-in .hero__measure, html:not(.js) .hero__measure { transform: scaleY(1); }
  .hero__tag { position: absolute; right: calc(15.6% + 18px); top: 76%; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(28, 20, 14, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ivory-100); font-size: .8rem; opacity: 0; transform: translateY(8px); transition: all var(--d-5) var(--ease-out) 2s; }
  .hero__tag b { font-size: 1.6rem; font-weight: 500; line-height: 1; }
  .hero__tag small { grid-column: 1 / -1; font-size: .75rem; color: var(--dark-sub); margin-top: 2px; }
  .is-in .hero__tag, html:not(.js) .hero__tag { opacity: 1; transform: none; }
  .hero__card { position: absolute; right: auto; left: calc(var(--card-left, 22%) - 24px); top: 6%; width: min(210px, 46%); padding: 16px 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--sh-3); }
  .hero__card-k { font-family: var(--font-serif); font-size: .72rem; letter-spacing: .2em; color: var(--accent-text); text-transform: uppercase; }
  .hero__card dl { display: grid; gap: 8px; margin-top: 10px; }
  .hero__card dl > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
  .hero__card dt { font-size: .78rem; color: var(--text-sub); }
  .hero__card dd { margin: 0; font-size: 1.3rem; line-height: 1; }
  @media (max-width: 1039px) {
    .hero { min-height: auto; }
    .hero__visual { margin-top: var(--s-4); }
    .hero__main { grid-column: 2 / -1; height: auto; width: 100%; max-height: 72svh; }
    .hero__card { left: 4%; top: 5%; }
  }
  @media (max-width: 560px) { .hero__card { width: 168px; padding: 12px 14px; } .hero__card dd { font-size: 1.1rem; } .hero__sub { width: 44%; border-width: 4px; } }

  .hero__foot { display: flex; justify-content: space-between; align-items: flex-end; padding-block: var(--s-4) var(--s-6); color: var(--text-sub); }
  .hero__foot .scroll-cue__line { background: var(--line); }
  .hero__foot-note { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; }
  @media (max-width: 1039px) { .hero__foot { display: none; } }

  .marquee-band { padding-block: clamp(20px, 2.4vw, 36px); border-block: 1px solid var(--line-soft); color: var(--brown-700); overflow: hidden; }

  /* ── Manifesto ───────────────────────────────────── */
  .manifesto__grid { display: grid; gap: var(--s-8); }
  @media (min-width: 1040px) { .manifesto__grid { grid-template-columns: 1fr 3fr; } }
  .manifesto__side { display: grid; gap: var(--s-5); align-content: start; }
  .manifesto__text { font-size: clamp(1.6rem, 1rem + 2.5vw, 3.1rem); line-height: 1.42; letter-spacing: -.035em; font-weight: 500; color: var(--ink-strong); text-wrap: pretty; }
  .manifesto__link { margin-top: var(--s-8); }

  /* ── Numbers ─────────────────────────────────────── */
  .numbers { border-top: 1px solid var(--line-soft); }
  .numbers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
  @media (min-width: 960px) { .numbers__grid { grid-template-columns: repeat(4, 1fr); } }
  .numbers .stat { padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: var(--s-3); }
  .numbers .stat__value { margin: 0; }

  /* ── Approach / stack cards ──────────────────────── */
  .stack-cards { display: grid; gap: var(--s-6); }
  .stack-card { position: sticky; top: calc(var(--header-h) + 24px); }
  .stack-card:nth-child(2) { top: calc(var(--header-h) + 44px); }
  .stack-card:nth-child(3) { top: calc(var(--header-h) + 64px); }
  .stack-card:nth-child(4) { top: calc(var(--header-h) + 84px); }
  .stack-card__inner { display: grid; gap: var(--s-7); padding: clamp(24px, 3.4vw, 56px); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-inset), var(--sh-2); transform-origin: 50% 0; will-change: transform; min-height: min(72svh, 620px); }
  .stack-card:nth-child(even) .stack-card__inner { background: linear-gradient(var(--ivory-200), var(--ivory-200)); }
  @media (min-width: 960px) { .stack-card__inner { grid-template-columns: 1fr 1.1fr; align-items: stretch; } }
  .stack-card__copy { display: flex; flex-direction: column; gap: var(--s-5); justify-content: center; }
  .stack-card__num { display: flex; align-items: baseline; gap: var(--s-4); }
  .stack-card__num .t-num { font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .9; color: var(--accent); }
  .stack-card__en { font-family: var(--font-serif); font-size: .9rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-text); }
  .stack-card__points { display: grid; gap: 10px; margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
  .stack-card__points li { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: var(--fs-small); }
  .stack-card__points .icon { width: 16px; height: 16px; color: var(--accent-text); }
  .stack-card__media { border-radius: var(--r-md); min-height: 280px; }
  @media (max-width: 959px) {
    .stack-card, .stack-card:nth-child(n) { position: relative; top: auto; }
    .stack-card__media { aspect-ratio: 4 / 3; min-height: 0; }
    .stack-card__inner { min-height: 0; }
  }

  /* ── Studio teaser ───────────────────────────────── */
  .teaser { overflow: hidden; }
  .teaser__glow { position: absolute; width: 900px; height: 900px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(217,185,143,.16), transparent 60%); pointer-events: none; }
  .teaser__grid { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; position: relative; }
  @media (min-width: 1040px) { .teaser__grid { grid-template-columns: .8fr 1.2fr; } }
  .teaser__copy { display: grid; gap: var(--s-6); justify-items: start; }
  .teaser__controls { display: grid; gap: var(--s-5); width: 100%; max-width: 440px; padding: var(--s-6) 0; border-block: 1px solid var(--dark-line); }
  .teaser__control-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-small); color: var(--dark-sub); }
  .teaser__control-head output { font-size: 1.6rem; color: var(--dark-text); }
  .range--light::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--oak-300) var(--p), rgba(250,248,245,.18) var(--p)); }
  .range--light::-webkit-slider-thumb { background: var(--brown-900); border-color: var(--oak-300); }
  .range--light::-moz-range-progress { background: var(--oak-300); }
  .range--light::-moz-range-track { background: rgba(250,248,245,.18); }
  .teaser__result { display: flex; gap: var(--s-8); }
  .teaser__result > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; }
  .teaser__result span { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--dark-sub); }
  .teaser__result b { font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); font-weight: 400; line-height: 1; color: var(--oak-300); }
  .teaser__result small { color: var(--dark-sub); }
  .teaser__sheet { perspective: 1600px; }
  .teaser__paper { background: var(--bp-paper); border-radius: var(--r-md); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); padding: clamp(6px, 1vw, 12px); transform: rotateX(4deg) rotateY(-6deg); transition: transform var(--d-6) var(--ease-out); }
  .teaser__paper:hover { transform: none; }
  .teaser__paper .bp-svg { width: 100%; height: auto; }

  /* ── Products band / carousel ────────────────────── */
  .products-band__nav { display: flex; align-items: center; gap: var(--s-6); justify-self: end; }
  .carousel { position: relative; }
  .carousel__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: clamp(16px, 2vw, 28px);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    padding-inline: max(var(--gutter), calc((100vw - 1680px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - 1680px) / 2 + var(--gutter)));
    padding-bottom: var(--s-4); cursor: grab;
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__item { scroll-snap-align: start; }
  @media (min-width: 1280px) { .carousel__track { grid-auto-columns: 380px; } }
  .carousel__progress { height: 1px; background: var(--line); margin-top: var(--s-7); position: relative; overflow: hidden; }
  .carousel__progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brown-800); transition: transform var(--d-2) linear; height: 2px; top: -.5px; }
  @media (max-width: 959px) { .products-band__nav .cluster { display: none; } }

  /* ── Conditions ──────────────────────────────────── */
  .conditions__grid { display: grid; gap: var(--s-8); }
  @media (min-width: 1040px) { .conditions__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: start; } .conditions__panel { position: sticky; top: calc(var(--header-h) + 32px); } }
  .conditions__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
  .conditions__item { width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: 4px; text-align: left; padding: 22px 16px; border-bottom: 1px solid var(--line); position: relative; }
  .conditions__item::before { content: ""; position: absolute; inset: -1px 0; background: var(--surface); z-index: -1; opacity: 0; transition: opacity var(--d-3); border-radius: var(--r-md); }
  .conditions__num { grid-row: 1 / 3; font-size: 1.15rem; color: var(--accent-text); padding-top: 4px; }
  .conditions__name { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 600; letter-spacing: -.035em; color: var(--text-sub); transition: color var(--d-3); }
  .conditions__desc { grid-column: 2; font-size: var(--fs-small); color: var(--text-sub); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--d-4) var(--ease-out), opacity var(--d-3); }
  .conditions__arrow { grid-column: 3; grid-row: 1; align-self: center; opacity: 0; transform: translateX(-8px); transition: all var(--d-3) var(--ease-out); }
  .conditions__item[aria-selected="true"]::before { opacity: 1; box-shadow: var(--sh-2); }
  .conditions__item[aria-selected="true"] .conditions__name { color: var(--ink-strong); }
  .conditions__item[aria-selected="true"] .conditions__desc { max-height: 3em; opacity: 1; }
  .conditions__item[aria-selected="true"] .conditions__arrow { opacity: 1; transform: none; }
  .conditions__panel { position: relative; min-height: 520px; }
  .conditions__slide { position: absolute; inset: 0; display: grid; gap: var(--s-6); align-content: start; opacity: 0; transform: translateY(16px); transition: opacity var(--d-4) var(--ease-out), transform var(--d-5) var(--ease-out); pointer-events: none; }
  .conditions__slide.is-active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
  .conditions__media { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
  .conditions__media img { object-position: 50% 60%; }
  .conditions__solution { font-size: var(--fs-title-lg); font-weight: 600; letter-spacing: -.03em; }
  @media (max-width: 1039px) { .conditions__panel { min-height: 0; } }

  /* ── Cases ───────────────────────────────────────── */
  .cases-grid { display: grid; gap: clamp(24px, 3vw, 40px); list-style: none; padding: 0; }
  @media (min-width: 900px) { .cases-grid { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } .cases-grid > li:nth-child(2) { margin-top: var(--s-12); } .cases-grid > li:nth-child(3) { margin-top: var(--s-7); } }
  .case-card { display: grid; gap: var(--s-5); position: relative; }
  .case-card__media { aspect-ratio: 4 / 5; border-radius: var(--r-sm); }
  .case-card--large .case-card__media { aspect-ratio: 4 / 4.6; }
  .case-card__title { font-size: var(--fs-title-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.4; margin-top: 6px; }
  .case-card__link::after { content: ""; position: absolute; inset: 0; }
  .case-card__link { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--d-4) var(--ease-out); }
  .case-card:hover .case-card__link { background-size: 100% 1px; }
  .case-card__summary { color: var(--text-sub); font-size: var(--fs-small); margin-top: var(--s-3); line-height: 1.7; }
  .case-card img { transition: transform var(--d-6) var(--ease-out); }

  /* ── Journey line ────────────────────────────────── */
  .journey-line { display: grid; gap: 0; list-style: none; padding: 0; position: relative; }
  @media (min-width: 960px) { .journey-line { grid-template-columns: repeat(6, 1fr); } .journey-line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); } }
  .journey-line__item { display: grid; gap: 6px; padding: 0 var(--s-4) var(--s-6) 0; position: relative; }
  .journey-line__dot { width: 15px; height: 15px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--brown-800); margin-bottom: var(--s-4); position: relative; }
  .journey-line__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brown-800); }
  .journey-line__num { font-size: .95rem; color: var(--accent-text); }
  .journey-line__title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; }
  .journey-line__desc { font-size: var(--fs-small); color: var(--text-sub); }
  .journey-line__dur { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); margin-top: 4px; }
  @media (max-width: 959px) {
    .journey-line { padding-left: 28px; }
    .journey-line::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 24px; width: 1px; background: var(--line); }
    .journey-line__dot { position: absolute; left: -28px; top: 4px; margin: 0; }
    .journey-line__item { grid-template-columns: auto 1fr auto; column-gap: var(--s-3); align-items: baseline; padding-bottom: var(--s-5); }
    .journey-line__desc { grid-column: 2 / 3; }
    .journey-line__dur { grid-column: 3; grid-row: 1; }
  }

  /* ── FAQ band ────────────────────────────────────── */
  .faq-band__grid { display: grid; gap: var(--s-8); }
  @media (min-width: 1040px) { .faq-band__grid { grid-template-columns: 1fr 2fr; gap: var(--s-12); } }

  /* ── CTA band ────────────────────────────────────── */
  .cta-band { position: relative; overflow: hidden; color: var(--ivory-100); isolation: isolate; }
  .cta-band__bg { position: absolute; inset: -12% 0; z-index: -1; }
  .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
  .cta-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28,20,14,.86) 0%, rgba(28,20,14,.62) 48%, rgba(28,20,14,.3) 100%); }
  .cta-band__inner { padding-block: clamp(110px, 12vw, 200px); display: grid; gap: var(--s-6); justify-items: start; }
  .cta-band .t-display-lg { color: var(--ivory-100); }
  .cta-band .eyebrow { color: var(--oak-300); }
  .cta-band__lead { color: rgba(250,248,245,.82); max-width: 40ch; }
  .cta-band__actions { margin-top: var(--s-3); }
}