:root{--ink:#172022;--muted:#72807d;--line:#dfe7e2;--accent:#3fa774}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f4f8f5;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.shell{max-width:560px;margin:0 auto;padding:24px 16px}
.topbar{font-weight:800;font-size:18px;margin-bottom:28px}
.card{display:block;width:100%;padding:32px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);font:700 22px inherit;text-align:center;cursor:pointer}
.card small{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--muted)}
.card:hover{border-color:var(--accent)}
.head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.head h2{margin:0;font-size:18px}
.back{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.empty{padding:60px 18px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}
.view{display:grid;gap:14px}
.sentences{margin:0;padding:0 0 0 22px;display:grid;gap:10px}
.sentences li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;line-height:1.5}
.sentences small{display:block;margin-top:4px;color:var(--muted);font-size:11px}
.sentences small.gloss{margin-top:6px;color:#4a5568;font-size:13px;line-height:1.6}
.set-progress{font:500 13px monospace;color:var(--accent);letter-spacing:.1em}
.set-text{margin:0;padding:26px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:22px;line-height:1.5;text-align:center}
.set-tag{color:var(--muted);text-align:center}
.actions{display:flex;gap:10px;justify-content:center}
.actions button{border:0;border-radius:12px;padding:14px 20px;font:700 14px inherit;cursor:pointer}
.actions .primary{background:var(--ink);color:#fff}
.actions .secondary{background:#b9f2d3;color:var(--ink)}
.start{padding:16px;border:0;border-radius:14px;background:var(--ink);color:#fff;font:700 16px inherit;cursor:pointer}
.sentences{list-style:decimal}
.sentences li{display:list-item}
.sentences li>span{display:block;line-height:1.5}
.sentences li .listen{float:right;margin-left:10px;border:1px solid var(--line);border-radius:10px;background:#f4f8f5;padding:6px 10px;cursor:pointer}
.set-status{text-align:center;font-size:20px;font-weight:700;margin-top:18px}
.set-status.rec{color:#d64545;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.set-timer{text-align:center;font:500 64px monospace;letter-spacing:-.05em;margin:14px 0}
.answer{display:block;clear:both;width:100%;margin-top:8px;height:34px}
.summary{text-align:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.summary-score{font:700 44px monospace}
.summary-text{margin-top:4px;color:var(--muted)}
.miss{color:#d64545;font-weight:700;text-decoration:underline}
.score{float:right;margin-left:10px;color:var(--accent);font-family:monospace}
.said{display:block;clear:both;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.4}
.interview-question{margin:0;padding:26px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:20px;line-height:1.5;text-align:center}
.interview-transcript{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f4f8f5;color:var(--muted);font-size:13px;line-height:1.5;text-align:left}
.interview-breakdown{margin-top:12px;text-align:left;display:grid;gap:6px}
.interview-breakdown-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.interview-breakdown-row b{font-family:monospace}
.interview-breakdown-row b.worst{color:#d64545}

/* 앱처럼 보이게: 노치·홈 바 영역을 피하고, 누를 때 파란 깜빡임과 글자 확대·당겨서 새로고침을 막는다 */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
.shell{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
button{touch-action:manipulation;-webkit-user-select:none;user-select:none}