/** Shopify CDN: Minification failed

Line 460:0 Unexpected "\x01"

**/
/* ============================================================
   CleverSteps Storefront — 홈 v3
   레퍼런스 구조 참고(nymphai / beautyinstem / truekind / omr / 207ouest)
   비주얼은 브랜드 시스템 유지: Warm Ivory · Pantone Black · Deep Navy · Pretendard
   ============================================================ */
/* ── 고정층: 라인이 늘어도 바뀌지 않는 브랜드 자산 ── */
:root{
  --ink:#060303;          /* Pantone Black — 텍스트 전용 */
  --navy:#1D252C;         /* Deep Navy — 인터랙션 전용 */
  --muted:#54585F;
  --surface:#FFFFFF;
  --bg:#FFFFFF;           /* 페이지 배경 — 라인색과 무관한 중립 */
  --bg-alt:#FAFAF8;       /* 한 톤 다른 면 */
  --hdr:76px;             /* 고정 헤더 높이 — 하위 페이지 상단 여백과 sticky 오프셋의 기준 */
  --line-fn:#8F887E;      /* 기능 테두리 */
  --maxw:1560px;
  --gut:clamp(20px,3.4vw,60px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 라인 테마 기본값 (라인 지정이 없을 때) */
  --paper:#FBF8F2;
  --cream:#FDFBF6;
  --line:#E6E4DF;
}
/* ── 라인 테마층: SKU가 늘면 아래 블록만 추가하면 된다 ──
   <body data-line="…"> 로 스코프. 예: [data-line="barrier-blue"]{ --paper:#EFF3F5; … } */
[data-line="rice-vita"]{
  --paper:#F9F4E9;        /* Warm Ivory — 라인 표면색(현재 페이지 배경엔 미사용) */
  --cream:#FDFBF6;
  --line:#E6E2D8;
  --hero-bg:#E9DDCD;      /* 히어로 이미지 로딩 전 배경 */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,'Malgun Gothic',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:15px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden;height:100vh;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--navy);}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px;}
.on-dark :focus-visible,.hero :focus-visible{outline-color:#fff;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- 타이포 스케일 (대형 타이포 + 작은 본문) ---------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em;line-height:1.04;}
.d1{font-size:clamp(44px,7.6vw,124px);letter-spacing:-.045em;line-height:.94;}
.d2{font-size:clamp(34px,5.6vw,86px);letter-spacing:-.04em;line-height:1;}
.d3{font-size:clamp(26px,3.1vw,46px);letter-spacing:-.03em;}
.eyebrow{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.on-dark .eyebrow,.hero .eyebrow{color:rgba(255,255,255,.72);}
.body-l{font-size:clamp(15px,1.15vw,17px);color:var(--muted);max-width:56ch;line-height:1.72;}
.body-l.wide{max-width:none;}   /* 컬럼 폭까지 길게 흐름 */
.body-s{font-size:13.5px;color:var(--muted);line-height:1.7;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.sec{padding:clamp(80px,10vw,180px) 0;}
.on-dark{background:var(--navy);color:#F1EDE4;}
.on-dark .body-l{color:#B9C3CD;}
.cream{background:var(--bg-alt);}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  background:var(--navy);color:#fff;padding:0 34px;border-radius:999px;font-size:13.5px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--navy);cursor:pointer;transition:opacity .2s var(--ease);}
.btn:hover{opacity:.85;}
.btn.light{background:#fff;color:var(--navy);border-color:#fff;}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line-fn);}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55);}
.link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--navy);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:4px;}
.hero .link,.on-dark .link{color:#fff;}

/* ---------- 스크롤 리빌 ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv.d1x{transition-delay:.12s;} .rv.d2x{transition-delay:.24s;} .rv.d3x{transition-delay:.36s;}

/* ============================================================
   0. 인트로 오버레이
   ============================================================ */
.intro{position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;will-change:transform;
  transition:transform 1.25s cubic-bezier(.62,0,.2,1),border-radius 1.25s cubic-bezier(.62,0,.2,1);}
/* 종료: 하단이 곡선으로 부풀며 위로 빨려 올라감 */
.intro.done{transform:translateY(-101%);
  border-bottom-left-radius:62% 13%;border-bottom-right-radius:62% 13%;}
.intro-inner{display:flex;flex-direction:column;align-items:center;
  transition:transform .62s var(--ease),opacity .5s var(--ease);}
.intro.done .intro-inner{transform:translateY(-22px);opacity:0;}

/* 로고 — 어두운 배경 위 흰 로고. ICS 합동전시 인트로 참고:
   가느다란 윤곽선으로 먼저 나타난 뒤 면으로 채워진다(선 → 면).
   아래에서 짧게 올라오는 이동은 유지, 형태 왜곡·회전은 없음. */
.intro-logo{position:relative;width:94vw;max-width:1600px;}   /* 화면 폭을 거의 꽉 채움 */
.intro-svg{display:block;width:100%;height:auto;overflow:visible;}
.intro-svg path,.intro-svg polygon{
  fill:transparent;                      /* 처음엔 속이 빈 상태 */
  stroke:#fff;stroke-width:1;
  vector-effect:non-scaling-stroke;      /* 로고를 키워도 선은 1px로 얇게 */
  transform-box:fill-box;transform-origin:center;
}
.intro-svg .sym{opacity:0;
  animation:symIn 1.35s cubic-bezier(.33,0,.2,1) .15s forwards;}
@keyframes symIn{
  from{opacity:0;transform:translateY(26%);fill:transparent;}
  46%{opacity:1;transform:none;fill:transparent;}
  to{opacity:1;transform:none;fill:#fff;}
}
.intro-svg .ltr{opacity:0;
  animation:ltrIn 1.05s cubic-bezier(.33,0,.2,1) forwards;
  animation-delay:calc(.5s + var(--i) * .072s);}
@keyframes ltrIn{
  from{opacity:0;transform:translateY(30%);fill:transparent;}
  44%{opacity:1;transform:none;fill:transparent;}
  to{opacity:1;transform:none;fill:#fff;}
}

.intro-bar{width:min(420px,52vw);height:1px;background:rgba(255,255,255,.22);
  margin-top:clamp(40px,5vw,68px);position:relative;overflow:hidden;}
.intro-bar span{position:absolute;inset:0 auto 0 0;width:0;background:#fff;}
.intro-num{margin-top:14px;font-size:10.5px;letter-spacing:.3em;color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;}

/* 커튼이 걷히는 동안 히어로가 아주 천천히 제자리로 — 영화적 도입 */
.hero > img{transition:transform 1.9s var(--ease);}
body.intro-on .hero > img{transform:scale(1.04);}

/* ============================================================
   1. 헤더 (히어로 위 오버레이 → 스크롤 시 solid)
   ============================================================ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;}
.hdr .bar{display:flex;align-items:center;gap:28px;height:76px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.hdr .logo{display:block;width:172px;height:24px;font-size:0;color:transparent;flex:0 0 auto;
  background:url(lockup_horizontal_white.svg) no-repeat left center/contain;
  transition:opacity .3s var(--ease);}
.hdr nav{flex:1;display:flex;justify-content:center;}
.hdr .mainnav{display:flex;gap:34px;list-style:none;}
.hdr .mainnav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-decoration:none;padding:14px 0;display:inline-block;opacity:.88;}
.hdr .mainnav a:hover{opacity:1;}

/* Routine 하위 라인 메뉴 */
.hdr .has-sub{position:relative;}
.hdr .sub{position:absolute;left:50%;top:100%;transform:translateX(-50%);list-style:none;
  min-width:210px;padding:14px 0;margin-top:2px;opacity:0;visibility:hidden;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(150%) blur(12px);
  border:1px solid var(--line);border-radius:2px;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);}
.hdr .has-sub:hover .sub,.hdr .has-sub:focus-within .sub{opacity:1;visibility:visible;}
.hdr .sub a{display:block;padding:9px 20px;color:var(--ink);white-space:nowrap;text-align:left;
  font-size:11.5px;letter-spacing:.1em;opacity:.85;}
.hdr .sub a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.hdr .util{display:flex;gap:18px;align-items:center;}
.hdr .util a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;opacity:.88;}
/* 카트: 언어 무관 동일 폭(아이콘+숫자) — CART/CARRITO 길이 차로 모바일 오버플로되던 문제 */
.hdr .util .cart{gap:7px;}
.hdr .util .cart svg{width:20px;height:20px;display:block;}
.hdr .util .cart-count{letter-spacing:0;}
.hdr .burger{display:none;background:none;border:0;color:#fff;font-size:19px;min-height:44px;min-width:44px;}
/* 스크롤 후 */
.hdr.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(12px);border-bottom-color:var(--line);}
.hdr.solid .logo{background-image:url(lockup_horizontal_navy.svg);}
.hdr.solid .mainnav a,.hdr.solid .util a,.hdr.solid .burger{color:var(--ink);}

/* ============================================================
   1-b. 하위 페이지 (routine 등) — 라인 헤더 · 탭 · 점프 링크
   ============================================================ */
body.page-sub{padding-top:var(--hdr);}
.line-head{padding:clamp(48px,6vw,92px) 0 clamp(30px,4vw,54px);border-bottom:1px solid var(--line);}
.line-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3.4vw,44px);}
.line-tabs .tab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:9px 16px;border:1px solid var(--line-fn);border-radius:999px;color:var(--ink);}
.line-tabs .tab.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.line-tabs .tab.is-soon{border-style:dashed;color:var(--muted);}
.jump{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;}
.jump a{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;}

/* ============================================================
   2. 히어로 — 100vh 풀블리드
   ============================================================ */
/* 히어로는 화면에 붙어 있고, 뒤따르는 섹션이 그 위를 덮으며 올라온다
   ⚠️ sticky 요소 자신에는 transform을 걸면 안 된다(고정이 풀린다) — 패럴랙스는 자식(.hero-media/.inner)에만 */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:600px;overflow:hidden;
  background:var(--hero-bg,#E9DDCD);}
/* 히어로 뒤 모든 블록은 배경을 가진 레이어로 올라온다 */
main > *:not(.hero){position:relative;z-index:1;}
main > section:not(.hero):not(.on-dark):not(.cream){background:var(--bg);}
.hero-media{position:absolute;inset:0;will-change:transform;}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-media img{object-position:34% center;}
.hero-media video{object-position:center center;background:var(--hero-bg,#EDE9E3);
  opacity:0;transition:opacity .9s var(--ease);}
.hero-media video.is-on{opacity:1;}
/* 에센스 제형 컷은 다른 컷보다 톤이 낮아 veil을 얹으면 탁해진다 → 살짝 보정.
   나머지 컷은 원본이 이미 밝아 보정하지 않는다 (클렌저 컷은 인코딩 단계에서 색보정) */
#heroVideo2{filter:brightness(1.12) saturate(1.04);}   /* 에센스 제형 컷 전용 — 클립 순서를 바꾸면 이 선택자도 함께 옮겨야 한다 */
.hero .inner{will-change:transform,opacity;}
.hero .veil{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(22,15,9,.44) 0%,rgba(22,15,9,.06) 20%,rgba(22,15,9,.15) 52%,rgba(22,15,9,.58) 100%),
    linear-gradient(72deg,rgba(22,15,9,.52) 0%,rgba(22,15,9,.26) 32%,rgba(22,15,9,0) 60%);}
.hero .inner{position:absolute;inset:auto 0 0 0;padding:0 var(--gut) clamp(48px,6vw,84px);
  max-width:var(--maxw);margin:0 auto;color:#fff;}
.hero h1{color:#fff;max-width:14ch;margin:18px 0 0;}
.hero .sub{margin-top:clamp(20px,2.6vw,32px);}
.hero .sub p{font-size:clamp(14px,1.1vw,16.5px);color:rgba(255,255,255,.9);max-width:38ch;line-height:1.7;}
.hero .scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.72);
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.hero .scroll::after{content:"";width:1px;height:26px;background:rgba(255,255,255,.5);animation:sdown 1.9s var(--ease) infinite;}
@keyframes sdown{0%{transform:scaleY(.2);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}
  51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(.2);transform-origin:bottom;}}

/* 줄 단위 마스크 리빌 — 줄마다 아래에서 밀려 올라온다 */
.lines{display:block;}
.lines .ln{display:block;overflow:hidden;}
.lines .ln > i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.22,.7,.24,1);}
.lines.in .ln:nth-child(1) > i{transition-delay:.05s;}
.lines.in .ln:nth-child(2) > i{transition-delay:.16s;}
.lines.in .ln > i{transform:none;}

/* ============================================================
   4. 선언 (대형 타이포)
   ============================================================ */
.manifesto{text-align:center;will-change:transform;}
.manifesto .d2{max-width:18ch;margin:22px auto 0;}
.manifesto .body-l{margin:clamp(26px,3vw,40px) auto 0;text-align:center;}
.manifesto .mark{width:clamp(120px,14vw,190px);height:1px;background:var(--line-fn);margin:clamp(34px,4vw,56px) auto 0;}

/* ============================================================
   5. 컬렉션 그리드
   ============================================================ */
.coll-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:clamp(30px,3.4vw,52px);flex-wrap:wrap;}
/* 레퍼런스(KÖPPEN) 방식 — 카드가 화면 폭을 꽉 채우고, 사이는 1px 선으로만 나뉜다 */
.coll{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
/* 카드 그리드 아래 .sec 하단 패딩(144px)이 배너와의 빈 공간으로 보이므로 없애고 배너를 바로 붙인다.
   그리드가 이미 풀블리드라 배너까지 하나의 블록으로 이어진다 */
#products{padding-bottom:0;}
.card{text-decoration:none;color:inherit;display:block;background:var(--bg);
  padding-bottom:clamp(20px,2.2vw,30px);}
.card{transition:transform .55s var(--ease);}
.card .ph{position:relative;background:var(--bg-alt);overflow:hidden;
  aspect-ratio:3/4;}   /* 원본(973x1300)과 같은 비율 — 잘림 없음 */
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .75s var(--ease),transform 1.4s var(--ease);}
.card .ph .img-b{opacity:0;}
/* 호버: 용기 단독 컷 → 용기+단상자 컷으로 교체되고, 카드가 살짝 떠오른다 */
.card:hover{transform:none;}
.card:hover .ph .img-a,.card:focus-visible .ph .img-a{opacity:0;}
.card:hover .ph .img-b,.card:focus-visible .ph .img-b{opacity:1;}
.card:hover .ph img,.card:focus-visible .ph img{transform:scale(1.028);}
.card .ph-cta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(6,3,3,.5),rgba(6,3,3,0));
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .5s var(--ease);}
.card:hover .ph-cta,.card:focus-visible .ph-cta{opacity:1;transform:none;}
/* 제품명 밑줄이 왼쪽에서 그려짐 */
.card h3{position:relative;display:block;width:fit-content;}
.card h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.card:hover h3::after,.card:focus-visible h3::after{transform:scaleX(1);}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:18px;padding:0 clamp(14px,1.4vw,22px);}
.card .step{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.card h3{font-size:clamp(17px,1.4vw,21px);margin-top:6px;letter-spacing:-.02em;}
.card .vals{font-size:12.5px;color:var(--muted);margin-top:6px;letter-spacing:.03em;}
.card .price{font-size:15px;font-weight:600;white-space:nowrap;}
.card .price s{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px;}

/* ============================================================
   6. 스티키 3-스텝 (좌 이미지 고정 · 우 텍스트 스크롤)
   ============================================================ */
body.page-sub .steps .head{padding-top:clamp(56px,6.5vw,104px);}

/* ============================================================
   7. 성분
   ============================================================ */
.ing{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,96px);align-items:center;}
.ing .shot{border-radius:2px;overflow:hidden;background:var(--bg-alt);}
.ing .shot img{width:100%;aspect-ratio:3/4;object-fit:cover;}   /* 소재가 모두 세로 3:4 (rice_complex·shop_*) */
.ing .d3{margin:18px 0 20px;}
.ing dl{margin-top:clamp(26px,3vw,40px);}
.ing dt{font-size:14.5px;font-weight:600;padding-top:16px;border-top:1px solid var(--line);}
.ing dd{font-size:13px;color:var(--muted);padding:4px 0 16px;line-height:1.7;}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px;}

