@font-face {
  font-family: Pretendard;
  src: url('./fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: MaruBuri;
  src: url('./fonts/MaruBuri-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: MaruBuri;
  src: url('./fonts/MaruBuri-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: MaruBuri;
  src: url('./fonts/MaruBuri-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: MaruBuri;
  src: url('./fonts/MaruBuri-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: MaruBuri;
  src: url('./fonts/MaruBuri-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #efe9de;
  --ink: #372f25;
  --muted: #756a59;
  --line: #cfc4b2;
  --seal: #98503b;
  --olive: #343c30;
  --serif: 'Batang', '바탕', 'Noto Serif CJK KR', 'Nanum Myeongjo', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Pretendard, sans-serif; -webkit-font-smoothing: antialiased; }
body:after { content: ''; position: fixed; inset: 0; z-index: 20; pointer-events: none; background: url('./paper-grain.svg'); opacity: .28; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
figure, p, h1, h2, h3 { margin: 0; }
p { line-height: 1.95; word-break: keep-all; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; word-break: keep-all; letter-spacing: -.055em; }
img { display: block; }
.skip { position: fixed; left: 20px; top: -80px; z-index: 30; background: var(--paper); padding: 15px; }
.skip:focus { top: 12px; }
.header { position: fixed; inset: 0 0 auto; z-index: 10; height: 94px; padding: 0 4%; display: flex; align-items: center; color: var(--paper); gap: 42px; transition: background .35s, color .35s; }
.header.is-paper, .header:has(.menu[open]) { background: rgba(239,233,222,.91); color: var(--ink); backdrop-filter: blur(14px); border-bottom: 1px solid #65583d16; }
.brand { display: block; flex-shrink: 0; }
.crop { position: relative; display: block; overflow: hidden; }
.crop img { position: absolute; height: auto; max-width: none; }
.logo { width: 160px; aspect-ratio: 480 / 154; mix-blend-mode: multiply; }
.logo img { width: 326.6667%; left: -146.875%; top: -427.27%; }
.header .brand { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.header.is-paper .brand, .header:has(.menu[open]) .brand { filter: none; mix-blend-mode: multiply; }
.desktop-nav { display: flex; gap: 32px; margin-left: auto; font-size: 12px; }
.desktop-nav a, .header-shop { padding: 12px 0; }
.desktop-nav a { position: relative; }
.desktop-nav a:after { content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.desktop-nav a:hover:after { transform: scaleX(1); }
.header-shop { font-size: 12px; display: flex; gap: 25px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 40px; height: 40px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { height: 1px; width: 19px; background: currentColor; transition: transform .2s; }
.menu[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu nav { position: absolute; right: -23px; top: 59px; width: min(390px, 100vw); padding: 20px 28px 28px; background: var(--paper); color: var(--ink); display: grid; gap: 8px; font-size: 15px; }
.menu nav a { padding: 14px 0; }
.hero-track { height: 135svh; }
.hero { height: 100svh; min-height: 660px; position: sticky; top: 0; isolation: isolate; overflow: hidden; background: #302b22; color: var(--paper); }
.hero-image { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 57%; }
.hero:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,21,15,.4), transparent 70%), linear-gradient(0deg,rgba(24,21,15,.45),transparent 35%); }
.hero-copy { position: absolute; left: 7%; top: 28%; }
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .08em; margin-bottom: 26px; }
h1 { font-size: clamp(52px,6vw,88px); line-height: 1.3; }
h1 span { display: inline-block; margin-left: .45em; }
.intro { font-size: 13px; color: #e1d9ca; margin-top: 30px; }
.hero-bottom { position: absolute; bottom: 40px; left: 4%; right: 4%; display: flex; align-items: end; justify-content: space-between; }
.discover { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .04em; }
.scroll-line { display: inline-block; width: 1px; height: 42px; background: #ffffff36; position: relative; overflow: hidden; }
.scroll-line:after { content: ''; position: absolute; width: 1px; height: 24px; background: #e9e1d1; top: var(--scroll-mark,0px); }
.hero-caption { font-size: 10px; line-height: 1.8; color: #e1d9ca; text-align: right; }
.hero-index { position: absolute; top: 51%; left: 2%; writing-mode: vertical-rl; transform: rotate(180deg); font: 8px Georgia, serif; letter-spacing: .18em; color: #d2c8b6; }
.hero-index span { margin: 12px 0; }
.story { padding: 70px 8% 140px; position: relative; background: var(--paper); }
.section-label { display: flex; align-items: center; gap: 22px; font-size: 10px; letter-spacing: .04em; }
.section-label > span:first-child { font: 11px Georgia,serif; color: var(--seal); }
.section-label .label-en { margin-left: auto; font: 9px Georgia,serif; letter-spacing: .12em; color: var(--muted); }
.manifesto { text-align: center; padding: 115px 0 130px; position: relative; }
.manifesto:before { content: ''; display: block; height: 28px; width: 1px; margin: 0 auto 28px; background: var(--seal); }
.manifesto h2 { font-size: clamp(33px,4.2vw,72px); line-height: 1.55; letter-spacing: -.065em; }
.story-line { display: block; }
.manifesto > p { margin-top: 32px; font-size: 13px; color: var(--muted); }
.origin { max-width: 1240px; margin: 0 auto; padding-top: 70px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.05fr 1fr; gap: 15%; align-items: center; }
.origin-photo { min-width: 0; padding: 14px; background: #f7f3e9; box-shadow: 0 18px 50px #55432913; }
.rice-photo { aspect-ratio: 390/445; }
.rice-photo img { width: 402.0513%; left: -59.7436%; top: -115.0562%; }
.origin-photo figcaption { margin-top: 16px; color: var(--muted); font-size: 9px; }
.origin-copy .eyebrow { color: var(--seal); margin-bottom: 24px; }
h3 { font-size: clamp(32px,3vw,44px); line-height: 1.5; }
.origin-copy > p:not(.eyebrow) { font-size: 14px; line-height: 2.1; color: var(--muted); margin-top: 28px; }
.origin-note { display: flex; gap: 60px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 35px; font-size: 10px; }
.products { padding: 60px 5% 32px; background: linear-gradient(125deg,#2d352a,#424839); color: #f0ebdd; }
.products .section-label { margin: 0 3% 60px; }
.products .section-label > span:first-child { color: #b8a785; }
.products .section-label .label-en { color: #c8c5b1; }
.product-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8%; align-items: center; }
.product-image { min-width: 0; overflow: hidden; padding: 12px; background: #d1c2a7; box-shadow: 0 24px 60px #10180e38; }
.product-photo { aspect-ratio: 503/343; }
.product-photo img { width: 311.7296%; left: -115.507%; top: -52.187%; }
.product-content { padding-right: 4%; }
.product-content .eyebrow { color: #c9bc9e; }
.product-content h2 { font-size: clamp(30px,3vw,45px); line-height: 1.5; }
.product-content > p:not(.eyebrow) { font-size: 14px; color: #d3d1c0; margin-top: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 65px; font-size: 11px; border-bottom: 1px solid #8c8170; padding: 0 0 13px; margin-top: 35px; }
.text-link span, .header-shop span { display: inline-block; transition: transform .3s; }
.text-link:hover span, .header-shop:hover span { transform: translate(3px,-3px); }
.products .text-link { border-bottom-color: #cdc1a47a; }
.product-footnote { display: flex; justify-content: space-between; padding: 27px 3% 0; margin-top: 55px; border-top: 1px solid #d6ccb331; font-size: 10px; color: #c8c5b1; }
.closing { text-align: center; position: relative; isolation: isolate; overflow: hidden; padding: 135px 5% 120px; }
.closing:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#efe9de80,#efe9decc),url('./atelier-backdrop.webp') center 42% / cover; }
.closing-kicker { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.closing h2 { font-size: clamp(48px,6vw,80px); line-height: 1.4; margin-top: 28px; }
.closing .text-link { gap: 100px; margin-top: 35px; }
.closing-signature { position: absolute; bottom: 50px; right: 6%; writing-mode: vertical-rl; font: 12px var(--serif); letter-spacing: .2em; color: #978774; }
footer { margin: 0 4%; padding: 32px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 32px; }
footer .logo { width: 135px; }
footer p { font-size: 10px; color: var(--muted); }
footer > span { margin-left: auto; font: 9px Georgia,serif; letter-spacing: .12em; color: var(--muted); }
.back-top { margin-left: 40px; font-size: 10px; }
.back-top span { margin-left: 16px; }

/* New site footer (.ft-*). Uses its own class names rather than the bare
   `footer`/`.logo`/`.back-top` selectors above so the old rules — and the
   old footer's rules inside the existing Tablet/Mobile media queries —
   simply don't match this markup instead of needing to be edited/removed.
   Desktop only, matching a 1440px reference; no new media query added. */
.ft { background: var(--color-secondary-cream); margin: 0; border-top: none; padding: 72px 80px 40px; display: block; }
/* Grid (not flex) so every column starts at the same top edge. Only the
   brand block keeps a divider (separating the logo/tagline from the link
   columns) — the nav/phone columns no longer draw one between themselves,
   just the grid's own column-gap, so the row reads as one clean group
   instead of a fence of repeated borders. */
.ft-main { display: grid; grid-template-columns: minmax(0, 260px) auto auto auto; column-gap: 32px; align-items: stretch; }
.ft-brand { padding-right: 32px; border-right: 1px solid var(--color-brown-100); }
.ft-logo { display: block; width: 140px; height: auto; }
.ft-tagline { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--muted); margin-top: 16px; }
.ft-col-title { font: var(--type-subtitle-m); font-weight: 700; letter-spacing: var(--type-subtitle-m-tracking); color: var(--lp-ink); }
.ft-links { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ft-links a { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--muted); text-decoration: none; transition: color .2s ease; }
.ft-links a:hover { color: var(--lp-brown); }
/* Sized and weighted to sit alongside the other columns' copy instead of
   dominating the row — same scale as .ft-col-title, same top offset as
   .ft-links, just distinguished by weight. */
.ft-phone-number { font: var(--type-subtitle-m); letter-spacing: var(--type-subtitle-m-tracking); font-weight: 700; color: var(--lp-ink); margin-top: 16px; }
/* Bottom bar: same 80px side padding inherited from .ft, so the rule above
   it lines up with the content grid above. align-items: flex-start so
   every item — the two-line 법인명/대표자 items and the single-line
   links/copyright alike — starts from the same top edge.
   Dividers are a fixed-size `::after` (not a border on each item's own
   box) so every one renders at the same height/thickness/color no matter
   whether its item is one line (the links) or two (법인명/대표자) —
   a border-right would otherwise stretch to match each box's own height.
   14px keeps it close to a single line's cap-height rather than the full
   two-line block. `:not(:last-of-type)` drops it after the last link
   (개인정보취급방침) so nothing sits between it and the copyright line. */
.ft-bottom { display: flex; align-items: flex-start; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-brown-100); }
.ft-bottom-item { position: relative; padding-right: 20px; }
.ft-bottom-item::after,
.ft-bottom-link:not(:last-of-type)::after {
  content: ''; position: absolute; top: 2px; right: 0; width: 1px; height: 14px;
  background: var(--color-brown-100);
}
.ft-bottom-label { font: var(--type-caption); font-weight: 700; color: var(--lp-ink); }
.ft-bottom-value { font: var(--type-caption); color: var(--muted); margin-top: 4px; }
.ft-bottom-link { position: relative; font: var(--type-caption); color: var(--muted); text-decoration: none; padding-right: 20px; transition: color .2s ease; }
.ft-bottom-link:hover { color: var(--lp-brown); }
.ft-copyright { font: var(--type-caption); color: var(--muted); margin-left: auto; }
/* 꼬리 — 900px 이하(2026-10-06). 위 규칙은 데스크톱 전용이라 좁은 화면에서 4칸 가로 배치가 그대로였고
   («자주 묻 / 는 질문» 처럼 한 글자씩 꺾이고 로고가 링크를 덮었다), 옛 페이지용 `footer p { display:none }`
   (900px 이하)이 소개 글·전화번호·법인명·저작권까지 숨기고 있었다. */
.ft-links a, .ft-bottom-link { white-space: nowrap; }
@media (max-width: 900px) {
  .ft { padding: 56px 6% 32px; }
  .ft p { display: block; }
  .ft-main { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; column-gap: 24px; }
  .ft-brand { grid-column: 1 / -1; padding: 0 0 24px; border-right: none; border-bottom: 1px solid var(--color-brown-100); }
  .ft-bottom { flex-wrap: wrap; row-gap: 12px; margin-top: 32px; }
  .ft-copyright { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  .ft-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-phone { grid-column: 1 / -1; }
}
/* Scroll positions drive these variables; there is no continuous animation loop. */
.motion-ready .hero-image { transform: scale(var(--hero-scale,1.055)); transform-origin: 70% 60%; }
.motion-ready .hero-copy { transform: translateY(var(--hero-copy-y,0px)); opacity: var(--hero-opacity,1); }
.motion-ready .story-line { background: linear-gradient(90deg,var(--ink) var(--ink-progress,100%),#b7b0a3 var(--ink-progress,100%)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.motion-ready .origin-photo .crop { clip-path: inset(var(--origin-inset,0%) 0); }
.motion-ready .origin-copy { transform: translateY(var(--origin-y,0px)); }
.motion-ready .product-image .crop { transform: scale(var(--product-scale,1)); }
.motion-ready .product-image { clip-path: inset(var(--product-inset,0%) 0); }
.motion-ready .closing h2 { transform: translateY(var(--closing-y,0px)); }
@media(min-width:1600px) { .story { padding-left: 12%; padding-right: 12%; } .products { padding-left: 8%; padding-right: 8%; } }
@media(max-width:900px) { .header { gap: 28px; } .hero-copy { left: 8%; } .origin { gap: 10%; } .product-layout { gap: 5%; } .product-content h2 { font-size: 30px; } footer p { display: none; } }
@media(max-width:640px) {
  html { scroll-padding-top: 80px; }
  .header { height: 80px; padding: 0 6%; }
  .header .logo { width: 134px; }
  .desktop-nav,.header-shop { display: none; }
  .menu { display: block; margin-left: auto; }
  .hero-track { height: 112svh; }
  .hero { min-height: 660px; }
  .hero-image img { object-position: 65% center; }
  .hero:after { background: linear-gradient(180deg,rgba(24,21,15,.25),rgba(24,21,15,.12) 50%,rgba(24,21,15,.5)),linear-gradient(90deg,rgba(24,21,15,.4),transparent); }
  .hero-copy { top: 22%; left: 7%; right: 5%; }
  .hero-copy .eyebrow { font-size: 10px; margin-bottom: 22px; }
  h1 { font-size: clamp(45px,12vw,65px); }
  h1 span { margin-left: 0; }
  .intro { font-size: 11px; margin-top: 24px; }
  .hero-index { display: none; }
  .hero-bottom { left: 7%; right: 7%; bottom: 28px; }
  .hero-caption { font-size: 8px; }
  .discover { font-size: 9px; gap: 10px; }
  .scroll-line { height: 32px; }
  .story { padding: 42px 7% 75px; }
  .section-label { gap: 14px; font-size: 9px; }
  .section-label .label-en { font-size: 7px; letter-spacing: .06em; }
  .manifesto { padding: 75px 0 80px; }
  .manifesto h2 { font-size: clamp(25px,6.6vw,36px); line-height: 1.75; }
  .manifesto > p { font-size: 12px; margin-top: 25px; }
  .origin { grid-template-columns: 1fr; gap: 36px; }
  .origin-photo { width: 82%; }
  .origin-copy { padding-left: 15%; }
  .origin-copy h3 { font-size: 32px; }
  .origin-copy .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .origin-copy > p:not(.eyebrow) { font-size: 13px; margin-top: 22px; }
  .origin-note { gap: 35px; margin-top: 25px; font-size: 9px; }
  .products { padding: 38px 0 25px; }
  .products .section-label { margin: 0 7% 34px; }
  .product-layout { grid-template-columns: 1fr; gap: 38px; }
  .product-image { width: 93%; }
  .product-content { padding: 0 7%; }
  .product-content h2 { font-size: 31px; }
  .product-content .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .product-content > p:not(.eyebrow) { font-size: 13px; margin-top: 20px; }
  .text-link { font-size: 10px; margin-top: 27px; }
  .product-footnote { margin: 38px 7% 0; padding: 20px 0 0; display: block; font-size: 9px; }
  .product-footnote p { margin-top: 8px; }
  .closing { padding: 85px 7% 90px; }
  .closing h2 { font-size: 51px; margin-top: 22px; }
  .closing-signature { right: 7%; bottom: 32px; font-size: 9px; }
  footer { margin: 0 7%; flex-wrap: wrap; gap: 24px; padding: 28px 0; }
  footer .logo { width: 125px; }
  footer > span { font-size: 8px; }
  .back-top { margin-left: 0; width: 100%; font-size: 9px; text-align: right; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hero-track { height: auto; }
  .hero { position: relative; }
  .motion-ready .hero-image,.motion-ready .hero-copy,.motion-ready .origin-copy,.motion-ready .product-image .crop,.motion-ready .closing h2 { transform: none; opacity: 1; }
  .motion-ready .origin-photo .crop,.motion-ready .product-image { clip-path: none; }
  .motion-ready .story-line { background: none; color: var(--ink); }
  * { transition: none!important; }
}
/* Composite the white logo against the photograph at the header layer. */
.header:not(.is-paper):not(:has(.menu[open])) { mix-blend-mode: screen; }
/* One reversible scene: the table leaves, the centered pouch receives and shrinks. */
.journey-layer { display: none; }
/* 100svh stage + 380svh of scrolling shortened to 67.5% in pouch-journey.js. */
.journey-loading .hero-track,.journey-enabled .hero-track { height: 356.5svh; }
.journey-enabled .hero { background: var(--paper); }
.journey-enabled .hero-image { transform: translateY(var(--journey-bg-y,0px)); z-index: 0; }
.journey-enabled .hero:after { transform: translateY(var(--journey-bg-y,0px)); z-index: 1; pointer-events: none; }
.journey-enabled .hero-copy { z-index: 5; opacity: 1; transform: translateY(var(--journey-hero-y,0px)); }
.journey-enabled .hero-bottom,.journey-enabled .hero-index { z-index: 5; transform: translateY(var(--journey-hero-y,0px)); }
.journey-enabled .journey-layer { display: block; position: absolute; top: 0; left: 0; }
.journey-enabled .atelier-surface { inset: 0; z-index: -1; overflow: hidden; background: #e6ddce; }
.atelier-surface:before { content: ''; position: absolute; inset: -5%; background: url('./atelier-backdrop.webp') center / cover; transform: translateY(var(--atelier-shift,0px)); opacity: .84; }
.atelier-surface:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#efe9de08 40%,#efe9de40 62%,var(--paper) 100%); }
.journey-shadow { z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse,#49351f 0%,#49351f60 35%,transparent 72%); filter: blur(6px); }
.journey-food { z-index: 3; pointer-events: none; transform-origin: center; filter: brightness(.91) saturate(.82); }
.journey-food svg { width: 100%; height: 100%; overflow: visible; display: block; }
.journey-pack-copy { z-index: 3; color: var(--ink); width: 32%; }
.journey-pack-copy h2 { font-size: clamp(30px,4.6vw,70px); line-height: 1.42; }
.journey-pack-copy .eyebrow { color: var(--seal); }
.journey-bag-rear { z-index: 2; filter: drop-shadow(8px 14px 14px #48362428); }
.journey-bag-lip { z-index: 4; }
.journey-bag-rear,.journey-bag-lip { transform-origin: center top; pointer-events: none; }
.pouch-art { width: 100%; height: 100%; display: block; overflow: visible; }
/* Continue the real story beneath the small pouch, within the same viewport. */
.journey-loading .story,.journey-enabled .story { margin-top: -42svh; padding-top: 24px; background: linear-gradient(180deg,#efe9de00,var(--paper) 100px); }
.story > .section-label { border-top: 1px solid var(--line); padding-top: 20px; }
.journey-loading .manifesto,.journey-enabled .manifesto { padding-top: 40px; padding-bottom: 85px; }
@media(max-width:640px) {
  .journey-loading .hero-track,.journey-enabled .hero-track { height: 329.5svh; }
  .journey-loading .hero { min-height: 0; }
  .journey-enabled .hero { min-height: 0; height: 100svh; }
  .journey-pack-copy { width: 86%; text-align: center; }
  .journey-pack-copy h2 { font-size: 39px; line-height: 1.35; }
  .journey-pack-copy .eyebrow { font-size: 9px; margin-bottom: 15px; }
  .journey-loading .story,.journey-enabled .story { margin-top: -34svh; }
  .journey-loading .manifesto,.journey-enabled .manifesto { padding-top: 34px; padding-bottom: 65px; }
  .atelier-surface:before { background-position: 86% center; }
  .manifesto:before { height: 22px; margin-bottom: 22px; }
  .origin { padding-top: 38px; }
  .origin-photo { padding: 9px; }
  .product-image { padding: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey-enabled .hero-track { height: auto; }
  .journey-enabled .journey-layer { display: none; }
  .journey-enabled .hero-image,.journey-enabled .hero:after,.journey-enabled .hero-copy,.journey-enabled .hero-bottom,.journey-enabled .hero-index { transform: none; }
}

/* ==========================================================================
   1depth 메인 랜딩페이지 (Figma node 41:979) — static implementation.
   Independent "lp-" (landing page) namespace: does not reuse or alter the
   .hero/.story/.products/.closing rules above, which belong to the older
   pouch-journey hero and are no longer referenced from index.html.
   ========================================================================== */
:root {
  /* Color — Foundation / Primary (Brown) scale, from the design system sheet */
  --color-brown-50: #f3edec;
  --color-brown-100: #ece4e2;
  --color-brown-200: #d8c7c3;
  --color-brown-300: #82493e; /* Primary */
  --color-brown-400: #754238;
  --color-brown-500: #683a32;
  --color-brown-600: #62372f;
  --color-brown-700: #4e2c25;
  --color-brown-800: #3a211c;
  --color-brown-900: #2e1a16;
  --color-secondary-cream: #fcf8f0;
  --color-secondary-warm: #f7f1e6;

  /* Typography — Foundation / Typeface */
  --font-maruburi: 'MaruBuri', var(--serif);
  --font-pretendard: Pretendard, sans-serif;
  --font-english: 'Cormorant Garamond', var(--serif);
  /* Type scale used on this page: size / line-height / letter-spacing */
  --type-heading-1: 600 40px/1.4 var(--font-maruburi);
  --type-heading-1-tracking: -.05em;
  --type-subtitle-l: 600 20px/1.5 var(--font-pretendard);
  --type-subtitle-l-tracking: -.02em;
  --type-button: 600 16px/1.4 var(--font-pretendard);
  --type-button-tracking: -.01em;
  /* System default for "English Label" (14px/600/120%/+0.14em). The Review
     eyebrow below intentionally overrides this to the larger size Figma's
     own Review frame renders at (24px/Bold) rather than the base token. */
  --type-english-label: 600 14px/1.2 var(--font-english);
  --type-english-label-tracking: .14em;
  /* Remaining tokens from the Typography foundation sheet, added for the
     product detail page (2depth) — not all were needed by the 1depth page. */
  --type-display-1: 600 64px/1.28 var(--font-maruburi);
  --type-display-1-tracking: -.06em;
  --type-display-2: 600 48px/1.35 var(--font-maruburi);
  --type-display-2-tracking: -.05em;
  --type-heading-2: 600 32px/1.45 var(--font-maruburi);
  --type-heading-2-tracking: -.04em;
  --type-heading-3: 600 24px/1.5 var(--font-pretendard);
  --type-heading-3-tracking: -.03em;
  --type-subtitle-m: 500 16px/1.5 var(--font-pretendard);
  --type-subtitle-m-tracking: -.02em;
  --type-body-l: 400 18px/1.75 var(--font-pretendard);
  --type-body-l-tracking: -.02em;
  --type-body-m: 400 16px/1.7 var(--font-pretendard);
  --type-body-m-tracking: -.02em;
  --type-body-s: 400 14px/1.65 var(--font-pretendard);
  --type-body-s-tracking: -.01em;
  --type-navigation: 500 12px/1 var(--font-pretendard);
  --type-navigation-tracking: -.02em;
  --type-caption: 400 12px/1.5 var(--font-pretendard);

  /* This page's semantic aliases onto the tokens above */
  --lp-ink: var(--color-brown-900);
  --lp-brown: var(--color-brown-300);
  --lp-bg-light: var(--color-brown-200); /* header bg — Figma "Brown/Light" var = #d8c7c3 */
  --lp-cream: var(--color-secondary-cream);
  --lp-heading: var(--font-maruburi);
  --lp-english: var(--font-english);
}
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 92px;
  padding: 0 80px;
  gap: 24px;
  background: var(--lp-bg-light);
  color: var(--lp-ink);
}
.lp-brand { justify-self: start; display: flex; align-items: center; }
.lp-logo { width: 154px; height: auto; }
.lp-nav { justify-self: center; gap: 40px; font: var(--type-button); letter-spacing: var(--type-button-tracking); color: #000; }
.lp-btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-brown); color: var(--lp-cream);
  font: var(--type-button); letter-spacing: var(--type-button-tracking);
  padding: 8px 16px; border-radius: 2px; border: none; cursor: pointer;
  transition: opacity .2s ease;
}
.lp-btn:hover { opacity: .85; }
.lp-btn:active { opacity: .7; }
.lp-header .lp-btn { justify-self: end; width: auto; }
/* 메뉴 글자·구매 버튼이 좁은 폭에서 한 글자씩 꺾이지 않게 */
.lp-nav a, .lp-header .lp-btn { white-space: nowrap; }

.lp-products, .lp-review, .lp-closing {
  position: relative;
  overflow: hidden;
  min-height: 932px;
}
.lp-closing:before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
.lp-products:before {
  content: ''; position: absolute; inset: -20px; z-index: -2;
  background:
    linear-gradient(rgba(239, 233, 222, .6), rgba(239, 233, 222, .6)),
    url('./product-section-bg.webp') center / cover no-repeat;
  filter: blur(10px);
}
.lp-review:before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--color-brown-300);
}
.lp-products h2, .lp-closing h2 {
  font: var(--type-heading-1); font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink);
}
.lp-products p, .lp-closing p {
  font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-brown);
}

/* ==========================================================================
   Hero — Figma node 14:952. Centered copy over a two-layer background: the
   rice-field photo, plus the pot illustration reused at its native
   (non-cutout) size and very low opacity so it reads as a faint print on
   the paper rather than a foreground card — matching the Figma frame,
   where the same rectangular asset sits at 20% opacity behind the text.
   ========================================================================== */
/* Figma (node 84:90, 1440x1024 reference frame, re-checked): text block at
   x:865-1360 / y:247-426, pot at x:560-1360 / y:458-953 — both right-edges
   land on the same x:1360 line (= frame width 1440 minus the standard 80px
   side padding used elsewhere on this site), so the whole content column is
   right-aligned, not centered. Reproduced as flow spacing: 155px above the
   text, 32px between text and pot, 71px below the pot (155+179+32+495+71 =
   932, the frame's content height below the 92px header). */
.lp-hero {
  position: relative; overflow: hidden; min-height: 932px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 32px;
  padding: 155px 80px 71px;
}
.lp-hero-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-closing-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* 수묵화 → 컬러 자동 번짐 (see hero-reveal.js): the same landscape painting
   sits twice — grayscale underneath, full color on top — and the color
   layer is revealed through an SVG mask whose edge is warped by a
   feTurbulence/feDisplacementMap filter, so it spreads as an irregular,
   ink-in-paper bleed (growing left→right) instead of a straight wipe or a
   uniform grayscale-filter crossfade. hero-reveal.js plays this once, on
   load, over ~2.4s; the vertical title/subcopy's own brush-stroke reveal
   starts partway through this (see TEXT_START_DELAY in hero-reveal.js),
   not after it finishes — neither is tied to scroll. */
.lp-hero:before, .lp-hero:after {
  content: ''; position: absolute; inset: 0;
  background: url('./hero-landscape.jpg') center / cover no-repeat;
}
.lp-hero:before {
  z-index: -3;
  filter: grayscale(1) contrast(.96) brightness(1.04);
}
.lp-hero:after {
  z-index: -2;
  -webkit-mask-image: url(#lp-hero-reveal-mask);
  mask-image: url(#lp-hero-reveal-mask);
}
.lp-hero-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 33px; max-width: 495px; text-align: right; }
.lp-hero h1 { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink); }
.lp-hero-inner p { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-brown); }
/* Desktop-only traditional vertical (right-to-left) typesetting, per
   reference. Scoped to ≥901px so the ≤900px rules above keep the original
   horizontal stacked layout completely untouched — not edited here. */
@media (min-width: 901px) {
  /* Figma node 11:322 (hero text block, 1440-wide reference frame): subtitle/
     divider/title sit in one row with a single 60px gap token shared by all
     three — reproduced here as the row's own `gap` instead of one-off
     margins, so the divider lands exactly in the middle of that 60/60 split
     (see .lp-hero-divider below). margin-right nudges the whole block from
     this site's usual 80px edge to the 100px the Figma frame actually uses
     (text block's right edge sits at x:1340 of the 1440-wide frame). */
  .lp-hero-inner { flex-direction: row-reverse; align-items: flex-start; gap: 60px; max-width: none; text-align: left; margin-right: 20px; }
  /* Title and subcopy get different column spacing (line-height sets each
     vertical line's own thickness, i.e. the pitch to its neighbor column).
     Per Figma's authored gaps, the title's 2 columns sit 40px apart
     (line-height 2 = 40px font + 40px) while the subcopy's 3 columns sit a
     tighter 10px apart (line-height 1.5 = 20px font + 10px) — the reverse
     of this file's previous assumption. */
  .lp-hero h1 {
    writing-mode: vertical-rl; text-orientation: mixed; line-height: 2;
  }
  .lp-hero-inner p {
    writing-mode: vertical-rl; text-orientation: mixed; line-height: 1.5;
  }
  /* Sits between the subcopy (p, physically left) and the title (h1,
     physically right), centered in the row's 60/60 gap split (see
     .lp-hero-inner's `gap` above) — matching Figma's single shared gap
     token instead of one-off asymmetric margins. Stays invisible until the
     title has completely finished writing (see .lp-hero-inner.title-done
     below) instead of being a plain static border that's already fully
     drawn before any text appears. Now an inline SVG (see index.html)
     whose stroke is itself run through a turbulence/displacement filter,
     so the line wobbles like a single uneven brush pass instead of a
     ruled CSS border — and stays faint (opacity .22) once shown, rather
     than a fully solid rule. */
  .lp-hero-divider {
    align-self: stretch; width: 10px;
    color: var(--lp-brown);
    opacity: 0; transition: opacity .6s ease;
  }
  .lp-hero-inner.title-done .lp-hero-divider { opacity: .22; }
  /* Each vertical line/column is its own element so hero-reveal.js can mask
     and time them individually (see the 5 lp-hero-line-mask-N defs above),
     writing right line → left line, each top→bottom — not a plain fade and
     not a character-by-character typing effect. */
  /* margin-left:0 overrides an unrelated legacy rule (`h1 span { margin-left:
     .45em }`, from an older page's hero) that otherwise matches these spans
     too, since they're spans inside an h1 — it was adding an extra ~18px
     between the title's two columns on top of line-height's own spacing,
     which is why the title read as more spread out than the subcopy even
     before today's line-height change. */
  .lp-hero-line { display: block; margin-left: 0; }
  #lp-hero-line-0 { -webkit-mask-image: url(#lp-hero-line-mask-0); mask-image: url(#lp-hero-line-mask-0); }
  #lp-hero-line-1 { -webkit-mask-image: url(#lp-hero-line-mask-1); mask-image: url(#lp-hero-line-mask-1); }
  #lp-hero-line-2 { -webkit-mask-image: url(#lp-hero-line-mask-2); mask-image: url(#lp-hero-line-mask-2); }
  #lp-hero-line-3 { -webkit-mask-image: url(#lp-hero-line-mask-3); mask-image: url(#lp-hero-line-mask-3); }
  #lp-hero-line-4 { -webkit-mask-image: url(#lp-hero-line-mask-4); mask-image: url(#lp-hero-line-mask-4); }
  /* Taking the pot out of the flex column (it was stacking directly below
     the text block, and the vertical-writing text is much taller than the
     old horizontal copy, so that stack no longer fits in one screen) and
     anchoring it absolutely instead. The text column is narrow and sits
     flush against the hero's own right edge, so there's open paper to its
     left for the whole height of the hero — the pot sits there, vertically
     overlapping the text's row without ever overlapping it horizontally.
     This also means `.lp-hero`'s height goes back to resting on its own
     min-height (932px) instead of being pushed taller by the old stack, so
     the whole Hero (text + pot) fits in one screen under the header again.
     Text position/the rest of the Hero layout is unchanged. */
  .lp-hero-pot-wrap { position: absolute; right: 485px; bottom: 71px; width: 46vw; max-width: 720px; }
  /* Steam — final beat of the Hero sequence, after the grayscale→color
     bleed and the vertical text-write (both in hero-reveal.js, untouched
     here). That script's own timings are fixed/deterministic (never
     scroll-driven), so instead of wiring JS to it, this just uses a plain
     CSS animation-delay set to that known total — 1300ms text-phase start
     + 3010ms for all 5 lines to finish stroking = 4310ms, + ~400ms pause
     the brief requested gives 4710ms before the first wisp appears.
     Pot itself never animates — only these three new elements layered
     over it. Positioned over the steam/rice area already painted into
     hero-pot.png, roughly extending it rather than appearing elsewhere. */
  .lp-hero-steam {
    position: absolute; z-index: 1; pointer-events: none;
    width: 11px; height: 62px; border-radius: 50%;
    /* Core alpha raised .55->.8 — at the old value, combined with the
       per-wisp peak-opacity below, the effective max alpha was under .25
       and unreadable against the photo even once the filter stopped
       erasing the shape outright. */
    background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%);
    filter: url(#lp-hero-steam-filter);
    opacity: 0;
    animation: lp-hero-steam-rise 6s ease-in-out infinite;
    animation-delay: 4.71s;
  }
  .lp-hero-steam--1 { left: 27%; top: 24%; width: 10px; height: 58px; --drift: 7px; --peak-opacity: .62; animation-duration: 6.4s; animation-delay: 4.71s; }
  .lp-hero-steam--2 { left: 34%; top: 19%; width: 13px; height: 72px; --drift: -6px; --peak-opacity: .52; animation-duration: 5.6s; animation-delay: 5.3s; }
  .lp-hero-steam--3 { left: 40%; top: 26%; width: 9px; height: 50px; --drift: 9px; --peak-opacity: .56; animation-duration: 7s; animation-delay: 5.85s; }
  @keyframes lp-hero-steam-rise {
    0% { opacity: 0; transform: translate(0, 0) scale(.85); }
    12% { opacity: var(--peak-opacity, .56); }
    38% { opacity: var(--peak-opacity, .56); transform: translate(calc(var(--drift, 8px) * .35), -20px) scale(1); }
    75% { opacity: 0; transform: translate(var(--drift, 8px), -58px) scale(1.25); }
    100% { opacity: 0; transform: translate(var(--drift, 8px), -58px) scale(1.25); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lp-hero-steam { display: none; }
  }
  /* Seams the Hero's landscape photo into the paper-texture background that
     the next section (.lp-film) starts on, so the two read as one
     continuous scene instead of a photo cutting off into plain paper. No
     new image — it's the same main-bg-texture.png already used by
     .lp-process/.film-sticky's own backgrounds, painted over the bottom of
     the Hero photo and faded in from transparent (top of the strip) to
     fully opaque (bottom edge, flush with the paper that continues into
     the next section). Sits above the grayscale/color photo layers
     (z-index -3/-2) but below the real content (z-index auto). */
  .lp-hero-seam {
    position: absolute; left: 0; right: 0; bottom: 0; height: 280px; z-index: -1;
    background: url('./main-bg-texture.png') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 85%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 85%);
  }
}
/* .lp-hero-pot-wrap carries the sizing/position that used to live on
   .lp-hero-pot (the img) directly — needed so the new steam wisps (see
   below) have a box matching the pot exactly to position themselves
   against, in px/%, regardless of the pot's own vw-based responsive size.
   The img itself just fills it; nothing about the pot's own rendered
   size/position changes at any width. */
.lp-hero-pot-wrap {
  /* 800/1440 = the Figma pot's width as a fraction of its 1440-wide
     reference frame, scaled down ~20% (to 640px/44.4vw) so the pot fits
     within view alongside the taller vertical-writing text block above it
     instead of running past the bottom of the viewport. Position/aspect
     otherwise unchanged. vw (not %) so it's sized off the viewport itself,
     not this element's padded containing block. Capped at its native size
     so it never scales up past this proportion. */
  width: 44.4vw; max-width: 640px;
}
.lp-hero-pot { display: block; width: 100%; height: auto; }


/* ==========================================================================
   브랜드 필름 — one sticky-pinned continuous "camera dolly": scenes sit
   side by side on one filmstrip that translates horizontally as the
   wrapper scrolls past, so
   the section always reads as one continuous space rather than cards
   stacking/fading on top of each other. Each scene's video/photo is a
   faint wash over the SAME fixed paper texture underneath (constant across
   the whole strip) and fades to transparent at its own left/right edge via
   a mask, so it visually dissolves into the paper at each seam instead of
   showing a hard rectangular cut. See film-scroll.js for the scroll →
   translateX mapping and the active-scene video play/pause logic.
   ========================================================================== */
.lp-film { position: relative; }
.film-sticky {
  position: sticky; top: 92px; height: calc(100svh - 92px);
  overflow: hidden; background: var(--paper);
}
/* QA polish: a thin hairline was visible right where this section hands
   off to .lp-products (different bg image/blur there) — this fades this
   section's own bottom edge to the shared paper tone first so the seam
   never shows a hard pixel row, regardless of which scene is active.
   Sits above the video/texture (z-index 1, below .film-progress's 2) and
   is short enough not to reach any scene's centered copy. */
.film-sticky:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
.film-sticky:before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
.film-stack { display: flex; width: 700vw; height: 100%; will-change: transform; }
.film-scene {
  position: relative; flex: 0 0 100vw; width: 100vw; height: 100%;
  display: flex; align-items: center; padding: 0 80px; box-sizing: border-box;
  overflow: hidden;
}
.film-scene-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .22;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}
.film-scene[data-scene="1"] .film-scene-media { opacity: .55; }
/* Intro scene's photo is a static image already composed as a paper→photo
   blend (cream on the left, under the copy, shading into the rice field
   on the right), so it can sit a bit more visibly than the faint video
   washes without losing text contrast — same idea as scene 1's .55. */
.film-scene[data-scene="0"] .film-scene-media { opacity: .65; }
/* Final scene only ("식탁으로 보냅니다"), desktop-only (≥901px) — the
   ≤900px fallback (scenes in normal flow, see @media(max-width:900px)
   below) forces this same video to `opacity:1!important; mask-image:none`
   already; without this guard, these two new rules' higher selector
   specificity would win over that unguarded `mask-image: none` and leak
   the desktop treatment into the mobile layout, so this is scoped here
   instead of touching that existing block.
   The base rule above (opacity .22 + the left/right scene-seam mask)
   stays completely untouched by this override; nothing here changes how
   the other scenes or this scene's own edges/seams look.
   Rather than raising this video's own opacity (which .22 above already
   sets, uniformly, for every scene), this folds that same .22 directly
   into a mask gradient so a second, independent radial layer can ADD
   extra alpha on top of it — purely in the middle of the frame — without
   touching the shared opacity property at all. mask-composite:add sums
   the two layers' alpha per-pixel: the linear layer reproduces the exact
   edge-fade every other scene has (0 at the outer 14%, flat .22 across
   the rest), and the radial layer contributes nothing (alpha 0) until
   well inside that flat zone, so the existing edge/seam fade is bit-for-
   bit unchanged — it only adds visibility in a wide, soft, center-
   weighted ellipse, tapering out over many stops (no hard ring) so there
   is no visible boundary between the brighter middle and the rest. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .film-scene[data-scene="6"] .film-scene-media {
    opacity: 1;
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 14%, rgba(0,0,0,.22) 86%, rgba(0,0,0,0) 100%),
      radial-gradient(ellipse 32% 70% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.26) 40%, rgba(0,0,0,.1) 65%, rgba(0,0,0,0) 90%);
    mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 14%, rgba(0,0,0,.22) 86%, rgba(0,0,0,0) 100%),
      radial-gradient(ellipse 32% 70% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.26) 40%, rgba(0,0,0,.1) 65%, rgba(0,0,0,0) 90%);
    mask-composite: add;
  }
  /* Small, center-only color lift — confined to the same soft ellipse via
     backdrop-filter + its own mask, so it enhances whatever is already
     composited there (now mostly the brighter video from the rule above)
     without ever applying a filter to the video element itself. Modest
     values on purpose (not a saturation push over the whole clip) — just
     enough for the dish/table's own warm tones to read clearly. */
  .film-scene[data-scene="6"] .film-scene-focus {
    display: block; position: absolute; inset: 0; pointer-events: none;
    -webkit-backdrop-filter: saturate(1.12) contrast(1.05) brightness(1.02);
    backdrop-filter: saturate(1.12) contrast(1.05) brightness(1.02);
    -webkit-mask-image: radial-gradient(ellipse 30% 65% at 50% 50%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 85%);
    mask-image: radial-gradient(ellipse 30% 65% at 50% 50%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 85%);
  }
}
/* Hidden (and so zero layout impact as a flex item) everywhere except the
   one rule above — covers ≤900px and prefers-reduced-motion alike,
   without needing to touch either of those existing conditions directly. */
.film-scene-focus { display: none; }
.film-scene-logo {
  position: absolute; top: 50%; right: 80px; transform: translateY(-50%);
  width: min(600px, 38%); height: auto; z-index: 1;
}
.film-scene-copy {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: flex-start; gap: 40px; max-width: 743px;
}
.film-scene-copy h2 { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink); }
.film-scene-copy p { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-brown); }
.film-progress { position: absolute; left: 80px; right: 80px; bottom: 28px; height: 2px; background: var(--color-brown-200); z-index: 2; }
.film-progress-bar { display: block; height: 100%; width: 0%; background: var(--lp-brown); }


/* ==========================================================================
   정성의 과정 (Our Process) — static editorial layout, no sticky/scroll-jack.
   A two-column intro (title left, lead+body right, thin divider between)
   followed by the 9 real factory photos grouped into 4 chapters, 2 chapters
   per row. Photos render in monochrome via CSS filter only — the files on
   disk are untouched — and sit edge-to-edge within a chapter so each group
   reads as one wide block rather than a grid of separate cards.
   ========================================================================== */
.lp-process { position: relative; padding: 130px 80px; }
.lp-process:before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
/* Desktop-only: the Figma pt-* timeline below replaces main-bg-texture.png
   with process-section-bg.webp — same `center / cover no-repeat` technique
   as the base rule above (and every other section background on the
   site), so it always spans the section's full width edge-to-edge with
   no side gutters, scales proportionally (never stretched/distorted), and
   never tiles even though the source image is tall. ≤900px (.op-legacy)
   keeps the plain texture above untouched. */
@media (min-width: 901px) {
  .lp-process:before {
    background: url('./process-section-bg.webp') center / cover no-repeat;
  }
}
/* QA polish: .lp-process and .lp-closing backgrounds never quite matched
   at their shared boundary — originally because both scaled the same
   texture independently via `cover` against very different section
   heights; now because .lp-process:before uses a different image at
   desktop entirely (see above). Either way the two don't line up at the
   seam, and it reads as a hard horizontal cut. Rather than touching
   either background, a soft fade on each side toward the shared --paper
   tone (already the site's go-to neutral bridge, see .film-sticky:after)
   hides the mismatch exactly at the seam; both sections' plain padding
   already clears their nearest content there, so nothing gets faded.
   Desktop-only, new block — the base rules above stay exactly as they
   were for ≤900px. */
@media (min-width: 901px) {
  .lp-process:after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--paper));
    pointer-events: none;
  }
  .lp-closing:after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1;
    background: linear-gradient(to bottom, var(--paper), transparent);
    pointer-events: none;
  }
}
.op-inner { max-width: 1440px; margin: 0 auto; }

.op-head { display: flex; gap: 64px; margin-bottom: 110px; }
.op-head-title { flex: 0 0 460px; }
.op-label {
  font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking); color: var(--lp-brown);
  text-transform: uppercase;
}
.op-head-title h2 { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink); margin-top: 20px; }
.op-head-desc {
  flex: 1; min-width: 0; padding-left: 64px; border-left: 1px solid var(--lp-brown);
  display: flex; flex-direction: column; justify-content: center;
}
.op-head-lead { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-ink); }
.op-head-body { font: var(--type-body-m); letter-spacing: var(--type-body-m-tracking); color: var(--color-brown-500); margin-top: 16px; }

.op-row { display: flex; align-items: center; gap: 32px; }
.op-row + .op-row { margin-top: 80px; }

.op-chapter { display: flex; align-items: center; gap: 40px; flex: 1; min-width: 0; }
.op-chapter--wide { flex: 1.2; }

.op-chapter-text { flex: 0 0 250px; }
.op-num { font: 700 28px/1 var(--font-english); color: var(--lp-brown); }
.op-chapter-text h3 { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-ink); margin-top: 12px; }

.op-photos { display: flex; align-items: flex-start; flex: 1; min-width: 0; gap: 0; }
.op-photo { margin: 0; flex: 1; min-width: 0; }
.op-photo-frame { position: relative; height: 220px; overflow: hidden; }
.op-photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Rhythm: each chapter's photos split unevenly (not a uniform 50/50 or
   33/33/33), and chapter 04 (3 photos, real shipping-truck shot) runs
   wider than the others — so the section doesn't read as four identical
   equal-size cards in a grid. */
.op-photos--01 .op-photo:nth-child(1) { flex: 1.3; }
.op-photos--01 .op-photo:nth-child(2) { flex: 1; }
.op-photos--02 .op-photo:nth-child(1) { flex: 1; }
.op-photos--02 .op-photo:nth-child(2) { flex: 1.25; }
.op-photos--03 .op-photo:nth-child(1) { flex: 1.15; }
.op-photos--03 .op-photo:nth-child(2) { flex: 1; }
.op-photos--04 .op-photo:nth-child(1) { flex: 1.15; }
.op-photos--04 .op-photo:nth-child(2) { flex: 1; }
.op-photos--04 .op-photo:nth-child(3) { flex: .85; }

/* Figma "OUR PROCESS" timeline (node 109:160) — desktop-only replacement
   for the section above. .op-legacy (the markup just above) stays exactly
   as the ≤900px experience; this whole block only takes effect ≥901px,
   where .op-legacy is hidden instead. Colors/sizes follow the Figma spec
   directly — reusing existing type tokens only where their values already
   match it exactly (heading-1, heading-3, subtitle-m, body-l all do). */
.op-legacy { display: block; }
.pt-inner { display: none; }
@media (min-width: 901px) {
  .op-legacy { display: none; }
  .pt-inner { display: block; max-width: 1440px; margin: 0 auto; }

  .pt-head { display: flex; align-items: flex-end; gap: 120px; padding: 0 80px; }
  .pt-head-title { display: flex; flex-direction: column; gap: 40px; flex-shrink: 0; }
  .pt-label { font: 700 24px/1.2 var(--font-english); letter-spacing: -1.4px; color: var(--lp-brown); text-transform: uppercase; }
  .pt-head-title h2 { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink); }
  .pt-head-desc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .pt-lead { font: var(--type-body-l); letter-spacing: var(--type-body-l-tracking); color: var(--lp-ink); }
  .pt-body { font: var(--type-subtitle-m); letter-spacing: var(--type-subtitle-m-tracking); color: #767676; }

  .pt-timeline { position: relative; padding: 100px 100px 0; }
  /* QA polish: was a dashed line with a separate scroll-grown solid fill
     on top — now a single plain static rule instead, same treatment as
     .ab-history-timeline:before's own center line. No JS-driven size/
     height changes here. */
  .pt-line {
    position: absolute; left: 50%; top: 100px; bottom: 0; width: 1px; transform: translateX(-50%);
    background: var(--color-brown-200);
  }

  .pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 58px; }
  .pt-step {
    position: relative; display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .pt-step.is-revealed { opacity: 1; transform: translateY(0); }
  .pt-dot {
    grid-column: 2; justify-self: center; width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-brown-300); z-index: 1;
  }
  .pt-content { display: flex; align-items: flex-start; gap: 20px; }
  .pt-step--right .pt-content { grid-column: 3; justify-self: start; }
  .pt-step--left .pt-content { grid-column: 1; justify-self: end; }
  .pt-photo { flex-shrink: 0; width: 180px; height: 115px; overflow: hidden; }
  .pt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pt-text { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
  .pt-step--left .pt-text { align-items: flex-end; }
  .pt-title { font: var(--type-heading-3); letter-spacing: var(--type-heading-3-tracking); color: #2a2a2a; }
  .pt-desc { font: var(--type-subtitle-m); letter-spacing: var(--type-subtitle-m-tracking); color: #767676; }
}

.lp-products { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding-top: 130px; padding-bottom: 130px; }
.lp-products-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center; gap: 64px; }
.lp-products-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 340px; flex-shrink: 0; }
p.lp-products-label {
  font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking); color: var(--lp-brown);
  text-transform: uppercase;
}
.lp-products-copy .lp-btn { width: auto; gap: 10px; }

/* Product carousel — cards sit directly on the paper texture (no card box),
   the first ("current") product rendered larger, later ones bleeding off
   the right edge of the viewport to hint that more products follow. */
.lp-products-carousel { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.lp-products-viewport { flex: 1; min-width: 0; overflow: hidden; }
.lp-products-track {
  display: flex; align-items: flex-end; gap: 32px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab; touch-action: pan-y; padding: 4px;
}
.lp-products-track:active { cursor: grabbing; }
.lp-products-track::-webkit-scrollbar { display: none; }
.lp-product-card {
  scroll-snap-align: start; flex: 0 0 220px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 16px;
}
.lp-product-card.is-current { flex-basis: 320px; }
.lp-product-image { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; min-height: 0; transition: transform .25s ease, filter .25s ease; }
.lp-product-image img { width: 100%; height: 100%; object-fit: contain; }
.lp-product-card:hover .lp-product-image {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 14px 18px rgba(46, 26, 22, .18));
}
@media(prefers-reduced-motion: reduce) {
  .lp-product-image { transition: none; }
  .lp-product-card:hover .lp-product-image { transform: none; filter: none; }
}
.lp-product-image--placeholder {
  display: flex; align-items: center; justify-content: center; border: 1px dashed var(--color-brown-200);
  border-radius: 8px; color: var(--muted); font: var(--type-caption); text-align: center;
}
.lp-product-num { font-family: var(--lp-english); font-weight: 700; font-size: 16px; color: var(--lp-brown); }
.lp-product-name { font: var(--type-heading-3); letter-spacing: var(--type-heading-3-tracking); color: var(--lp-ink); margin-top: 4px; }
.lp-product-desc { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--color-brown-500); margin-top: 4px; }
/* Desktop-only text/alignment tweak — scoped here instead of editing the
   shared rule above so ≤900px keeps its existing (unchanged) rendering.
   `.lp-product-card` prefix (not just `.lp-product-desc`) so this beats
   `.lp-products p` a few rules up on specificity — without it, that
   generic rule (meant for the section's own lead paragraph, not this
   caption) was winning here and rendering this text at 20px/600 instead
   of its own intended size. min-height reserves room for the longest
   product's 3-line wrap at this card width, so "자세히 보기" always
   starts the same distance below the name regardless of whether a given
   product's description runs 1-3 lines. */
@media (min-width: 901px) {
  .lp-product-card .lp-product-desc {
    font-family: var(--font-pretendard); font-weight: 400; font-size: 13px; line-height: 1.6;
    letter-spacing: var(--type-body-s-tracking); color: var(--color-brown-500); margin-top: 4px;
    min-height: 4.8em;
  }
}
.lp-product-link { display: inline-flex; align-items: center; gap: 6px; font: var(--type-body-s); font-weight: 600; color: var(--lp-brown); margin-top: 4px; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.lp-product-link:hover { color: var(--color-brown-500); border-bottom-color: currentColor; }
.lp-products-nav {
  all: unset; box-sizing: border-box; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-brown-200); display: flex; align-items: center; justify-content: center;
  color: var(--lp-brown); cursor: pointer; font-size: 16px; background: var(--color-secondary-cream);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lp-products-nav:hover { background: var(--color-brown-100); border-color: var(--lp-brown); color: var(--color-brown-500); }
.lp-products-prev { position: absolute; left: -14px; top: 50%; transform: translateY(-50%); z-index: 2; }
.lp-products-next { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 2; }
.lp-products-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.lp-products-dot { all: unset; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brown-200); cursor: pointer; transition: background-color .2s ease; }
.lp-products-dot:hover:not(.is-active) { background: var(--color-brown-300); }
.lp-products-dot.is-active { background: var(--lp-brown); }

.lp-review { position: relative; padding: 130px 0; min-height: 0; overflow: hidden; }
.lp-review-inner { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center; gap: 64px; }
.lp-review-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 320px; flex-shrink: 0; }
.lp-review-label {
  font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking); color: var(--color-secondary-warm);
  text-transform: uppercase;
}
.lp-review-heading-group { display: flex; flex-direction: column; margin-top: 20px; }
.lp-review h2 {
  font: var(--type-heading-2); letter-spacing: var(--type-heading-2-tracking); color: var(--color-secondary-cream);
}
.lp-review-intro {
  font: var(--type-body-m); letter-spacing: var(--type-body-m-tracking); color: var(--color-brown-50);
  margin-top: 12px;
}
.lp-review-copy .lp-btn { width: auto; gap: 10px; margin-top: 32px; background: var(--color-secondary-cream); color: var(--lp-brown); }

.lp-review-carousel { position: relative; flex: 1; min-width: 0; z-index: 1; }
.lp-review-viewport { overflow: hidden; }
.lp-review-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab; touch-action: pan-y;
}
.lp-review-track:active { cursor: grabbing; }
.lp-review-track::-webkit-scrollbar { display: none; }
.lp-review-card {
  scroll-snap-align: start; flex: 0 0 calc((100% - 48px) / 3); min-width: 220px;
  background: var(--color-secondary-cream); border: 1px solid var(--color-brown-200); border-radius: 4px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.lp-review-card-image { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--color-brown-100); overflow: hidden; flex-shrink: 0; }
.lp-review-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-review-stars { font: var(--type-body-s); color: #c9974a; letter-spacing: 2px; }
.lp-review-card-title { font: var(--type-subtitle-m); letter-spacing: var(--type-subtitle-m-tracking); color: var(--lp-ink); }
.lp-review-card-content { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--color-brown-500); flex: 1; }
.lp-review-card-divider { width: 100%; height: 1px; border: none; background: var(--color-brown-200); margin: 0; }
.lp-review-card-meta { font: var(--type-caption); color: var(--muted); }
.lp-review-nav {
  all: unset; box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-secondary-cream);
  border: 1px solid var(--color-brown-200); display: flex; align-items: center; justify-content: center;
  color: var(--lp-brown); cursor: pointer; font-size: 16px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lp-review-nav:hover { background: var(--color-brown-100); border-color: var(--lp-brown); color: var(--color-brown-500); }
.lp-review-prev { left: -14px; }
.lp-review-next { right: -14px; }
.lp-review-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.lp-review-dot { all: unset; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary-cream); opacity: .4; cursor: pointer; transition: opacity .2s ease; }
.lp-review-dot:hover:not(.is-active) { opacity: .7; }
.lp-review-dot.is-active { opacity: 1; }

.lp-closing { display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 130px; padding-bottom: 130px; padding-left: 24px; padding-right: 24px; }
/* Edge-only feather (see #lp-closing-decor-mask/#lp-closing-decor-filter in
   index.html) instead of blurring/fading the whole photo — the plate's own
   warm colors stay fully saturated in the middle, only the photo's
   rectangular edges soften into the paper texture via the mask's
   turbulence-warped, Gaussian-blurred falloff. No filter/opacity on the
   image itself. */
.lp-closing-decor {
  position: absolute; right: 0; bottom: 0; width: 1000px; max-width: 70%; aspect-ratio: 1000 / 711; pointer-events: none; z-index: -1;
  -webkit-mask-image: url(#lp-closing-decor-mask); mask-image: url(#lp-closing-decor-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.lp-closing-decor img { width: 100%; height: 100%; object-fit: cover; }
.lp-closing-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 589px; }
/* 낙관(도장) interaction — see closing-stamp.js. Plays once the mark has
   scrolled well into view (IntersectionObserver threshold there). One
   continuous, fast motion — not a fade-in, not a gradual/partial reveal:
   the whole logo drops in from directly above, lands, and the instant it
   lands takes a brief, sharp scale dip (the "press" of a seal striking
   paper) before snapping straight back to its real size. opacity jumps
   straight from 0 to 1 the moment the drop starts (no cross-fade) — the
   logo is always its own full, original color/shape, never clipped,
   filtered, or desaturated. No bounce/overshoot past the resting size or
   position, and nothing glows. */
.lp-closing-logo-wrap {
  position: relative; display: inline-block; margin-top: 8px;
  opacity: 0;
}
.lp-closing-logo-wrap.is-stamped { opacity: 1; }
.lp-closing-logo {
  display: block; width: 500px; max-width: 100%; height: auto;
}
.lp-closing-logo-wrap.is-stamped .lp-closing-logo {
  animation: closing-stamp-drop .24s both;
}
@keyframes closing-stamp-drop {
  0%   { transform: translateY(-48px) scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  58%  { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  75%  { transform: translateY(0) scale(.93); animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1); }
}
@media(prefers-reduced-motion: reduce) {
  .lp-closing-logo-wrap { opacity: 1; }
  .lp-closing-logo-wrap.is-stamped .lp-closing-logo { animation: none; }
}

@media(max-width: 900px), (prefers-reduced-motion: reduce) {
  /* A pinned horizontal dolly is poor UX on touch, so 브랜드 필름's scenes
     stack in normal document flow, each fully visible, and film-scroll.js
     skips its measure/scroll/video-activation logic under this width
     (every video just autoplays inline in place instead). */
  .film-sticky { position: static; height: auto; }
  .film-stack { display: block; width: auto; height: auto; transform: none !important; }
  .film-scene {
    flex-direction: column; align-items: flex-start; gap: 32px;
    width: 100%; height: auto; padding: 60px 6%; overflow: visible;
  }
  .film-scene-media {
    position: relative; height: 260px; margin-top: 8px; opacity: 1 !important;
    -webkit-mask-image: none; mask-image: none;
  }
  .film-scene-logo { position: static; transform: none; width: min(400px, 60%); margin-top: 16px; }
  .film-progress { display: none; }
}
@media(max-width: 900px) {
  .lp-header { padding: 0 6%; }
  /* 머리 줄 — 900px 이하는 메뉴 다섯 개가 들어갈 자리가 없어(768px 에서 한 글자씩 꺾였다) 햄버거로.
     로고는 왼쪽, 구매 버튼과 햄버거는 오른쪽에 붙인다(2026-10-06). */
  .lp-header { grid-template-columns: 1fr auto auto; gap: 12px; }
  .lp-header .desktop-nav { display: none; }
  .lp-header .menu { display: block; margin-left: 0; }
  .lp-review-inner { padding: 0 6%; }
  .lp-products-inner { padding: 0 6%; }
  .lp-closing { min-height: 0; padding: 90px 24px; }
  .lp-products { min-height: 0; padding: 90px 0; }
  .lp-review { padding: 90px 0; }
  .lp-review-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .lp-review-card { flex-basis: calc((100% - 24px) / 2); }
  /* 세로로 쌓으면(align-items:flex-start) 캐러셀 폭이 카드 10장 길이(390px 화면에서 2,400px)로 늘어나
     카드 한 장이 1,981px 가 됐다 — 제품 캐러셀처럼 화면 폭에 맞춘다(2026-10-06). */
  .lp-review-carousel { width: 100%; }
  .lp-products-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .lp-products-carousel { width: 100%; }
  .lp-hero { min-height: 0; padding: 90px 24px; }
  /* 히어로 — 모바일·태블릿(가로쓰기, 2026-10-06). 세로쓰기·구분선·솥 배치는 ≥901px 전용이라
     여기서 따로 맞춘다:
     - 구분선 SVG(viewBox 20x400, preserveAspectRatio none)는 크기 규칙이 데스크톱에만 있어
       여기선 글 칸 너비만큼 넓고 그 20배 높이(390px 화면에서 약 6,800px)의 검은 막대가 됐다 → 숨긴다.
     - 한 줄씩 나눈 span 이 인라인이라 부제 세 줄이 띄어쓰기 없이 붙었다(«날에도어머니가») → 줄마다 블록.
     - 솥 그림은 44.4vw(390px 화면에서 173px)라 너무 작았다 → 글 칸 너비까지. */
  .lp-hero { gap: 28px; }
  .lp-hero-inner { gap: 20px; max-width: 100%; word-break: keep-all; }
  .lp-hero-line { display: block; margin-left: 0; }
  .lp-hero-divider { display: none; }
  .lp-hero-pot-wrap { width: 100%; max-width: 560px; }

  .lp-process { padding: 90px 6%; }
  .op-head { flex-direction: column; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; }
  .op-head-title { flex-basis: auto; }
  .op-head-desc { padding-left: 0; border-left: none; padding-top: 24px; border-top: 1px solid var(--lp-brown); }
  .op-row { flex-direction: column; align-items: stretch; gap: 32px; }
  .op-row + .op-row { margin-top: 48px; }
  .op-arrow { display: none; }
  .op-chapter, .op-chapter--wide { flex-direction: column; align-items: flex-start; gap: 20px; }
  .op-chapter-text { flex-basis: auto; }
  .op-photos { width: 100%; }
  .op-photo-frame { height: 200px; }
}
@media(max-width: 640px) {
  .lp-header { height: 80px; padding: 0 6%; }
  .lp-logo { width: 134px; }
  .lp-hero { padding: 56px 20px 64px; gap: 24px; }
  .lp-hero h1 { font-size: 32px; }
  .lp-hero-inner { gap: 16px; }
  .lp-closing { padding: 70px 24px; }
  .lp-products { padding: 70px 0; }
  .lp-review { padding: 70px 0; }
  .op-photos { flex-direction: column; }
  .op-photo-frame { height: 240px; }
  .lp-products p, .lp-closing p, .lp-hero-inner p { font-size: 16px; }
  .lp-review-card { flex-basis: 82%; }
  .lp-review-nav { width: 36px; height: 36px; }
  .lp-review-prev { left: -8px; }
  .lp-review-next { right: -8px; }
  .lp-product-card { flex-basis: 160px; }
  .lp-product-card.is-current { flex-basis: 220px; }
  .lp-products-track { padding-right: 6%; }
  .lp-closing-decor { max-width: 85%; opacity: .15; }
  .lp-closing-logo { width: 420px; }
}

/* ==========================================================================
   제품 소개 2depth (product.html) — editorial product detail page.
   Independent "pd-" namespace; reuses the lp-header/.lp-btn and the color
   / typography tokens defined above. No Figma frame exists for this page —
   layout comes from the reference mockup, styling from the design system.
   ========================================================================== */
.pd-page {
  position: relative;
  overflow: hidden;
  display: grid;
  /* nav column widened 190px->240px: at the active-item size
     (--type-heading-3, 24px) the longest name, "당도둑 발아현미 누룽지",
     needs ~210px and only had 170px (190 - 20px padding) — wrapping its
     last character alone (same issue hit "S라인 렌틸콩 누룽지" at ~184px
     needed). 240px covers both with margin; the 1fr visual column absorbs
     the difference. */
  grid-template-columns: 240px 420px 1fr;
  column-gap: 56px;
  align-items: start;
  /* Fills the viewport below the sticky 92px header on first load instead
     of being purely content-height — short product entries were leaving
     a blank gap before the footer. */
  min-height: calc(100svh - 92px);
  padding: 110px 80px;
}
.pd-page:before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
.pd-nav ul { list-style: none; margin: 0; padding-top: 8px; padding-left: 0; padding-right: 0; padding-bottom: 0; display: flex; flex-direction: column; gap: 26px; }
.pd-nav-item {
  all: unset; cursor: pointer; box-sizing: border-box; display: block;
  position: relative; padding: 4px 0 4px 20px;
  font: var(--type-subtitle-m); letter-spacing: var(--type-subtitle-m-tracking); color: var(--muted);
  transition: color .2s ease;
}
.pd-nav-item:before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: transparent; transition: background-color .2s ease; }
.pd-nav-item.is-active { font: var(--type-heading-3); letter-spacing: var(--type-heading-3-tracking); color: var(--lp-brown); }
.pd-nav-item.is-active:before { background: var(--lp-brown); }
.pd-nav-item:hover:not(.is-active) { color: var(--lp-ink); }

.pd-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 420px; }
.pd-eyebrow {
  display: inline-flex; align-items: center; padding: 6px 18px; border: 1px solid var(--lp-brown);
  border-radius: 999px; font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking);
  color: var(--lp-brown); text-transform: uppercase;
}
/* Vertical rhythm below is deliberately uneven: related lines sit closer
   together, distinct information groups (title/tagline/desc/features/cta)
   get more room. Margins collapse through #pd-body (a plain, unstyled
   wrapper), so setting margin-top on each element here is sufficient. */
.pd-name { font: var(--type-display-2); letter-spacing: var(--type-display-2-tracking); color: var(--lp-ink); margin-top: 24px; }
.pd-tagline { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-brown); margin-top: 32px; }
.pd-divider { width: 100%; height: 1px; border: none; background: var(--color-brown-200); margin: 16px 0 0; }
.pd-desc { font: var(--type-body-l); letter-spacing: var(--type-body-l-tracking); color: var(--color-brown-500); margin-top: 20px; }
.pd-features { list-style: none; margin: 40px 0 0; padding: 0; display: flex; width: 100%; align-items: stretch; }
.pd-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; padding: 0 20px; }
.pd-feature:first-child { padding-left: 0; }
.pd-feature + .pd-feature { border-left: 1px solid var(--color-brown-200); }
.pd-feature-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--lp-brown); flex-shrink: 0; }
.pd-feature-title { font: var(--type-body-s); font-weight: 600; color: var(--lp-ink); min-height: 48px; }
.pd-feature-desc { font: var(--type-caption); color: var(--muted); margin-top: 2px; }
.pd-info .pd-cta { width: auto; padding: 14px 30px; gap: 10px; margin-top: 32px; }
.pd-pending { font: var(--type-body-m); color: var(--muted); border: 1px dashed var(--color-brown-200); border-radius: 8px; padding: 18px 20px; }

.pd-visual { position: relative; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }
.pd-package {
  position: relative; width: 100%; max-width: 640px; aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pd-package img { display: block; object-fit: contain; }
.pd-package-placeholder {
  width: 100%; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--muted); border: 1px dashed var(--color-brown-200); border-radius: 16px;
  padding: 24px; font: var(--type-body-s);
}

@media(max-width: 1100px) {
  .pd-page { grid-template-columns: 170px 1fr; column-gap: 40px; }
  .pd-visual { grid-column: 1 / -1; margin-top: 48px; }
}
@media(max-width: 900px) {
  .pd-page { padding: 110px 6% 80px; grid-template-columns: 1fr; row-gap: 48px; }
  .pd-nav ul { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; }
  .pd-visual { grid-column: auto; margin-top: 0; }
}
@media(max-width: 640px) {
  .pd-page { padding: 100px 6% 64px; }
  .pd-features { flex-direction: column; }
  .pd-feature { padding: 0; border-left: none !important; padding-bottom: 16px; }
  .pd-feature + .pd-feature { border-left: none; border-top: 1px solid var(--color-brown-200); padding-top: 16px; }
  .pd-name { font-size: 36px; }
  .pd-visual { min-height: 280px; }
}

/* ==========================================================================
   고객 후기 2depth (review.html) — "rv-" namespace. Reuses lp-header/.lp-btn
   and the shared color/typography tokens; no Figma frame exists for this
   page — layout comes from the reference mockup, styling from the system.
   ========================================================================== */
/* Brush-stroke nav underline — replaces the straight-line .desktop-nav a:after
   for header nav links only. A hand-inked SVG ribbon (tapered, uneven edges)
   instead of a rectangle; same left-anchored scaleX draw/undraw as before so
   hover-in and hover-out share one direction. */
.lp-nav a:after {
  content: '';
  position: absolute;
  left: 11%; right: 11%; bottom: 4px;
  height: 8px;
  width: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath fill='%2382493E' d='M3,11 C40,6 75,15 120,9 C160,4 200,14 245,8 C265,6 285,9 297,11 C286,13 268,17 240,12 C200,17 160,7 120,13 C78,18 42,10 12,14 C6,15 3,12 3,11 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform .25s ease-out, opacity .25s ease-out;
}
.lp-nav a.is-active:after { transform: scaleX(1); }
/* Hover now draws the same brush stroke (previously only :after on
   .is-active responded, so non-active links gave no hover feedback at
   all) — dimmer than the active page's own permanent stroke so the two
   stay distinguishable when hovering a different link. */
.lp-nav a:not(.is-active):hover:after { transform: scaleX(1); opacity: .55; }

.rv-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 64px;
  padding: 56px 80px; min-height: 0;
}
.rv-hero:before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
.rv-hero-copy p.rv-label, .rv-cta-copy p.rv-label {
  font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking); color: var(--lp-brown);
  text-transform: uppercase;
}
.rv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 420px; flex-shrink: 0; }
.rv-hero-copy h1 { font: var(--type-display-2); letter-spacing: var(--type-display-2-tracking); color: var(--lp-ink); }
.rv-hero-copy p { font: var(--type-subtitle-l); letter-spacing: var(--type-subtitle-l-tracking); color: var(--lp-brown); }
.rv-hero-visual { position: relative; flex: 1; min-width: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; }
/* Auto-advancing slideshow (see review-hero-slideshow.js) — same box,
   size and position as the single static photo this replaces. Every
   review-photos/*.webp image sits stacked here from the start (no
   runtime src-swapping, so there's never a blank/loading flash mid-
   fade); JS only ever toggles which one is .is-active, and this
   transition is what actually cross-fades between them. */
