:root{
  --bg:#0b0e14; --panel:#141925; --panel2:#1b2233; --line:#2a3346;
  --txt:#e7ecf5; --dim:#9aa6bd; --accent:#5b8cff; --accent2:#7c5bff;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --halo:rgba(91,140,255,.15);
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",Roboto,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased}
body{display:flex; justify-content:center; min-height:100vh}
a{color:inherit; text-decoration:none}
.device{width:100%; max-width:440px; min-height:100vh; background:var(--bg);
  position:relative; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.5)}

.mock-flag{position:fixed; top:0; left:50%; transform:translateX(-50%);
  background:var(--warn); color:#1a1300; font-size:11px; font-weight:800;
  letter-spacing:.5px; padding:3px 14px; border-radius:0 0 10px 10px; z-index:99}

header.bar{display:flex; align-items:center; gap:10px; padding:18px 18px 12px;
  position:sticky; top:0; background:linear-gradient(var(--bg),rgba(11,14,20,.85)); backdrop-filter:blur(8px); z-index:10}
.logo{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid; place-items:center; font-size:16px}
.brand{font-weight:800; font-size:15px}
.brand small{display:block; font-weight:500; color:var(--dim); font-size:10.5px; letter-spacing:.3px}
.hud{margin-left:auto; display:flex; align-items:center; gap:9px}
.steps{font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums}
.timer{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800;
  color:var(--dim); font-variant-numeric:tabular-nums; background:var(--panel2);
  border:1px solid var(--line); padding:5px 10px; border-radius:9px; transition:.2s}
.timer.warn{color:#fff; background:var(--bad); border-color:var(--bad); animation:pulse 1s infinite}
.timer.done{color:#fff; background:var(--bad); border-color:var(--bad)}
@keyframes pulse{50%{opacity:.5}}

.progress{height:3px; background:var(--line); margin:0 18px; border-radius:3px; overflow:hidden}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:33%; transition:width .35s ease}

main{flex:1; padding:18px; padding-bottom:104px}
.screen{display:none; animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

h1{font-size:24px; margin:6px 0 8px; letter-spacing:-.5px}
h2{font-size:18px; margin:2px 0 12px; letter-spacing:-.3px}
p.lead{color:var(--dim); font-size:14px; margin:0 0 18px}
.kicker{display:inline-block; font-size:11px; font-weight:700; color:var(--accent);
  background:var(--halo); padding:4px 10px; border-radius:999px; margin-bottom:10px; letter-spacing:.4px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px}
.card.tap{cursor:pointer; transition:.15s; display:flex; align-items:center; gap:14px}
.card.tap:active{transform:scale(.985); border-color:var(--accent)}
.card .ico{width:42px; height:42px; border-radius:12px; background:var(--panel2);
  display:grid; place-items:center; font-size:21px; flex:none}
.card h3{margin:0 0 2px; font-size:15px}
.card .sub{margin:0; color:var(--dim); font-size:12.5px}
.card .arrow{margin-left:auto; color:var(--dim); font-size:18px}

.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0}
.pill{font-size:11.5px; color:var(--dim); border:1px solid var(--line); padding:6px 11px; border-radius:999px}
.pill b{color:var(--txt)}
.tag{font-size:10px; color:var(--dim); border:1px solid var(--line); padding:3px 8px; border-radius:6px}

/* 신뢰 자료 */
.ref-list{list-style:none; margin:0; padding:0}
.ref-list li{position:relative; padding:11px 0 11px 22px; font-size:13px; border-bottom:1px solid var(--line)}
.ref-list li:last-child{border:none}
.ref-list li::before{content:"▸"; position:absolute; left:2px; color:var(--accent)}
.ref-list b{color:var(--warn)}
.scenario{background:var(--panel2); border:1px solid var(--line); border-radius:13px;
  padding:13px 14px; font-size:13px; color:var(--dim); margin-bottom:14px}

/* AI 초안 문서 (문장 단위 교정) */
.doc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:8px 6px}
.sent{display:block; padding:9px 11px; border-radius:10px; font-size:14px; cursor:pointer;
  transition:.15s; border:1px solid transparent}
.sent:active{background:var(--panel2)}
.sent.keep{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4)}
.sent.fix{background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.5)}
.sent .mark{font-size:10.5px; font-weight:800; margin-right:6px; opacity:.85}
.sent.keep .mark{color:var(--ok)} .sent.fix .mark{color:var(--warn)}
.reveal .sent[data-error="1"]{box-shadow:inset 0 0 0 1px var(--bad)}
.reveal .sent[data-error="1"]::after{content:"⚠ 거짓"; font-size:9px; color:#fff; background:var(--bad);
  padding:1px 5px; border-radius:5px; margin-left:6px; vertical-align:middle}