/* ---- 성분 상세(cleversteps.mx/pages/ingredients 이관) ---- */
/* Why it works 헤드 — mx 와 같은 가운데 정렬. 블록에 margin:auto 가 없으면
   max-width 탓에 좌측으로 붙으므로 자식 블록마다 auto 를 준다 */
.ing-head{text-align:center;}
.ing-head h2{max-width:16ch;margin:18px auto 22px;}
.ing-head .body-l{max-width:62ch;margin-inline:auto;}
/* 스펙 스트립 — 라인 전체 수치를 한 줄로. 항목 사이는 슬래시로 끊는다 */
.spec-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;list-style:none;
  margin:clamp(28px,3.2vw,42px) 0 0;padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--line);}
.spec-strip li{font-size:13px;letter-spacing:.02em;color:var(--muted);}
.spec-strip b{font-weight:600;color:var(--ink);}   /* 수치만 강조 (mx 와 동일) */
.spec-strip li + li::before{content:"/";margin:0 12px;color:var(--line-fn);}
/* 성분 표 — 좌 이름 / 우 설명. .ing dl 기본형을 2열로 바꿔 쓴다 */
.ing .spec-list{display:grid;grid-template-columns:1fr 1.25fr;margin-top:clamp(26px,3vw,40px);}
.ing .spec-list dt{grid-column:1;align-self:start;font-size:14.5px;font-weight:600;line-height:1.45;
  padding:16px 20px 16px 0;border-top:1px solid var(--line);}
