/* ============================================================
   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); }
/* 사람이 모델의 제안을 고쳐 쓴 것. **확정(`ok`)과 다른 축이다** — 확정은 「승인
   했나」이고 이것은 「누가 정했나」다. 한 배지로 합치면 모델이 제안한 값과 사람이
   써 넣은 값을 되짚어 가를 수 없다. */
.tag[data-s="ed"] { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }

/* --- 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; }

/* 접수 드롭존 — 1단계가 하는 일의 전부다. 그래서 크다. */
.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; }
.drop.big { padding: 22px 14px 18px; }
.drop.big .di { display: grid; place-items: center; margin: 0 auto 9px; width: 34px; height: 34px; color: var(--accent); opacity: .75; }
.drop.big .di svg { width: 26px; height: 26px; }
.drop.big b { font-size: var(--fs-13); margin-bottom: 5px; }
.drop.big .dz {
  display: inline-block; margin-top: 11px; padding: 4px 12px;
  border: 1px solid var(--border-2); border-radius: 20px; background: var(--bg-panel);
  font-size: var(--fs-11); font-weight: 600; color: var(--text-2);
}
.drop.big:hover .dz, .drop.big.over .dz { border-color: var(--accent); color: var(--accent-text); }

/* 갈래 머리글의 아이콘과 「무엇을 하는가」 */
.grp-h .ki { display: grid; place-items: center; width: 15px; height: 15px; flex: none; color: var(--text-3); }
.grp-h .ki svg { width: 15px; height: 15px; }
.kact { padding: 0 12px 7px; font-size: 9.5px; color: var(--text-3); line-height: 1.5; }

/* ── 2단계 분석 ── */
.anlbar { padding: 11px 12px 10px; border-bottom: 1px solid var(--border-1); background: var(--bg-sidebar); }
.ab-t { font-size: var(--fs-11); color: var(--text-2); }
.ab-t b { font-size: var(--fs-13); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ab-p { height: 4px; border-radius: 2px; background: var(--bg-active); margin: 7px 0 6px; overflow: hidden; }
.ab-p i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.ab-n { font-size: 9.5px; color: var(--text-3); }

/* 도는 중의 진행 막대. **채워진 폭만으로는 도는 것을 말할 수 없다** — 파일이
   하나면 끝날 때까지 폭이 0 이고, 0% 짜리 막대는 「시작도 못 했다」로 읽힌다.
   그래서 도는 동안에는 빈 자리에 훑고 지나가는 띠를 얹는다(불확정 진행).
   막대의 폭은 그대로 **끝난 수**를 뜻한다 — 두 뜻을 한 자리에 겹치지 않는다. */
.anlbar.run { background: var(--accent-subtle); }
.ab-p.live { position: relative; }
.ab-p.live::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55; animation: absweep 1.3s linear infinite;
}
@keyframes absweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* 지금 읽고 있는 파일의 회전 표시. `✓`(끝남)·`…`(차례 기다림)과 **다른 모양**
   이어야 한다 — 셋이 같으면 스물한 건 가운데 어느 것이 도는지 알 수 없다. */
.spin {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--accent-subtle); border-top-color: var(--accent);
  animation: spinr .7s linear infinite;
}
@keyframes spinr { to { transform: rotate(360deg) } }

.arow2 {
  display: flex; align-items: flex-start; gap: 8px;
  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;
  opacity: .48; transition: opacity .3s, background .12s;
}
.arow2.on { opacity: 1; }
/* 지금 읽고 있는 행. **흐리게 두지 않는다** — 아직 안 끝난 행은 `.48` 로 흐린데,
   도는 것이 그 상태로 남으면 스물한 줄이 똑같이 흐려서 어디가 도는지 안 보인다. */
