:root{
  color-scheme:dark;
  --bg:#111414;--panel:#1a1e1e;--panel2:#202525;--line:#303635;--line2:#3b4441;
  --text:#e3e3da;--muted:#8e9994;--gold:#c7ab7c;--gold2:#e1c596;--green:#8ca697;--red:#c97b73;
  --font:"Pretendard","Noto Sans KR",Inter,system-ui,sans-serif;--serif:Georgia,"Noto Serif KR",serif;
  --radius:10px;--gutter:16px;--head-h:57px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--font);min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;touch-action:manipulation}
button:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input,textarea,select{background:#151919;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;width:100%;max-width:100%}
textarea{resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:#5d6763}
svg{width:18px;height:18px;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}
.muted{color:var(--muted)}.small{font-size:13px}.warn{color:var(--red)}
.eyebrow{display:block;font-size:11px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover:not(:disabled){border-color:var(--gold)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1712;font-weight:600}
.btn.gold:hover:not(:disabled){background:var(--gold2)}
.btn.danger{background:#4a2b27;border-color:#7a4741;color:#f1d3cf;font-weight:600}
.btn.danger:hover:not(:disabled){border-color:var(--red)}
.btn.flat{background:none;border-color:transparent;color:var(--muted)}
.btn.flat:hover:not(:disabled){color:var(--text);border-color:var(--line2)}
.btn.big{min-height:52px;padding:12px 22px;font-size:16px}
.icon-btn{width:40px;height:40px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);font-size:20px}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* 시작 화면 */
.start{max-width:560px;margin:0 auto;padding:12vh var(--gutter) 48px;text-align:center}
.start-mark{width:56px;height:60px;margin:0 auto 18px;border:1px solid #726b58;display:grid;place-items:center;color:var(--gold)}
.start-mark svg{width:26px;height:26px}
.start h1{font-size:34px}
.lead{color:#c5c7bd;margin:14px 0 28px}
.start-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.resume{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border-color:#5a523f}
.resume-actions{display:flex;flex:none;align-items:center;gap:6px}
.btn.flat.delete-btn:hover:not(:disabled){color:var(--red);border-color:#6b4440}
.resume strong{display:block;font-size:18px}.resume small{color:var(--muted)}

/* 상단·단계 표시 */
.sticky-head{position:sticky;top:0;z-index:5}
.stat-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;margin:0;padding:4px max(var(--gutter),calc((100% - 960px)/2 + var(--gutter)));background:#131716;border-bottom:1px solid var(--line)}
.stat-strip div{min-width:0;text-align:center;line-height:1.2;padding:2px 0;border-radius:6px}
.stat-strip dt{font-size:11px;color:var(--muted);white-space:nowrap}
.stat-strip dd{margin:0;font:600 16px/1.2 var(--serif);color:var(--text);font-variant-numeric:tabular-nums}
.stat-strip .down dd{color:#e39a91}.stat-strip .up dd{color:#a9c9b5}
@media (max-height:520px){.sticky-head{position:static}}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter);background:#161a19;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);text-align:left}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand strong{font-family:var(--serif);color:var(--text);font-size:17px}
.brand small{font-size:11px;color:var(--muted);letter-spacing:.08em}
.save-badge{font-size:12px;color:var(--muted);text-align:right}
.save-badge.saved::before{content:"● ";color:var(--green)}
.save-badge.failed{color:var(--red)}
.stepper{position:relative;display:flex;gap:6px;overflow-x:auto;padding:10px var(--gutter);border-bottom:1px solid var(--line);scrollbar-width:none;max-width:960px;margin:0 auto}
.stepper::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px;white-space:nowrap;flex:none}
.step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel2);font-size:12px}
.step.done{color:var(--text)}.step.done .step-n{background:#34413a;color:var(--green)}
.step.current{border-color:var(--gold);color:var(--text)}.step.current .step-n{background:var(--gold);color:#1a1712}

/* 본문 */
.screen{max-width:960px;margin:0 auto;padding:24px var(--gutter) 110px;outline:none}
.screen-head{margin-bottom:20px}
.screen-head h1{font-size:28px;margin-top:4px}
.intro{color:#c5c7bd;margin:8px 0 0;max-width:62ch}
.block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.block h2{font-size:19px;margin-bottom:4px}
.help{color:var(--muted);margin:0 0 14px;font-size:14px;max-width:70ch}
.row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.choice{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--radius);background:#171b1b;transition:border-color .15s,background .15s}
.choice strong{font-size:16px}.choice span{color:var(--muted);font-size:13.5px}
.choice:hover{border-color:#6b6350}
.choice.on{border-color:var(--gold);background:#231f17;box-shadow:inset 0 0 0 1px var(--gold)}
.stepper-input{display:flex;align-items:center;gap:12px}
.stepper-input output{min-width:150px;text-align:center;font-weight:600}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:14px}
.age-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.age-row input{width:120px}
.age-live{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;background:#262b2a;border:1px solid var(--line2);font-size:13px}
.placeholder{text-align:center;padding:48px 20px;color:var(--muted)}
.placeholder svg{width:32px;height:32px;color:var(--gold)}

/* 팝오버(나이표) */
.popover{max-width:min(520px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:var(--radius);padding:20px;box-shadow:0 18px 60px #000a}
.popover::backdrop{background:#0008}
.popover h3{font-size:18px;margin-bottom:4px}
.table-wrap{overflow-x:auto;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:500;font-size:12px}
td:first-child{white-space:nowrap;font-weight:600}
tr.hit td{background:#2a2519}tr.hit td:first-child{color:var(--gold)}

/* 특성치 카드 */
.roll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.roll-head .help{margin-bottom:6px}
.char-list{display:grid;gap:14px}
.char-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:border-color .3s}
.char-card.has-value{border-color:#3f4a45}
.char-card.rolling{border-color:var(--gold)}
.char-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.char-head h2{font-size:21px}.char-head h2 small{font:500 12px var(--font);color:var(--muted);letter-spacing:.1em;margin-left:4px}
.char-head p{margin:2px 0 0;color:var(--muted);font-size:14px}
.formula{flex:none;font-size:12px;color:var(--gold);border:1px solid #5a523f;border-radius:999px;padding:3px 10px;white-space:nowrap}
.char-body{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1.1fr);gap:24px;align-items:center}
.roll-side{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.roll-dice{display:flex;align-items:center;gap:10px;min-height:52px}
.plus{color:var(--muted);font-size:18px}
.die{position:relative;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:46px;height:46px;padding:7px;gap:1px;border-radius:9px;background:#ece6d6;box-shadow:inset 0 -3px 0 #c9bfa6,0 2px 6px #0006}
.die i{display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:transparent}
.die i.on{background:#24201a}
.die.blank{background:#2a302e;box-shadow:inset 0 0 0 1px var(--line2)}
.die.blank::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:700}
.die.tumbling{background:#ece6d6;box-shadow:inset 0 -3px 0 #c9bfa6,0 2px 6px #0006;animation:tumble .32s linear infinite}
.die.tumbling::after,.die.landed::after{content:none}
.die.landed{animation:land .32s cubic-bezier(.3,1.6,.5,1)}
.die.locked{background:#3a3f3d;box-shadow:inset 0 0 0 1px #6b6350}
.die.locked i.on{background:var(--gold)}
.die .lock{position:absolute;right:-7px;top:-7px;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--gold);color:#1a1712;stroke-width:2.2}
@keyframes tumble{0%{transform:rotate(0) translateY(0)}25%{transform:rotate(90deg) translateY(-6px)}50%{transform:rotate(180deg) translateY(0)}75%{transform:rotate(270deg) translateY(-4px)}100%{transform:rotate(360deg) translateY(0)}}
@keyframes land{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.equation{display:flex;align-items:baseline;gap:8px;color:var(--muted);font-size:15px;min-height:24px;visibility:hidden}
.char-card.rolling .equation,.char-card.has-value .equation{visibility:visible}
.char-card:not(.rolling):not(.has-value) :is(.equation,.big-value,.tiers){display:none}
.equation b{color:var(--text);font-size:18px;display:inline-block}
.equation b.bump{animation:bump .3s ease-out}
.eq-times{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;color:var(--gold)}
.equation.times .eq-times{opacity:1;transform:none}
@keyframes bump{0%{transform:scale(1.5);color:var(--gold2)}100%{transform:scale(1)}}
.big-value{font:600 46px/1 var(--serif);color:var(--gold2);min-height:46px}
.tiers{display:grid;gap:2px;margin:0;font-size:13.5px;min-height:44px}
.tiers div{display:flex;gap:8px;align-items:baseline}
.tiers dt{min-width:64px}.tiers dt b{color:var(--text)}.tiers dd{margin:0;color:var(--muted)}
.count{font-size:12px;color:var(--muted);margin-left:2px}
.die-btn{padding:0;border-radius:10px;transition:transform .15s}
@media (hover:hover){.die-btn:hover:not(:disabled){transform:translateY(-2px)}}
@media (hover:hover){.die-btn:hover:not(:disabled) .die{box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px #c7ab7c33}}
.lock-note{margin:-2px 0 0;font-size:13px;color:#c5c7bd;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.lock-note svg{width:15px;height:15px;color:var(--gold)}
.link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;padding:2px}
.cmp{position:relative;padding-left:28px}
.cmp ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line2)}
.cmp li{display:flex;gap:12px;align-items:baseline;padding:5px 10px;border-radius:0 6px 6px 0;font-size:14px;color:var(--muted);transition:background .3s,color .3s}
.cmp li b{min-width:24px;text-align:right;color:#a8b0ab;font-variant-numeric:tabular-nums}
.cmp li.hit{background:#2a2519;color:var(--text)}.cmp li.hit b{color:var(--gold)}
.cmp-arrow{position:absolute;left:0;top:0;margin-top:-11px;width:22px;height:22px;display:grid;place-items:center;color:var(--gold);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.3,1.15),opacity .2s}
.cmp-arrow svg{width:22px;height:22px;stroke-width:2.4}
.cmp-arrow.shown{opacity:1}
.cmp-arrow.instant{transition:none}

/* 나이 보정 */
.gold{color:var(--gold2)}
.btn.small{min-height:34px;padding:5px 12px;font-size:14px}
.icon-btn.small{width:38px;height:34px;font-size:14px;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.tag.up{color:var(--green);border-color:#4b5f53}.tag.down{color:var(--red);border-color:#6b4440}
.age-summary{display:flex;gap:18px;align-items:flex-start}
.age-badge{flex:none;width:76px;height:76px;border:1px solid #5a523f;border-radius:50%;display:grid;place-content:center;text-align:center;line-height:1}
.age-badge b{font:600 30px var(--serif);color:var(--gold2)}.age-badge span{font-size:12px;color:var(--muted)}
.count-pill{font:500 12px var(--font);color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:3px}
.edu-checks{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.edu-checks li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#171b1b;min-height:58px}
.edu-checks li.wait{opacity:.55}
.edu-checks li.ok{border-color:#4b5f53}.edu-checks li.ok .verdict{color:var(--green)}
.edu-checks li.no .verdict{color:var(--muted);font-weight:500}
.edu-checks .n{min-width:44px;font-size:13px;color:var(--muted)}
.edu-checks .verdict{margin-left:auto}
.edu-checks .btn{margin-left:auto}
.d100,.d10{display:inline-grid;place-items:center;min-width:52px;height:36px;padding:0 8px;border-radius:8px;background:#ece6d6;color:#1a1712;font:700 18px var(--font);font-variant-numeric:tabular-nums}
.d10{min-width:40px;height:30px;font-size:15px;background:#cfe0d4;margin:0 2px}
.d100.blank,.d10.blank{background:#2a302e;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.d100.spinning,.d10.spinning{animation:jiggle .18s linear infinite}
.d100.landed,.d10.landed{animation:land .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.edu-total{margin:0;font-size:16px}.edu-total b{font-size:20px}
.ded-tools{display:flex;gap:6px;flex-wrap:wrap}
.remain-pill{position:sticky;top:calc(var(--head-h) + 6px);z-index:3;display:inline-flex;align-items:center;gap:6px;margin:4px 0 12px;padding:6px 14px;border-radius:999px;background:#2a2519;border:1px solid #5a523f;color:var(--gold2);font-size:14px;box-shadow:0 4px 14px #0008}
.remain-pill b{font-size:17px}
.remain-pill.ok{background:#1f2a24;border-color:#4b5f53;color:var(--green)}
.ded-list{display:grid;gap:6px}
.ded-row{display:grid;grid-template-columns:110px auto 1fr;align-items:center;gap:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#171b1b}
.ded-name strong{display:block}.ded-name small{color:var(--muted);font-size:12px}
.ded-ctrl{display:flex;align-items:center;gap:4px}
.ded-ctrl output{min-width:52px;text-align:center;font-weight:700;font-size:17px;color:var(--muted)}
.ded-ctrl output.cut{color:var(--red)}
.ded-val{text-align:right}.ded-val b{font:600 22px var(--serif)}.ded-val small{display:block;color:var(--muted);font-size:12px}
.errors{margin:10px 0 0;padding-left:18px;color:var(--red);font-size:14px}
.luck-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.char-card.mini{padding:14px 18px;background:#171b1b;display:flex;flex-direction:column;gap:8px;min-width:220px}
.char-card.mini .tiers{display:none}
.luck-verdict{margin:0;font-size:16px}.luck-verdict b{font-size:22px}
.auto-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.auto-list li{display:grid;grid-template-columns:70px auto 1fr;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#171b1b}
.auto-list .auto-v{font-weight:600}
.auto-list small{grid-column:1/-1;color:var(--muted);font-size:13px}
.sum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sum-cell{padding:10px;border:1px solid var(--line);border-radius:8px;background:#171b1b;text-align:center}
.sum-cell small{display:block;color:var(--muted);font-size:12px}
.sum-cell b{display:block;font:600 24px var(--serif)}
.sum-cell span{font-size:12px;color:var(--muted)}
.sum-cell.up{border-color:#4b5f53}.sum-cell.up span{color:var(--green)}
.sum-cell.down{border-color:#6b4440}.sum-cell.down span{color:var(--red)}

/* 파생 수치 — 특성치 상자와 다르게: 게이지, 띠, 비교 */
.dv-section h2{margin-bottom:2px}
.pools{display:grid;gap:14px;margin-top:6px}
.pool{display:grid;grid-template-columns:84px 1fr 52px;grid-template-areas:"name meter value" "meaning meaning meaning" "how how how";align-items:center;gap:2px 14px}
.pool-name{grid-area:name;line-height:1.2}.pool-name strong{display:block;font-size:15px}.pool-name small{color:var(--muted);font-size:11px;letter-spacing:.08em}
.pool .meter{grid-area:meter}
.pool-value{grid-area:value;font:600 30px/1 var(--serif);text-align:right}
.pool-meaning{grid-area:meaning;margin:2px 0 0;color:#c5c7bd;font-size:13.5px}
.pool details{grid-area:how}
.meter{position:relative;display:block;height:22px;padding-top:0}
.meter .cells{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;height:100%}
.meter .cells i{border-radius:3px;background:#262b2a}
.meter .bar{display:block;height:12px;margin-top:5px;border-radius:6px;background:#262b2a;overflow:hidden}
.meter .bar>span{display:block;height:100%;border-radius:6px;transition:width .5s}
.meter .mark{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed #e3e3da88}
.meter .mark em{position:absolute;top:-15px;left:-12px;font-size:10px;font-style:normal;color:var(--muted);white-space:nowrap}
.meter.hp .cells i.on{background:#c97b73}.pool.hp .pool-value{color:#e39a91}
.meter.mp .cells i.on{background:#6f93b0}.pool.mp .pool-value{color:#9cbcd6}
.meter.san .bar>span{background:linear-gradient(90deg,#7c6a9a,#a07bb5)}.pool.san .pool-value{color:#c3a4d6}
.meter.luck .bar>span{background:linear-gradient(90deg,#a88d5f,var(--gold2))}.pool.luck .pool-value{color:var(--gold2)}
.dv-pair{display:flex;flex-wrap:wrap;gap:12px 40px;margin:10px 0 14px}
.dv-pair div{display:flex;flex-direction:column}
.dv-pair small{color:var(--muted);font-size:13px}
.dv-pair b{font:600 40px/1.05 var(--serif);color:var(--gold2)}
.dv-pair span{font-size:13.5px;color:#c5c7bd}
.db-strip{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin:26px 0 12px}
.db-strip .band{display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;background:#1d2221;font-size:12px;text-align:center}
.db-strip .band:first-child{border-radius:8px 0 0 8px}.db-strip .band:nth-child(8){border-radius:0 8px 8px 0}
.db-strip .band b{font-size:14px}.db-strip .band small{color:var(--muted);font-size:10.5px}
.db-strip .band em{font-style:normal;color:#5d6763;font-size:10px;margin-top:2px}
.db-strip .band.on{background:#2a2519;box-shadow:inset 0 0 0 1px var(--gold)}.db-strip .band.on b{color:var(--gold2)}
.db-marker{position:absolute;top:-24px;height:22px;width:0;border-left:2px solid var(--gold)}
.db-marker::after{content:"";position:absolute;bottom:-6px;left:-6px;border:5px solid transparent;border-top:6px solid var(--gold)}
.db-marker i{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:0 6px;border-radius:4px;background:var(--gold);color:#1a1712;font:700 11px var(--font);font-style:normal}
.mv{display:grid;gap:8px;margin:4px 0 12px}
.mv-legend{margin:0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.mv-siz-key{display:inline-block;width:0;height:14px;border-left:2px dashed #e3e3dacc}
.mv-row{display:grid;grid-template-columns:72px 1fr 92px;align-items:center;gap:10px;font-size:14px}
.mv-row b{font-weight:700}
.mv-bar{position:relative;height:14px;border-radius:7px;background:#262b2a}
.mv-bar>span{display:block;height:100%;border-radius:7px;background:#8e9994}
.mv-row.gt .mv-bar>span{background:var(--green)}.mv-row.lt .mv-bar>span{background:#c97b73}
.mv-siz{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed #e3e3dacc}
.mv-vs{font-size:12.5px;color:var(--muted)}.mv-row.gt .mv-vs{color:var(--green)}.mv-row.lt .mv-vs{color:#e39a91}
.dv-starts{display:flex;flex-wrap:wrap;gap:10px}
.dv-starts div{display:grid;grid-template-columns:auto auto;grid-template-areas:"n v" "f f";align-items:baseline;gap:0 12px;padding:10px 16px;border-left:3px solid var(--gold);background:#171b1b;border-radius:0 8px 8px 0}
.dv-starts strong{grid-area:n}.dv-starts b{grid-area:v;font:600 24px var(--serif);color:var(--gold2)}.dv-starts span{grid-area:f;font-size:12.5px;color:var(--muted)}
.sheet .pools{margin:14px 0 6px;gap:10px}
.sheet-phys{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;font-size:14px;color:#c5c7bd}
.sheet-phys b{font:600 19px var(--serif);color:var(--text)}.sheet-phys small{color:var(--muted)}
details summary{cursor:pointer;color:var(--gold);font-size:14px;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:4px 0}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";transition:transform .2s}
details[open] summary::before{transform:rotate(90deg)}
.dv-formula{margin-top:6px;padding:10px 12px;border-radius:8px;background:#151919;border:1px solid var(--line);font-size:14px}
.dv-formula p{margin:4px 0}.dv-formula .eq{font-size:15px}.dv-formula b{color:var(--gold2)}
.db-table{font-size:13px}.db-table td,.db-table th{padding:5px 8px}
.mov-rules{margin:6px 0;padding-left:18px;color:var(--muted)}
.mov-rules li.hit{color:var(--text);font-weight:600}

/* 직업 */
.warn-block{border-color:#6b4440;background:#241b1a}
.occ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.occ-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .15s}
button.occ-card:hover{border-color:#6b6350}
.occ-card.custom{border-style:dashed;color:var(--muted)}.occ-card.custom strong{color:var(--text)}.occ-card.custom svg{color:var(--gold)}
.occ-card.on{grid-column:1/-1;border-color:var(--gold);padding:18px 20px;scroll-margin-top:calc(var(--head-h) + 16px)}
.occ-card.on h3{font-size:16px;margin:18px 0 6px}
.occ-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.occ-top strong{font-size:17px;display:block}
.occ-card.on .occ-top strong{font:600 24px var(--serif)}
.occ-pts{font:600 22px var(--serif);color:var(--gold2);white-space:nowrap}.occ-pts small{font:12px var(--font);color:var(--muted);margin-left:2px}
.occ-desc{color:#c5c7bd;font-size:14px;margin:0}
.occ-meta{color:var(--muted);font-size:12.5px}
.formula-alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.formula-box{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--line2);border-radius:8px;background:#171b1b;font-size:14px}
.formula-box.single{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
.formula-box.on{border-color:var(--gold);background:#231f17;box-shadow:inset 0 0 0 1px var(--gold)}
.formula-box .total{font:600 22px var(--serif);color:var(--gold2)}
.formula-box .rec{position:absolute;top:-9px;right:10px;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--gold);color:#1a1712;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:#1d2221;font-size:13.5px}
.chip svg{width:14px;height:14px}
.chip.fixed{background:#262b2a;border-color:#4a524e}
.chip.on{background:#2a2519;border-color:var(--gold);color:var(--gold2)}
button.chip:hover:not(:disabled){border-color:#6b6350}
.slot{margin-top:12px;padding:12px;border:1px dashed var(--line2);border-radius:8px}
.slot.done{border-style:solid;border-color:#3f4a45}
.slot-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.formula-result{margin:10px 0 0;font-size:15px}
.range-row{display:flex;align-items:center;gap:8px}.range-row input{width:90px}
.ok-note{color:var(--green);margin:14px 0 0}

/* 기능 포인트 */
.budget-bar{position:sticky;top:var(--head-h);z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;margin:-8px 0 8px;background:var(--bg)}
.budget{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label label" "left of" "track track";align-items:baseline;gap:2px 6px;text-align:left;padding:10px 14px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel)}
.budget .b-label{grid-area:label;font-size:13px;color:var(--muted)}
.budget .b-left{grid-area:left;font-size:13px}.budget .b-left b{font:600 26px var(--serif);color:var(--text)}
.budget .b-of{grid-area:of;color:var(--muted);font-size:13px}
.budget .b-track{grid-area:track;height:4px;border-radius:2px;background:#2a302e;overflow:hidden;margin-top:6px}
.budget .b-track span{display:block;height:100%;background:var(--gold);transition:width .25s}
.budget.on{border-color:var(--gold);background:#231f17}.budget.on .b-label{color:var(--gold)}
.budget.full .b-track span{background:var(--green)}
.budget.over{border-color:var(--red)}.budget.over .b-left b{color:var(--red)}.budget.over .b-track span{background:var(--red)}
.mode-help{margin-bottom:12px}
.credit-block.bad{border-color:#6b4440}
.search input{margin-bottom:10px}
.skill-list{display:grid;gap:6px;margin-bottom:14px}
.skill-row{display:grid;grid-template-columns:1fr 56px auto 92px;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.skill-row.warn-high{border-color:#7a6440}
.sk-name strong{font-size:15px}.sk-name small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.badge{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:#2a2519;color:var(--gold);font-size:11px;vertical-align:2px}
.sk-base{text-align:center}.sk-base small{display:block;font-size:11px;color:var(--muted)}.sk-base b{color:#a8b0ab}
.pts{display:flex;align-items:center;gap:4px}
.pts input{width:64px;text-align:center;padding:7px 4px;font-weight:600}
.pts input.clamped{border-color:var(--red)}
.pts.disabled{justify-content:center;min-width:150px}
.sk-total{text-align:right}.sk-total b{display:block;font:600 24px/1.1 var(--serif);color:var(--gold2)}
.sk-total small{color:var(--muted);font-size:12px}
.sk-total em{display:block;font-style:normal;font-size:11.5px;color:#d9b26c}
.sk-total .mix{display:block;font-size:11px;color:var(--muted)}
.spec-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}.spec-quick strong{margin-right:4px}
.spec-row{display:grid;grid-template-columns:160px 1fr auto;gap:8px}
.notes{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.link.small{font-size:12px;margin-left:6px}

/* 경고(규칙 밖이어도 막지 않음) */
:root{--amber:#d9b26c}
.step.warn{color:var(--text);border-color:#7a6440}.step.warn .step-n{background:#3d3220;color:var(--amber);font-weight:700}
.nav-hint.warn{color:var(--amber)}
.notice{display:flex;gap:16px;align-items:flex-start}.notice>svg{width:28px;height:28px;color:var(--gold);margin-top:2px}
.notice .btn{margin-top:4px}
.warn-block{color:#e9c9a0}
.slot.over{border-style:solid;border-color:#7a6440}
.chip.extra{border-style:dashed;color:var(--muted)}
.remain-pill.over{background:#3d3220;border-color:#7a6440;color:var(--amber)}
.btn.over .count{color:var(--amber)}
.skill-row.rule-warn{border-color:#7a6440;background:#211d16}
.sk-warn{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--amber)}
.sk-warn:empty{display:none}
.toggle{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--gold)}
.errors li{list-style:none;margin-left:-18px}
.errors{color:var(--amber)}

/* 배경 */
.bs-list{display:grid;gap:10px}
.bs-item.key{border-color:var(--gold)}
.bs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.key-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--muted);white-space:nowrap}
.key-btn svg{width:15px;height:15px}
.key-btn.on{border-color:var(--gold);color:var(--gold2);background:#2a2519}.key-btn.on svg{fill:var(--gold)}
.bs-q{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bs-q .chip{font-size:12.5px;color:#c5c7bd}

/* 완성 */
.ok-block{display:flex;align-items:center;gap:8px;color:var(--green);border-color:#4b5f53}
.warn-list{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}
.warn-list .link{min-width:44px;display:inline-block;text-align:left}
.look-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.look-ctrl{display:grid;gap:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.avatar{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--color) 30%,#1a1e1e);border:2px solid var(--color);font:600 18px var(--serif);color:var(--text)}
.avatar.big{width:112px;height:112px;font-size:32px;border-width:3px}
.avatar img{width:100%;height:100%;object-fit:cover}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch{width:32px;height:32px;border-radius:50%;background:var(--sw);border:2px solid transparent;box-shadow:inset 0 0 0 2px #0004}
.swatch.on{border-color:var(--text)}
.swatch.custom{position:relative;overflow:hidden;background:conic-gradient(#c97b73,#d19a5b,#c7ab7c,#8ca697,#6f93b0,#a07bb5,#c97b73);cursor:pointer}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.sheet h3{font-size:16px;margin:18px 0 8px}
.sheet-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.sheet-head h2{font-size:24px}.sheet-head p{margin:2px 0 0;font-size:14px}
.sheet-stats,.sheet-derived{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-bottom:8px}
.sheet-stats div,.sheet-derived div{padding:8px;border:1px solid var(--line);border-radius:8px;background:#171b1b;text-align:center}
.sheet-stats small,.sheet-derived small{display:block;font-size:12px;color:var(--muted)}
.sheet-stats b,.sheet-derived b{display:block;font:600 22px var(--serif)}
.sheet-stats span,.sheet-derived span{font-size:11.5px;color:var(--muted)}
.sheet-skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 16px}
.sheet-skills li{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:14px}
.sheet-skills li span{flex:1}.sheet-skills li small{color:var(--muted);font-size:11.5px;min-width:44px;text-align:right}
.sheet-skills.main b{color:var(--gold2)}
.sheet-bs{margin:0;display:grid;gap:8px}
.sheet-bs div{padding:8px 12px;border-left:2px solid var(--line2)}
.sheet-bs div.key{border-left-color:var(--gold)}
.sheet-bs dt{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:4px}.sheet-bs dt svg{width:14px;height:14px;fill:var(--gold);color:var(--gold)}
.sheet-bs dd{margin:2px 0 0;white-space:pre-wrap;font-size:14.5px}
.export-block .btn-row{margin-top:12px}
.cc-raw{margin-top:8px;font:12px/1.5 ui-monospace,Consolas,monospace;color:#c5c7bd}

@media print{
  body{background:#fff;color:#111}
  .sticky-head,.stepper,.nav,#toast,.screen-head,.screen>section:not(#sheet-summary),.screen>.block:not(#sheet-summary){display:none!important}
  .screen{padding:0;max-width:none}
  .sheet{border:0;background:none;padding:0}
  .sheet-stats div,.sheet-derived div{background:none;border-color:#bbb}
  .sheet *{color:#111!important}
  .sheet details>summary{display:none}
}

/* 코코포리아 변환 */
.convert{padding-bottom:48px}
.convert .screen-head .btn{margin:0 0 10px -8px}
.convert textarea{font:13px/1.5 ui-monospace,Consolas,monospace}
.convert-help{margin:12px 0 0}
.convert-pools{display:flex;flex-wrap:wrap;gap:6px 20px;margin:6px 0 12px;color:#c5c7bd;font-size:14px}
.convert-pools b{font:600 20px var(--serif);color:var(--gold2)}
.convert-result .btn-row{margin-top:12px}
.convert-result .ok-note{margin-top:10px}

/* 하단 이동 */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px max(var(--gutter),calc((100vw - 960px)/2 + var(--gutter)));padding-bottom:calc(12px + env(safe-area-inset-bottom));background:#161a19ee;backdrop-filter:blur(6px);border-top:1px solid var(--line)}
.nav-hint{flex:1;text-align:right;color:var(--muted);font-size:13px}

dialog{max-width:min(460px,calc(100vw - 32px));width:100%;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:var(--radius);padding:22px;box-shadow:0 18px 60px #000a}
dialog::backdrop{background:#000a}
dialog h2{font-size:20px;margin-bottom:8px}
.dialog-body p{margin:0 0 10px;color:#c5c7bd;font-size:14.5px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#2a302e;border:1px solid var(--line2);padding:10px 16px;border-radius:8px;transition:.2s;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .screen-head h1{font-size:24px}
  .block{padding:16px}
  .char-card{padding:16px}
  .char-body{grid-template-columns:1fr;gap:16px}
  .char-head{flex-direction:column;gap:6px}
  .roll-head .btn{width:100%}
  .ded-row{grid-template-columns:1fr auto;grid-template-areas:"name val" "ctrl ctrl"}
  .ded-name{grid-area:name}.ded-val{grid-area:val}.ded-ctrl{grid-area:ctrl;justify-content:space-between}
  .age-summary{flex-direction:column;gap:10px}
  .edu-checks .verdict,.edu-checks .btn{margin-left:0}
  .skill-row{grid-template-columns:1fr auto;grid-template-areas:"name total" "base pts" "warn warn";gap:8px 10px}
  .sk-warn{grid-area:warn}
  .sk-name{grid-area:name}.sk-total{grid-area:total}.sk-base{grid-area:base;text-align:left;display:flex;gap:6px;align-items:baseline}.pts{grid-area:pts;justify-content:flex-end}
  .budget{padding:8px 10px}.budget .b-left b{font-size:22px}
  .spec-row{grid-template-columns:1fr}
  .stat-strip dt{font-size:10px}.stat-strip dd{font-size:14px}
  .pool{grid-template-columns:62px 1fr 40px;gap:2px 10px}.pool-value{font-size:24px}
  .db-strip .band{padding:6px 0 4px}.db-strip .band b{font-size:11.5px}.db-strip .band small{font-size:9px}.db-strip .band em{display:none}
  .mv-row{grid-template-columns:62px 1fr;}.mv-vs{grid-column:2}
  .dv-pair b{font-size:34px}
  .save-badge{max-width:44vw}
  .resume{flex-direction:column;align-items:stretch}
  .resume-actions .btn.gold{flex:1}
}
/* 상단 진행 표시(휴대폰에서 단계 표시줄이 스크롤로 사라져도 보이게) */
.top-progress{display:none}
.brand .top-step{display:none}
@media (max-width:640px){
  .brand small{display:none}
  .top-progress{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
  .top-progress span{display:block;height:100%;background:var(--gold);transition:width .3s}
  .brand .top-step{display:block;font-size:11px;font-style:normal;color:var(--gold);letter-spacing:0}
}

/* 휴대폰·터치 다듬기 */
@media (max-width:640px){
  input,textarea,select{font-size:16px} /* iOS가 입력할 때 확대하지 않도록 */
  .step{padding:9px 13px 9px 8px}
  .icon-btn.small{width:44px;height:42px;font-size:16px}
  .pts input{width:68px;height:42px}
  .chip{min-height:40px;padding:8px 13px}
  .key-btn{min-height:40px;padding:8px 12px}
  details summary{padding:10px 0}
  .link{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
  .swatch{width:40px;height:40px}
  .budget{grid-template-areas:"label of" "left left" "track track";padding:7px 10px}
  .budget .b-label{font-size:12px}.budget .b-left b{font-size:21px}
  .nav{gap:8px}
  .nav-hint{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nav .btn{padding:8px 13px}
  dialog{margin:auto 0 0;max-width:100vw;width:100vw;border-radius:16px 16px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0}
  .dialog-actions{display:grid;grid-template-columns:1fr 1fr}
  .dialog-actions .btn{min-height:48px;white-space:normal}
  .popover{margin:auto 0 0;max-width:100vw;width:100vw;border-radius:16px 16px 0 0;max-height:85dvh}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* 휴대폰에서 글자를 입력하는 동안에는 하단 이동 막대를 숨겨 자판 위 공간을 넓힙니다. */
@media (pointer:coarse){body.typing .nav{display:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}