.ing .spec-list dd{grid-column:2;margin:0;font-size:13px;color:var(--muted);line-height:1.7;
  padding:16px 0;border-top:1px solid var(--line);}
.spec-list .q{display:block;font-weight:600;letter-spacing:-.02em;}
/* 주의사항 아코디언 — 기본 마커를 지우고 +/− 로 */
.care{margin-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.care summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:16px 0;font-size:14px;}
.care summary::-webkit-details-marker{display:none;}
.care summary::after{content:"+";font-size:16px;color:var(--muted);}
.care[open] summary::after{content:"−";}
.care p{padding:0 0 18px;font-size:13px;line-height:1.7;color:var(--muted);}
/* 스텝 상세 블록 — 성분(#ingredients)에서 How to Use 로 옮겼다. 이미지는 좌우 교대 */
.use-step{margin-top:clamp(56px,7vw,110px);}
.use-step.flip .shot{order:2;}
.use-head{margin-bottom:clamp(8px,1.5vw,24px);}
.use-step .no{font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1;
  color:var(--line-fn);}
.use-step .tag{display:block;margin-top:14px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:600;}
.use-step h3{margin:16px 0 18px;}
.use-step .shot img{aspect-ratio:1208/1500;}   /* step_*_v 소재 비율 — cover 크롭이 생기지 않게 */
/* 결과 수치 — 임상 상세는 아래 Clinical 섹션이 담당하므로 여기서는 한 줄 요약만 */
.results{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;}
.results li{position:relative;padding:9px 0 9px 20px;font-size:13.5px;line-height:1.6;
  border-top:1px solid var(--line);}