.rv-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.rv-hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv-hero-slide { transition: none; }
}

.rv-filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 32px 80px; border-bottom: 1px solid var(--color-brown-200);
}
/* Desktop-only: at this bar's content width (1280px - 160px padding), the
   7 product chips + the source select are ~5px too wide to share a line
   at the base 24px gap, so the select was dropping to its own row below
   instead of sitting beside the chips. Scoped here (rather than lowering
   the base gap) so the existing ≤900px stacked layout — where this gap
   only ever sets vertical spacing, not this same-line fit — is untouched. */
@media (min-width: 901px) {
  .rv-filter-bar { gap: 12px; }
}
.rv-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.rv-chip {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: 1px solid var(--color-brown-200); border-radius: 999px;
  font: var(--type-body-s); color: var(--muted);
  transition: border-color .2s ease, color .2s ease;
}
.rv-chip:hover:not(.is-active) { border-color: var(--lp-brown); color: var(--lp-ink); }
.rv-chip.is-active { background: var(--lp-brown); border-color: var(--lp-brown); color: var(--lp-cream); }
.rv-chip-count { opacity: .75; }
.rv-sort {
  font: var(--type-body-s); color: var(--lp-ink); background: transparent; border: none; border-radius: 0;
  padding: 8px 4px; cursor: pointer; transition: color .2s ease;
}
.rv-sort:hover { color: var(--lp-brown); }

