:root { --ink:#161616; --muted:#999; --line:#e9e9e9; --side:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial,"Noto Sans KR",sans-serif; }
button,textarea { font:inherit; } button { cursor:pointer; }
.app { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { min-width:0; padding:22px 14px; border-right:1px solid var(--line); background:var(--side); overflow:hidden; transition:width .2s, padding .2s; }
.sidebar-top { height:27px; display:flex; align-items:center; gap:13px; white-space:nowrap; }.sidebar-top strong { font-size:16px; letter-spacing:-.7px; }
.menu-button { width:24px; height:24px; padding:0; border:0; background:transparent; font-size:15px; }.history-actions { position:fixed; right:28px; bottom:28px; z-index:4; display:flex; gap:4px; }.history-actions button { width:34px; height:34px; padding:0; border:1px solid #d8d8d8; border-radius:4px; background:#fff; color:#333; box-shadow:0 3px 12px #00000012; font-size:18px; }.history-actions #markButton.active { border-color:#171717; background:#171717; color:#fff; }.history-actions button:disabled { color:#c9c9c9; background:#fafafa; cursor:default; }.script-list { display:grid; gap:2px; margin-top:43px; }.script-list::before { content:"SCRIPTS"; margin:0 8px 9px; color:var(--muted); font:10px monospace; letter-spacing:.1em; }
.script-row { display:flex; align-items:center; min-width:0; border-radius:3px; }.script { display:flex; flex:1; align-items:center; min-width:0; border:0; background:transparent; border-radius:3px; padding:10px 9px; color:#777; text-align:left; font-size:12px; }.script::before { content:"▤"; margin-right:9px; color:#aaa; font:10px monospace; }.script span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.script:hover,.script.active { color:var(--ink); background:#ececec; }.script.active { font-weight:600; }.script-row:has(.script.active) { background:#ececec; }.delete-script { width:27px; height:27px; margin-right:4px; border:0; background:transparent; color:#999; font-size:16px; opacity:0; }.script-row:hover .delete-script { opacity:1; }.delete-script:hover { color:var(--ink); }
.new-button { width:100%; margin-top:27px; border:0; background:var(--ink); border-radius:3px; padding:10px; color:#fff; text-align:left; font-size:11px; }.new-button:hover { background:#444; }
.workspace { min-width:0; }.transcript { padding:42px 10% 80px; }.line { display:grid; grid-template-columns:94px minmax(0,1fr); min-height:72px; padding:19px 0; border-bottom:1px solid #f0f0f0; }.line:first-child { border-top:1px solid var(--line); }.line time { padding-top:2px; color:var(--muted); font:12px monospace; }.line p { margin:0; color:#242424; font-size:15px; line-height:1.55; letter-spacing:-.2px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }.word { cursor:default; }.app.marking .word { cursor:pointer; }.app.marking .word:active { opacity:.45; }.pending-word { outline:1px solid var(--ink); outline-offset:2px; }.highlight { padding:1px 2px; color:#fff; background:var(--ink); }
.copy-area { display:flex; justify-content:flex-end; padding-top:26px; }.ai-copy { border:0; border-radius:3px; background:var(--ink); color:#fff; padding:10px 13px; font-size:11px; }.ai-copy:hover { background:#444; }
.modal-backdrop { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:#0005; }.modal-backdrop.hidden { display:none; }.modal { width:min(520px,100%); background:#fff; padding:24px; box-shadow:0 18px 60px #0003; }.modal-header { display:flex; align-items:center; justify-content:space-between; }.modal h1 { margin:0; font-size:18px; letter-spacing:-.5px; }.modal-header button { border:0; background:transparent; padding:0; font-size:22px; line-height:1; }.modal > p { margin:10px 0 19px; color:var(--muted); font-size:12px; }.modal textarea { display:block; width:100%; min-height:210px; resize:vertical; padding:12px; border:1px solid #ddd; outline-color:#222; color:#333; font:12px/1.6 monospace; }.create-button { margin-top:13px; border:0; border-radius:2px; background:var(--ink); color:#fff; padding:10px 14px; font-size:12px; }.create-button:hover { background:#444; }
.app.sidebar-closed { grid-template-columns:52px minmax(0,1fr); }.app.sidebar-closed .sidebar { padding:22px 14px; border-right:0; background:transparent; }.app.sidebar-closed .sidebar-top strong,.app.sidebar-closed .new-button,.app.sidebar-closed .script-list { display:none; }
@media(max-width:900px) { .app { grid-template-columns:200px minmax(0,1fr); }.app.sidebar-closed { grid-template-columns:52px minmax(0,1fr); } }
@media(max-width:600px) { .app { grid-template-columns:54px minmax(0,1fr); }.sidebar { padding:22px 14px; }.sidebar-top strong,.new-button,.script-list { display:none; }.history-actions { right:18px; bottom:18px; }.transcript { padding:35px 20px; }.line { grid-template-columns:62px minmax(0,1fr); }.line p { font-size:14px; } }