.results li::before{content:"";position:absolute;left:2px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--navy);}
/* 헤드(스펙 스트립)와 붙어 있으면 이미지가 위로 파고든다(.ing 이 align-items:center 라
   텍스트 열이 세로 중앙으로 올라온다) → .ing-why 와 같은 리듬으로 여백을 준다 */
.ing-base{margin-top:clamp(52px,6.4vw,104px);}
/* 누끼(투명 배경)는 잘라내면 안 되므로 contain + 자체 비율, 프레임 배경도 없앤다 */
.ing-base .shot{background:none;}
.ing-base .shot img{aspect-ratio:auto;object-fit:contain;}

/* ---- mx 가 placeholder 로 비워둔 자리를 채운 신뢰 컷들 ---- */
/* 쌀 → 쌀뜨물 → 추출물 → 제형 스트립 (21:9) */
.process-strip{display:block;width:100%;height:auto;border-radius:2px;
  margin-top:clamp(34px,4vw,58px);}
/* 임상 측정 장면 — 다크 섹션이라 밝은 사진이 그대로 대비가 된다 */
.proof-shot{display:block;width:100%;height:auto;border-radius:2px;
  margin-top:clamp(34px,4vw,60px);}
/* 연구 · 생산 2컷 */
.std-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);
  margin-bottom:clamp(40px,5vw,76px);}
.std-shots img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;display:block;}

/* ---- Why it works — 라인 전체 수치 표 (mx 홈 이관) ---- */
.ing-why{margin-top:clamp(56px,7vw,110px);}
.ing-why .shot img{aspect-ratio:3/4;}
.why-list{display:grid;grid-template-columns:auto 1fr;gap:0;margin:clamp(26px,3vw,40px) 0 0;}
.why-list dt{grid-column:1;padding:13px 24px 13px 0;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
.why-list dd{grid-column:2;margin:0;padding:13px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:flex-end;text-align:right;
  font-size:13px;color:var(--muted);}
.why-note{margin-top:22px;font-size:11.5px;letter-spacing:.02em;color:var(--muted);}

/* ---- Application demonstration — 스텝별 발림 컷 3열 (mx 홈 이관) ---- */
.apply-head{text-align:center;}
.apply-head h2{max-width:22ch;margin:14px auto 0;}
.apply-head .body-l{max-width:56ch;margin:16px auto 0;}
.apply-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);
  margin-top:clamp(38px,4.6vw,66px);}
.apply-grid figure{margin:0;}
.apply-grid .shot{overflow:hidden;border-radius:2px;background:var(--bg-alt);}
/* 소재가 16:9 라 세로 프레임에 넣으면 좌우가 잘린다. 얼굴이 중앙에서 살짝 우측이라 그만큼 옮긴다 */
.apply-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:56% center;}
/* Wrap 컷 원본에는 우측 하단에 크림 용기가 있지만, 4:5 로 크롭하면 어느 위치를 잡아도
   용기가 반만 들어와 라벨이 깨져 보인다. 발림 시연 섹션이므로 세 컷 모두 얼굴 중심으로 통일한다.
   (제품 노출은 The Products·성분 섹션이 담당한다) */
.apply-grid figcaption{margin-top:16px;text-align:center;}
.apply-grid figcaption b{display:block;font-size:14.5px;font-weight:500;}
.apply-grid figcaption span{display:block;margin-top:6px;font-size:13px;color:var(--muted);}

