/* 파마리코드 brand v2 시안 「시오레 무드 + 우수사례」 — 홈·제품 2장 전용 스타일
   정본: ../../DESIGN.md v0.3 토큰만 사용. 세리프·그라데이션·블러·그림자 없음.
   #F06020(brand)는 선·점·작은 면에만, 글자·버튼은 #B8410C(brand-ink). */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url("fonts/pretendard-400.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;src:url("fonts/pretendard-500.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url("fonts/pretendard-600.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url("fonts/pretendard-700.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:800;font-display:swap;src:url("fonts/pretendard-800.woff2") format("woff2")}

:root{
  --bg:#FFFDFA; --cream:#FEF7EF; --surface:#F7F2EC;
  --ink:#2D2118; --ink-2:#5E5045; --ink-3:#7A6B5F; --line:#E9E1D7;
  --brand:#F06020; --brand-ink:#B8410C; --apricot:#FCB577; --pdrn-t:#FBE6D6; --vline-t:#ECE8F5;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-s:6px; --r-m:10px; --max:1240px; --bar:76px;
  --font:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --m-enter:700ms; --m-micro:200ms; --m-ease:cubic-bezier(0.22,1,0.36,1); --m-stagger:100ms; --m-dist:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.7;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:768px){body{font-size:18px}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:4px}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
@media (min-width:768px){.wrap{padding:0 var(--s6)}}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:var(--s2) var(--s4);z-index:60}
.skip:focus{left:var(--s4)}

/* 얇은 대문자 라벨 (시오레 무드) */
.lbl{display:inline-flex;align-items:center;gap:var(--s3);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.lbl::before{content:"";width:24px;height:1px;background:var(--brand)}

/* 띠 2개: 초안 · 첫 구매(반복 ①) */
.draftbar{background:var(--ink);color:var(--cream);font-size:12px;text-align:center;padding:5px var(--s4);line-height:1.5}
.offerbar{background:var(--surface);color:var(--ink-2);font-size:12px;line-height:1.4;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 var(--s2) 0 var(--s4);min-height:32px}
.offerbar p{flex:1;text-align:center}
.offerbar a{color:var(--ink);font-weight:600}
.offerbar[hidden]{display:none}
.offer-x{appearance:none;background:none;border:0;color:var(--ink-2);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--r-s)}
.offer-x svg{width:16px;height:16px}
.h1-toggle{white-space:nowrap}
.h1-toggle a{color:var(--cream);margin-left:6px}
.h1-toggle a[aria-current="true"]{font-weight:700;color:var(--apricot)}

/* 머리글 */
.hd{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.hd-wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s4)}
.logo{order:1;display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;min-height:60px}
.logo img{width:150px;height:auto}
.logo span{font-size:12px;color:var(--ink-2);letter-spacing:.04em}
.menu-btn{order:2;margin-left:auto;appearance:none;background:none;border:0;color:var(--ink);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--r-s);margin-right:-10px}
.menu-btn svg{width:24px;height:24px}
.menu-btn .i-close,.hd.open .menu-btn .i-open{display:none}
.hd.open .menu-btn .i-close{display:block}
.gnb{order:3;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;font-size:16px;border-top:1px solid var(--line);padding-bottom:var(--s4)}
.hd.open .gnb{display:flex}
.gnb > a{border-bottom:1px solid var(--line);min-height:52px!important}
.gnb::-webkit-scrollbar{display:none}
.gnb a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2);transition:color var(--m-micro) ease}
.gnb a:hover,.gnb a[aria-current="page"]{color:var(--ink)}
.gnb a.hot{color:var(--brand-ink);font-weight:600}
.gnb .gnb-sns{display:flex;gap:0;padding-top:var(--s3)}
.hd-sns{display:none}
.hd .go{display:none;order:2;margin-left:auto;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:var(--r-s);
  background:var(--brand-ink);color:var(--bg);font-size:14px;font-weight:600;text-decoration:none;transition:background-color var(--m-micro) ease}
