*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --app-w:448px; --ink:#111; --sub:#757575; --line:#f1f1f1; --line2:#e5e7eb;
  --brand:#c0392b; --outside:#9a9a9a;
  --el-1:#2e9e6b; --el-2:#e0533d; --el-3:#c79a3a; --el-4:#8e93a3; --el-5:#3a6fc4;
}
body{
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","맑은 고딕",sans-serif;
  color:var(--ink);background:var(--outside);letter-spacing:-.025em;
  display:flex;justify-content:center;min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select{font:inherit;color:inherit}
.app{width:100%;max-width:var(--app-w);background:#fff;min-height:100vh;position:relative;overflow-x:clip}
@media(max-width:448px){body{background:#fff}}

/* header */
.hd{position:sticky;top:0;z-index:40;background:#fff}
.hd-top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo{display:flex;align-items:center;min-height:44px}
.logo-image{display:block;width:144px;height:52px;object-fit:contain}
.footer-logo{width:120px;height:auto;vertical-align:middle;margin-bottom:8px}
.logo-mark{width:24px;height:24px;border-radius:4px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;line-height:1;letter-spacing:0;font-family:serif}
.logo-word{font-size:20px;font-weight:800;letter-spacing:-.05em;line-height:24px}
.hd-ico{display:flex;align-items:center;gap:12px}
.ic{width:28px;height:28px;stroke:#111;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hd-back .ic{width:24px;height:24px}
.hd-back{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.tabs{display:flex;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto}
.tabs button{display:block;padding:12px 8px 14px;font-size:16px;line-height:16px;font-weight:500;color:#424242;
  border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:#111;font-weight:700;border-bottom-color:#111}

/* layout */
main{padding-bottom:112px;min-height:60vh}
section{padding-top:48px}
.sec-hd{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:16px}
.sec-t{font-size:20px;font-weight:700;line-height:26px;display:flex;align-items:center;gap:7px}
.more{font-size:16px;font-weight:400;color:#111;white-space:nowrap}
.more::after{content:"\203A";font-size:17px;margin-left:4px}
/* 스냅은 걸지 않는다. scroll-snap-align:start 가 스크롤포트 시작에 맞추면서
   좌측 20px 패딩을 스크롤로 상쇄해버린다 (원본도 스냅 없음). */
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 20px 4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.pad{padding:0 20px}
.empty{padding:80px 20px;text-align:center;color:#a1a1aa;font-size:14px;line-height:1.7}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* poster */
.poster{position:relative;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8px 16px;text-align:center}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 60% at 50% 8%,rgba(255,255,255,.28),transparent 60%),
  linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12) 45%,rgba(0,0,0,.28))}
/* 생성된 아트. 파일이 없으면 이 레이어만 비고 아래 그라디언트+실루엣이 그대로 보인다. */
.poster::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img)}
.poster .fig{position:absolute;left:50%;top:52%;translate:-50% -50%;width:74%;aspect-ratio:1/1.45;z-index:-3;
  border-radius:50% 50% 46% 46%/60% 60% 40% 40%;filter:blur(1px);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.34),rgba(255,255,255,.06) 55%,transparent 72%)}
.p-sub{font-size:10px;color:rgba(255,255,255,.92);font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6);margin-bottom:2px;min-height:12px}
.p-ttl{font-size:20px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.045em;
  text-shadow:0 2px 10px rgba(0,0,0,.65),0 0 26px rgba(255,255,255,.25)}
.badge{position:absolute;top:0;right:12px;z-index:2;width:34px;padding:5px 0 8px;text-align:center;color:#fff;
  background:#2f4fb5;border-radius:0 0 4px 4px}
.badge b{display:block;font-size:8px;letter-spacing:.06em;opacity:.9}
.badge i{display:block;font-style:normal;font-size:15px;font-weight:800}

/* hero */
.hero{padding-top:24px}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;scroll-snap-align:center;padding:0 8px}
.hero-slide .poster{aspect-ratio:4/5;border-radius:16px;padding-bottom:30px}
.hero-slide .p-ttl{font-size:42px}
.hero-slide .p-sub{font-size:15px;margin-bottom:6px}
.dots{display:flex;gap:6px;justify-content:center;padding:16px 0 0}
.dots i{width:6px;height:6px;border-radius:50%;background:#e1e1e1;transition:.2s;cursor:pointer}
.dots i.on{background:#111}
/* 도트는 6px라 손가락으로 못 누른다. 히트박스만 넓힌다. */
.dots i{box-shadow:0 0 0 7px transparent;background-clip:padding-box}

.reco-note{display:inline-flex;margin:0 20px 14px;padding:6px 10px;border-radius:6px;background:#f4f4f5;
  font-size:12px;font-weight:600;color:#52525b}

/* card */
.card{flex:0 0 180px;width:180px}
.card .t{margin-top:13px;font-size:16px;font-weight:600;line-height:24px;color:#111}
.card .d{margin-top:2px;font-size:14px;font-weight:500;color:var(--sub);line-height:18.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .by{margin-top:6px;font-size:12px;font-weight:500;color:#a78bfa}
.card-art{position:relative}
.likes{position:absolute;left:8px;top:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:99px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  color:#fff;font-size:11px;font-weight:600;letter-spacing:0}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;overflow:hidden;max-height:22px}
.tags span{font-size:11px;font-weight:500;color:#6b7280;background:#f4f4f5;border-radius:4px;padding:2px 6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px;padding:0 20px}
.grid .card{flex:none;width:auto}

/* banner */
.banner{margin:0 20px;border-radius:12px;background:linear-gradient(120deg,#1b1b22,#2c2438 55%,#4a2b34);
  color:#fff;padding:30px 22px;text-align:center}
.banner b{display:block;font-size:12px;letter-spacing:.14em;opacity:.75;font-weight:600}
.banner p{margin-top:8px;font-size:19px;font-weight:800}
.banner .film{margin-top:18px;height:150px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.35);font-size:12px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px),#0d0d10}

/* review */
.rv{flex:0 0 256px;width:256px;border:1px solid var(--line);border-radius:8px;padding:14px}
.rv-list .rv{flex:none;width:auto;margin:0 20px 12px}
.rv-top{display:flex;align-items:center;gap:9px}
.av{width:34px;height:34px;border-radius:50%;flex:0 0 34px;background:linear-gradient(140deg,#f3d5dd,#c9b7e8)}
.stars{color:#f5a623;font-size:11px;letter-spacing:1px}
.rv-meta{font-size:12px;color:#6b7280;margin-top:3px}
.rv-time{margin-left:auto;font-size:11px;color:#a1a1aa;align-self:flex-start}
.rv-body{margin-top:10px;font-size:13px;line-height:1.55;color:#3f3f46}
.rv .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* free wide */
.wide{flex:0 0 180px;width:180px;aspect-ratio:4/5;border-radius:8px;position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px 12px;color:#fff}
.wide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 62%)}
.wide .t{font-size:18px;font-weight:600;line-height:1.3}
.wide .d{margin-top:4px;font-size:12px;font-weight:400;line-height:1.4;color:#fff}

/* snack */
.snack-track{display:flex;gap:24px;overflow-x:auto;padding:0 20px;scroll-snap-type:x mandatory;
  scroll-padding-left:20px;scrollbar-width:none}
.snack-track::-webkit-scrollbar{display:none}
.snack-page{flex:0 0 288px;width:288px;scroll-snap-align:start;display:grid;gap:16px;align-content:start}
.snk{display:flex;align-items:center;gap:12px;height:64px}
.snk .n{font-size:16px;font-weight:600;width:14px;text-align:center;flex:0 0 14px}
.snk .th{width:100px;height:64px;border-radius:4px;flex:0 0 100px}
.snk .t{font-size:16px;font-weight:600;line-height:22px;display:block}
.snk .d{margin-top:2px;font-size:13px;font-weight:500;color:var(--sub);display:block;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* magazine */
.mg-tabs{display:flex;gap:16px;padding:0 20px;margin-bottom:12px}
.mg-tabs button{font-size:16px;font-weight:500;color:#424242;padding-bottom:6px;border-bottom:2px solid transparent}
.mg-tabs button[aria-selected="true"]{color:#111;font-weight:700;border-bottom-color:#111}
.mg{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--line)}
.mg .n{font-size:16px;font-weight:600;width:14px;flex:0 0 14px}
.mg .th{flex:0 0 80px;width:80px;height:80px;border-radius:4px}
.mg .t{font-size:16px;font-weight:600;line-height:22px;display:block}
.mg .d{margin-top:5px;font-size:13px;line-height:1.6;color:var(--sub);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* footer */
footer{margin-top:44px;border-top:1px solid var(--line);padding:24px 20px 40px;background:#fafafa;
  font-size:11.5px;line-height:1.9;color:#9ca3af}
footer .links{display:flex;gap:14px;margin:12px 0 8px;color:#6b7280;font-weight:600}

/* bottom nav */
.bn{position:fixed;bottom:0;left:50%;translate:-50% 0;width:100%;max-width:var(--app-w);z-index:50;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:20px 20px 0 0;
  box-shadow:0 -4px 8px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(4,1fr);
  padding:10px 20px calc(18px + env(safe-area-inset-bottom))}
.bn a{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:12px;font-weight:400;color:#555}
.bn a.on{color:#000;font-weight:600}
.bn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bn a.on svg.fill{fill:currentColor}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;pointer-events:none;transition:.2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:50%;translate:100% 0;width:min(320px,80vw);height:100%;background:#fff;z-index:70;
  transition:translate .25s,visibility .25s;visibility:hidden;padding:22px 20px;overflow-y:auto;
  margin-right:calc(var(--app-w)/-2);box-shadow:-8px 0 24px rgba(0,0,0,.12)}
@media(max-width:448px){.drawer{right:0;margin-right:0}}
.drawer.on{translate:0 0;visibility:visible}
.drawer h3{font-size:13px;color:#a1a1aa;margin:22px 0 10px;font-weight:600}
.drawer a{display:block;padding:11px 0;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.modal.on{display:flex}
.modal-box{width:100%;max-width:408px;background:#fff;border-radius:12px;overflow:hidden}
.modal-box .art{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#fff;padding:24px;text-align:center}
.modal-box .art b{font-size:13px;opacity:.85}
.modal-box .art strong{font-size:34px;font-weight:800;letter-spacing:-.05em}
.modal-box .art span{font-size:13px;opacity:.9}
.modal-box .art .cta{margin-top:8px;background:rgba(255,255,255,.22);border-radius:8px;padding:10px 22px;font-weight:700;font-size:14px}
.modal-bar{display:flex;justify-content:space-between;padding:16px 18px;font-size:13px;color:#6b7280}

/* product detail */
.pd-hero{padding:0 20px}
.pd-hero .poster{aspect-ratio:5/7;border-radius:10px}
.pd-body{padding:24px 20px 0}
.pd-body h1{font-size:24px;font-weight:800;line-height:1.3}
.pd-body .lead{margin-top:8px;font-size:14px;color:#6b7280;line-height:1.6}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:12px;font-weight:600;color:#52525b;background:#f4f4f5;border-radius:99px;padding:6px 11px}
.pd-idx{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.pd-idx h2{font-size:16px;font-weight:800;margin-bottom:12px}
.pd-idx li{list-style:none;display:flex;gap:10px;padding:9px 0;font-size:14px;color:#3f3f46;line-height:1.5}
.pd-idx li b{color:#c0392b;font-weight:700;flex:0 0 auto}
.price-bar{position:fixed;bottom:0;left:50%;translate:-50% 0;width:100%;max-width:var(--app-w);z-index:55;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-radius:20px 20px 0 0;
  box-shadow:0 -4px 8px rgba(0,0,0,.08);
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.price-bar .p{flex:1}
.price-bar .p s{color:#c4c4cc;font-size:13px}
.price-bar .p b{display:block;font-size:19px;font-weight:800}
.price-bar .p b em{font-style:normal;color:#e0393e;margin-right:6px}
.btn{background:#111;color:#fff;border-radius:8px;padding:14px 22px;font-size:15px;font-weight:700;text-align:center;display:block}
.btn.full{width:100%}
.btn.ghost{background:#fff;color:#111;border:1px solid var(--line2)}

/* form */
.form{padding:24px 20px 0}
.form h1{font-size:22px;font-weight:800;line-height:1.35;margin-bottom:6px}
.form .sub{font-size:13.5px;color:#8b8b93;margin-bottom:24px}
.fld{margin-bottom:20px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.fld input,.fld select{width:100%;border:1px solid var(--line2);border-radius:8px;padding:13px 12px;font-size:15px;background:#fff}
.fld input:focus,.fld select:focus{outline:none;border-color:#111}
.seg{display:flex;gap:8px}
.seg button{flex:1;border:1px solid var(--line2);border-radius:8px;padding:12px 0;font-size:14px;font-weight:600;color:#8b8b93}
.seg button[aria-pressed="true"]{border-color:#111;color:#111;font-weight:700;background:#fafafa}
.row3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
.err{color:#e0393e;font-size:12.5px;margin-top:8px;min-height:16px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:#52525b;margin-top:10px}

/* result */
.res-top{background:linear-gradient(160deg,#1b2b52,#2b4a86 55%,#0f172e);color:#fff;padding:30px 20px 32px;text-align:center}
.res-top .who{font-size:13px;opacity:.8}
.res-top h1{font-size:23px;font-weight:800;margin-top:6px;line-height:1.35}
.res-top .born{margin-top:8px;font-size:12.5px;opacity:.75}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px}
.pil{background:rgba(255,255,255,.1);border-radius:10px;padding:14px 4px}
.pil .lab{font-size:11px;opacity:.7;line-height:1.2}
.pil .gz{font-size:26px;font-weight:800;line-height:1.2;margin-top:7px}
.pil .ko{font-size:11px;opacity:.8;margin-top:4px;line-height:1.2}
.blk{padding:32px 20px 0}
.blk h2{font-size:17px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.blk p{font-size:14px;line-height:1.75;color:#3f3f46}
.blk p+p{margin-top:12px}
.ohaeng{display:grid;gap:13px;margin-top:2px}
.oh{display:flex;align-items:center;gap:12px;font-size:13px}
.oh .nm{width:20px;font-weight:700;flex:0 0 20px}
.oh .bar{flex:1;height:10px;border-radius:99px;background:#f1f1f4;overflow:hidden}
.oh .bar i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.oh .ct{width:18px;text-align:right;color:var(--sub);flex:0 0 18px}
.kv{border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;
  font-size:13.5px;border-bottom:1px solid var(--line)}
.kv>div:last-child{border-bottom:0}
.kv>div>span:first-child{color:#6b7280;flex:0 0 auto}
.kv b{font-weight:700;text-align:right}
/* 자식 선택자로 한정하지 않으면 안쪽 .n/.l 까지 패딩을 먹는다 */
.score{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.score>div{background:#fafafa;border-radius:10px;padding:16px 4px}
.score .n{font-size:22px;font-weight:800;line-height:1.2}
.score .l{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.2}
.actions{padding:28px 20px 0;display:grid;gap:10px}
.note{padding:22px 20px 0;font-size:11.5px;color:#b4b4bb;line-height:1.7}

/* search */
.sbar{padding:14px 20px;position:sticky;top:60px;background:#fff;z-index:30}
.sbar input{width:100%;border:1px solid var(--line2);border-radius:99px;padding:12px 16px;font-size:14.5px}
.sbar input:focus{outline:none;border-color:#111}
.hits{padding:4px 20px 0;font-size:12.5px;color:#8b8b93}
.slist a{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);align-items:center}
.slist .th{flex:0 0 64px;width:64px;height:80px;border-radius:4px}
.slist .t{font-size:16px;font-weight:600;line-height:22px}
.slist .d{margin-top:2px;font-size:13px;font-weight:500;color:var(--sub)}
.slist .cat{margin-top:6px;font-size:12px;color:#a1a1aa}

/* today */
.today-hd{background:linear-gradient(160deg,#241a3d,#4b2f7a 55%,#150e26);color:#fff;padding:30px 20px 32px;text-align:center}
.today-hd .d{font-size:12.5px;opacity:.75}
.today-hd .gz{font-size:38px;font-weight:800;margin-top:10px}
.today-hd .ko{font-size:13px;opacity:.85;margin-top:4px}
.today-hd .tot{margin-top:18px;font-size:14px}
.today-hd .tot b{font-size:30px;font-weight:800;margin-left:6px}

/* ===== 인터랙션 마감 ===== */
/* 눌렀을 때 반응이 없으면 앱이 죽은 것처럼 느껴진다 */
.card,.wide,.snk,.mg,.rv,.chip-char,.slist a{transition:transform .12s ease,opacity .12s ease}
.card:active,.wide:active,.snk:active,.mg:active,.chip-char:active,.slist a:active{transform:scale(.975);opacity:.85}
.btn{transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.97);opacity:.9}
.tabs button,.mg-tabs button,.seg button,.more{transition:opacity .12s ease}
.tabs button:active,.mg-tabs button:active,.seg button:active,.more:active{opacity:.55}
:focus-visible{outline:2px solid #111;outline-offset:2px;border-radius:4px}
.rail.dragging,.snack-track.dragging,.hero-track.dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.rail a,.hero-track a,.snack-track a{-webkit-user-drag:none}

/* 화면 전환 */
/* transform 을 쓰면 fixed 요소의 컨테이닝 블록이 되어 하단바가 밀린다. opacity 만 쓴다. */
#view.enter{animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #view.enter{animation:none}
  .card,.wide,.snk,.mg,.chip-char,.btn{transition:none}
}

/* 토스트 */
#toast{position:fixed;left:50%;bottom:96px;translate:-50% 8px;z-index:90;
  max-width:min(320px,80vw);padding:12px 18px;border-radius:99px;
  background:rgba(17,17,17,.92);color:#fff;font-size:13.5px;font-weight:500;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease,translate .18s ease}
#toast.on{opacity:1;translate:-50% 0}

/* ===== 캐릭터 ===== */
.char-rail{padding-top:2px}
.chip-char{flex:0 0 92px;width:92px;display:flex;flex-direction:column;align-items:center;text-align:center}
.av-lg{width:76px;height:76px;border-radius:50%;overflow:hidden;position:relative;isolation:isolate;background:#eee}
.av-lg::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--img);background-position:center 20%}
.chip-char .nm{margin-top:9px;font-size:13.5px;font-weight:700;line-height:1.25}
.chip-char .ro{margin-top:3px;font-size:11.5px;color:var(--sub);line-height:1.3}

.char-hero{position:relative;aspect-ratio:1/1;display:flex;align-items:flex-end;isolation:isolate}
.char-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img);background-position:center 16%}
.char-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.88) 6%,rgba(0,0,0,.25) 48%,rgba(0,0,0,.15))}
.char-meta{position:relative;z-index:1;padding:0 20px 24px;color:#fff}
.char-role{font-size:12.5px;opacity:.85}
.char-meta h1{font-size:30px;font-weight:800;margin-top:4px;letter-spacing:-.04em}
.char-quote{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.tags.big{max-height:none;gap:6px}
.tags.big span{font-size:12.5px;padding:5px 10px;border-radius:99px}

/* ===== 캐릭터 인트로 ===== */
/* 인트로엔 하단탭이 없다. main 의 탭 자리(112px)를 비워두면 100vh 를 넘겨 스크롤이 생긴다. */
main:has(.intro){padding-bottom:0}
.intro{position:relative;min-height:100dvh;display:flex;align-items:flex-end;isolation:isolate}
/* --img 는 posterStyle 이 넣는 background 단축값 (이미지 → 플레이스홀더 순) */
.intro::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img);background-position:center 18%}
.intro::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.9) 12%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.2))}
.intro-back{position:absolute;top:14px;left:14px;z-index:2;padding:6px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.intro-back .ic{stroke:#fff;width:24px;height:24px}
.intro-body{position:relative;z-index:1;width:100%;padding:0 24px calc(36px + env(safe-area-inset-bottom));color:#fff}
.intro-quote{font-size:21px;font-weight:700;line-height:1.55;letter-spacing:-.03em;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.intro-name{margin-top:12px;font-size:14px;color:rgba(255,255,255,.8)}
.intro-cta{margin-top:28px;background:rgba(255,255,255,.95);color:#111}

/* 시나리오 인트로 — .intro 위에 얹는다 */
.vn-skip{position:absolute;top:18px;right:16px;z-index:2;font-size:13px;color:rgba(255,255,255,.75);
  padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.vn-sfx{font-size:30px;font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.55);
  margin-bottom:10px;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.vn-who{margin-bottom:8px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.vn-choices{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.vn-choice{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px)}
.vn-choice:active{background:rgba(255,255,255,.26)}

/* 리뷰 필터 / 구매횟수 */
.rv-filter{display:flex;gap:8px;overflow-x:auto;padding:14px 20px 4px;scrollbar-width:none}
.rv-filter::-webkit-scrollbar{display:none}
.rv-filter button{flex:0 0 auto;padding:7px 14px;border-radius:99px;border:1px solid var(--line2);
  font-size:13.5px;font-weight:500;color:#52525b;background:#fff}
.rv-filter button[aria-pressed="true"]{background:#111;border-color:#111;color:#fff;font-weight:700}
.rv-meta b{font-weight:700;color:#111}
.rv-item{margin-top:2px;font-size:12px;color:#a1a1aa}

/* 드로어 로그인 유도 */
.drawer-login{display:block;padding:16px;border-radius:10px;background:#fafafa;border:1px solid var(--line);
  margin-bottom:8px}
.drawer-login b{display:block;font-size:15px;font-weight:700}
.drawer-login span{display:block;margin-top:4px;font-size:12.5px;color:var(--sub)}

/* 장고 이관분 */
.hint{margin-top:8px;font-size:12px;color:#a1a1aa;line-height:1.5}
.toast-static{margin:14px 20px 0;padding:12px 16px;border-radius:8px;background:#111;color:#fff;font-size:13.5px}
.form input[type=text],.form input[type=password],.form select{width:100%;border:1px solid var(--line2);
  border-radius:8px;padding:13px 12px;font-size:15px;background:#fff}
.form input:focus,.form select:focus{outline:none;border-color:#111}

/* 스프라이트 아이콘 — 색·굵기를 한 곳에서 통제 */
svg use { fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round }
.ic { width: 26px; height: 26px; color: #111; display: block }
.hd-back .ic { width: 24px; height: 24px }
.bn svg { width: 24px; height: 24px }
.bn a.on svg use { stroke-width: 2 }
.intro-back .ic { color: #fff }

/* 폼 컨트롤 정리 — 네이티브 체크박스/셀렉트는 OS마다 크기가 달라 그리드가 어긋난다 */
.form .fld { margin-bottom: 22px }
.form .fld > label:not(.check) { display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:#111 }

/* 셀렉트: 화살표를 직접 그려 높이를 인풋과 맞춘다 */
.form select {
  -webkit-appearance:none; appearance:none;
  height:48px; padding:0 34px 0 12px; line-height:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
}
.form select:disabled { background-color:#fafafa; color:#a1a1aa }
.form input[type=text], .form input[type=password] { height:48px }

/* 세그먼트 버튼도 같은 높이로 */
.seg button { height:48px; padding:0 }

/* 3열 날짜: 년이 네 자리라 조금 넓게, 나머지는 균등 */
.row3 { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:8px }

/* 체크박스 — appearance 를 꺼서 어디서나 같은 크기로 그린다 */
.form .check, .check { display:flex; align-items:center; gap:10px; margin-top:12px;
  font-size:13.5px; font-weight:500; color:#52525b; cursor:pointer; user-select:none }
.check input[type=checkbox] {
  -webkit-appearance:none; appearance:none; margin:0; padding:0;
  width:20px; height:20px; min-width:20px; flex:0 0 20px; border:1.5px solid var(--line2);
  border-radius:6px; background:#fff; position:relative; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.check input[type=checkbox]:checked { background:#111; border-color:#111 }
.check input[type=checkbox]:checked::after {
  content:""; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; rotate:45deg;
}
.check input[type=checkbox]:focus-visible { outline:2px solid #111; outline-offset:2px }
.check:has(input:checked) { color:#111; font-weight:600 }

[hidden]{display:none!important}

/* 브랜드 마크 — 글자 대신 심볼 */
/* 마크는 생성 이미지(투명 PNG). 배경 없이 그대로 얹는다. */
img.logo-mark { width:26px; height:26px; border-radius:0; background:none; display:block }
.logo-word { letter-spacing:-.03em }

/* 가로 레일 화살표 — 데스크톱에선 이게 유일한 조작 수단이다 */
.rail-wrap { position:relative }
.rail-nav { position:absolute; top:calc(50% - 42px); translate:0 -50%; z-index:5;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.16);
  color:#111; transition:opacity .15s, scale .12s }
.rail-nav svg { width:20px; height:20px }
.rail-nav.prev { left:8px }
.rail-nav.next { right:8px }
.rail-nav:active { scale:.92 }
.rail-wrap.no-nav .rail-nav { display:none }
/* 히어로는 카드가 꽉 차서 화살표를 가운데 높이에 둔다 */
.hero .rail-nav { top:50% }
/* 터치 기기는 스와이프가 자연스러우니 화살표를 감춘다 */
@media (hover:none) { .rail-nav { display:none } }

/* 히어로 — Swiper cards. 겹쳐 쌓인 카드가 회전하며 넘어간다 */
.hero { padding-top:24px }
.hero-swiper { width:calc(100% - 40px); margin:0 auto; overflow:visible }
.hero-swiper .swiper-slide { border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.14) }
.hero-swiper .poster { aspect-ratio:4/5; border-radius:16px; padding-bottom:30px }
.hero-swiper .p-ttl { font-size:42px }
.hero-swiper .p-sub { font-size:15px; margin-bottom:6px }
/* 뒤에 깔린 카드는 살짝 눌러 깊이를 준다 */
.hero-swiper .swiper-slide:not(.swiper-slide-active) { filter:brightness(.92) }

/* 페이지네이션을 기존 도트 스타일에 맞춘다 */
.hero-dots { display:flex; gap:6px; justify-content:center; padding:16px 0 0 }
.hero-dots .dot { width:6px; height:6px; border-radius:50%; background:#e1e1e1;
  cursor:pointer; transition:.2s; border:0; padding:0 }
.hero-dots .dot.on { background:#111 }