/* ---- 임상 — 스텝별 수치 카드 3열 ---- */
.ctest{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);
  margin-top:clamp(40px,5vw,72px);}
.ctest > div{background:var(--navy);padding:clamp(24px,2.6vw,34px);}
.ctest h3{margin-top:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;}
/* 열 사이 gap 을 주면 행 구분선이 끊기므로 gap 0 + dd 패딩으로 벌린다 */
.ctest dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:clamp(16px,1.8vw,22px) 0 0;}
.ctest dt{grid-column:1;padding:11px 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(18px,1.5vw,23px);font-weight:600;letter-spacing:-.03em;color:#fff;}
/* align-self:center 를 쓰면 셀 자체가 내려가 구분선이 dt 와 어긋난다. 셀은 stretch, 안에서 flex 로 맞춘다 */
.ctest dd{grid-column:2;margin:0;padding:11px 0 11px 16px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:flex-end;text-align:right;font-size:12.5px;color:#B9C3CD;}
.ctest .note{margin-top:16px;font-size:11.5px;letter-spacing:.04em;color:#8E9AA6;}
.chip{font-size:11.5px;letter-spacing:.04em;border:1px solid var(--line-fn);border-radius:999px;padding:6px 13px;}

/* ============================================================
   8. 임상 (다크)
   ============================================================ */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(40px,5vw,72px);
  border-top:1px solid rgba(255,255,255,.16);}
.proof-grid > div{padding:clamp(30px,3.6vw,52px) clamp(20px,2.4vw,40px);border-left:1px solid rgba(255,255,255,.16);}
.proof-grid > div:first-child{border-left:0;padding-left:0;}
.proof-grid .n{font-size:clamp(38px,5.4vw,76px);font-weight:600;letter-spacing:-.045em;color:#fff;line-height:1;}
.proof-grid .what{margin-top:16px;font-size:14.5px;color:#EDE8DE;}
.proof-grid .who{margin-top:8px;font-size:11.5px;letter-spacing:.06em;color:#8E9AA6;}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(34px,4vw,54px);}
.badges span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 14px;color:#E5E0D6;}
.footnote{margin-top:26px;font-size:11.5px;color:#8E9AA6;max-width:80ch;line-height:1.75;}

/* ============================================================
   9. 풀블리드 배너 + 스토리
   ============================================================ */
.banner{position:relative;overflow:hidden;height:clamp(340px,52vw,660px);background:var(--bg-alt);}
/* 워드마크가 가로 중앙에 있으므로 가로는 반드시 center — 세로는 항상 꽉 차서 값이 무의미하다 */
.banner img,.banner video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* 좌측 이미지를 화면에 꽉 채우고, 우측 텍스트는 세로 중앙 (풀블리드 split) */
.story{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--bg);}
.story .shot{position:relative;overflow:hidden;min-height:clamp(560px,92svh,1080px);}
.story .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.story .txt{display:flex;align-items:center;padding:clamp(48px,7vw,110px) var(--gut);}
.story .txt-inner{max-width:min(124ch,100%);}
.story .body-l strong{font-weight:600;color:var(--ink);}   /* 넓은 화면에서 본문이 두 줄로 펼쳐지도록 */
.story .sig{margin-top:clamp(30px,3.2vw,44px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--line);max-width:none;
  font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.62;letter-spacing:-.005em;color:var(--ink);}


/* ============================================================
   Our Story 페이지 — 창업자 · 헤리티지 · 신념
   ============================================================ */
/* hero split은 The Brand(.story)와 같은 규칙을 재사용하되, 이 페이지는 이미지가 우측 */
#story-hero .shot{order:2;}
#story-hero .txt{order:1;}

/* 창업자 — 단일 열 중앙 정렬. 인용문을 크게 두고 이름은 서명처럼 아래에 */
.founder{max-width:min(78ch,100%);margin:0 auto;text-align:center;will-change:transform;}
.founder .pull{margin:20px auto 30px;font-size:clamp(24px,3vw,42px);font-weight:600;
  letter-spacing:-.03em;line-height:1.18;max-width:24ch;}
.founder .body-l{margin:0 auto;max-width:62ch;}
.founder .body-l + .body-l{margin-top:16px;}
.founder .sign{margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line);display:inline-flex;flex-direction:column;gap:4px;}
.founder .sign strong{font-size:14.5px;font-weight:600;}
.founder .sign span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

/* 헤리티지 — hero와 같은 .story split 재사용, 이미지는 좌측(기본 순서).
   잘려도 좋으니 높이를 가득 채운다 */


/* 신념 — 좌측 정렬. 아래 Our Standards 와 시작선을 맞춘다
   (가운데 정렬은 eyebrow(inline)·h2·본문이 각각 다른 x 에서 시작해 어긋나 보였다) */
.pillars h2{max-width:20ch;}
.pillars .body-l{max-width:48ch;}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);
  margin-top:clamp(40px,5vw,72px);}
.pillar-grid > div{background:var(--navy);padding:clamp(24px,2.6vw,36px);}
/* 첫 칸은 좌측 패딩을 없애 제목·본문과 시작선을 맞춘다 (임상 3열과 같은 처리) */
.pillar-grid > div:first-child{padding-left:0;}
.pillar-grid h3{font-size:15px;letter-spacing:-.01em;}
.pillar-grid p{margin-top:10px;font-size:13.5px;line-height:1.7;color:#B9C3CD;}

/* Our Standards — cleversteps.mx의 OUR STANDARDS. 좌측 제목 / 우측 번호 리스트.
   신념 섹션과 같은 다크가 연달아 오므로 상단 구분선으로 두 블록을 나눈다 */
/* 신념 섹션과 붙어 있으므로 상단 여백은 절반만 준다 (구분선이 이미 두 블록을 나눈다) */
#standards{border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(56px,6vw,100px);}
.std{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,90px);align-items:start;}
.std-head h2{max-width:18ch;}
.std-list{list-style:none;margin:0;padding:0;}
.std-list li{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(20px,3vw,48px);
  padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid rgba(255,255,255,.16);}
.std-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16);}
.std-k .num{display:block;font-size:clamp(17px,1.35vw,21px);font-weight:600;letter-spacing:-.02em;}
.std-k h3{margin-top:6px;font-size:15px;font-weight:600;letter-spacing:-.01em;}
.std-list p{align-self:center;font-size:13.5px;line-height:1.7;color:#B9C3CD;}

/* ============================================================
   9-b. 제품 상세 (product-*.html) — toss.im 인트로 기법을 절제해 적용
   ------------------------------------------------------------
   .pin-track 이 여러 화면 높이를 갖고, 그 안의 .pin 이 sticky 로 고정된다.
   스크롤 진행도는 storefront.js 가 --p (0→1) 로 넣어주고 값 보간은 여기서 한다.
   토스는 트랙 전체를 잠그지만 커머스에서는 구간마다 2~3화면으로 끊는다.
   ============================================================ */
.pin-track{position:relative;height:var(--track,220svh);--p:0;}
/* 고정 헤더(fixed)만큼 body 가 밀려 있으므로 그만큼 빼야 화면에 꼭 맞는다.
   top 도 같이 내려야 sticky 로 붙었을 때 헤더에 상단이 가려지지 않는다 */
.pin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));overflow:hidden;}

