/* 보키 사주 — 다크 화보 톤. 검정 바탕 + 상아색 글자 + 브라스. 세로(9:16) 기준, 데스크톱은 가운데 폰 폭 */
:root{
  --bg:#0B0A09; --paper:#121110; --card:#1A1816; --ink:#F3EEE6; --ink2:#C9C1B5; --mute:#8A8278; --line:#2A2622;
  --brass:#D2A86E; --brass2:#B88A5A; --red:#E05A52; --thread:#E0463F; --green:#5BBF86;
  --radius:18px; --max:520px;
  --serif:"Noto Serif KR","Nanum Myeongjo",Georgia,serif; --sans:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#000}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-.01em;word-break:keep-all}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.wrap{position:relative;max-width:var(--max);margin:0 auto;min-height:100dvh;background:var(--paper);padding-bottom:110px;box-shadow:0 0 0 1px #1d1a17}
@media(min-width:600px){.wrap{margin:0 auto;min-height:100dvh}}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0}
p{margin:0}
::selection{background:var(--brass);color:#000}

/* 상단 */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px;background:linear-gradient(180deg,rgba(18,17,16,.98),rgba(18,17,16,.9));backdrop-filter:blur(10px)}
.logo{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.16em;color:var(--ink)}
.logo small{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:0;color:var(--mute)}
.logo i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--thread);margin-right:2px;transform:translateY(-1px)}
.top .r{display:flex;gap:14px;color:var(--ink2)}
.top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 탭 */
.tabs{position:sticky;top:50px;z-index:19;display:flex;gap:6px;overflow-x:auto;padding:6px 16px 12px;background:rgba(18,17,16,.92);backdrop-filter:blur(10px);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink2);border:1px solid transparent}
.tabs a.on{background:#2A2622;color:var(--ink);border-color:#3A352F}

/* 하단 메뉴 — 떠 있는 알약 */
.nav{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 32px);max-width:calc(var(--max) - 32px);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(28,26,24,.86);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 6px;z-index:30;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--mute);font-weight:500;padding:6px 0;border-radius:999px}
.nav a.on{color:var(--ink);background:rgba(255,255,255,.08)}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 공통 */
.sec{padding:30px 20px 12px}
.lab{font-size:12px;letter-spacing:.14em;color:var(--brass);font-weight:700;margin-bottom:8px}
.sec h2{font-size:22px}
.sec p.sub{color:var(--ink2);margin-top:6px;font-size:14.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:999px;background:var(--ink);color:#0B0A09;font-weight:700;font-size:16px;width:100%;transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px #3A352F}
.btn.soft{background:#2A2622;color:var(--ink)}
.btn.brass{background:var(--brass);color:#0B0A09}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#2A2622;font-size:13px;color:var(--ink2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.note{font-size:13px;color:var(--mute);line-height:1.6}
.act{padding:16px 20px 8px}

/* 홈 — 대표 포스터 넘기기 */
.heroC{position:relative;margin:4px 0 0}
.heroC .track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;scrollbar-width:none}
.heroC .track::-webkit-scrollbar{display:none}
.heroC .slide{position:relative;flex:0 0 100%;aspect-ratio:9/13.2;border-radius:22px;overflow:hidden;scroll-snap-align:center;background:#000}
.heroC .slide img,.heroC .slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.heroC .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 42%,rgba(11,10,9,.7) 58%,rgba(11,10,9,.96) 74%,rgba(11,10,9,1) 100%)}
.heroC .slide .in{position:absolute;left:20px;right:20px;bottom:22px;z-index:1}
.heroC .slide .who{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;color:var(--brass);font-weight:700;margin-bottom:10px}
.heroC .slide .who i{width:6px;height:6px;border-radius:50%;background:var(--thread)}
.heroC .slide h2{font-size:34px;line-height:1.18;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.heroC .slide p{margin-top:10px;font-size:15px;color:rgba(255,255,255,.82);max-width:30ch}
.heroC .slide .go{display:inline-flex;margin-top:16px;padding:11px 18px;border-radius:999px;background:#fff;color:#0B0A09;font-weight:700;font-size:14px}
.heroC .cnt{position:absolute;right:34px;top:14px;z-index:2;background:rgba(0,0,0,.45);color:#fff;font-size:12px;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}

/* 식구 띠 */
.fam{display:flex;gap:14px;overflow-x:auto;padding:8px 20px 6px;scrollbar-width:none}
.fam::-webkit-scrollbar{display:none}
.fam a{flex:0 0 72px;text-align:center}
.fam .ph{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid #2A2622;padding:2px;background:#000}
.fam .ph img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%}
.fam a.on .ph{border-color:var(--brass)}
.fam b{display:block;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--ink2)}

/* 분야 섹션 + 2열 포스터 */
.room{padding:28px 0 4px}
.room .head{padding:0 20px 12px}
.room .head small{display:block;font-size:12.5px;color:var(--mute);margin-bottom:4px}
.room .head h2{font-size:21px;line-height:1.3}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
.grid2 .poster{flex:none;max-width:none}
.row{display:flex;gap:10px;overflow-x:auto;padding:0 20px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row .poster{flex:0 0 calc(50% - 5px)}
.poster{position:relative;aspect-ratio:9/14;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:#000;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.poster:active img{transform:scale(1.03)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(11,10,9,.55) 48%,rgba(11,10,9,.92) 64%,rgba(11,10,9,1) 100%)}
.poster>*{position:relative;z-index:1}
.poster .t{font-size:11px;letter-spacing:.1em;color:var(--brass);font-weight:700;margin-bottom:5px}
.poster h3{font-size:19px;color:#fff;line-height:1.28;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.poster p{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poster .free{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.92);color:#0B0A09;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}

/* 배너 */
.banner{margin:16px 20px 0;padding:16px 18px;border-radius:var(--radius);background:linear-gradient(135deg,#1E1B18,#2A2521);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px}
.banner b{color:var(--brass)}
.banner .go{font-size:13px;white-space:nowrap;color:var(--ink2)}

/* 이 집의 법 */
.laws{display:grid;gap:10px;padding:0 20px}
.laws .l{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.laws .n{font-family:var(--serif);font-size:22px;color:var(--brass);line-height:1}
.laws b{display:block;font-size:15px}
.laws p{font-size:13.5px;color:var(--ink2);margin-top:2px}

/* 가볍게 */
.light{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
.light a{position:relative;border-radius:16px;padding:16px 14px;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);background:var(--card)}
.light a b{font-size:15px;line-height:1.3}
.light a small{font-size:12px;color:var(--mute);margin-top:4px}
.light a .ic{position:absolute;right:12px;top:12px;font-family:var(--serif);font-size:20px;color:var(--brass)}
.light a.soon{opacity:.5}
.light a.wide{grid-column:1/-1;min-height:96px}

.foot{padding:34px 20px 20px;color:var(--mute);font-size:12px;line-height:1.8;border-top:1px solid var(--line);margin-top:30px}
.foot b{color:var(--ink2)}

/* 상품 상세(설득) */
.detail .hero{position:relative;aspect-ratio:9/14;max-height:78dvh;overflow:hidden;background:#000}
.detail .hero img,.detail .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.detail .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 40%,rgba(18,17,16,.75) 58%,rgba(18,17,16,.97) 76%,#121110 100%)}
.detail .hero .back{position:absolute;left:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center;backdrop-filter:blur(6px)}
.detail .hero .back svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.detail .hero .in{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.detail .hero .t{font-size:12px;letter-spacing:.12em;color:var(--brass);font-weight:700;margin-bottom:8px}
.detail .hero h1{font-size:36px;line-height:1.15;color:#fff}
.detail .hero p{margin-top:10px;font-size:15.5px;color:rgba(255,255,255,.85)}
.bubble{margin:0 20px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.bubble img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line)}
.bubble .b{background:var(--card);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:14px 16px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.bubble .b small{display:block;font-size:11px;letter-spacing:.1em;color:var(--brass);font-weight:700;margin-bottom:4px}
.bubble+.bubble{margin-top:12px}
.scene{position:relative;margin:18px 20px 0;aspect-ratio:9/10;border-radius:20px;overflow:hidden;background:#000}
.scene video,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(11,10,9,.9))}
.scene .cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;font-family:var(--serif);font-size:18px;color:#fff;line-height:1.4}
.quotes{display:grid;gap:10px;padding:0 20px}
.quotes .q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 44px;position:relative;font-size:15.5px;color:var(--ink)}
.quotes .q::before{content:"“";position:absolute;left:16px;top:6px;font-family:var(--serif);font-size:30px;color:var(--brass)}
.promise{display:grid;gap:10px;padding:0 20px}
.promise .p{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px}
.promise .p b{font-family:var(--serif);font-size:19px;color:var(--brass);white-space:nowrap;letter-spacing:.04em}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
.proof div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.proof div b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:4px}
.why{margin:0 20px;padding:22px 20px;border-radius:20px;background:linear-gradient(135deg,#2A2017,#1A1512);border:1px solid #3A2E22}
.why small{display:block;font-size:11px;letter-spacing:.12em;color:var(--brass);font-weight:700;margin-bottom:8px}
.why p{font-family:var(--serif);font-size:19px;line-height:1.5;color:#fff}
.cta{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--max);padding:12px 20px max(16px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(18,17,16,0),rgba(18,17,16,.96) 30%);z-index:31}
.cta .btn{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cta small{display:block;text-align:center;color:var(--mute);font-size:12px;margin-top:8px}

/* 방(흐름) */
.stage{position:relative}
.step{display:none;animation:in .35s ease}
.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vframe{position:relative;margin:0;aspect-ratio:9/16;max-height:72dvh;background:#000;overflow:hidden}
.vframe video,.vframe img{width:100%;height:100%;object-fit:cover}
.vframe .say{position:absolute;left:16px;right:16px;bottom:18px;background:rgba(18,17,16,.92);border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vframe .say b{display:block;font-size:12px;color:var(--brass);letter-spacing:.1em;margin-bottom:4px}
.vframe .say p{font-family:var(--serif);font-size:17px;line-height:1.45}
.vframe .back{position:absolute;left:12px;top:12px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.vframe .back svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prog{display:flex;gap:4px;padding:12px 20px 0}
.prog i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.prog i.on{background:var(--brass)}
.minds{display:grid;gap:10px;padding:0 20px}
.minds label{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);font-size:15.5px}
.minds label.on{border-color:var(--brass);background:#231E18}
.minds input{display:none}
.minds .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid #4A443D;display:grid;place-items:center;flex:none}
.minds label.on .dot{border-color:var(--brass);background:var(--brass)}
.minds label.on .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#0B0A09}
.form{display:grid;gap:14px;padding:0 20px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--ink2);font-weight:600}
.form input,.form select{font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);width:100%;color-scheme:dark}
.form input::placeholder{color:#5F584F}
.form input:focus,.form select:focus{outline:none;border-color:var(--brass)}
.form .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .g3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.seg button{padding:12px;font-size:15px;color:var(--mute)}
.seg button.on{background:var(--ink);color:#0B0A09}
.tog{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.tog input{width:18px;height:18px;accent-color:var(--brass)}
.reveal{padding:0 20px}
.reveal .pil{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.reveal .pil div{background:var(--card);border:1px solid var(--line);border-radius:12px;text-align:center;padding:10px 4px}
.reveal .pil small{display:block;font-size:11px;color:var(--mute)}
.reveal .pil b{display:block;font-family:var(--serif);font-size:24px;line-height:1.2;margin-top:2px}
.say2{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:10px}
.say2 b{display:block;font-size:12px;color:var(--brass);letter-spacing:.1em;margin-bottom:6px}
.say2 p{font-size:16px;line-height:1.65}
.say2 p+p{margin-top:10px}
.say2 .th{display:inline-block;margin-top:10px;font-size:11px;color:var(--mute);border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.fb{display:flex;gap:10px;padding:14px 20px 0}
.fb .btn{min-height:46px;font-size:15px}
.toc{padding:0 20px;display:grid;gap:8px}
.toc .ch{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.toc .ch.lock{opacity:.7}
.toc .ch h4{margin:0;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.toc .ch h4 span{font-size:12px;color:var(--mute);font-weight:500;white-space:nowrap}
.toc .ch ul{margin:8px 0 0;padding-left:18px;color:var(--ink2);font-size:14px}
.toc .ch ul li{margin:3px 0}
.toc .open{color:var(--green);font-weight:700;font-style:normal}
.hid{padding:0 20px;display:grid;gap:10px}
.hid .h{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px}
.hid .h b{font-family:var(--serif);font-size:20px;color:var(--brass);letter-spacing:.05em}
.sheet{margin:16px 20px 0;background:#F3EEE6;color:#0B0A09;border-radius:22px;padding:22px 20px}
.sheet .q{font-family:var(--serif);font-size:16px;line-height:1.55;color:#2A2622}
.sheet .q b{display:block;font-size:12px;letter-spacing:.1em;color:var(--brass2);margin-bottom:6px;font-family:var(--sans)}
.sheet .pr{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 6px;border-top:1px solid rgba(0,0,0,.12);padding-top:16px}
.sheet .pr span{color:#6B645B;font-size:14px}
.sheet .pr b{font-family:var(--serif);font-size:30px}
.sheet .pr b small{font-size:14px;font-weight:500;margin-left:2px}
.sheet .btn{background:#0B0A09;color:#fff;margin-top:12px}
.sheet .note{color:#6B645B;margin-top:10px;font-size:12px}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#0B0A09;padding:12px 18px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:50;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%)}
.guide{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(11,10,9,.92);backdrop-filter:blur(8px);animation:in .3s}
.guide .in{text-align:center;padding:30px}
.guide img{width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:top;margin:0 auto 14px;border:2px solid #2A2622}
.guide p{font-family:var(--serif);font-size:19px}
.guide small{display:block;margin-top:6px;color:var(--mute)}

/* 만세력 */
.manse .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px}
.manse .col{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center}
.manse .col small{display:block;font-size:11px;color:var(--mute);padding:8px 0 0}
.manse .col b{display:block;font-family:var(--serif);font-size:30px;line-height:1.15;padding:4px 0}
.manse .col .ss{font-size:11px;color:var(--ink2);padding:0 0 8px}
.el-wood{color:#6FCF97}.el-fire{color:#F07167}.el-earth{color:#E0B55B}.el-metal{color:#C8CDD2}.el-water{color:#6FA8F0}
.bars{padding:0 20px;display:grid;gap:8px}
.bars .b{display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:10px;font-size:13px}
.bars .b i{height:10px;border-radius:5px;background:var(--line);overflow:hidden;display:block}
.bars .b i::after{content:"";display:block;height:100%;width:var(--w);background:var(--c)}
.dae{display:flex;gap:6px;overflow-x:auto;padding:0 20px 6px;scrollbar-width:none}
.dae div{flex:0 0 64px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 4px;font-size:12px;color:var(--mute)}
.dae div b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin:2px 0}
.dae div.now{border-color:var(--brass);background:#231E18}
.dae div.up b{color:var(--green)}.dae div.dn b{color:var(--red)}

/* 전생 카드 */
.jcard{margin:0 20px;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:9/16;background:#111;color:#fff}
.jcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 50%,rgba(0,0,0,.88))}
.jcard .in{position:absolute;left:18px;right:18px;bottom:20px;z-index:1}
.jcard .badge{display:inline-block;background:#fff;color:#0B0A09;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;margin-bottom:8px}
.jcard h3{font-size:24px;color:#fff;line-height:1.3}
.jcard p{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:8px;line-height:1.55}
.jcard .hw{margin-top:10px;font-size:13px;color:var(--brass)}
.jcard .nm{position:absolute;left:18px;top:18px;z-index:1;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.85)}

/* 서랍 */
.drawer{padding:0 20px;display:grid;gap:10px}
.drawer .it{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.drawer .it img{width:54px;height:72px;object-fit:cover;object-position:top;border-radius:8px}
.drawer .it b{display:block;font-size:15px}
.drawer .it small{color:var(--mute);font-size:12px}
.empty{padding:40px 20px;text-align:center;color:var(--mute)}
.empty .big{font-family:var(--serif);font-size:40px;color:var(--brass);margin-bottom:8px}

/* 오행 색 타일(saju-view.js) — 결제 전 화면 명식 칸 안에서 카드 테두리·여백 상속 막기 */
.reveal .pil > div > div{background:none;border:0;padding:0}
.reveal .pil .sv-t{border:0;padding:0}

/* 2026-10-10 홈 보강: NEW 배지 · 만세력 카드 */
.poster .free.new{background:#E8C46A;color:#0B0A09}
.heroC .who .nw{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;background:#E8C46A;color:#0B0A09;padding:2px 6px;border-radius:999px;margin-left:4px}
.mcard{margin:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.mcard b{display:block;font-size:16px}.mcard small{display:block;margin-top:4px;opacity:.6;font-size:12px}
.mcard .ox{display:grid;grid-template-columns:repeat(3,30px);gap:6px;flex:none}
.mcard .ox i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c)}