:root{
  --fg:#1a1a1a; --muted:#7a7a7a; --faint:#b5b5b5; --line:#e6e6e6; --bg:#fff; --soft:#f6f6f6; --hl:#fff8dc;
  --accent:#2f5fdc; --ok:#2f9e63; --warn:#d28a1d; --bad:#d4463f; --unk:#8a8a8a;
  --tag-bad:#fbe9e7; --tag-ok:#e8f5ee; --tag-warn:#fdf1dc; --tag-unk:#eee;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme=dark]{
  --fg:#e8e8e8; --muted:#9a9a9a; --faint:#666; --line:#2a2a2a; --bg:#121212; --soft:#1e1e1e; --hl:#2b2a1c;
  --accent:#7ea0ff; --ok:#5cc08a; --warn:#e0a640; --bad:#ef6f68; --unk:#9a9a9a;
  --tag-bad:#3a2220; --tag-ok:#1e3328; --tag-warn:#3a2f18; --tag-unk:#2a2a2a;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --fg:#e8e8e8; --muted:#9a9a9a; --faint:#666; --line:#2a2a2a; --bg:#121212; --soft:#1e1e1e; --hl:#2b2a1c;
    --accent:#7ea0ff; --ok:#5cc08a; --warn:#e0a640; --bad:#ef6f68; --unk:#9a9a9a;
    --tag-bad:#3a2220; --tag-ok:#1e3328; --tag-warn:#3a2f18; --tag-unk:#2a2a2a;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.muted{color:var(--muted)} .faint{color:var(--faint)} .id{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:.35em}
.mono{font-family:var(--mono);font-size:13px}

header{display:flex;align-items:center;gap:28px;padding:18px 28px;max-width:860px;margin:0 auto}
.brand{font-weight:700;letter-spacing:-.01em}
nav{display:flex;gap:18px}
nav a{color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent}
nav a.on{color:var(--fg);border-color:var(--fg)}
main{max-width:760px;margin:0 auto;padding:12px 28px 80px}

#login{min-height:100vh;display:flex;align-items:center;justify-content:center}
#loginForm{display:flex;flex-direction:column;gap:14px;width:280px;text-align:center}
#loginForm .brand{font-size:22px;margin-bottom:8px}
input[type=text],input[type=password],input[type=search],textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);outline:none}
input:focus,textarea:focus{border-color:#bbb}
textarea{min-height:120px;resize:vertical}
button,a.button{padding:10px 18px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);border-radius:999px;cursor:pointer;white-space:nowrap;flex:none}
a.button{display:inline-block;text-align:center}   /* 로그인 판의 "Google 계정으로 들어가기"(index.html) — 링크지만 단추처럼. [hidden] 규칙(위)이 이겨서 숨김은 그대로 */
button.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
button.icon{background:transparent;color:var(--muted);border:0;padding:4px 8px;font-size:16px;margin-left:auto}
button.icon:hover{color:var(--fg)}
button.small{padding:5px 12px;font-size:13px}
button:disabled{opacity:.45;cursor:default}

.search{margin:48px 0 28px}
.search input{font-size:17px;padding:14px 18px;border-radius:999px}
.hero{margin-top:18vh}
.hero .search{margin:0}