/* --- 히어로: 라운드 박스 → 풀블리드 확장 --- */
/* position 은 건드리지 않는다 — .pin 의 sticky 를 덮으면 고정이 풀린다.
   sticky 도 positioned 요소라 자식 absolute 의 기준이 된다 */
.pdp-hero{background:var(--bg);}
/* 진행도에 따라 좌우 여백과 라운드가 0 으로 수렴한다(폭은 여백에서 파생) */
.pdp-hero-media{position:absolute;top:calc((1 - var(--p)) * 8svh);
  left:calc((1 - var(--p)) * 9vw);right:calc((1 - var(--p)) * 9vw);
  bottom:calc((1 - var(--p)) * 8svh);
  border-radius:calc((1 - var(--p)) * 6px);overflow:hidden;background:var(--bg-alt);}
.pdp-hero-media img,.pdp-hero-media video{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;
  transform:scale(calc(1 + var(--p) * 0.07));transform-origin:center;}
/* 카피는 확장이 절반쯤 지날 때까지 남아 있다가 조용히 빠진다.
   소재(폼 컷)가 아주 밝은 아이보리라 흰 글자는 읽히지 않는다 → 잉크색으로 두고
   제품을 가리지 않게 좌측 하단에 앉힌다 */
/* 좌상단 고정. 소재(제품 단독 컷)는 제품이 중앙 아래에 있고 위가 비어 있어서
   하단에 두면 카피가 제품을 가로지른다. grid 정렬로 두면 내용 높이 + 패딩이 100svh 를 넘겨 잘린다 */
.pdp-hero-copy{position:absolute;left:0;right:0;top:0;z-index:2;
  /* 미디어가 확장할수록 프레임 상단(8svh)이 0 으로 가므로 그만큼 같이 당겨
     카피가 늘 프레임 안쪽에 일정 여백으로 놓이게 한다 */
  padding:calc((1 - var(--p)) * 8svh + clamp(34px,4.6svh,60px)) clamp(28px,6vw,96px) 0;
  color:var(--ink);
  opacity:calc(1 - var(--p) * 1.5);
  transform:translate3d(0,calc(var(--p) * -28px),0);}
.pdp-hero-copy .d2{margin:14px 0 12px;max-width:22ch;}
.pdp-hero-copy .body-l{color:var(--muted);}
.pdp-hint{position:absolute;right:calc(clamp(28px,6vw,96px) + (1 - var(--p)) * 9vw);bottom:clamp(64px,9svh,110px);z-index:2;
  font-size:10.5px;letter-spacing:.3em;margin-right:-.3em;   /* 자간이 마지막 글자 뒤에도 붙어 넘친다 */
  text-transform:uppercase;color:var(--muted);
  opacity:calc(1 - var(--p) * 3);}

/* --- 구매 블록 --- */
.pdp-buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,90px);align-items:start;}
.pdp-buy-grid .shot{overflow:hidden;border-radius:2px;background:var(--bg-alt);}
.pdp-buy-grid .shot img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.pdp-buy-info .vals{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);}
.pdp-buy-info .body-l{margin-top:22px;}
.pdp-price{display:flex;align-items:baseline;gap:14px;margin-top:clamp(26px,3vw,38px);}
.pdp-price .amt{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;}
.pdp-price s{font-size:clamp(16px,1.5vw,20px);font-weight:400;color:var(--muted);}
.pdp-price .unit{font-size:12.5px;color:var(--muted);}
.pdp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px;}
.pdp-cta .btn{min-width:190px;}
.pdp-buy-info .spec-list{display:grid;grid-template-columns:1fr 1.5fr;
  margin-top:clamp(30px,3.4vw,46px);}
.pdp-buy-info .spec-list dt{grid-column:1;font-size:13px;font-weight:600;padding:15px 20px 15px 0;
  border-top:1px solid var(--line);}
.pdp-buy-info .spec-list dd{grid-column:2;margin:0;font-size:13px;line-height:1.7;color:var(--muted);
  padding:15px 0;border-top:1px solid var(--line);}