.rv-list { max-width: 1280px; margin: 0 auto; padding: 48px 80px 0; }
.rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(220px, auto); gap: 24px;
}
.rv-card {
  background: var(--color-secondary-cream); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
.rv-card-image { width: 100%; height: 160px; flex-shrink: 0; background: var(--color-brown-100); }
.rv-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rv-stars { font: var(--type-body-m); color: #c9974a; letter-spacing: 2px; }
.rv-card-title { font: var(--type-heading-3); letter-spacing: var(--type-heading-3-tracking); color: var(--lp-ink); }
.rv-card-content {
  font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--color-brown-500); flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.rv-card-meta { font: var(--type-caption); color: var(--muted); }
.rv-card-product { font: var(--type-caption); color: var(--muted); }
.rv-card-product span { color: var(--lp-brown); font-weight: 600; }
.rv-empty { grid-column: 1 / -1; text-align: center; font: var(--type-body-m); color: var(--muted); padding: 80px 0; }

/* Size variants — a fixed repeating pattern (not random) on a consistent
   3-column / 24px-gap grid, echoing the reference's editorial rhythm. */
.rv-card--wide { grid-column: span 2; flex-direction: row; }
.rv-card--wide .rv-card-image { width: auto; flex: 0 0 42%; height: auto; align-self: stretch; }
.rv-card--wide .rv-card-body { flex: 1; justify-content: center; }
.rv-card--tall .rv-card-image { height: 260px; }
.rv-card--no-image .rv-card-body { justify-content: center; flex: 1; }

.rv-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 56px; }
.rv-page-nav, .rv-page-num {
  all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: var(--type-body-s); color: var(--muted);
  transition: background-color .2s ease, color .2s ease;
}
.rv-page-nav:not([disabled]):hover, .rv-page-num:hover:not(.is-active) { background: var(--color-brown-100); color: var(--lp-ink); }
.rv-page-nav[disabled] { opacity: .35; cursor: default; }
.rv-page-num.is-active { background: var(--lp-brown); color: var(--lp-cream); }

.rv-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 48px;
  width: 100%; margin: 80px 0 0; padding: 72px 80px; background: var(--color-brown-100);
}
.rv-cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.rv-cta-copy h2 { font: var(--type-heading-2); letter-spacing: var(--type-heading-2-tracking); color: var(--lp-ink); }
.rv-cta-decor { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.rv-cta-decor img { width: 100%; max-width: 420px; height: auto; }

@media(max-width: 1100px) {
  .rv-hero { padding: 100px 6%; gap: 40px; }
  .rv-filter-bar, .rv-list { padding-left: 6%; padding-right: 6%; }
  .rv-cta { margin: 60px 0 0; padding: 56px 6%; }
}
@media(max-width: 900px) {
  .rv-hero { flex-direction: column; align-items: flex-start; min-height: 0; }
  .rv-hero-visual { width: 100%; aspect-ratio: 16 / 10; }
  .rv-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-card--wide { grid-column: span 2; }
  .rv-cta { flex-direction: column; text-align: center; align-items: center; }
  .rv-cta-decor { justify-content: center; }
  /* 가운데 정렬인데 라벨·버튼만 왼쪽에 남아 어긋났다 — 같이 가운데로(2026-10-06) */
  .rv-cta-copy { align-items: center; }
}
@media(max-width: 640px) {
  .rv-hero { padding: 90px 6%; }
  .rv-filter-bar { flex-direction: column; align-items: flex-start; padding: 24px 6%; }
  .rv-list { padding: 40px 6% 0; }
  .rv-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .rv-card--wide, .rv-card--tall { grid-column: span 1; grid-row: span 1; }
  .rv-card--wide { flex-direction: column; }
  .rv-card--wide .rv-card-image { flex: none; width: 100%; aspect-ratio: 4 / 3; }
  .rv-card-image { aspect-ratio: 4 / 3; min-height: 0 !important; }
  .rv-cta-copy h2 { font-size: 28px; }
}

/* ==========================================================================
   회사소개 2depth (about.html) — "ab-" namespace. Reuses lp-header/.lp-btn
   and the shared color/typography tokens; no Figma frame exists for this
   page — layout comes from the reference mockups, styling from the system.
   ========================================================================== */
.ab-label { font: var(--type-english-label); letter-spacing: var(--type-english-label-tracking); color: var(--lp-brown); text-transform: uppercase; }
.ab-label--rule { display: inline-flex; align-items: center; gap: 10px; }
.ab-label--rule:after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--lp-brown); }