.arow2.now { opacity: 1; background: var(--accent-subtle); }
.arow2:hover { background: var(--bg-sidebar); }
.arow2.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.arow2 .ast {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg-app);
  font-size: var(--fs-10); font-weight: 700; color: var(--text-3);
}
.arow2.on .ast { border-color: transparent; background: var(--success-subtle); color: var(--success); }
.arow2 .am { flex: 1; min-width: 0; }
.arow2 .am b { display: block; font-size: var(--fs-11); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow2 .su { display: block; font-size: var(--fs-10); color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.arow2.on .su { color: var(--accent-text); font-weight: 600; }
.arow2 .fd2 { display: block; font-size: 9px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* 출장 메타 체크리스트 — 사람이 칸을 채우는 게 아니라 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 {
  display: flex; align-items: flex-start;
  border-bottom: 1px solid var(--border-1); background: var(--bg-panel);
  transition: background .12s;
}
.xrow:hover { background: var(--bg-sidebar); }
.xrow.sel { background: var(--accent-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.xbody {
  flex: 1; min-width: 0; display: block; text-align: left; font: inherit;
  border: 0; background: transparent; padding: 10px 12px; cursor: pointer; color: inherit;
}
.xrow.pk .xbody { padding-left: 2px; }
.xck { display: flex; align-items: center; padding: 12px 4px 0 10px; cursor: pointer; }
.xck input { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; }
.xck.all { padding-top: 0; }

/* 일괄 손잡이. 목록 위에 붙어 스크롤을 따라온다 — 스물한 건을 훑고 나서
   위로 되돌아가 눌러야 하면 그 손잡이는 있으나 마나다. */
.xbulk {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 10px;
  border-bottom: 1px solid var(--border-2); background: var(--bg-sidebar);
}
.xbulk .xb-c { font-size: var(--fs-11); font-weight: 650; font-variant-numeric: tabular-nums; }
.xbulk .xb-n { font-size: var(--fs-10); color: var(--text-3); }
.xbulk .btn { margin-left: auto; flex-shrink: 0; }

/* 확정된 묶음을 접는 손잡이 */
.xfold {
  width: 100%; display: flex; align-items: center; gap: 7px; text-align: left; font: inherit;
  border: 0; border-bottom: 1px solid var(--border-1); background: var(--bg-sidebar);
  padding: 8px 12px; cursor: pointer;
  font-size: var(--fs-11); font-weight: 650; color: var(--text-2);
}
.xfold:hover { background: var(--bg-active); }
.xfold .xf-i { width: 10px; color: var(--text-3); }
.xfold .xf-n { margin-left: auto; font-size: var(--fs-10); font-weight: 500; color: var(--text-3); }
.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; }

/* 사람이 고쳐 쓰는 칸. **읽기 전용으로 보이면 안 된다** — 이 창의 나머지가 전부
   읽을 것뿐이라, 테두리가 옅으면 사람은 이것도 표시인 줄 알고 넘어간다. */
.fixin {
  width: 100%; font: inherit; font-size: var(--fs-12); font-weight: 650;
  color: var(--accent-text);
  border: 1px solid var(--accent-border); border-radius: var(--r-6);
  background: var(--bg-panel); padding: 8px 10px;
}
.fixin:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dw-hint { font-size: var(--fs-10); color: var(--text-3); line-height: 1.7; margin: 7px 0 14px; }

.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); }

/* 화면이 무엇인지 말하는 자리. `ws-hint` 와 달리 **바로 위 블록에 붙는다** —
   시연 진입점 아래의 「이것은 시연이다」와 접수 상자 아래의 「받는 것까지다」가
   그것이고, 떨어져 있으면 무엇에 대한 말인지 읽는 사람이 다시 찾아야 한다. */
.ws-note {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-sidebar);
  font-size: var(--fs-11); color: var(--text-3); line-height: 1.75;
}
.ws-note b { font-weight: 650; color: var(--text-2); }

/* ── 접수 상자 (4열) ─────────────────────────────────────────────
   형제 앱과 같은 모양이다. 칸을 나누지 않고 **하나의 상자**에 넣게 한다 —
   담당자가 들고 오는 것이 정형 양식이 아니라 녹음 몇 개와 「보고서 좀 써줘」다. */
.ik-box {
  position: relative; margin-bottom: 22px;
  border: 1px solid var(--border-2); border-radius: var(--r-10);
  background: var(--bg-panel); transition: border-color .12s, box-shadow .12s;
}
.ik-box:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-subtle); }
.ik-box textarea {
  display: block; width: 100%; padding: 14px 15px 10px;
  border: 0; background: transparent; resize: vertical;
  font: inherit; font-size: var(--fs-13); line-height: 1.75; color: var(--text-1);
}
.ik-box textarea:focus { outline: none; }
.ik-box textarea::placeholder { color: var(--text-3); }

.ik-att:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 13px 10px; }
.ik-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 8px 5px 7px; border: 1px solid var(--border-1); border-radius: var(--r-6);
  background: var(--bg-sidebar); font-size: var(--fs-11); line-height: 1.3;
}
.ik-chip svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--text-3); }
.ik-chip b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-chip i { font-style: normal; color: var(--text-3); flex: 0 0 auto; }
.ik-chip button {
  flex: 0 0 auto; width: 15px; height: 15px; border: 0; border-radius: 3px;
  background: transparent; color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1;
}
.ik-chip button:hover { background: var(--danger-subtle, #fdeaea); color: var(--danger, #c0392b); }

.ik-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px 10px; border-top: 1px solid var(--border-1);
}
.ik-tb {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border: 1px solid var(--border-1); border-radius: var(--r-6);
  background: var(--bg-sidebar); color: var(--text-2);
  font: inherit; font-size: var(--fs-11); cursor: pointer;
}
.ik-tb:hover { border-color: var(--accent-border); color: var(--accent-text); }
.ik-tb svg { width: 13px; height: 13px; }
.ik-cnt { flex: 1; font-size: var(--fs-10); color: var(--text-3); }

/* 끌어다 놓는 중에만 뜬다. 상자 전체를 덮어서 **어디에 놓아도 된다**는 것을
   말한다 — 좁은 과녁을 그리면 사람이 그 안을 겨눈다. */
.ik-drop {
  position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  border: 2px dashed var(--accent); border-radius: var(--r-10);
  background: var(--accent-subtle); pointer-events: none;
}
.ik-box.over .ik-drop { display: grid; }
.ik-drop b { display: block; font-size: var(--fs-13); font-weight: 650; color: var(--accent-text); }
.ik-drop span { display: block; margin-top: 3px; font-size: var(--fs-11); color: var(--text-2); }

/* 2열 목록 바닥의 손잡이 */
.grp-foot { padding: 10px 12px 4px; }
.foot-hint { display: block; font-size: var(--fs-11); color: var(--text-3); line-height: 1.7; text-align: center; }
.foot-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; }