/* --- 성분: 고정된 화면에서 항목이 순차 활성화 --- */
.pdp-facts{background:var(--paper);display:grid;align-items:center;}
.pdp-facts-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(30px,5vw,90px);align-items:center;}
.pdp-steps{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;}
.pdp-steps li{padding:clamp(16px,2vw,24px) 0;border-top:1px solid var(--line);
  opacity:.34;transition:opacity .5s cubic-bezier(.33,0,.2,1);}
.pdp-steps li.on{opacity:1;}
.pdp-steps .q{font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.03em;}
.pdp-steps h3{margin-top:4px;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;}
/* 설명은 활성 항목만 펼친다 — 고정 화면 안에서 높이가 튀지 않게 grid-template-rows 로 */
.pdp-steps p{display:grid;grid-template-rows:0fr;overflow:hidden;margin-top:0;
  font-size:13.5px;line-height:1.7;color:var(--muted);
  transition:grid-template-rows .5s cubic-bezier(.33,0,.2,1),margin-top .5s;}
.pdp-steps p > *,.pdp-steps p{min-height:0;}
.pdp-steps li.on p{grid-template-rows:1fr;margin-top:10px;}
.pdp-facts-media{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;
  background:var(--bg-alt);}
.pdp-facts-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s cubic-bezier(.33,0,.2,1);}
.pdp-facts-media img.on{opacity:1;}

/* --- 임상 카운트업 --- */
/* 기간 그룹(.count-groups): 상단 경계선은 컨테이너가 갖고, 그룹 라벨(1회/2주)이 그리드를 나눈다 */
.count-groups{margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(255,255,255,.16);}
.count-group-label{margin:clamp(30px,3.4vw,48px) 0 0;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(237,232,222,.62);}
.count-groups .count-grid{margin-top:0;border-top:0;}
.count-group-label + .count-grid > div{padding-top:clamp(16px,1.8vw,24px);}
.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(255,255,255,.16);}
.count-grid > div{padding:clamp(30px,3.6vw,52px) clamp(20px,2.4vw,40px);
  border-left:1px solid rgba(255,255,255,.16);}
.count-grid > div:first-child{border-left:0;padding-left:0;}
.count-grid .n{font-size:clamp(36px,5vw,70px);font-weight:600;letter-spacing:-.045em;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums;}
.count-grid .what{margin-top:16px;font-size:14.5px;color:#EDE8DE;}

/* --- 다음 스텝 --- */
.pdp-next-grid{grid-template-columns:repeat(2,1fr);}

/* ---- 제품 상세 (기본형) — build_pdp.py 가 만드는 페이지들 ---- */
.pdp-top{padding-bottom:clamp(60px,7vw,120px);}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:clamp(22px,2.6vw,38px);
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--ink);}
.pdp-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,84px);align-items:start;}
.pdp-main{overflow:hidden;border-radius:2px;background:var(--bg-alt);}
.pdp-main img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);
  margin-top:clamp(10px,1.2vw,16px);}
.pdp-thumbs .thumb{padding:0;border:1px solid transparent;border-radius:2px;overflow:hidden;
  background:var(--bg-alt);cursor:pointer;transition:border-color .3s var(--ease);}
.pdp-thumbs .thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.pdp-thumbs .thumb.is-on{border-color:var(--navy);}
/* 구매 정보는 갤러리가 길어도 따라오게 (기본형이라 잠금 없이 sticky 만) */
.pdp-info{position:sticky;top:calc(var(--hdr) + 28px);}
.pdp-info .vals{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);}
.pdp-info .body-l{margin-top:20px;}
.pdp-acc{margin-top:clamp(28px,3.2vw,42px);border-top:1px solid var(--line);}
.pdp-acc details{border-bottom:1px solid var(--line);}
.pdp-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:15px 0;font-size:14px;}
.pdp-acc summary::-webkit-details-marker{display:none;}
.pdp-acc summary::after{content:"+";font-size:16px;color:var(--muted);}
.pdp-acc details[open] summary::after{content:"−";}
.pdp-acc p{padding:0 0 17px;font-size:13.5px;line-height:1.75;color:var(--muted);}
.pdp-reg{margin-top:20px;font-size:11.5px;line-height:1.7;color:var(--muted);}
/* 성분 표 — 절반 폭이 아니라 본문 폭 전체를 쓴다 */
.spec-list.wide{display:grid;grid-template-columns:1fr 1.6fr;margin-top:clamp(28px,3.2vw,44px);}
.spec-list.wide dt{grid-column:1;padding:16px 24px 16px 0;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:600;line-height:1.45;}
.spec-list.wide dd{grid-column:2;margin:0;padding:16px 0;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--muted);}

/* ============================================================
   10. 뉴스레터 + 거대 워드마크 푸터
   ============================================================ */