.ab-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 64px; padding: 130px 80px; }
.ab-hero:before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('./main-bg-texture.png') center / cover no-repeat;
}
.ab-hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 460px; flex-shrink: 0; }
.ab-hero-copy h1 { font: var(--type-heading-1); letter-spacing: var(--type-heading-1-tracking); color: var(--lp-ink); margin-top: 20px; }
.ab-hero-body { font: var(--type-body-m); letter-spacing: var(--type-body-m-tracking); color: var(--color-brown-500); margin-top: 24px; }
.ab-hero-body + .ab-hero-body { margin-top: 16px; }
.ab-signature { font: var(--type-body-s); color: var(--lp-brown); font-weight: 600; margin-top: 32px; }
.ab-hero-visual { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.ab-hero-visual:before {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%);
  width: 80%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--olive); opacity: .16; filter: blur(40px);
}
.ab-photo {
  display: block; width: 100%; max-width: 700px; height: auto;
  /* The photo's own studio backdrop (calligraphy scroll, red ornament,
     wood door) doesn't match the site's paper texture, so instead of just
     softening the rectangle's corners, this mask hugs the person himself:
     off-center (shifted right/down of the frame's middle, matching where
     he actually stands in it, arms spread to near both side edges) and
     keeps him fully opaque — the earlier version's opaque core (26% of the
     ellipse) was too small and faded into his arms/hands, reading as a
     beige wash over the person himself rather than just the backdrop.
     Two layers, intersected: an ellipse sized to his own silhouette (fully
     opaque well past his hands/head) handles the person, and a separate
     four-sided rectangular fade guarantees the photo's literal top/bottom/
     left/right edges always reach full transparency regardless of the
     ellipse — the ellipse alone can't both protect his hands (which sit
     close to the left/right edges) and fully clear the edges themselves.
     Desktop (≥901px) replaces this with a plain bordered portrait frame
     instead — see that override below — so this mask now only matters
     ≤900px, where it's unchanged from before. */
  -webkit-mask-image: radial-gradient(ellipse 68% 92% at 60% 60%, #000 55%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 68% 92% at 60% 60%, #000 55%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
/* Desktop-only: a single, clearly-bounded photo instead of the soft-edged
   cutout above (mask-image:none cancels it here). Two rounds of a cropped
   portrait box (3:4, then 7:8) both still clipped into a hand at some
   viewport width, because any box ratio narrower than the source photo's
   own (1374:1145, ≈ 6:5) necessarily crops its sides. This box now
   matches that native ratio exactly, so object-fit has nothing to crop —
   the entire photo (both hands, full head-to-hem) always shows, at its
   own real proportions, guaranteed regardless of frame width. Thin 1px
   border, small radius, no shadow — reads as a plain photo set on the
   paper. ≤900px keeps the mask/glow above completely untouched. */
@media (min-width: 901px) {
  .ab-hero-visual { align-items: center; }
  .ab-hero-visual:before { content: none; }
  .ab-photo {
    max-width: 580px; aspect-ratio: 1374 / 1145;
    object-fit: contain; object-position: center;
    border: 1px solid var(--color-brown-200); border-radius: 4px;
    -webkit-mask-image: none; mask-image: none;
  }
  /* QA polish: .ab-hero and .ab-history (directly below it) both use this
     same texture, but as two independent `cover`-scaled copies — scaled
     against each section's own (very different) height — so the grain
     and its light/shadow falloff never line up, and the join reads as a
     hard cut. `background-attachment: fixed` makes both sections sample
     the *same* viewport-anchored image instead of their own re-scaled
     copy — same size, same position, in both rules below — so the paper
     grain and its lighting are pixel-continuous across the boundary, the
     same way a fixed background would be across any two plain elements.
     No gradient/blur overlay needed. Desktop-only override; the ≤900px
     base rule (plain `cover`, no attachment) is untouched. */
  .ab-hero:before {
    background-image: url('./main-bg-texture.png');
    background-position: center; background-size: cover;
    background-attachment: fixed; background-repeat: no-repeat;
  }
}

/* History — sits between the About Us hero and the Brand Story section.
   Left intro column (label/heading/body, same stacked pattern as
   .ab-hero-copy/.ab-brand-copy) stays pinned to the top; the timeline runs
   alongside it independently since it's much taller. Reuses the "Our
   Process" timeline's own grid mechanics (1fr dot 1fr, alternating
   left/right via grid-column + a reversed flex order, right-aligned text
   on the left side) — see .pt-step/.pt-dot/.pt-step--left above — rather
   than inventing a new layout primitive. Desktop-only (≥901px): there is
   no ≤900px version yet, so this is scoped here instead of touching the
   existing Tablet/Mobile media queries below. */
@media (min-width: 901px) {
  .ab-history { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 64px; padding: 130px 80px; }
  /* Shares .ab-hero's fixed-attachment texture (see the comment on
     .ab-hero:before above) so the two sections read as one continuous
     sheet of paper instead of two separately-scaled copies. */
  .ab-history:before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: url('./main-bg-texture.png');
    background-position: center; background-size: cover;
    background-attachment: fixed; background-repeat: no-repeat;
  }
  .ab-history-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 380px; flex-shrink: 0; }
  .ab-history-copy h2 { font: var(--type-heading-2); letter-spacing: var(--type-heading-2-tracking); color: var(--lp-ink); margin-top: 20px; }
  .ab-history-body { font: var(--type-body-m); letter-spacing: var(--type-body-m-tracking); color: var(--color-brown-500); margin-top: 24px; }

  .ab-history-timeline { position: relative; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 64px; }
  /* Solid center line, not the dashed one .pt-line uses elsewhere — the
     reference is a plain rule — spanning from the first dot to the last. */
  .ab-history-timeline:before {
    content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; transform: translateX(-50%);
    background: var(--color-brown-200);
  }
  /* Scroll reveal (see history-reveal.js) — same opacity + small translateY
     treatment as .pt-step/.pt-step.is-revealed for the Our Process
     timeline, reused as-is: no center-line draw/fill is added here, and
     each row (dot + year + events, all one grid) fades/nudges in together
     as a single bundle rather than its pieces animating separately. */
  .ab-history-row {
    position: relative; display: grid; grid-template-columns: 1fr 20px 1fr; align-items: flex-start;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .ab-history-row.is-revealed { opacity: 1; transform: translateY(0); }
  /* Nudges the dot down from the row's top edge to sit level with the
     optical center of the year number's line-height, regardless of how
     many event lines follow underneath it. */
  .ab-history-dot { grid-column: 2; justify-self: center; margin-top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--lp-ink); z-index: 1; }
  .ab-history-row--accent .ab-history-dot { background: var(--lp-brown); }

  .ab-history-side { display: flex; align-items: flex-start; gap: 20px; }
  .ab-history-row--right .ab-history-side { grid-column: 3; justify-self: start; }
  .ab-history-row--left .ab-history-side { grid-column: 1; justify-self: end; flex-direction: row-reverse; }

  .ab-history-year { font: 700 32px/1 var(--font-english); letter-spacing: -.02em; color: var(--lp-ink); white-space: nowrap; }
  .ab-history-row--accent .ab-history-year { color: var(--lp-brown); }

  /* max-width wraps the longer entries (e.g. 2014/2013's patent-number
     lines) instead of overflowing past the next column; shorter one-line
     entries just stay below that cap and keep their own natural (ragged)
     width. align-items/text-align flip together on the left side so a
     wrapped line's second line lands flush with the same edge as its
     first, against the center line rather than away from it. */
  .ab-history-events { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 320px; }
  .ab-history-row--left .ab-history-events { align-items: flex-end; }
  .ab-history-event { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); color: var(--color-brown-500); }
  .ab-history-row--left .ab-history-event { text-align: right; }
  .ab-history-month { font-weight: 700; color: var(--lp-ink); margin-right: 8px; }
}