.hd .go:hover{background:var(--ink)}
@media (min-width:768px){.logo img{width:190px}}
@media (min-width:1024px){
  .logo{min-height:76px}
  .menu-btn{display:none}
  .gnb{order:2;flex:1;flex-basis:auto;display:flex;flex-direction:row;align-items:center;gap:var(--s5);justify-content:center;border-top:0;padding:0;font-size:14px}
  .gnb > a{border-bottom:0;min-height:44px!important}
  .hd .go{display:inline-flex}
  .gnb .gnb-sns{display:none}
  .hd-sns{display:flex;order:3}
  .hd .go{order:4;margin-left:0}
}

/* SNS 버튼 */
.sns{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-width:44px;min-height:44px;color:var(--ink-2);text-decoration:none;border-radius:var(--r-s);transition:color var(--m-micro) ease,background-color var(--m-micro) ease}
.sns svg{width:20px;height:20px}
a.sns:hover{color:var(--ink);background:var(--surface)}
.sns[aria-disabled="true"]{color:var(--ink-3);cursor:not-allowed}
.sns-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.sns-row .sns{padding:0 var(--s4);border:1px solid var(--line);font-size:14px;color:var(--ink)}
.sns-row .sns[aria-disabled="true"]{color:var(--ink-3);border-style:dashed}
.sns .soon{font-size:12px;color:var(--ink-3);letter-spacing:.02em}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s6);border-radius:var(--r-s);
  font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background-color var(--m-micro) ease,color var(--m-micro) ease,border-color var(--m-micro) ease}
.btn-solid{background:var(--brand-ink);color:var(--bg)}
.btn-solid:hover{background:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.tlink{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:600;color:var(--brand-ink);text-decoration:none;border-bottom:1px solid currentColor;line-height:1.3;padding-top:2px}
.tlink:hover{color:var(--ink)}

/* 섹션 공통 */
.sec{padding:var(--s9) 0}
@media (min-width:1024px){.sec{padding:var(--s10) 0}}
.band{background:var(--cream)}
.sec-hd{max-width:680px;margin-bottom:var(--s7)}
.sec-hd h2{font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin-top:var(--s4)}
.sec-hd p{color:var(--ink-2);margin-top:var(--s4)}
@media (min-width:1024px){.sec-hd h2{font-size:40px}.sec-hd{margin-bottom:var(--s8)}}

/* 01 첫 화면 */
.hero{padding:var(--s4) 0 var(--s9)}
.hero-grid{display:grid;gap:var(--s7)}
.hero-grid{gap:var(--s6)}
.hero h1{font-size:32px;font-weight:800;line-height:1.28;letter-spacing:-.025em;margin-top:var(--s4)}
.hero h1 .w{display:inline-block}
.hero h1 .ul{position:relative;color:var(--brand-ink)}
.hero h1 .ul::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:3px;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.hero .def{color:var(--ink-2);margin-top:var(--s4);max-width:560px;font-size:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;margin-top:var(--s6)}
.hero-media{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--cream);aspect-ratio:4/3}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.vslot{position:absolute;left:var(--s4);bottom:var(--s4);display:inline-flex;align-items:center;gap:var(--s2);background:var(--bg);color:var(--ink);
  font-size:13px;font-weight:500;padding:6px var(--s3);border-radius:var(--r-s);border:1px solid var(--line)}
.vslot svg{width:16px;height:16px}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.hero-meta b{color:var(--ink);font-weight:600;margin-left:var(--s2)}
@media (min-width:1024px){
  .hero{padding:var(--s8) 0 var(--s10)}
  .hero-grid{grid-template-columns:5fr 6fr;align-items:center;gap:var(--s8)}
  .hero-txt{order:1}.hero-media{order:2}
  .hero .def{font-size:18px}
  .hero h1{font-size:56px;line-height:1.22}
  .hero-media{aspect-ratio:5/6}
}

