/* ── 디자인 토큰 ──
   맑은 아침 하늘(배경) · 맑은 파랑(주요 동작) · 산호(완성 도장·브랜드) · 형광펜(첨삭 인용) · 빨간펜(꼭 고칠 것).
   밝게가 기본이자 유일한 자동 테마다. 어둡게는 설정에서 고를 때만 (:root[data-theme="dark"], app.js 가 붙인다).
   *-ink·accent-strong 은 같은 색의 글자용 짙은 값: 흰 바탕·옅은 배경(soft) 위 글자도 WCAG AA(4.5:1)를 넘도록 둔다.
   --ink3 은 3:1 이 안 되므로 글자에는 쓰지 않는다 (자리 표시 글자·비활성·장식 선만). */
:root {
  --bg: #F5F9FF; --bg2: #EEF4FF; --panel: #FFFFFF; --field: #FFFFFF;
  --ink: #16213A; --ink2: #4C5A75; --ink3: #8A96AD; --placeholder: #66738D; --rule: #DDE6F5; --rule-strong: #C3D0E8;
  --accent: #3366FF; --accent-strong: #2F5BE6; --accent-ink: #FFFFFF; --accent-soft: rgba(51, 102, 255, .10);
  --coral: #FF6F7D; --coral-ink: #F6516C; --coral-soft: rgba(255, 111, 125, .14); /* coral-ink: 도장 글자·테두리용 — 흰 바탕에서 큰 글자 기준 3:1 (불투명도 .92 포함) */
  --bubble-user: rgba(51, 102, 255, .16); /* 내 말풍선: 인사담당자 말풍선(--bg2)과 구분되게 accent-soft 보다 한 단계 짙게 */
  --highlight: #FFF1A6; --redpen: #E5484D; --redpen-ink: #C42E35;
  --ok: #16A370; --ok-ink: #0B7A54; --warn: #D98A0B; --warn-ink: #946000; --bad: var(--redpen); --bad-ink: var(--redpen-ink);
  --ok-soft: rgba(22, 163, 112, .14); --warn-soft: rgba(217, 138, 11, .14); --bad-soft: rgba(229, 72, 77, .14);
  --on-status: #FFFFFF;
  --shadow: 0 1px 2px rgba(22, 33, 58, .05), 0 8px 24px rgba(51, 102, 255, .08);
  --shadow-lift: 0 2px 4px rgba(22, 33, 58, .06), 0 12px 32px rgba(51, 102, 255, .14);
  --backdrop: rgba(22, 33, 58, .35);
  --radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
  --font-display: "Gowun Dodum", "IBM Plex Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-body: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0E1527; --bg2: #1B2742; --panel: #16203A; --field: #0E1527;
  --ink: #EAF0FF; --ink2: #B5C1DC; --ink3: #8391B0; --placeholder: #93A0BD; --rule: #2A3858; --rule-strong: #3B4D74;
  --accent: #7DA2FF; --accent-strong: #9DB9FF; --accent-ink: #0E1527; --accent-soft: rgba(125, 162, 255, .16);
  --coral: #FF8A95; --coral-ink: #FF8A95; --coral-soft: rgba(255, 138, 149, .16);
  --bubble-user: rgba(125, 162, 255, .16);
  --highlight: rgba(255, 241, 166, .22); --redpen: #FF6B70; --redpen-ink: #FF8A8E;
  --ok: #3DD68C; --ok-ink: #3DD68C; --warn: #F5B544; --warn-ink: #F5B544;
  --ok-soft: rgba(61, 214, 140, .16); --warn-soft: rgba(245, 181, 68, .16); --bad-soft: rgba(255, 107, 112, .16);
  --on-status: #0E1527;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --backdrop: rgba(4, 8, 18, .6);
  color-scheme: dark;
}


* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); line-height: 1.65;
  font-family: var(--font-body); font-size: 15px; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; /* 한국어: 어절 단위로 줄을 바꾼다 */
}
a { color: var(--accent-strong); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
textarea { resize: vertical; }
::selection { background: var(--highlight); color: var(--ink); } /* 형광펜: 본문에서 문장을 드래그해 고칠 곳을 고를 때도 같은 펜 */
::placeholder { color: var(--placeholder); opacity: 1; } /* 흰 바탕 4.77:1, 하늘 바탕 4.52:1 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
/* 제목·단계 이름은 둥근 Gowun Dodum(400 한 굵기가 곧 모양이다 — 굵게 하지 않는다), 나머지는 IBM Plex Sans KR */
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 .6rem; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--bg2); padding: .05em .4em; border-radius: 6px; }
.hidden { display: none !important; }
[hidden] { display: none !important; } /* .btn 등 display를 지정한 요소에도 hidden 속성이 먹게 한다 (설정 대화상자의 모드별 버튼) */
.muted { color: var(--ink2); }
.small { font-size: .85rem; }
.tiny { font-size: .78rem; }
.mono { font-family: var(--font-mono); }
.right { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 상단 바 ── */
.topbar {
  /* 홈 화면 앱(viewport-fit=cover)에서는 상태 표시줄 아래까지 배경이 차도록 위·옆 안전 영역만큼 안쪽 여백을 둔다 (데스크톱에서는 0) */
  position: sticky; top: 0; z-index: 20; background: var(--panel);
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px rgba(51, 102, 255, .06);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: calc(.65rem + env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) .65rem max(1.25rem, env(safe-area-inset-left, 0px));
}
.brand { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .55rem; color: var(--ink); }
/* 브랜드 점 = 작은 도장: 산호 원 안에 흰 고리 */
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none;
  background: radial-gradient(circle closest-side, var(--coral) 0 30%, var(--panel) 36% 60%, var(--coral) 66%);
}
.steps { display: flex; gap: .5rem; flex: 0 1 auto; min-width: 0; margin: 0 auto; overflow-x: auto; position: relative; padding: 2px; }
/* 네 단계는 얇은 선(트랙) 위에 놓인 알약 — 순서가 곧 정보라 번호를 둔다 */
.steps::before { content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: 50%; height: 2px; margin-top: -1px; background: var(--rule); border-radius: 2px; }
.step {
  position: relative; border: 1px solid var(--rule); background: var(--panel); color: var(--ink2); padding: .28rem .85rem .28rem .32rem; border-radius: 999px; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: .95rem; line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}
.step .n {
  width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--bg2); color: var(--ink2); display: inline-grid; place-items: center; flex: none;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
}
.step:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--ink); }
.step.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(51, 102, 255, .24); }
.step.active .n { background: var(--accent-ink); color: var(--accent-strong); }
.step.done { color: var(--ink); }
.step.done .n { background: var(--ok-soft); color: var(--ok-ink); font-family: var(--font-body); font-weight: 600; }
.step:disabled { color: var(--ink3); cursor: not-allowed; }
.step:disabled .n { color: var(--ink3); }
.topbar-actions { display: flex; gap: .4rem; align-items: center; }

/* ── 레이아웃 ── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .side { order: 2; } }
@media (max-width: 640px) {
  .topbar { gap: .5rem .75rem; }
  .steps { order: 3; width: 100%; flex-basis: 100%; margin: 0; }
  .brand { flex: 1; }
}
.stage { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 1.25rem; }
.side .card { margin-bottom: 0; }

/* ── 카드 ── */
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.35rem; margin-bottom: 1.25rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap; }
.card-head h2 { font-size: 1.35rem; }
.card > .card-head:last-child { margin-bottom: 0; } /* 머리만 있는 카드(폰의 작성 머리 등) 아래가 비어 보이지 않게 */
.card-head h3 { font-size: 1rem; }
.card-title-sub { color: var(--ink2); font-size: .88rem; margin-top: .3rem; }
/* 문항 카드 머리: 제목 길이와 상관없이 제목 아래에 상태·버튼 줄 (카드마다 같은 배치) */
.answer-card > .card-head { flex-direction: column; align-items: stretch; gap: .6rem; }
/* 완성 문항 카드: 「복사」는 늘 제목 오른쪽 */
.final-card > .card-head { flex-wrap: nowrap; }
.final-card > .card-head > .btn { flex: none; }
/* 버튼만 든 마무리 줄은 흰 카드 없이 하늘 바탕 위에 (폰에서는 하단 동작 바와 겹치므로 숨긴다 — 아래 640px) */
.card.action-card { background: transparent; border: 0; box-shadow: none; padding: .1rem 0 0; }
/* 묶음 제목: 아래 입력 이름표(.82rem/600)보다 한 단계 위로 보이게 제목 글꼴로 (굵게 하지 않는다) */
.section-title { font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: -.005em; color: var(--ink); margin: 1.3rem 0 .5rem; }
dialog .section-title { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }

/* ── 폼 ── */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .95rem; }
.field label { font-size: .82rem; color: var(--ink); font-weight: 600; }
.field .hint { font-size: .78rem; color: var(--ink2); }
.input, .field input[type=text], .field input[type=number], .field input[type=password], .field input[type=url], .field select, .field textarea {
  width: 100%; border: 1px solid var(--rule); background: var(--field); border-radius: var(--radius-sm); padding: .6rem .8rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .field input:hover, .field select:hover, .field textarea:hover, .q-row textarea:hover, .answer-text:hover { border-color: var(--rule-strong); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.field label.check { font-weight: 400; font-size: .9rem; }

/* ── 버튼 ── */
.btn {
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink); padding: .55rem 1rem; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 500; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn:hover:not(:disabled) { border-color: var(--rule-strong); background: var(--bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 14px rgba(51, 102, 255, .22); }
.btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(51, 102, 255, .28); }
.btn.primary:active:not(:disabled) { transform: none; }
.btn.danger { color: var(--redpen-ink); }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: transparent; }
.btn.sm { padding: .36rem .72rem; font-size: .82rem; border-radius: 10px; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--accent-soft); border-color: transparent; }
.btn.ghost.danger:hover:not(:disabled) { background: var(--bad-soft); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btn-row.end { justify-content: flex-end; }
.chip {
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink2); border-radius: 999px; padding: .28rem .8rem; font-size: .82rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.chip.static { cursor: default; background: var(--bg2); border-color: transparent; color: var(--ink); }
.chip.static:hover { background: var(--bg2); border-color: transparent; color: var(--ink); }

/* ── 배지·상태 ── */
.pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 600; background: var(--bg2); color: var(--ink2); border: 1px solid transparent; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill.bad { background: var(--bad-soft); color: var(--bad-ink); }
.pill.busy { background: var(--accent-soft); color: var(--accent-strong); }
.spinner { width: .8em; height: .8em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 문항 편집 ── */
.q-row { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .85rem .95rem; margin-bottom: .7rem; background: var(--bg); }
.q-row .q-top { display: flex; gap: .55rem; align-items: center; margin-bottom: .5rem; }
.q-id { font-family: var(--font-mono); font-weight: 500; color: var(--accent-strong); }
.q-row .q-id, .answer-card h3 .q-id { background: var(--accent-soft); border-radius: 6px; padding: .05rem .45rem; font-size: .8rem; }
.answer-card h3 .q-id { margin-right: .3rem; vertical-align: .08em; }
.q-row textarea { min-height: 3.2em; width: 100%; border: 1px solid var(--rule); background: var(--field); border-radius: var(--radius-sm); padding: .6rem .8rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.q-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-row .q-meta { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: .5rem; margin-top: .5rem; }
@media (max-width: 640px) { .q-row .q-meta { grid-template-columns: 1fr; } }

/* ── 인터뷰 ── */
.chat { display: flex; flex-direction: column; gap: .8rem; margin-bottom: .9rem; max-height: 55vh; overflow-y: auto; padding: .2rem .2rem .2rem 0; }
.msg { max-width: 88%; padding: .7rem .95rem; border-radius: 16px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.7; }
/* 인사담당자(에이전트) 말풍선: 왼쪽에 작은 산호 도장 아바타 */
.msg.agent { align-self: flex-start; position: relative; margin-left: 1.75rem; background: var(--bg2); border-top-left-radius: 6px; }
.msg.agent::before {
  content: ''; position: absolute; left: -1.75rem; top: .25rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--coral) 0 28%, var(--panel) 34% 58%, var(--coral) 64%);
}
.msg.user { align-self: flex-end; max-width: min(78%, 34rem); background: var(--bubble-user); border-top-right-radius: 6px; } /* 내 말은 오른쪽으로 들여 써서 자리로도 화자가 갈린다 */
.msg.note { align-self: center; background: transparent; color: var(--ink2); font-size: .85rem; border: 1px dashed var(--rule-strong); border-radius: 12px; }
.msg .why { display: block; margin-top: .45rem; font-size: .8rem; color: var(--ink2); }
.msg .example { display: block; margin-top: .2rem; font-size: .8rem; color: var(--ink2); }
.msg.streaming::after { content: '▍'; animation: blink 1s steps(2) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.answer-box textarea { min-height: 6em; }
.coverage .ok { color: var(--ok-ink); font-weight: 600; }

/* ── 작성 ── */
.answer-card .body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.answer-text { width: 100%; min-height: 14em; border: 1px solid var(--rule); background: var(--field); border-radius: var(--radius-sm); padding: .85rem 1rem; line-height: 1.8; white-space: pre-wrap; transition: border-color .15s, box-shadow .15s; }
.answer-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.answer-text.streaming { border-color: var(--accent); }
.count { display: flex; justify-content: space-between; align-items: center; gap: .5rem .75rem; font-size: .82rem; color: var(--ink2); flex-wrap: wrap; }
.count b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.count.over b, .count.over > span:last-child { color: var(--redpen-ink); }
.count.under b, .count.under > span:last-child { color: var(--warn-ink); }
.count.ok b { color: var(--ok-ink); }
.bar { height: 6px; background: var(--bg2); border-radius: 999px; overflow: hidden; flex: 1 1 120px; }
.bar > i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.bar.over > i { background: var(--redpen); } .bar.under > i { background: var(--warn); }
.critique { border-top: 1px dashed var(--rule-strong); padding-top: .95rem; }
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 1.25rem; margin: .55rem 0 .7rem; }
@media (max-width: 640px) { .scores { grid-template-columns: repeat(2, 1fr); gap: .35rem 1rem; } }
.score { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.score .dots { letter-spacing: .12em; color: var(--accent); font-size: .78rem; }
.score .dots span { color: var(--rule-strong); }
.score .dots span.on { color: var(--accent); }
.total { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.total .small { font-family: var(--font-body); letter-spacing: 0; margin-left: .15rem; }
.issue { border-left: 3px solid var(--rule-strong); padding: .3rem .75rem; margin: .45rem 0; font-size: .88rem; line-height: 1.7; }
.issue.high { border-color: var(--redpen); } .issue.medium { border-color: var(--warn); } .issue.low { border-color: var(--ink3); }
/* 형광펜: 첨삭이 짚은 원문 구절 */
.issue q {
  font-style: normal; color: var(--ink); quotes: "“" "”";
  background: linear-gradient(transparent 40%, var(--highlight) 40%); padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.issue .fix { color: var(--ink2); margin-top: .1rem; }
/* 빨간펜: 반드시 고칠 것 */
.issue.must { position: relative; padding-left: 2.05rem; }
.issue.must::before {
  content: ''; position: absolute; left: .65rem; top: .52rem; width: .95rem; height: .95rem; background: var(--redpen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.3 1.6a1.5 1.5 0 0 1 2.1 0l1 1a1.5 1.5 0 0 1 0 2.1L5.6 13.5l-3.9 1 1-3.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.3 1.6a1.5 1.5 0 0 1 2.1 0l1 1a1.5 1.5 0 0 1 0 2.1L5.6 13.5l-3.9 1 1-3.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.versions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.versions .v { border: 1px solid var(--rule); background: var(--panel); color: var(--ink2); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; cursor: pointer; transition: border-color .15s, color .15s; }
.versions .v:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.versions .v.current { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); font-weight: 600; }
.edit-box { display: flex; gap: .5rem; align-items: stretch; }
.edit-box input { flex: 1; }
.stage-log { font-size: .82rem; color: var(--ink2); display: flex; align-items: center; gap: .4rem; }

/* ── 사이드 ── */
.side .card-head h3, .side .card > h3 { font-size: .98rem; }
.exp { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .65rem .8rem; margin-bottom: .55rem; background: var(--bg); font-size: .85rem; }
.exp .t { font-weight: 600; display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
.exp .t .id { color: var(--ink2); font-weight: 500; font-size: .72rem; font-family: var(--font-mono); }
.exp .k { color: var(--ink2); font-size: .78rem; margin-top: .2rem; }
.exp details { margin-top: .3rem; }
.exp summary { cursor: pointer; color: var(--ink2); font-size: .8rem; }
.exp summary:hover { color: var(--accent-strong); }
.exp dl { margin: .35rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .55rem; font-size: .8rem; }
.exp dt { color: var(--ink2); font-weight: 600; } .exp dd { margin: 0; white-space: pre-wrap; }
.coverage { display: grid; gap: .3rem; font-size: .82rem; }
.coverage .c { display: flex; justify-content: space-between; gap: .5rem; }
.coverage .c > span:first-child { font-family: var(--font-mono); font-weight: 500; }
.usage { font-size: .82rem; color: var(--ink2); display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; }
.usage b { color: var(--ink); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; text-wrap: balance; } /* 긴 값(정상 · 10. 11. 오전 06:30 초기화)이 줄을 바꿀 때 마지막 낱말만 홀로 남지 않게 */

/* ── 대화상자·토스트 ── */
dialog { border: 1px solid var(--rule); border-radius: 20px; background: var(--panel); color: var(--ink); padding: 0; max-width: 560px; width: calc(100% - 2rem); box-shadow: 0 24px 64px rgba(22, 33, 58, .2); }
/* ::backdrop 은 오래된 브라우저에서 :root 의 변수를 물려받지 않으므로 값을 그대로 쓴다 */
dialog::backdrop { background: rgba(22, 33, 58, .35); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(4, 8, 18, .6); }
dialog .dlg-body { padding: 1.35rem 1.45rem; max-height: 80vh; overflow-y: auto; }
dialog h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.notice { background: var(--warn-soft); border: 1px solid transparent; border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .86rem; color: var(--ink); margin: .7rem 0; }
.notice.info { background: var(--accent-soft); }
.notice.ok { background: var(--ok-soft); }
.notice.bad { background: var(--bad-soft); }
#toast { position: fixed; inset: auto auto 1.2rem 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none; }
/* app.js 가 토스트 상자를 popover(manual)로 띄워 모달 대화상자 위(top layer)에 둔다 — 브라우저 기본 popover 모양(가운데 배치·테두리·여백·배경)은 지운다 */
#toast[popover] { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.toast { background: var(--ink); color: var(--bg); padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lift); max-width: 90vw; }
.toast.bad { background: var(--redpen-ink); color: var(--on-status); }
.toast.ok { background: var(--ok-ink); color: var(--on-status); }

/* ── 완성 ── */
.done-meta { color: var(--ink2); font-size: .82rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.stamp-pending { color: var(--ink2); font-size: .85rem; margin-top: .45rem; }
/* 도장이 있으면: 왼쪽에 제목·내려받기, 오른쪽에 도장 */
.done-head { overflow: hidden; overflow: clip; } /* 도장이 크게 찍혀 줄어드는 첫 순간에도 카드 밖(가로 스크롤)으로 넘치지 않게 */
.done-head.complete > .card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title stamp" "actions stamp"; align-items: start; gap: .9rem 1.75rem; }
.done-head.complete > .card-head > .done-title { grid-area: title; }
.done-head.complete > .card-head > .btn-row { grid-area: actions; }
.done-head.complete > .card-head > .stamp { grid-area: stamp; align-self: center; margin: .1rem .35rem .1rem 0; }
/* 완성 머리(데스크톱): 「전체 복사」 하나만 주요 동작, 파일 내보내기는 작게 — 폰은 하단 동작 바의 「전체 복사」가 주요 동작이라 그대로 둔다 */
@media (min-width: 641px) {
  .done-head .btn-row > [data-action="copy-all"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 14px rgba(51, 102, 255, .22); }
  .done-head .btn-row > [data-action="copy-all"]:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
  .done-head .btn-row > .btn:not([data-action="copy-all"]) { padding: .36rem .72rem; font-size: .82rem; border-radius: 10px; }
}

/* ── 합격 도장: 이 화면의 단 하나의 굵은 요소 ──
   산호 이중 테두리(바깥 3px + 4px 안쪽의 가는 고리), 제목 글꼴, -8° 기울기, 한쪽으로 옅어지는 잉크와 작은 빈 점(마스크) */
.stamp {
  position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid var(--coral-ink); color: var(--coral-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 400; font-size: 1.65rem; line-height: 1; letter-spacing: .08em; text-indent: .08em;
  transform: rotate(-8deg); opacity: .92; user-select: none;
  -webkit-text-stroke: .6px currentColor; /* 잉크 번짐: 400 한 굵기는 그대로 두고 획에 도장다운 무게를 */
  --stamp-fade: .74;
  --ink-mask:
    radial-gradient(circle at 71% 27%, transparent 0 1.3px, #000 2px),
    radial-gradient(circle at 24% 64%, transparent 0 1.1px, #000 1.8px),
    radial-gradient(circle at 57% 83%, transparent 0 1.5px, #000 2.2px),
    radial-gradient(circle at 86% 61%, transparent 0 .9px, #000 1.6px),
    radial-gradient(circle at 38% 14%, transparent 0 .8px, #000 1.4px),
    radial-gradient(135% 135% at 22% 18%, #000 42%, rgba(0, 0, 0, var(--stamp-fade)) 100%);
  -webkit-mask-image: var(--ink-mask); -webkit-mask-composite: source-in;
  mask-image: var(--ink-mask); mask-composite: intersect;
}
.stamp::before { content: ''; position: absolute; inset: 4px; border: 1.5px solid currentColor; border-radius: 50%; }
.stamp small { font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: 0; text-indent: 0; -webkit-text-stroke: 0; }
.stamp.enter { animation: stamp-in 320ms ease-out both; } /* 길이는 app.js 의 STAMP_ENTER_MS 와 같게 */
@keyframes stamp-in {
  from { opacity: 0; transform: scale(1.6) rotate(-8deg); }
  to { transform: scale(1) rotate(-8deg); } /* 끝 불투명도는 요소 값을 따른다 (밝게 .92, 어둡게 1) */
}
@media (prefers-reduced-motion: reduce) { .stamp.enter { animation: none; } }
:root[data-theme="dark"] .stamp { opacity: 1; --stamp-fade: .85; } /* 남색 위에서 탁한 장밋빛으로 바래지 않게 */

.final { white-space: pre-wrap; line-height: 1.85; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 1rem 1.1rem; background: var(--bg); }
.prep-q { border-top: 1px solid var(--rule); padding: .75rem 0; font-size: .9rem; }
.prep-q .intent { color: var(--ink2); font-size: .82rem; margin-top: .15rem; }
.empty { color: var(--ink2); font-size: .9rem; padding: .6rem 0; }
.kbd { font-family: var(--font-mono); font-size: .72rem; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 .3rem; color: var(--ink2); }
footer.site { text-align: center; color: var(--ink2); font-size: .78rem; padding: 1rem 1.25rem 2rem; max-width: 1200px; margin: 0 auto; }

/* ── 확인 대화상자 ── */
#confirm-dialog .dlg-body { padding: 1.2rem 1.3rem; }
#confirm-dialog p { white-space: pre-wrap; }
.runtime-badge { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: 0; color: var(--ink2); border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .55rem; }
.runtime-badge.server { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); }
.notice b { font-weight: 600; }

/* ── 서버 모드: 기기 간 동기화·텔레메트리 상태 (사이드바) ── */
.input.auto-w { width: auto; max-width: 100%; }
@media (min-width: 641px) { select.input.auto-w { max-width: 15rem; padding-top: .45rem; padding-bottom: .45rem; font-size: .88rem; } } /* 문항 카드 머리의 두 선택 상자가 한 줄에 들어가게 (폰은 16px 그대로) */
.server-card .card-head { align-items: center; }
.server-card .sync-status { overflow-wrap: anywhere; }
.server-card .telemetry { margin-top: .35rem; }
#s-synccode { letter-spacing: .03em; }
#s-sync-block .btn-row { margin-top: .2rem; }

/* ── 경험 인터뷰 Q&A 내려받기·자동 저장 ── */
.iv-side { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.iv-side .qa-row { gap: .35rem; }
.autosave-line { margin-top: .6rem; overflow-wrap: anywhere; color: var(--ink2); }
.interrupted-notice { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.interrupted-notice .btn { flex: none; }
.menu-col { flex-direction: column; align-items: stretch; }
.menu-col > .btn { justify-content: center; }
.menu-split { display: flex; gap: .5rem; flex-wrap: nowrap; }
.menu-split .btn { justify-content: center; }
.menu-split .btn:first-child { flex: 1 1 auto; }
.folder-row { display: flex; flex-direction: column; gap: .4rem; }
.folder-row .folder-status { overflow-wrap: anywhere; }
.folder-row .status-on { color: var(--ok-ink); }
.folder-row .status-needs-permission { color: var(--warn-ink); }
.folder-row .status-error { color: var(--bad-ink); }
.snap-list { display: flex; flex-direction: column; gap: .45rem; }
.snap { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .55rem .75rem; background: var(--bg); }
.snap[data-reason="before-new-project"], .snap[data-reason="before-restore"] { border-left: 3px solid var(--accent); }
.snap-main { min-width: 0; }
.snap-time { font-size: .82rem; color: var(--ink2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.snap-label { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.snap .btn-row { flex: none; gap: .3rem; }

/* ── 폰 하단 동작 바: 데스크톱에서는 숨기고, 640px 이하에서만 화면 아래에 붙인다 ── */
.actionbar { display: none; }

/* ── 움직임 줄이기: 버튼 들림·전환 효과를 끈다 (완성 도장은 아래 .stamp 에서 따로) ── */
@media (prefers-reduced-motion: reduce) {
  .btn, .step, .chip, .versions .v, .input, .answer-text, .q-row textarea, .field input, .field select, .field textarea { transition: none; }
  .btn.primary:hover:not(:disabled) { transform: none; }
}

/* ── 폰(≤640px) ── */
@media (max-width: 640px) {
  /* iOS 는 16px 미만 입력란에 초점이 가면 화면을 확대한다 */
  input, select, textarea, .input, .field input, .field select, .field textarea, .q-row textarea, .answer-text { font-size: 16px; }
  /* 누르기 쉬운 크기 (최소 44px) */
  .btn, .btn.sm, .step { min-height: 44px; }
  .btn.sm { padding: .35rem .7rem; font-size: .85rem; }
  /* 상단 바: 한 줄에 이름·배지·버튼, 둘째 줄에 4단계를 같은 폭으로 (번호 위·이름 아래) */
  .topbar { padding-left: max(.9rem, env(safe-area-inset-left, 0px)); padding-right: max(.9rem, env(safe-area-inset-right, 0px)); }
  .brand { font-size: 1.05rem; gap: .4rem; white-space: nowrap; min-width: 0; }
  .runtime-badge { white-space: nowrap; font-size: .68rem; padding: .05rem .45rem; }
  .topbar-actions { gap: .3rem; }
  .topbar-actions .btn.sm { padding: .35rem .65rem; }
  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; overflow: visible; padding: 0; }
  .steps::before { left: 12.5%; right: 12.5%; top: calc(.3rem + .725rem + 1px); }
  .step { flex-direction: column; justify-content: center; gap: .2rem; padding: .3rem .2rem; border-radius: 14px; font-size: .8rem; line-height: 1.2; white-space: normal; text-align: center; }
  .chip { min-height: 36px; display: inline-flex; align-items: center; }
  .layout { padding: .75rem max(.75rem, env(safe-area-inset-right, 0px)) .75rem max(.75rem, env(safe-area-inset-left, 0px)); gap: .75rem; }
  .side { gap: .75rem; }
  .card { padding: 1rem .95rem; margin-bottom: .75rem; }
  .card-head h2 { font-size: 1.25rem; }
  .done-head.complete > .card-head { grid-template-areas: "title stamp" "actions actions"; gap: .75rem 1rem; }
  .card-head > .btn-row { width: 100%; }
  .card-head > .coverage, .iv-side > .coverage { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
  .card-head > .iv-side { width: 100%; align-items: stretch; }
  .iv-side .qa-row .btn { flex: 1 1 auto; justify-content: center; }
  .msg.agent { max-width: calc(100% - 1.75rem); }
  .msg.user { max-width: 80%; }
  /* 문항 카드 머리: 상태 한 줄 + 버튼 네 칸 (「복사」만 홀로 다음 줄로 밀리지 않게) */
  .answer-card > .card-head > .btn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .answer-card > .card-head > .btn-row > .pill { grid-column: 1 / -1; justify-self: start; }
  .answer-card > .card-head > .btn-row > .btn { justify-content: center; padding-inline: .25rem; }
  .answer-card > .card-head > .btn-row > .btn:only-of-type { grid-column: 1 / -1; }
  /* 하단 동작 바에 같은 버튼이 있으므로 본문의 마무리 줄·머리 버튼은 숨긴다 */
  .action-card, .hide-phone { display: none; }
  .snap { flex-direction: column; align-items: stretch; }
  .snap .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .input.auto-w { flex: 1 1 100%; width: 100%; }
  .edit-box { flex-direction: column; }
  .edit-box .btn { justify-content: center; }
  /* 인터뷰 답변 입력창은 본문 흐름에 두되 화면 아래에 붙는다 */
  .answer-box {
    position: sticky; bottom: 0; z-index: 5; background: var(--panel);
    margin: 0 -.95rem -1rem; padding: .65rem .95rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -6px 18px rgba(22, 33, 58, .06);
  }
  .answer-box .field { margin-bottom: .5rem; gap: .2rem; }
  .answer-box label .muted { display: none; } /* Ctrl+Enter 안내는 폰에서 의미가 없다 */
  .answer-box textarea { height: 5.4em; min-height: 3.4em; }
  .answer-box .btn-row { gap: .4rem; }
  .answer-box .btn-row > span:empty { display: none; }
  .answer-box .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .actionbar {
    display: flex; gap: .5rem; position: sticky; bottom: 0; z-index: 15;
    margin: 0 -.75rem; padding: .6rem max(.75rem, env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(.75rem, env(safe-area-inset-left, 0px));
    background: var(--panel); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgba(22, 33, 58, .08);
  }
  .actionbar .btn { flex: 1 1 0; justify-content: center; min-width: 0; text-align: center; }
  /* 토스트가 하단 동작 바를 가리지 않게 */
  #toast { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); width: calc(100% - 1.5rem); }
  /* 인터뷰 답변 입력창(약 230px)이 아래에 붙어 있을 때는 그 위로 (「답변 보내기」를 가리지 않게) */
  body:has(.answer-box) #toast { bottom: calc(15rem + env(safe-area-inset-bottom, 0px)); }
  .toast { max-width: 100%; }
  /* 대화상자는 화면 폭을 다 쓰는 아래쪽 시트로 */
  dialog { width: 100%; max-width: 100%; max-height: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; border-width: 1px 0 0; }
  dialog .dlg-body { max-height: 88vh; max-height: 88dvh; padding: 1.1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
  dialog .btn-row.end .btn { flex: 1 1 auto; justify-content: center; }
}