/* ============================================================
   genffice-tripreport — 2열 작업 패널 · 3열 대화창 · 4열 지면
   ============================================================ */

/* ============================================================
   2열 · 공통
   ============================================================ */

.grp { border-bottom: 1px solid var(--border-1); padding: 10px 12px; }
.grp-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.grp-h b { font-size: var(--fs-12); font-weight: 650; flex: 1; min-width: 0; }
.grp-h .n { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.grp-note { font-size: var(--fs-10); color: var(--text-3); line-height: 1.7; padding: 11px 12px; }
.grp-note b { font-weight: 650; color: var(--text-2); }

.tag {
  flex-shrink: 0; padding: 1px 6px; border-radius: 20px;
  border: 1px solid var(--border-2); background: var(--bg-app);
  font-size: var(--fs-10); font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.tag[data-s="ok"] { border-color: transparent; background: var(--success-subtle); color: var(--success); }
.tag[data-s="sug"] { border-color: transparent; background: var(--warning-subtle); color: var(--warning); }
.tag[data-s="ask"] { border-color: transparent; background: var(--danger-subtle); color: var(--danger); }
.tag[data-s="ev"] { border-color: var(--ev-border); background: var(--ev-subtle); color: var(--ev); }

/* --- 1단계 · 접수 파일 목록 --- */
.frow {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border-1);
  background: var(--bg-panel); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s;
}
.frow:hover { background: var(--bg-sidebar); }
.frow.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.frow .fi {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--r-6); background: var(--bg-subtle); color: var(--text-2);
}
.frow .fi svg { width: 14px; height: 14px; }
.frow[data-k="audio"] .fi { background: var(--accent-subtle); color: var(--accent-text); }
.frow[data-k="image"] .fi { background: var(--ev-subtle); color: var(--ev); }
.frow .fm { flex: 1; min-width: 0; }
.frow .fm b { display: block; font-size: var(--fs-12); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fm span { display: block; font-size: var(--fs-10); color: var(--text-3); margin-top: 1px; }
.frow .fd { flex-shrink: 0; font-size: var(--fs-10); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 접수 드롭존 — 파일 · 이미지를 여기로 끌어 놓는 자리 */
.drop {
  margin: 10px 12px; padding: 16px 12px;
  border: 1px dashed var(--border-3); border-radius: var(--r-8);
  background: var(--bg-sidebar); text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-subtle); }
.drop b { display: block; font-size: var(--fs-12); font-weight: 650; margin-bottom: 3px; }
.drop span { display: block; font-size: var(--fs-10); color: var(--text-3); line-height: 1.6; }

/* 출장 메타 체크리스트 — 사람이 칸을 채우는 게 아니라 AI직원이 읽어낸 결과 */
.mrow {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-1);
}
.mrow .ck {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid transparent; background: var(--success-subtle); color: var(--success);
  font-size: var(--fs-10); font-weight: 700;
}
.mrow .tx { flex: 1; min-width: 0; }
.mrow .tx b { display: block; font-size: var(--fs-10); font-weight: 600; color: var(--text-3); }
.mrow .tx span { display: block; font-size: var(--fs-12); font-weight: 550; margin-top: 1px; line-height: 1.5; }

/* --- 2단계 · 면담 세션 --- */
.srow {
  width: 100%; display: block; text-align: left; font: inherit;
  border: 0; border-bottom: 1px solid var(--border-1);
  background: var(--bg-panel); padding: 10px 12px; cursor: pointer;
  transition: background .12s;
}
.srow:hover { background: var(--bg-sidebar); }
.srow.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.srow-t { display: flex; align-items: center; gap: 7px; }
.srow-t .no {
  display: grid; place-items: center; width: 17px; height: 17px; flex-shrink: 0;
  border-radius: var(--r-4); background: var(--accent); color: #fff;
  font-size: var(--fs-10); font-weight: 700;
}
.srow-t b { font-size: var(--fs-12); font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .sm { display: flex; gap: 8px; margin: 4px 0 0 24px; font-size: var(--fs-10); color: var(--text-3); }
.srow .spk { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 0 24px; }
.spkchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 20px;
  border: 1px solid var(--border-2); background: var(--bg-app);
  font-size: 9.5px; font-weight: 600; color: var(--text-2);
}
.spkchip[data-side="kr"] { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }
.spkchip[data-side="bd"] { border-color: var(--border-2); }
.spkchip.ask { border-color: var(--danger-border); background: var(--danger-subtle); color: var(--danger); }
.spkchip i { font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; }