.ab-brand-story {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 64px; padding: 130px 80px;
  /* Sized/positioned so the busy rice-and-wheat cluster in the source photo
     sits lower and further right, clear of the callout text below the logo
     (rather than strict `cover`, which put it right behind the text). */
  background: url('./brand-story-bg.webp') 80% 70% / 130% no-repeat;
}
.ab-brand-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 380px; flex-shrink: 0; }
.ab-brand-copy h2 { font: var(--type-heading-2); letter-spacing: var(--type-heading-2-tracking); color: var(--lp-ink); margin-top: 20px; }
.ab-brand-body { font: var(--type-body-m); letter-spacing: var(--type-body-m-tracking); color: var(--color-brown-500); margin-top: 24px; }

.ab-logo-explain { position: relative; flex: 1; min-width: 0; max-width: 700px; margin: 0 auto; aspect-ratio: 700 / 400; }
.ab-logo-image { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.ab-logo-guides { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-logo-guides line { stroke: var(--lp-brown); stroke-width: 1; }
.ab-logo-guides circle { fill: var(--lp-brown); }
/* Raised from the old 86.25% (which sat inside the photo's busy lower
   region) to just under the logo art's own bottom edge (~58.5% of this
   box), landing on clean paper background. */
.ab-callout { position: absolute; top: 64%; max-width: 280px; text-align: left; }
.ab-callout-title { font: var(--type-body-s); font-weight: 700; color: var(--lp-brown); }
.ab-callout-desc { font: var(--type-caption); color: var(--color-brown-500); margin-top: 10px; }
/* The right callout is anchored near the logo art's own right edge, so an
   auto/shrink-to-fit width gets squeezed to whatever room is left inside
   `.ab-logo-explain` (~114px) and wraps every word onto its own line. A
   fixed width lets it extend slightly past that edge instead — still well
   inside `.ab-brand-story`'s own bounds — matching the left callout's line
   breaks (each description's own two authored lines, nothing more). Scoped
   to the desktop (side-by-side, absolute-positioned) layout only — the
   901px+ guard keeps this out of the existing ≤900px stacked layout below. */
@media (min-width: 901px) {
  .ab-callout--right { max-width: none; width: 210px; }
}

@media(max-width: 1100px) {
  .ab-hero, .ab-brand-story { padding: 110px 6%; gap: 40px; }
}
@media(max-width: 900px) {
  .ab-hero, .ab-brand-story { flex-direction: column; align-items: flex-start; }
  .ab-hero-visual { width: 100%; justify-content: flex-start; }
  .ab-logo-explain { width: 100%; max-width: 100%; }
  /* The two callouts sit side by side, each pointing at a specific spot on
     the logo art — too tight to keep side by side once the art (and its
     container) narrows below ~900px, so the guide lines/dots are dropped
     and both callouts stack in normal flow below the art instead. */
  .ab-logo-guides { display: none; }
  .ab-callout { position: static; max-width: 100%; margin-top: 20px; text-align: left; }
  .ab-callout--right { text-align: left; }
}
@media(max-width: 640px) {
  .ab-hero, .ab-brand-story { padding: 90px 6%; }
  .ab-photo { max-width: 100%; }
  .ab-callout { font-size: 12px; }
}