/* 02 장면 고르기 (VT식 고르기 → 장면) */
.scene-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.scene-tab{appearance:none;background:var(--bg);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:inherit;color:var(--ink-2);text-align:left;padding:var(--s5) var(--s4);min-height:112px;cursor:pointer;display:flex;flex-direction:column;gap:var(--s3);
  transition:background-color var(--m-micro) ease,color var(--m-micro) ease;position:relative}
.scene-tab svg{width:28px;height:28px;color:var(--brand-ink)}
.scene-tab .en{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.scene-tab strong{font-size:18px;font-weight:700;color:var(--ink)}
.scene-tab:hover{background:var(--cream)}
.scene-tab[aria-selected="true"]{background:var(--cream)}
.scene-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)}
@media (min-width:768px){.scene-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.scene-tab{padding:var(--s6) var(--s5);min-height:150px}}
.scene-panel{display:grid;gap:var(--s6);margin-top:var(--s7);align-items:center}
.scene-panel[hidden]{display:none}
.scene-panel figure{border-radius:var(--r-m);overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.scene-panel figure img{width:100%;height:100%;object-fit:cover}
.scene-panel figure.contain img{object-fit:contain;padding:var(--s5)}
.scene-panel h3{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.scene-panel p{color:var(--ink-2);margin-top:var(--s4)}
.scene-panel .tlink{margin-top:var(--s5)}
@media (min-width:1024px){.scene-panel{grid-template-columns:6fr 5fr;gap:var(--s8)}.scene-panel h3{font-size:32px}}

/* 03 이렇게 드세요 */
.how-quote{font-size:24px;font-weight:700;line-height:1.45;letter-spacing:-.02em;max-width:880px}
.how-quote q{quotes:"「" "」"}
@media (min-width:1024px){.how-quote{font-size:40px}}
.steps{position:relative;margin-top:var(--s8)}
.steps ol{display:grid;gap:var(--s6);list-style:none}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.steps .draw{position:absolute;left:0;right:0;top:0;height:1px;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.steps li{padding-top:var(--s5)}
.steps .n{font-size:12px;letter-spacing:.2em;color:var(--brand-ink);font-weight:600}
.steps strong{display:block;font-size:20px;font-weight:700;margin-top:var(--s2)}
.steps span.d{display:block;color:var(--ink-2);margin-top:var(--s2)}
@media (min-width:768px){.steps ol{grid-template-columns:repeat(3,1fr);gap:var(--s7)}}

/* 04 제품 */
.feature{display:grid;gap:var(--s7);align-items:center}
.feature figure{border-radius:var(--r-m);overflow:hidden;background:var(--bg);aspect-ratio:1/1}
.feature figure img{width:100%;height:100%;object-fit:cover}
.feature figure.tall{aspect-ratio:4/5;background:var(--brand)}
@media (min-width:1024px){.feature figure.tall{max-width:480px;justify-self:center;width:100%}}
.feature h2{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-top:var(--s4)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:0;margin-top:var(--s6);border-top:1px solid var(--line)}
.facts dt,.facts dd{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--ink-3);padding-right:var(--s5);white-space:nowrap}
.facts dd{font-weight:500}
.feature .btn{margin-top:var(--s6)}
@media (min-width:1024px){.feature{grid-template-columns:1fr 1fr;gap:var(--s9)}.feature h2{font-size:40px}}
.soon-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s8);max-width:620px}
.soon-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg);min-height:96px}
.soon-card img{width:36px;height:auto;flex:none}
.soon-card .ph{width:36px;height:72px;flex:none;border:1px dashed var(--line);border-radius:4px}
.soon-card strong{display:block;font-size:15px;font-weight:600}
.badge{display:inline-block;background:var(--surface);color:var(--ink-2);font-size:13px;line-height:1.4;padding:3px var(--s2);border-radius:4px;margin-top:var(--s1)}

