:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#0b7f74; /* 소리 청록 */
  --accent-soft:rgba(11,127,116,.1);
  --hl:#ffe58a; --warn:#b4540a;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:calc(100vh - 48px);display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--hover)}
.btn:disabled{opacity:.4;cursor:default}
.btn--sm{height:32px;padding:0 13px;font-size:12.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tts{width:100%;max-width:1280px;margin:0 auto;padding:24px 28px 48px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.alert{grid-column:1/-1;margin:0;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn);font-size:13.5px;line-height:1.6;font-weight:500}
.alert--soft{grid-column:auto;font-size:12.5px;font-weight:400;margin-top:10px}

/* ---------- 글 · 재생 ---------- */
.stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.pane{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pane-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line-3);min-height:52px}
.pane-title{font-size:14px;font-weight:700;margin-right:auto}
.mode-note{font-size:12px;color:var(--muted)}
.pane textarea,.reader{display:block;width:100%;height:440px;margin:0;padding:18px 20px;border:none;outline:none;resize:vertical;background:transparent;font-size:18px;line-height:1.9;color:var(--ink);font-family:var(--font)}
.pane textarea::placeholder{color:#aaa69c}
.reader{overflow:auto;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;resize:none}
.reader:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.sent{cursor:pointer;border-radius:5px;transition:background .2s,color .2s;color:var(--ink-2)}
.sent:hover{background:var(--hover)}
.sent.is-done{color:var(--muted)}
.sent.is-now{background:var(--accent-soft);color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.sent mark{background:var(--hl);color:#1c1c1a;border-radius:4px;padding:1px 0;box-shadow:0 0 0 2px var(--hl)}

.player{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:0 18px 14px;overflow:hidden}
.progress{height:4px;margin:0 -18px 14px;background:var(--track)}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .4s ease}
.player-row{display:flex;align-items:center;gap:10px}
.pbtn{display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;color:var(--ink);flex:0 0 auto}
.pbtn:hover:not(:disabled){background:var(--hover)}
.pbtn:disabled{opacity:.35;cursor:default}
.pbtn--sm{width:40px;height:40px}
.pbtn--main{width:60px;height:60px;border:none;background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px var(--accent)}
.pbtn--main:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 85%,#000)}
.pbtn--main .i-pause{display:none}
.pbtn--main[data-state="playing"] .i-pause{display:block}
.pbtn--main[data-state="playing"] .i-play{display:none}
.pbtn--main .i-play{margin-left:3px}
body.is-playing .pbtn--main{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 9px transparent}}
.player-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:6px}
.player-text b{font-size:15px}
.player-text span{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{margin:10px 0 0;font-size:13px;color:var(--accent);line-height:1.5;min-height:0}
.status:empty{display:none}
.status.is-warn{color:var(--warn)}
.keys{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}

/* ---------- 설정 ---------- */
.side{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-title{font-size:14px;font-weight:700}
.voice-row{display:flex;gap:8px}
.voice-row select{flex:1;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:13px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.slider{display:flex;flex-direction:column;gap:6px}
.slider + .slider{padding-top:10px;border-top:1px solid var(--line-3)}
.slider-head{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:500}
.slider input[type="range"]{width:100%;accent-color:var(--accent);margin:2px 0}
.slider .tb-presets{margin-top:0}
.hint{margin:0;font-size:12px;color:var(--muted);line-height:1.55}
.card--note{background:var(--panel-soft)}
.note-title{margin:0;font-size:14px;font-weight:700}
.card--note p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.card--note b{color:var(--ink)}

@media (max-width:960px){
  .tts{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .pane textarea,.reader{height:340px}
}
@media (max-width:640px){
  .topbar{padding:14px 16px}
  .tts{padding:16px 16px 40px;gap:14px}
  .pane textarea,.reader{height:280px;font-size:17px;padding:14px 16px;line-height:1.85}
  .player{padding:0 14px 12px}
  .progress{margin:0 -14px 12px}
  .pbtn--sm{width:36px;height:36px}
  .pbtn--main{width:54px;height:54px}
  .player-row{flex-wrap:wrap}
  .player-text{flex-basis:calc(100% - 160px)}
  #stop{margin-left:auto}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#121615; --surface:#171c1b; --panel:#1c2221; --panel-soft:#212827;
    --ink:#e8eeec; --ink-hover:#ffffff; --ink-2:#c3cccb; --sub:#99a4a2; --muted:#83908e;
    --line:#29312f; --line-2:#343d3b; --line-3:#222a28; --hover:#252d2b; --soft:#222a28; --track:#303a38;
    --accent:#4fd1bf; --accent-soft:rgba(79,209,191,.15);
    --hl:#f2cf55; --warn:#ffb067;
  }
  :root[data-theme="dark"] .pbtn--main{color:var(--bg)}
  :root[data-theme="dark"] .pbtn--main:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 85%,#fff)}
  :root[data-theme="dark"] .pane textarea::placeholder{color:#66726f}
  :root[data-theme="dark"] .tb-presets button[aria-pressed="true"]{color:var(--bg)}
}