/* 불타는 타자방 v2 - 시안(mockup/index.html) 색·HTS 레이아웃 재사용 */
:root{--bg:#0A0D11;--panel:#10151B;--line:#1C242D;--txt:#D6DDE4;--dim:#7C8894;--up:#F04452;--down:#3182F6;--hi:#FFD23F;--fire:#FF6A1A}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);height:100%}
body{font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-variant-numeric:tabular-nums;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}
.screen{display:none;min-height:100vh;min-height:100dvh;position:relative}
.screen.active{display:block}
.eyebrow{font-size:13px;color:var(--dim);font-weight:600}
.dim{color:var(--dim)}
.foot{font-size:10.5px;color:#5d6873;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 10px;text-align:center}
.btn{height:46px;padding:0 26px;border-radius:8px;border:0;background:var(--hi);color:#111;font-weight:800;font-size:16px}
.btn2{height:46px;padding:0 18px;border-radius:8px;border:1px solid #2A3540;background:transparent;color:var(--txt);font-size:14px}
.btn.sm,.btn2.sm{height:40px;font-size:14px}.btn2.xs{height:30px;font-size:12px;padding:0 10px}
.btn:focus-visible,.btn2:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.btn[disabled]{opacity:.4}
.push{margin-left:auto}
.hint{color:var(--dim);font-size:12px;margin-top:14px}
.navrow{display:flex;gap:10px;margin-top:20px;align-items:center;flex-wrap:wrap}
.bestline{font-size:12px;color:#ff9a5c;margin-top:10px;min-height:16px}
.gk{font-size:10px;color:#ff9a5c;border:1px solid #5a2a14;border-radius:3px;padding:0 4px;margin-left:6px;white-space:nowrap}
.soon{font-size:11px;color:#ff9a5c;border:1px solid #5a2a14;border-radius:4px;padding:1px 6px;margin-left:6px}

/* 챕터 */
.ch{padding:44px 64px 50px}
.ch h2{font-size:30px;font-weight:800;margin:6px 0 22px}
.chs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cc{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:18px;min-height:150px}
.cc .no{font-size:12px;color:var(--dim)}.cc .tt{font-size:20px;font-weight:800;margin:4px 0 8px}.cc .ds{font-size:13px;color:#AEB8C2;line-height:1.6}
.cc.on{border-color:var(--hi)}.cc.lock{opacity:.45}
.steps{display:flex;gap:8px;margin-top:14px;font-size:12px;flex-wrap:wrap}.steps span{padding:4px 9px;border-radius:5px;background:#1b222a;color:#AEB8C2}
.modes{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ch .foot{position:absolute;bottom:6px;left:0;right:0}

/* 학습/복습/예고 페이지 */
.pg{display:none;padding:48px 24px 60px}
.pg.active{display:block}
.pgwrap{max-width:720px;margin:0 auto}
.pg h2{font-size:30px;font-weight:800;margin:10px 0 16px;line-height:1.3}
.lbody{font-size:17px;line-height:1.85;color:#C9D2DA}
.lex{margin-top:16px;padding:12px 16px;border-left:3px solid var(--hi);background:#141B22;border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.7;color:#E6C86A}
.story{list-style:none;margin-top:6px}.story li{padding:10px 14px;border-left:3px solid #2A3540;margin-bottom:8px;background:#141B22;border-radius:0 8px 8px 0;font-size:15px;line-height:1.7}
.story li:last-child{border-left-color:var(--hi)}
.dots{display:flex;gap:6px;margin-top:22px}.dots i{width:22px;height:4px;border-radius:2px;background:#27313b}.dots i.on{background:var(--hi)}
.pg .foot{position:absolute;bottom:4px;left:0;right:0}
.qchoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.qchoices button{min-height:48px;border-radius:8px;border:1px solid #2A3540;background:#141B22;color:var(--txt);font-size:15px;font-weight:600;padding:8px 10px}
.qchoices button.ok{border-color:#3fbf7f;color:#7be3ac}.qchoices button.no{border-color:var(--up);color:#ff8a93}
.qchoices button[disabled]{cursor:default}
.qres{margin-top:12px;font-size:14px;line-height:1.7;min-height:22px}.qres b.ok{color:#7be3ac}.qres b.no{color:#ff8a93}

/* HTS (초보자 모드) */
.play{overflow:hidden}
.play.active{display:block}
.app{position:relative;width:100vw;height:100vh;height:100dvh;display:grid;grid-template-rows:52px 1fr 34px 64px 22px;grid-template-columns:1fr 280px;gap:1px;background:var(--line)}
.app>*{background:var(--panel)}
.quote{grid-column:1/3;display:flex;align-items:center;gap:20px;padding:0 70px 0 18px;overflow:hidden;white-space:nowrap}
.quote .nm{font-weight:700;font-size:17px}.quote .nm small{color:var(--dim);font-weight:500;margin-left:6px;font-size:12px}
.px{font-size:22px;font-weight:800;color:var(--up)}.chg{color:var(--up);font-weight:600}
.px.dn,.chg.dn{color:var(--down)}
.kv{color:var(--dim);font-size:12px}.kv b{color:var(--txt);font-size:14px;margin-left:4px}
.kv b.pop{color:var(--hi)}
.clock{margin-left:auto;font-size:12px;color:var(--dim)}.clock b{color:var(--up);font-size:15px;margin-left:6px}
.round{padding:3px 9px;border:1px solid #5a2a14;color:#ff9a5c;border-radius:4px;font-size:12px;font-weight:700}
.chart{position:relative;overflow:hidden}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.tag{position:absolute;left:14px;bottom:26px;font-size:11px;color:var(--dim);z-index:2}
.side{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.side>div{background:var(--panel);padding:12px 14px}
.lbl{font-size:11px;color:var(--dim);margin-bottom:6px;letter-spacing:.02em}
.own{display:flex;align-items:center;gap:14px}.own .big{font-size:28px;font-weight:800}
.own .from{font-size:12px;color:var(--dim)}
.bar{height:8px;background:#1b222a;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff3d1f,#ff9a3c);transition:width .2s}
.ob{flex:1;font-size:12px;overflow:hidden}
.ob table{width:100%;border-collapse:collapse}.ob td{padding:2px 0}.ob td:last-child{text-align:right;color:var(--dim)}
.ob .a td:first-child{color:var(--down)}.ob .b td:first-child{color:var(--up)}
.ob .mid td{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:700;color:var(--txt)}
.ticks{font-size:11.5px;line-height:1.7}.ticks .u{color:var(--up)}.ticks .d{color:var(--down)}
.tape{grid-column:1/3;display:flex;align-items:center;gap:28px;padding:0 14px;font-size:12.5px;white-space:nowrap;overflow:hidden;color:#AEB8C2}
.tape b{color:var(--dim);font-weight:600;margin-right:6px}.tape .miss{color:#ff9a5c}.tape .ok{color:#8fd3a9}
.inp{grid-column:1/3;display:flex;align-items:center;gap:16px;padding:10px 14px}
.box{flex:1;height:44px;border:1.5px solid #3a4652;border-radius:8px;display:flex;align-items:center;padding:0 14px;position:relative;background:#0c1116;transition:border-color .2s,box-shadow .2s}
.box input{width:100%;height:100%;background:transparent;border:0;outline:0;color:var(--txt);font-size:18px;font-family:inherit;caret-color:var(--hi)}
.box:focus-within{border-color:#5a6a79}
.box.fire{border-color:#ff7a2e;box-shadow:0 0 0 1px #ff7a2e55,0 -6px 18px -6px #ff6a1a88;animation:boxfire 1.4s ease-in-out infinite}
.box.shake{border-color:var(--up)}
@keyframes boxfire{0%,100%{box-shadow:0 0 0 1px #ff7a2e55,0 -4px 14px -6px #ff6a1a88}50%{box-shadow:0 0 0 1px #ff7a2e88,0 -8px 22px -6px #ff6a1acc}}
.combo{font-size:13px;color:var(--dim)}.combo b{color:#ff9a5c;font-size:20px;margin-left:4px}
.wpm{width:170px}.wpm .bar i{background:linear-gradient(90deg,#3a4652,#ffd23f)}
.choices{display:none}

/* 공시 카드 */
#cards{position:absolute;inset:0;z-index:3;pointer-events:none}
.card{position:absolute;background:#141B22;border:1px solid #2A3540;border-radius:8px;padding:10px 14px;width:min(320px,33%);min-width:240px;box-shadow:0 8px 24px #0008;will-change:transform}
.card .src{font-size:10.5px;color:var(--dim);display:flex;gap:8px}.card .src em{font-style:normal;color:#ff9a5c}
.card .hl{font-size:16px;font-weight:700;margin-top:4px;line-height:1.35}
.card .hl u{text-decoration:none;border-bottom:2px solid currentColor}
.card.now{border-color:var(--hi);box-shadow:0 0 0 1px #FFD23F66,0 10px 30px #000a}
.card.now .hl u{color:var(--hi)}
.card.trap{opacity:.85}
.card.gone{opacity:0;transition:opacity .25s}
.floor{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#ff6a1a,transparent);z-index:4}
.floortxt{position:absolute;right:12px;bottom:8px;font-size:10.5px;color:#ff9a5c;z-index:4}
.learn{position:absolute;left:50%;transform:translateX(-50%);top:46px;background:#0E141Aee;border:1px solid #2A3540;border-left:3px solid var(--up);border-radius:6px;padding:9px 14px;width:min(600px,92%);font-size:13px;line-height:1.55;z-index:7}
.learn b{color:#fff}.learn .so{color:#ffb38a}.learn .pickres{margin-top:6px;padding-top:6px;border-top:1px solid #2A3540;color:#cfd8e0}
.learn .pickres:empty{display:none}.pickres .bu{color:var(--up)}.pickres .be{color:var(--down)}.pickres .ok{color:#7be3ac;font-weight:700}
.pick{position:absolute;right:14px;top:92px;z-index:8;display:flex;align-items:center;gap:8px;background:#0E141Af2;border:1px solid #2A3540;border-radius:8px;padding:8px 10px;font-size:12.5px;flex-wrap:wrap;max-width:94%}
.pick .pk{height:34px;padding:0 14px;border-radius:6px;border:1px solid #2A3540;background:#141B22;color:var(--txt);font-size:14px;font-weight:700}
.pick .pk.bull{border-color:#7b2a30;color:#ff8a93}.pick .pk.bear{border-color:#1d3a66;color:#7fb0ff}
.pick kbd{font:inherit;font-size:11px;color:var(--dim);margin-right:4px}
.pick .pt{display:block;width:100%;height:2px;background:var(--hi);transform-origin:left;order:9}
.burst{position:absolute;left:50%;top:56%;transform:translateX(-50%);z-index:9;font-size:14px;font-weight:700;color:#9ec3ff;background:#0b1320;border:1px solid #1d3a66;padding:6px 12px;border-radius:5px;white-space:nowrap}
.burst.bad{color:#ff9a5c;border-color:#5a2a14;background:#1a0f0a}
.rbanner{position:absolute;left:0;right:0;top:36%;text-align:center;z-index:9;font-size:24px;font-weight:800;color:#ffb38a;text-shadow:0 2px 12px #000}
.rbanner small{display:block;font-size:13px;font-weight:600;color:#cfd8e0;margin-top:4px}
.fl{position:absolute;z-index:6;font-weight:800;font-size:15px;color:var(--hi);pointer-events:none;animation:flt 1s ease-out forwards}
@keyframes flt{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}}
.bb{position:absolute;left:50%;transform:translateX(-50%);top:8px;z-index:5;display:flex;align-items:center;gap:10px;font-size:11px;width:min(520px,70%)}
.bb .bbl{color:#ff8a93;white-space:nowrap}.bb .bbr{color:#7fb0ff;white-space:nowrap}
.bbbar{flex:1;height:8px;border-radius:4px;background:var(--down);overflow:hidden;position:relative}
.bbbar i{display:block;height:100%;background:var(--up);transition:width .25s}
.shares-pop{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
/* 가장자리 불 */
.heat{pointer-events:none;position:absolute;inset:0;z-index:5;opacity:0;transition:opacity .6s;
 background:radial-gradient(ellipse at 50% 120%,#ff4d1a55,transparent 45%),radial-gradient(ellipse at -10% 50%,#ff5a1a40,transparent 35%),radial-gradient(ellipse at 110% 50%,#ff5a1a40,transparent 35%);
 box-shadow:inset 0 0 90px 10px #ff3d0a44}
.flames{pointer-events:none;position:absolute;left:0;right:0;bottom:0;height:90px;z-index:6;opacity:0;transition:opacity .6s;
 background:repeating-radial-gradient(circle at 10% 140%,#ff7a1a88 0 14px,transparent 15px 34px);filter:blur(10px);animation:flick 2.4s ease-in-out infinite alternate}
@keyframes flick{from{transform:translateX(-10px) scaleY(1)}to{transform:translateX(10px) scaleY(1.15)}}
.quit{position:absolute;right:8px;top:6px;z-index:20;font-size:11px;background:transparent;border:1px solid #2A3540;color:var(--dim);border-radius:5px;padding:2px 8px}
.overlay{position:fixed;inset:0;z-index:50;background:#05070bd9;display:flex;align-items:center;justify-content:center;padding:16px}
.overlay[hidden]{display:none}
.dbox{background:var(--panel);border:1px solid #2A3540;border-radius:12px;padding:24px 26px;max-width:760px;width:100%;max-height:92vh;overflow:auto}
.dbox.wide{max-width:860px}
.dbox h2{font-size:24px;margin:6px 0 14px}.dbox h2 small{font-size:13px;color:#ff9a5c;font-weight:600;margin-left:6px}
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dcards button{text-align:left;background:#141B22;border:1px solid #2A3540;border-radius:10px;padding:14px;color:var(--txt);min-height:130px}
.dcards button:hover,.dcards button:focus-visible{border-color:var(--hi)}
.dcards .dn{font-size:11px;color:var(--dim)}.dcards .dt{font-size:16px;font-weight:800;margin:4px 0}.dcards .de{color:var(--hi);font-weight:700;font-size:13px}.dcards .dd{font-size:12.5px;color:#AEB8C2;margin-top:6px;line-height:1.5}

/* 복기 */
.recap{padding:34px 56px 50px}
.recap h2{font-size:34px;font-weight:800;margin:6px 0 4px}.recap h2 span{color:var(--down)}
.recap .sub{color:#AEB8C2;font-size:14px;line-height:1.7}
.rgrid{display:grid;grid-template-columns:360px 1fr;gap:28px;margin-top:20px;align-items:start}
.rpanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.rpanel canvas{width:100%;height:170px;display:block}
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:13px;line-height:1.55}
.rc .n{font-size:11px;color:var(--dim)}.rc .h{font-weight:700;font-size:15px;margin:4px 0 10px}
.rc .row{display:flex;gap:8px;margin-bottom:4px}.rc .row b{min-width:48px;color:var(--dim);font-weight:600;flex:none}
.rc .row.bu b{color:#ff8a93}.rc .row.be b{color:#7fb0ff}
.rc .eff{color:var(--down);font-weight:700}
.quiz{margin-top:18px;background:#141B22;border:1px solid #2A3540;border-radius:10px;padding:14px 18px}
.quiz .qhead{font-size:11px;color:var(--dim)}.quiz .q{font-size:15px;margin-top:6px;line-height:1.6}
.quiz[hidden]{display:none}
.report{margin-top:14px;font-size:12.5px}.report table{width:100%;border-collapse:collapse}.report td{padding:5px 0;border-bottom:1px solid var(--line)}.report td:last-child{text-align:right;font-weight:700}
.srcs{list-style:none;font-size:11.5px;color:var(--dim);line-height:1.7;margin-top:4px}
.srcs li:before{content:"· "}

/* 전문가 모드 */
.xp.active{display:grid;grid-template-columns:340px 1fr;grid-template-rows:52px 1fr 22px;height:100vh;height:100dvh;gap:1px;background:var(--line);min-height:0}
.xp>*{background:var(--panel)}
.xp>.overlay{background:#05070bd9}
.xp .top{grid-column:1/3;display:flex;align-items:center;gap:20px;padding:0 18px;overflow:hidden;white-space:nowrap}
.xp .nm{font-weight:700;font-size:17px}
.xp .ctl{padding:14px 18px;overflow:auto}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.seg button{padding:6px 10px;border:1px solid #2A3540;border-radius:6px;font-size:12.5px;color:#AEB8C2;background:transparent}
.seg button.on{border-color:var(--hi);color:#fff}
.sl{margin-bottom:12px}.sl .r{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}.sl .r b{color:#fff}
.sl.off{opacity:.3;pointer-events:none}.sl.hide{display:none}
.sl input[type=range]{width:100%;accent-color:#D6DDE4}
.xp .res{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:14px;overflow:auto;align-content:start}
.tbl{grid-column:1/3}
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px}.tbl th{font-size:11px;color:var(--dim);text-align:right;font-weight:600;padding:5px 10px;border-bottom:1px solid var(--line)}.tbl th:first-child,.tbl th:last-child{text-align:left}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right}.tbl td:first-child{text-align:left;color:#AEB8C2}.tbl td.dn{color:var(--down);font-weight:700}.tbl td.up{color:var(--up);font-weight:700}.tbl td.f{font-size:11.5px;color:var(--dim);text-align:left}
.pane{border:1px solid var(--line);border-radius:8px;padding:14px;position:relative;min-height:120px}
.pane canvas{width:100%;height:190px;display:block}
.mini{font-size:11px;color:var(--dim);margin-top:4px}
.note{font-size:13.5px;line-height:1.7;padding-bottom:50px}.note b{color:#fff}.note .dim{color:var(--dim)}
.note ul{margin:6px 0 0 18px}
.go{position:absolute;right:14px;bottom:14px}
.xp .foot{grid-column:1/3}

/* 접근성 / 동작 줄이기 */
body.reduced .flames,body.reduced .box.fire{animation:none}
body.reduced .fl,body.reduced .shares-pop{animation:none}
body.reduced .heat,body.reduced .flames,body.reduced .bbbar i,body.reduced .bar i{transition:none}
@media (prefers-reduced-motion:reduce){.flames,.box.fire,.fl,.shares-pop{animation:none!important}.heat,.flames,.bbbar i,.bar i{transition:none!important}}

/* 폰 (<700px): 4지선다 */
.mstat{display:none}
@media (max-width:699px){
 .ch{padding:28px 16px 50px}.chs{grid-template-columns:1fr}
 .recap{padding:22px 16px 60px}.rgrid{grid-template-columns:1fr}.rcards{grid-template-columns:1fr}.recap h2{font-size:26px}
 .qchoices{grid-template-columns:1fr}
 .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto 20px}
 .app>*{grid-column:1/-1!important}
 .quote{flex-wrap:wrap;gap:6px 14px;padding:10px 14px;white-space:normal;padding-right:60px}
 .quote .nm small{display:none}.px{font-size:19px}.chg{font-size:13px}.clock{margin-left:0}
 .side,.ob,.tape,.inp{display:none}
 .mstat{display:flex;gap:14px;align-items:center;width:100%;font-size:12px}.mstat .bar{flex:1}.mstat .cmb{color:#ff9a5c}
 .choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}
 .choices button{height:48px;border-radius:8px;border:1px solid #2A3540;background:#141B22;color:var(--txt);font-size:15px;font-weight:600}
 .choices button.used{opacity:.35}
 .card{min-width:0;left:14px!important;right:14px;width:auto}
 .learn{top:auto;bottom:34px;width:calc(100% - 28px);font-size:12px}
 .pick{top:44px;right:10px}
 .foot{font-size:9.5px;gap:6px}
 .bb{width:94%}.bb .bbl,.bb .bbr{font-size:10px}
 .xp.active{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 22px;height:auto;min-height:100vh}
 .xp .top{grid-column:1;flex-wrap:wrap;padding:10px 14px;gap:6px 14px;white-space:normal}.xp .round{margin-left:0!important}
 .xp .res{grid-template-columns:1fr}.tbl{grid-column:1;overflow:auto}.xp .foot{grid-column:1}
 .dcards{grid-template-columns:1fr}
 .tbl td.f,.tbl th:last-child{display:none}
}