/* 05 글자 표 */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl caption{text-align:left;font-size:14px;color:var(--ink-3);padding-bottom:var(--s3);caption-side:top}
.tbl th,.tbl td{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.tbl thead th{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--ink)}
.tbl tbody th{font-weight:600;width:auto}
.tbl .r{text-align:right;white-space:nowrap;padding-right:0}
.tbl.info tbody th{width:34%;font-weight:600;color:var(--ink)}
.tbl.info td{color:var(--ink-2)}
@media (min-width:768px){.tbl{font-size:17px}.tbl.info tbody th{width:28%}}
.fn{list-style:none;margin-top:var(--s4);font-size:14px;color:var(--ink-3);display:grid;gap:var(--s1)}
.ing-grid{display:grid;gap:var(--s7)}
@media (min-width:1024px){.ing-grid{grid-template-columns:5fr 7fr;gap:var(--s9)}}

/* 06 첫 구매 혜택 (반복 ③) */
.offer{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream)}
.offer-in{display:grid;gap:var(--s5);padding:var(--s9) 0;text-align:center;justify-items:center}
.offer h2{font-size:28px;font-weight:700;letter-spacing:-.02em}
.offer .ph-copy{font-size:18px;font-weight:600;color:var(--ink);border:1px dashed var(--ink-3);border-radius:var(--r-s);padding:var(--s3) var(--s5)}
.offer p.s{color:var(--ink-2);font-size:15px;max-width:520px}
@media (min-width:1024px){.offer h2{font-size:40px}}

/* 07 인스타 피드 자리 */
.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.feed > *{aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--surface);position:relative}
.feed figure{height:100%;margin:0}
.feed img{width:100%;height:100%;object-fit:cover}
.feed .contain img{object-fit:contain;padding:12%}
.feed .txt{background:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3);font-size:13px;line-height:1.4;color:var(--ink)}
.feed .txt b{font-size:15px;font-weight:700;margin-top:var(--s1)}
.feed .txt .en{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:768px){.feed{gap:var(--s4)}.feed .txt{padding:var(--s5);font-size:15px}.feed .txt b{font-size:20px}.feed .txt .en{font-size:13px}}
.feed-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s5);align-items:center;margin-top:var(--s6)}
.feed-note p{font-size:14px;color:var(--ink-3)}

/* 가이드 질문 */
.qlist{list-style:none;border-top:1px solid var(--line)}
.qlist li{border-bottom:1px solid var(--line)}
.qlist a,.qlist span.q{display:flex;justify-content:space-between;gap:var(--s5);padding:var(--s5) 0;text-decoration:none;font-weight:600;font-size:18px;line-height:1.45}
.qlist a:hover{color:var(--brand-ink)}
.qlist small{display:block;font-weight:400;font-size:15px;color:var(--ink-2);margin-top:var(--s1)}
.qlist .arr{flex:none;width:20px;color:var(--brand-ink)}
@media (min-width:1024px){.qlist a,.qlist span.q{font-size:22px;padding:var(--s6) 0}}