/* --- 3단계 · 교정 항목 --- */
.xrow {
  width: 100%; display: block; text-align: left; font: inherit;
  border: 0; border-bottom: 1px solid var(--border-1);
  background: var(--bg-panel); padding: 10px 12px; cursor: pointer;
  transition: background .12s;
}
.xrow:hover { background: var(--bg-sidebar); }
.xrow.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.xrow-t { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.xrow-t .kd { font-size: 9.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; }
.xrow-t .hit { margin-left: auto; font-size: var(--fs-10); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.xrow .dif { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-11); line-height: 1.5; }
.xrow .dif .a { color: var(--danger); text-decoration: line-through; text-decoration-color: var(--danger-border); min-width: 0; }
.xrow .dif .ar { flex-shrink: 0; color: var(--text-3); }
.xrow .dif .b { font-weight: 650; color: var(--accent-text); min-width: 0; }
.xrow .wy { font-size: var(--fs-10); color: var(--text-3); line-height: 1.55; margin-top: 5px; }

/* --- 4단계 · 논의 블록 트리 --- */
.trow {
  width: 100%; display: flex; gap: 7px; align-items: flex-start; text-align: left; font: inherit;
  border: 0; background: transparent; padding: 4px 12px 4px 0; cursor: pointer;
  border-radius: var(--r-4); color: var(--text-1);
}
.trow:hover { background: var(--bg-hover); }
.trow.sel { background: var(--accent-subtle); }
.trow .mk { flex-shrink: 0; font-size: var(--fs-10); color: var(--text-3); width: 12px; text-align: center; }
.trow .tt { flex: 1; min-width: 0; font-size: var(--fs-11); line-height: 1.55; }
.trow .evn {
  flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 3px;
  border: 1px solid var(--ev-border); background: var(--ev-subtle); color: var(--ev);
}
.trow .evn.none { border-color: var(--border-2); background: var(--bg-subtle); color: var(--text-3); }
.tsec { padding: 12px 12px 5px; font-size: var(--fs-11); font-weight: 700; color: var(--accent-text); }
.tsec .c { font-size: var(--fs-10); font-weight: 600; color: var(--text-3); margin-left: 4px; }
.tlist { padding: 0 0 10px 12px; border-bottom: 1px solid var(--border-1); }

/* --- 5단계 · 사진 배치 --- */
.prow {
  width: 100%; display: flex; gap: 9px; align-items: center; text-align: left; font: inherit;
  border: 0; border-bottom: 1px solid var(--border-1); background: var(--bg-panel);
  padding: 9px 12px; cursor: pointer; transition: background .12s;
}
.prow:hover { background: var(--bg-sidebar); }
.prow.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.prow .th { width: 40px; height: 30px; flex-shrink: 0; border-radius: var(--r-4); border: 1px solid var(--border-2); overflow: hidden; }
.prow .pm { flex: 1; min-width: 0; }
.prow .pm b { display: block; font-size: var(--fs-11); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pm span { display: block; font-size: var(--fs-10); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 사진 자리 표시 — 목업이라 실제 사진 대신 색면이다 */
.pf { width: 100%; height: 100%; display: grid; place-items: center; position: relative; }
.pf[data-tone="a"] { background: linear-gradient(135deg, #cfe3f2, #9dbdd8); }
.pf[data-tone="b"] { background: linear-gradient(135deg, #d6e8e2, #a2c8bd); }
.pf[data-tone="c"] { background: linear-gradient(135deg, #e3ddf2, #b6acd6); }
.pf[data-tone="d"] { background: linear-gradient(135deg, #f2e6d5, #d8c3a0); }
.pf[data-tone="e"] { background: linear-gradient(135deg, #d9e6f0, #a8c0d4); }
.pf[data-tone="f"] { background: linear-gradient(135deg, #e8dfe0, #cbb3b6); }
.pf[data-tone="g"] { background: linear-gradient(135deg, #dfe8d5, #b4c79c); }
.pf .pfi { font-size: 18px; opacity: .55; }

/* ============================================================
   3열 · 대화창
   ============================================================ */

.stream { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-panel); border-left: 0; overflow: hidden; }

.stream-head { flex: 0 0 auto; padding: 9px 14px 8px; border-bottom: 1px solid var(--border-1); }
.sh-t { display: flex; align-items: center; gap: 8px; }
.sh-av {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--r-6); background: var(--accent-subtle); border: 1px solid var(--accent-border); font-size: 13px;
}
.sh-t h2 { font-size: var(--fs-13); font-weight: 650; flex: 1; min-width: 0; }
.live {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--fs-10); font-weight: 700; color: var(--warning);
  background: var(--warning-subtle); border-radius: 20px; padding: 2px 7px;
}
.live i { width: 5px; height: 5px; border-radius: 50%; background: var(--warning); animation: stpulse 1s infinite; }
.sh-s { font-size: var(--fs-10); color: var(--text-3); margin: 4px 0 0 32px; }

/* 컨텍스트 스트립 — AI직원이 지금 무엇을 알고 있는지 */
.stream-ctx {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 7px 14px; border-bottom: 1px solid var(--border-1); background: var(--bg-sidebar);
}
.ctxchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--border-2); background: var(--bg-panel);
  font-size: 9.5px; font-weight: 600; color: var(--text-2);
}
.ctxchip b { font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

.beats { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 4px; }

.beat { margin-bottom: 10px; animation: bin .2s ease; }
@keyframes bin { from { opacity: 0; transform: translateY(5px) } }
.beat.say .bb {
  display: inline-block; max-width: 100%;
  padding: 8px 11px; border-radius: 3px 11px 11px 11px;
  background: var(--bg-subtle); font-size: var(--fs-12); line-height: 1.7;
}
.beat.me { text-align: right; }
.beat.me .bb {
  display: inline-block; max-width: 100%; text-align: left;
  padding: 8px 11px; border-radius: 11px 3px 11px 11px;
  background: var(--accent); color: #fff; font-size: var(--fs-12); line-height: 1.7;
}
.beat.log .bb {
  display: flex; gap: 7px; align-items: flex-start;
  padding: 5px 9px; border-left: 2px solid var(--border-2);
  font-size: var(--fs-10); color: var(--text-3); line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
.beat.log .bb::before { content: "⋯"; flex-shrink: 0; color: var(--border-3); }
.beat.done .bb {
  display: flex; gap: 7px; align-items: flex-start;
  padding: 7px 10px; border-radius: var(--r-6);
  background: var(--success-subtle); color: var(--success);
  font-size: var(--fs-11); font-weight: 600; line-height: 1.6;
}
.beat.ask .bb {
  padding: 10px 12px; border-radius: var(--r-8);
  border: 1px solid var(--danger-border); background: var(--danger-subtle);
  font-size: var(--fs-12); line-height: 1.7;
}
.beat.ask .bb .qh { display: flex; align-items: center; gap: 5px; font-size: var(--fs-10); font-weight: 700; color: var(--danger); margin-bottom: 5px; }
.beat.ask .bb .qh svg { width: 12px; height: 12px; flex-shrink: 0; }
.beat.done .bb svg { width: 12px; height: 12px; flex-shrink: 0; }
.beat.ask .opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.beat.ask .opts .btn { background: var(--bg-panel); }

.stream-foot { flex: 0 0 auto; }
.stream-foot .sbar { height: 2px; background: var(--bg-subtle); }
.stream-foot .sbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }

.composer { flex: 0 0 auto; padding: 8px 12px 10px; border-top: 1px solid var(--border-1); background: var(--bg-sidebar); }
.cchips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.cchip {
  border: 1px solid var(--border-2); border-radius: 20px; background: var(--bg-panel);
  padding: 3px 9px; font: inherit; font-size: var(--fs-10); font-weight: 600; color: var(--text-2); cursor: pointer;
}
.cchip:hover { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }
.cbox {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 6px; border: 1px solid var(--border-2); border-radius: var(--r-8); background: var(--bg-panel);
}
.cbox:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.cbox textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none;
  font: inherit; font-size: var(--fs-12); line-height: 1.6; max-height: 96px; padding: 3px 4px;
  background: transparent; color: var(--text-1);
}
.cbox .att {
  flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-6); background: transparent; color: var(--text-3); cursor: pointer;
}
.cbox .att:hover { background: var(--bg-hover); color: var(--accent-text); }
.cbox .att svg { width: 15px; height: 15px; }
.chint { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 9.5px; color: var(--text-3); flex-wrap: wrap; }
.kbd { border: 1px solid var(--border-2); border-radius: 3px; background: var(--bg-panel); padding: 0 4px; font-weight: 600; }
.cdisc { margin-top: 5px; font-size: 9px; color: var(--text-3); line-height: 1.55; }

/* ============================================================
   4열 · 보고서 지면 (A4)
   ============================================================ */

.pagewrap { padding: 20px 20px 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page {
  width: 100%; max-width: 660px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-2); border-radius: 2px;
  box-shadow: var(--sh-2); padding: 46px 52px 40px;
  font-size: 13.5px; line-height: 1.78; color: #111;
  position: relative;
}
.page .pgno { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 10px; color: #999; }

/* 표지 */
.cover { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.cover .ct1 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.cover .ct2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.cover .cln { width: 64px; height: 2px; background: #111; margin: 30px 0; }
.cover .cdt { font-size: 15px; font-weight: 600; }
.cover .corg { font-size: 12px; color: #555; margin-top: 44px; }

/* 관 머리 (I. 출장 개요) */
.ch { font-size: 16px; font-weight: 700; margin: 0 0 16px; padding-bottom: 7px; border-bottom: 1.5px solid #111; }
.ch:not(:first-child) { margin-top: 34px; }

/* 절 머리 (기관 면담) */
.sech {
  font-size: 14px; font-weight: 700; margin: 26px 0 12px;
  padding: 5px 11px; background: #f0f0f2; border-left: 3px solid var(--accent);
}
.sech:first-child { margin-top: 0; }

/* 계층 — 실제 결과보고서의 기호를 그대로 쓴다 */
.bh { font-size: 13.5px; font-weight: 700; margin: 16px 0 7px; }
.bh::before { content: "□ "; }
.ba, .bb2, .bc { display: flex; gap: 6px; margin: 5px 0; }
.ba { margin-left: 4px; }
.bb2 { margin-left: 20px; }
.bc { margin-left: 36px; }
.ba > .m::before { content: "੦"; }
.bb2 > .m::before { content: "-"; }
.bc > .m::before { content: "·"; }
.ba > .m, .bb2 > .m, .bc > .m { flex-shrink: 0; color: #333; width: 11px; }
.bb2, .bc { font-size: 12.5px; }
.bc { color: #333; }
.bx { flex: 1; min-width: 0; }
.bx .k { font-weight: 700; }
.bx .k::after { content: " "; }
.bnote { margin: 4px 0 8px 20px; font-size: 11px; color: #666; line-height: 1.7; }
.bnote::before { content: "* "; }

/* 근거 배지 — 이 앱의 축. 문장을 눌러 녹취록으로 되짚는다. */
.evb {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: 1px;
  margin-left: 5px; padding: 0 5px; border-radius: 20px;
  border: 1px solid var(--ev-border); background: var(--ev-subtle);
  font-size: 9.5px; font-weight: 700; color: var(--ev);
  cursor: pointer; font-variant-numeric: tabular-nums; line-height: 1.6;
  transition: background .12s;
}
.evb:hover { background: #ebe1fd; }
.evb.memo { border-color: var(--border-2); background: #f4f4f6; color: #8a8a95; }
.evb.fix { border-color: #f0d9b8; background: #fdf4e6; color: var(--warning); }
.evsent { border-radius: 2px; transition: background .2s; }
.evsent.lit { background: #f4effe; box-shadow: 0 0 0 3px #f4effe; }

/* 일정표 · 신청희망주제 표 */
.tb { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 11.5px; }
.tb th, .tb td { border: 1px solid #b9b9c0; padding: 6px 8px; vertical-align: middle; line-height: 1.6; }
.tb th { background: #f0f0f2; font-weight: 700; text-align: center; }
.tb td.c { text-align: center; }
.tb td.day { background: #fafafb; font-weight: 600; text-align: center; white-space: nowrap; }

/* 면담 메타 (□ 일시·장소 / □ 면담 대상자) */
.meta { margin: 0 0 12px; }
.meta .r { display: flex; gap: 8px; margin: 4px 0; font-size: 12.5px; }
.meta .r::before { content: "□"; flex-shrink: 0; color: #333; }
.meta .r .k { font-weight: 700; flex-shrink: 0; }
.meta .r .v { flex: 1; min-width: 0; }
.meta .srcpill {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 0 6px; border-radius: 20px;
  font-size: 9.5px; font-weight: 700; vertical-align: 1px;
  border: 1px solid var(--accent-border); background: var(--accent-subtle); color: var(--accent-text);
}
.meta .srcpill.memo { border-color: var(--border-2); background: #f4f4f6; color: #8a8a95; }

/* 본문 중간 사진 — 요구사항의 「보고서 중간중간」이 이 블록이다 */
.figin { margin: 14px 0 16px; }
.figin .fw { border: 1px solid #c9c9d2; border-radius: 3px; overflow: hidden; height: 190px; }
.figin figcaption { margin-top: 6px; text-align: center; font-size: 11px; color: #555; }
.figin figcaption b { font-weight: 700; color: #222; }

/* 말미 사진 모음 — 2열 그리드 */
.figgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 14px 0 6px; }
.figgrid figure .fw { border: 1px solid #c9c9d2; border-radius: 3px; overflow: hidden; height: 132px; }
.figgrid figcaption { margin-top: 5px; text-align: center; font-size: 11px; color: #333; font-weight: 600; }

/* 편집 중 사진 자리 — 슬롯을 비우면 점선 자리가 남는다 */
.figslot {
  height: 132px; border: 1px dashed var(--border-3); border-radius: 3px;
  display: grid; place-items: center; font-size: 10px; color: var(--text-3); background: var(--bg-sidebar);
}

/* ============================================================
   인스펙터 안의 카드 — 근거 · 교정
   (인스펙터 골격 자체는 fig.css 에 있다)
   ============================================================ */

.dw-sent {
  padding: 10px 11px; border-radius: var(--r-6); background: var(--bg-subtle);
  font-size: var(--fs-12); line-height: 1.75; margin-bottom: 14px;
}
.dw-lb { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); letter-spacing: .03em; margin: 0 0 7px; }

.evcard { border: 1px solid var(--border-1); border-radius: var(--r-8); padding: 10px 11px; margin-bottom: 8px; background: var(--bg-panel); }
.evcard .eh { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.evcard .eh .t {
  font-size: var(--fs-10); font-weight: 700; color: var(--ev);
  background: var(--ev-subtle); border-radius: var(--r-4); padding: 1px 5px; font-variant-numeric: tabular-nums;
}
.evcard .eh .w { font-size: var(--fs-11); font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evcard .eh .s { font-size: 9.5px; color: var(--text-3); flex-shrink: 0; }
.evcard .en { font-size: var(--fs-11); line-height: 1.7; color: var(--text-2); font-style: italic; padding-left: 8px; border-left: 2px solid var(--ev-border); }
.evcard .ko { font-size: var(--fs-11); line-height: 1.7; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-2); }
.evcard .play {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  border: 1px solid var(--border-2); border-radius: 20px; background: var(--bg-panel);
  padding: 2px 9px; font: inherit; font-size: var(--fs-10); font-weight: 600; color: var(--text-2); cursor: pointer;
}
.evcard .play:hover { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }
.evcard .play svg { width: 10px; height: 10px; }

.fixcard {
  border: 1px solid #f0d9b8; border-radius: var(--r-8); padding: 9px 11px; margin-bottom: 8px;
  background: #fdf9f2;
}
.fixcard .fh { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-11); }
.fixcard .fh .a { color: var(--danger); text-decoration: line-through; }
.fixcard .fh .b { font-weight: 650; color: var(--accent-text); }
.fixcard .fw2 { font-size: var(--fs-10); color: var(--text-2); line-height: 1.6; margin-top: 5px; }

.dw-none { padding: 20px 4px; font-size: var(--fs-11); color: var(--text-3); line-height: 1.75; }
.dw-none b { display: block; font-weight: 650; color: var(--text-2); margin-bottom: 4px; }

/* ============================================================
   녹취록 (인스펙터)
   ============================================================ */

.trhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.trhead .sw { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-6); background: var(--bg-subtle); }
.trhead .sw button {
  border: 0; border-radius: var(--r-4); background: transparent; padding: 4px 9px;
  font: inherit; font-size: var(--fs-11); font-weight: 600; color: var(--text-2); cursor: pointer;
}
.trhead .sw button.on { background: var(--bg-panel); color: var(--accent-text); box-shadow: var(--sh-1); }

.turn { display: flex; gap: 10px; padding: 9px 10px; border-radius: var(--r-6); margin-bottom: 3px; }
.turn.used { background: var(--ev-subtle); box-shadow: inset 2px 0 0 var(--ev); }
.turn.lit { background: #ebe1fd; box-shadow: inset 2px 0 0 var(--ev); }
.turn .tw { flex: 0 0 84px; }
.turn .tw .t { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.turn .tw .w { font-size: var(--fs-11); font-weight: 650; margin-top: 2px; line-height: 1.4; }
.turn .tw .k { font-size: 9.5px; color: var(--text-3); }
.turn .tc { flex: 1; min-width: 0; }
.turn .tc .en { font-size: var(--fs-12); line-height: 1.75; color: var(--text-1); }
.turn .tc .ko { font-size: var(--fs-11); line-height: 1.7; color: var(--text-2); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-2); }
.turn .tc .uses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.turn .tc .uses .u {
  border: 1px solid var(--ev-border); border-radius: 20px; background: var(--bg-panel);
  padding: 1px 8px; font: inherit; font-size: 9.5px; font-weight: 600; color: var(--ev); cursor: pointer;
}
.turn .tc .uses .u:hover { background: var(--ev-subtle); }
.trnote { margin-top: 16px; padding: 11px 13px; border-radius: var(--r-8); background: var(--bg-sidebar); font-size: var(--fs-11); color: var(--text-2); line-height: 1.8; }
.trnote b { font-weight: 650; color: var(--text-1); }

/* ============================================================
   사진함 (인스펙터)
   ============================================================ */

.phcard { border: 1px solid var(--border-2); border-radius: var(--r-8); background: var(--bg-panel); overflow: hidden; }
.phcard.un { border-style: dashed; }
.phcard .pv { height: 118px; border-bottom: 1px solid var(--border-1); }
.phcard .pb { padding: 9px 10px; }
.phcard .pb b { display: block; font-size: var(--fs-11); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phcard .pb .mt { font-size: 9.5px; color: var(--text-3); margin-top: 2px; }
.phcard .pb label { display: block; font-size: 9.5px; font-weight: 700; color: var(--text-3); margin: 8px 0 3px; letter-spacing: .02em; }
.phcard select, .phcard input[type="text"] {
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-4);
  background: var(--bg-app); padding: 4px 6px; font: inherit; font-size: var(--fs-11); color: var(--text-1); outline: none;
}
.phcard select:focus, .phcard input[type="text"]:focus { border-color: var(--accent); box-shadow: var(--ring); }
.phnote { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-8); background: var(--bg-sidebar); font-size: var(--fs-11); color: var(--text-2); line-height: 1.8; }
.phnote b { font-weight: 650; color: var(--text-1); }

/* ============================================================
   시작 화면
   ============================================================ */

.ws-start { max-width: 700px; margin: 0 auto; padding: 46px 24px 40px; }
.ws-start h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 8px; }
.ws-start .lead { font-size: var(--fs-13); color: var(--text-2); line-height: 1.8; margin-bottom: 24px; }
.ws-start .lead b { font-weight: 650; color: var(--text-1); }
.ws-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 26px; }
.ws-flow .f { border: 1px solid var(--border-1); border-radius: var(--r-8); background: var(--bg-panel); padding: 10px 10px; }
.ws-flow .f .k { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); }
.ws-flow .f .t { font-size: var(--fs-12); font-weight: 650; margin: 3px 0 2px; }
.ws-flow .f .d { font-size: 9.5px; color: var(--text-3); line-height: 1.55; }
.ws-flow .f[data-s="done"] { border-color: var(--accent-border); background: var(--accent-subtle); }
.ws-flow .f[data-s="done"] .k { color: var(--accent-text); }
.ws-sec { font-size: var(--fs-11); font-weight: 600; color: var(--text-3); letter-spacing: .03em; margin-bottom: 8px; }
.ws-p {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  margin-bottom: 7px; padding: 12px 14px;
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); color: var(--text-1);
  font: inherit; font-size: var(--fs-12); line-height: 1.65; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ws-p:hover { border-color: var(--accent-border); background: var(--accent-subtle); }
.ws-p .n { flex: 0 0 auto; font-weight: 700; color: var(--text-3); }
.ws-hint { margin-top: 18px; font-size: var(--fs-11); color: var(--text-3); line-height: 1.75; }
.ws-hint b { font-weight: 650; color: var(--text-2); }

/* 보고서 목록 */
.pl-list { max-width: 700px; margin: 0 auto; padding: 20px 24px 40px; display: grid; gap: 7px; }
.pl-r {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 15px;
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); color: var(--text-1); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pl-r:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-subtle); }
.pl-r:disabled { cursor: not-allowed; background: var(--bg-sidebar); }
.pl-r:disabled .pl-m { opacity: .55; }
.pl-m { flex: 1; min-width: 0; }
.pl-t { display: flex; align-items: center; gap: 7px; }
.pl-t b { font-size: var(--fs-13); font-weight: 650; }
.pl-d { font-size: var(--fs-11); color: var(--text-2); margin-top: 3px; line-height: 1.55; }
.pl-q { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: var(--fs-10); color: var(--text-3); }
.pl-n { flex: 0 0 auto; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 내려받기 메뉴 */
.dd { position: relative; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 60;
  min-width: 210px; padding: 5px;
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--r-8); box-shadow: var(--sh-2);
}
.dd-menu button {
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: var(--r-6); background: transparent;
  padding: 7px 9px; font: inherit; font-size: var(--fs-12); color: var(--text-1); cursor: pointer;
}
.dd-menu button:hover { background: var(--bg-hover); }
.dd-menu button span { display: block; font-size: 9.5px; color: var(--text-3); margin-top: 1px; }