.news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,80px);align-items:end;}
.news form{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.news input{flex:1;min-width:220px;min-height:50px;padding:0 20px;border:1px solid var(--line-fn);
  border-radius:999px;background:transparent;font:inherit;font-size:14px;color:var(--ink);}
.news small{display:block;margin-top:14px;font-size:11.5px;color:var(--muted);}

/* 레퍼런스(sorellerevive) 구조: 거대 워드마크가 먼저, 그 아래 링크 컬럼 */
.ftr{background:var(--navy);color:#A9B6C2;padding-top:clamp(44px,5vw,74px);overflow:hidden;}
.ftr .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:var(--maxw);
  margin:0 auto;padding:clamp(38px,4.4vw,64px) var(--gut) 0;}
.ftr h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ftr a{font-size:13px;color:#A9B6C2;text-decoration:none;}
.ftr a:hover{color:#fff;}
.ftr .wordmark{padding:0 var(--gut);margin-bottom:clamp(30px,3.4vw,48px);}
.ftr .wordmark img{width:100%;opacity:.92;}
.ftr .end{max-width:var(--maxw);margin:clamp(28px,3vw,44px) auto 0;padding:20px var(--gut) 26px;
  border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:11.5px;color:#8595A3;}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1024px){
  .hdr .mainnav{display:none;}
  .hdr .burger{display:inline-block;}
  .hdr .util .acct{display:none;}

  .ing,.story,.news{grid-template-columns:1fr;}
  .pdp-buy-grid{grid-template-columns:1fr;}
  .pdp-grid{grid-template-columns:1fr;}
  .pdp-info{position:static;}   /* 1열에서는 sticky 가 의미 없다 */
  .spec-list.wide{grid-template-columns:1fr 1.3fr;}
  .pdp-facts-grid{grid-template-columns:1fr;gap:26px;}
  .pdp-facts-media{aspect-ratio:16/10;}   /* 고정 화면에 세로컷이 다 안 들어가므로 가로로 */
  .count-grid{grid-template-columns:1fr;}
  .count-grid > div{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;}
  .ctest{grid-template-columns:1fr;}
  .apply-grid{grid-template-columns:1fr 1fr;}
  .use-step.flip .shot{order:0;}   /* 1열에서는 교대 배치가 의미 없으므로 이미지 먼저 */
  .use-step .shot,.ing-why .shot{max-width:520px;}   /* 1열에서 세로 컷이 화면 높이를 넘지 않도록 (좌측 정렬 유지) */
  .std{grid-template-columns:1fr;gap:clamp(26px,4vw,40px);}
  .pillar-grid{grid-template-columns:1fr;}
  /* 1열이 되면 카드 좌우 패딩이 다른 텍스트와 어긋나므로 없애고 위아래만 남긴다 */
  .pillar-grid > div{padding:clamp(20px,3.4vw,26px) 0;}
  /* 1열이 되면 이미지가 화면을 다 먹지 않도록 비율로 제한 */
  .story .shot{min-height:0;height:clamp(420px,62svh,760px);}   /* 폭은 100% 유지, 높이만 제한 */
  .story .txt{padding:clamp(38px,7vw,72px) var(--gut);}
  .story .txt-inner{max-width:none;}
  .proof-grid{grid-template-columns:1fr;border-top:0;}
  .proof-grid > div{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;}
  .ftr .cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .intro-svg path,.intro-svg polygon{stroke-width:1.3;}   /* 작은 화면에서 윤곽선이 묻히지 않도록 */
  .hero{height:92svh;}
  .hero > img{object-position:52% center;}
  .hero .scroll{display:none;}                     /* 모바일: CTA와 겹쳐 숨김 */
  .hero .veil{background:linear-gradient(180deg,rgba(22,15,9,.42) 0%,rgba(22,15,9,.07) 18%,rgba(22,15,9,.36) 50%,rgba(22,15,9,.72) 100%);}
  .hero .inner{padding-bottom:clamp(56px,9vw,76px);}
  .hero .sub p{max-width:none;}
  .coll{grid-template-columns:1fr;gap:34px;}
  .pdp-next-grid{grid-template-columns:1fr;}
  .spec-list.wide{grid-template-columns:1fr;}
  .spec-list.wide dt{grid-column:auto;padding:14px 0 3px;}
  .spec-list.wide dd{grid-column:auto;padding:0 0 14px;border-top:0;}
  .apply-grid{grid-template-columns:1fr;}
  .std-shots{grid-template-columns:1fr;}
  .apply-grid img{aspect-ratio:16/10;}   /* 1열에서는 세로로 길면 과하다 */
  .why-list{grid-template-columns:1fr;}
  .why-list dt{grid-column:auto;padding:12px 0 2px;white-space:normal;}
  .why-list dd{grid-column:auto;padding:0 0 12px;border-top:0;justify-content:flex-start;text-align:left;}
  .pdp-buy-info .spec-list{grid-template-columns:1fr;}
  .pdp-buy-info .spec-list dt{grid-column:auto;padding:14px 0 2px;}
  .pdp-buy-info .spec-list dd{grid-column:auto;padding:0 0 14px;border-top:0;}
  .pdp-hero-media{top:0;left:0;right:0;bottom:0;border-radius:0;}   /* 모바일은 처음부터 풀블리드 */
  .pdp-hero-copy{padding-top:clamp(30px,4svh,52px);}                /* 프레임 오프셋이 없으니 그만큼만 */
  .ing .spec-list{grid-template-columns:1fr;}
  .ing .spec-list dt{grid-column:auto;padding-bottom:4px;padding-right:0;}
  .ing .spec-list dd{grid-column:auto;padding-top:0;border-top:0;text-align:left;}
  .std-list li{grid-template-columns:1fr;gap:10px;}   /* 좁은 화면에선 번호·제목 아래로 설명 */

  .ftr .cols{grid-template-columns:1fr;}
  /* 배너 영상은 좌우가 잘린다. 워드마크가 다 보이는 최소 높이(≈64vw)로 낮춘다 */
  .banner{height:clamp(230px,64vw,420px);}
}
/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  /* 잠금 연출은 스크롤 제어를 빼앗으므로 모션 최소화 설정에서는 일반 섹션처럼 흐르게 한다 */
  .pin-track{height:auto;}
  .pin{position:static;height:auto;}
  .pdp-hero{min-height:70svh;}
  .pdp-hero-media{position:absolute;inset:0;border-radius:0;}
  .pdp-hero-copy{opacity:1;transform:none;}
  .pdp-hint{display:none;}
  .pdp-facts{padding:clamp(80px,10vw,180px) 0;}
  .pdp-steps li{opacity:1;}
  .pdp-steps p{grid-template-rows:1fr;margin-top:10px;}
  .pdp-facts-media img{opacity:0;}
  .pdp-facts-media img.on{opacity:1;}

  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
  .lines .ln > i{transform:none !important;}
  .hero-media{transform:none !important;}
}