/* 바닥글 */
.ft{background:var(--surface);padding:var(--s8) 0 var(--s7);font-size:14px;color:var(--ink-2)}
.ft-top{display:grid;gap:var(--s6)}
.ft nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.ft nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.ft nav a:hover{color:var(--ink)}
.ft .sns-row .sns{background:var(--bg)}
.ft .legal{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
@media (min-width:1024px){.ft-top{grid-template-columns:1fr auto;align-items:start}}

/* 제품 페이지 */
.crumb{font-size:13px;color:var(--ink-3);padding-top:var(--s5)}
.crumb ol{list-style:none;display:flex;gap:var(--s2)}
.crumb li+li::before{content:"/";margin-right:var(--s2);color:var(--line)}
.crumb a{text-decoration:none}
.pd{display:grid;gap:var(--s7);padding:var(--s6) 0 var(--s9)}
.pd-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pd-gal figure{border-radius:var(--r-m);overflow:hidden;background:var(--bg);aspect-ratio:1/1}
.pd-gal figure:first-child{grid-column:1/-1}
.pd-gal figure img{width:100%;height:100%;object-fit:cover}
.pd-gal figure.contain{background:var(--cream)}
.pd-gal figure.contain img{object-fit:contain;padding:10%}
.buy{border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s6) var(--s5);background:var(--bg)}
.buy h1{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.25;margin-top:var(--s4)}
.buy .sub{color:var(--ink-2);margin-top:var(--s3);font-size:16px}
.buy .facts{margin-top:var(--s5);font-size:15px}
.buy .first{margin-top:var(--s5);background:var(--cream);border-radius:var(--r-s);padding:var(--s3) var(--s4);font-size:14px;color:var(--ink-2)}
.buy .first b{color:var(--ink)}
.buy-btns{display:grid;gap:var(--s3);margin-top:var(--s5)}
.buy .note{font-size:13px;color:var(--ink-3);margin-top:var(--s3)}
.pd-body > section{padding:var(--s8) 0;border-top:1px solid var(--line)}
.pd-body > section:first-child{border-top:0;padding-top:0}
.pd-body h2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-top:var(--s4)}
.pd-body .ans{font-size:20px;font-weight:600;line-height:1.5;margin-top:var(--s5)}
.pd-body .ans q{quotes:"「" "」"}
.pd-body .lead{color:var(--ink-2);margin-top:var(--s4)}
.pd-body .tbl{margin-top:var(--s6)}
.empty{border:1px dashed var(--line);border-radius:var(--r-m);padding:var(--s7) var(--s5);text-align:center;margin-top:var(--s6);color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:var(--s2)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line);margin-top:var(--s6)}
summary{cursor:pointer;list-style:none;padding:var(--s5) 0;font-weight:700;display:flex;justify-content:space-between;gap:var(--s4);min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;color:var(--brand-ink)}
details[open] summary::after{content:"–"}
details p{padding-bottom:var(--s5);color:var(--ink-2)}
@media (min-width:1024px){
  .pd{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"gal buy" "body buy";column-gap:var(--s9);row-gap:var(--s8)}
  .pd-gal{grid-area:gal}.pd-body{grid-area:body}
  .pd-aside{grid-area:buy}
  .buy{position:sticky;top:104px;padding:var(--s7) var(--s6)}
  .buy h1{font-size:40px}
  .pd-body h2{font-size:34px}
  .pd-body .ans{font-size:26px}
}

/* 모바일 하단 고정 구매 막대 (시오레 fixedActionButton) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-top:1px solid var(--line);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  transform:translateY(0);transition:transform var(--m-enter) var(--m-ease)}
.buybar .btn{min-height:52px;padding:0 var(--s3);font-size:16px}
.has-bar{padding-bottom:calc(var(--bar) + 24px + env(safe-area-inset-bottom))}
.js-motion .buybar.wait{transform:translateY(110%)}
@media (min-width:1024px){.buybar{display:none}.has-bar{padding-bottom:0}}

/* 모션 (DESIGN.md 7절) — js-motion이 붙을 때만 숨김 → 기본·감속 모드는 완성 상태 */
/* 10/30 jury #4: 글자·사진은 처음부터 보임(투명도 0 없음) — 움직임은 살짝 떠오르기만 덧붙인다(빈 띠 없음) */
.js-motion .hero .w{transform:translateY(12px);transition:transform var(--m-enter) var(--m-ease);transition-delay:calc(var(--i) * var(--m-stagger))}
.js-motion .hero.in .w{opacity:1;transform:none}
.js-motion .hero h1 .ul::after{transform:scaleX(0);transition:transform var(--m-enter) var(--m-ease) 900ms}
.js-motion .hero.in h1 .ul::after{transform:scaleX(1)}
.js-motion [data-rise].pre{transform:translateY(var(--m-dist));transition:transform var(--m-enter) var(--m-ease);transition-delay:calc(var(--i, 0) * var(--m-stagger))}
.js-motion [data-rise].pre.in{transform:none}
.js-motion .steps .draw{transform:scaleX(0);transition:transform 1400ms var(--m-ease) 200ms}
.js-motion .steps.in .draw{transform:scaleX(1)}
.js-motion .scene-panel:not([hidden]){animation:panelIn var(--m-enter) var(--m-ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}