.fixbox{margin:6px 4px 2px; display:none}
.fixbox.show{display:block}
.fixbox textarea{width:100%; background:var(--bg); border:1px solid var(--warn); color:var(--txt);
  border-radius:10px; padding:9px 11px; font-size:13px; font-family:inherit; resize:none}

/* 채팅 */
.chat{display:flex; flex-direction:column; gap:11px}
.msg{max-width:88%; padding:11px 13px; border-radius:16px; font-size:13.5px}
.msg.ai{background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start}
.msg.me{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.msg .who{font-size:10.5px; font-weight:700; color:var(--dim); margin-bottom:5px; display:flex; align-items:center; gap:6px}
.msg.ai .dot{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.typing{display:inline-flex; gap:3px} .typing i{width:5px; height:5px; border-radius:50%; background:var(--dim); animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.chip{font-size:12px; color:var(--accent); background:var(--halo); border:1px solid rgba(91,140,255,.35);
  padding:8px 12px; border-radius:999px; cursor:pointer; transition:.15s}
.chip:active{transform:scale(.96)} .chip.used{opacity:.4; pointer-events:none}
.composer{display:flex; gap:8px; align-items:center}
.composer input{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--txt);
  border-radius:999px; padding:12px 15px; font-size:13.5px; font-family:inherit}
.composer input:focus{outline:none; border-color:var(--accent)}
.composer button{flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:17px}
.composer button:active{transform:scale(.92)}

/* 탭 */
.tabs{display:flex; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:13px; padding:5px; margin-bottom:14px}
.tabs button{flex:1; border:none; background:transparent; color:var(--dim); font-size:12.5px; font-weight:700;
  padding:9px 4px; border-radius:9px; cursor:pointer; transition:.15s}
.tabs button.on{background:var(--accent); color:#fff}
.tabpane{display:none} .tabpane.on{display:block}

/* 토글/스위치 */
.toolbar{display:flex; align-items:center; gap:8px; margin:6px 0 14px}
.toolbar .sw{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--dim)}
.switch{width:38px; height:22px; background:var(--line); border-radius:999px; position:relative; cursor:pointer; transition:.2s}
.switch.on{background:var(--accent)}
.switch i{position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.2s}
.switch.on i{left:18px}

.hint{font-size:12px; color:var(--dim); background:var(--panel2); border:1px dashed var(--line);
  padding:10px 12px; border-radius:12px; margin:14px 0}
.hint b{color:var(--warn)}

/* 하단 고정 버튼 */
.footer{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:440px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(11,14,20,0),var(--bg) 28%); z-index:20}
.btn{width:100%; border:none; border-radius:15px; padding:16px; font-size:15px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); cursor:pointer; transition:.15s}
.btn:active{transform:scale(.985)} .btn.ghost{background:var(--panel); border:1px solid var(--line); color:var(--txt)}
.btn:disabled{opacity:.45} .btn-row{display:flex; gap:10px}
.submitbar{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; margin-top:14px}
.submitbar .cnt{font-size:12px; color:var(--dim)} .submitbar .cnt b{color:var(--txt)}

/* 결과 */
.score-ring{width:150px; height:150px; margin:6px auto 4px; position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .num{position:absolute; inset:0; display:grid; place-items:center}
.score-ring .num b{font-size:40px; line-height:1} .score-ring .num span{font-size:11px; color:var(--dim)}
.verdict{text-align:center; margin:8px 0 18px}
.badge{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14px; padding:8px 18px; border-radius:999px}
.badge.pass{background:rgba(52,211,153,.15); color:var(--ok); border:1px solid rgba(52,211,153,.4)}
.badge.fail{background:rgba(248,113,113,.15); color:var(--bad); border:1px solid rgba(248,113,113,.4)}
.result-row{display:flex; align-items:flex-start; gap:11px; padding:13px 0; border-bottom:1px solid var(--line)}
.result-row:last-child{border:none}
.result-row .ic{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:13px; flex:none; margin-top:1px}
.ic.good{background:rgba(52,211,153,.18); color:var(--ok)} .ic.miss{background:rgba(248,113,113,.18); color:var(--bad)}
.result-row .t{font-size:13px; font-weight:600} .result-row .d{font-size:11.5px; color:var(--dim); margin-top:2px}

.backlink{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); margin-bottom:4px}