.row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.list .row{cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:5px 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px}
.chip.on{border-color:var(--fg);background:var(--fg);color:#fff}
.sec{margin:26px 0}
.sec h3{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin:0 0 8px}
h1{font-size:22px;font-weight:700;margin:26px 0 2px;letter-spacing:-.01em}
h2{font-size:17px;font-weight:600;margin:18px 0 6px}
.sub{color:var(--muted);margin-bottom:6px}
.ent{cursor:pointer;border-bottom:1px dotted #bbb}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--muted);margin-left:6px;vertical-align:middle}
.tag.bad{background:var(--tag-bad);color:var(--bad)} .tag.ok{background:var(--tag-ok);color:var(--ok)} .tag.warn{background:var(--tag-warn);color:var(--warn)} .tag.unk{background:var(--tag-unk);color:var(--unk)}
details{border-top:1px solid var(--line);padding:6px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;padding:6px 0}
summary::-webkit-details-marker{display:none}
summary .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details[open] summary .grow{white-space:normal}
summary .n{color:var(--faint);font-size:13px}
.body{padding:4px 0 10px 0}
.line{padding:4px 0;font-size:14px}
.line .src{font-size:12px;color:var(--faint);margin-left:8px}
.memo{color:var(--muted);font-size:13px;margin-left:8px}
.more{display:inline-block;margin-top:6px;font-size:13px;color:var(--accent);cursor:pointer}
.crumb{font-size:13px;color:var(--muted);margin-top:14px}
.crumb a{cursor:pointer}
.text{white-space:pre-wrap;line-height:1.75}
.quote{background:var(--soft);border-radius:12px;padding:14px 18px;white-space:pre-wrap;line-height:1.8}
.cur{background:var(--hl);border-radius:8px;padding:6px 10px;margin:0 -10px}
.status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin:14px 0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.verdict{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.verdict .mark{width:9px;height:9px;border-radius:50%;flex:none;position:relative;top:1px}
.mark.일치{background:var(--ok)} .mark.모순{background:var(--bad)} .mark.미상{background:var(--warn)} .mark.신규{background:var(--unk)} .mark.대상아님,.mark.수정됨{background:var(--faint)}
.kbd{font-family:var(--mono);font-size:12px;background:var(--soft);padding:1px 6px;border-radius:6px}
.right{margin-left:auto}
.actions{display:flex;gap:10px;align-items:center;margin-top:12px}

/* chat */
.chat{display:flex;flex-direction:column;min-height:60vh}
.msgs{flex:1;display:flex;flex-direction:column;gap:14px;padding:12px 0}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;white-space:pre-wrap;line-height:1.7}
.msg.me{align-self:flex-end;background:var(--soft)}
.msg.them{align-self:flex-start;border:1px solid var(--line)}
.msg.typing{color:var(--muted);border-color:transparent;padding-left:2px}
.composer{position:sticky;bottom:0;background:var(--bg);padding:12px 0 18px;display:flex;gap:10px;align-items:flex-end}
.composer textarea{min-height:48px;max-height:180px;border-radius:16px}
.composer button{height:48px;padding:0 20px}
.convs .row{padding:10px 0;cursor:pointer}
select.sel{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);max-width:220px}
.convs .row .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar{display:flex;gap:14px;align-items:baseline;margin-top:8px;color:var(--muted)}
.topbar b{color:var(--fg)}
.picker .row{padding:10px 0}
.hint{color:var(--faint);font-size:13px;margin-top:10px}
.pre{font-family:var(--mono);font-size:12px;white-space:pre-wrap;background:var(--soft);padding:10px 12px;border-radius:10px;max-height:360px;overflow:auto}
.ev{font-size:13px;padding:3px 0;color:var(--muted)}
.ev b{color:var(--fg);font-weight:600}

/* 진행 중 띠 — 헤더 바로 아래, 모든 탭에서 보인다 */
#running{max-width:860px;margin:0 auto;padding:0 28px}
.runrow{display:flex;align-items:center;gap:10px;padding:8px 14px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:12px;background:var(--soft);font-size:13px;cursor:pointer}
.runrow b{font-weight:600}
.runrow .dot{flex:none}
.runrow.done{background:transparent}                      /* 끝난 줄은 조용히 남는다 — 눌러서 결과로 가거나 ×로 닫는다 */
.dot.ok{background:var(--ok);animation:none}
.dot.bad{background:var(--bad);animation:none}
.dot.off{background:var(--faint);animation:none}
.runrow button.icon{margin-left:0;padding:0 2px;font-size:17px;line-height:1}
button.link{background:none;border:0;color:var(--muted);padding:2px 6px;font-size:13px;text-decoration:underline;flex:none}
button.link:hover{color:var(--bad)}
.status button.link{margin-left:auto}

/* 캐릭터 얼굴 */
.ava{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--soft);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;font-weight:600}
.ava.talk{width:52px;height:52px;font-size:21px}          /* 대화 말풍선 옆 */
.chat .topbar .ava{width:52px;height:52px;font-size:21px} /* 대화 머리 */
.ava.ph{border:1px solid var(--line)}
.picker .row{align-items:center;gap:12px}
.topbar{align-items:center}
.turn{display:flex;gap:12px;align-items:flex-end;max-width:100%}
.turn.me{justify-content:flex-end}
.turn .msg{max-width:calc(84% - 64px)}
.msg.typing{display:flex;align-items:center;gap:8px}

/* ── 지난 실행 목록(검증·생성 탭 아래) ── */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:13px}
.brief{background:var(--soft);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.brief .text{font-size:14px;line-height:1.7}

/* ── 이벤트 스토리 읽기 ── */
.eptop{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-size:13px}
.eptop button{margin-left:auto}
.epwrap details.chap > summary{font-weight:600}
/* 대본은 읽는 판이라 가운데 단(760px)을 벗어나 넓게 쓴다 — 줄바꿈이 적어야 읽힌다 */
.epwrap{position:relative;left:50%;transform:translateX(-50%);width:min(1000px,calc(100vw - 56px))}
.ep{padding-bottom:14px}
.ep .scene{display:flex;align-items:center;gap:10px;margin:20px 0 10px;color:var(--muted);font-size:12.5px;letter-spacing:.02em}
.ep .scene::after{content:"";flex:1;height:1px;background:var(--line)}
.ep .l{display:grid;grid-template-columns:24px 4.6em 1fr;gap:0 10px;padding:4px 0;line-height:1.75;align-items:start}
.ep .l .face{padding-top:2px}
.ep .l .who{color:var(--muted);font-size:13px;text-align:right;overflow-wrap:anywhere;padding-top:3px}
.ep .l.nar .t{color:var(--muted);font-style:italic}
.ep .l.think .t{color:var(--muted)}
.ava.mini{width:22px;height:22px;font-size:11px}
@media (max-width:560px){
  .ep .l{grid-template-columns:22px 1fr;gap:0 8px;padding:6px 0}
  .ep .l .who,.ep .l .t{grid-column:2}
  .ep .l .who{text-align:left;font-size:12px;padding-top:0}
  .ep .l .who:empty{display:none}
}