/* 솔바람 농장 계열의 따뜻한 나무·한지 도트 UI — 세로 모바일 한 화면 */
:root{
  --wood:#9a6236; --wood-d:#5a3418; --wood-dd:#3a200e; --wood-l:#c48a52;
  --paper:#f6e4bc; --paper-d:#e2c690; --paper-l:#fff4d8;
  --ink:#3b2414; --ink-l:#7a5a3c;
  --teal:#3aa48c; --teal-d:#1f6a5a; --red:#c8483a; --red-d:#7a2418; --gold:#f0c048; --sky:#2a2a3a;
  --f-d:"Do Hyeon","Gowun Dodum",sans-serif; --f-b:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:#1a120c;color:var(--ink);font-family:var(--f-b);font-size:15px;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  background-image:radial-gradient(#2a1c12 1px,transparent 1px);background-size:6px 6px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#app{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;background:#24180f;box-shadow:0 0 0 2px #000,0 0 60px #000}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.screen[hidden]{display:none!important}

/* ----- 도트 패널 · 버튼 ----- */
.pnl{background:var(--paper);border:3px solid var(--wood-dd);border-radius:7px;box-shadow:inset 0 0 0 2px var(--paper-l),inset 0 -5px 0 2px var(--paper-d),0 4px 0 #120a04;color:var(--ink)}
.woodbar{background:repeating-linear-gradient(90deg,#9a6236 0 22px,#8e5a30 22px 24px);border-bottom:3px solid var(--wood-dd);box-shadow:inset 0 2px 0 #c48a52,inset 0 -3px 0 #6a3e1c}
.pbtn{font-family:var(--f-d);font-size:18px;line-height:1.1;color:var(--ink);background:#f0bc68;border:3px solid var(--wood-dd);border-radius:8px;padding:.5em .9em;
  box-shadow:inset 0 -5px 0 #c8893a,inset 0 3px 0 #ffe0a8,0 3px 0 #120a04;transition:transform .05s}
.pbtn:active:not([disabled]){transform:translateY(2px);box-shadow:inset 0 -3px 0 #c8893a,inset 0 3px 0 #ffe0a8,0 1px 0 #120a04}
.pbtn[disabled]{filter:grayscale(.8) brightness(.85);opacity:.55;cursor:not-allowed}
.pbtn.teal{background:#5cc4a6;color:#fff;text-shadow:0 2px 0 #1f6a5a;box-shadow:inset 0 -5px 0 #2f8a74,inset 0 3px 0 #a8f0d8,0 3px 0 #120a04}
.pbtn.red{background:#e06a52;color:#fff;text-shadow:0 2px 0 #7a2418;box-shadow:inset 0 -5px 0 #a83a2a,inset 0 3px 0 #ffb8a0,0 3px 0 #120a04}
.pbtn.ghost{background:#d8c49a;box-shadow:inset 0 -4px 0 #b09868,inset 0 2px 0 #f6e6c0,0 3px 0 #120a04}
.pbtn.sm{font-size:15px;padding:.38em .7em;border-width:2px}
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-d);font-size:14px;background:#3a2414;color:#f6e4bc;border:2px solid #120a04;border-radius:6px;padding:3px 8px;white-space:nowrap}
.chip b{color:var(--gold);font-weight:400}
.ico{display:inline-block;vertical-align:middle}

/* ----- 타이틀 ----- */
#t-cv{position:absolute;inset:0;width:100%;height:100%}
.t-logo{position:relative;margin-top:calc(9vh + env(safe-area-inset-top,0px));text-align:center;pointer-events:none}
.t-logo .hj{font-family:var(--f-d);font-size:20px;letter-spacing:.5em;color:#ffe8b0;text-shadow:0 2px 0 #3a200e}
.t-logo h1{margin:4px 0 0;font-family:var(--f-d);font-weight:400;font-size:66px;line-height:1;color:#fff4d8;letter-spacing:.06em;
  text-shadow:0 4px 0 #a8382c,0 7px 0 #3a200e,3px 0 0 #3a200e,-3px 0 0 #3a200e,0 -3px 0 #3a200e}
.t-logo .sub{margin-top:14px;display:inline-block;font-family:var(--f-d);font-size:15px;color:#3b2414;background:var(--paper);border:3px solid var(--wood-dd);border-radius:6px;padding:4px 12px;box-shadow:0 3px 0 #120a04}
.t-menu{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(280px,calc(100% - 48px));display:flex;flex-direction:column;gap:10px}
.t-menu .pbtn{width:100%}
.t-foot{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));text-align:center;font-size:12px;color:#f6e4bccc;text-shadow:0 1px 0 #000}

/* ----- 이야기 ----- */
#scr-story{background:#120c08}
.st-stage{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:#120c08}
#st-cv{width:100%;height:auto}
.st-cap{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:96px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.st-cap .place{font-family:var(--f-d);font-size:13px;background:#3a2414e6;color:#ffe8b0;border:2px solid #120a04;border-radius:5px;padding:2px 8px}
.st-cap .chap{font-family:var(--f-d);font-size:20px;color:#fff4d8;text-shadow:0 2px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000}
#st-skip{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:2}
.st-low{padding:10px 10px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;background:linear-gradient(#120c0800,#120c08 20%)}
#st-choices{display:flex;flex-direction:column;gap:8px}
#st-choices .pbtn{text-align:left;font-size:16px}
.dlg{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px 12px 14px;min-height:132px;cursor:pointer}
.dlg-pf{width:92px;height:92px;background:#d6b27a;border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 0 0 2px #f6dcaa;overflow:hidden;display:grid;place-items:end center}
.dlg-pf canvas{width:92px;height:92px}
.dlg-pf.foe{background:#c88a78}.dlg-pf.narr{background:#b8a888}
.dlg-name{display:inline-block;font-family:var(--f-d);font-size:18px;color:#fff4d8;background:var(--wood);border:2px solid var(--wood-dd);border-radius:5px;padding:1px 10px;margin-bottom:6px;box-shadow:inset 0 2px 0 var(--wood-l)}
.dlg-name.foe{background:#a8382c;box-shadow:inset 0 2px 0 #e06a52}
.dlg-name:empty{display:none}
.dlg-txt{font-size:16px;line-height:1.6;white-space:pre-line;min-height:3.2em}
.dlg-next{position:absolute;right:12px;bottom:8px;width:0;height:0;border:6px solid transparent;border-top:8px solid var(--wood-d);animation:bob .8s infinite steps(2)}
@keyframes bob{50%{transform:translateY(3px)}}

/* ----- 진영 ----- */
#scr-camp{background:#2a1c12}
.cp-head{position:relative;flex:none;height:150px;overflow:hidden;background:#101828}
#cp-cv{width:100%;position:absolute;bottom:0;left:0}
.cp-title{position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cp-title .place{font-family:var(--f-d);font-size:13px;background:#3a2414e6;color:#ffe8b0;border:2px solid #120a04;border-radius:5px;padding:2px 8px}
.cp-title h2{margin:0;font-family:var(--f-d);font-weight:400;font-size:26px;color:#fff4d8;text-shadow:0 2px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000}
.cp-gold{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top,0px))}
.cp-btns{position:absolute;right:12px;bottom:10px;display:flex;gap:6px}
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 8px 0;background:var(--wood-d)}
.tabs button{font-family:var(--f-d);font-size:16px;background:#c48a52;border:3px solid var(--wood-dd);border-bottom:0;border-radius:7px 7px 0 0;padding:8px 0 6px;color:#3b2414;box-shadow:inset 0 3px 0 #e6b07a}
.tabs button.on{background:var(--paper);box-shadow:inset 0 3px 0 var(--paper-l)}
.cp-body{flex:1;min-height:0;overflow:auto;background:var(--paper);padding:12px 12px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.hcard{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:10px;background:#fff1cf;border:3px solid var(--wood-d);border-radius:7px;box-shadow:inset 0 -4px 0 #ecd29e}
.hcard.gone{filter:grayscale(.9);opacity:.6}
.pfbox{width:76px;height:76px;background:#d6b27a;border:3px solid var(--wood-dd);border-radius:6px;overflow:hidden;display:grid;place-items:end center}
.pfbox canvas{width:76px;height:76px}
.hname{font-family:var(--f-d);font-size:20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hname .cls{font-size:13px;background:var(--wood);color:#fff4d8;border-radius:4px;padding:1px 6px}
.s5{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:6px;text-align:center;font-size:11px;color:var(--ink-l)}
.s5 div{background:#f2dcaa;border-radius:4px;padding:2px 0}
.s5 b{display:block;font-family:var(--f-d);font-size:16px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.s5 b.up{color:#1f8a5a}.s5 b.dn{color:#c8483a}
.xp{height:7px;background:#3a2414;border:2px solid #120a04;border-radius:4px;margin-top:6px;overflow:hidden}
.xp i{display:block;height:100%;background:linear-gradient(#ffe08a,#e0a830)}
.bio{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--ink-l);margin:0}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{font-size:12px;background:#3aa48c;color:#fff;border-radius:4px;padding:1px 7px;font-family:var(--f-d)}
.herosel{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.herosel button{flex:none;width:58px;height:58px;padding:0;background:#d6b27a;border:3px solid var(--wood-dd);border-radius:6px;overflow:hidden;display:grid;place-items:end center}
.herosel button.on{border-color:#e8483a;box-shadow:0 0 0 2px var(--gold)}
.herosel canvas{width:52px;height:52px}
.eqtop{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center}
.sprbox{height:132px;background:linear-gradient(#a8d0e8 0 60%,#8ea84e 60%);border:3px solid var(--wood-dd);border-radius:7px;display:grid;place-items:end center;overflow:hidden}
.slots{display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;background:#fff1cf;border:3px solid var(--wood-d);border-radius:7px;padding:6px 8px;box-shadow:inset 0 -3px 0 #ecd29e}
.slot.on{border-color:#e8483a;background:#ffe6c0}
.slot .lab{font-size:11px;color:var(--ink-l)}
.slot .nm{font-family:var(--f-d);font-size:16px}
.slot .st{font-size:12px;color:#1f8a5a}
.icobox{width:40px;height:40px;background:#e8cc94;border:2px solid var(--wood-d);border-radius:5px;display:grid;place-items:center}
.icobox canvas{width:32px;height:32px}
.ilist{display:flex;flex-direction:column;gap:6px}
.irow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;background:#fff6dc;border:2px solid #d2b07a;border-radius:6px;padding:6px 8px;text-align:left}
.irow .nm{font-family:var(--f-d);font-size:16px}
.irow .d{font-size:12px;color:var(--ink-l);line-height:1.4}
.irow .pr{font-family:var(--f-d);font-size:15px;white-space:nowrap}
.sec{font-family:var(--f-d);font-size:17px;color:var(--wood-d);margin:4px 0 0;display:flex;align-items:center;gap:6px}
.sec:after{content:"";flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--wood-l) 0 6px,transparent 6px 9px)}
.empty{font-size:13px;color:var(--ink-l);text-align:center;padding:10px}
.nextcard{padding:12px;display:flex;flex-direction:column;gap:8px}
.nextcard h3{margin:0;font-family:var(--f-d);font-weight:400;font-size:22px}
.nextcard p{margin:0;line-height:1.6;font-size:14px}

/* ----- 전투 ----- */
#scr-battle{background:#1b2418}
.hud{flex:none;display:flex;align-items:center;gap:6px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;z-index:3}
.hud .ch{font-family:var(--f-d);font-size:16px;color:#fff4d8;text-shadow:0 2px 0 #3a200e;margin-right:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .chip{cursor:default}
.hud button.chip{cursor:pointer;background:#5a3418}
#mapwrap{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
#map{position:absolute;inset:0}
.banner{position:absolute;left:0;right:0;top:38%;z-index:6;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:scale(.9);transition:opacity .18s,transform .18s}
.banner span{font-family:var(--f-d);font-size:28px;color:#fff;padding:10px 26px;border:3px solid #120a04;border-radius:8px;box-shadow:0 4px 0 #120a04;text-shadow:0 2px 0 #00000080}
.banner.ally span{background:#2f8a74}.banner.foe span{background:#b8402e}
.banner.show{opacity:1;transform:none}
#cut{position:absolute;inset:0;z-index:8;background:#0a0604b0;display:grid;place-items:center;padding:8px}
#cut[hidden]{display:none}
.cut-box{width:100%;padding:8px;display:flex;flex-direction:column;gap:6px}
.cut-head{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cut-side{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border:2px solid #120a04;border-radius:6px;background:#3aa48c;color:#fff}
.cut-side.foe{background:#c8483a}
.cut-side .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.cut-side .nm{font-family:var(--f-d);font-size:16px;text-shadow:0 2px 0 #0006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut-side .hpn{font-family:var(--f-d);font-size:13px;font-variant-numeric:tabular-nums}
.cut-side .bar{height:8px;background:#2a160c;border:2px solid #120a04;border-radius:4px;overflow:hidden}
.cut-side .bar i{display:block;height:100%;background:linear-gradient(#b8ffcc,#3ad07a);transition:width .35s steps(8)}
.cut-side.foe .bar i{background:linear-gradient(#ffd0a0,#ff7a3a)}
#cut-stage{border:3px solid var(--wood-dd);border-radius:6px;overflow:hidden;background:#000;display:grid;place-items:center}
.cut-tip{font-size:12px;color:var(--ink-l);text-align:center}
#dock{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:28px 8px calc(8px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;background:linear-gradient(rgba(16,10,6,0),rgba(16,10,6,.82) 26px,rgba(16,10,6,.94));pointer-events:none}
#dock>*{pointer-events:auto}
.dk-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:start}
.dk-name{font-family:var(--f-d);font-size:19px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.dk-name .cls{font-size:12px;background:var(--wood);color:#fff4d8;border-radius:4px;padding:1px 6px}
.dk-name .cls.foe{background:var(--red)}
.bar2{position:relative;height:12px;background:#3a2414;border:2px solid #120a04;border-radius:4px;overflow:hidden;margin-top:4px}
.bar2 i{display:block;height:100%;background:linear-gradient(#b8ffcc,#3ad07a)}
.bar2.foe i{background:linear-gradient(#ffd0a0,#ff7a3a)}
.bar2.mp i{background:linear-gradient(#c0dcff,#5a8ae0)}
.bar2 b{position:absolute;right:4px;top:-2px;font-family:var(--f-d);font-weight:400;font-size:11px;color:#fff;text-shadow:0 1px 0 #000,1px 0 0 #000}
.s4{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:5px;text-align:center;font-size:11px;color:var(--ink-l)}
.s4 div{background:#ecd29e;border-radius:4px;padding:1px 0}
.s4 b{display:block;font-family:var(--f-d);font-weight:400;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.dk-eq{display:flex;gap:6px;align-items:center;min-height:30px}
.dk-eq .icobox{width:30px;height:30px}
.dk-eq .icobox canvas{width:24px;height:24px}
.dk-eq .tg{font-size:12px;background:#3aa48c;color:#fff;border-radius:4px;padding:1px 6px;font-family:var(--f-d)}
.dk-eq .tg.st{background:#8a5ac8}
.dk-btns{display:flex;gap:6px;margin-top:auto}
.dk-btns .pbtn{flex:1}
.dk-hint{font-size:13px;color:var(--ink-l);line-height:1.5}
.dk-title{display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:17px}
.dk-title canvas{width:34px;height:34px;background:#d6b27a;border:2px solid var(--wood-dd);border-radius:5px}
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.act{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-d);font-size:16px;padding:6px 2px 7px}
.act canvas{width:28px;height:28px}
.act small{font-family:var(--f-b);font-size:11px;color:#6a4a2c}
.sklist{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:0}
.skrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;text-align:left;background:#fff1cf;border:2px solid var(--wood-d);border-radius:6px;padding:5px 8px;box-shadow:inset 0 -3px 0 #ecd29e}
.skrow[disabled]{opacity:.45}
.skrow .nm{font-family:var(--f-d);font-size:16px}
.skrow .d{font-size:11.5px;color:var(--ink-l);line-height:1.35}
.skrow .c{font-family:var(--f-d);font-size:13px;color:#3a5ab0;white-space:nowrap}
.fc{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.fc-s{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.fc-s canvas{width:56px;height:56px;background:#d6b27a;border:2px solid var(--wood-dd);border-radius:5px}
.fc-s.foe canvas{background:#e0a090}
.fc-s .nm{font-family:var(--f-d);font-size:15px}
.fc-s .hp{font-size:12px;color:var(--ink-l);font-variant-numeric:tabular-nums}
.fc-s .hp b{color:var(--red);font-weight:400}
.fc-m{display:grid;grid-template-columns:auto auto;gap:2px 8px;font-size:12px;color:var(--ink-l);align-items:baseline}
.fc-m b{font-family:var(--f-d);font-size:20px;font-weight:400;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.fc-m .vs{grid-column:1/-1;text-align:center;font-family:var(--f-d);font-size:15px;color:var(--red)}
.fc-note{font-size:12px;text-align:center;color:#1f6a5a;font-family:var(--f-d)}
.fc-note.bad{color:var(--red)}
#talk{position:absolute;left:6px;right:6px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:9}
#talk[hidden]{display:none}
#talk .dlg{min-height:200px}

/* ----- 모달 · 토스트 ----- */
.modal{position:absolute;inset:0;z-index:30;background:#0a0604c0;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none!important}
.mbox{width:100%;max-height:calc(100% - 20px);overflow:auto;padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px}
.m-eyebrow{font-family:var(--f-d);font-size:13px;color:var(--wood);letter-spacing:.06em}
.m-h{margin:0;font-family:var(--f-d);font-weight:400;font-size:24px}
.m-p{margin:0;line-height:1.65;font-size:14.5px}
.m-ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px;line-height:1.55;font-size:14px}
.goal{border:2px solid var(--teal-d);background:#d8f0e4;border-radius:6px;padding:8px 10px;font-size:14px;line-height:1.5}
.goal.lose{border-color:var(--red-d);background:#f8dcd2}
.goal b{font-family:var(--f-d);font-weight:400}
.mbtns{display:flex;gap:8px;flex-wrap:wrap}
.mbtns .pbtn{flex:1;min-width:110px}
.result{font-family:var(--f-d);font-size:56px;text-align:center;line-height:1;text-shadow:0 4px 0 #3a200e}
.result.win{color:var(--gold)}.result.lose{color:var(--red)}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.rstats div{background:#ecd29e;border-radius:6px;padding:8px 2px;font-size:12px;color:var(--ink-l)}
.rstats b{display:block;font-family:var(--f-d);font-weight:400;font-size:24px;color:var(--ink)}
.loot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.lt{display:flex;align-items:center;gap:4px;background:#fff1cf;border:2px solid var(--wood-d);border-radius:6px;padding:3px 8px 3px 4px;font-family:var(--f-d);font-size:14px}
.lvup{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
.lvup .ups{display:grid;grid-template-columns:auto auto;gap:3px 10px;font-family:var(--f-d);font-size:17px}
.lvup .ups .p{color:#1f8a5a}
.optrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-d);font-size:17px}
.loglist{max-height:46vh;overflow:auto;font-size:13px;line-height:1.6;background:#fff1cf;border:2px solid #d2b07a;border-radius:6px;padding:8px}
.loglist p{margin:0}.loglist .ally{color:#1f6a5a}.loglist .foe{color:#a8382c}.loglist .g{color:#8a5a10}
.chlist{display:flex;flex-direction:column;gap:8px}
.chlist .pbtn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left}
.chlist small{font-family:var(--f-b);font-size:12px;color:#6a4a2c}
.toast{position:absolute;z-index:40;left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translate(-50%,-10px);font-family:var(--f-d);font-size:15px;background:var(--paper);color:var(--ink);border:3px solid var(--wood-dd);border-radius:7px;padding:6px 14px;box-shadow:0 3px 0 #120a04;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ----- v0.3: 조사 반영 UI ----- */
.herosel{flex:none}
#fco[hidden],#terr[hidden],#cut[hidden],#talk[hidden]{display:none!important}
canvas[data-q],.pfbox canvas,.dlg-pf canvas,.herosel canvas,.fc-s canvas,.dk-title canvas{image-rendering:pixelated}
.pfbox,.dlg-pf,.herosel button{background:linear-gradient(#bfe3f4,#e2f2d0)}
.dlg-pf.foe{background:linear-gradient(#f4c8bc,#f2e2c8)}.dlg-pf.narr{background:#d8c8a0}
.dlg-pf canvas{width:80px;height:80px}.dlg-pf{width:86px;height:86px;place-items:center}
.pfbox{place-items:center}.pfbox canvas{width:72px;height:72px}.herosel canvas{width:50px;height:50px}.herosel button{place-items:center}
#fco{position:absolute;left:6px;right:6px;top:6px;z-index:5;padding:8px;display:flex;flex-direction:column;gap:5px}
.fco-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:stretch}
.fco-row:has(> .fco:only-child){grid-template-columns:1fr}
.fco{display:flex;flex-direction:column;gap:3px;background:#dff0ff;border:2px solid #2e5a8e;border-radius:6px;padding:5px 6px;min-width:0}
.fco.foe{background:#ffe2da;border-color:#a8382c}
.fco-top{display:flex;align-items:center;gap:6px;position:relative}
.fco-top canvas{width:34px;height:34px;background:linear-gradient(#bfe3f4,#e2f2d0);border:2px solid var(--wood-dd);border-radius:4px;flex:none}
.fco-nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}.fco-nm b{font-family:var(--f-d);font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fco-nm span{font-size:11px;color:var(--ink-l)}
.adv{position:absolute;right:0;top:0;font-style:normal;font-family:var(--f-d);font-size:15px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:#fff;border:2px solid #120a04}
.adv.up{background:#46d26e}.adv.dn{background:#e84646}
.fco-hp{display:flex;align-items:baseline;gap:4px;font-family:var(--f-d);font-size:15px;font-variant-numeric:tabular-nums}.fco-hp .ar{color:var(--ink-l);font-size:12px}.fco-hp b{font-weight:400;font-size:20px}.fco-hp b.loss{color:#c8302a}
.fco-bar{position:relative;height:8px;background:#3a2414;border:2px solid #120a04;border-radius:4px;overflow:hidden}
.fco-bar i{position:absolute;left:0;top:0;bottom:0}.fco-bar .now{background:#ff5a4a;animation:lossb .5s steps(2) infinite}.fco-bar .aft{background:linear-gradient(#b8ffcc,#3ad07a)}
.fco.foe .fco-bar .aft{background:linear-gradient(#ffd0a0,#ff7a3a)}
@keyframes lossb{50%{background:#ffd23c}}
.fco-rows{display:grid;grid-template-columns:auto 1fr;gap:0 6px;font-size:11px;color:var(--ink-l);align-items:baseline}.fco-rows b{font-family:var(--f-d);font-weight:400;font-size:15px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fco-vs{align-self:center;font-family:var(--f-d);font-size:15px;color:#fff;background:#3a2414;border:2px solid #120a04;border-radius:6px;padding:4px 5px;writing-mode:vertical-rl;letter-spacing:.1em}
.fco-note{font-family:var(--f-d);font-size:13px;text-align:center;color:#1f6a5a}
#terr{position:absolute;right:6px;bottom:6px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:1px;background:#2a1a0ee6;color:#f6e4bc;border:2px solid #120a04;border-radius:6px;padding:4px 8px;font-size:11px;pointer-events:none;box-shadow:0 2px 0 #000}
#terr b{font-family:var(--f-d);font-weight:400;font-size:15px;color:#fff}#terr .st{color:#ffd23c;letter-spacing:1px;font-size:11px}
#terr .who{font-family:var(--f-d);font-size:13px;padding:0 6px;border-radius:4px;margin-top:2px}#terr .who.ally{background:#2f8a74}#terr .who.foe{background:#b8402e}
.pulse{animation:pls 1s ease-in-out infinite}@keyframes pls{50%{filter:brightness(1.25);transform:scale(1.04)}}
.cst{display:flex;gap:6px;font-size:11px;margin-top:2px}.cst span{display:flex;gap:3px;align-items:baseline;background:#0003;border-radius:3px;padding:0 4px}.cst b{font-family:var(--f-d);font-weight:400;font-size:14px}
.lvpf{width:72px;height:72px}.lvnum{font-family:var(--f-d);font-size:20px}.lvnum span{color:var(--ink-l)}.lvnum b{font-weight:400;color:#1f8a5a;font-size:26px}
.lvrows{display:flex;flex-direction:column;gap:5px}
.lvr{display:grid;grid-template-columns:44px 36px 34px 1fr;gap:6px;align-items:center;font-family:var(--f-d);font-size:16px;padding:3px 6px;border-radius:5px;background:#ecd29e}
.lvr b{font-weight:400;text-align:right;font-variant-numeric:tabular-nums}.lvr i{font-style:normal;color:#1f8a5a;opacity:0}.lvr.up{background:#d6f4d8}.lvr.up i{opacity:1;animation:pop .3s}
.lvb{height:7px;background:#3a2414;border-radius:4px;overflow:hidden}.lvb em{display:block;height:100%;background:linear-gradient(#ffe08a,#e0a830);transition:width .3s}
@keyframes pop{0%{transform:scale(1.8)}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:-4px}
.optrow small{display:block;font-family:var(--f-b);font-size:12px;color:var(--ink-l)}
.tri{display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:wrap;background:#fff1cf;border:2px solid #d2b07a;border-radius:8px;padding:8px}
.tri-n{display:flex;flex-direction:column;align-items:center;font-family:var(--f-d)}.tri-n canvas{image-rendering:pixelated}
.tri-ar{font-size:20px;color:#c8302a}


/* ----- v0.4 하단 HUD (FEH·랑그릿사 모바일식) ----- */
#scr-battle{position:absolute}
#mapwrap{position:relative}
.ucard{position:relative;display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px 6px 6px;border-radius:10px;border:2px solid #0c0804;
  background:linear-gradient(100deg,#1f4a78 0%,#16365a 60%,#122a46 100%);box-shadow:inset 0 0 0 1px #6aa6e0,0 3px 0 #000a;color:#f2f6fa;min-width:0}
.ucard.foe{background:linear-gradient(100deg,#7a2418 0%,#5a1a12 60%,#44140e 100%);box-shadow:inset 0 0 0 1px #e8806a,0 3px 0 #000a}
.ucard.tile{background:linear-gradient(100deg,#4a3a22,#352a18);box-shadow:inset 0 0 0 1px #c8a46a,0 3px 0 #000a}
.ucard.cmp{grid-template-columns:52px minmax(0,1fr);padding:4px 8px 4px 4px}
.uc-pf{position:relative;width:60px;height:60px;border-radius:8px;border:2px solid #0c0804;background:radial-gradient(circle at 50% 35%,#cfe8f8,#7fb0d8);overflow:hidden;box-shadow:inset 0 0 0 2px #f0c048}
.foe .uc-pf{background:radial-gradient(circle at 50% 35%,#f8d8cc,#d88a78)}
.tile .uc-pf{background:#2a2014}
.cmp .uc-pf{width:48px;height:48px}
.uc-pf canvas{width:60px!important;height:60px!important;image-rendering:pixelated;display:block}
.cmp .uc-pf canvas{width:48px!important;height:48px!important}
.uc-lv{position:absolute;left:0;bottom:0;font-family:var(--f-d);font-size:11px;background:#0c0804cc;color:#ffd23c;padding:0 4px;border-top-right-radius:5px}
.uc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.uc-name{display:flex;align-items:center;gap:6px;min-width:0}
.uc-name b{font-family:var(--f-d);font-weight:400;font-size:19px;letter-spacing:.02em;text-shadow:0 2px 0 #0008;white-space:nowrap}
.uc-cls{display:inline-flex;align-items:center;gap:2px;font-family:var(--f-d);font-size:12px;background:#0006;border-radius:10px;padding:1px 7px 1px 2px;white-space:nowrap}
.uc-hp,.uc-mp{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:5px;align-items:center}
.uc-hp .lb,.uc-mp .lb{font-family:var(--f-d);font-size:11px;color:#9fd8ff}.foe .uc-hp .lb{color:#ffc0b0}
.uc-hp .bar{height:10px;background:#0c0804;border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
.uc-hp .bar i{display:block;height:100%;background:linear-gradient(#9cffb8,#2fc06a 55%,#1f9a52);border-radius:5px}
.uc-hp.mid .bar i{background:linear-gradient(#fff0a0,#f0b030)}.uc-hp.low .bar i{background:linear-gradient(#ffb0a0,#e8402e)}
.foe .uc-hp .bar i{background:linear-gradient(#ffc8a0,#f06a3a 55%,#c8402a)}
.uc-hp b{font-family:var(--f-d);font-weight:400;font-size:17px;font-variant-numeric:tabular-nums}.uc-hp b small{font-size:11px;opacity:.75}
.uc-mp .bar{height:5px;background:#0c0804;border-radius:3px;overflow:hidden}.uc-mp .bar i{display:block;height:100%;background:linear-gradient(#c0dcff,#4a7ae0)}
.uc-mp b{font-family:var(--f-d);font-weight:400;font-size:12px}
.uc-st{display:flex;gap:4px;flex-wrap:wrap}
.uc-st span{display:inline-flex;align-items:center;gap:2px;background:#0005;border-radius:6px;padding:1px 6px 1px 2px;font-size:11px}
.uc-st b{font-family:var(--f-d);font-weight:400;font-size:15px;font-variant-numeric:tabular-nums}
.uc-tags{display:flex;gap:4px;flex-wrap:wrap}
.tchip{display:inline-flex;align-items:center;gap:3px;background:#2a2014e6;border:1px solid #c8a46a;border-radius:6px;padding:0 6px 0 2px;font-size:11px;color:#f6e4bc}
.tchip b{font-family:var(--f-d);font-weight:400;font-size:13px}.tchip u{text-decoration:none;color:#6a5a40}.tchip i{font-style:normal;color:#ffd23c;font-size:10px;letter-spacing:-1px}.tchip em{font-style:normal;color:#9cffb8}
.stt{font-family:var(--f-d);font-size:12px;border-radius:6px;padding:1px 6px;background:#0006}
.stt.cf{background:#7a4ab8}.stt.tn{background:#b8862a}.stt.bf{background:#c8402a}.stt.dn{background:#555}.stt.sk{background:#2f8a74}
.uc-note{font-size:12px;color:#f6e4bccc}
.drow{display:flex;gap:6px;align-items:stretch}.drow .ucard{flex:1}
.dq{align-self:center;font-family:var(--f-d);font-size:17px;color:#fff;text-shadow:0 2px 0 #000;white-space:nowrap;padding:0 4px}
.cmds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cmds.v{display:flex;flex-direction:column;gap:6px}.cmds.v .cmd{flex:1;min-width:76px}
.cmds.two{grid-template-columns:2fr 1fr}
.cmd{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 6px;border-radius:12px;border:2px solid #0c0804;color:#fff;
  background:linear-gradient(#5a6a80,#3a4658);box-shadow:inset 0 2px 0 #ffffff40,inset 0 -3px 0 #0004,0 3px 0 #000a;transition:transform .06s}
.cmd:active:not([disabled]){transform:translateY(2px)}
.cmd b{font-family:var(--f-d);font-weight:400;font-size:15px;text-shadow:0 2px 0 #0008}.cmd small{font-size:10.5px;opacity:.85;white-space:nowrap}
.cmd-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#ffffff30,#0003);border:2px solid #0006}
.cmd-ic canvas{image-rendering:pixelated}
.cmd.red{background:linear-gradient(#e8604a,#b83a2a)}.cmd.blu{background:linear-gradient(#4a8ad8,#2a5ab0)}.cmd.grn{background:linear-gradient(#4ab88a,#2a8a62)}.cmd.gh{background:linear-gradient(#8a7a64,#5e5040)}
.cmd.big{flex-direction:row;justify-content:center;gap:8px}.cmd.big b{font-size:19px}
.cmd[disabled]{filter:grayscale(.85) brightness(.6);cursor:not-allowed}
.dhint{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#f6e4bc;text-shadow:0 1px 0 #000;padding:0 2px}.dhint.sm{font-size:11.5px;opacity:.85}
.dhead{display:flex;align-items:center;gap:6px;color:#fff;font-family:var(--f-d);font-size:17px;text-shadow:0 2px 0 #000}
.dhead b{font-weight:400}.mpchip{font-size:12px;background:#2a5ab0;border:1px solid #0c0804;border-radius:8px;padding:1px 8px}
.xb{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-family:var(--f-d);font-size:14px;color:#fff;background:#5e5040;border:2px solid #0c0804;border-radius:10px;padding:3px 10px 3px 4px;box-shadow:0 2px 0 #000a}
.slist{display:flex;flex-direction:column;gap:5px;max-height:190px;overflow:auto}
.slist.grid{display:grid;grid-template-columns:repeat(2,1fr)}
.sk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;padding:5px 8px 5px 5px;border-radius:10px;border:2px solid #0c0804;background:linear-gradient(100deg,#25324a,#1a2436);color:#fff;box-shadow:0 2px 0 #000a}
.sk[disabled]{opacity:.45}
.sk-ic{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:#c8402a}.sk-ic.ally{background:#2f8a74}.sk-ic.lord{background:#b8862a}
.sk-t{display:flex;flex-direction:column;min-width:0}.sk-t b{font-family:var(--f-d);font-weight:400;font-size:16px}.sk-t small{font-size:11.5px;color:#d8e4f0;line-height:1.35}
.sk-c{font-size:10px;color:#9fd8ff;text-align:center}.sk-c b{display:block;font-family:var(--f-d);font-weight:400;font-size:18px;color:#fff}
.it{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;align-items:center;text-align:left;padding:5px;border-radius:10px;border:2px solid #0c0804;background:linear-gradient(100deg,#4a3a22,#352a18);color:#fff;box-shadow:0 2px 0 #000a}
.it-ic{grid-row:span 2;position:relative;width:42px;height:42px;border-radius:8px;background:#f2dcaa;border:2px solid #0c0804;display:grid;place-items:center}
.it-ic em{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-family:var(--f-d);font-size:12px;background:#c8402a;border:1px solid #0c0804;border-radius:8px;padding:0 4px}
.it b{font-family:var(--f-d);font-weight:400;font-size:15px}.it small{font-size:10.5px;color:#f6e4bccc;line-height:1.3}
.bbar{display:flex;align-items:center;gap:6px}
.roster{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;padding:3px 2px;scrollbar-width:none}
.rc{flex:none;position:relative;width:40px;height:44px;padding:0;border-radius:8px;border:2px solid #0c0804;background:radial-gradient(circle at 50% 35%,#cfe8f8,#7fb0d8);box-shadow:inset 0 0 0 2px #6aa6e0,0 2px 0 #000a;overflow:hidden}
.rc canvas{width:36px!important;height:36px!important;image-rendering:pixelated;display:block;margin:0 auto}
.rc.on{box-shadow:inset 0 0 0 2px #ffd23c,0 0 0 2px #ffd23c;transform:translateY(-2px)}
.rc.done{filter:grayscale(1) brightness(.75)}.rc.out{filter:grayscale(1) brightness(.4)}
.rc-hp{position:absolute;left:3px;right:3px;bottom:2px;height:4px;background:#0c0804;border-radius:2px;overflow:hidden}
.rc-hp em{display:block;height:100%;background:#3ad07a}.rc-hp.mid em{background:#f0b030}.rc-hp.low em{background:#e8402e}
.ib{flex:none;display:flex;flex-direction:column;align-items:center;gap:0;width:42px;padding:3px 0;border-radius:10px;border:2px solid #0c0804;background:linear-gradient(#5a6a80,#3a4658);color:#fff;font-family:var(--f-d);font-size:11px;box-shadow:0 2px 0 #000a}
.ib.on{background:linear-gradient(#f0a040,#c86a20)}
.endb{flex:none;display:flex;align-items:center;gap:4px;padding:4px 10px 4px 4px;border-radius:12px;border:2px solid #0c0804;background:linear-gradient(#4ab88a,#2a8a62);color:#fff;box-shadow:inset 0 2px 0 #ffffff40,0 3px 0 #000a}
.endb{padding-right:8px}.endb span{display:flex;flex-direction:column;line-height:1.1;text-align:left}.endb b{font-family:var(--f-d);font-weight:400;font-size:17px;text-shadow:0 2px 0 #0008}.endb small{font-size:10.5px;opacity:.9}
.endb[disabled]{filter:grayscale(.8) brightness(.6)}
.dbusy{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;font-family:var(--f-d);font-size:20px;color:#fff;text-shadow:0 2px 0 #000}
.spin{width:16px;height:16px;border:3px solid #ffffff40;border-top-color:#ffd23c;border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.ico{image-rendering:pixelated}
#talk{z-index:9}


/* ----- v0.5 장수 목록 · 날씨 · 지형 공격 ----- */
.cmds{grid-template-columns:repeat(3,1fr)}
.cmd{flex-direction:row;justify-content:flex-start;gap:6px;padding:5px 8px 5px 5px;text-align:left}
.cmd b{font-size:15px;display:block;white-space:nowrap}.cmd small{display:block;font-size:11.5px}
.cmd .cmd-ic{flex:none;width:42px;height:42px}
.cmd > b,.cmd > small{grid-column:2}
.cmd{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:6px}
.cmd .cmd-ic{grid-row:span 2}
.cmds.v .cmd{min-width:96px}
.bbar{display:flex;align-items:center;gap:8px}
.bb-sp{flex:1}
.ib{flex-direction:row;width:auto;gap:4px;padding:4px 10px 4px 4px;font-size:13px}
.ib span{white-space:nowrap}
.roster{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 2px;scrollbar-width:none;flex:none}
.roster::-webkit-scrollbar{display:none}
.rc{flex:none;width:68px;height:auto;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 3px 4px;border-radius:10px;background:linear-gradient(#24466e,#16304e);box-shadow:inset 0 0 0 1px #6aa6e0,0 2px 0 #000a;color:#fff;overflow:visible}
.rc-pf{position:relative;width:48px;height:48px;border-radius:7px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#cfe8f8,#7fb0d8);border:2px solid #0c0804}
.rc-pf canvas{width:48px!important;height:48px!important}
.rc-done{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-family:var(--f-d);font-size:11px;background:#000a;color:#fff;text-align:center}
.rc-nm{font-family:var(--f-d);font-weight:400;font-size:15px;line-height:1.1;text-shadow:0 2px 0 #000}
.rc-hpn{display:flex;align-items:center;gap:3px;width:100%}
.rc-hp{position:static;flex:1;height:6px;background:#0c0804;border-radius:3px;overflow:hidden;display:block}
.rc-hpn small{font-family:var(--f-d);font-size:13px;font-variant-numeric:tabular-nums}
.rc.on{box-shadow:inset 0 0 0 2px #ffd23c,0 0 0 2px #ffd23c}
.rc.done{filter:none;opacity:.7}.rc.done .rc-pf{filter:grayscale(1)}
.uc-name b{font-size:20px}.uc-cls{font-size:13px}.uc-st span{font-size:12px}.uc-st b{font-size:16px}.tchip{font-size:12px}.tchip b{font-size:14px}.stt{font-size:13px}
.dhint{font-size:13.5px}
#b-weather{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px}
#b-weather small{font-size:11px;color:#c8b898;margin-left:2px}
.hud{flex-wrap:wrap;row-gap:4px}
.warnbox{background:#0c2a44d8;border:2px solid #4a8ad8;border-radius:8px;color:#e8f4ff;padding:8px 10px;font-size:13px;line-height:1.55}
.warnbox b{font-family:var(--f-d);font-weight:400;font-size:16px;color:#ffd23c}.warnbox b.bad{color:#ff8a7a}
.tilefc{display:flex;gap:10px;align-items:center;background:#ffe2da;border:2px solid #a8382c;border-radius:6px;padding:8px}
.tilefc b{display:block;font-family:var(--f-d);font-weight:400;font-size:17px}.tilefc span{font-size:12.5px;line-height:1.5;color:var(--ink)}


/* ----- v0.5.1 장수 목록: 5열 그리드, 넘치면 위아래로 스크롤 ----- */
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow-x:hidden;overflow-y:auto;max-height:118px;padding:4px 4px 4px 2px;
  scroll-snap-type:y proximity;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#ffd23c80 transparent}
.roster::-webkit-scrollbar{display:block;width:4px}.roster::-webkit-scrollbar-thumb{background:#ffd23c90;border-radius:2px}
.rc{width:auto;min-width:0;scroll-snap-align:start}
.rc-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwrap{position:relative}
.rmore{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-family:var(--f-d);font-size:12px;color:#ffd23c;background:#0c0804d8;border:1px solid #ffd23c80;border-radius:10px;padding:0 10px;white-space:nowrap;pointer-events:none;animation:bob .9s infinite steps(2)}
.rmore[hidden]{display:none}


.ptree{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:6px 0 2px;padding:6px 4px 4px;background:linear-gradient(#e9f4fb,#f3ecd6);border:2px solid var(--paper-d);border-radius:8px}
.ptree .pt{display:flex;flex-direction:column;align-items:center;min-width:0;flex:1;padding:2px 0;border-radius:6px}
.ptree .pt canvas{image-rendering:pixelated}
.ptree .pt b{font:13px var(--f-d);color:var(--ink);white-space:nowrap}
.ptree .pt small{font-size:11px;color:var(--ink-l)}
.ptree .pt.cur{background:#fff6d0;box-shadow:inset 0 0 0 2px #e0a830}
.ptree .pt.lock canvas{opacity:.78}
.ptree .pt.lock b{color:var(--ink-l)}
.ptree .pt-ar{font-style:normal;color:#b8862a;font-size:13px;align-self:center;margin-bottom:18px}
.promobtn{grid-column:1/-1;width:100%;margin:4px 0 2px;animation:pglow 1.4s ease-in-out infinite}
@keyframes pglow{50%{filter:brightness(1.15);box-shadow:0 0 0 3px #ffe08a}}
.tsk{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin:6px 0}
.tsk>div{display:flex;align-items:center;gap:6px;background:#fff8e6;border:2px solid var(--paper-d);border-radius:8px;padding:4px 6px}
.tsk canvas{width:30px;height:30px;image-rendering:pixelated;flex:none}
.tsk b{display:block;font:13px var(--f-d);white-space:nowrap}.tsk span{white-space:nowrap}.tsk span{font-size:12px;color:var(--ink-l)}.tsk em{font-style:normal;color:#2f8a3a;font-weight:700}
.cpas{display:flex;align-items:center;gap:4px;font-size:12px;color:#6a4a2c;margin:4px 0 2px}.cpas canvas{flex:none;image-rendering:pixelated}
.sktree{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0}
.skn{display:inline-flex;align-items:center;gap:3px;padding:2px 6px 2px 3px;border-radius:12px;background:#e8dcc0;border:1px solid #c8b490;color:#9a8a70;font-size:12px}
.skn canvas{image-rendering:pixelated;opacity:.45}.skn b{font-weight:600}.skn i{font-style:normal;font-size:10px;opacity:.8}
.skn.got{background:linear-gradient(#fff4cc,#f6e2a8);border-color:#d8a840;color:#4a2c14}.skn.got canvas{opacity:1}
.segc{display:flex;gap:4px;margin:2px 0 6px;overflow-x:auto}.segc button{flex:1;min-width:0;padding:7px 4px;border-radius:8px;border:2px solid var(--paper-d);background:#fff6dc;font:14px var(--f-d);color:var(--ink-l)}
.segc button.on{background:linear-gradient(#ffe08a,#f0b030);color:var(--ink);border-color:#b8862a}
.irow .who{font-size:11px;color:#8a6a48;margin-top:1px}
.depl{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.dp{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;border:2px solid var(--paper-d);background:#f2e8d0;opacity:.7}
.dp canvas{width:40px;height:40px;image-rendering:pixelated}.dp b{font:13px var(--f-d)}.dp small{font-size:10px;color:#7a5a3c}
.dp.on{opacity:1;background:linear-gradient(#fff8e0,#ffe8b0);border-color:#2f8a7a;box-shadow:0 0 0 2px #2f8a7a55}
.dp i{position:absolute;top:2px;right:2px;font-style:normal;font-size:10px;background:#2f8a7a;color:#fff;border-radius:6px;padding:0 4px}
.dp:disabled{opacity:1}
.trit{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto;margin:4px 0}
.trr{display:grid;grid-template-columns:86px minmax(0,1fr);gap:6px;align-items:center;background:#fff6dc;border:2px solid var(--paper-d);border-radius:8px;padding:3px 6px}
.trc{display:flex;flex-direction:column;align-items:center}.trc canvas{image-rendering:pixelated}.trc b{font:14px var(--f-d)}.trc small{font-size:10px;color:#7a5a3c;white-space:nowrap}
.trx{display:flex;flex-direction:column;gap:2px;font-size:12px;min-width:0}.trx .up{color:#2f7a3a;font-weight:700}.trx .dn{color:#b0402a;font-weight:700}.trx i{font-style:normal;color:#6a5a48;font-size:11px}
.todc{display:inline-flex;align-items:center;gap:2px;font-style:normal;font:12px var(--f-d);margin-left:4px;padding:0 4px;border-radius:6px;background:#1e2a4a;color:#e8f0ff}
.stt.ex{background:#f4ead0!important;color:#6a4a2c!important}
.uc-st b.up{color:#2f9a4a}.uc-st b.dn{color:#c8402a}
[hidden]{display:none!important}
/* =========================================================
   v0.6 솔바람 농장 재질 — 나무판 · 양피지 · 해바라기 버튼
   ========================================================= */
:root{
  --wood:#8a5524; --wood-d:#5c3415; --wood-dd:#2e170a; --wood-l:#b97a3a;
  --paper:#f8e3b0; --paper-l:#fdf0cf; --paper-d:#d9b273; --ink:#3a2210; --ink-l:#7a5430;
  --sun:#f7c14a; --sun-d:#c9852a; --leaf:#5aa03c; --berry:#d9412b; --sky:#6fb3e0;
  --f-d:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --f-b:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --f-p:'Silkscreen','Jua',ui-monospace,monospace;
}
body{background:#1a0e06;font-family:var(--f-b)}
#app{background:var(--wood-d)}
.planks{background:repeating-linear-gradient(0deg,#7d4a1f 0 9px,#6a3d18 9px 10px),#7d4a1f}
.card{background:linear-gradient(var(--paper-l),var(--paper));border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 0 0 2px #f0c47c,inset 0 0 0 4px #b8692a,0 3px 0 rgba(0,0,0,.35);color:var(--ink)}
.btn{font-family:var(--f-d);font-size:15px;color:var(--ink);background:linear-gradient(#ffd66e,var(--sun));border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 var(--sun-d);padding:6px 12px;white-space:nowrap;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.alt{background:#fff6dc;box-shadow:inset 0 -3px 0 var(--paper-d)}
.btn.grn{background:linear-gradient(#b4ec8a,#8fd06a);box-shadow:inset 0 -3px 0 #5a9a3a}
.btn.red{background:linear-gradient(#f4a088,#e06a4a);color:#fff;text-shadow:0 1px 0 #8a2a14;box-shadow:inset 0 -3px 0 #b8402a}
.btn.big{font-size:20px;padding:11px;box-shadow:inset 0 -4px 0 var(--sun-d),0 4px 0 rgba(0,0,0,.4)}
.btn.big.alt{box-shadow:inset 0 -4px 0 var(--paper-d),0 4px 0 rgba(0,0,0,.4)}
.btn.sm{font-size:13px;padding:4px 10px}
.btn:disabled{opacity:.45;cursor:default;transform:none}
/* 기존 버튼도 같은 재질로 */
.pbtn{font-family:var(--f-d);color:var(--ink);background:linear-gradient(#ffd66e,var(--sun));border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 var(--sun-d),0 2px 0 rgba(0,0,0,.3);text-shadow:none}
.pbtn:active:not([disabled]){transform:translateY(1px);box-shadow:inset 0 -2px 0 var(--sun-d)}
.pbtn.teal{background:linear-gradient(#b4ec8a,#8fd06a);color:var(--ink);text-shadow:none;box-shadow:inset 0 -3px 0 #5a9a3a,0 2px 0 rgba(0,0,0,.3)}
.pbtn.red{background:linear-gradient(#f4a088,#e06a4a);color:#fff;text-shadow:0 1px 0 #8a2a14;box-shadow:inset 0 -3px 0 #b8402a,0 2px 0 rgba(0,0,0,.3)}
.pbtn.ghost{background:#fff6dc;box-shadow:inset 0 -3px 0 var(--paper-d),0 2px 0 rgba(0,0,0,.3)}
.pbtn[disabled]{opacity:.45;filter:none}
.pnl{background:linear-gradient(var(--paper-l),var(--paper));border:3px solid var(--wood-dd);border-radius:8px;box-shadow:inset 0 0 0 2px #f0c47c,inset 0 0 0 4px #b8692a,0 4px 0 rgba(0,0,0,.35)}
.toast{background:var(--paper);color:var(--ink);font-family:var(--f-d);border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 0 0 2px #f0c47c,0 4px 0 rgba(0,0,0,.3);top:calc(96px + env(safe-area-inset-top,0px))}

/* ----- 타이틀 ----- */
#scr-title{background:#3a5a2a}
#t-cv{position:absolute;inset:0;width:100%;height:100%}
.t-shade{position:absolute;inset:0;background:linear-gradient(rgba(120,190,240,.45),rgba(170,220,255,.1) 34%,rgba(0,0,0,0) 50%,rgba(30,15,5,.78));pointer-events:none}
.t-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px));text-align:center;overflow-y:auto}
.logo{display:flex;flex-direction:column;align-items:center;line-height:.95;margin-top:auto;animation:lbob 3.2s ease-in-out infinite}
.logo .l0{font:15px var(--f-d);letter-spacing:.6em;margin-left:.6em;color:#fff4d8;text-shadow:0 2px 0 #5c2e10,2px 0 0 #5c2e10,-2px 0 0 #5c2e10,0 -2px 0 #5c2e10;margin-bottom:4px}
.logo .l1{font:clamp(56px,17vw,74px) var(--f-d);color:#ffd36a;letter-spacing:.04em;text-shadow:3px 0 0 #5c2e10,-3px 0 0 #5c2e10,0 -3px 0 #5c2e10,0 3px 0 #5c2e10,3px 3px 0 #5c2e10,-3px 3px 0 #5c2e10,0 7px 0 #b4622a,3px 7px 0 #5c2e10,-3px 7px 0 #5c2e10,0 10px 0 #5c2e10,0 16px 14px rgba(0,0,0,.35)}
.logo .l2{font:clamp(40px,12vw,52px) var(--f-d);color:#ff9a7a;margin-top:2px;text-shadow:3px 0 0 #5a1408,-3px 0 0 #5a1408,0 -3px 0 #5a1408,0 3px 0 #5a1408,0 6px 0 #a8382c,0 9px 0 #5a1408,0 14px 12px rgba(0,0,0,.3)}
@keyframes lbob{50%{transform:translateY(-6px)}}
.ttag{margin:6px 0 0;color:#fff;font:16px var(--f-d);text-shadow:0 2px 0 #3a2210,1px 0 0 #3a2210,-1px 0 0 #3a2210}
.tinfo,.tintro{width:min(360px,100%);padding:10px 14px;background:rgba(24,12,4,.46);border:2px solid rgba(255,226,170,.38);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;text-shadow:0 1px 0 #3a2210}
.tinfo .t1{margin:0;font:19px var(--f-d);color:#ffe9a8}.tinfo .t2{margin:3px 0 0;font:14px var(--f-d)}.tinfo .t3{margin:3px 0 0;font:14px var(--f-d);color:#c8f0a8}
.tinfo .tdesc{margin:8px 0 0;font:13.5px/1.6 var(--f-b);color:#fff6e2;border-top:1px dashed rgba(255,226,170,.4);padding-top:8px;text-wrap:balance}
.tih{margin:0 0 6px;font:15px var(--f-d);color:#ffe9a8;letter-spacing:.08em}
#t-guide{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
#t-guide>span{display:flex;align-items:center;gap:7px;text-align:left;min-width:0}
#t-guide canvas{width:30px;height:30px;image-rendering:pixelated;flex:none;filter:drop-shadow(0 2px 0 rgba(40,20,8,.6))}
#t-guide b{display:block;font:14.5px var(--f-d);font-weight:400;color:#ffe9a8}#t-guide i{display:block;font:12px/1.35 var(--f-b);font-style:normal;color:#fff6e2}
.tbtns{display:flex;flex-direction:column;gap:8px;width:min(290px,100%);margin-top:4px}
.tsub{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tsub .btn{font-size:14px;padding:7px}
.tver{margin:2px 0 0;color:rgba(255,255,255,.85);font-size:12px;text-shadow:0 1px 0 #000}

/* ----- 시트형 모달 ----- */
.modal{align-items:flex-end;padding:0;background:rgba(20,12,5,.55)}
.sheet{position:relative;width:100%;max-height:86%;display:flex;flex-direction:column;background:linear-gradient(var(--paper-l),var(--paper));border:4px solid var(--wood-dd);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 0 0 0 3px #f0c47c,inset 0 0 0 6px #b8692a;animation:sup .22s ease-out}
@keyframes sup{from{transform:translateY(30px);opacity:.4}}
.mbox{width:auto;box-sizing:border-box;overflow-x:hidden;background:none;border:0;box-shadow:none;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));max-height:none;overflow:auto;border-radius:0}
.x{position:absolute;right:14px;top:12px;z-index:2;width:36px;height:36px;border-radius:6px;border:3px solid var(--wood-dd);background:#e88a6a;color:#fff;font-size:16px;box-shadow:inset 0 -3px 0 #b8402a;cursor:pointer}
.x[hidden]{display:none}
.m-eyebrow{font:13px var(--f-d);color:var(--wood);letter-spacing:.04em;padding-right:44px}
.m-h{font:22px var(--f-d);color:var(--ink);padding-right:44px;padding-bottom:10px;border-bottom:2px dashed var(--paper-d);margin-bottom:2px}
.goal{background:#eaf7dc;border-color:#5a9a3a}.goal.lose{background:#fbe2d8;border-color:#c8583a}
.result{font-family:var(--f-d)}
.rstats div{background:#fff6dc;border:2px solid var(--paper-d)}
.lvr{background:#fff6dc;border:2px solid var(--paper-d)}.lvr.up{background:#e4f6d4;border-color:#8fd06a}
.optrow{font-family:var(--f-d);padding:8px 0;border-bottom:1px solid var(--paper-d);gap:10px}.optrow>div{flex:1;min-width:0}.optrow .pbtn{flex:none}
.loglist{background:#fff6dc;border-color:var(--paper-d)}

/* ----- 전투 상단 HUD ----- */
.hud.planks{display:flex;gap:6px;align-items:stretch;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;border-bottom:3px solid var(--wood-dd);box-shadow:inset 0 2px 0 #a8692e;flex-wrap:nowrap}
.hc1{display:flex;flex-direction:column;justify-content:center;padding:3px 9px;min-width:0;flex:1}
.hc-ch{font:14px var(--f-d);color:var(--ink-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-turn{display:flex;align-items:baseline;gap:5px}.hc-turn small{font:12px var(--f-d);color:var(--ink-l)}.hc-turn b{font:17px var(--f-p);font-weight:400;font-variant-numeric:tabular-nums}
.hc2{display:flex;flex-direction:column;justify-content:center;padding:3px 9px;min-width:0;flex:1.25}
.hc2 .wx1{display:flex;align-items:center;gap:4px;font:14px var(--f-d);white-space:nowrap}
.hc2 .wx1 canvas{image-rendering:pixelated;flex:none}
.hc2 .wx2{font:11.5px var(--f-b);color:var(--ink-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtns{display:flex;flex-direction:column;gap:5px}
.hbtn{font:14px var(--f-d);background:linear-gradient(#ffd66e,var(--sun));border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 var(--sun-d),0 2px 0 rgba(0,0,0,.35);padding:2px 10px;flex:1;color:var(--ink);cursor:pointer}
.goalbar{display:flex;gap:8px;align-items:center;width:100%;padding:6px 12px;background:rgba(30,15,6,.92);color:#fbe3b4;font:13px var(--f-b);line-height:1.35;border:0;border-bottom:2px solid #000;text-align:left;cursor:pointer;z-index:3}
.goalbar b{font:12px var(--f-d);font-weight:400;background:var(--leaf);color:#fff;border-radius:4px;padding:1px 6px;flex:none;box-shadow:0 2px 0 #2f6a24}
.goalbar span{flex:1;min-width:0}
.goalbar::after{content:'›';font:18px var(--f-d);color:#f5c76a;flex:none}
.banner span{font-family:var(--f-d)}

/* ----- 전투 하단 HUD: 나무판 + 양피지 ----- */
#dock{background:linear-gradient(rgba(30,15,6,0),rgba(30,15,6,.55) 22px,rgba(30,15,6,0) 23px),transparent;padding:20px 8px 0}
#dock>.dpanel{margin:0 -8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:repeating-linear-gradient(0deg,#7d4a1f 0 9px,#6a3d18 9px 10px),#7d4a1f;border-top:3px solid var(--wood-dd);box-shadow:inset 0 2px 0 #a8692e;display:flex;flex-direction:column;gap:7px}
.ucard,.ucard.foe,.ucard.tile{background:linear-gradient(var(--paper-l),var(--paper));color:var(--ink);border:3px solid var(--wood-dd);border-radius:7px;box-shadow:inset 0 0 0 2px #f0c47c,inset 0 0 0 4px #b8692a,0 3px 0 rgba(0,0,0,.35);padding:7px 9px 7px 7px}
.uc-pf{border:3px solid var(--wood-dd);box-shadow:none;background:linear-gradient(#bfe3f4,#e2f2d0)}
.foe .uc-pf{background:linear-gradient(#f4c8bc,#f2e2c8)}
.uc-lv{background:var(--wood-dd);color:#ffd66e;font-family:var(--f-p);font-size:10px}
.uc-name b{color:var(--ink);text-shadow:none;font-size:19px}
.ucard.ally .uc-name b{color:#24506e}.ucard.foe .uc-name b{color:#a8302a}
.uc-cls{background:#fff6dc;border:2px solid var(--paper-d);color:var(--ink-l)}
.uc-hp .lb,.uc-mp .lb{color:var(--ink-l);font-family:var(--f-p);font-size:9px}.foe .uc-hp .lb{color:#a8302a}
.uc-hp .bar{height:11px;background:#3b2414;border:2px solid var(--wood-dd);box-shadow:none;border-radius:3px}
.uc-hp .bar i{background:linear-gradient(#c8f08a 0 30%,#6fc040 30%,#4f9a2c);border-radius:0}
.uc-hp.mid .bar i{background:linear-gradient(#ffe8a0 0 30%,#f0b030 30%,#c88a20)}.uc-hp.low .bar i,.foe .uc-hp .bar i{background:linear-gradient(#ffb08a 0 30%,#e0603a 30%,#b8402a)}
.uc-hp b{font-family:var(--f-p);font-size:14px}.uc-hp b small{font-size:10px}
.uc-mp .bar{background:#3b2414;border:1px solid var(--wood-dd)}.uc-mp .bar i{background:linear-gradient(#bfe0ff 0 30%,#4f86c6 30%)}.uc-mp b{font-family:var(--f-p);font-size:11px}
.uc-st span{background:#fff6dc;border:2px solid var(--paper-d);border-radius:5px}.uc-st b{font-family:var(--f-p);font-size:13px;color:var(--ink)}
.tchip{background:#fff6dc;border:2px solid var(--paper-d);color:var(--ink)}.tchip u{color:#d8c49a}.tchip i{color:#e0a020}.tchip em{color:#3a8a2a}
.stt{color:#fff}.stt.sk{background:#5a8a3a}
.uc-note{color:var(--ink-l)}
.dq{color:#fbe3b4;text-shadow:0 2px 0 var(--wood-dd);font-family:var(--f-d)}
.dhint{color:#fbe3b4;text-shadow:0 1px 0 var(--wood-dd)}
.dhead{color:#fbe3b4;font-family:var(--f-d);text-shadow:0 2px 0 var(--wood-dd)}
.mpchip{background:#4f86c6;color:#fff;border:2px solid var(--wood-dd)}
.xb{background:#fff6dc;color:var(--ink);border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 var(--paper-d);font-family:var(--f-d)}
/* 명령 버튼 = 솔바람 도구 슬롯 */
.cmd,.cmd.red,.cmd.blu,.cmd.grn,.cmd.gh{background:radial-gradient(#fff2cc,#efcf8e);color:var(--ink);border:3px solid #6b3a14;border-radius:6px;box-shadow:inset 0 0 0 2px #fbe6b6,inset 0 -3px 0 2px #d6a45c,0 2px 0 rgba(0,0,0,.35);text-shadow:none}
.cmd b{color:var(--ink);text-shadow:none;font-family:var(--f-d)}.cmd small{color:var(--ink-l);opacity:1}
.cmd-ic{background:#fff6dc;border:2px solid var(--paper-d);border-radius:8px}
.cmd.red .cmd-ic{background:#fbd4c4;border-color:#e0806a}.cmd.blu .cmd-ic{background:#d4e8fb;border-color:#7aa8d8}.cmd.grn .cmd-ic{background:#dcf4c8;border-color:#8fd06a}
.cmd.red.big{background:linear-gradient(#f4a088,#e06a4a);border-color:var(--wood-dd);box-shadow:inset 0 -3px 0 #b8402a,0 2px 0 rgba(0,0,0,.35)}.cmd.red.big b{color:#fff;text-shadow:0 1px 0 #8a2a14}
.cmd.blu.big{background:linear-gradient(#a8d0f4,#6aa0d8);border-color:var(--wood-dd);box-shadow:inset 0 -3px 0 #3a6aa8,0 2px 0 rgba(0,0,0,.35)}
.cmd:active:not([disabled]){transform:translateY(-3px);border-color:var(--berry);box-shadow:inset 0 0 0 2px #fff6d6,0 0 0 2px #ffd66e,0 4px 0 rgba(0,0,0,.35)}
.cmd[disabled]{filter:grayscale(.6);opacity:.5}
.sk{background:radial-gradient(#fff2cc,#efcf8e);color:var(--ink);border:3px solid #6b3a14;border-radius:6px;box-shadow:inset 0 0 0 2px #fbe6b6,0 2px 0 rgba(0,0,0,.3)}
.sk-t b{color:var(--ink)}.sk-t small{color:var(--ink-l)}.sk-c{color:var(--ink-l)}.sk-c b{color:#2a5a9a;font-family:var(--f-p);font-size:16px}
.sk-ic{border:2px solid var(--wood-dd)}
.it{background:radial-gradient(#fff2cc,#efcf8e);color:var(--ink);border:3px solid #6b3a14;border-radius:6px;box-shadow:inset 0 0 0 2px #fbe6b6,0 2px 0 rgba(0,0,0,.3)}
.it small{color:var(--ink-l)}.it-ic{background:#fff6dc;border-color:var(--paper-d)}.it-ic em{font-family:var(--f-p);font-size:10px;background:var(--berry);border:2px solid var(--wood-dd)}
.warnbox{background:linear-gradient(var(--paper-l),var(--paper));color:var(--ink);border:3px solid var(--wood-dd);box-shadow:inset 0 0 0 2px #f0c47c}
.warnbox b{color:#2a5a9a}.warnbox b.bad{color:var(--berry)}
.dbusy{color:#fbe3b4;text-shadow:0 2px 0 var(--wood-dd);height:52px}
.ib{background:#fff6dc;color:var(--ink);border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 var(--paper-d),0 2px 0 rgba(0,0,0,.3);font-family:var(--f-d)}
.ib.on{background:linear-gradient(#ffc08a,#f08a4a);box-shadow:inset 0 -3px 0 #c8602a}
.endb{background:linear-gradient(#b4ec8a,#8fd06a);color:var(--ink);border:3px solid var(--wood-dd);border-radius:6px;box-shadow:inset 0 -3px 0 #5a9a3a,0 2px 0 rgba(0,0,0,.35)}
.endb b{color:var(--ink);text-shadow:none;font-family:var(--f-d)}.endb small{color:#2f5a1e}
/* 장수 목록 = 도구 슬롯 */
.rc{background:radial-gradient(#fff2cc,#efcf8e);color:var(--ink);border:3px solid #6b3a14;border-radius:6px;box-shadow:inset 0 0 0 2px #fbe6b6,inset 0 -3px 0 2px #d6a45c}
.rc-pf{border:2px solid var(--wood-dd);border-radius:5px;background:linear-gradient(#bfe3f4,#e2f2d0)}
.rc-nm{color:var(--ink);text-shadow:none;font-family:var(--f-d)}
.rc-hp{background:#3b2414;border:1px solid var(--wood-dd);border-radius:2px}.rc-hp em{background:#6fc040}.rc-hp.mid em{background:#f0b030}.rc-hp.low em{background:#e0603a}
.rc-hpn small{font-family:var(--f-p);font-size:10px;color:var(--ink)}
.rc.on{border-color:var(--berry);box-shadow:inset 0 0 0 2px #fff6d6,0 0 0 2px #ffd66e;transform:translateY(-3px)}
.rc-done{background:rgba(46,23,10,.75);font-family:var(--f-d)}
.roster{background:rgba(30,15,6,.55);border:2px solid var(--wood-dd);border-radius:6px;padding:5px}
.rmore{background:var(--paper);color:var(--ink);border:2px solid var(--wood-dd)}
/* 예측창 */
#fco{background:linear-gradient(var(--paper-l),var(--paper))}
.fco{background:#e4f0fb;border:2px solid #4f86c6}.fco.foe{background:#fbe2d8;border-color:#c8583a}
.fco-vs{background:var(--wood);border-color:var(--wood-dd);font-family:var(--f-d)}
.fco-hp{font-family:var(--f-p)}.fco-hp b{font-size:17px}
.fco-rows b{font-family:var(--f-p);font-size:13px}
.tilefc{background:#fbe2d8;border-color:#c8583a}

/* ----- 이야기 대화창 ----- */
.dlg{background:linear-gradient(var(--paper-l),var(--paper));border:4px solid var(--wood-dd);border-radius:8px;box-shadow:inset 0 0 0 3px #f0c47c,inset 0 0 0 6px #b8692a,0 6px 0 rgba(0,0,0,.35);padding:12px 14px 16px}
.dlg-pf{background:linear-gradient(#bfe3f4,#e2f2d0);border:3px solid var(--wood-dd);box-shadow:none}
.dlg-pf.foe{background:linear-gradient(#f4c8bc,#f2e2c8)}.dlg-pf.narr{background:linear-gradient(#e8d8b0,#d8c090)}
.dlg-name,.dlg-name.foe{background:none;border:0;box-shadow:none;padding:0;color:var(--wood);font:17px var(--f-d)}
.dlg-name.foe{color:#a8302a}
.dlg-txt{font-size:15.5px;line-height:1.6}
.dlg-next{border-top-color:var(--wood)}
.st-cap .place,.cp-title .place{background:rgba(20,10,4,.85);color:#fbe3b4;border:2px solid var(--wood);font-family:var(--f-d)}
.st-cap .chap,.cp-title h2{font-family:var(--f-d)}
#st-choices .pbtn{background:#fff6dc;box-shadow:inset 0 -3px 0 var(--paper-d),0 2px 0 rgba(0,0,0,.3);font-family:var(--f-b);font-weight:700}
.st-stage::before,.st-stage::after{content:"";position:absolute;left:0;right:0;height:5%;background:#000;z-index:1}
.st-stage::before{top:0}.st-stage::after{bottom:0}

/* ----- 진영 ----- */
.tabs{background:var(--wood-d);gap:6px;padding:8px 10px 0}
.tabs button{font-family:var(--f-d);font-size:15px;background:#fff6dc;border:3px solid var(--wood-dd);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:none;color:var(--ink)}
.tabs button.on{background:var(--wood);color:#fbe3b4}
.cp-body{background:linear-gradient(var(--paper-l),var(--paper))}
.hcard,.slot,.irow{background:#fff6dc;border:2px solid var(--paper-d);border-radius:6px;box-shadow:none}
.slot.on{border-color:var(--berry);background:#fff}
.icobox{background:radial-gradient(#fff2cc,#efcf8e);border:3px solid #6b3a14;border-radius:4px}
.hname .cls,.dk-name .cls{background:var(--wood);font-family:var(--f-d)}
.tag{font-family:var(--f-d)}
.sec{font-family:var(--f-d);color:var(--wood-d)}
.s5 div{background:#fff;border:1px solid var(--paper-d)}
.s5 b{font-family:var(--f-p);font-size:14px}
.chip{font-family:var(--f-d)}
.nextcard h3{font-family:var(--f-d)}


/* ----- 전직 ----- */
.promo{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(#bfe3f4,#e2f2d0);border:3px solid var(--wood-dd);border-radius:8px;padding:8px}
.promo canvas{image-rendering:pixelated}.promo span{display:block;text-align:center;font:15px var(--f-d)}
.pr-a{opacity:.75}.pr-ar{font:26px var(--f-d);color:var(--berry);animation:bob .7s infinite steps(2)}.pr-b span{color:#b8452a}
.lvr{grid-template-columns:44px 36px 34px 1fr}
.uc-cls.pro,.cls.pro{background:linear-gradient(#ffe08a,#f0b030)!important;color:var(--ink)!important;border-color:#b8862a}
.cls.next{background:#fff6dc!important;color:var(--ink-l)!important;border:1px dashed var(--paper-d)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 0.8 ---------- */
.tabs{grid-template-columns:repeat(8,1fr)!important;gap:2px!important;padding:8px 4px 0!important}
.tabs button{font-size:13px!important;padding:8px 0 6px!important;position:relative;letter-spacing:-.5px}
.tbadge{position:absolute;top:-4px;right:2px;font-style:normal;font-size:11px;background:#c8382c;color:#fff;border-radius:8px;padding:0 5px;line-height:16px}
.cutin{position:absolute;left:0;right:0;top:20%;z-index:7;display:flex;align-items:center;gap:10px;padding:8px 14px;background:linear-gradient(90deg,rgba(20,40,70,.94),rgba(20,40,70,.7) 70%,rgba(20,40,70,0));color:#fff;transform:translateX(-105%);transition:transform .22s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;border-top:2px solid #f0c048;border-bottom:2px solid #f0c048}
.cutin.foe{background:linear-gradient(90deg,rgba(90,20,14,.94),rgba(90,20,14,.7) 70%,rgba(90,20,14,0));border-color:#ff8a5a}
.cutin.show{transform:none}
.cutin canvas{width:64px;height:64px;image-rendering:pixelated;border:2px solid #0c0804;border-radius:8px;background:radial-gradient(circle at 50% 35%,#cfe8f8,#7fb0d8);flex:none}
.cutin.foe canvas{background:radial-gradient(circle at 50% 35%,#f8d8cc,#d88a78)}
.cutin b{display:block;font-family:var(--f-d);font-size:15px;color:#f0c048;font-weight:400}
.cutin span{display:block;font-family:var(--f-d);font-size:19px;line-height:1.25;text-shadow:0 2px 0 #0008}
.ib[disabled]{opacity:.45}
.bbar{gap:5px!important}.bbar .ib{padding:4px 7px 4px 3px!important;gap:2px!important}.bbar .ib span{font-size:13px}.bbar .endb{min-width:0;flex:0 1 auto}.bbar .endb span{min-width:0;overflow:hidden}.bbar .endb small{white-space:nowrap}
.ib.on{filter:brightness(1.08);outline:2px solid #f0c048}
.ib.spd{width:auto;min-width:40px;justify-content:center;font-family:var(--f-d);font-size:16px}
.pt2{display:flex;flex-direction:column;gap:2px}
.pt2 .pt{transform:scale(.86);transform-origin:left center;margin:-6px 0}
.skn.off{opacity:.55;text-decoration:line-through}
.tag.off{opacity:.5;text-decoration:line-through}
.bondc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px}
.bpf{display:flex}.bpf canvas{width:42px;height:42px;image-rendering:pixelated;border:2px solid #3a200e;border-radius:6px;background:#e8d8b0}
.bpf canvas+canvas{margin-left:-10px}
body.fz-s .mbox,body.fz-s .dpanel,body.fz-s .cp-body,body.fz-s .dlg{zoom:.92}
body.fz-l .mbox,body.fz-l .dpanel,body.fz-l .cp-body,body.fz-l .dlg,body.fz-l #t-info{zoom:1.12}
body.fz-xl .mbox,body.fz-xl .dpanel,body.fz-xl .cp-body,body.fz-xl .dlg,body.fz-xl #t-info{zoom:1.25}
body.cb .ucard.foe{background:linear-gradient(100deg,#8a4a00 0%,#6a3800 60%,#4a2800 100%)!important}
body.cb .ucard.ally{background:linear-gradient(100deg,#1a4aa8 0%,#123a88 60%,#0e2a66 100%)!important}

/* ----- v0.9 전술 · 사기 · 일기토 · 본영 · 기록 · 순라길 ----- */
#b-mor{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:5px;padding:2px 8px;border-radius:10px;border:2px solid #0c0804;background:#1a120ccc;color:#f6e4bc;font:12px var(--f-d);box-shadow:0 2px 0 #000a;white-space:nowrap}
#b-mor b{font-weight:400;font-size:14px;color:#fff}#b-mor .hi b{color:#ffd23c}#b-mor .lo b{color:#ff8a6a}
#b-mor i{display:flex;width:96px;height:7px;background:#3a2414;border-radius:4px;overflow:hidden}
#b-mor em.a{background:linear-gradient(#7ad8ff,#2a8ad8)}#b-mor em.f{margin-left:auto;background:linear-gradient(#ffb08a,#d8402e)}
body.cb #b-mor em.f{background:linear-gradient(#ffd080,#e88a00)}
.hints9{display:flex;gap:4px;flex-wrap:wrap;padding:0 2px}
.hints9 span{display:inline-flex;align-items:center;gap:3px;font:12px var(--f-d);color:#fff;background:#2a5ab0cc;border:1px solid #0c0804;border-radius:8px;padding:1px 7px 1px 3px}
.goal.cons{background:#fff1cc;border-color:#b8862a;font-size:13px;margin-top:6px}
.cmds.three{grid-template-columns:2fr 1.2fr 1fr}
.mvp9{display:flex;flex-direction:column;gap:4px}
.mvp-r{display:grid;grid-template-columns:34px auto 1fr;gap:6px;align-items:center;background:#fff6dc;border:2px solid #d2b07a;border-radius:8px;padding:3px 8px}
.mvp-r.top{background:linear-gradient(90deg,#ffe8a0,#fff6dc);border-color:#b8862a}
.mvp-r canvas{width:32px;height:32px;image-rendering:pixelated}.mvp-r b{font:15px var(--f-d)}.mvp-r span{font-size:12px;color:var(--ink-l);text-align:right}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;margin:4px 0}
.du-side{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff6dc;border:2px solid #d2b07a;border-radius:10px;padding:6px}
.du-side.a{border-color:#2a8ad8}.du-side.f{border-color:#d8402e}
.du-side canvas{width:64px;height:64px;image-rendering:pixelated;background:linear-gradient(#bfe3f4,#e2f2d0);border:2px solid #3a200e;border-radius:6px}
.du-side.f canvas{transform:scaleX(-1)}
.du-side b{font:17px var(--f-d)}.du-side small{font-size:11px;color:var(--ink-l)}
.du-hp{width:100%;height:8px;background:#3a2414;border-radius:4px;overflow:hidden}.du-hp i{display:block;height:100%;background:linear-gradient(#9cffb8,#2fc06a)}
.du-side.f .du-hp i{background:linear-gradient(#ffc8a0,#e8402e)}
.du-vs{display:flex;flex-direction:column;align-items:center;gap:2px}.du-vs em{font:26px var(--f-d);font-style:normal;color:#c8382c;text-shadow:0 2px 0 #3a200e}.du-vs span{font-size:13px;letter-spacing:2px;color:#b8862a}
.du-msg{text-align:center;font-size:14px;margin:4px 0;line-height:1.5}.du-tell{text-align:center;font:16px var(--f-d);color:#7a1a1a;margin:4px 0}
.du-btns{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}.du-btns .pbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px}.du-btns small{font:11px var(--f-b);opacity:.8}
.du-btns #du-ok{grid-column:1/-1}
.basehd canvas{width:100%;height:auto;image-rendering:pixelated;border:3px solid var(--wood-dd);border-radius:6px;background:#8ec0e8}
.basec,.achc,.codexc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;margin-top:6px}
.codexc{grid-template-columns:auto minmax(0,1fr);align-items:start}
.bc-ic{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:#d6b27a;border:2px solid var(--wood-dd)}
.bc-l{margin:4px 0 0;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--ink-l)}.bc-l li.on{color:#2f8a3a;font-weight:700}.bc-l li.nx{color:var(--ink)}
.bc-max{font:15px var(--f-d);color:#2f8a3a}
.basec .pbtn small{font:11px var(--f-b)}
.xb9{border:0;background:none;color:#fff;font-size:11px;padding:0 0 0 2px}.tag.off{background:#b8a888}
.achc.got{background:linear-gradient(90deg,#fff1c0,var(--paper))}
.achc small{font-size:12px;color:var(--ink-l)}
.codexc.unseen{opacity:.6}.codexc.unseen canvas{filter:brightness(0) opacity(.6)}
.lore{margin:4px 0 0;font-size:12.5px;line-height:1.55;border-left:3px solid #b8862a;padding-left:7px}.lore.lock{color:#a89878;border-color:#d2c4a4}
.fgrid,.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.igrid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.fcell,.icell{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff6dc;border:2px solid #d2b07a;border-radius:8px;padding:5px;text-align:center}
.fcell canvas{width:44px;height:44px;image-rendering:pixelated;background:linear-gradient(#f4d8c8,#f0e4c8);border-radius:6px}
.fcell b{font:13px var(--f-d)}.fcell small,.icell small{font-size:10.5px;line-height:1.3;color:var(--ink-l)}
.fcell.unseen canvas,.icell.unseen canvas{filter:brightness(0) opacity(.45);background:none!important}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.scell{padding:0;border:3px solid var(--wood-dd);border-radius:6px;background:#1a120c;overflow:hidden;display:flex;flex-direction:column}
.scell img{width:100%;display:block}.scell small{color:#f6e4bc;font-size:11px;padding:3px 4px;text-align:left}
.rec9{flex-wrap:nowrap}.rec9 button{flex:none;padding:7px 9px}
.pv9{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a1a12ee,#0a0604f8);color:#fff4d8;animation:pvIn .5s ease-out}
.pv9.out{opacity:0;transition:opacity .3s}
.pv-in{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 24px}
.pv-in small{font:15px var(--f-d);letter-spacing:.4em;color:#e8b070}
.pv-sil canvas{filter:brightness(0) drop-shadow(0 0 12px #ff6a3a) drop-shadow(0 0 30px #c8382c);image-rendering:pixelated;animation:pvSil 2.4s ease-in-out infinite}
.pv-in b{font:30px var(--f-d);font-weight:400;text-shadow:0 3px 0 #000}
.pv-in p{min-height:2.6em;margin:0;font-size:16px;line-height:1.6;max-width:320px}
.pv-tap{position:absolute;bottom:24px;font-size:12px;opacity:.6}
@keyframes pvIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes pvSil{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#ach9{position:fixed;left:50%;top:10px;z-index:70;transform:translate(-50%,-140%);display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:12px;border:3px solid #3a200e;background:linear-gradient(#fff1c0,#f0c868);box-shadow:0 4px 0 #000a;transition:transform .35s cubic-bezier(.3,1.4,.6,1);pointer-events:none;max-width:92vw}
#ach9.show{transform:translate(-50%,0)}#ach9 canvas{image-rendering:pixelated}
#ach9 div{display:flex;flex-direction:column;line-height:1.25}#ach9 small{font-size:11px;color:#7a5a3c}#ach9 b{font:18px var(--f-d);font-weight:400}#ach9 span{font-size:12px}
.rpath{display:flex;align-items:center;justify-content:center;gap:0;margin:6px 0}
.rpath i{flex:1;max-width:22px;height:3px;background:#b8a888}
.rn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:15px var(--f-d);background:#e8dcc0;border:3px solid #b8a888;color:#7a6a50}
.rn.done{background:#2f8a74;border-color:#1e5a4a;color:#fff}.rn.cur{background:#f0b030;border-color:#3a200e;color:#3a200e;transform:scale(1.15);box-shadow:0 0 0 3px #ffe08a}
.relics{display:flex;flex-direction:column;gap:4px}.relics .tag{display:flex;align-items:center;gap:4px;background:#5a3a6a;padding:3px 8px}.relics small{opacity:.85;font:11px var(--f-b)}
.tsub.t9{margin-top:6px}

/* ----- v0.9.1 세로 반응형: 시트·모달은 화면 높이 안에서 스크롤 ----- */
#app{height:100%;height:100dvh}
.modal{height:100%;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.modal>.sheet{align-self:end;min-height:0}
.sheet{max-height:calc(100% - env(safe-area-inset-top,0px) - 8px);max-height:min(92dvh,calc(100% - 8px))}
.sheet .mbox{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.t-wrap>*{flex-shrink:0}
.cp-body{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-height:720px){
  .logo .l1{font-size:clamp(44px,13vw,60px)}.logo .l2{font-size:clamp(32px,9vw,42px)}.ttag{font-size:14px;margin-top:2px}
  .t-wrap{gap:6px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .tinfo,.tintro{padding:8px 12px}.tinfo .tdesc{display:none}#t-guide{gap:4px 8px}#t-guide canvas{width:24px;height:24px}#t-guide i{display:none}
  .tbtns{gap:6px}.btn.big{padding-top:10px;padding-bottom:10px}
}
@media (max-height:780px){ .tintro{display:none} }
.tsub.t9{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.tsub.t9 .btn[hidden]{display:none}

/* ----- 계정 ----- */
.acc9{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:8px;z-index:5;display:flex;align-items:center;gap:4px;font:13px var(--f-d);color:#fff4d8;background:rgba(24,12,4,.62);border:2px solid rgba(255,226,170,.5);border-radius:14px;padding:4px 10px;max-width:46%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.acc9.on{background:rgba(47,138,116,.85)}.acc9 i{font-style:normal}
.af9{display:flex;flex-direction:column;gap:8px}
.af9 label{display:flex;flex-direction:column;gap:3px;font:14px var(--f-d);color:var(--ink)}.af9 label small{font:11.5px var(--f-b);color:var(--ink-l)}
.in9{font:16px var(--f-b);padding:9px 10px;border:2px solid var(--wood-dd);border-radius:8px;background:#fffaf0;color:var(--ink);-webkit-user-select:text;user-select:text;width:100%;box-sizing:border-box}
.in9:focus{outline:3px solid #f0b030;outline-offset:1px}
.aerr{margin:0;min-height:1.2em;font-size:13px;color:#a8382c}
.alinks{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:8px}
.lk9{background:none;border:0;font:13.5px var(--f-d);color:#2a5ab0;text-decoration:underline;padding:4px 6px}
.soc9{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:12px;color:var(--ink-l);flex-wrap:wrap}
.agr9{display:flex;flex-direction:column;gap:4px;background:#fff6dc;border:2px solid #d2b07a;border-radius:8px;padding:8px 10px}
.agr9 label{flex-direction:row;align-items:center;gap:6px;font:13px var(--f-b)}.agr9 label.all{border-bottom:1px dashed #d2b07a;padding-bottom:5px;font-size:14px}
.agr9 input,.mv9 input{width:18px;height:18px;accent-color:#2f8a74;flex:none}
.agr9 .lk9{margin-left:auto;font-size:12px}
.mv9{flex-direction:row!important;align-items:center;gap:6px;font:13px var(--f-b)!important;background:#d8f0e4;border-radius:8px;padding:6px 8px}