/* DESTINY EDIT: 디자인 시안 2 (2026-10-01 대표 OK, docs/design/edit_v2/proto.html).
   원칙: 칠은 잉크(#0B0F14)와 은백(#E6E9F2)만. 파랑(#3A8DFF)은 '빛'일 때만: 켜짐 점·진행 선·칸을 채우는 빛·입력 초점.
   고른 것은 파랑 바탕이 아니라 흰 카드(밝게) 또는 잉크를 옅게(어둡게). 성공·주의는 바탕색 없이 작은 점과 글자색.
   밝게 (10/2 대표 "흰색에 연회색 살짝, 왼쪽은 더 찐하게"): 본문은 아주 옅은 회색, 카드·입력창·문서 종이는 흰색, 사이드바는 본문보다 한 단계 짙은 은백.
   어둡게: 홈페이지(destinypage.com) 유리 판, 숯색 (먹색 아님).
   글꼴: Pretendard(본문) · Montserrat(영문 이름표). 둘 다 static/vendor 에 있어 인터넷 없이 된다. 이모지 없음. */
:root {
  --side-bg: linear-gradient(180deg, #E9ECF1, #DFE3EA); --side-solid: #E4E7ED;
  --side-fg: #0B0F14; --side-muted: rgba(11,15,20,.5); --side-dim: rgba(11,15,20,.72);
  --side-hover: rgba(255,255,255,.62); --side-active: #FFFFFF; --side-border: rgba(11,15,20,.10); --side-accent: #3A8DFF;
  --side-active-shadow: 0 1px 2px rgba(11,15,20,.07), 0 0 0 1px rgba(11,15,20,.04), 0 8px 18px -12px rgba(11,15,20,.25);
  --bg: #F3F4F7; --surface: #FFFFFF; --card: #FFFFFF; --elev: #FFFFFF; --soft: #EDEFF3; --paper: #E9EBEF;
  --fg: #0B0F14; --fg2: #2E333B; --muted: #5E636B; --faint: #8B9097;
  --border: rgba(11,15,20,.09); --border2: rgba(11,15,20,.15); --hover: rgba(11,15,20,.045); --hover2: rgba(11,15,20,.07);
  --accent: #3A8DFF; --accent2: #6AA9FF; --accent-hover: #1F6FE0; --accent-soft: rgba(58,141,255,.10); --accent-ring: rgba(58,141,255,.28); --accent-ink: #1F6FE0;
  --glow: rgba(58,141,255,.35);
  --primary: #0B0F14; --primary-hover: #1C222B; --on-primary: #FFFFFF;
  --pri-grad: linear-gradient(180deg, #2A313C, #0B0F14 62%); --pri-edge: inset 0 1px 0 rgba(255,255,255,.14);
  --silver: linear-gradient(180deg, #FFFFFF, #E6E9F2);
  --blue: #1F6FE0; --blue-soft: rgba(58,141,255,.08);
  --ok: #17784F; --ok-soft: rgba(23,120,79,.09); --warn: #9A5B0B; --warn-soft: rgba(154,91,11,.09); --err: #C2303B; --err-soft: rgba(194,48,59,.08);
  --user-bubble: #0B0F14; --user-ink: #FFFFFF;
  --shadow-s: 0 1px 2px rgba(11,15,20,.05);
  --shadow: 0 1px 2px rgba(11,15,20,.05), 0 14px 36px -20px rgba(11,15,20,.2);
  --shadow-l: 0 60px 160px -40px rgba(11,15,20,.45);
  --r: 14px; --r-s: 10px; --r-l: 20px;
  --word: url(brand/edit-flat.svg?v=faddb220);
  --ease: cubic-bezier(.16,1,.3,1); --soft-ease: cubic-bezier(.45,.05,.2,1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --lat: "Montserrat", "Pretendard Variable", sans-serif;
  --mono: "JetBrains Mono", D2Coding, Consolas, "SF Mono", monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* 10/1 대표 "블랙 모드 심하게 시꺼멓다": 먹색(#05070B) 대신 숯색. 사이드바가 본문보다 한 단계 어둡다 (밝게와 같은 짜임) */
  --side-bg: #17191E; --side-solid: #17191E;
  --side-fg: #ECEEF2; --side-muted: rgba(226,232,242,.55); --side-dim: rgba(226,232,242,.75);
  --side-hover: rgba(238,241,246,.055); --side-active: rgba(238,241,246,.09); --side-border: rgba(226,232,242,.10); --side-accent: #8FB8FF;
  --side-active-shadow: none;
  --bg: #22252B; --surface: #262930; --card: #2B2F37; --elev: #2F333C; --soft: rgba(255,255,255,.035); --paper: #1D2026;
  --fg: #ECEEF2; --fg2: #C9CED7; --muted: #9AA1AD; --faint: #747C89;
  --border: rgba(226,232,242,.10); --border2: rgba(226,232,242,.18); --hover: rgba(238,241,246,.05); --hover2: rgba(238,241,246,.085);
  --accent: #3B82F6; --accent2: #8FB8FF; --accent-hover: #8FB8FF; --accent-soft: rgba(59,130,246,.12); --accent-ring: rgba(59,130,246,.38); --accent-ink: #8FB8FF;
  --glow: rgba(59,130,246,.5);
  --primary: #EEF1F6; --primary-hover: #FFFFFF; --on-primary: #16191E;
  --pri-grad: linear-gradient(180deg, #FFFFFF, #C9D1DE); --pri-edge: inset 0 -1px 0 rgba(0,0,0,.12);
  --silver: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --blue: #8FB8FF; --blue-soft: rgba(59,130,246,.12);
  --ok: #5BC491; --ok-soft: rgba(91,196,145,.1); --warn: #E3B260; --warn-soft: rgba(227,178,96,.1); --err: #F0767E; --err-soft: rgba(240,118,126,.1);
  --user-bubble: linear-gradient(180deg, #FFFFFF, #C9D1DE); --user-ink: #16191E;
  --shadow-s: 0 1px 2px rgba(0,0,0,.25);
  --shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -36px rgba(0,0,0,.55);
  --shadow-l: 0 40px 120px -40px rgba(0,0,0,.6);
  --word: url(brand/edit-light.svg?v=e6e9b103);
  color-scheme: dark;
}
@font-face { font-family: "Montserrat"; src: url(vendor/montserrat/Montserrat-latin.woff2?v=06b16db7) format("woff2"); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
/* 글 속 주소의 짧은 링크 ('판판대로 바로가기', UI.siteLinks): 줄 끝에서 둘로 갈리지 않게 한 덩어리로 (10/20 운영 점검) */
.ui-url-w { display: inline-block; max-width: 100%; }
.ui-nw { white-space: nowrap; }
.ic { flex: none; display: block; }
.sub { color: var(--muted); font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hidden, [hidden] { display: none !important; }
kbd { font-family: var(--font); font-size: 11px; color: var(--side-muted); border: 1px solid var(--side-border); border-radius: 5px; padding: 0 5px; }

/* ---------- 레이아웃 ---------- */
.app { --side-w: 268px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.app.dock-open { grid-template-columns: var(--side-w) minmax(360px, 1fr) var(--dockw, minmax(420px, 46%)); }
.app.side-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.app.side-collapsed.dock-open { grid-template-columns: 0 minmax(360px, 1fr) var(--dockw, minmax(420px, 48%)); }
/* 오른쪽 미리보기 (preview.js) — 문서 창(Dock)과 같은 자리. 열린 동안 문서 창은 가린다 */
.app.pv-open { grid-template-columns: var(--side-w) minmax(360px, 1fr) var(--pvw, min(560px, 42vw)); }
.app.side-collapsed.pv-open { grid-template-columns: 0 minmax(360px, 1fr) var(--pvw, min(560px, 42vw)); }
.app.pv-open .dock { display: none !important; }
.pv { display: none; position: relative; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--border); }
.app.pv-open .pv { display: flex; }
.app.pv-open.pv-max .pv { position: fixed; inset: 0; z-index: 77; border-left: 0; }   /* 미리보기 크게 보기: 화면 전체 (대표 10/25 "미리보기 칸 안에서 풀사이즈") */
.app.pv-max .pv-grip { display: none; }
@media (max-width: 860px) { .pvh .pv-maxb { display: none; } }   /* 폰은 미리보기가 이미 화면 전체 */
.pv-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.pv-grip:hover, .dock-grip:hover { background: var(--hover2); }
.dock-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; touch-action: none; }
.pv-grip { touch-action: none; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }

/* 시작 연출 (10/2 대표 "고급 모던, 약간 길이 있게", 같은 날 "반짝 섬광이 너무 가짜 같다"): 약 2.8초.
   브랜드 보드대로: 큰 빛번짐 없이, 아주 가는 가로·세로 빛줄기(세로가 더 길다)와 가운데 작고 밝은 빛 점 하나.
   빛줄기는 가운데가 가장 밝고 끝으로 갈수록 빨리 사그라든다 (고르게 칠한 선이 '그은 선'처럼 보였다). 줄마다 또렷한 1px 와
   흐린 쌍둥이(번짐) 두 겹. 빛 점 → 세로로 뻗음 → 가로로 뻗음 → 이름표 → 빛 점이 작은 별이 되어 로고의 별 자리로 날아간다 (app.js splash).
   새로 연 창·탭마다, 새로 고침에는 없음, 누르거나 키를 치면 바로 끝, '움직임 줄이기'면 없음 (index.html 머리 스크립트가 html.splash 를 붙인다) */
#splash { display: none; --sp-c: 58,141,255; --sp-hot: var(--accent); }
:root[data-theme="dark"] #splash { --sp-hot: #EAF2FF; }
html.splash #splash { display: block; position: fixed; inset: 0; z-index: 9999; background: var(--paper); overflow: hidden; }
#splash .sp-v, #splash .sp-h, #splash .sp-core { position: absolute; left: 50%; top: 44%; }
#splash .sp-v { width: 1px; height: min(58vh, 540px); margin: calc(min(58vh, 540px) / -2) 0 0 -.5px; transform: scaleY(0); animation: sp-v 1.1s var(--ease) .25s both;
  background: linear-gradient(180deg, transparent, rgba(var(--sp-c),.05) 18%, rgba(var(--sp-c),.22) 36%, rgba(var(--sp-c),.7) 46%, var(--sp-hot) 50%, rgba(var(--sp-c),.7) 54%, rgba(var(--sp-c),.22) 64%, rgba(var(--sp-c),.05) 82%, transparent); }
#splash .sp-h { width: min(36vw, 380px); height: 1px; margin: -.5px 0 0 calc(min(36vw, 380px) / -2); transform: scaleX(0); animation: sp-h 1s var(--ease) .5s both;
  background: linear-gradient(90deg, transparent, rgba(var(--sp-c),.05) 20%, rgba(var(--sp-c),.24) 38%, rgba(var(--sp-c),.7) 47%, var(--sp-hot) 50%, rgba(var(--sp-c),.7) 53%, rgba(var(--sp-c),.24) 62%, rgba(var(--sp-c),.05) 80%, transparent); }
#splash .sp-v::after, #splash .sp-h::after { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(2.5px); opacity: .55; }
#splash .sp-v::after { inset: 0 -2px; }
#splash .sp-h::after { inset: -2px 0; }
#splash .sp-core { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sp-hot);
  box-shadow: 0 0 4px 1px rgba(var(--sp-c),.85), 0 0 18px 4px rgba(var(--sp-c),.28); opacity: 0; animation: sp-core 1.6s var(--soft-ease) .05s both; }
#splash svg { position: absolute; left: 50%; top: 44%; width: 22px; height: 20px; margin: -10px 0 0 -11px; fill: var(--fg); overflow: visible; opacity: 0; }
#splash .sp-wm { position: absolute; left: 0; right: 0; top: calc(44% + 64px); text-align: center; font: 500 12px/1 var(--lat); letter-spacing: .42em; color: var(--muted);
  opacity: 0; animation: sp-wm .9s var(--ease) 1.2s both; }
@keyframes sp-core { 0% { opacity: 0; transform: scale(.2); } 22% { opacity: 1; transform: scale(1.25); } 45% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sp-v { 0% { transform: scaleY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: scaleY(1); opacity: .9; } }
@keyframes sp-h { 0% { transform: scaleX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: scaleX(1); opacity: .75; } }
@keyframes sp-wm { from { opacity: 0; transform: translateY(6px); letter-spacing: .7em; } to { opacity: 1; transform: none; letter-spacing: .42em; } }
body.resizing iframe { pointer-events: none !important; }
.pvh { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); min-height: 50px; }
.pvh .icon-btn { width: 32px; height: 32px; }
.pv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.pv-body img.pv-img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.pv-body iframe.pv-frame { width: 100%; height: calc(100% - 4px); min-height: 60vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.pv-body:has(> .pdv-host) { padding: 0; overflow: hidden; }                  /* PDF 보기 (pdfview.js) 는 패널을 꽉 채우고 안에서 굴린다 */
.pdv-host { height: 100%; min-height: 0; }
.nv-pdf { height: 100%; min-height: 420px; }
/* 압축 안 파일 (미리보기 패널, app.js zipView) — 이름 · 종류 표 · 크기 · 받기 네 칸이 줄마다 같은 자리 */
.zv-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; min-height: 32px; }
.zv-head b { flex: 1; font-size: 13.5px; }
.zv-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--paper); }
.zv-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 72px 32px; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 4px; border-top: 1px solid var(--border); }
.zv-row:first-child { border-top: 0; }
.zv-open { display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; background: none; font: inherit; color: inherit; padding: 6px; text-align: left; cursor: pointer; border-radius: 8px; }
.zv-open:hover:not(:disabled) { background: var(--hover2); }
.zv-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.zv-r { font-style: normal; font-size: 11.5px; font-weight: 700; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--soft); color: var(--fg2); justify-self: center; white-space: nowrap; }
.zv-r { line-height: 1.45; align-self: center; }
.zv-r.form { background: var(--fg); color: var(--bg); }
.zv-r.guide { background: var(--elev); box-shadow: inset 0 0 0 1px var(--border2); }
.zv-r.none { visibility: hidden; }
.zv-s { font-size: 12px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zv-dl { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 8px; }
a.zv-dl:hover { background: var(--hover2); color: var(--fg); }
.zv-row.off { opacity: .55; }
.zv-row.off .zv-open { cursor: default; }
.zv.zv-in { display: flex; flex-direction: column; height: 100%; }
.pv-body:has(> .zv.zv-in) { padding: 0; overflow: hidden; }
.zv-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.zv-bar b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.zv-in > .pdv-host { flex: 1; min-height: 0; height: auto; }
.zv-in > .zv-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.pv-body .zv-in > iframe.zv-frame { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
@media (max-width: 640px) { .zv-row { grid-template-columns: minmax(0, 1fr) 56px 32px; } .zv-s { display: none; } }
.pv-body audio, .pv-body video { width: 100%; }
.pv-wait, .pv-none, .pv-err { color: var(--muted); font-size: 13.5px; padding: 24px 6px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pv-wait { flex-direction: row; align-items: center; gap: 8px; }
.pv-err p { color: var(--fg2); margin: 0; }
.pv-runbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 8px; }
.pv-runbar .t { flex: 1; min-width: 0; font-size: 13px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-runfr { width: 100%; height: calc(100% - 46px); min-height: 60vh; border: 0; border-radius: 10px; background: #000; }
.pv-errrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; padding: 6px 10px; margin-bottom: 6px; border-radius: 8px; background: rgba(214,69,69,.08); color: #b33a3a; }
.pv-errrow span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pv-code { max-height: none; }
.app.side-collapsed .side { visibility: hidden; }

/* ---------- 사이드바 ---------- */
.side { position: relative; background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-right: 1px solid var(--side-border); }
/* 왼쪽 목록 폭: 오른쪽 끝을 끌어서 넓히고 좁히기 · 두 번 누르면 원래 폭 (2026-09-28 대표) */
.side-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 6; touch-action: none; outline: 0; }
.side-grip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.side-grip:hover::after, .side-grip:focus-visible::after, body.side-sizing .side-grip::after { background: var(--accent); }
body.side-sizing, body.side-sizing * { cursor: col-resize !important; user-select: none !important; }
body.side-sizing .app { transition: none !important; }
.app.side-collapsed .side-grip { display: none; }
/* 로고 글자가 목록 글자와 같은 x(18px)에서 시작: 로고 SVG 안에 왼쪽 여백이 7px 있어 11px 에 둔다 (10/2 사진으로 잼) */
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 11px; }
/* 로고는 사이드바 가운데 — 오른쪽 접기 단추 폭만큼 왼쪽을 비워 판 전체의 가운데에 (대표 10/27 "왼쪽으로 너무 쏠려있다 중앙으로해") */
.brand { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 2px 0 2px 34px; border-radius: 8px; }
.brand .wm-img { display: block; width: 168px; max-width: 100%; height: 24px; background: var(--word) center / contain no-repeat; }
.logo { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--side-fg); }
.logo svg { display: block; width: 100%; height: 100%; }
.mark .mark-a { fill: var(--accent); }
.side .mark .mark-a { fill: var(--side-accent); }
.side .icon-btn { color: var(--side-muted); }
.side .icon-btn:hover { background: var(--side-hover); color: var(--side-fg); }
.side-new, .side-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); margin: 0 14px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--side-border); background: var(--elev); color: var(--side-fg); cursor: pointer; text-align: left; font-size: 13.5px; }
/* 새 작업: 은백 위의 흰 알약 (시안 2). 누르면 살짝 눌린다 */
.side-new { justify-content: center; gap: 7px; padding: 7px 15px 7px 12px; height: 42px; margin: 6px 14px 10px; border-radius: 999px; border-color: rgba(11,15,20,.14); background: var(--silver); font-weight: 600; box-shadow: 0 1px 2px rgba(11,15,20,.06); transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease); }
:root:not([data-theme="dark"]) .side-new { background: #fff; }
.side-new:hover { border-color: rgba(11,15,20,.3); box-shadow: 0 10px 24px -14px rgba(11,15,20,.35); }
:root[data-theme="dark"] .side-new { border-color: var(--border2); }
.side-new:active { transform: scale(.97); }
.side-search { height: 38px; color: var(--side-muted); }
.side-search:hover { border-color: var(--border2); }
.side-search .ic { margin: 0 2px 0 1px; }
.side-search kbd { margin-left: auto; }
.side-scroll { flex: 1; overflow: auto; padding: 4px 0 8px; scrollbar-width: thin; scrollbar-color: var(--side-border) transparent; }
.side-label { padding: 18px 18px 6px; color: var(--side-muted); font-size: 11.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.side-label .en { font: 500 10px/1 var(--lat); letter-spacing: .28em; margin-right: 10px; color: var(--side-muted); }
html:not([lang="ko"]) .side-label .en { display: none; }        /* 한국어가 아닌 화면: 옆의 번역된 이름과 겹친다 (PINNED Pinned) */
html[data-role="guest"] .side-label .en { display: none; }      /* 손님 화면은 한국어 화면에도 영어 꼬리표 없이 ('MINE 내 작업', 10/20 PM L1) */
#side-convs > div:first-child:not([hidden]) .side-label, #grp-pinned[hidden] + #grp-mine .side-label { padding-top: 12px; }
.side-label .cnt { font-size: 11px; }
.side-item { position: relative; display: flex; align-items: center; gap: 8px; margin: 1px 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--side-dim); font-size: 13.5px; }
.side-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: var(--side-hover); color: var(--side-fg); }
.side-item.active { background: var(--side-active); color: var(--side-fg); font-weight: 600; box-shadow: var(--side-active-shadow); }
.side-item .more { width: 0; overflow: hidden; opacity: 0; flex: none; border: 0; background: transparent; color: var(--side-muted); padding: 2px 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.side-item:hover .more, .side-item.active .more { width: 22px; opacity: 1; }
/* 팀원 대화: 누구 것인지는 색 동그라미 대신 오른쪽 끝 흐린 이름. 마우스를 올려도 남는다 (누르면 사람 카드 · '더보기'는 그 옆에) */
.side-item .who { flex: none; max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--side-muted); cursor: pointer; }
.side-item .who:hover { color: var(--side-fg); text-decoration: underline; text-underline-offset: 2px; }
.side-item .more:hover { color: var(--side-fg); background: var(--side-active); }
.side-item .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--side-accent); flex: none; animation: pulse 1.4s infinite; }
.side-item .pin { color: #d8b04c; }
/* 접속 안 한 사람 (10/2 대표 "나간 사람은 어둡게, 너무 심하지 않게"): 팀원 대화 줄·채팅 이름표·회의 참석자 얼굴을 흐리게 */
.side-item.away { opacity: .66; } .side-item.away:hover, .side-item.away.active { opacity: 1; }
/* 여러 개 고르기 (10/26, EPIC 과 같은 꼴): 고르는 동안 줄 왼쪽에 동그라미 · 고른 줄은 강조색 · 고를 수 없는 줄은 흐리게.
   아래 띠는 목록 위에 떠 있어(끝에 붙어 있는 sticky) 고르는 동안 줄이 밀리지 않는다 */
html.ssel #side-scroll, html.sweeping #side-scroll { -webkit-user-select: none; user-select: none; }
html.ssel #side-scroll { display: flex; flex-direction: column; } html.ssel #side-convs { flex: 1 0 auto; }   /* 목록이 짧아도 띠는 맨 아래 */
html.sweeping, html.sweeping * { cursor: default !important; }
html.ssel #side-scroll .side-item[data-conv] { padding-left: 34px; }
html.ssel #side-scroll .side-item[data-conv] .more { display: none; }
html.ssel #side-scroll .side-item[data-conv]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; margin-top: -8.5px; border-radius: 50%; border: 1.5px solid var(--side-muted); }
html.ssel #side-scroll .side-item.picked { background: var(--accent-soft); color: var(--side-fg); }
html.ssel #side-scroll .side-item.picked::before { border-color: var(--side-accent); background: var(--side-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
html.ssel #side-scroll .side-item.nopick { opacity: .45; }
html.ssel #side-scroll .side-item.nopick::before { display: none; }
#ssel-bar { position: sticky; bottom: 8px; z-index: 6; margin: 8px 8px 0; display: flex; align-items: center; gap: 0; padding: 5px 4px 5px 10px; border-radius: 10px;
  background: var(--elev); color: var(--fg); border: 1px solid var(--border2); box-shadow: 0 8px 24px -8px rgba(11,15,20,.28); font-size: 12px; }
#ssel-bar .sn { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#ssel-bar button { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--fg2); font: inherit; white-space: nowrap; cursor: pointer; }
#ssel-bar button:hover { background: var(--hover2); }
#ssel-bar .sd { color: var(--err); } #ssel-bar .sd:hover { background: var(--err-soft); }
#ssel-bar .sx { width: 26px; padding: 0; justify-content: center; color: var(--muted); }
@media (max-width: 860px) { #ssel-bar { bottom: calc(10px + env(safe-area-inset-bottom)); } #ssel-bar button { height: 36px; } #ssel-bar .sx { width: 36px; } }
.msg .meta.away { opacity: .7; }
.msg .meta.away .avatar, .avatar.away { filter: saturate(.3); opacity: .6; }
/* 팀원 대화 (2026-09-29): 머리줄 누르면 접기 · 제목 앞 작은 얼굴 = 만든 사람 · 더 보기 */
/* 다른 사람의 대화 묶음 (EPIC 처럼 사람마다·손님 한 묶음): 폴더 머리 모양 + 얼굴. 접속 안 한 팀원 묶음은 얼굴만 흐리게 */
#grp-team { padding-top: 10px; }
.fold.own .fold-h { font-weight: 500; }
.fold.own .fold-h .avatar { flex: none; }
.fold.own.away .fold-h .avatar { opacity: .45; filter: grayscale(1); }
.side-more { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 2px 8px 6px; padding: 6px 10px; border: 0; background: transparent;
  color: var(--side-muted); font: inherit; font-size: 12.5px; border-radius: 8px; cursor: pointer; text-align: left; }
.side-more:hover { background: var(--side-hover, rgba(255,255,255,.06)); color: var(--side-fg, #e8e8ea); }
.side-more .flip { display: inline-flex; transform: rotate(180deg); }
.side-empty { padding: 4px 18px; color: var(--side-muted); font-size: 12.5px; }
/* 회의록 (10/1 대표: "AI 작업용 채팅이 우선"): 대화 목록 아래 한 줄로 접어 둔다 (펴고 접은 것은 기억).
   진행 중인 회의는 검색 아래 '회의 중' 한 줄: 누르면 바로 참여 */
.side-meet { flex: none; border-top: 1px solid var(--side-border); }
.side-meet .side-label { padding: 10px 18px; cursor: pointer; user-select: none; }
.side-meet .side-label:hover { color: var(--side-fg); }
.side-meet .side-label .r { display: inline-flex; align-items: center; gap: 8px; }
.side-meet .side-label .cnt { display: inline-flex; align-items: center; gap: 4px; }
.side-meet .side-label .cnt svg { transition: transform .15s; }
.side-meet.closed .side-label .cnt svg { transform: rotate(-90deg); }
.side-meet.closed #list-meetings { display: none; }
#list-meetings { max-height: min(34vh, 280px); overflow: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--side-border) transparent; }
.side-live { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 8px 14px 0; padding: 0 12px; height: 36px; border-radius: 12px;
  border: 1px solid rgba(229,83,75,.32); background: rgba(229,83,75,.07); color: var(--side-fg); cursor: pointer; text-align: left; font: inherit; font-size: 13px; }
.side-live[hidden] { display: none; }
.side-live:hover { background: rgba(229,83,75,.13); }
.side-live .rdot { width: 7px; height: 7px; background: #e5534b; animation: none; }     /* 깜빡이지 않는다: 통화 중 화면이 프레임마다 다시 계산하는 일을 늘리지 않게 */
.side-live b { flex: none; font-weight: 600; }
.side-live .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--side-muted); }
.side-live .go { flex: none; font-size: 12.5px; font-weight: 600; color: #d4453d; }
/* 관전 (대표 10/17): 검색 아래 한 줄 — 관리자만 (손님 페이지에는 아예 없다, main.index). 접속한 고객이 있으면 초록 점과 수 */
.side-obs { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 8px 14px 0; padding: 0 12px; height: 36px; border-radius: 12px;
  border: 1px solid var(--side-border); background: transparent; color: var(--side-fg); cursor: pointer; text-align: left; font: inherit; font-size: 13px; }
.side-obs[hidden] { display: none; }
.side-obs:hover { background: var(--side-hover); }
.side-obs > i { display: inline-flex; color: var(--side-muted); }
.side-obs b { flex: none; font-weight: 600; }
.side-obs .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--side-muted); font-size: 12px; text-align: right; }
.side-obs.on .t::before, .fold-h .obs-dot, .side-item .cust-on { content: ""; display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: #3fb96f; box-shadow: 0 0 0 2px rgba(63,185,111,.18); }
.side-obs.on .t::before { margin-right: 6px; vertical-align: 1px; }
/* 위 막대 '관전 중': 고객 대화를 보는 관리자 화면 (고객 대화는 읽기만) */
.obs-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--border2);
  color: var(--muted); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.obs-chip[hidden] { display: none; }
.obs-chip > i { display: inline-flex; }
@media (max-width: 560px) { .obs-chip { padding: 4px; } .obs-chip > span { display: none; } }     /* 폰: 눈 아이콘만 (제목 자리를 지킨다) */
.modal.obs-modal { width: min(560px, 100%); }
.obs h3 { display: flex; align-items: center; gap: 8px; margin: 0 40px 12px 0; font-size: 17px; }
.obs h3 small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.obs-list { display: flex; flex-direction: column; gap: 2px; max-height: min(64vh, 560px); overflow: auto; margin: 0 -8px; }
.obs-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.obs-row:hover:not([disabled]), .obs-row:focus-visible { background: var(--hover); }
.obs-row[disabled] { cursor: default; }
.obs-st { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border2); }
.obs-row.on .obs-st { background: #3fb96f; box-shadow: 0 0 0 3px rgba(63,185,111,.16); }
.obs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.obs-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.obs-who b { font-weight: 600; letter-spacing: .04em; }
.obs-who em { font-style: normal; font-size: 11px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: var(--soft); white-space: nowrap; }
.obs-who em.mail { background: none; padding: 0; font-size: 12px; white-space: normal; word-break: break-all; }
.obs-t { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 42%; text-align: right; }
.obs-do { font-size: 12.5px; font-weight: 600; }
.obs-ago { font-size: 11.5px; color: var(--muted); }
.obs-row:not(.on) .obs-do { color: var(--muted); font-weight: 500; }
.obs-empty { padding: 20px 10px; color: var(--muted); font-size: 13px; text-align: center; }
.obs-rest { margin: 6px 0 2px; border-top: 1px solid var(--border); padding-top: 6px; }
.obs-rest summary { cursor: pointer; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.obs-office { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; font-size: 12.5px; color: var(--muted); }   /* 사무실 주소 손님: 수만 한 줄 */
@media (max-width: 480px) { .obs-side { max-width: 40%; } .obs-row { padding: 8px 6px; } .obs-office { padding: 6px; } }
/* 접속 중: 동그라미 알약 대신 이름 한 줄씩 (초록 점 = 지금 접속, 나머지는 한 줄로 묶음) */
.side-online { border-top: 1px solid var(--side-border); padding: 10px 10px 6px; }
.side-online .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: var(--side-muted); margin: 0 8px 4px; }
.online-list { display: flex; flex-direction: column; }
.online-person { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; color: var(--side-fg); }
.online-person::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3fb96f; box-shadow: 0 0 0 2px rgba(63,185,111,.18); }
.online-person > span:first-of-type { flex: none; font-weight: 500; }
.online-person .doing { flex: 1; min-width: 0; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-away { padding: 3px 8px 2px 22px; font-size: 11.5px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 접속 중의 고객 (대표 10/23 "에픽처럼 … 어떤작업하는지 실시간으로"): 팀원 줄과 같은 꼴 · 이름은 손님 번호 · 하는 일은 흐린 글(치는 중이면 진하게) · 누르면 그 대화 */
.online-person.cust { cursor: pointer; }
.online-person.cust.typing .doing { color: var(--side-fg); }
.online-more { cursor: pointer; }
.online-more:hover { color: var(--side-fg); }
.online-person.cust:focus-visible, .online-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 12px; border-top: 1px solid var(--side-border); }
.me-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; border: 0; background: transparent; color: var(--side-fg); cursor: pointer; text-align: left; }
.me-chip:hover { background: var(--side-hover); }
.me-chip > span:last-child { min-width: 0; flex: 1; }   /* 긴 회사 이름이 톱니와 겹쳤다 (10/8 점검) — 말줄임이 되게 */
.me-chip .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chip .rl { font-size: 11.5px; color: var(--side-muted); }

/* ---------- 아바타 ---------- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--av, #6f727a); color: #fff; font-weight: 600; flex: none; line-height: 1; box-shadow: 0 0 0 2px rgba(0,0,0,0); }
.avatar.ring { box-shadow: 0 0 0 2px var(--bg); }
.avatar.ph, .av.ph { color: transparent !important; background-size: cover !important; background-position: center !important; }
.av.ph em { color: #fff; }

/* ---------- 본문 ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; height: 100dvh; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 18px; min-height: 52px; }
.topbar .title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: inherit; }      /* 제목 + 마감 칩 (폰은 두 줄, 아래) */
.topbar .title { flex: 1; min-width: 0; font-weight: 600; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.topbar .deadline { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: var(--hover); white-space: nowrap; }
.topbar .deadline.soon { color: var(--fg2); }
.topbar .deadline.urgent { color: #B42318; background: rgba(180,35,24,.08); }
.topbar .deadline.over { color: var(--faint); text-decoration: line-through; }
:root[data-theme="dark"] .topbar .deadline.urgent { color: #FF9C8F; background: rgba(255,120,100,.12); }
.topbar .deadline[hidden] { display: none; }
@media (max-width: 640px) { .topbar .deadline { padding: 2px 6px; font-size: 11.5px; } }
/* 폰: 제목은 단추 줄 아래 한 줄 전 폭, 마감 칩은 그 줄 끝 — PC 처럼 (10/20 S-21·L10: 마감 칩을 제목 아래로 내려도(10/19) 언어·더보기·창 단추·
   요금제·로그인이 자리를 나눠 제목 칸이 77~87px, '[경남] 통영…' 여섯 글자만 보였다). 위 줄은 사이드바 단추 왼쪽 · 나머지 단추 오른쪽 */
@media (max-width: 640px) {
  #main > .topbar { flex-wrap: wrap; row-gap: 0; padding-bottom: 4px; }          /* #main: 아래 860px 칸의 gap·padding 보다 먼저 */
  .topbar > #side-open { margin-right: auto; }
  .topbar .title-wrap { order: 9; flex: 1 0 100%; flex-direction: row; align-items: center; gap: 6px; min-height: 22px; padding: 0 4px; }
  .topbar .title-wrap .title { line-height: 22px; }
  .topbar .title-wrap .deadline { flex: none; padding: 0 6px; font-size: 11px; line-height: 17px; }
}
.topbar .title[contenteditable="true"] { outline: 2px solid var(--accent-ring); border-radius: 6px; padding: 0 6px; background: var(--elev); }
.viewers { display: flex; align-items: center; }
.viewers .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.viewers .together { font: inherit; font-size: 12.5px; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--hover); white-space: nowrap; border: 0; cursor: pointer; }
.viewers .together:hover { color: var(--fg); background: var(--hover2); }
.side-item .pres { display: inline-flex; flex: none; }
.side-item .pres .avatar { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--side-solid); }
.top-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--hover2); color: var(--fg); }
.icon-btn.on { background: var(--hover2); color: var(--fg); }
.only-collapsed { display: none; }
.app.side-collapsed .only-collapsed { display: inline-grid; }

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.transcript { flex: 1; min-height: 0; overflow: auto; padding: 18px 0 20px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.thread { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }

/* 첫 화면 (10/2): 이름표 · 큰 제목(굵기와 자간으로 힘). 상자·카드 없음 (Claude 처럼 조용하게)
   입력창은 대화할 때처럼 맨 아래, 인사는 남은 자리 가운데 (10/4 폰 · 10/16 PC 도, 대표 "채팅 위치 하단이어야") */
.hello { text-align: center; padding: 0 0 6px; }
.hello-mode .view { overflow: auto; }
.hello-mode .transcript { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; overflow: visible; padding: 0 0 12px; -webkit-mask-image: none; mask-image: none; }
.hello-mode .composer .foot { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.ask-fill .row { margin-top: 8px; }           /* 양식만 붙이고 보냈을 때의 물음: 채우기 · 자료 올리기 */
/* 이름표가 첫 화면의 H1 (10/20 검색 노출: 한국어 화면은 데이터 폴더의 한글 이름, 없거나 영어 화면은 예전 그대로 'DESTINY EDIT'), 질문은 그 아래 큰 제목 (소개 한 줄은 없다 — 10/20 대표·PM) */
.hello-lab { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 10.5px/1 var(--lat); letter-spacing: .3em; color: var(--muted); }
.hello-lab.ko-name { font: 600 12px/1 var(--font); letter-spacing: .08em; }   /* 한글 이름일 때만 (서버가 데이터 폴더 이름을 넣으며 붙인다). 한글은 영어처럼 벌리면 글자가 따로 놀아 EIDOS 첫 화면 이름과 같은 간격 (10/20 PM) */
.hello-lab::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--glow); }
.hello .hello-q { font-size: 34px; font-weight: 700; margin: 16px 0 0; letter-spacing: -.035em; line-height: 1.3; }
.hello-start { margin: 22px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; border: 1px solid var(--border2); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); cursor: pointer; }
.hello-start:hover { border-color: var(--accent); color: var(--accent-ink); }
.hello p { color: var(--muted); margin: 8px 0 0; font-size: 15px; }
.hello-biz { margin: 0 auto; max-width: 720px; font-size: 11.5px; line-height: 1.7; color: var(--faint); word-break: keep-all; }   /* 입력창 아래 맨 밑 (10/16) */
.hello-biz .biz-nav a { color: var(--muted); text-decoration: none; } .hello-biz .biz-nav a:hover { text-decoration: underline; }
.hello-biz .biz-line { margin: 2px 0 0; font-size: 11.5px; color: var(--faint); }
.hello-biz .biz-line a.co { color: inherit; text-decoration: none; } .hello-biz .biz-line a.co:hover { text-decoration: underline; }   /* 회사 이름 → 회사 홈페이지 (10/20, 둘레 글과 같은 색) */
/* 첫 화면 '이번 달 놓친 지원금' 카드 (대표 10/17 가안: 제목 · 부제 · 단추 하나, 안내 줄 없음). 입력창과 같은 바탕·모서리·그림자.
   대화 줄(#thread)은 글 폭만큼 줄어드는 상자라 첫 화면에서는 제 폭으로 편다 (카드 폭을 정하면 줄이 같이 늘어 가로로 넘쳤다) */
.hello-mode #thread { width: 100%; }
/* 제목 아래 작은 회색 한 줄 (대표 10/22 "가운데 너무 후져 좀더 작게" · "제목보다 옆으로 넓은 거 과해, 글자 작게, 너무 눈에 띄어"):
   상자·테두리 없이 '접수 중 건수 · 내 공고 찾기', 제목 폭보다 좁게 (이번 달 마감 수는 빼서 줄을 줄임). 줄 어디를 눌러도 공고 목록 (app.js) */
.missed { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: 14px auto 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.missed h2 { margin: 0; font-size: 12.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.missed h2 span { display: inline-block; }
.missed h2 span + span { font-weight: 600; color: var(--fg); margin-left: 3px; }
.hello .missed p { display: none; }
.missed .btn.big-btn::before { content: "·"; margin-right: 8px; color: var(--faint); }
.missed .btn.big-btn { height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 12.5px; font-weight: 600;
  color: var(--fg); border-radius: 0; }
.missed:hover .btn.big-btn { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {          /* 폰 (대표 10/22 "폰화면 너무 크잖아") */
  .missed { margin-top: 12px; }
  .missed h2, .missed .btn.big-btn { font-size: 12px; }
}
/* 한 번 쓴 신청서 옮겨 쓰기 (대표 10/27, 문구 UI.REUSE.hello) — 첫 화면의 파일 입구 하나 (대표 10/28): 소개 한 줄 아래 가운데, 가장 눈에 띄는 단추 (.btn.primary) */
.hello .hello-reuse { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; height: 46px; margin: 20px auto 0;
  padding: 0 24px; gap: 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--fg); font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; word-break: keep-all; }
.hello .hello-reuse:hover { border-color: var(--accent); background: var(--accent-soft); }     /* 흰 바탕 단추 (대표 10/28 "흰색 저번걸로") */
.hello-reuse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hello.onb-on .hello-reuse { display: none; }
@media (max-width: 600px) { .hello .hello-reuse { height: 44px; padding: 0 20px; font-size: 14.5px; } }
/* EDIT 가 해 주는 일 한 줄 (대표 10/24) — 제목 바로 아래 회색 한 줄 */
.hello .hello-what { margin: 10px 0 0; font-size: 15px; color: var(--muted); word-break: keep-all; text-wrap: balance; }   /* 두 줄이 되면 고르게 (10/25 폰에서 '드려요.'만 둘째 줄) */

/* 첫 화면 질문 흐름 (static/onboard.js, 대표 10/24 '숨고처럼'): 제목 자리에서 넘어가는 카드. 덮개 아님 — 아래 입력칸은 그대로.
   보기 단추는 같은 너비 격자 (PC --c 칸 · 폰 --cm 칸), 높이 48px (손가락 — 대표 10/24 "좀더 얇게"여도 그 아래로는 X), 연한 1px 테두리, 고른 것은 테두리·체크 */
.hello.onb-on .hello-q, .hello.onb-on .missed, .hello.onb-on .hello-start { display: none; }
/* 질문 카드가 첫 화면보다 길면(폰의 분야 24칸) 첫 화면 칸이 줄어들지 않고 화면째 내려간다 — 입력칸 밑으로 겹쳐 그려지지 않게 */
.hello-mode .transcript:has(#onb) { flex: 1 0 auto; min-height: auto; }
/* 결과 화면: 위 'DESTINY EDIT'·한 줄 소개·진행 막대를 접고 위에서부터 (대표 10/24 "한페이지에 두개넘적어") */
.hello.onb-r .hello-lab, .hello.onb-r .hello-what { display: none; }
.hello-mode .transcript:has(.hello.onb-r) { justify-content: flex-start; }
.hello.onb-on .hello-what { margin-top: 8px; font-size: 14px; }
.onb { box-sizing: border-box; width: min(760px, 100%); margin: 18px auto 0; text-align: left; }
.hello.onb-r .onb { margin-top: 4px; }
/* 위 한 줄: 뒤로(첫 질문은 '써 본 적 있어요 · 로그인') · 진행 막대와 n/5 · 건너뛰기 */
.onb-top { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) minmax(72px, max-content); align-items: center; gap: 10px;
  min-height: 36px; margin: 0 0 4px; }
.onb-lead { justify-self: start; display: inline-flex; align-items: center; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.onb-lead .onb-link { font-size: 12.5px; padding: 2px 6px; }
.onb-prog { display: flex; align-items: center; gap: 10px; min-width: 0; }
.onb-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.onb-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s ease; }
.onb-n { flex: none; min-width: 2.6em; text-align: right; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.onb-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.onb-link:hover { background: var(--hover); color: var(--fg); }
.onb-back { justify-self: start; } .onb-skip { justify-self: end; white-space: nowrap; }
.onb-flip { transform: scaleX(-1); }
.onb-q { margin: 6px 0 16px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; word-break: keep-all; }
.onb-grid { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.onb-grid + .onb-grid { margin-top: 8px; }
.onb-opt { position: relative; box-sizing: border-box; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--fg); font: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; word-break: keep-all; cursor: pointer;
  transition: border-color .12s, background-color .12s, box-shadow .12s; }
.onb-opt .onb-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.onb-opt .onb-c { flex: none; font-size: 12px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.onb-opt .onb-ck { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; display: none; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; }
.onb-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.onb-opt[aria-pressed="true"] .onb-ck { display: grid; }
.onb-opt.etc, .onb-opt.unsure, .onb-opt.onb-more { color: var(--muted); font-weight: 500; }
.onb-opt.onb-more { border-style: dashed; }
.onb-opt:focus-visible, .onb-link:focus-visible, .onb-card:focus-visible, .onb-write:focus-visible, .onb-more-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .onb-opt:hover { border-color: var(--accent); } }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 12px; }
.onb-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.onb-next { min-width: 120px; min-height: 44px; }
.onb.drop { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 14px; }
.onb-wait { display: grid; place-items: center; min-height: 120px; }
.onb-wait-grid { visibility: hidden; }                 /* 보기 건수가 오는 동안 (많아야 0.8초) — 0건 보기를 뺀 뒤에 보인다 */
/* 결과: 위 한 줄(뒤로 · 맞는 공고 n건 · 닫기) · 좁혀지는 수 한 줄 · 칩 한 줄 · 리스트 (한 공고 = 세 줄 안팎, 줄 사이 얇은 선) */
.onb-rtop { grid-template-columns: 72px minmax(0, 1fr) 72px; margin-bottom: 8px; }
.onb-rq { margin: 0; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* 둘로 나눈 머리 (분야 공고 수 · 분야 상관없는 공고 수): 뒤쪽은 흐리게, 좁으면 두 줄로 (가운데 맞춤) */
.onb-rq:has(.onb-rq1) { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 6px; row-gap: 0; white-space: normal; }
.onb-rq1, .onb-rq2 { white-space: nowrap; } .onb-rq2 { color: var(--muted); font-weight: 500; font-size: .88em; align-self: center; }
.onb-rqs { color: var(--faint); font-weight: 400; }
.onb-sum { margin: 0 0 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.onb-trail { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); max-width: 440px; margin: 0 auto 10px; padding: 0; }
.onb-trail li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.25; }
.onb-trail b { font-size: 13px; font-weight: 600; color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.onb-trail li:last-child b { color: var(--accent-ink); }
.onb-trail span { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.onb-trail li + li::before { content: "›"; position: absolute; left: 0; top: 0; transform: translateX(-50%); font-size: 13px; color: var(--faint); }
.onb-chips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; max-width: 440px; margin: 0 auto 12px; }
.onb-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); color: var(--fg2); font: inherit; font-size: 12.5px; line-height: 1; white-space: nowrap; cursor: pointer; }
.onb-chip > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-chip .onb-c { flex: none; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.onb-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.onb-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hello .onb-note { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-res { list-style: none; margin: 0 0 6px; padding: 0; border-top: 1px solid var(--border); }
.onb-card { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 2px 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer; }
@media (hover: hover) { .onb-card:hover { background: var(--hover); } }
.onb-rank { align-self: start; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--faint); line-height: 20px; font-variant-numeric: tabular-nums; }
.onb-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.onb-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 20px;
  word-break: keep-all; overflow-wrap: anywhere; }
.onb-meta { display: flex; align-items: baseline; min-width: 0; font-size: 12px; line-height: 17px; color: var(--muted); white-space: nowrap; }
.onb-meta > * { flex: none; }
.onb-meta > * + *::before { content: "·"; margin: 0 5px; color: var(--faint); font-weight: 400; }
.onb-meta .onb-org { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.onb-meta .onb-amt { flex: 0 0 auto; }                 /* 금액은 자르지 않는다 (좁으면 기관 이름이 줄어든다) */
.onb .onb-meta .nt-fit { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--fg2); font-size: 12px; font-weight: 600; vertical-align: baseline; }
.onb-dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.onb-dd.soon { color: #C2410C; }                    /* 마감 7일 안만 (공고 띠의 D-n 과 같은 색) */
:root[data-theme="dark"] .onb-dd.soon { color: #FF9C8F; }    /* 어두운 화면에서 읽히게 (위 공고 띠의 마감 색과 같게) */
/* 까닭은 두 줄까지 (한국어·영어 같게 — 10/24 정한 것 8번), 앞에 신청 가능·자격 확인 */
.onb-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 17px; color: var(--fg2);
  word-break: keep-all; overflow-wrap: anywhere; }
.onb-ws { margin: 0 5px; color: var(--faint); }
.onb-st { font-weight: 500; color: var(--faint); }
.onb-cond { font-weight: 600; color: var(--fg); }              /* 자격 확인할 조건 ('게임 개발사' · '창업 5년 이상') — 까닭 줄 맨 앞, 조금 진하게 */
.onb-st.ok { color: #15803D; }
:root[data-theme="dark"] .onb-st.ok { color: #6EE7A0; }
.onb-new { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-style: normal;
  font-size: 11px; font-weight: 600; line-height: 17px; vertical-align: 1px; }
/* 펼친 줄: 공고문 근거 한두 줄 (원문 그대로, 쪽 단추) · 공고 전체 보기 */
.onb-card.open { background: var(--hover); }
.onb-basis { grid-column: 2 / -1; margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: default; }
.onb-bl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.onb-b { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; font-size: 12.5px; line-height: 18px; }
.onb-bk { color: var(--faint); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.onb-bq { color: var(--fg2); word-break: keep-all; overflow-wrap: anywhere; }
.onb-bq q { quotes: "“" "”"; }
.onb-bp { min-width: 56px; min-height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--fg2); font: inherit;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.onb-bp:hover { border-color: var(--accent); color: var(--accent-ink); }
.onb-bacts { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.onb-basis.bare { padding: 4px 6px; } .onb-basis.bare .onb-bacts { margin-top: 0; }   /* 근거 글이 없을 때: 단추 줄만 */
.onb-bacts .onb-link { font-size: 12.5px; min-height: 28px; }
/* 받는 동안 빈 줄 */
.onb-sk { display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px; column-gap: 8px; padding: 10px 2px 10px 0; border-bottom: 1px solid var(--border); }
.onb-skel .onb-main i { display: block; height: 10px; margin: 4px 0; border-radius: 4px; background: var(--border); opacity: .6; }
.onb-skel .onb-main i:nth-child(1) { width: 78%; height: 13px; } .onb-skel .onb-main i:nth-child(2) { width: 46%; } .onb-skel .onb-main i:nth-child(3) { width: 60%; }
/* 다시 온 손님 한 줄 (첫 화면 제목 아래): 지난번 고른 … 맞춤 공고 · 새로 n건 | 결과 보기 · 다시 고르기 */
.hello.onb-again .onb { width: min(640px, 100%); margin-top: 14px; }
.onb-again-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.onb-again-t { min-width: 0; font-size: 13.5px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-again-new { margin-left: 8px; font-weight: 600; color: var(--accent-ink); }
.onb-again-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.onb-again-go { min-height: 34px; padding: 0 14px; font-size: 13px; }
.onb-write { min-width: 44px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg2);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.onb-write:hover { border-color: var(--accent); color: var(--accent-ink); }
.onb-grp { padding: 12px 0 4px 28px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.onb-more-row { display: block; width: 100%; min-height: 40px; margin: 0 0 12px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; }
.onb-more-row:hover { background: var(--hover); color: var(--fg); }
.onb-acts .onb-opt { min-height: 44px; font-size: 13.5px; font-weight: 500; color: var(--fg2); }
@media (max-width: 600px) {
  .onb { margin-top: 12px; }
  .onb-q { font-size: 21px; margin-bottom: 12px; }
  .onb-grid { grid-template-columns: repeat(var(--cm, 2), minmax(0, 1fr)); }
  .onb-opt { padding: 8px 10px; font-size: 14px; }
  .onb-top.lead { gap: 6px; }
  .onb-lead, .onb-lead .onb-link { font-size: 12px; }
  .onb-lead .onb-link { padding: 2px 4px; }
  .onb-rq { font-size: 16px; }
  .onb-t { font-size: 14px; }
  .onb-b { grid-template-columns: minmax(0, 1fr) auto; } .onb-bk { grid-column: 1 / -1; }
  .onb-rq:has(.onb-rq1) { flex-direction: column; align-items: center; } .onb-rqs { display: none; }   /* 폰: 두 줄로 (가운뎃점 없이) */
  .onb-chips.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 칩 넷 (다시 온 손님 '새 공고'): 폰은 두 칸 두 줄 — 글이 잘리지 않게 */
  .onb-again-row { flex-wrap: wrap; padding: 10px 12px; }
  .onb-again-t { flex: 1 1 100%; white-space: normal; }
  .onb-again-acts { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .onb-again-acts > * { justify-content: center; min-height: 40px; }
  .hello .hello-what { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .onb-bar i, .onb-opt { transition: none; } }
/* 첫 화면 대화 카드 둘 (10/25 오후 static/onboard.js drawCards — 대표 "채팅창에 파일을 올려주거나, 선택하게끔 지원하고자 하는곳 받는거지"):
   대화 안 질문 카드(#thread > .tray.qcard, EPIC .cw-card)와 같은 꼴 — 작은 줄 · 굵은 질문 · 번호 동그라미 세로 보기(고른 것은 강조색) · 아래 단추 줄.
   두 카드의 단추 줄은 같은 두 칸 격자 (오와 열), 보기의 마감 칸은 같은 너비 (줄마다 D-n 이 같은 자리) */
.hello.onb-c .onb { width: min(640px, 100%); }
.onb-qcs { display: grid; gap: 12px; }
.onb-qc { box-sizing: border-box; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card, var(--surface));
  box-shadow: 0 1px 8px rgba(30, 20, 70, .05); }
.onb-qh { display: flex; align-items: center; gap: 4px; min-height: 18px; font-size: 12px; color: var(--muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.onb-qc.done .onb-qh { color: var(--accent-ink); }
.onb-qt { margin: 2px 0 10px; font-size: 15px; font-weight: 650; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.onb-qos { display: grid; gap: 7px; }
.onb-qo { box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px; align-items: center; column-gap: 10px; width: 100%; min-width: 0;
  min-height: 52px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg); font: inherit;
  text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
@media (hover: hover) { .onb-qo:not([disabled]):hover { border-color: var(--accent); } }
.onb-qo:focus-visible, .onb-qf .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-qo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.onb-qo[disabled] { cursor: default; }
.onb-qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hover2); color: var(--fg2); font-size: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.onb-qo[aria-pressed="true"] .onb-qn { background: var(--accent); color: #fff; }
.onb-ql { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.onb-ql b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 19px;
  word-break: keep-all; overflow-wrap: anywhere; }
.onb-qo .onb-dd { justify-self: end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.onb-qo .onb-dd.soon { color: #C2410C; }
:root[data-theme="dark"] .onb-qo .onb-dd.soon { color: #FF9C8F; }
.onb-qnone { margin: 0; font-size: 13px; color: var(--muted); }
.onb-qf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.onb-qf .btn { width: 100%; min-width: 0; min-height: 40px; justify-content: center; white-space: nowrap; }
.onb-qfiles { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.onb-qfiles li { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--fg2); }
.onb-qfiles li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-qv { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--hover); font-size: 13.5px; line-height: 1.5; color: var(--fg2); word-break: keep-all; overflow-wrap: anywhere; }
.onb.going .onb-qc { opacity: .72; }
.onb-qsk { cursor: default; } .onb-qsk .onb-qn { background: var(--border); }
@media (max-width: 600px) {
  .onb-qc { padding: 12px 11px 10px; }
  .onb-qo { grid-template-columns: 22px minmax(0, 1fr) 48px; column-gap: 8px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .onb-qo { transition: none; } }
/* 첫 방문 '처음 오셨어요?' 한 줄과 '버튼으로 골라 보기' 덮개 창 (10/25 대표 "에이도스처럼 … 분야 파악부터" — EIDOS node.css .wzq · .wzv · .wzc 와 같은 꼴,
   색·단추는 EDIT 것). 한 줄: 제목 밑 가운데, 회색 글 + 작은 단추 + 닫기 ×. 창: PC 가운데 520px · 폰은 아래에서 올라오는 판,
   위 진행 칸(처음부터 같은 칸 수) + ×, 질문, 같은 너비 보기 격자 (PC·폰 같은 칸 수 --c), 아래 '이전' · 맞는 공고 수 · '다음' */
.onb-ask { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; font-size: 13px; color: var(--muted); }
.onb-ask .onb-ask-go { height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
.onb-ask-x { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.onb-ask-x:hover { background: var(--hover2); color: var(--fg); }
.onb-ask-x:focus-visible, .obz-x:focus-visible, .obz-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.obz-open { overflow: hidden; }
.obz-bg { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: rgba(11,16,32,.42);
  animation: obz-fade .16s ease-out; }
:root[data-theme="dark"] .obz-bg { background: rgba(0,0,0,.55); }
.obz { box-sizing: border-box; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 20px; border-radius: 20px; background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgba(11,16,32,.28); }
.obz-bg.enter .obz { animation: obz-up .22s var(--ease); }        /* 처음 열 때만 (질문마다 다시 그려도 깜빡이지 않게) */
@keyframes obz-fade { from { opacity: 0; } }
@keyframes obz-up { from { opacity: 0; transform: translateY(12px); } }
.obz-h { display: flex; align-items: center; gap: 12px; }
.obz-p { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.obz-p i { height: 4px; border-radius: 2px; background: var(--border2); }
.obz-p i.on { background: var(--accent); }
.obz-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg2); cursor: pointer; }
.obz-x:hover { background: var(--hover2); }
.obz-t { margin: 18px 2px 14px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; word-break: keep-all; }
.obz-o { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.obz-b { box-sizing: border-box; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px 10px;
  border: 1px solid var(--border2); border-radius: 14px; background: var(--surface); color: var(--fg); font: inherit; font-size: 14.5px; font-weight: 500;
  line-height: 1.3; text-align: center; word-break: keep-all; overflow-wrap: anywhere; cursor: pointer; transition: border-color .12s, background-color .12s; }
@media (hover: hover) { .obz-b:hover { border-color: var(--fg2); } }        /* 폰은 누른 자리에 테두리가 남아 고른 것이 둘로 보였다 (EIDOS) */
.obz-b[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); font-weight: 600; }
.obz-b.etc { color: var(--muted); }
.obz-b.wide { grid-column: 1 / -1; }           /* 마지막 줄에 '직접 입력' 하나만 남으면 그 줄을 다 쓴다 (오와 열) */
.obz-in { display: flex; gap: 8px; margin-top: 8px; }
.obz-in .inp { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; background: var(--elev); font: inherit; }
.obz-in .btn { flex: none; height: 44px; }
.obz.latin .obz-b { overflow-wrap: normal; hyphens: auto; }      /* 영어 낱말은 글자 사이로 꺾지 않는다 ('Semiconductor s') */
.obz-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; margin-top: 16px; }
.obz-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.obz-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obz-f .btn { height: 40px; }
.obz-f .btn.primary { min-width: 96px; }
.obz-m { box-sizing: border-box; width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid var(--border2); border-radius: 14px; background: var(--surface);
  color: var(--fg); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.obz-m:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.obz-rv { display: grid; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.obz-rv > div { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--border); }
.obz-rv > div:first-child { border-top: 0; }
.obz-rv span { font-size: 12.5px; color: var(--faint); }
.obz-rv b { font-size: 14.5px; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; }
.obz-rv b.obz-iv { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.obz-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.obz-go .btn { width: 100%; height: auto; min-height: 46px; padding: 8px 12px; white-space: normal; line-height: 1.3; font-size: 14px; }
@media (max-width: 560px) {
  .onb-ask { gap: 8px; margin-top: 14px; font-size: 12.5px; }
  .obz-bg { place-items: end center; padding: 0; }
  .obz { max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .obz-bg.enter .obz { animation-name: obz-sheet; }
  .obz-b { min-height: 52px; padding: 8px 4px; font-size: 14px; }
  .obz.latin .obz-b { font-size: 13px; }
  .obz-t { font-size: 19px; margin-top: 16px; }
  .obz-rv > div { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 10px; padding: 9px 10px 9px 12px; }
  .obz-rv > div > span { grid-row: 1; } .obz-rv > div > b { grid-row: 2; grid-column: 1; } .obz-rv > div > .btn { grid-row: 1 / 3; grid-column: 2; }
}
@keyframes obz-sheet { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .obz-bg, .obz { animation: none; } .obz-b { transition: none; } }

/* 메시지 */
.msg { display: flex; flex-direction: column; gap: 4px; position: relative; }
.msg.user { align-items: flex-end; }
/* 단추가 대신 보낸 말 (대표 10/27): 말풍선 대신 작은 줄 — 말풍선과 같은 오른쪽에 */
.msg.auto-msg { align-items: flex-end; }
.auto-line { display: inline-flex; align-items: center; gap: 6px; max-width: 86%; font-size: 12.5px; line-height: 1.4; color: var(--muted); padding: 2px 4px; }
.auto-line svg { flex: none; }
.auto-line span { min-width: 0; overflow-wrap: anywhere; }
.msg .meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.msg.user .meta { flex-direction: row-reverse; }
.bubble li, .bubble p, .ncard-t { text-wrap: pretty; }     /* 끝 줄에 한두 글자만 남지 않게 (대표 10/31 "줄바뀜 … 이런거 신경써") */
.msg .bubble { max-width: 86%; padding: 11px 16px; border-radius: 18px 18px 6px 18px; background: var(--user-bubble); color: var(--user-ink); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.msg.user.other .bubble { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 18px 18px 18px 6px; }
.msg.assistant .bubble { background: transparent; color: var(--fg); padding: 0; max-width: 100%; white-space: normal; }
.msg.user .bubble.long:not(.open) { max-height: 18em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.bubble-more { align-self: flex-end; border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.msg .tools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; margin-top: 2px; }
.msg:hover .tools, .msg .tools:focus-within { opacity: 1; }
.msg .tools .icon-btn { width: 28px; height: 28px; }
.msg .tools .t-time { font-size: 11.5px; color: var(--faint); align-self: center; margin-left: 4px; }
.msg.pending .bubble { opacity: .7; }
/* Ctrl+A 로 고른 곳을 복사하면 글만 (대표 10/4, app.js 'Ctrl+A'): 단추 글·시간·사진 글자·이름표는 고르지 않는다.
   통과·실패 같은 표(badge)와 붙인 파일 이름은 내용이라 복사된다 */
:is(#thread, #dock-body, #pv-body, #modal, .mt-pane, #mrec-dock) :is(button, .btn, .avatar, .t-time, .held-tag) { -webkit-user-select: none; user-select: none; }
:is(#thread, #dock-body, #pv-body, #modal, .mt-pane, #mrec-dock) .mfile .n { -webkit-user-select: text; user-select: text; }
/* 회의 줄의 꼬리표 (자막 · 고침 · 메모·채팅 같은 출처)는 말이 아니다. 말한 사람·시각·말은 남는다 */
:is(#mrec-dock, .mt-pane) :is(.capm, .ml-edited, .ml-who .badge) { -webkit-user-select: none; user-select: none; }
.md p { margin: 0 0 .7em; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: .3em 0 .8em; padding-left: 1.4em; } .md li { margin: .15em 0; }
.md .md-h { margin: 1em 0 .4em; font-weight: 700; line-height: 1.35; } h3.md-h { font-size: 18px; } h4.md-h { font-size: 16px; } h5.md-h, h6.md-h { font-size: 14.5px; }
.md blockquote { margin: .6em 0; padding: 2px 12px; border-left: 3px solid var(--border2); color: var(--fg2); }
.md code { font-family: var(--mono); font-size: 12.5px; background: var(--hover2); padding: 1px 5px; border-radius: 5px; }
.md .code { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: .6em 0; background: var(--elev); }
.md .code-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.md .code-copy { display: inline-flex; gap: 4px; align-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.md pre { margin: 0; padding: 12px 14px; overflow: auto; } .md pre code { background: none; padding: 0; }
.md .tbl { overflow: auto; margin: .6em 0; }
.md table { border-collapse: collapse; font-size: 13.5px; min-width: 50%; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; }
.md th { background: var(--hover); text-align: center; font-weight: 600; }
.md td.num { text-align: right; font-variant-numeric: tabular-nums; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
.cursor { display: inline-block; width: 7px; height: 16px; background: var(--accent); vertical-align: -3px; border-radius: 2px; animation: blink 1s steps(2) infinite; margin-left: 2px; }
/* 흘러나오는 답의 끝 글자 (app.js fadeTail — 대표 10/15 "클로드처럼 부드럽게"): 투명도는 글자마다 스크립트가, 바뀔 때 살짝 번지게 */
.fade-tail { transition: opacity .18s linear; }
.think { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.waiting-dots span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--faint); animation: bounce 1.2s infinite; }
.waiting-dots span:nth-child(2) { animation-delay: .15s; } .waiting-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }

/* 다른 사람이 입력 중 (대표 10/23 "라인이나 카톡이나 텔레그램처럼"): 대화 맨 아래 · 마지막 말 바로 밑 · 상대 말풍선 자리(왼쪽)의 점 셋 풍선,
   위에 작은 회색 이름. 풍선은 남의 말풍선(.msg.user.other .bubble)과 같은 바탕·테두리·모서리. 점은 차례로 오르내림(한 바퀴 1.2초) */
.typing-bar { max-width: 800px; width: 100%; margin: 18px auto 0; padding: 0 24px; display: flex; flex-direction: column; align-items: flex-start; }
.typing-bar:empty { display: none; }
.typing-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 86%; min-width: 0; }
.typing-line .who { max-width: 100%; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typing-line .tl-bub { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 16px; border-radius: 18px 18px 18px 6px;
  background: var(--card); border: 1px solid var(--border); }
.typing-line .tl-bub i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: tybub 1.2s infinite ease-in-out; }
.typing-line .tl-bub i:nth-child(2) { animation-delay: .15s; } .typing-line .tl-bub i:nth-child(3) { animation-delay: .3s; }
@keyframes tybub { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes tyblink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-line .tl-bub i { animation-name: tyblink; } }
@keyframes tdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* ---------- 입력창 ---------- */
.composer { padding: 8px 24px 16px; position: relative; }
/* 맨 아래로 (대표 10/7: Claude·ChatGPT 처럼 위로 올려 읽는 동안 끌어내리지 않고, 이 단추로 돌아온다) */
.jump-latest { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); z-index: 6; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border2); background: var(--fg); color: var(--bg); border-color: transparent; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-l); cursor: pointer; }
.jump-latest[hidden] { display: none; }
.jump-latest:hover { border-color: var(--border2); }
.composer-inner { max-width: 800px; margin: 0 auto; }
.box { background: var(--elev); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 10px 10px 8px 14px; transition: border-color .15s, box-shadow .15s; }
.box:focus-within { border-color: var(--border2); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
.box textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: 4px 2px 6px; max-height: 240px; line-height: 1.55; font-size: 15px; }
.box textarea::placeholder { color: var(--faint); }
.box-row { display: flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--elev); color: var(--fg2); font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 240px; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip:hover { background: var(--hover); }
.chip.web.on { border-color: var(--border2); color: var(--fg); background: var(--elev); font-weight: 600; }
.chip.web.auto { color: var(--fg2); }
.chip .st { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.chip .st.ready { background: var(--ok); } .chip .st.ready.remote { background: var(--blue); } .chip .st.ready.office { background: var(--accent); } .chip .st.loading { background: #d6a23a; animation: pulse 1.2s infinite; } .chip .st.off { background: var(--err); }
.send { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--pri-grad); color: var(--on-primary); box-shadow: var(--pri-edge); transition: box-shadow .3s, transform .1s; }
.send:hover { box-shadow: var(--pri-edge), 0 10px 24px -10px rgba(11,15,20,.5); }
.send:active { transform: scale(.95); }
.send:disabled { background: var(--soft); color: var(--faint); box-shadow: inset 0 0 0 1px var(--border); cursor: default; }
.send.stop { background: var(--fg); }
.icon-btn.rec { color: var(--err); background: var(--err-soft); animation: pulse 1.4s infinite; }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.attach-list:empty { display: none; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); font-size: 12.5px; max-width: 260px; }
.att .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att button { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 6px; }
.att button:hover { background: var(--hover2); }
.att[data-fview] { cursor: pointer; }
.att .thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; flex: none; }
.att .st-i { display: inline-flex; align-items: center; color: var(--ok); font-size: 11px; }
.att.reading .st-i, .att.uploading .st-i { color: var(--blue); }
.att.failed { border-color: rgba(191,58,43,.4); } .att.failed .st-i { color: var(--err); }
/* 못 올리거나 못 읽은 파일: 이름 아래 까닭 한 줄 (EPIC 10/31 손님 점검 2번 — 빨간 세모만으로는 폰에서 까닭을 볼 수 없었다) */
.att .nb { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.att .why { color: var(--err); font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }
.att:has(.why) { max-width: min(340px, 100%); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue-soft); border-top-color: var(--blue); animation: spin 1.4s linear infinite; display: inline-block; }   /* 대표 10/6: 너무 빨라 조급해 보임 */
@keyframes spin { to { transform: rotate(360deg); } }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 86%; }
.mfile { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 12.5px; max-width: 300px; color: var(--fg); font-family: inherit; text-align: left; }
.mfile:hover { border-color: var(--border2); box-shadow: var(--shadow-s); }
.mfile .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mfile .sub { flex: none; font-size: 11.5px; color: var(--faint); }
.mfile.img { padding: 0; overflow: hidden; border-radius: 12px; }
.mfile.img img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
/* 문서(쪽 그림이 있는 파일): 위는 첫 쪽, 아래는 확장자 + 이름 */
.mfile.doc { flex-direction: column; align-items: stretch; gap: 0; width: 176px; padding: 0; overflow: hidden; }
.mfile.doc .pg { position: relative; display: grid; place-items: center; height: 124px; background: var(--soft); color: var(--faint); border-bottom: 1px solid var(--border); overflow: hidden; }
.mfile.doc .pg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; opacity: 0; transition: opacity .2s; }
.mfile.doc .pg img.ok { opacity: 1; }      /* 그리는 동안·못 그리면 흰 칸 대신 종류 아이콘 (10/25 대표 손님 화면) */
.mfile.img { position: relative; }
.msg-files .mfile.img img { height: 158px; max-height: none; width: auto; min-width: 120px; max-width: 280px; }   /* 문서 카드와 같은 높이로 줄 맞춤 */
.mfile.img .ext { position: absolute; left: 7px; bottom: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.mfile.doc .cap { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px 8px; }
.mfile.doc .cap .n { flex: 1; font-size: 12px; color: var(--fg2); }
/* 확장자 표 (UI.extBadge): 종류마다 옅은 색 한 가지 — 한글 파랑, 워드 남색, 엑셀 초록, PPT 붉은 갈색, PDF 빨강 */
.ext { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 32px; height: 18px; padding: 0 6px; border-radius: 4px; font: 600 9px/1 var(--lat); letter-spacing: .5px; font-style: normal; color: var(--fg2); background: var(--elev); box-shadow: inset 0 0 0 1px var(--border2); gap: 4px; }
.ext::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; }
.ext.x-hwp { --c: #3A8DFF; } .ext.x-doc { --c: #7F8BA3; } .ext.x-xls { --c: #17784F; } .ext.x-ppt { --c: #B0603A; } .ext.x-pdf { --c: #C2303B; }
.ext.x-img { --c: #8A7AB8; } .ext.x-vid { --c: #9A5B7A; } .ext.x-aud { --c: #9A7A3A; } .ext.x-3d { --c: #3F8A93; } .ext.x-code { --c: #5E636B; }
:root[data-theme="dark"] .ext { color: var(--fg2); background: rgba(255,255,255,.03); }
.msg-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.msg-refs span { display: inline-flex; align-items: center; gap: 4px; }
.stream-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; max-width: 100%; }
.stream-status .wait-x { border: 0; background: none; color: inherit; padding: 0 0 0 4px; cursor: pointer; display: inline-flex; }
.stream-status .wait-x[hidden] { display: none; }
.stream-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 바깥 AI 사용료: 부르기 전 예상(크면 묻기) · 끝난 답 아래 실제 */
.msg .cost-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.msg .cost-line.ask { color: var(--fg); background: var(--warn-soft); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; gap: 8px; }
.msg .cost-line.ask .grow { min-width: 12em; }
.msg .cost-line.ask svg { color: var(--warn); flex: none; }
.msg .cost-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 6px; }
.msg .cost-foot svg { flex: none; }
pre.ftext { white-space: pre-wrap; word-break: break-word; max-height: 44vh; overflow: auto; background: var(--elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-family: var(--font); line-height: 1.6; margin: 0; }
/* 채팅창 위 질문 모음 (tray.js, 10/6 대표 "클로드처럼"): 번호 붙은 고르기 줄 + 직접 쓰기 */
.tray { margin: 0 0 8px; padding: 10px 10px 8px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.tray-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; color: var(--muted); font-size: 12.5px; }
.tray-head .tray-title { flex: 1; min-width: 0; color: var(--fg2); font-weight: 600; }
.tray-step { font-variant-numeric: tabular-nums; color: var(--accent-ink); margin-right: 2px; }
.tray-link { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.tray-link:hover { background: var(--hover); color: var(--fg); }
.tray-x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.tray-x:hover { background: var(--hover); color: var(--fg); }
.tray-q { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 8px; font-size: 14px; color: var(--fg); }
.tray-q span { font-size: 12.5px; color: var(--muted); }
.tray-opts { display: flex; flex-direction: column; gap: 2px; }
.tray-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--fg); font: inherit; padding: 8px; border-radius: var(--r-s); cursor: pointer; }
.tray-opt:hover, .tray-opt:focus-visible { background: var(--hover2); outline: none; }
.tray-n { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--soft); border: 1px solid var(--border); color: var(--muted); font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tray-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.tray-l b { font-weight: 600; overflow-wrap: anywhere; }
.tray-l span { font-size: 12px; color: var(--muted); }
.tray-in { display: flex; gap: 6px; align-items: flex-end; padding: 6px 4px 2px; }
/* 긴 칸 글은 접어 둔 '원문 보기' (질문 밑 설명 줄 대신, 10/17 CM) · 여러 자리 칸은 자리마다 작은 칸 */
.tray-src { margin: -4px 4px 8px; font-size: 12.5px; color: var(--muted); }
.tray-src summary { cursor: pointer; width: fit-content; padding: 2px 6px; margin-left: -6px; border-radius: 6px; }
.tray-src summary:hover { background: var(--hover); color: var(--fg); }
.tray-src > div { margin-top: 4px; padding: 8px 10px; border-radius: var(--r-s); background: var(--soft); color: var(--fg2); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.tray-items { margin: -2px 4px 10px; padding: 8px 10px 8px 26px; border-radius: var(--r-s); background: var(--soft); color: var(--fg2); font-size: 13px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.tray-items li + li { margin-top: 4px; }
.tray-opt.on { background: var(--accent-soft, var(--soft)); box-shadow: inset 0 0 0 1.5px var(--accent, currentColor); }
.tray-opt.on .tray-n { background: var(--accent, currentColor); color: var(--bg, #fff); }
/* 여러 개 고르기의 보내기 단추 — 상자 맨 밑 줄(목록과 겹치지 않게 바탕을 깐 줄)로 늘 보인다. 목록을 끝까지 내리면 마지막 줄이 이 줄 위로 (10/18 PM) */
#tray .tray-multi-bar { position: sticky; bottom: -8px; z-index: 1; display: flex; justify-content: flex-end; margin: 4px -10px -8px; padding: 8px 10px; background: var(--surface); border-top: 1px solid var(--border2); border-radius: 0 0 var(--r) var(--r); }
@media (max-width: 860px) { #tray .tray-multi-bar { bottom: -6px; margin: 4px -8px -6px; padding: 8px; } }
#tray .tray-multi { margin: 0; }
.tray-slots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tray-slot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg2); }
.tray-slot > span { white-space: nowrap; }
.tray-in .tray-slot input { width: 96px; flex: none; }
.tray-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tray-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); }
.tray-field > span { flex: none; width: 92px; overflow-wrap: anywhere; }
.tray-in .tray-field input { flex: 1; min-width: 0; }
.tray-slot em { font-style: normal; color: var(--muted); white-space: nowrap; }
/* 쓰기 전 몇 가지 (tray.js gapAsk) — EPIC 질문 카드 꼴 (대표 10/21 0시대 폰 400 그림을 보고 "아 네모 존나 답답하네 … 밑위 머릿말 꼬릿말 위치
   상하단 여백좀 줘 … 내가 물어보는 거 에픽처럼 하랫지"). 한 번에 물음 하나: 머리 줄('n/N · 이름' · 이전/다음 물음 · 닫기)은 위아래 여백 ·
   질문 15px · 번호 동그라미 붙은 세로 보기(추천은 강조색 테두리 + '추천' 표, 그 밑 까닭 한 줄) · 맨 밑 '기타 · 직접 쓰기' 칸 · 점선 위 정한 것 줄 ·
   선 아래 끝 줄(남은 초 · 건너뛰고 쓰기 · 알려 주고 쓰기)도 위아래 여백. 첫 화면(채팅창 위)과 대화 안 카드가 같은 꼴 (EPIC .cw-card 와 같은 값) */
:is(#composer, #thread) #tray.gapbox { padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 1px 8px rgba(30, 20, 70, .05); }
#composer #tray.gapbox { box-shadow: var(--shadow); }
:is(#composer, #thread) #tray.gapbox > .tray-head { margin: 0; padding: 14px 10px 12px 16px; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
:is(#composer, #thread) #tray.gapbox > .tray-head > svg { display: none; }
:is(#composer, #thread) #tray.gapbox > .tray-head .tray-title { padding: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
:is(#composer, #thread) #tray.gapbox .tray-step { margin: 0; color: inherit; }
.tray-gnav { display: inline-flex; flex: none; gap: 2px; }
.tray-gnav .tray-link { font-size: 12.5px; padding: 4px 8px; }
.tray-gnav .tray-link:disabled { opacity: .35; cursor: default; background: none; color: var(--muted); }
.tray-gaps { display: flex; flex-direction: column; }
.tray-gbody { padding: 0 16px 14px; }
.tray-gap { display: flex; flex-direction: column; }
.tray-gq { margin: 0 0 12px; font-size: 15px; font-weight: 650; line-height: 1.45; color: var(--fg); word-break: keep-all; overflow-wrap: anywhere; }
.tray-gq b { display: block; font-weight: inherit; }
:is(#composer, #thread) #tray.gapbox .tray-opts { gap: 7px; }
:is(#composer, #thread) #tray.gapbox .tray-opt { align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
:is(#composer, #thread) #tray.gapbox .tray-opt.rec { border-color: var(--accent); }
@media (hover: hover) { :is(#composer, #thread) #tray.gapbox .tray-opt:hover { border-color: var(--accent); background: var(--accent-soft); } }
:is(#composer, #thread) #tray.gapbox .tray-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
:is(#composer, #thread) #tray.gapbox .tray-n { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--hover2); color: var(--fg2); font-size: 12px; font-weight: 700; }
:is(#composer, #thread) #tray.gapbox .tray-opt.rec .tray-n, :is(#composer, #thread) #tray.gapbox .tray-opt.on .tray-n { background: var(--accent); color: #fff; }
:is(#composer, #thread) #tray.gapbox .tray-l { flex: 1; font-size: 14px; }
:is(#composer, #thread) #tray.gapbox .tray-l b { font-weight: 500; line-height: 1.4; word-break: keep-all; }
.tray-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.tray-why { margin: -3px 0 2px 44px; font-size: 12px; line-height: 1.45; color: var(--muted); word-break: keep-all; }
/* 카드 안에는 글 칸이 없다 (10/21 04시 대표 "다른답이면 아래 채팅에 적는거지 … 에픽한테 배워와"): 다른 답·적는 물음의 답은 아래 채팅 입력칸에 (tray.js takeInput) */
/* 정한 것 줄 (EPIC .cw-set): 답한 물음은 이름 + 답, 아직은 '?'. 누르면 그 물음으로, 지금 물음은 강조색 테두리.
   한 줄로 두고 넘치면 옆으로 민다 (오른쪽이 흐려짐) — 줄이 늘어 카드가 커지면 첫 화면 상자는 위로 자라 누르던 보기가 손가락 밑에서 달아났다 */
.tray-gset { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); overflow-x: auto; scrollbar-width: none; }
.tray-gset::-webkit-scrollbar { display: none; }
.tray-gset.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tray-gset.left { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }   /* 옆으로 밀어 앞 칸이 가려졌으면 왼쪽도 흐리게 */
.tray-gset.left.more { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.tray-gk { flex: none; display: inline-flex; align-items: baseline; max-width: 72%; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--faint); font: inherit; font-size: 12px; line-height: 1.45; text-align: left; cursor: pointer; white-space: nowrap; }
.tray-gk b { flex: none; margin-right: 5px; font-weight: 600; color: var(--muted); }
.tray-gk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tray-gk.on { border-color: transparent; background: var(--accent-soft); color: var(--fg); }
.tray-gk.cur { border-color: var(--accent); }
.tray-gk:hover, .tray-gk:focus-visible { border-color: var(--accent); outline: none; }
/* 끝 줄: 선 아래 위 12 · 아래 14 여백. 좁은 폰은 남은 초 글이 두 줄로 접히고 단추 둘은 한 줄에 */
:is(#composer, #thread) #tray.gapbox .tray-gaps .tray-gact { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 12px 12px 14px 16px;
  border-top: 1px solid var(--border2); border-radius: 0 0 16px 16px; background: var(--card); box-shadow: none; }
.tray-gact .tray-count { flex: 1 1 0; min-width: 0; margin-right: auto; word-break: keep-all; line-height: 1.35; }
.tray-gact .btn { flex: none; }
/* 첫 화면(채팅창 위) 상자: 머리 줄과 끝 줄은 그대로 두고 가운데만 굴러간다 (물음 하나라 대개 굴릴 일 없음). 폰은 화면의 6할까지 (EPIC #cwDock 60vh).
   더 있으면 아래가 흐려지고(down), 내려 봤으면 위에 가는 선(up) — tray.js edges */
#composer #tray.gapbox:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 861px) { #composer #tray.gapbox:not([hidden]) { max-height: min(62vh, 640px); } }
@media (max-width: 860px) { html:not(.kb-up) #composer #tray.gapbox:not([hidden]) { max-height: 60vh; max-height: 60dvh; } }
/* 폰: 첫 화면 쓰기 전 상자가 열린 동안은 상담 동그라미·접힌 상담 막대를 숨긴다. 동그라미는 입력칸 위로 올라가되 화면 가운데 아래에 머무는데,
   상자가 그 위까지 올라와 동그라미 자리가 상자 안이 됐다 (app.js 는 상자 안 단추·칸과 겹칠 때만 숨긴다). 상자를 닫으면 다시 보인다.
   컴퓨터는 동그라미가 대화 칸 오른쪽 밖이라 그대로 */
@media (max-width: 860px) { html:has(#composer #tray.gapbox:not([hidden])) :is(#help-fab, #help-bar) { display: none !important; } }
#composer #tray.gapbox > .tray-head { flex: none; }
#composer #tray.gapbox .tray-gaps { flex: 1 1 auto; min-height: 0; }
#composer #tray.gapbox .tray-gbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid transparent; }
#composer #tray.gapbox .tray-gbody.up { border-top-color: var(--border2); }
#composer #tray.gapbox .tray-gbody.down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
#composer #tray.gapbox .tray-gaps .tray-gact { flex: none; }
/* 대화 안 카드: 끝 줄은 대화 아래에 붙는다 (카드 아래가 화면 밖이어도 '알려 주고 쓰기'가 보이게, 자판이 떠 있을 때) */
#thread > #tray.gapbox .tray-gaps .tray-gact { position: sticky; bottom: 0; z-index: 1; }
/* 폰 자판이 떠 있고 아래 입력칸에 답을 적는 동안 (10/21 04시 — 카드 안에는 칸이 없다): 질문과 보기가 입력칸 위에 보이게 카드의 정한 것 줄·끝 줄을 접는다
   (보내면 다음 물음, 끝 물음이면 '알려 주고 쓰기'와 같이 · 자판을 내리면 다시 보인다). 첫 화면 상자는 위 칸에 붙은 높이 한도(자판 위 34%) 대신
   입력칸 위 남은 높이를 다 쓴다 — 전엔 머리 줄과 질문만 보이고 보기가 잘렸다 (창이 줄어드는 안드로이드 크롬처럼 높이 반에서 봄) */
@media (max-width: 860px) {
  html.kb-up:has(#input:focus) #tray.gapbox:not([hidden]) :is(.tray-gset, .tray-gact) { display: none; }
  html.kb-up #main.hello-mode:has(#composer #tray.gapbox:not([hidden])) .transcript { flex: 0 0 auto; }
  html.kb-up #main.hello-mode #composer:has(#tray.gapbox:not([hidden])) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  html.kb-up #main.hello-mode #composer:has(#tray.gapbox:not([hidden])) > .composer-inner { flex: 0 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  html.kb-up #main.hello-mode #composer:has(#tray.gapbox:not([hidden])) > .composer-inner > :not(#tray) { flex: none; }
  html.kb-up #main.hello-mode #composer #tray.gapbox:not([hidden]) { flex: 0 1 auto; min-height: 0; max-height: none; }
}
/* 손가락 기기: 보기 줄은 EPIC 과 같은 44px (대화 안 카드의 48px 규칙을 덮는다 — 폰 360 에서 대표가 본 네 물음이 굴리지 않고 들게) */
@media (pointer: coarse) {
  :is(#composer, #thread) #tray.gapbox .tray-opt { min-height: 44px; }
  /* 같은 꼴: 하나씩 답하는 카드의 '직접 쓰기' 칸 안내 글('예: 2024.03.02')도 16px 로 물음(14·15px)보다 컸다 → 14px (적는 글은 16px 그대로) */
  .tray-in input::placeholder, .tray-in textarea::placeholder { font-size: 14px; }
}
.tray-in input, .tray-in textarea { flex: 1; min-width: 0; border: 1px solid var(--border2); border-radius: var(--r-s); background: var(--bg); color: var(--fg); font: inherit; font-size: 13.5px; padding: 8px 10px; resize: vertical; }
.tray-in input:focus, .tray-in textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.tray-warn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px 2px; font-size: 12.5px; color: var(--fg); }   /* 짧은 값 칸에 긴 글: 넣기 전에 한 번 */
.tray-warn span { flex: 1 1 180px; min-width: 0; color: var(--muted); }
.tray-warn.tray-err span { color: var(--err); }   /* 서버가 받지 않은 답의 까닭 — 카드에 머문다 (EIDOS 10/31 19번) */
/* 관전 (대표 10/17): 관리자가 보는 고객 대화의 질문 모음 — 읽기만 (tray.js roOffer · roPre) */
.tray-ro { display: flex; flex-direction: column; gap: 5px; padding: 0 4px 6px; max-height: 168px; overflow: auto; }
.tray-ro-q { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--fg2); }
.tray-ro-q > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.tray-ro-q.done { color: var(--muted); }
.tray-ro-q em { flex: none; font-style: normal; font-size: 11px; color: var(--muted); }
.tray-ro-more { padding-left: 28px; font-size: 12px; color: var(--muted); }
.tray.ro .tray-opts { flex-direction: row; justify-content: flex-end; }
.target-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--fg2); font-size: 12.5px; }
/* 첨부에 양식이 있을 때: 입력창 위 안내 + 작성 시작 */
.form-tip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--fg2); font-size: 12.5px; }
.form-tip .t { flex: 1 1 220px; min-width: 0; }
.form-tip[hidden] { display: none !important; }
.popover.send-pop { min-width: 0; padding: 3px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.popover.send-pop .opt { display: block; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--fg2); white-space: nowrap; }
.popover.send-pop .opt:hover { color: var(--fg); }
.form-tip.nofields .t { flex-basis: 150px; }   /* 공고 양식 카드 (칸 먼저 보기 없음): 닫기 X 가 혼자 둘째 줄로 내려가지 않게 (10/20 EIDOS R29) */
.form-tip .t b { color: var(--fg); font-weight: 600; word-break: break-all; }
.target-chip b { color: var(--fg); }
.target-chip .btn { flex: none; }                    /* 좁은 화면에서 '그림' 단추가 줄어 글자가 잘렸다 (10/2 훑기) */
.composer .foot { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 8px; }
#composer-foot:empty { display: none; }          /* 안내 글을 뺐다 (대표 10/15 사족 없애기): 읽기 전용 고객 대화에서만 글이 든다 */
.composer.ro .box { background: var(--hover); opacity: .7; }
.composer.ro textarea { cursor: not-allowed; }
/* !important: 마지막 답·물음의 .msg.last-a .tools .only-last { display: inline-grid } 가 더 강해 단추가 다시 보였다 (EPIC 2차 재점검 10/8) */
.thread.ro .msg [data-mact="again"], .thread.ro .msg [data-mact="edit"] { display: none !important; }
/* 관리자가 보는 고객 대화(읽기 전용): 눌러도 서버 벽(wall.py)에 막히는 단추·입력은 숨긴다 (관리자 화면 점검 10/8) —
   질문 모음 · 작업 창의 멈춤·되돌리기·기호 모양·캘리그래피·요청 입력(내려받기는 읽기라 남긴다) · 확인 질문 답 넣기 · 카드의 채우기·프로필 바꾸기 · 공고 첨부 카드의 올리기·작성 시작 · 대화에 초대 */
/* 작업 창 탭 글자가 '문/서'·'Ste/ps' 로 쪼개지던 것 (손님·관리자 점검 10/8, 1280 화면) — 탭 글은 어느 폭에서나 한 줄.
   탭이 창보다 많으면 폰처럼 다음 줄로: 옆으로 밀기는 줄 폭이 창에 묶이지 않아 '점수'·'칸별 확인' 탭이 창 밖에 남았다 (10/19 점검 S-5) */
.dock-tabs { max-width: 100%; flex-wrap: wrap; row-gap: 2px; }
.dock-tabs button { white-space: nowrap; flex: none; }
.ro-conv #tray:not(.ro), .ro-conv #dock .transport > button:not(.dl-btn), .ro-conv #dock .dock-chat, .ro-conv #ask-view .q-row .inp, .ro-conv #ask-view .q-opts, .ro-conv #q-save,
.ro-conv #thread [data-act="fill"], .ro-conv #thread [data-act="fill-hancom"], .ro-conv #thread [data-act="ingest-adopt"],
.ro-conv #thread [data-act="open-profile"], .ro-conv #thread [data-act="open-facts"], .ro-conv #thread [data-act="open-snippets"],
.ro-conv #thread [data-act="save-edits"], .ro-conv #thread [data-act="confirm"], .ro-conv #thread [data-act="submit-review"],
.ro-conv #thread [data-act="agent-undo"], .ro-conv #thread [data-act="hancom"],
.ro-conv #thread [data-nf-link], .ro-conv #thread [data-nf-up], .ro-conv #thread [data-nf-go], .ro-conv [data-pa="invite"],
.ro-conv [data-act="rescore"], .ro-conv .score-card [data-act="open-questions"],
/* 관전 (10/17): 판 되돌리기도 쓰기 · 대화 밖에서 연 고객 서류의 문서 창(서버가 readonly 로 알림, doc.js ro-doc)도 같은 도구를 숨긴다 */
.ro-conv #ver-view [data-restore], .dock.ro-doc #ver-view [data-restore], .dock.ro-doc .transport > button:not(.dl-btn), .dock.ro-doc .dock-chat,
.dock.ro-doc #ask-view .q-row .inp, .dock.ro-doc #ask-view .q-opts, .dock.ro-doc #q-save { display: none !important; }
/* 10/25 대표 사진: 단추를 숨긴 공고 첨부 카드 아래에 빈 하얀 띠가 남았다 — 단추만 든 줄은 통째로 숨긴다 ('원문 보기' 링크가 있으면 남김) */
.ro-conv #thread .nf-foot:not(:has(a)) { display: none; }
.hello-mode .composer { padding-top: 0; }

/* ---------- 버튼 / 배지 / 카드 ---------- */
/* 단추 (시안 2): 알약 모양 · 마우스를 올리면 빛이 한 번 훑고 지나감 · 누르면 .97 · 주 단추는 잉크(밝게)·은색(어둡게) */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border2); background: var(--elev); color: var(--fg); cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .4s, background .3s, border-color .3s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { border-color: var(--faint); box-shadow: 0 10px 26px -16px rgba(11,15,20,.35); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--pri-grad); border-color: transparent; color: var(--on-primary); box-shadow: var(--pri-edge); }
.btn.primary:hover { box-shadow: var(--pri-edge), 0 12px 30px -12px rgba(11,15,20,.5); }
:root[data-theme="dark"] .btn.primary:hover { box-shadow: var(--pri-edge), 0 0 0 4px rgba(238,241,246,.08), 0 12px 36px -12px rgba(143,184,255,.35); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover2); box-shadow: none; }
.btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.danger { color: var(--err); }
.btn:disabled, .btn.disabled { cursor: default; pointer-events: none; color: var(--faint); background: var(--soft); border-color: var(--border); box-shadow: none; }
.btn:disabled::after, .btn.disabled::after { display: none; }
.btn.big-btn { height: 42px; padding: 0 26px; font-size: 15px; }
/* 배지: 성공·주의·오류는 바탕색 없이 작은 점과 글자색 (시안 2) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; background: transparent; border: 1px solid var(--border2); color: var(--muted); font-weight: 500; white-space: nowrap; }
.badge.ok, .badge.warn, .badge.err, .badge.info, .badge.accent { color: var(--fg2); }
.setx span.warn { color: var(--warn); }              /* 고정 링크가 아직 안 열렸거나 토큰이 거절됨 */
.badge.ok::before, .badge.warn::before, .badge.err::before, .badge.info::before, .badge.accent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .badge.warn::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.badge.err::before { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); } .badge.warn { color: var(--warn); } .badge.err { color: var(--err); }
.badge.info::before, .badge.accent::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 8px var(--accent); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
:root[data-theme="dark"] .card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.card h4 { margin: 0 0 8px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h4 .ic { color: var(--muted); }
.card .sub { color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px; }
.kv .warn-text { color: var(--warn); min-width: 0; overflow-wrap: anywhere; }
.kv b { color: var(--muted); font-weight: 500; }
.progress { height: 5px; background: var(--hover2); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.step { font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: var(--hover2); color: var(--muted); }
.step.run { background: var(--blue-soft); color: var(--blue); } .step.ok { background: var(--ok-soft); color: var(--ok); } .step.fail { background: var(--err-soft); color: var(--err); }
details > summary { cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; }
.checks { margin: 8px 0 0; padding-left: 0; list-style: none; font-size: 12.5px; max-height: 260px; overflow: auto; }
.checks li { padding: 3px 0; border-bottom: 1px solid var(--border); display: flex; gap: 6px; }
.checks li.fail { color: var(--err); } .checks li.warn { color: var(--warn); }
.scroll { overflow: auto; max-height: 420px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; }
table.schema { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.schema th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--border); }
table.schema td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.schema th, table.schema td { overflow-wrap: normal; }   /* 좁은 폭에서 낱말을 한 글자씩 쪼개지 않고 표가 옆으로 밀린다 (.scroll) */
table.schema td.grp { background: var(--hover); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
table.schema tr.rejected td { opacity: .45; }
table.schema select { max-width: 180px; }
table.mini { border-collapse: collapse; font-size: 12.5px; width: 100%; }
table.mini td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.conflicts { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 13px; }
.facts { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.ingest-files { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.ingest-files li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.ingest-files li .st-ic { display: inline-flex; vertical-align: -3px; margin-right: 4px; color: var(--muted); }
.ingest-files li.active .st-ic { color: var(--blue); } .ingest-files li.done .st-ic { color: var(--ok); } .ingest-files li.skip .st-ic { color: var(--faint); }
/* 보관함에서 저절로 가져온 회사 자료: 한 줄 (누르면 목록) — 파일 줄과 같은 높이·글자 (대표 10/27) */
.ingest-vault { margin: 8px 0; font-size: 13px; }
.ingest-vault > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; list-style: none; }
.ingest-vault > summary::-webkit-details-marker { display: none; }
.ingest-vault > summary .st-ic { display: inline-flex; color: var(--muted); }
.ingest-vault.active > summary .st-ic { color: var(--blue); } .ingest-vault.done > summary .st-ic { color: var(--ok); }
.ingest-vault > summary [data-role=now] { display: inline-flex; align-items: center; gap: 6px; }
.ingest-vault > summary [data-role=now]:empty { display: none; }
.ingest-vault > .ingest-files { margin: 0 0 0 22px; }
.ingest-vault .iv-chev { display: inline-flex; color: var(--muted); transition: transform .15s; }
.ingest-vault[open] .iv-chev { transform: rotate(180deg); }
.field { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 8px; background: var(--elev); }
.field .head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.field textarea { width: 100%; min-height: 90px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--card); }


/* ---------- 오른쪽 패널 (도크) ---------- */
.dock { display: none; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--border); position: relative; }
.app.dock-open .dock { display: flex; }
.dock-head { padding: 10px 12px 0; border-bottom: 1px solid var(--border); }
.dock-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dock-title-row b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 50%; }   /* 영어 "Task #1" 이 눌리지 않게 */
.dock-title-row > .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* 멈춘 사람·차례는 한 줄로 (넘치면 …) */
/* 이 문서에 함께 있는 사람 (함께 보기, doc.js legend): 사람마다 칸 표시와 같은 색 점 + 이름, 누르면 그 사람 칸으로 */
.doc-people { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.doc-people:empty, .dock.idle .doc-people { display: none; }
.doc-people .dp { display: inline-flex; align-items: center; gap: 5px; height: 24px; max-width: 120px; padding: 0 9px 0 7px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg2); font: 600 12px/1 var(--font); cursor: pointer; }
.doc-people .dp:hover { background: var(--hover); color: var(--fg); }
.doc-people .dp i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mark, var(--accent)); }
.doc-people .dp.editing i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--mark, var(--accent)); }   /* 고치는 중: 점에 고리 */
.doc-people .dp.ai i { background: var(--accent); }
.doc-people .dp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none) { .doc-people .dp { height: 30px; } }
.transport { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.transport .sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.seg { display: inline-flex; gap: 2px; background: var(--hover2); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.seg button.active { background: var(--elev); color: var(--fg); box-shadow: var(--shadow-s); }
/* 문서 창 맨 위 단추 줄·탭 줄: 같은 너비 칸으로 오와 열 (대표 10/23 "위에 칸들 오와열 잘맡춰라 모든부분에서 … 폰 컴 둘다").
   예전엔 줄마다 단추 수·너비가 달라 들쭉날쭉했다. 칸 수는 창 폭에 따라 (PC 다섯 · 폰 셋), 남는 칸은 비워 둔다. 글이 길면 칸 안에서 … (이름은 title) */
#dock .transport { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; align-items: stretch; }
#dock .transport > .sep { display: none; }
#dock.idle .transport, #dock.idle #dock-tabs { display: none; }   /* 빈 작업 창(첫 화면)은 단추·탭 줄 없음 — 아래 grid 가 .dock.idle 규칙을 이겼다 */
#dock .transport > .btn { width: 100%; min-width: 0; padding: 0 5px; gap: 4px; font-size: 12px; }
#dock .transport > .btn > svg, #dock .transport > .btn > i[data-icon] { flex: none; display: inline-flex; }
#dock .transport > .btn > .lbl, #dock .transport > .btn > .dl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#dock-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 2px; max-width: 100%; overflow: visible; }
#dock-tabs > button { min-width: 0; justify-content: center; padding: 5px 6px; gap: 5px; white-space: nowrap; }
#dock-tabs > button > svg, #dock-tabs > button > i[data-icon] { display: none; }                      /* 탭은 글로만 — 아이콘까지 두면 '확인 질문 19' 가 칸을 넘었다 */
#dock-tabs > button .badge { padding: 0 6px; font-size: 11px; gap: 4px; }
#dock-tabs > button .badge::before { width: 5px; height: 5px; box-shadow: none; }
/* 폰은 단추 줄·탭 줄을 한 줄씩 (doc.js foldTabs·moreButtons — 10/25 EPIC 손님 점검 7번: 폰 390 에서 위쪽 단추·탭이 화면 3분의 1, 문서 56%).
   보이는 칸끼리 같은 너비 (오와 열), 나머지는 '더 보기' 목록. PC 는 예전 그대로 ('더 보기' 없음) */
#t-more, #dock-tabs > [data-tab-more] { display: none; }
#dock-tabs > [data-tab-more] { order: 99; }
@media (max-width: 600px) {
  #dock .transport { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  #dock .transport > #t-undo, #dock .transport > #t-scheme, #dock .transport > #t-calli, #dock .transport > #t-sign { display: none; }
  #dock .transport > #t-more { display: inline-flex; }
  #dock-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  #dock-tabs > [data-tab].fold-x { display: none; }
  #dock-tabs > [data-tab-more]:not([hidden]) { display: inline-flex; align-items: center; }
  #dock-tabs > [data-tab-more] > svg { display: inline-flex; flex: none; }
  #dock-tabs > [data-tab-more] .tm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #dock-tabs > button { font-size: 12.5px; padding: 5px 4px; gap: 3px; }
}
.dock-body { flex: 1; min-height: 0; position: relative; }
/* 작업 없이 연 패널: 안내와 바로 할 일만 (조작 바·탭·요청 칸은 숨김) */
.dock.idle .transport, .dock.idle .dock-tabs, .dock.idle .dock-chat, .dock.idle .viewbar, .dock.idle #t-status, .dock.idle #t-by, .dock.idle #t-queue, .dock.idle .dz-bar { display: none; }
.dock.idle .dock-head { padding-bottom: 10px; }
:root[data-theme="dark"] .dock.idle #doc-view { background: var(--surface); color: var(--fg); }   /* 안내 화면은 종이가 아니라 화면 색 (어두운 테마에서 흰 판이 떴다) */
.dk-home { max-width: 420px; margin: 8vh auto 0; padding: 0 24px 24px; text-align: center; }
.dk-home .dk-ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--border); color: var(--muted); }
.dk-home h4 { margin: 0 0 6px; font-size: 16px; }
.dk-home p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.dk-home .dk-acts { display: flex; justify-content: center; gap: 8px; margin: 18px 0 28px; flex-wrap: wrap; }
/* 옮겨 쓰기 단추가 있으면 (10/27): 위 두 단추는 같은 너비 두 칸, 옮겨 쓰기는 그 아래 두 칸 너비 한 줄 (오와 열 — PC·폰 같은 꼴) */
.dk-home .dk-acts:has([data-dk="reuse"]) { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); margin-inline: auto; }
.dk-home .dk-acts:has([data-dk="reuse"]) .btn { justify-content: center; min-width: 0; }
.dk-home .dk-acts [data-dk="reuse"] { grid-column: 1 / -1; }
.dk-home h5 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; }
.dk-home .sub { text-align: left; }
.dk-home .dk-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; text-align: left; margin-bottom: 6px; }
.dk-home .dk-row:hover { border-color: var(--border2); background: var(--hover); }
.dk-home .dk-row span { min-width: 0; display: flex; flex-direction: column; }
.dk-home .dk-row b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-home .dk-row small { font-size: 11.5px; color: var(--muted); }
.pane { position: absolute; inset: 0; overflow: auto; display: none; padding: 14px 16px 24px; }
.pane.active { display: block; }
.doc-empty { color: var(--muted); text-align: center; padding: 60px 20px; }
.doc-note { font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.paper { background: #fff; color: #111; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); padding: 26px 22px; margin: 0 auto 18px; font-size: var(--fs, 12px); line-height: 1.5; }
/* 어둡게에서도 문서는 종이 그대로 (10/1 대표: "우측 미리보기 창 너무 시꺼멓다, 실제 페이퍼 문서 그대로"):
   문서가 놓인 자리는 밝은 책상, 종이는 흰색. 단추·탭은 어두운 그대로 */
:root[data-theme="dark"] #doc-view { background: #E6E9EE; color: #111; }
:root[data-theme="dark"] #doc-view .doc-note, :root[data-theme="dark"] #doc-view .doc-empty { color: #5E636B; }
:root[data-theme="dark"] .paper { background: #fff; }
.paper p.hp { margin: 0 0 4px; min-height: 1em; white-space: pre-wrap; }
table.hw { border-collapse: collapse; margin: 6px auto; table-layout: fixed; max-width: 100%; }
table.hw td { border: 1px solid #9a988f; padding: 3px 4px; vertical-align: top; position: relative; word-break: break-all; }
table.hw td .ct { white-space: pre-wrap; }
.paper .web-src { color: #0B7A6A; text-decoration: underline dotted rgba(11,122,106,.45); text-underline-offset: 2px; }   /* 웹 조사 문장 (화면만, 종이는 늘 흰색) */
/* 표 밖 본문 항목: 겉보기는 본문, 누르고 고치는 건 칸과 같다 */
table.hw.body-block { width: 100%; margin: 2px 0 10px; }
table.hw.body-block td { border: 1px dashed transparent; padding: 4px 6px; }
table.hw.body-block td.cand { border-color: rgba(47,111,214,.25); }
table.hw td.cand { background: rgba(47,111,214,.035); cursor: pointer; }
table.hw td.cand:hover { outline: 2px solid rgba(47,111,214,.35); outline-offset: -2px; }
table.hw td.st-ready { background: rgba(46,133,84,.05); }
table.hw td.st-needs_ai, table.hw td.st-needs_manual { background: rgba(196,138,33,.07); }
table.hw td.active { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
table.hw td.selected { outline: 2px solid var(--blue); outline-offset: -2px; }
/* 칸 크기 바꾸기 (doc.js rz*, 대표 10/22 "칸들 드래그해서 크기조절"): 경계 위 마우스 모양 · 끄는 동안 점선 · Shift+누르기로 묶어 고른 칸 */
#doc-view.rz-x, #doc-view.rz-x * { cursor: col-resize !important; }
#doc-view.rz-y, #doc-view.rz-y * { cursor: row-resize !important; }
#doc-view.rz-on { user-select: none; -webkit-user-select: none; }
.rz-guide { position: fixed; z-index: 70; pointer-events: none; border: 0 dashed var(--accent); }
.rz-guide.x { width: 0 !important; border-left-width: 1.5px; }
.rz-guide.y { height: 0 !important; border-top-width: 1.5px; }
table.hw td.sel-range { background-color: var(--accent-soft); outline: 1px solid var(--accent-ring); outline-offset: -1px; }
/* 칸 바로 고치기 (대표 10/11 "단순 클릭 … 깜빡거리는 커서"): 누른 자리에 커서, 칸 글 모양 그대로 · 고르기 단추는 숨김 */
#doc-view table.hw td[data-key] { cursor: text; }
#doc-view table.hw td.editing { outline: 2px solid var(--blue); outline-offset: -2px; background: rgba(47,111,214,.04); }
#doc-view table.hw td.editing .ct { outline: none; caret-color: var(--blue); }
#doc-view table.hw td .cell-tools.on-edit { display: none; }
#doc-view .dz, #doc-view table.hw td { -webkit-user-select: text; user-select: text; }
table.hw td.selected { position: relative; }
table.hw td .cell-copy { position: absolute; top: 4px; right: 4px; z-index: 2; font: 600 12px/1 var(--font); padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--blue); background: var(--card); color: var(--blue); cursor: pointer; box-shadow: var(--shadow-s); -webkit-user-select: none; user-select: none; }
table.hw td .cell-copy:hover { background: var(--blue); color: #fff; }
/* ---------- 올린 문서 바로 고치기 (fileedit.js, 2026-09-29) — 원래 모양 화면 위에서 그 자리 고치기 ---------- */
.pv-editbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; }
.fe-bar b { flex: none; white-space: nowrap; }
.pv-editbar .sub { min-width: 0; }
.pv-editbar a, .fe-bar a { color: var(--accent-ink); }
.fe-host { border-radius: 10px; background: #eeece6; min-height: 60vh; overflow: auto; }
/* ---------- 만든 문서 직접 고치기 (docedit.js, 2026-09-29) ---------- */
.de-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: -4px -4px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.de-bar b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.de-st { color: var(--muted); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 좁은 폭 (휴대폰 · 영어처럼 긴 단추 글): 단추를 누르지 않고 다음 줄로 내린다. 상태 글도 … 로 자르지 않고 줄을 바꾼다
   (10/3 점검: 고친 판의 '고친 판 받기 · 원본 받기' 링크가 … 뒤로 숨어 누를 수 없었다) */
.de-bar { flex-wrap: wrap; }
.de-bar .btn { flex: none; }
.de-bar .de-st { flex: 1 1 40%; white-space: normal; overflow: visible; }
.de-wrap { padding: 2px 2px 40px; }
.de-paper { background: #fff; color: #1b1c20; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.10); padding: 30px 32px 40px; max-width: 860px; margin: 0 auto;
  font: 14.5px/1.75 "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }
.de-paper .de-in, .de-paper .de-ta { width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit;
  padding: 4px 6px; margin: 0 -6px; resize: none; outline: none; transition: background .12s, border-color .12s; box-sizing: content-box; }
.de-paper .de-ta { width: calc(100% - 12px); display: block; overflow: hidden; }
.de-paper .de-in:hover, .de-paper .de-ta:hover { background: #f6f5f2; }
.de-paper .de-in:focus, .de-paper .de-ta:focus { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.de-paper .de-title { font-size: 24px; font-weight: 800; line-height: 1.35; width: calc(100% - 12px); }
.de-paper .de-sub { color: #6b6d75; font-size: 15px; width: calc(100% - 12px); margin-bottom: 14px; }
.de-sec { margin-top: 22px; }
.de-paper .de-head { font-size: 17.5px; font-weight: 700; width: calc(100% - 12px); border-bottom: 2px solid #ecebe6; border-radius: 6px 6px 0 0; margin-bottom: 6px; }
.de-sec.lv2 .de-head { font-size: 15.5px; border-bottom-width: 1px; }
.de-b { margin: 10px 0 12px; }
.de-bh { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9a9ca3; margin-bottom: 1px; letter-spacing: .02em; }
.de-mine { font-size: 10.5px; color: #1e40af; background: #e8f0fe; padding: 1px 6px; border-radius: 999px; }
.de-hint { font-size: 11.5px; color: #9a9ca3; margin-top: 2px; }
.de-paper .de-ta.list { font-size: 14px; line-height: 1.85; }
.de-paper .de-ta.quote { border-left: 3px solid #d9d6cf; border-radius: 0 6px 6px 0; padding-left: 12px; color: #4a4c53; font-style: italic; }
.de-b.callout { background: #faf7f2; border-radius: 10px; padding: 8px 12px 10px; }
.de-paper .de-ct { font-weight: 700; }
.de-paper .de-cap { color: #6b6d75; font-size: 13px; width: calc(100% - 12px); }
.de-tw { overflow-x: auto; }
.de-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.de-tbl th, .de-tbl td { border: 1px solid #dddad3; padding: 0; }
.de-tbl th { background: #f3f1ec; }
.de-tbl .de-in { margin: 0; width: calc(100% - 12px); min-width: 60px; border-radius: 0; }
.de-tbl th .de-in { font-weight: 700; }
.de-tbl tr.tot td { background: #faf7f2; font-weight: 700; }
.de-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.de-kpi { border: 1px solid #e6e3dc; border-radius: 10px; padding: 8px 10px; }
.de-kpi .de-in { margin: 0; width: calc(100% - 12px); }
.de-kpi .k-l { font-size: 12.5px; color: #6b6d75; }
.de-kpi .k-v { display: flex; align-items: baseline; gap: 2px; }
.de-kpi .k-n { font-size: 22px; font-weight: 800; }
.de-kpi .k-u { width: 48px !important; flex: none; color: #6b6d75; }
.de-kpi .k-c { font-size: 12px; color: #9a9ca3; }
.de-hr { border: 0; border-top: 1px dashed #d9d6cf; margin: 16px 0; }
[data-theme="dark"] .de-paper { box-shadow: 0 0 0 1px #273142; }
@media (max-width: 600px) { .de-paper { padding: 18px 14px 28px; } .de-paper .de-title { font-size: 20px; } }
/* 고른 칸 도구 (고치기 · 복사) — 함께 쓰기 2026-09-29 */
table.hw td .cell-tools { display: inline-flex; gap: 2px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
table.hw td .cell-tools:hover { background: transparent !important; }
table.hw td .cell-tools.ask { align-items: center; gap: 4px; padding: 3px 4px 3px 10px !important; border-radius: 999px; background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 2px 8px rgba(0,0,0,.14) !important; }
table.hw td .cell-tools .cell-q { font: 600 12px/1.2 var(--font); color: var(--text); white-space: nowrap; }
table.hw td .cell-tools button.danger { background: #B42318; border-color: #B42318; color: #fff; }
table.hw td .cell-tools button { font: 600 12px/1 var(--font); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
table.hw td .cell-tools button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
table.hw td .cell-tools .cell-edit { background: var(--text); color: var(--surface); border-color: var(--text); }
table.hw td:has(> .editor) > .cell-tools { display: none; }   /* 고치는 동안은 단추를 숨긴다 */
/* 함께 보기 (대표 10/9 '구글독스처럼 누가 작업하는지 색으로'): 남이 고른 칸은 그 사람 색 얇은 테두리 + 이름표, 남이 고치는 칸은 그 색 테두리 +
   '고치는 중', AI 가 쓰는 칸은 'AI'. 이름표는 칸 위 모서리에 나란히, 칸 폭 안에서 (넘치면 종이 폭이 늘어 확대 비율이 바뀐다) */
/* --tagk: 문서를 작게 볼 때(폰 57%) 이름표·테두리가 같이 작아지지 않게 키우는 배수 (doc.js 확대 비율의 역수, 1~1.8) */
table.hw td.held, table.hw td.held:hover { outline: calc(2px * var(--tagk, 1)) solid var(--hold, var(--accent)); outline-offset: calc(-2px * var(--tagk, 1)); }   /* 마우스를 올려도 고치는 사람 색 */
table.hw td > .pres-ring { position: absolute; inset: 0; border: calc(1.5px * var(--tagk, 1)) solid var(--mark, var(--accent)); pointer-events: none; z-index: 1; }
table.hw td.selected > .pres-ring, table.hw td.active > .pres-ring { inset: 3px; }      /* 내가 고른 칸·AI 칸의 테두리 안쪽에 */
table.hw td > .pres-tags { position: absolute; top: calc(-9px * var(--tagk, 1)); left: 6px; z-index: 3; display: flex; gap: 3px; max-width: calc(100% - 8px);
  overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; }
table.hw td .pres-tag { flex: 0 1 auto; min-width: 0; font: 600 calc(11px * var(--tagk, 1))/1 var(--font); padding: calc(3px * var(--tagk, 1)) calc(7px * var(--tagk, 1));
  border-radius: 999px; background: var(--mark, var(--accent)); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.hw td .pres-tag.ai-tag { flex: none; background: var(--accent); }
table.hw td.touched { animation: touched 1.8s ease-out; }
@keyframes touched { 0% { background: rgba(37,99,235,.24); } 100% { background: transparent; } }
/* 칸 움직임 (시안 2): 다 쓴 칸은 빛이 한 번 지나가고, 쓰는 동안 차례를 기다리는 칸은 테두리가 숨 쉰다 (2.4s) */
table.hw td.lit::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(58,141,255,.28) 50%, transparent 65%) 0 0 / 300% 100% no-repeat;
  animation: lit .6s var(--ease) var(--lit-d, 0s) both; }
@keyframes lit { from { background-position: 100% 0; } 70% { opacity: 1; } to { background-position: 0 0; opacity: 0; } }
#dock-body.running table.hw td.st-needs_ai:not(.active):not(.held):not(.selected) { outline: 1px solid transparent; outline-offset: -2px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { outline-color: rgba(58,141,255,.1); } 50% { outline-color: rgba(58,141,255,.5); } }
table.hw td.flag { box-shadow: inset 3px 0 0 #d69a2a; }
table.hw td .flag-dot { position: absolute; top: 2px; right: 3px; color: #b7791f; }
/* 손님이 직접 체크할 결격·자격 확인 상자 (10/20 PM H6): 빈 상자 아래 작은 표시 — 칸 글을 가리지 않게 글 아래 줄에 */
table.hw td.self-check { box-shadow: inset 3px 0 0 #d69a2a; }
table.hw td .self-tag { display: inline-block; margin-top: 2px; font: 600 calc(10px * var(--tagk, 1))/1.2 var(--font); padding: 1px 6px;
  border-radius: 999px; background: #fdf1dc; color: #8a5300; white-space: nowrap; -webkit-user-select: none; user-select: none; }
/* 여쭤볼 칸 (대표 10/24 "중간에 누락하고 넘어가는 거"): 값을 몰라 비워 둔 칸·쓰기 전 질문의 답을 기다리는 칸 — 조용히 비우지 않고 그 자리에 표시, 누르면 그 질문 */
table.hw td.asking { box-shadow: inset 3px 0 0 #7d9be3; }
/* 표시는 칸 오른쪽에 (빈 칸은 왼쪽 위가 커서 자리 — 거기 두면 칸을 눌러도 고치기·고르기 대신 질문 탭으로 갔다) */
table.hw td .ask-mark { display: inline-block; float: right; margin: 2px 0 0 6px; font: 600 calc(10px * var(--tagk, 1))/1.2 var(--font); padding: 1px 6px;
  border-radius: 999px; background: #e7eefc; color: #2547a8; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none;
  max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }   /* 좁은 칸: 칸을 넓히거나 옆 칸으로 넘지 않게 글을 줄인다 */
.fill-chip { white-space: nowrap; font-variant-numeric: tabular-nums; }
#t-fill.warn { cursor: pointer; }
table.hw td .edit-mark { position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-style: solid; border-width: 9px 9px 0 0; border-color: var(--mark, #888) transparent transparent transparent; }
table.hw td.placeholder .ct, table.hw .muted { color: #9aa0a6; }
table.hw .guess { color: #1f4fd8; }
table.hw .typing { color: #333; }
table.hw .typing::after { content: ""; display: inline-block; width: 6px; height: 12px; background: var(--accent); margin-left: 2px; vertical-align: -1px; animation: blink 1s steps(2) infinite; }
.cimg { display: block; max-width: 100%; margin: 4px auto; } .hpic { margin: 6px 0 10px; text-align: center; }
.dock-body.editable table.hw td.cand { cursor: text; }
.dock-chat { border-top: 1px solid var(--border); padding: 10px 12px; background: var(--surface); }
/* 넓은 화면은 가운데 입력칸이 '작업 #N에 요청 중'으로 같은 일을 한다 → 작업 창 아래 입력칸은 감추고 답 줄만 (손님 점검 10/8 L9: 입력칸이 둘).
   좁은 화면은 작업 창이 가운데를 덮으니 그대로 */
@media (min-width: 861px) { .dock-chat .row { display: none; } }
.dock-reply { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; min-height: 18px; }
.dock-reply:empty { display: none; }          /* 기본 안내 글은 뺐다 (대표 10/15): 작업 답이 올 때만 보인다 */
.dock-chat .row input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: var(--elev); outline: 0; }
.dock-chat .row { flex-wrap: nowrap; }       /* 폰(이 줄은 폰에만 보인다): 16px 글자 입력칸의 기본 폭 때문에 '보내기'가 다음 줄로 떨어졌다 (10/20 PM L4) */
.dock-chat .row input:focus { border-color: var(--border2); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 과정 타임라인 */
.proc-title { font-weight: 600; margin-bottom: 8px; }
ol.timeline { list-style: none; padding: 0; margin: 0; font-size: 13px; }
ol.timeline li { display: grid; grid-template-columns: 58px 20px 1fr; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); align-items: start; }
ol.timeline .t { color: var(--faint); font-family: var(--mono); font-size: 11.5px; padding-top: 2px; }
ol.timeline .i { color: var(--muted); padding-top: 1px; }
ol.timeline li.ok .i { color: var(--ok); } ol.timeline li.err .i, ol.timeline li.err .x { color: var(--err); }
ol.timeline li.warn .i { color: var(--warn); } ol.timeline li.run .i, ol.timeline li.step .i { color: var(--blue); }
ol.timeline li.user .i, ol.timeline li.pause .i { color: var(--accent); } ol.timeline li.muted { color: var(--muted); }

/* ---------- 모달 / 팝업 ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(11,15,20,.3); display: none; align-items: center; justify-content: center; z-index: 78; padding: 16px; backdrop-filter: blur(10px) saturate(.9); }
:root[data-theme="dark"] .modal-bg { background: rgba(12,14,18,.62); }   /* 회의 창(60·66)·화면 창(65) 위 */
.modal-bg.open { display: flex; }
.modal { position: relative; background: var(--card); border: 1px solid var(--border2); border-radius: 24px; box-shadow: var(--shadow-l); width: min(720px, 100%); animation: mIn .5s var(--ease); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 24px; }
.modal.wide { width: min(980px, 100%); }
.modal.small { width: min(400px, 100%); }
@keyframes mIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
:root[data-theme="dark"] .modal { background: #25292F; }
.modal h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.modal h4 { margin: 18px 0 8px; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; align-items: center; }
.form-grid input:not([type=checkbox]), .form-grid select, .form-grid textarea, .inp { width: 100%; min-height: 36px; border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; background: var(--elev); outline: 0; }
.form-grid textarea { resize: vertical; }
.nts-line { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.nts-line.bad { color: var(--err); }
.pf-rwrap { min-width: 0; }
.pf-rec { display: block; max-width: 100%; margin-top: 4px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--accent-ink);
  font: inherit; font-size: 12.5px; line-height: 1.6; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pf-rec:hover { background: var(--accent-soft); }
.form-grid label.nts-lab { align-self: start; min-height: 36px; display: flex; align-items: center; }   /* 칸 아래 한 줄이 생겨도 칸 이름은 칸 높이에 (#pf-fields 는 display:contents) */
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .inp:focus { border-color: var(--border2); box-shadow: 0 0 0 3px var(--accent-soft); }
.list-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.set-sec { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 12px; background: var(--elev); }
.set-sec h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }

/* ---------- 설정 창 (2026-09-28 대표: "DESTINY 프로필처럼 · 디자인·레이아웃 신경 써라") ----------
   왼쪽 쪽 목록 + 오른쪽 한 쪽. 칸마다 테두리 상자 대신 얇은 줄로 나누고, 스위치는 바로 저장. */
.modal.setx-modal { width: min(840px, 100%); height: min(660px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--border);
  box-shadow: 0 30px 90px rgba(20,15,10,.28), 0 2px 10px rgba(20,15,10,.08); position: relative; }
.setx-modal .modal-x { display: inline-grid; top: 14px; right: 14px; }
.setx { display: grid; grid-template-columns: 216px minmax(0, 1fr); height: 100%; }
.setx-nav { background: var(--side-bg); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.setx-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; padding: 0 10px 16px; color: var(--fg); letter-spacing: -.2px; }
.setx-nav button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 0; border-radius: 11px; background: transparent; color: var(--fg2); cursor: pointer; font-size: 14px; text-align: left; transition: background .12s, color .12s; }
.setx-nav button:hover { background: var(--hover); color: var(--fg); }
.setx-nav button.on { background: var(--elev); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(20,15,10,.06), 0 0 0 1px var(--border); }
.setx-nav button .ic { color: var(--muted); }
.setx-nav button.on .ic { color: var(--accent); }
.setx-nav .setx-alt { font-style: normal; }
.setx-nav button em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }
.setx-main { position: relative; overflow: auto; padding: 30px 38px 32px; scrollbar-width: thin; }
.setx-about { display: block; margin-top: 22px; font-size: 12px; color: rgb(155, 157, 165); text-decoration: none; width: max-content; }   /* 회사 소개 (대표 10/22, EPIC 과 같은 자리·색) */
.setx-about:hover { text-decoration: underline; }
.setx-page h2 { font-size: 21px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; letter-spacing: -.3px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--hover2); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.set-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 24px 0 6px; letter-spacing: .1px; }
.set-row { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.set-label + .set-row, h2 + .set-row { border-top: 1px solid var(--border); }
h2 + .set-row { margin-top: 14px; }
.set-rt { flex: 1; min-width: 0; }
.set-rt b { font-size: 14px; font-weight: 600; color: var(--fg); }
.set-rt .sub { margin-top: 3px; line-height: 1.55; overflow-wrap: anywhere; }
.set-rt a { color: var(--accent); }
.set-rc { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.set-row.wide .set-rc, .set-row.wrap .set-rc { flex: 0 1 48%; min-width: 0; }
.set-row.wide .set-rc .inp { width: 100%; }
.set-row.wrap .set-rc { flex-wrap: wrap; } .set-row.wrap .set-rc .inp { flex: 1 1 140px; min-width: 0; }
.set-row.stack { flex-wrap: wrap; gap: 12px 20px; } .set-row.stack .set-rt { flex: 1 1 100%; }   /* 설명 아래 한 줄 가득 입력칸 (고정 링크) */
.set-row.stack .set-rc { flex: 1 1 100%; display: flex; gap: 8px; } .set-row.stack .set-rc .inp { flex: 1 1 0; min-width: 0; } .set-row.stack .set-rc .inp[type=password] { flex-grow: 1.6; }
.set-row.stack .set-rc .btn { flex: none; }         /* 폰에서 '저장' 단추가 줄어 글자가 잘렸다 (10/2 훑기) */
.set-row.stack .set-rc { flex-wrap: wrap; } .set-row.stack .set-rc > label { flex: 1 1 100%; flex-wrap: nowrap; align-items: flex-start; }   /* 고르기 줄은 따로: 긴 설명(영어)이 입력칸을 눌러 없애지 않게 */
.set-rc .inp { min-height: 34px; height: 34px; border-radius: 10px; }
.set-rc select.inp { padding-right: 28px; }
.set-note { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--hover); color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.set-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.secret { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; padding: 0 4px; }
.linkish { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }
.linkish:hover { text-decoration: underline; }
.member-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.member:hover { background: var(--hover); }
.member b { font-size: 13.5px; font-weight: 600; }
.member .sub { margin-top: 1px; }

/* 스위치 (켜기·끄기는 바로 저장) */
.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch > span { position: absolute; inset: 0; border-radius: 999px; background: var(--border2); transition: background .16s; }
.switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(17px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.mem-on { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* 내 프로필 — DESTINY 프로필 창처럼: 큰 동그라미 사진 · 사진 고르기 단추 · 이름 · 상태 메시지 한 줄 */
.px { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 14px; text-align: center; }
.px [hidden] { display: none !important; }
.px-pic { position: relative; margin-top: 6px; }
.px-big { width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; background: var(--av, #6f727a); color: #fff; font-size: 50px; font-weight: 700;
  background-size: cover; background-position: center; cursor: pointer; box-shadow: 0 0 0 5px var(--card), 0 10px 30px rgba(20,15,10,.20); transition: filter .12s, box-shadow .12s; }
.px-big:hover { filter: brightness(.95); }
.px-big.drop { box-shadow: 0 0 0 5px var(--accent), 0 10px 30px rgba(20,15,10,.20); }
.px-big.ph { color: transparent; }
.px-cam { position: absolute; right: 0; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--card); background: var(--fg); color: var(--bg); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .12s; }
.px-cam:hover { transform: scale(1.06); }
.px-info { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(400px, 100%); }
.px-name { display: flex; align-items: center; justify-content: center; gap: 6px; }
.px-name b { font-size: 21px; letter-spacing: -.3px; }
.px-name .btn { color: var(--muted); }
.px-role { font-size: 12.5px; color: var(--muted); margin-top: -10px; }
.px-rename { display: flex; gap: 6px; width: 100%; }
.px-rename .inp { flex: 1; text-align: center; }
.px-st { position: relative; width: 100%; margin-top: 4px; }
.px-st .inp { width: 100%; height: 44px; text-align: center; border-radius: 14px; padding: 0 56px; font-size: 14px; }
.px-cnt { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--faint); pointer-events: none; }
.px-note { font-size: 12.5px; color: var(--muted); line-height: 1.65; max-width: 330px; }
.px-btns { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.px-crop { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.px-cv { position: relative; width: 264px; height: 264px; border-radius: 16px; overflow: hidden; background: #111; touch-action: none; }
.px-cv canvas { width: 264px; height: 264px; display: block; cursor: grab; }
.px-cv canvas:active { cursor: grabbing; }
.px-cv::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(15,15,20,.55); pointer-events: none; }
.px-zoom { display: flex; align-items: center; gap: 10px; width: 264px; }
.px-zoom input { flex: 1; accent-color: var(--accent); }

/* 화면: 테마 카드 (작은 미리보기) */
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-card { display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 8px 8px 11px; border: 1.5px solid var(--border); border-radius: 15px; background: var(--elev); cursor: pointer; color: var(--fg2); font-size: 13px; transition: border-color .12s, box-shadow .12s; }
.theme-card:hover { border-color: var(--border2); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--fg); font-weight: 600; }
.tc-prev { display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 78px; padding: 7px; border-radius: 10px; overflow: hidden; }
.tc-prev i { display: block; border-radius: 5px; }
.tc-prev i:nth-child(1) { grid-row: 1 / span 2; }
/* 미리보기는 진짜 화면의 색 (:root 와 같은 값): 왼쪽 띠 = 사이드바, 오른쪽 = 카드와 입력창 (10/2: 밝게 미리보기가 남색 사이드바라 틀렸었다) */
.tc-light { background: #F3F4F7; } .tc-light i:nth-child(1) { background: #E1E4EB; box-shadow: inset -1px 0 rgba(11,15,20,.1); } .tc-light i:nth-child(2), .tc-light i:nth-child(3) { background: #fff; box-shadow: inset 0 0 0 1px rgba(11,15,20,.09); }
.tc-dark { background: #22252B; } .tc-dark i:nth-child(1) { background: #17191E; } .tc-dark i:nth-child(2) { background: #2B2F37; } .tc-dark i:nth-child(3) { background: #2F333C; }
.tc-system { background: linear-gradient(135deg, #F3F4F7 0 50%, #22252B 50% 100%); } .tc-system i:nth-child(1) { background: linear-gradient(180deg, #E1E4EB, #17191E); } .tc-system i:nth-child(2) { background: #fff; box-shadow: inset 0 0 0 1px rgba(11,15,20,.09); } .tc-system i:nth-child(3) { background: #2F333C; }
.theme-card .tc-sub { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: -4px; text-align: center; }
.tc-t { text-align: center; }
.lang-card { justify-content: center; min-height: 74px; padding: 14px 12px; } .lang-card .tc-t { font-size: 15px; } .lang-card .tc-sub { margin-top: 0; }   /* 설정 > 언어 */

/* 설정 안의 예전 묶음 (내 기억 · AI 모델 · 클라우드) — 상자 대신 한 쪽처럼 */
.setx .set-sec { border: 0; background: transparent; padding: 0; margin: 0; border-radius: 0; }
.setx .set-sec > h4:first-child { font-size: 21px; font-weight: 700; margin: 0 0 14px; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.setx .set-sec > h4:first-child .sub { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.setx .set-sec h4:not(:first-child) { font-size: 12px; font-weight: 600; color: var(--muted); margin: 24px 0 6px; }
.setx .set-sec .form-grid { grid-template-columns: 170px minmax(0, 1fr); gap: 0 18px; border-top: 1px solid var(--border); }
.setx .set-sec .form-grid > * { padding: 12px 0; border-bottom: 1px solid var(--border); min-height: 0; }
.setx .set-sec .form-grid > label:nth-child(odd) { font-weight: 600; font-size: 13.5px; color: var(--fg); padding-top: 18px; align-self: stretch; }
.setx .set-sec .list-row { border-radius: 10px; }
.setx .mem-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.setx .mem-list .list-row { padding: 9px 10px; background: var(--hover); border: 0; }
.setx .tbl { border-radius: 12px; }


/* 회의 녹음 시작 창: 칸을 위아래로 (2026-09-28) */
.modal.mr-start { width: min(560px, 100%); }
.mr-intro { color: var(--muted); font-size: 13px; line-height: 1.75; margin: -2px 0 18px; }
.mr-intro b { color: var(--fg2); }
.mr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mr-field label { font-size: 13px; font-weight: 600; color: var(--fg); }
.mr-field .inp { height: 42px; border-radius: 12px; font-size: 14px; }
.mr-opt { border-top: 1px solid var(--border); margin-top: 4px; }
.mr-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.mr-foot > .sub { flex: 1 1 100%; margin-bottom: 4px; }
.mr-foot > .grow { display: none; }
.mr-foot { justify-content: flex-end; }
/* 설정: 머리글이 오른쪽 위 닫기 단추와 겹치지 않게 · 머리글 아이콘은 왼쪽 목록에만 · 빈 목록은 점선 상자 */
.setx .setx-page > h2, .setx .set-sec > h4:first-child { padding-right: 46px; }
.setx .set-sec > h4:first-child > .ic { display: none; }
.setx .mem-list > .sub:only-child { padding: 18px; text-align: center; border: 1px dashed var(--border2); border-radius: 12px; }
.setx-page.px { min-height: 100%; justify-content: center; padding: 0 0 18px; }
.set-row.wrap .set-rc { flex: 0 1 58%; flex-wrap: nowrap; }
.set-row.wrap .set-rc .inp { flex: 1 1 auto; width: 100%; min-width: 80px; }
.set-rc .secret { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--hover); }

@media (max-width: 860px) {
  .modal.setx-modal { height: calc(100dvh - 20px); border-radius: 20px; }
  .setx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* 탭 줄은 닫기 X 앞에서 끝난다 (탭이 X 밑으로 지나가 가려졌다, EDIT 3차 2장 5번) */
  .setx-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 12px 10px; margin-right: 52px; gap: 4px; scrollbar-width: none; }
  .setx-nav::-webkit-scrollbar { display: none; }
  .setx-h { display: none; }
  .setx-modal .modal-x { top: 12px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(0,0,0,.08); }
  .setx-nav button { width: auto; flex: none; white-space: nowrap; padding: 9px 13px; min-height: 40px; }
  .setx-nav button em { display: none; }
  /* 탭이 넷 이하(손님·고객: 내 기억·화면·언어·고객센터)면 같은 너비 칸으로 — 옆으로 미는 줄이라 '언어'가 반쯤 잘리고 '고객센터'는 화면 밖이었다
     (11/1 밤 점검 ui 제안 9, 대표 10/23 '오와 열'). 관리자처럼 탭이 많으면 미는 줄 그대로 */
  .setx-nav:not(:has(> button:nth-of-type(5))) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; gap: 2px; padding: 10px 8px 8px;
    -webkit-mask-image: none; mask-image: none; }
  .setx-nav:not(:has(> button:nth-of-type(5))) button { flex-direction: column; gap: 3px; justify-content: center; padding: 6px 0; min-height: 52px;
    white-space: nowrap; text-align: center; font-size: 11.5px; line-height: 1.25; overflow: hidden; }
  .setx-nav:not(:has(> button:nth-of-type(5))) button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .setx-nav:not(:has(> button:nth-of-type(5))) .setx-alt { display: none; }
  .setx-modal.setx-few .modal-x { top: 18px; }      /* 닫기 X 를 탭 줄 가운데 높이에 (겹친 :has 는 CSS 가 받지 않아 창 이름표로) */
  .setx-main { padding: 22px 18px 28px; }
  .set-row { flex-wrap: wrap; gap: 10px 16px; }
  .set-rt { flex: 1 1 210px; }          /* 자리가 모자라면 설명이 한 단어씩 서지 않고 단추가 아래로 내려간다 */
  .set-row.wide .set-rc, .set-row.wrap .set-rc { flex: 1 1 100%; justify-content: flex-start; }
  .setx .set-sec .form-grid { grid-template-columns: minmax(0, 1fr); }
  .setx .set-sec .form-grid > label:nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
  .theme-cards { gap: 8px; }
  .tc-prev { height: 62px; }
  .px-big { width: 120px; height: 120px; font-size: 44px; }
}

.secret { font-family: var(--mono); font-size: 16px; letter-spacing: 1px; padding: 6px 12px; border-radius: 9px; background: var(--hover2); }
.link-box { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-family: var(--mono); font-size: 13px; word-break: break-all; }
.popover { position: fixed; z-index: 60; background: var(--elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-l); padding: 6px; min-width: 240px; max-width: 360px; max-height: 70vh; overflow: auto; }
.popover .opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.popover .opt:hover { background: var(--hover); }
.popover .opt.on { background: var(--accent-soft); }
.popover .opt .d { font-size: 12px; color: var(--muted); }
.popover .sep { height: 1px; background: var(--border); margin: 4px 6px; }
.popover .hd { font-size: 11.5px; color: var(--muted); padding: 6px 10px 2px; }
/* 관리자 모델 칩 목록 '이 채팅이 쓸 모델' (대표 10/23 — EPIC #mmenu 와 같은 폭·글씨·줄 간격). 폰 400 은 양옆 16px 안 */
.popover.mm-pop { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: 60vh; padding: 6px; border-radius: 10px; }
.popover.mm-pop .mh { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: var(--faint); padding: 10px 8px 4px; }
.popover.mm-pop .mh.mhs { margin-top: 8px; font-weight: 650; color: var(--fg2); }
.popover.mm-pop .mh.mwarn { color: var(--err); font-weight: 500; line-height: 1.5; padding-top: 4px; }
.popover.mm-pop .mh.mnote { color: var(--muted); font-weight: 400; letter-spacing: 0; padding-top: 4px; }
.popover.mm-pop .mrow { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.4; color: var(--fg); }
.popover.mm-pop .mrow:hover, .popover.mm-pop .mrow.on { background: var(--soft); }
.popover.mm-pop .mrow.on { font-weight: 600; }
.popover.mm-pop .mrow[disabled] { opacity: .45; cursor: not-allowed; }
.popover.mm-pop .mrow .mm-n { display: block; overflow-wrap: anywhere; }
.popover.mm-pop .mrow small { display: block; margin-top: 1px; color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.popover.mm-pop .mrow small .mmprice { font-size: 12px; font-weight: 600; color: var(--muted); }
.popover.mm-pop .lic { display: inline-block; font-size: 10.5px; font-weight: 400; padding: 1px 6px; border-radius: 99px; background: var(--soft); color: var(--muted); margin-left: 4px; vertical-align: 1px; }
.popover.mm-pop .mm-q { display: block; width: 100%; margin: 6px 0; }
.popover.mm-pop .sep { margin: 6px 4px; }
.hovercard { position: fixed; z-index: 70; max-width: 360px; background: var(--fg); color: var(--bg); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-l); pointer-events: none; }
.hovercard.long { max-width: 460px; }
.hovercard .h-row { display: flex; gap: 6px; align-items: baseline; }
.hovercard .h-sub { opacity: .7; font-size: 11.5px; }
.hovercard ul { margin: 6px 0 0; padding-left: 16px; }
.hovercard .diff-old { text-decoration: line-through; opacity: .65; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 새 버전 알림 (live.js onNewBuild) — 위쪽 가운데, 누를 때까지 남는다 */
.update-bar { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 81; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 12px; font-size: 13.5px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: calc(100vw - 32px); }
.update-bar { display: flex; align-items: center; gap: 10px; }
.update-bar button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.update-bar .go { font-weight: 600; text-decoration: underline; }
.update-bar .x { display: inline-flex; opacity: .75; } .update-bar .x:hover { opacity: 1; }
/* 실시간 선이 30초 넘게 안 붙을 때만 (손님·고객 화면, 10/27) — 작은 한 줄, 누르기를 막지 않는다 */
.conn-line { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 79; background: var(--surface); color: var(--muted); border: 1px solid var(--border2); padding: 4px 12px; border-radius: 999px; font-size: 12px; pointer-events: none; box-shadow: var(--shadow-s); max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 검색 팔레트 */
.palette { position: fixed; inset: 0; background: rgba(20,18,14,.3); z-index: 55; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette[hidden] { display: none; }
.palette .pbox { width: min(640px, calc(100vw - 32px)); background: var(--elev); border-radius: 16px; box-shadow: var(--shadow-l); overflow: hidden; border: 1px solid var(--border); }
.palette input { width: 100%; height: 52px; border: 0; outline: 0; padding: 0 18px; font-size: 16px; background: transparent; border-bottom: 1px solid var(--border); }
.palette .res { max-height: 50vh; overflow: auto; padding: 6px; }
.palette .res .opt { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.palette .res .opt.sel, .palette .res .opt:hover { background: var(--hover2); }
.palette .res .opt .d { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* ---------- 좁은 화면 (휴대폰) ---------- */
@media (max-width: 860px) {
  .app, .app.dock-open, .app.side-collapsed, .app.side-collapsed.dock-open, .app.pv-open, .app.side-collapsed.pv-open { grid-template-columns: minmax(0, 1fr); }
  .app.pv-open .pv { position: fixed; inset: 0; z-index: 77; border-left: 0; }        /* 휴대폰: 미리보기는 전체 화면. 그 안에서 연 창(78)·알림(80)은 위에 (10/3 검증: 96 이라 밑에 깔렸다) */
  .pv-grip, .dock-grip, .side-grip { display: none; }
  .set-wide-only { display: none !important; }                                        /* 끌어서 바꿀 목록 끝이 없다: 설정의 '왼쪽 목록 폭' 줄도 (10/11 점검) */
  .side { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .2s; visibility: visible !important; }
  .app.side-mobile-open .side { transform: none; box-shadow: var(--shadow-l); }
  .only-collapsed { display: inline-grid; }
  .app.dock-open .main { display: none; }
  .app.dock-open .dock { display: flex; border-left: 0; }
  .thread, .typing-bar { padding: 0 14px; }
  .composer { padding: 6px 12px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .mt-hello .quick { grid-template-columns: 1fr 1fr; }
  .hello .hello-q { font-size: 24px; }
  .top-actions .wide-only { display: none; }
}
/* 휴대폰 첫 화면: 입력창 아래 약관·사업자 줄은 글자를 치기 시작하면 접어 입력창이 자판 바로 위에 (10/16).
   누르는 순간(포커스)에 접으면 화면이 움직여 칩·단추를 누른 손이 빗나간다 — 글이 들어 있을 때만 */
@media (max-width: 600px) {
  .hello-mode .composer .foot { margin-top: 8px; font-size: 12px; }
  .hello-biz, .hello-biz .biz-line { font-size: 10.5px; line-height: 1.6; }
  .hello-mode .composer:has(#input:not(:placeholder-shown)) .hello-biz { display: none; }
}

/* ---------- 원본 비교 · 확인 질문 · 버전 ---------- */
.viewbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px 0; }
.seg.small { margin-bottom: 0; }
.seg.small button { padding: 3px 10px; font-size: 12.5px; }
#doc-view.orig .paper { box-shadow: 0 0 0 2px rgba(47,111,214,.35), 0 8px 24px rgba(0,0,0,.06); }
#doc-view.overlay td .ov { position: absolute; inset: 2px 4px auto 4px; color: rgba(47,111,214,.55); font-size: .86em; white-space: pre-wrap; pointer-events: none; max-height: calc(100% - 4px); overflow: hidden; background: rgba(255,255,255,.55); border-radius: 3px; }
#doc-view.overlay td.cand .ct { opacity: .35; }
.cmp-head { position: sticky; top: -14px; background: var(--surface); padding: 2px 0 10px; z-index: 2; }
.rules { margin-bottom: 10px; }
.rule-list { list-style: none; padding: 0; margin: 6px 0 4px; font-size: 12.5px; }
.rule-list li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; }
.rule-list li .ic { position: relative; top: 2px; color: var(--muted); }
.cmp-list { display: flex; flex-direction: column; gap: 8px; }
.cmp-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.cmp-row:hover { border-color: var(--border2); box-shadow: var(--shadow-s); }
.cmp-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.cmp-top .star { color: #d6a23a; display: inline-flex; }
/* 칸별 확인 (문서 창 '칸별 확인' 탭, 10/16): 판정 칩 · 칸 이름 · 들어간 값 · 어디서 온 값 */
.cells-list { display: flex; flex-direction: column; gap: 6px; }
.cell-row { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.cell-row[data-jump] { cursor: pointer; }
.cell-row[data-jump]:hover { border-color: var(--border2); box-shadow: var(--shadow-s); }
.cell-row > .badge { flex: none; min-width: 52px; justify-content: center; text-align: center; }
.cell-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; }
.cell-main b { font-weight: 600; overflow-wrap: anywhere; }
.cell-main .cell-val { color: var(--text); overflow-wrap: anywhere; }
.cell-main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* 원본 ↔ 작성: 패널이 넓으면 나란히(왼쪽 원본 · 오른쪽 작성), 좁으면(휴대폰) 위아래로 */
#compare-view { container-type: inline-size; }
.cmp-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
@container (min-width: 600px) { .cmp-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cmp-pair.solo { grid-template-columns: minmax(0, 1fr); }   /* 지시문 없는 칸: 쓴 글만 한 칸으로 (10/20 · S-17) */
.cmp-orig, .cmp-cur { font-size: 12.5px; border-radius: 9px; padding: 7px 10px; min-width: 0; }
.cmp-orig { background: var(--blue-soft); }
.cmp-cur { background: var(--elev); border: 1px solid var(--border); }
.cmp-orig .k, .cmp-cur .k { color: var(--faint); font-size: 11px; margin-bottom: 3px; }
.cmp-orig .none, .cmp-cur .none { color: var(--faint); }
.cmp-orig .ins { color: var(--blue); }
.cmp-orig .ins.req { color: var(--fg2); display: flex; gap: 4px; align-items: baseline; }
.cmp-cur .t { white-space: pre-wrap; color: var(--fg2); }
.chks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chk { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; }
.chk.ok { background: var(--ok-soft); color: var(--ok); } .chk.bad { background: var(--err-soft); color: var(--err); }
.q-intro { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg2); background: var(--blue-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.q-group { margin-bottom: 10px; }
.q-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.q-row:first-of-type { border-top: 0; }
.q-row label { font-size: 13px; font-weight: 600; }
.q-row label .sub { font-weight: 400; }
/* 입력칸 + 그 아래 '추천'·'예시대로' (대표 10/24 "예시대로 선택도 가능하게해 하단에 선택하면") — 단추는 칸 오른쪽 끝에 맞춘다 */
.q-in { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-picks { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* 누르면 바로 들어가는 답 칩 (추천·예시·공고 기간 보기·짧은 선택지, 대표 10/27 "마우스 딸깍딸깍몇번이면") — 직접 쓰는 한 줄은 그 줄에 마우스를 대거나 누를 때 */
/* 확인 질문의 보기 목록 (대표 10/27 "목록 해서"): 질문 카드(.tray.qcard)와 같은 세로 번호 목록 — 줄마다 같은 너비·같은 높이, 번호는 동그라미,
   추천 줄은 테두리·번호가 강조색. '직접 쓰기'를 누르면 그 아래 한 줄 (Enter) */
.q-opts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; font-size: 13.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.q-opt:hover, .q-opt:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.q-opt.rec { border-color: var(--accent); }
.q-opt:disabled { opacity: .55; cursor: default; }
.q-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hover2); color: var(--fg2); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.q-opt.rec .q-n { background: var(--accent); color: #fff; }
.q-ot { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.q-rec { flex: none; font-size: 11.5px; font-weight: 700; color: var(--accent, var(--fg)); }
.q-opt.q-none, .q-opt.q-own { color: var(--fg2); }
#ask-view .q-row { grid-template-columns: 1fr; align-items: start; gap: 8px; }   /* 10/27 번호 목록: 질문 한 줄 아래 보기·입력칸 (카드처럼, 줄마다 같은 꼴) */
.q-row.has-opts .q-type { display: none; }
.q-row.has-opts.typing .q-type { display: block; }
.q-type .inp { width: 100%; }
.q-row.cur > label { color: var(--fg); }
@media (pointer: coarse) { .q-opt { min-height: 44px; } }
/* 묶음 상자 한 줄 (확인 질문 탭 — 질문 카드의 묶음 카드와 같은 꼴): 칸 이름은 작은 칸 위에, 작은 칸은 다른 줄 입력칸과 같은 자리·같은 너비 (오와 열) */
.q-fields { display: grid; gap: 8px; }
.q-row .q-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 400; min-width: 0; }
.q-row .q-f span { color: var(--muted); overflow-wrap: anywhere; }
.q-done { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.q-done span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.q-done .btn { margin-left: auto; flex: none; }
.ver-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ver-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ver-label { font-size: 13px; color: var(--fg2); margin: 4px 0 8px; }
@media (max-width: 860px) { .q-row { grid-template-columns: 1fr; } }
.guide { margin-bottom: 10px; }
.g-sec { margin-top: 8px; }
.g-sec .k { font-size: 11.5px; color: var(--faint); margin-bottom: 4px; }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-item { padding: 6px 0; border-top: 1px solid var(--border); }
.doc-item:first-child { border-top: 0; }
.doc-name { display: flex; gap: 6px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.doc-mention { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* ---------- 회의록 ---------- */
.side-label.rec > span:first-child::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-radius: 50%; background: #e5534b; margin-left: 6px; animation: pulse 1.2s infinite; }
.side-label .lbl-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -5px -5px -5px 0; border: 0; border-radius: 6px; background: transparent; color: var(--side-muted); cursor: pointer; }
.side-label .lbl-add:hover { background: var(--side-hover); color: var(--side-fg); }
.side-item .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5534b; flex: none; animation: pulse 1.2s infinite; }
.side-item .side-date { font-size: 11px; color: var(--side-muted); flex: none; }
.side-item > .ic { color: var(--side-muted); }
.mt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-scroll { flex: 1; min-height: 0; overflow: auto; }
.mt-hello { max-width: 800px; margin: 0 auto; padding: 8vh 24px 24px; text-align: center; }
.mt-hello h1 { font-size: 28px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.3px; }
.mt-hello h1 .spark { color: var(--accent); display: inline-block; vertical-align: -3px; margin-right: 8px; }
.mt-hello p { color: var(--muted); margin: 0; }
/* 회의록 첫 화면의 일 세 개 (실시간 회의·녹음 파일·메모). 대화 첫 화면의 빠른 일 카드는 10/2 에 뺐지만 이 카드는 그대로 쓴다 */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; text-align: left; }
.quick button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); cursor: pointer; text-align: left; animation: itIn .6s var(--ease) backwards; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.quick button:hover { border-color: var(--border2); box-shadow: 0 22px 44px -26px rgba(11,15,20,.32); transform: translateY(-3px); }
.quick button b { font-size: 14px; }
.quick button span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@keyframes itIn { from { opacity: 0; transform: translateY(6px); } }
.mt-recent { margin-top: 28px; text-align: left; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mt-recent-h { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.mt-rc { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); cursor: pointer; min-width: 0; }
.mt-rc:hover { border-color: var(--border2); box-shadow: var(--shadow-s); }
.mt-rc b { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-rc-sum { font-size: 12px; color: var(--fg2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 18px 8px; }
.mt-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.mt-info .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-recs { display: flex; align-items: center; }
.mt-recs .rec-person { margin-left: -4px; }
.avatar.rec { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #e5534b; }
.mt-actions { display: flex; align-items: center; gap: 6px; }
.btn.rec-on { background: #e5534b; border-color: #e5534b; color: #fff; }
.btn.rec-on:hover { background: #d0443d; border-color: #d0443d; }
.lvl { width: 54px; height: 6px; border-radius: 99px; background: var(--hover2); overflow: hidden; }
.lvl i { display: block; height: 100%; width: 0; background: var(--faint); border-radius: 99px; transition: width .15s; }
.lvl.loud i { background: var(--ok); }
.mt-prog { padding: 0 18px 6px; }
.mt-prog .progress { margin: 2px 0 4px; }
.mt-prog .progress i.indet { width: 35% !important; animation: indet 1.3s ease-in-out infinite; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.mt-tabs { padding: 0 18px; border-bottom: 1px solid var(--border); }
.mt-tabs .seg { margin-bottom: 8px; }
.mt-tabs .cnt { font-size: 11px; color: var(--faint); }
.mt-body { flex: 1; min-height: 0; position: relative; }
.mt-pane { position: absolute; inset: 0; overflow: auto; display: none; padding: 14px 0 24px; }
.mt-pane.active { display: block; }
.mt-lines, .mn, .mt-vers { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.mt-empty { max-width: 520px; margin: 7vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); padding: 0 24px; }
.mt-empty .ic { color: var(--accent); }
.mt-empty b { color: var(--fg); font-size: 15px; }
.mt-empty span { font-size: 13px; line-height: 1.6; }
.ml { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 8px; border-radius: 10px; position: relative; }
.ml:hover { background: var(--hover); }
.ml.cont { padding-top: 1px; }
.ml-av { display: flex; justify-content: center; padding-top: 2px; }
.ml-t { font-size: 10.5px; color: var(--faint); opacity: 0; font-family: var(--mono); padding-top: 3px; }
.ml:hover .ml-t { opacity: 1; }
.ml-who { display: flex; align-items: baseline; gap: 8px; }
.ml-name { font-size: 13.5px; cursor: pointer; }
.ml-name:hover { text-decoration: underline; }
.ml-time { font-size: 11.5px; color: var(--faint); font-family: var(--mono); }
.ml-text { white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.ml.src-note .ml-text, .ml.src-chat .ml-text { color: var(--fg2); }
.ml.src-link .ml-text a { font-weight: 600; }
.ml-link-sum { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ml-edited { font-size: 11px; color: var(--faint); border-bottom: 1px dotted var(--faint); cursor: help; }
.ml-tools { display: flex; gap: 0; opacity: 0; align-self: start; }
.ml:hover .ml-tools { opacity: 1; }
.ml-tools .icon-btn { width: 28px; height: 28px; }
.ml-editor textarea { width: 100%; margin: 2px 0 4px; }
.mt-composer { padding-top: 6px; }
.mt-composer .box-row .sub { font-size: 12px; }
.mn-banner { max-width: 820px; margin: 0 auto 12px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; background: var(--blue-soft); border-radius: 12px; font-size: 13px; width: calc(100% - 48px); }
.mn-head h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.2px; }
.mn-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.mn-people { display: inline-flex; align-items: center; gap: 6px; }
.mn-people .avatar { margin-left: -5px; }
.mn-people .avatar:first-child { margin-left: 0; }
.mn-actions { margin: 10px 0 4px; }
.mn-sec { margin-top: 18px; }
.mn-sec h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mn-sec h4 .sub { font-weight: 400; }
.mn-sum { margin: 0; line-height: 1.75; }
.mn-kp, .mn-list { margin: 0; padding-left: 1.2em; }
.mn-kp li, .mn-list li { margin: 3px 0; }
.mn-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.mn-tbl th, .mn-tbl td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.mn-tbl th { background: var(--hover); font-weight: 600; }
.dec { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.dec-top { display: flex; align-items: center; gap: 8px; }
.dec-name { font-size: 14px; }
.dec-cur { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.dec-cur.none { color: var(--faint); }
.dec-note { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent); margin-top: 3px; }
.dec-hist { margin-top: 6px; }
.dec-hist summary { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.dec-hist summary .ic { transition: transform .15s; }
.dec-hist[open] summary .ic { transform: rotate(90deg); }
ol.flow { list-style: none; margin: 8px 0 2px; padding: 0 0 0 6px; border-left: 2px solid var(--border); }
ol.flow li { position: relative; display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; padding: 4px 0 4px 12px; font-size: 13px; }
ol.flow .fl-dot { position: absolute; left: -7px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px var(--card); }
ol.flow li.ty-decision .fl-dot { background: var(--ok); } ol.flow li.ty-change .fl-dot { background: var(--blue); }
ol.flow li.ty-cancel .fl-dot { background: var(--err); } ol.flow li.ty-revert .fl-dot { background: var(--accent); }
ol.flow .fl-t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding-top: 2px; }
ol.flow .fl-c { flex: 1 1 260px; min-width: 0; }
ol.flow li.ty-cancel .fl-c { text-decoration: line-through; color: var(--muted); }
ol.flow .fl-r { display: block; font-size: 12px; color: var(--accent); }
.ver-row.cur { border-color: var(--accent-ring); }
.ver-title { font-size: 13.5px; font-weight: 600; }
.me-dec { display: grid; grid-template-columns: 160px 1fr 96px 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.ap-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.ap-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--elev); cursor: pointer; }
@media (max-width: 860px) {
  .mt-lines, .mn, .mt-vers { padding: 0 12px; }
  .mt-bar { padding: 2px 12px 8px; } .mt-tabs, .mt-prog { padding-left: 12px; padding-right: 12px; }
  .mt-actions .wide-only { display: none; }
  .mt-recent { grid-template-columns: 1fr; }
  .me-dec { grid-template-columns: 1fr 1fr; }
  .mn-banner { width: calc(100% - 24px); }
}
/* 휴대폰 회의 머리: 상태·날짜는 한 줄, 단추는 다음 줄 (한 줄에 두면 단추가 '회의록 v2' 위를 덮고, 상태 글이 '마이크 켜기' 밑에 깔렸다, 10/3 점검).
   날짜 줄이 길면(영어) … 대신 줄을 바꾼다 */
@media (max-width: 600px) { .mt-info { flex-basis: 100%; } .mt-info .sub { white-space: normal; } }

/* ---------- 만든 문서 카드 ---------- */
.doc-card { border: 1px solid var(--border); background: var(--card); border-radius: 14px; padding: 12px 14px; margin-top: 10px; max-width: 640px; box-shadow: var(--shadow-s); }
.dc-head { display: flex; align-items: center; gap: 8px; }
.dc-head .ic { color: var(--muted); }
.dc-head b { font-size: 14px; }
.dc-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; }
.dc-thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; background: #fff; }
.dc-actions { margin-top: 8px; }
.dv-slides { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow: auto; padding: 4px; background: var(--hover); border-radius: 10px; }
.dv-slides img { width: 100%; border-radius: 6px; box-shadow: var(--shadow-s); background: #fff; }
@media (max-width: 860px) { .dc-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 만든 그림 ---------- */
.media-card { margin-top: 10px; max-width: 680px; }
.mc-grid { display: grid; gap: 6px; }
.mc-grid.n1 { grid-template-columns: 1fr; } .mc-grid.n2 { grid-template-columns: 1fr 1fr; }
.mc-grid.n3 { grid-template-columns: 1fr 1fr 1fr; } .mc-grid.n4 { grid-template-columns: 1fr 1fr; }
.mc-img { padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--hover); }
.mc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.mc-img:hover img { transform: scale(1.02); }
/* 바탕이 투명한 그림(따 낸 캘리그래피): 흰 글씨도 검은 글씨도 보이게 옅은 체크무늬 위에 */
.checker, .media-card.calli .mc-img { background-color: #fff; background-image: linear-gradient(45deg, #e3e6eb 25%, transparent 25%),
  linear-gradient(-45deg, #e3e6eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e3e6eb 75%), linear-gradient(-45deg, transparent 75%, #e3e6eb 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.media-card.calli .mc-img img { object-fit: contain; }

/* 캘리그래피 넣기 창 (calli.js, EPIC 과 같은 짜임): 왼쪽 원본(네모·글씨 색), 오른쪽 미리보기·고르기. 폰은 위아래로 */
.modal.cal-modal h3 .cal-where { font-size: 13px; font-weight: 500; margin-left: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 12px 0; max-height: 46vh; overflow: auto; }
.cal-pic { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; color: var(--fg); min-width: 0; }
.cal-pic:hover { border-color: var(--accent); }
.cal-pic img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 8px; background: var(--hover); }
.cal-pic span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-stage { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--hover); cursor: crosshair; touch-action: none; user-select: none; }
.cal-stage img { display: block; width: 100%; max-height: 58vh; object-fit: contain; pointer-events: none; }
.cal-stage.picking { cursor: copy; }
#cal-box { position: absolute; border: 2px dashed var(--accent); background: var(--accent-soft); border-radius: 4px; pointer-events: none; }
#cal-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent); pointer-events: none; }
.cal-l .sub { margin-top: 8px; }
.cal-prev { min-height: 180px; border-radius: 12px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 14px; transition: opacity .2s; }
.cal-prev img { max-width: 100%; max-height: 260px; object-fit: contain; display: block; }
.cal-prev.busy { opacity: .55; }
.cal-prev[data-bg="dark"] { background: #1B1E23; }
.cal-prev[data-bg="light"] { background: #F4F5F7; }
.cal-prev[data-bg="grid"] { background-color: #fff; background-image: linear-gradient(45deg, #e3e6eb 25%, transparent 25%),
  linear-gradient(-45deg, #e3e6eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e3e6eb 75%), linear-gradient(-45deg, transparent 75%, #e3e6eb 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.cal-prev[data-bg="dark"] .sub { color: #B9BEC6; }
.cal-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cal-row > span { font-size: 13px; color: var(--muted); min-width: 84px; }
.cal-row.end { justify-content: flex-end; margin-top: 18px; }
#cal-pickb.on { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 600px) {
  .cal { grid-template-columns: 1fr; gap: 12px; }
  .cal-stage img { max-height: 36vh; }
  .cal-prev { min-height: 120px; }
  .cal-row > span { min-width: 0; width: 100%; }
  .cal-row.end .btn { flex: 1 1 0; justify-content: center; }
}
.mc-foot { margin-top: 6px; font-size: 13px; }
.mv-main { background: var(--hover); border-radius: 12px; display: flex; justify-content: center; padding: 6px; }
.mv-main img { max-width: 100%; max-height: 58vh; border-radius: 8px; }
.mv-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mv-thumbs img { height: 64px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.mv-thumbs img.on, .mv-thumbs img:hover { border-color: var(--accent); }
.mv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mv-pair figure { margin: 0; text-align: center; } .mv-pair img { width: 100%; border-radius: 8px; }
.mv-pair figcaption { font-size: 12px; color: var(--muted); }

/* ---------- 다시 답하기 · 고치기 ---------- */
.msg .tools .only-last { display: none; }
.msg.last-a .tools .only-last, .msg.last-q .tools .only-last { display: inline-grid; }
.msg.superseded > :not(.sup-note) { display: none; }
.msg.superseded.open > :not(.sup-note) { display: revert; opacity: .6; }
.msg.superseded.open > .tools { display: none; }
.sup-note { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border2); background: transparent; color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; align-self: flex-start; }
.msg.user .sup-note { align-self: flex-end; }
.edit-q { width: min(560px, 70vw); min-height: 70px; }

/* ---------- 3D 모델 ---------- */
.m3d-thumb { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; background: #fff; }
.m3d-thumb img { object-fit: contain; }
.m3d-play { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(20, 24, 32, .72); color: #fff; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }

/* ---------- 영상 ---------- */
.vid-player { display: block; width: 100%; max-height: 70vh; background: #0d0f13; border-radius: 12px; border: 1px solid var(--border); }
.media-card.vid .mc-foot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.vid-prompt { margin-top: 6px; }
.vid-prompt summary { cursor: pointer; }
.vid-prompt div { margin-top: 4px; line-height: 1.5; }

/* ---------- 보관함 (2026-09-29 대표: "폴더링·분류 잘해서 산만하지 않게 · 썸네일 중심") ---------- */
.modal.vault-modal { width: min(1180px, 100%); height: min(820px, calc(100dvh - 32px)); display: flex; flex-direction: column; padding: 20px 22px 0; overflow: hidden; }
.vault-modal > h3 { margin-bottom: 12px; }
.vt { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border); margin: 0 -22px; }   /* 220: 영어 'Company materials' 가 잘리지 않게 (10/9) */
.vault-modal .mt-empty { margin: 60px auto 12px; }
.vt-rail { border-right: 1px solid var(--border); padding: 12px 10px; overflow: auto; background: var(--elev); display: flex; flex-direction: column; gap: 2px; }
.vt-f { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--fg2); font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.vt-f span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-f em { font-style: normal; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.vt-f svg { color: var(--muted); flex: none; }
.vt-f:hover { background: var(--hover); }
.vt-f.on { background: var(--card); color: var(--fg); font-weight: 600; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.04); }
.vt-f.on svg { color: var(--accent); }
/* 폴더 (대표 10/9 '보관함 종류를 간소화'): 전체 · 회사 자료 · 공고별(펼치면 공고마다) · 그 밖 */
.vt-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px 17px; padding-left: 7px; border-left: 1px solid var(--border); }
.vt-sub .vt-f { font-size: 12.5px; padding: 6px 8px; gap: 8px; align-items: flex-start; }
.vt-sub .vt-f span { white-space: normal; text-overflow: clip; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; overflow-wrap: anywhere; }   /* 공고 이름은 두 줄까지, 전체는 툴팁 */
.vt-sub .vt-f svg { margin-top: 1px; }
.vt-rsep { display: block; height: 1px; background: var(--border); margin: 8px 6px; flex: none; }
.vt-org-t { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.vt-org-t svg { color: var(--accent); }
.vt-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0; }
.vt-chips .chip { font: inherit; font-size: 12.5px; }
.vt-chips .chip svg { color: var(--muted); flex: none; }
.vt-chips .chip em { font-style: normal; color: var(--faint); margin-left: 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vt-chips .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.vt-chips .chip.on svg, .vt-chips .chip.on em { color: var(--accent); }
.vt-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 12px 20px 0; }
.vt-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; padding: 4px 6px 4px 0; cursor: pointer; flex: none; }
.vt-back svg { transform: rotate(180deg); }
.vt-head-tt { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.vt-head-t { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.vt-head-go { flex: none; }
.vt-dd { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-dd.off { background: var(--hover2); color: var(--muted); font-weight: 500; }
.vt-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.vt-fold { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.vt-fold:hover { border-color: var(--border2); box-shadow: 0 8px 24px rgba(20,20,30,.10); }
.vt-fold-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.vt-fold-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vt-fold-tx b { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.vt-fold-tx small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.vt-sec-go { display: inline-flex; align-items: center; gap: 7px; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.vt-sec-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-sec-go:hover span { color: var(--accent); text-decoration: underline; }
.vt-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.vt-main.vt-org { overflow: auto; padding: 14px 20px 20px; display: block; }
.vt-bar { display: flex; gap: 8px; align-items: center; padding: 12px 20px 0; }
.vt-search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--elev); color: var(--muted); }
.vt-search:focus-within { border-color: var(--border2); box-shadow: 0 0 0 3px var(--accent-soft); }
.vt-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; color: var(--fg); }
.vt-bar select.inp { flex: 0 0 auto; width: auto; min-height: 38px; }
.vt-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vt-seg button { border: 0; background: transparent; color: var(--muted); width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.vt-seg button.on { background: var(--hover2); color: var(--fg); }
.vt-bar .btn.primary { height: 38px; }
.vt-meta { padding: 8px 20px 0; font-size: 12.5px; }
.vt-meta .vt-org { width: 24px; height: 24px; margin-left: 2px; vertical-align: middle; color: var(--muted); }
.vt-meta .vt-view { border: 0; background: transparent; color: var(--fg2); font: inherit; font-size: 12.5px; padding: 0 2px; margin: 0; cursor: pointer; vertical-align: baseline; max-width: 160px; text-overflow: ellipsis; }
.vt-meta .vt-view:hover, .vt-meta .vt-view:focus-visible { color: var(--fg); text-decoration: underline; outline: 0; }
.linkish { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.vt-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 24px; }
.vt-sec { margin-top: 14px; }
.vt-sec h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--fg2); }
.vt-sec h5 svg { color: var(--muted); }
.vt-sec h5 em { font-style: normal; color: var(--faint); font-weight: 500; }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 14px; }
.vt-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; }
.vt-card:hover { border-color: var(--border2); box-shadow: 0 8px 24px rgba(20,20,30,.10); transform: translateY(-1px); }
.vt-th { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--elev); overflow: hidden; border-bottom: 1px solid var(--border); }
.vt-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .2s; background: #fff; }
.vt-th img.ok { opacity: 1; }
.vt-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); background: var(--soft); }
.vt-tile svg { width: 26px; height: 26px; stroke-width: 1.5; }
.vt-ext { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; border-radius: 6px; box-shadow: 0 0 0 2px var(--card); }
.vt-card .vt-ext { top: auto; bottom: 8px; }      /* 카드: 표는 그림 왼쪽 아래 (위 오른쪽 단추 줄과 겹쳤다, 10/3 검증) */
.vt-line .vt-ext { left: 4px; top: 4px; transform: scale(.82); transform-origin: top left; }
.vt-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.14); opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s; }
.vt-acts .icon-btn { width: 30px; height: 30px; }
.vt-card:hover .vt-acts, .vt-card:focus-within .vt-acts { opacity: 1; transform: none; }
.vt-info { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.vt-info b { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.vt-info small { color: var(--muted); font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }   /* 크기·시각이 잘려 안 보였다 (점검 낮음 14) */
.vt-info .vbadge { align-self: flex-start; margin-top: 4px; }
.vt-lines { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vt-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); cursor: pointer; }
.vt-line:first-child { border-top: 0; }
.vt-line:hover { background: var(--hover); }
.vt-line .vt-th { width: 64px; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 8px; }
.vt-line .vt-tile svg { width: 18px; height: 18px; }
.vt-line .nm { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.vt-line .nm b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-line .nm small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-line .acts { display: flex; gap: 2px; }
.vbadge { border: 1px solid var(--border); background: var(--card); color: var(--fg2); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.vbadge:disabled { cursor: default; opacity: .8; }
.vbadge.sc-me { background: var(--warn-soft); border-color: transparent; }
.vbadge.sc-group { background: var(--blue-soft); border-color: transparent; }
.vbadge.sc-all { background: var(--ok-soft); border-color: transparent; }
.vbadge.sc-public { background: var(--accent-soft); border-color: transparent; }
.vt-scope-wrap { margin: 10px 20px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vt-scope-t { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: 13px; }
.vt-scope { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.vt-scope .row, .vt-groups { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.vt-groups[hidden] { display: none; }
.og-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.og-row .inp { flex: 1 1 160px; min-width: 0; width: auto; }
.og-row select.inp { flex: 0 0 auto; }
.og-row .nm { min-width: 90px; }
.og-gs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pv-vid { width: 100%; max-height: 70vh; background: #000; border-radius: 10px; }
@media (max-width: 760px) {
  .vt { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .vt-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; scrollbar-width: none; }
  .vt-f { width: auto; flex: none; }
  .vt-sub { display: none; }                                  /* 휴대폰: 공고 폴더는 가운데 폴더 카드로 (위 줄에는 '공고별'만) */
  .vt-rsep { width: 1px; height: auto; margin: 6px 4px; }
  .vt-chips { flex-wrap: nowrap; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; }   /* 위아래 6px: 칩의 넓힌 누름 자리(40px)가 옆으로 미는 줄에 잘리지 않게 */
  .vt-chips .chip { flex: none; }
  .vt-head { padding: 10px 12px 0; }
  .vt-head-tt { flex-basis: 100%; order: 3; }
  .vt-head-t { font-size: 14.5px; }
  .vt-head-go { margin-left: auto; }
  .vt-folders { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .vt-meta { padding: 8px 12px 0; }
  .vt-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .vt-acts { opacity: 1; transform: none; }
  .vt-bar { flex-wrap: wrap; padding: 10px 12px 0; }
  .vt-body { padding: 4px 12px 20px; }
  .vt-line { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .vt-line .vbadge { display: none; }
}
@media (pointer: coarse) {
  .vt-back, .vt-sec-go { min-height: 40px; }                 /* 공고 폴더 머리의 '공고별' · 찾기 묶음 머리: 누르는 자리 40px */
}

/* ---------- 회의실 (앱 전체 회의 녹음 + 음성 통화) ---------- */
#btn-rec.rec-on { color: #d64545; background: rgba(214,69,69,.1); }
#btn-rec.rec-on svg circle:last-child { animation: pulse 1.4s infinite; }
.rdot { width: 9px; height: 9px; border-radius: 50%; background: #d64545; flex: none; animation: pulse 1.4s infinite; display: inline-block; }
/* 녹음이 끝났거나 멈추면 회색 점 (예전엔 끝나도 연두색이라 아직 녹음 중처럼 보였다) · 참여 전·마무리 중은 주황 */
#mrec-dock.done .rdot, #mrec-dock.paused .rdot, #mrec-bubble.done .rdot { background: #a3a09a; animation: none; }
#mrec-dock.stopping .rdot { background: var(--warn); animation: none; }
#mrec-dock.live:not(.in) .rdot { background: #d64545; }

/* 회의 창 — 떠 있는 창 · 오른쪽에 붙인 판 · 크게 · 알약 · 휴대폰 아래 판 */
#mrec-dock { position: fixed; z-index: 60; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  font-size: 13px; overflow: hidden; display: flex; flex-direction: column; opacity: var(--mrop, 1); right: 18px; bottom: 110px; width: 380px; height: min(520px, calc(100dvh - 140px)); }
#mrec-dock[hidden] { display: none; }
#mrec-dock.dragging { box-shadow: 0 22px 60px rgba(0,0,0,.28); }
#mrec-dock.side { top: 0; right: 0; bottom: 0; height: auto; border-radius: 0; border-width: 0 0 0 1px; box-shadow: -6px 0 24px rgba(0,0,0,.06); }
#mrec-dock.big { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 48px)); z-index: 66; }
#mrec-dock.min { width: auto; max-width: 290px; height: auto; border-radius: 999px; bottom: auto; right: auto; }
#mrec-dock.min .mrb, #mrec-dock.min .mrnote, #mrec-dock.min .mrc, #mrec-dock.min .rz, #mrec-dock.min .mr-full { display: none !important; }
#mrec-dock.min .mrh { border-bottom: 0; padding: 7px 6px 7px 14px; gap: 6px; }
#mrec-dock.min .mrt { max-width: 96px; }
.app.mrec-side { padding-right: var(--mrec-side-w, 360px); }
/* 머리 줄 (끌어서 옮기기) */
#mrec-dock .mrh { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--border); flex: none; cursor: grab; user-select: none; touch-action: none; }
#mrec-dock.dragging .mrh { cursor: grabbing; }
#mrec-dock.side .mrh { cursor: default; }
#mrec-dock .mrtt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#mrec-dock .mrs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
#mrec-dock .mrt { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#mrec-dock .mrh .icon-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); cursor: pointer; }
#mrec-dock .mrh .icon-btn:hover { color: var(--fg); background: var(--hover); }
#mrec-dock .mrh .icon-btn.on { color: var(--blue); background: var(--blue-soft); }
#mrec-dock .mrh .mr-pmic.off { color: #d64545; }
/* 투명도: 작은 떠 있는 막대 (창 안 전체 폭 막대 대신) */
.mrop-pop { position: absolute; top: 48px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-s); font-size: 11.5px; color: var(--muted); }
.mrop-pop[hidden] { display: none; }
.mrop-pop input { width: 110px; height: 3px; accent-color: var(--muted); }
.mrop-v { width: 30px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg2); font-weight: 600; }
/* 몸통 */
#mrec-dock .mrb { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; overflow: auto; }
.mrsec { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: -4px; }
/* 참가자 타일 */
.mrps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#mrec-dock.side .mrps, #mrec-dock:not(.big) .mrps { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.mrp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 8px; border-radius: 12px; background: var(--hover); border: 2px solid transparent; transition: border-color .12s, box-shadow .12s; min-width: 0; }
.mrp[data-pc] { cursor: pointer; }
.mrp .av { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--c, #888); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; box-shadow: 0 0 0 0 transparent; transition: box-shadow .12s; }
.mrp .av em { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #d64545; color: #fff; display: grid; place-items: center; border: 2px solid var(--card); font-style: normal; }
.mrp .nm { font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrp.talk .av { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px #3aa55d; }
.mrp.talk { border-color: rgba(58,165,93,.35); }
.mrp.sel { border-color: var(--blue); }
.mrp.weak .nm::after { content: " · 연결 약함"; color: var(--warn); font-weight: 400; }
/* 다른 언어는 말이 길어 이름 옆에 두면 잘린다 (weak connection): 이름 아래 한 줄로 */
html:not([lang="ko"]) .mrp.weak .nm::after { content: none; }
html:not([lang="ko"]) .mrp.weak::after { content: attr(data-weak); margin-top: -3px; font-size: 11px; line-height: 1.2; color: var(--warn); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrp.off { opacity: .45; filter: grayscale(1); background: transparent; border-color: var(--border); cursor: default; }
.mrp .live-b { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; border: 0; border-radius: 999px; padding: 2px 8px; font: 700 10.5px/1.4 var(--font); color: #fff; background: #d64545; cursor: pointer; }
.mrp .live-b:hover { filter: brightness(1.08); }
/* 내가 보여 주는 화면: 작은 실시간 미리보기 (크게는 띄우지 않는다 — 전체 화면 공유면 거울처럼 겹친다) */
.mrmine[hidden] { display: none; }
.mrmy-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mrmy { position: relative; width: 132px; display: flex; flex-direction: column; gap: 3px; }
.mrmy video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 8px; pointer-events: none; }
.mrmy .ms-live { position: absolute; left: 5px; top: 5px; font: 800 9px/1 var(--font); letter-spacing: .06em; color: #fff; background: #d64545; padding: 3px 5px; border-radius: 4px; }
.mrmy-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.mrmy-x:hover { background: #d64545; }
.mrmy small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrvol { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg2); padding: 6px 10px; border-radius: 10px; background: var(--hover); }
.mrvol[hidden] { display: none; }
.mrvol input { flex: 1; }
.mrvol b { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
/* 대화·녹취 */
.mrls { flex: 1; min-height: 70px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.mrl { line-height: 1.55; overflow-wrap: anywhere; }
.mrl b { font-weight: 600; margin-right: 2px; }
.mrl .rt { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 4px; white-space: nowrap; }
.mrl.note .tx { color: var(--fg); }
.mrl.mark .tx { color: var(--accent); font-weight: 600; }
.mrl a { color: var(--blue); }
/* 실시간 자막: 아직 받아쓰지 않은 말(회색) · 지금 말하는 중(점 세 개, 흔들리는 뒷부분은 더 옅게) · 받아쓴 줄로 바뀌지 못해 남은 자막 */
.mrl.cap .tx { color: var(--muted); }
.mrl.cap .capm, .ml.live .ml-time { color: var(--faint); font-size: 11px; font-style: normal; margin-left: 4px; }
.mrl.int .tx { color: var(--muted); font-style: italic; }
.mrl.int .tail, .ml.live .tail { color: var(--faint); }
.ml.live .ml-text { color: var(--muted); font-style: italic; }
.ml.live .dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.ml.live .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); animation: capdot 1s infinite ease-in-out; }
.ml.live .dots i:nth-child(2) { animation-delay: .15s; }
.ml.live .dots i:nth-child(3) { animation-delay: .3s; }
.mrl .dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.mrl .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); animation: capdot 1s infinite ease-in-out; }
.mrl .dots i:nth-child(2) { animation-delay: .15s; }
.mrl .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes capdot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.lcard { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 2px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--elev); color: inherit; text-decoration: none; max-width: 100%; }
.lcard:hover { border-color: var(--blue); }
.lcard img { width: 76px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; background: var(--hover); }
.lcard .lc-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--hover); display: grid; place-items: center; color: var(--muted); flex: none; }
.lcard .lc-b { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lcard .lc-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard small { color: var(--fg2); font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard em { color: var(--muted); font-size: 11px; font-style: normal; }
/* 메시지·파일 줄 · 아래 조작 줄 */
.mrnote { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--border); flex: none; }
.mrnote[hidden] { display: none; }
.mrnote .inp { flex: 1; min-width: 0; font-size: 12.5px; padding: 7px 11px; border-radius: 999px; }
.mrnote .icon-btn { width: 32px; height: 32px; flex: none; color: var(--muted); }
.mrnote .icon-btn:hover { color: var(--fg); }
.mrc { display: flex; gap: 6px; align-items: center; padding: 8px 10px 10px; flex: none; background: var(--elev); border-top: 1px solid var(--border); }
.mrc[hidden] { display: none; }
/* 좁은 창에서는 동그라미가 조금씩 작아진다 (공유 중엔 단추가 하나 늘어 나가기 단추가 밖으로 밀려 잘렸다, 10/3) */
.mrk { width: 38px; height: auto; aspect-ratio: 1; min-width: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--hover); color: var(--fg2); cursor: pointer; flex: 0 1 38px; transition: background .12s, color .12s; }
.mrk:hover { background: var(--hover2); color: var(--fg); }
.mrk.off { background: rgba(214,69,69,.12); color: #d64545; }
.mrk.on { background: var(--blue-soft); color: var(--blue); }
.mrk.warn { background: rgba(214,69,69,.12); color: #d64545; }
.mrk.hang { background: #d64545; color: #fff; width: 46px; height: 38px; aspect-ratio: auto; flex: none; border-radius: 999px; }
.mrk.hang:hover { background: #c03a3a; color: #fff; }
.mrf { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.mrf[hidden] { display: none; }
.mrf .ptt { margin-right: auto; }
.mrf .ptt.held { background: #3aa55d; color: #fff; border-color: #3aa55d; }
/* 크기 조절 손잡이 (가장자리 4 + 모서리 4) */
#mrec-dock .rz { position: absolute; z-index: 4; }
#mrec-dock .rz-n, #mrec-dock .rz-s { left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
#mrec-dock .rz-n { top: -3px; } #mrec-dock .rz-s { bottom: -3px; }
#mrec-dock .rz-e, #mrec-dock .rz-w { top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
#mrec-dock .rz-e { right: -3px; } #mrec-dock .rz-w { left: -3px; }
#mrec-dock .rz-ne, #mrec-dock .rz-nw, #mrec-dock .rz-se, #mrec-dock .rz-sw { width: 14px; height: 14px; }
#mrec-dock .rz-ne { top: -3px; right: -3px; cursor: nesw-resize; } #mrec-dock .rz-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
#mrec-dock .rz-nw { top: -3px; left: -3px; cursor: nwse-resize; } #mrec-dock .rz-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
#mrec-dock .rz-se::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); border-radius: 0 0 3px 0; }
#mrec-dock.side .rz:not(.rz-w), #mrec-dock.sheet .rz { display: none; }
/* 숨겼을 때 되살리는 동그라미 */
#mrec-bubble { position: fixed; right: 18px; bottom: 96px; z-index: 61; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--fg2); box-shadow: var(--shadow-l); display: grid; place-items: center; cursor: pointer; }
#mrec-bubble .rdot { position: absolute; top: 6px; right: 6px; }
#mrec-bubble:not(.live) .rdot { background: #a3a09a; animation: none; }
#mrec-bubble em { position: absolute; left: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: #d64545; color: #fff; display: grid; place-items: center; font-style: normal; }
/* 화면 공유 고르기 */
#mrec-sharepick { position: fixed; z-index: 90; width: 290px; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-l); padding: 8px; }
#mrec-sharepick .sp-h { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px 6px; }
#mrec-sharepick .sp-it { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--fg); font: inherit; }
#mrec-sharepick .sp-it:hover { background: var(--hover); }
#mrec-sharepick .sp-it svg { color: var(--blue); flex: none; }
#mrec-sharepick .sp-it b { display: block; font-size: 13px; }
#mrec-sharepick .sp-it small { color: var(--muted); font-size: 11.5px; }
#mrec-sharepick .sp-snd { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px 10px 2px; color: var(--fg2); }
#mrec-sharepick .sp-snd small { color: var(--muted); }
#mrec-sharepick .sp-note { font-size: 11px; color: var(--muted); padding: 6px 10px 4px; line-height: 1.5; }
/* 소리 설정 */
.mr-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; margin-top: 8px; }
.mr-set section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mr-set h4 { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; }
.mr-set label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.mr-set label b { font-weight: 600; color: var(--fg2); }
.mr-set input[type=range] { width: 100%; }
.mr-sens { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.mr-set .mr-sens label.row { flex-direction: row; align-items: center; }
.mr-meter { position: relative; height: 10px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.mr-meter .lv { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #b9b5ad; border-radius: 999px; transition: width .05s linear; }
.mr-meter.open .lv { background: #3aa55d; }
.mr-meter .th { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg); left: 43%; }
.mr-meter.na { opacity: .4; }
.mr-tg { flex-direction: row !important; align-items: flex-start; gap: 8px !important; }
.mr-tg span { display: flex; flex-direction: column; }
.mr-tg small { color: var(--muted); font-size: 11.5px; }
.mr-tip { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 12.5px; line-height: 1.55; color: var(--fg2); }
.mr-tip svg { color: var(--warn); flex: none; margin-top: 2px; }
/* 초대 알림 */
#mrec-inv { position: fixed; right: 18px; top: 64px; width: min(360px, calc(100vw - 32px)); z-index: 70; background: var(--card); border: 1px solid var(--border); border-left: 3px solid #d64545; border-radius: 14px; box-shadow: var(--shadow-l); padding: 14px 16px; font-size: 13.5px; }
body:has(#mrec-dock.side) #mrec-inv { display: none; }   /* 오른쪽에 붙은 회의 창을 덮지 않게 (창 안에 같은 참여 단추, 10/3 검증) */
#mrec-inv .mri-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#mrec-inv .mri-b { color: var(--fg2); line-height: 1.6; }
/* 공유 화면 보기 */
#mrec-screen { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); width: min(880px, calc(100vw - 32px)); z-index: 65; background: #111; border-radius: 12px; box-shadow: var(--shadow-l); overflow: hidden; resize: both; }
#mrec-screen[hidden] { display: none; }
#mrec-screen .msh { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; color: #eee; font-size: 12.5px; background: #1c1c1c; cursor: grab; user-select: none; touch-action: none; }
#mrec-screen.dragging .msh { cursor: grabbing; }
#mrec-screen .ms-live { flex: none; white-space: nowrap; font: 800 10px/1 var(--font); letter-spacing: .06em; color: #fff; background: #d64545; padding: 4px 6px; border-radius: 5px; }
#mrec-screen .icon-btn { color: #ddd; width: 28px; height: 28px; }
#mrec-screen .msv video { display: block; width: 100%; max-height: 70vh; background: #000; }
/* 크기를 바꾼 창(모서리 끌기·크게): 영상이 창을 채운다 (10/9 대표 "크기조절되고 적정치로 위치잡고 키워주던지") */
#mrec-screen.sized { display: flex; flex-direction: column; min-width: 280px; min-height: 180px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
#mrec-screen.sized[hidden] { display: none; }
#mrec-screen.sized .msv { flex: 1 1 auto; min-height: 0; display: flex; background: #000; }
#mrec-screen.sized .msv video { flex: 1 1 auto; min-width: 0; height: 100%; max-height: none; object-fit: contain; }
#mrec-screen.sized .msv.grid { display: grid; }
#mrec-screen.sized .msv.grid video { height: auto; max-height: none; }
#mrec-screen::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; pointer-events: none; opacity: .55;
  background: linear-gradient(135deg, transparent 0 45%, #bbb 45% 52%, transparent 52% 64%, #bbb 64% 71%, transparent 71%); }
.mrmy { cursor: zoom-in; }
@media (max-width: 860px) { #mrec-screen [data-ms=big] { display: none; } }   /* 폰은 이미 화면 폭 — 머리줄 이름이 잘리지 않게 (전체 화면 단추는 그대로) */
.mrp .lvl { display: block; width: 52px; height: 4px; margin-top: 3px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; }
.mrp .lvl b { display: block; height: 100%; width: 0; background: #2f9e5b; transition: width .1s linear; }
.mrp .quiet { font-style: normal; font-size: 10.5px; color: #c2410c; background: rgba(234,88,12,.12); border-radius: 6px; padding: 1px 6px; margin-top: 3px; }
.mr-quiet { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(234,88,12,.12); color: var(--fg); font-size: 12.5px; line-height: 1.5; }
.mr-quiet span { flex: 1; min-width: 0; }
#btn-rec.rec-busy { color: var(--accent); }
#mrec-screen .msv video[hidden] { display: none; }
#mrec-screen .msv.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px; background: #000; }
#mrec-screen .msv.grid video { max-height: 44vh; }
#mrec-screen .msv:fullscreen { background: #000; overflow: auto; }
#mrec-screen .ms-stall { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.72); color: #eee; font-size: 12px; text-align: center; }
#mrec-screen .ms-stall[hidden] { display: none; }
.mstabs { display: flex; gap: 4px; overflow-x: auto; min-width: 0; }
.mstab { border: 0; background: transparent; color: #bbb; font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.mstab:hover { background: #2a2a2a; color: #fff; }
.mstab.on { background: #333; color: #fff; font-weight: 600; }
#mrec-screen .icon-btn.on { background: #333; color: #fff; }
#mrec-screen .icon-btn[hidden] { display: none; }
#mrec-screen .ms-vol { display: flex; align-items: center; gap: 6px; color: #ddd; padding: 0 4px; }
#mrec-screen .ms-vol[hidden] { display: none; }
#mrec-screen .ms-vol input { width: 88px; accent-color: #ddd; }
/* 휴대폰: 아래에서 올라오는 판 (알약은 오른쪽 아래) */
@media (max-width: 860px) {
  #mrec-dock.sheet { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; height: min(72dvh, 620px) !important; border-radius: 18px 18px 0 0; transform: none; padding-bottom: env(safe-area-inset-bottom); }
  /* 알약·동그라미는 입력창 위에 (96px 일 때 입력창 위 가장자리를 11~16px 덮었다) */
  #mrec-dock.min { right: 12px !important; left: auto !important; bottom: calc(120px + env(safe-area-inset-bottom)) !important; top: auto !important; }
  #mrec-dock .mrh { cursor: default; }
  .app.mrec-side { padding-right: 0; }
  #mrec-bubble { bottom: calc(120px + env(safe-area-inset-bottom)); right: 12px; }
  .mrk { width: 44px; height: 44px; flex-basis: 44px; }
  #mrec-screen .msh { gap: 4px; }
  #mrec-screen .ms-vol input { width: 60px; }
}
/* ---------- 과정 보기 (답 위 한 줄 → 단계 → 세부) ---------- */
.proc { margin: 2px 0 8px; font-size: 13px; }
.proc-h { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 4px 8px 4px 4px; border-radius: 8px; cursor: pointer; max-width: 100%; }
.proc-h:hover { background: var(--hover); color: var(--fg2); }
.proc-h .pi { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--ok); flex: none; }
.proc-h .pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.proc.run .proc-h .pl { color: var(--fg2); }
.proc-h .pt { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.proc-h svg:last-child { transition: transform .15s; flex: none; }
.proc.open .proc-h svg:last-child { transform: rotate(180deg); }
.proc-l { margin: 4px 0 4px 11px; padding-left: 14px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.ps-h { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; font: inherit; color: var(--fg2); padding: 4px 6px; border-radius: 7px; cursor: pointer; text-align: left; }
.ps-h:hover:not(:disabled) { background: var(--hover); }
.ps-h:disabled { cursor: default; color: var(--muted); }
.ps-h .si { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; margin-left: -18px; box-shadow: 0 0 0 3px var(--card); }
.ps.run .ps-h .si { background: var(--accent); animation: pulse 1.4s infinite; }
.ps-h .sl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps.k-think .ps-h .sl { font-style: italic; }
.ps-h .st { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.ps-b { padding: 2px 6px 8px; color: var(--muted); font-size: 12.5px; }
.ps-b .sls { margin: 0 0 6px; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.ps-b .sls li { overflow-wrap: anywhere; }
.ps-b .sls a { color: var(--blue); text-decoration: none; }
.ps-b .sls a:hover { text-decoration: underline; }
.ps-b .stx { max-height: 320px; overflow: auto; white-space: pre-wrap; line-height: 1.6; background: var(--hover); border-radius: 8px; padding: 8px 10px; }
.msg.assistant .proc ~ .stream-status { display: none; }

/* ---------- 대화 폴더 · 휴지통 · 공유 (2026-09-27) ---------- */
.fold { margin: 1px 0; }
.fold-h { display: flex; align-items: center; gap: 6px; margin: 1px 8px; padding: 6px 8px; border-radius: 9px; color: var(--side-fg); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; border: 1.5px dashed transparent; }
.fold-h:hover { background: var(--side-hover); }
.fold-h .chev { display: inline-flex; color: var(--side-muted); transition: transform .12s; }
.fold.open .fold-h .chev { transform: rotate(90deg); }
.fold-h .fn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-h .fo { color: var(--side-muted); font-weight: 400; font-size: 11px; }
.fold-h .fc { color: var(--side-muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.fold-h .more { opacity: 0; border: 0; background: transparent; color: var(--side-muted); padding: 2px; border-radius: 6px; cursor: pointer; }
.fold-h:hover .more { opacity: 1; }
.fold-b { margin-left: 12px; border-left: 1px solid var(--side-hover); }
.fold-inp { width: 100%; font: inherit; font-weight: 600; color: var(--side-fg); background: var(--side-active); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; outline: none; }
.fold-h.drop, [data-drop-out].drop { border-color: var(--accent); background: var(--accent-soft); }
body.side-dragging [data-drop-out] { outline: 1.5px dashed var(--side-muted); outline-offset: -3px; border-radius: 8px; }
body.side-dragging [data-drop-out]::after { content: "여기에 놓으면 폴더에서 빼요"; font-size: 11px; color: var(--side-muted); }
.side-item[draggable="true"] { -webkit-user-drag: element; }
.side-item .vis { display: inline-flex; color: var(--side-muted); flex: none; }
.fold-h .vis { display: inline-flex; color: var(--side-muted); }
.typing-mini { display: inline-flex; gap: 2px; align-items: center; flex: none; padding: 0 2px; }
.typing-mini i { width: 4px; height: 4px; border-radius: 50%; background: var(--side-muted); animation: tdot 1.2s infinite ease-in-out; }
.typing-mini i:nth-child(2) { animation-delay: .15s; } .typing-mini i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.share-person.away { opacity: .45; filter: grayscale(1); }   /* 접속 안 한 사람: 글자 없이 흐리게 */
.popover .opt-h { padding: 6px 10px 2px; font-size: 11.5px; color: var(--muted); }
.popover .opt.sub { padding-top: 6px; padding-bottom: 6px; padding-left: 18px; font-size: 13px; }
/* 오른쪽 위 공유 버튼의 링크 상태 점 */
#btn-share { position: relative; }
.share-dot { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.share-dot.on { background: var(--ok); } .share-dot.wait { background: #d6a23a; } .share-dot.off { background: var(--faint); }
/* 공유 창 */
.share-opts { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.share-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.share-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.share-opt input { margin-top: 3px; }
.share-people .lbl { font-size: 12px; color: var(--muted); margin: 6px 0; }
.share-people { display: flex; flex-wrap: wrap; gap: 6px; }
.share-people .lbl { width: 100%; }
.share-person { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; }
.share-person:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); opacity: 1; filter: none; }
.share-person input { display: none; }
/* 휴지통 창 */
/* 휴지통 (2026-09-29) — 세로로 넉넉한 창, 선택 줄, 항목마다 완전 삭제 날짜 */
.modal.trash-modal { width: min(680px, 100%); height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; padding: 22px 24px 18px; }
.trash-modal .tr-head { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; }
.trash-modal .tr-head .sub { flex: 1; min-width: 0; line-height: 1.5; }
.tr-days { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); white-space: nowrap; }
.tr-days select.inp { width: auto; min-height: 32px; padding: 4px 28px 4px 10px; }
.tr-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--elev); }
.tr-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); cursor: pointer; user-select: none; }
.tr-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
@media (max-width: 600px) {           /* 폰: '전체 선택'이 한 줄, 단추는 다음 줄 (한 글자씩 세로로 서고 '비우기'가 밖으로 나갔다) */
  .tr-bar { flex-wrap: wrap; row-gap: 8px; }
  .tr-all { flex: 1 1 100%; white-space: nowrap; }
  .tr-bar .grow, .tr-bar .tr-sep { display: none; }
}
.tr-list { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tr-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.tr-item:hover { background: var(--hover); }
.tr-item.on { border-color: var(--accent); background: var(--accent-soft); }
.tr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tr-main .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-when { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--fg2); white-space: nowrap; }
.tr-when small { color: var(--faint); font-size: 11px; }
.tr-when.soon, .tr-when.soon small { color: var(--err); }
.tr-acts { display: inline-flex; align-items: center; gap: 4px; }
.tr-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 40px 0; }
.tr-empty svg { color: var(--faint); }
.tr-empty b { color: var(--fg2); font-size: 15px; }
.tr-empty span { font-size: 13px; }
@media (max-width: 600px) {
  .trash-modal .tr-head { flex-direction: column; align-items: flex-start; }
  .tr-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tr-item .tr-when { display: none; }
}
/* 되돌리기 버튼이 있는 알림 */
#toast.has-act { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast-act { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 4px; white-space: nowrap; flex: none; }
@media (max-width: 600px) { #toast.has-act { width: calc(100vw - 32px); justify-content: space-between; } #toast.has-act span { line-height: 1.45; } }   /* 폰: 글이 한 글자씩 세로로 서지 않게 가로로 넓힌다 */
.mem-list { max-height: 260px; overflow: auto; }
.popover a.opt { text-decoration: none; color: inherit; }
/* 내려받기 목록 (dlmenu.js, 대표 10/9): 형식 표 + 받을 파일 이름. 보관함 창(78) 안에서 열어도 그 위에 */
.popover.dl-pop { z-index: 79; min-width: 260px; }
.popover.dl-pop .opt { align-items: center; color: inherit; }
.popover.dl-pop .opt .ext { min-width: 54px; white-space: nowrap; }
.popover.dl-pop .opt .d { overflow-wrap: anywhere; }
.popover.dl-pop .dl-left { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px 6px; color: var(--warn); font-size: 13px; line-height: 1.45; }
.popover.dl-pop .dl-left svg { flex: none; margin-top: 2px; }
.popover.dl-pop .dl-left small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* 결과 카드 맨 위 '자격 확인이 남았어요' (대표 10/24, 받기 목록과 같은 꼴) */
.card .elig-left { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 10px; color: var(--warn); font-size: 13px; line-height: 1.45; }
.card .elig-left svg { flex: none; margin-top: 2px; }
.card .elig-left small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* 작업 채팅 답 아래 할 수 있는 일 단추 — 같은 줄 같은 높이 (agent/ask) */
.msg .ag-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg .ag-acts .btn { min-height: 32px; }
.card.job .dl-why { margin-top: 6px; line-height: 1.5; }   /* 자격으로 멈춘 서류: 회색 '내려받기' 아래 까닭 한 줄 (10/20 PM 93, dlmenu.js) */
.popover.dl-pop [data-dl-ask], .popover.dl-pop [data-dl-cells] { border-bottom: 1px solid var(--border); }
/* 알림 묶음은 형식 단추 아래 (EPIC 10/31 — 형식 단추가 맨 위에 늘 보이게, dlmenu.js) */
.popover.dl-pop .dl-warn { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 2px; }
.popover.dl-pop .dl-warn > :last-child { border-bottom: 0; }
/* 회의 중 파일 (검토 → 회의록에 넣기) */
.mrfiles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.mrfiles[hidden] { display: none; }
.mrfile { flex: none; width: 118px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; font-size: 11.5px; background: var(--elev); position: relative; }
.mrfile.attached { border-color: var(--ok); }
.mrfile.removed { opacity: .45; filter: grayscale(1); }
.mrfile .mft { height: 64px; border-radius: 7px; background: var(--hover); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; color: var(--muted); }
.mrfile .mft img { width: 100%; height: 100%; object-fit: cover; }
.mrfile .mft { position: relative; flex-direction: column; gap: 2px; }
.mrfile .mft .ext { font: 800 9.5px/1 var(--font); letter-spacing: .04em; color: var(--muted); }
.mrfile.up .mfs { color: var(--blue); }
.mrfile .mfn { margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mrfile .mfs { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrfile.attached .mfs { color: var(--ok); }
.mrfile .mfa { display: flex; gap: 2px; margin-top: 4px; }
.mrfile .mfa button, .mrfile .mfa a { flex: 1; display: inline-flex; justify-content: center; padding: 3px 0; border: 0; border-radius: 6px; background: transparent; color: var(--fg2); cursor: pointer; }
.mrfile .mfa button:hover, .mrfile .mfa a:hover { background: var(--hover); }
.mrnote .icon-btn { width: 30px; height: 30px; flex: none; }
#mrec-dock.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }
.mfp { margin-top: 10px; max-height: 70vh; overflow: auto; text-align: center; background: var(--hover); border-radius: 10px; }
.mfp-doc { width: 100%; height: 68vh; border: 0; background: #fff; }
/* 답 모양 (2026-09-27): 첫 소제목 위 여백 없음, 소제목 아래 옅은 줄, 목록 표시 뚜렷하게, 중첩 목록은 촘촘히 */
.md > .md-h:first-child { margin-top: 0; }
.md h3.md-h, .md h4.md-h { padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-top: 1.3em; }
.md ul { list-style: disc; } .md ul ul { list-style: circle; margin: .15em 0 .3em; } .md ul ul ul { list-style: square; }
.md ol { list-style: decimal; } .md ol ul, .md ul ol { margin: .15em 0 .3em; }
.md li::marker { color: var(--faint); font-weight: 600; }
.md li > b:first-child { color: var(--fg); }
/* 한 줄 카드 + 자세히 (개발용 정보 접기) */
.card.compact { padding-top: 10px; padding-bottom: 10px; }
.card.compact h4 { margin-bottom: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card.compact h4 .sub { font-weight: 400; font-size: 12.5px; }
.card-more { margin-top: 6px; }
.card-more summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
.card-more summary::-webkit-details-marker { display: none; }
.card-more summary::before { content: "▸ "; } .card-more[open] summary::before { content: "▾ "; }
.card-more .kv { margin-top: 6px; }
/* 설정 탭 */
.set-tabs { display: flex; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid var(--border); position: sticky; top: -1px; background: var(--card, var(--elev)); z-index: 2; padding-top: 4px; }
.set-tabs button { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.set-tabs button:hover { color: var(--fg); }
.set-tabs button.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.set-sec[hidden] { display: none !important; }
/* 좁은 화면(휴대폰): 입력창 아래 줄이 넘쳐 보내기·마이크 버튼이 화면 밖으로 밀리던 문제 — 칩은 줄이고 버튼은 늘 보이게 (2026-09-27) */
.box-row > .chip { min-width: 0; flex: 0 1 auto; }
.box-row > .icon-btn, .box-row > .send { flex: none; }
@media (max-width: 560px) {
  #chip-model { max-width: 132px; }
  #chip-web #web-label { display: none; }
  #chip-web { padding: 0 9px; }
}
/* ---------- 휴대폰 · 터치 (2026-09-27) ---------- */
/* 모든 창 오른쪽 위 닫기 */
.modal { position: relative; }
/* 모든 창 오른쪽 위에 X (2026-09-29 대표: "창은 모두 우측 끝 상단에 x 버튼") — 컴퓨터·휴대폰 모두 */
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-grid; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.modal-x:hover { background: var(--hover); color: var(--fg); }
.modal > h3:first-of-type { padding-right: 40px; }
.phone-only { display: none; }
.pv-pages { display: flex; flex-direction: column; gap: 10px; }
/* aspect-ratio: 그림이 오기 전에도 A4 높이를 잡아 둔다 — 높이가 0 이면 '나중에 받기(lazy)'가 모든 쪽을 화면 안으로 보고 한꺼번에 받았다
   (느린 점검 10/8: 휴대폰에서 69쪽 PDF 그림 11.7MB). 그림이 오면 그 그림의 비율로 */
.pv-page { display: block; width: 100%; height: auto; aspect-ratio: auto 210 / 297; background: #fff; border-radius: 6px; box-shadow: var(--shadow-s); }

/* 문의 동그라미 (10/20 대표 '오른쪽 끝 동그라미', 손님 화면 — app.js): 아래 입력칸과 겹치면 --help-lift 만큼 위로.
   요금 창 덮개(90) 위에 떠서 /pricing 에서도 누를 수 있고, 열린 창 상자와 겹치면 app.js 가 숨긴다.
   누르면 뜨는 상담 팝업(Chatwoot)은 동그라미 바로 위에 — 동그라미가 올라가면 팝업도 같이 (넓은 화면, 휴대폰은 화면 전체).
   --help-right: 오른쪽에 문서 창·미리보기가 열리면 대화 칸 오른쪽 끝으로 (EIDOS R29 10/20, EPIC 과 같게 — 문서 창 '맞춤' 위에 떴다)
   팝업 크기는 컴퓨터(가로 768 이상)만 380x560 을 .88배로 줄여 그린다 — 안의 글·단추도 함께 작게 (10/21 CM, 대표 "-x랑 너무 떨어져있고 너무 큰데
   채팅창도 그렇고" · 앞서 준 360x520 을 바꿈, CM 조각 채팅_팝업_최소화.js 와 같게). 오른쪽 아래를 기준으로 줄여 동그라미 위 자리 그대로.
   동그라미·설정 '고객센터' 어느 쪽으로 열어도 같은 팝업, 폰은 화면 전체 그대로.
   높이 한도는 둘 중 작은 쪽: 화면 높이 - 40px (CM) · 동그라미 위 자리 (입력칸 따라 올라가도 화면 위로 넘지 않게, 10/20) */
@media only screen and (min-width: 667px) {
  html .woot-widget-holder { bottom: calc(88px + var(--help-lift, 0px)) !important; right: calc(16px + var(--help-right, 0px)) !important;
    max-height: min(calc(100vh - 40px), calc(100% - 108px - var(--help-lift, 0px))) !important; }
}
/* 10/21 03시 대표(CM 창) "고객상담창 너무 커 줄이고 가로로 좀더 얇게해": 380x560 → 340x520 (.88배로 보이는 크기 약 299x458) */
@media only screen and (min-width: 768px) {
  html .woot-widget-holder { width: 340px !important; height: 520px !important; transform: scale(.88) !important; transform-origin: bottom right; }
}
.help-fab { position: fixed; right: calc(16px + var(--help-right, 0px)); bottom: calc(16px + var(--help-lift, 0px)); z-index: 91; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(11,19,40,.22); text-decoration: none;
  transition: bottom .15s ease, filter .15s; }
.help-fab:hover { filter: brightness(1.08); }
.help-fab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; }
.help-fab[hidden] { display: none; }
/* 고객센터 답 알림 (대표 10/24 "고객문의에 답변가게 알림가게 해줘~", EPIC 과 같은 꼴): 안 본 상담원 답 수는 동그라미 오른쪽 위 빨간 숫자,
   설정 '고객센터' 탭과 '상담 채팅' 줄은 글 오른쪽 빨간 점 (app.js html.cs-new) */
.help-n { display: none; position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px;
  box-sizing: border-box; background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 16px; text-align: center; font-style: normal; }
html.cs-new .help-n { display: block; }
html.cs-new .setx-nav [data-sp="help"] span::after, html.cs-new .st-help-row .set-rt b::after { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: 7px; border-radius: 50%; background: #e5484d; vertical-align: middle; position: relative; top: -1px; }
html.help-crowd #attach-list { padding-right: 72px; }   /* 동그라미가 칩 옆에 멈췄을 때 칩 X 와 띄움 (app.js help-crowd, 10/20 PM) */
/* 상담 팝업 최소화 (대표 10/20 "x버튼 옆에", CM 조각 · EPIC 과 같은 꼴): '–' 는 팝업 머리줄 X 왼쪽 (app.js 가 자리를 잡음, 팝업보다 위),
   접으면 동그라미 자리에 'EDIT 고객상담' 막대 — 세로 가운데를 동그라미에 맞추고, 입력칸에 닿으면 --help-bar-lift 만큼 위로 */
.help-min { position: fixed; z-index: 2147483647; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: #3c4858; display: grid; place-items: center; cursor: pointer; }
.help-min:hover { background: rgba(0,0,0,.06); }
.help-min:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.help-min[hidden] { display: none; }
@media only screen and (min-width: 768px) {                /* 컴퓨터: 줄여 그린 팝업의 X 와 같은 크기 (폰은 28, 10/21 CM) */
  .help-min { width: 22px; height: 22px; }
  .help-min svg { width: 16px; height: 16px; }
}
.help-bar { position: fixed; right: calc(16px + var(--help-right, 0px)); bottom: calc(20px + var(--help-bar-lift, 0px)); z-index: 92; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; max-width: calc(100vw - 32px); padding: 0 16px; border: 0; border-radius: 22px; background: var(--accent); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 6px 20px rgba(11,19,40,.2); cursor: pointer;
  transition: bottom .15s ease, filter .15s; }
.help-bar:hover { filter: brightness(1.08); }
.help-bar:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; }
.help-bar b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--accent); font-size: 12px; line-height: 20px;
  text-align: center; box-sizing: border-box; }
.help-bar[hidden], .help-bar b[hidden] { display: none; }
/* 상담 끝내기 (대표 10/21 "x누르면 상담을 종료할까요?", CM 조각과 같은 꼴): Chatwoot X 위의 보이지 않는 단추와, 팝업을 덮는 물음 막 */
.help-x { position: fixed; z-index: 2147483647; padding: 0; border: 0; background: transparent; cursor: pointer; }
.help-x[hidden] { display: none; }
.help-end { position: fixed; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: rgba(16,24,40,.32); border-radius: 16px; }
.help-end[hidden] { display: none; }
@media (max-width: 767px) { .help-end { border-radius: 0; } }
.help-end > div { width: calc(100% - 48px); max-width: 260px; padding: 20px 16px 16px; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); color: #1f2937; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; }
.help-end p { margin: 0 0 16px; }
.help-end span { display: flex; gap: 8px; }
.help-end button { flex: 1; height: 40px; border: 0; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: #f2f4f7; color: #344054; }
.help-end button[data-end="yes"] { background: var(--accent); color: #fff; }
.help-end button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* 휴대폰 위쪽 줄: 자주 안 쓰는 아이콘 넷은 '더보기' 안으로 */
@media (max-width: 600px) {
  .top-actions .phone-hide { display: none; }
  .top-actions .phone-only { display: inline-grid; }
}
/* 넓은 화면이라도 옆 목록·작업 창을 함께 열어 가운데가 좁으면 휴대폰처럼: 아이콘 넷은 '더보기'로, 제목은 늘 보이게, 입력 줄 칩은 줄여서
   (손님 점검 10/8 L15: 제목이 사라지고 모델 칩이 'DESTI…' · 관리자 점검: 1600 에서 제목이 '20…'만) */
.topbar { container: topbar / inline-size; }
.box-row { container: boxrow / inline-size; }
@container topbar (max-width: 640px) {
  .top-actions .phone-hide { display: none; }
  .top-actions .phone-only { display: inline-grid; }
  .topbar .title { min-width: 72px; }
}
@container boxrow (max-width: 520px) {
  #chip-web #web-label { display: none; }
  #chip-web { padding: 0 9px; }
}
.set-sec h4 { flex-wrap: wrap; row-gap: 4px; }
/* 체크 칸 옆 긴 설명이 좁은 화면에서 체크 칸 아래로 떨어지지 않게 */
label.row > input[type=checkbox] + span { flex: 1 1 0; min-width: 0; }
/* 마우스 없는 기기: 마우스를 올려야 보이던 '더보기'를 늘 보이게, 단축키 표시는 빼고, 길게 누를 때 글자 선택·확대 메뉴가 뜨지 않게 */
@media (hover: none) {
  .side-item .more, .fold-h .more { opacity: 1; }
  .side-item .more { width: 22px; }
  .side-search kbd { display: none; }
  .msg .tools { opacity: 1; }                                   /* 답 아래 복사·다시 답하기: 손가락으로 누를 수 있게 늘 보이고 크게 */
  .msg .tools .icon-btn { width: 36px; height: 36px; }
  .pvh .icon-btn { width: 38px; height: 38px; }
  .proc-h { min-height: 34px; }
  #mrec-dock .icon-btn, #mrec-screen .icon-btn { width: 34px; height: 34px; }   /* 회의 창 제목 줄·파일 버튼 */
  .side-item, .fold-h { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대한다 → 터치 기기의 입력칸은 16px */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select { font-size: 16px !important; }
  .btn.small { min-height: 34px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
}
/* 휴대폰: 아이폰 아래 막대·노치를 피하고, 누르기 쉬운 크기로 */
@media (max-width: 860px) {
  .topbar { padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); gap: 6px; min-height: 50px; }
  .composer { padding: 6px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .composer .foot { display: none; }
  .app.side-mobile-open .main::after { content: ""; position: fixed; inset: 0; background: rgba(20,18,14,.32); z-index: 39; }   /* 사이드바 뒤 흐리게 · 누르면 닫힘 */
  .pv-body { padding: 10px; }
  /* 작업 창 조작 줄: 옆으로 밀기는 오른쪽이 잘린 것처럼 보였다 (EPIC 재점검 10/7: 캘리그래피 넣기·제출용 받기) — 다음 줄로 */
  .transport { flex-wrap: wrap; gap: 6px; margin: 6px 0; }
  .transport .btn, .transport label { flex: none; }
  /* 작업 창 머리: 영어 'Paused by …' · '#3 in line' 이 … 로 잘리고 닫기 단추가 화면 밖으로 밀렸다 (10/3 점검, 390px).
     닫기는 오른쪽 위에 두고, 넘치는 글은 다음 줄로 */
  .dock-title-row { flex-wrap: wrap; row-gap: 0; position: relative; padding-right: 38px; }
  .dock-title-row > b { line-height: 34px; }                                      /* 첫 줄 높이 = 닫기 단추 높이: 줄이 늘어도 닫기와 같은 줄에 */
  .dock-title-row > .sub { flex: none; max-width: 100%; }
  .dock-title-row > #dock-close { position: absolute; right: 0; top: 0; }
  /* 작업 창 탭·원본 비교 거르기: 옆으로 밀면 '버전'·'Versions'·'Flagged 0'이 잘린 것처럼 보였다 (EPIC 재점검 10/7) — 다음 줄로 */
  .dock-tabs, #cmp-filter { display: flex; flex-wrap: wrap; max-width: 100%; overflow: visible; row-gap: 4px; }
  #cmp-filter button { flex: none; white-space: nowrap; }
  .viewbar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px 0; }                        /* 원본 비교·버전 줄도 다음 줄로 */
  .dock-tabs button { flex: none; white-space: nowrap; padding: 6px 10px; }
  /* 거르기 줄도 같은 너비 칸으로 — 가장 긴 단추가 칸 너비 (panes.js fitRow, 대표 10/23 "오와열") */
  #cmp-filter, #cells-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--cell, 96px), 100%), 1fr)); gap: 2px; overflow: visible; }
  #cmp-filter.measuring, #cells-filter.measuring { display: flex; flex-wrap: nowrap; }
  #cmp-filter > button, #cells-filter > button { justify-content: center; min-width: 0; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }            /* 거르기 단추(전체·비어 있음…)도 한 줄로 옆으로 밀기 */
  .seg button { flex: none; white-space: nowrap; }
  .side { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .dock-head { padding-top: max(10px, env(safe-area-inset-top)); }
  .app.pv-open .pv { padding-top: env(safe-area-inset-top); }
  .dock-chat { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .side-item { padding: 10px 10px; font-size: 14.5px; }
  .msg-files { max-width: 100%; }                                   /* 휴대폰: 문서 카드 두 장이 한 줄에 */
  .mfile.doc { width: 150px; } .mfile.doc .pg { height: 104px; }
  .msg-files .mfile.img img { height: 138px; max-width: 220px; }
  .side-item .more, .fold-h .more { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; margin: -6px -4px -6px 0; }
  .popover { max-width: calc(100vw - 16px); min-width: min(240px, calc(100vw - 16px)); }
  .popover .opt { padding: 11px 12px; }
  .modal-bg { padding: 10px; align-items: flex-end; }
  .modal { max-height: calc(100dvh - 20px - env(safe-area-inset-top)); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .set-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .set-tabs button { white-space: nowrap; padding: 8px 12px; flex: none; }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
}
@media (max-width: 400px) {
  .top-actions .icon-btn { width: 32px; }
  .topbar .title { font-size: 13.5px; }
}
/* ---------- 폰 다듬기 2 (10/20, PM M4·M5·L3·L5·L8 · EPIC N-7) — 860px 이하만, PC 는 그대로 ---------- */
@media (max-width: 860px) {
  /* N-7: 공고로 시작한 대화는 위 막대에 그 공고 제목·마감 칩이 있다 — 바로 아래 띠가 다른 공고를 돌려 헷갈렸다 (app.js renderDeadline) */
  html.conv-notice #nt-strip { display: none; }
  /* M5: 자판이 떠 있는 동안 (phone.js kb-up) 입력창·보내기 단추가 자판 위에 남게 위쪽 것을 접는다 — 첨부 뒤 자판이 뜨면 보내기 단추가 가려지고
     '어떤 서류를 채울까요?'가 양식 안내 카드 뒤에 겹쳤다. 공고 띠·첫 화면 제목은 접고, 양식 안내는 한 줄, 붙인 파일도 한 줄(옆으로 밀기) */
  html.kb-up #nt-strip, html.kb-up .hello-mode .hello { display: none; }
  html.kb-up .form-tip { flex-wrap: nowrap; gap: 6px; padding: 4px 4px 4px 10px; }
  html.kb-up .form-tip > svg, html.kb-up .form-tip [data-act=fill-fields] { display: none; }
  html.kb-up .form-tip .t { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.kb-up .form-tip .t b { word-break: normal; }
  html.kb-up .attach-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.kb-up .attach-list .att { flex: none; }
  html.kb-up .box textarea { max-height: calc(var(--vvh, 100dvh) * .28); }        /* 아이폰은 창이 그대로라 vh 가 아니라 보이는 높이 (phone.js --vvh) */
  /* 10/20 PH3 M5: 줄어든 칸은 줄 높이의 배수로 (위아래 여백 10px) — 쓰는 끝 줄을 보이면(phone.js keepCaret) 맨 윗줄이 반쯤 잘려 보였다 */
  @supports (height: round(down, 10px, 1lh)) { html.kb-up .box textarea { max-height: calc(round(down, var(--vvh, 100dvh) * .28 - 10px, 1lh) + 10px); } }
  html.kb-up .tray { max-height: calc(var(--vvh, 100dvh) * .34); }
  /* M4: 쓰기 전 상자 — 답을 적는 동안(자판)은 상자를 키우고 아래 입력창은 접는다 — 전엔 질문 하나만 보였다.
     (끝 줄을 상자 아래에 붙이는 것은 위 '쓰기 전 몇 가지' 규칙 — 10/21 EPIC 카드 꼴) */
  html.kb-up #tray:focus-within { max-height: calc(var(--vvh, 100dvh) - 110px); }
  html.kb-up .composer:has(#tray:focus-within) .box { display: none; }
  /* 10/20 PH3 (질문 모음 79 폰): 하나씩 답할 때(tray.js asking) 34vh 상자가 낮아 '비워 두기' 줄과 '직접 쓰기' 칸이 상자 안에서 잘렸다 (400x860 에서
     1/4·2/4 가 68px·21px 넘침). 답하는 동안은 상자를 화면의 절반 가까이까지 키우고, 직접 쓰기 줄은 쓰기 전 상자처럼 상자 아래에 붙인다
     (그래도 넘치는 작은 폰에서 선택지만 굴러가게). 여러 개 고르기('고른 것 넣기' 줄이 따로 붙는다)·짧은 값 경고가 뜬 때는 예전처럼 */
  html:not(.kb-up) #tray.asking { max-height: 48vh; max-height: 48dvh; }
  #tray.asking .tray-in { position: sticky; bottom: -6px; z-index: 1; margin: 4px -8px -6px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border2); border-radius: 0 0 var(--r) var(--r); }
  #tray.asking:has(.tray-multi-bar) .tray-in, #tray.asking .tray-in:has(+ .tray-warn) { position: static; margin: 0; padding: 6px 4px 2px; background: none; border: 0; }
  /* L3: '읽은 내용' 표 — 칸 이름 | 값 두 칸, 파일 이름은 값 아래 작은 줄. 낱말 가운데서 꺾지 않고('사업자/등록번/호'), 값은 보통 글꼴 */
  table.mini.ingest-kv, table.mini.ingest-kv tbody { display: block; }
  table.mini.ingest-kv tr { display: grid; grid-template-columns: minmax(6em, 36%) minmax(0, 1fr); column-gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  table.mini.ingest-kv td { padding: 0 4px; border: 0; word-break: keep-all; overflow-wrap: anywhere; }
  table.mini.ingest-kv td.mono { font-family: inherit; font-size: 13px; }
  table.mini.ingest-kv td.sub { grid-column: 2; font-size: 11.5px; }
  /* L5: 손가락으로 누를 자리 — 보이는 모양·띠 두께·줄 높이는 그대로 두고 누르는 상자만 키운다 */
  #nt-strip .nt-x { width: 40px; height: 40px; margin: -7px -4px -7px 0; padding: 0; display: inline-grid; place-items: center; }
  #nt-strip .nt-all { min-height: 40px; margin: -7px 0; }
  #tray .tray-x { width: 40px; height: 40px; margin: -10px -8px -10px 0; justify-content: center; align-items: center; }
  .np-jump { position: relative; }
  .np-jump::after { content: ""; position: absolute; inset: -12px -4px; }              /* 글 줄 안의 '2쪽' — 줄 높이는 그대로, 위아래로 누르는 자리 */
  .np-toc .np-jump::after { content: none; }                                           /* 목차 줄은 줄 전체가 단추 */
  /* L8 · L5: 확대 막대가 종이 위에 떠 본문을 덮었다 → 문서 아래 한 줄 (단추는 손가락 크기). 종이는 창 폭에 맞춰 오른쪽이 8px 잘렸다
     (맞춤 비율이 창 폭 - 8px 인데 문서 칸 좌우 여백은 32px) → 폰은 좌우 여백 4px */
  #doc-view.pane { padding-left: 4px; padding-right: 4px; }
  .dock:not(.idle) #doc-view.pane { bottom: 48px; }
  #doc-view .doc-note { margin: 0 8px 8px; }
  #dock-body .dz-bar { left: 0; right: 0; bottom: 0; height: 48px; padding: 0 6px; gap: 2px; justify-content: flex-end; border-radius: 0; background: var(--surface); color: var(--fg); border-top: 1px solid var(--border); }
  #dock-body .dz-bar button { min-width: 44px; height: 44px; color: var(--fg); font-size: 15px; }
  #dock-body .dz-bar span { min-width: 48px; }
}
/* 따라가기: 사람이 문서를 움직이는 동안 잠시 멈춤 → 다시 따라가기 버튼 */
.follow-pill { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--fg); color: var(--bg); font: inherit; font-size: 13px; box-shadow: var(--shadow-l); cursor: pointer; }
.follow-pill[hidden] { display: none; }
/* 파일 미리보기 (문서 원래 모양 · 영상 첫 장면 · 재생용 변환) */
.pv-body iframe.pv-view { height: calc(100% - 8px); min-height: 70vh; background: var(--surface); border: 0; }
.pv-play { background: #000; border-radius: 10px; overflow: hidden; position: relative; }
.pv-play.aud { background: transparent; }
.pv-play video { display: block; width: 100%; max-height: 72vh; background: #000; }
.pv-conv { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; color: #fff; background: rgba(0,0,0,.72); }
.pv-play.aud .pv-conv { color: var(--fg2); background: var(--hover); border-radius: 10px; margin-top: 8px; }
.pv-read { margin-top: 10px; } .pv-read summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 0; }
.mfp .pv-play video { max-height: 60vh; } .mfp iframe.pv-view { width: 100%; height: 65vh; border: 1px solid var(--border); border-radius: 10px; }
.mfile.vid { position: relative; }
.mfile.vid .vbadge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.mfile.vid .vhover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; pointer-events: none; }
.mfile.vid.playing .vhover { opacity: 1; }
.mfp img.pv-img { max-width: 100%; max-height: 68vh; display: block; margin: 0 auto; }
.pv-line { margin-top: 8px; } .pv-read .kv { margin: 6px 0 10px; }
/* 문서 창: 원래 비율로 그린 쪽을 한꺼번에 줄이고 키운다 (두 손가락 · Ctrl+휠 · 아래 단추) */
.dzw { width: max-content; margin: 0 auto; } .dzw.pop { animation: dzpop .18s ease-out; }
@keyframes dzpop { from { transform: scale(.97); } to { transform: none; } }
#doc-view { touch-action: pan-x pan-y; }
.dz-bar, .pfz-bar { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 999px; background: rgba(28,27,25,.78); color: #fff; font-size: 12px; user-select: none; }
.dz-bar button, .pfz-bar button { border: 0; background: transparent; color: #fff; font: inherit; min-width: 30px; height: 28px; border-radius: 999px; cursor: pointer; }
.dz-bar span, .pfz-bar span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
/* 쪽 그림 목록의 확대·축소 (zoomer.js pages): 쪽마다 폭, 넓으면 가로로 굴린다 · 단추 줄은 굴리는 칸 밖 모서리에 */
.pfz-pages { touch-action: pan-x pan-y; }
.pfz-pages.pfz-pages > * { width: var(--pfz-w, 100%); max-width: none; margin-left: auto; margin-right: auto; flex: none; }
.pfz-host { position: relative; }
.np-viewer > .pfz-bar { right: 24px; }                                           /* 공고문 PDF: 쪽 칸의 스크롤 막대를 비켜서 */
.pfz-bar.pfz-sticky { position: sticky; bottom: 12px; margin: 8px 0 0 auto; width: max-content; }
.dock-body:has(#doc-view:not(.active)) .dz-bar { display: none; }
#doc-view:not(:has(.dz)) ~ .dz-bar { display: none; }      /* 아직 문서가 없으면 (자료 읽는 중) 확대 막대도 없음 — 10/25 폰 '5%' (:has 는 겹쳐 쓸 수 없다) */
table.hw td .ct .pg { min-height: 1em; }

/* ---------- 실적·사실 · 표준 문안 (2026-09-29 대표: "산만해 · 정돈") ---------- */
.modal.kb-modal { width: min(860px, 100%); height: min(780px, calc(100dvh - 32px)); display: flex; flex-direction: column; padding: 22px 24px 0; overflow: hidden; }
.modal.kb-modal.kb-edit { height: auto; padding-bottom: 20px; overflow: auto; }
.kb-intro { color: var(--fg2); font-size: 13px; line-height: 1.6; margin: -4px 0 14px; }
.kb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.kb-bar .vt-search { flex: 1 1 220px; }
.kb-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kb-chips .chip { height: 32px; }
.kb-chips .chip em { font-style: normal; color: var(--faint); margin-left: 2px; font-size: 11.5px; }
.kb-chips .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.kb-chips .chip.on em { color: var(--accent); }
.kb-bar .btn.primary { height: 38px; }
.kb-list { flex: 1; min-height: 0; overflow: auto; margin: 0 -24px; padding: 6px 24px 24px; }
.kb-g { margin-top: 16px; }
.kb-g > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.kb-g > header svg { color: var(--accent); }
.kb-g > header b { font-weight: 700; }
.kb-g > header em { font-style: normal; color: var(--faint); font-size: 12px; }
.kb-t { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.kb-it { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 6px; transition: border-color .12s, box-shadow .12s; }
.kb-it:hover { border-color: var(--border2); box-shadow: 0 4px 14px rgba(20,20,30,.06); }
.kb-it.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }     /* 자주 쓰는 첨부: 보관함에서 고른 파일 */
.kb-body { flex: 1; min-width: 0; }
.kb-body p { margin: 0; line-height: 1.6; font-size: 14px; color: var(--fg); word-break: keep-all; overflow-wrap: anywhere; }
.kb-title { display: block; font-size: 13.5px; margin-bottom: 3px; }
.kb-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg2) !important; font-size: 13px !important; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kb-meta:empty { display: none; }
.kb-date, .kb-pn, .kb-no { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; border-radius: 6px; padding: 2px 7px; }
.kb-date { color: var(--muted); background: var(--hover); }
.kb-pn { color: var(--fg2); background: var(--blue-soft); }
.kb-no { color: var(--err); background: var(--err-soft); }
.kb-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.kb-it:hover .kb-acts, .kb-it:focus-within .kb-acts { opacity: 1; }
.kb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.kb-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg2); font-weight: 600; }
.kb-form label small { font-weight: 400; color: var(--faint); margin-left: 4px; }
.kb-form label.wide { grid-column: 1 / -1; }
.kb-form textarea.inp { resize: vertical; line-height: 1.6; }
.kb-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 600px), (hover: none) {
  .kb-acts { opacity: 1; }
  .kb-form { grid-template-columns: 1fr; }
}

/* ---------- 설정 > AI 모델 (2026-09-29 대표: "체크박스가 머냐 · UI/UX·레이아웃·글꼴") ---------- */
#st-ai .ai-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 4px 18px 16px; margin-top: 14px; }
#st-ai .ai-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; padding: 14px 0 6px; letter-spacing: -.1px; }
#st-ai .ai-h small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
#st-ai .ai-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
#st-ai .ai-row:first-of-type { border-top: 0; }
#st-ai .ai-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg2); }
#st-ai .ai-k svg { color: var(--muted); }
#st-ai .ai-v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; min-width: 0; }
#st-ai .ai-v small { flex-basis: 100%; color: var(--faint); font-size: 12px; }
#st-ai .ai-sw { color: var(--fg2); }
#st-ai .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
#st-ai .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
#st-ai .ai-chips { gap: 6px; }
#st-ai .ochip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--muted); }
#st-ai .ochip small { flex-basis: auto !important; font-size: 11px; color: var(--faint); }
#st-ai .ochip.up { color: var(--fg); }
#st-ai .ochip.up .dot { background: var(--ok); }
#st-ai .ochip.busy { color: var(--fg); }
#st-ai .ochip.busy .dot { background: var(--warn); }
#st-ai .ai-key { display: flex; gap: 6px; flex: 1; min-width: 0; }
#st-ai .ai-key .inp { flex: 1; min-width: 0; }
#st-ai .ai-grp { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 8px; display: flex; gap: 8px; align-items: baseline; }
#st-ai .ai-grp small { font-weight: 400; color: var(--faint); }
#st-ai .mpicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
#st-ai .mpick { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--elev); cursor: pointer; font: inherit; color: var(--fg); transition: border-color .12s, background .12s, box-shadow .12s; }
#st-ai .mpick:hover:not([disabled]) { border-color: var(--border2); }
#st-ai .mpick .ck { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border2); display: grid; place-items: center; flex: none; color: transparent; transition: all .12s; }
#st-ai .mpick.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
#st-ai .mpick.on .ck { background: var(--accent); border-color: var(--accent); color: #fff; }
#st-ai .mpick .mt { display: flex; flex-direction: column; min-width: 0; }
#st-ai .mpick .mt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-ai .mpick .mt small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-ai .mpick[disabled] { opacity: .5; cursor: not-allowed; }
#st-ai .ai-go { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
#st-ai .ai-go em { font-style: normal; opacity: .75; margin-left: 2px; }
#st-ai .ai-rec { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--fg); font-size: 13.5px; }
#st-ai .ai-rec svg { color: var(--accent); }
#st-ai .ai-res { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#st-ai .ai-r { display: grid; grid-template-columns: 26px minmax(0, 2fr) minmax(70px, 1fr) 56px 64px 52px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; }
#st-ai .ai-r:first-child { border-top: 0; }
#st-ai .ai-r .rk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hover2); font-size: 11.5px; font-weight: 700; color: var(--fg2); }
#st-ai .ai-r:first-child .rk { background: var(--accent); color: #fff; }
#st-ai .ai-r .nm { display: flex; flex-direction: column; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-ai .ai-r .nm small { font-weight: 400; color: var(--faint); font-size: 11px; }
#st-ai .sbar { height: 8px; border-radius: 99px; background: var(--hover2); overflow: hidden; }
#st-ai .sbar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
#st-ai .sbar i.mid { background: var(--warn); }
#st-ai .sbar i.low { background: var(--err); }
#st-ai .ai-r .sc { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
#st-ai .ai-r .sc small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 1px; }
#st-ai .ai-r .mt2 { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
#st-ai .ai-empty { margin-top: 12px; padding: 18px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--border2); border-radius: 12px; }
@media (max-width: 700px) {
  #st-ai .ai-row { grid-template-columns: 1fr; gap: 6px; }
  #st-ai .ai-r { grid-template-columns: 22px minmax(0, 1fr) 48px; }
  #st-ai .ai-r .sbar, #st-ai .ai-r .mt2 { display: none; }
}

/* ---------- 3D 보기 (viewer3d.js · three.js 기반 model-viewer) ---------- */
.m3d { position: relative; display: block; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #eef0f3 55%, #dfe3e9 100%); }
:root[data-theme="dark"] .m3d { background: radial-gradient(120% 90% at 50% 20%, #34363d 0%, #25272c 60%, #1c1d21 100%); }
.m3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; --progress-bar-color: var(--accent); background: transparent; }
.m3d:not(.m3d-ready)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.m3d.m3d-fail::after { content: attr(data-err); animation: none; border: 0; width: auto; height: auto; margin: 0; transform: translate(-50%, -50%); font-size: 12px; color: var(--muted); white-space: nowrap; }
.m3d-stage { width: 100%; height: min(62vh, 560px); border-radius: 14px; border: 1px solid var(--border); }
.m3d-stage.tall { height: 62vh; }
.m3d-mini { position: absolute !important; inset: 0; }
.m3d-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; }
.mfile.m3d-chip { width: 150px; height: 112px; padding: 0; position: relative; overflow: hidden; }
.mfile.m3d-chip .vbadge { position: absolute; left: 6px; bottom: 6px; z-index: 2; }
.m3d-thumb { position: relative; }
.m3d-thumb .m3d-mini { border-radius: inherit; }

/* ---------- 글머리 기호 모양 고르기 (문서 창 '기호 모양') ---------- */
.modal.sp-modal { width: min(980px, 100%); }
/* 모양 판 고르기 (10/15): 옆으로 넘기는 카드 — 폰은 한 장, 넓은 화면은 두 장 */
.modal.ly-modal { width: min(1060px, 100%); }
.ly-wrap { position: relative; }
.ly-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; overscroll-behavior-x: contain; scrollbar-width: none; }
.ly-track::-webkit-scrollbar { display: none; }
.ly-card { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); min-width: 0; }
.ly-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ly-head b { font-size: 15px; }
.ly-head em { font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--chip, rgba(0,0,0,.06)); color: var(--muted); }
.ly-head small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.ly-pages { display: flex; flex-direction: column; gap: 8px; max-height: min(64vh, 720px); overflow-y: auto; border-radius: 10px; background: var(--bg2, rgba(0,0,0,.03)); padding: 8px; }
.ly-pages img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(20,20,30,.16); background: #fff; }
.ly-wait { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 260px; color: var(--muted); font-size: 13px; }
.ly-pick { align-self: stretch; }
.ly-arrow { position: absolute; top: 45%; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface, #fff); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(20,20,30,.12); }
.ly-arrow.prev { left: -10px; } .ly-arrow.next { right: -10px; }
.ly-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.ly-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); cursor: pointer; }
.ly-dots i.on { background: var(--accent); }
.ly-foot { display: flex; justify-content: center; }
@media (max-width: 640px) { .ly-card { flex-basis: 88%; } .ly-arrow { display: none; } .ly-pages { max-height: 58vh; } }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sp-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); cursor: pointer; font: inherit; color: var(--fg); transition: border-color .12s, box-shadow .12s; }
.sp-card:hover { border-color: var(--border2); box-shadow: 0 6px 18px rgba(20,20,30,.08); }
.sp-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sp-card.busy { opacity: .6; pointer-events: none; }
.sp-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.sp-h em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 1px 8px; }
.sp-doc { display: block; background: #fff; color: #111; border: 1px solid #e3e3e3; border-radius: 8px; padding: 12px 14px; font-family: "Malgun Gothic", "맑은 고딕", "HCR Batang", sans-serif; font-size: 12.5px; line-height: 1.75; min-height: 150px; }
.sp-l { white-space: pre-wrap; padding-left: 1.25em; text-indent: -1.25em; }          /* 둘째 줄은 기호가 아니라 글자에 맞춰 */
.sp-l.r-i { padding-left: 1.95em; text-indent: -1.3em; }
.sp-l.r-d, .sp-l.r-n { padding-left: 2.6em; text-indent: -1em; }
.sp-gap { height: .7em; }

/* ---------- 손님 · 관리자 (2026-10-01, 디자인 시안 2 의 4번 화면) ---------- */
/* 위 막대의 모드 칩: 관리자는 파란 빛 점, 게스트는 빈 점 */
.mode-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border2); background: var(--elev); color: var(--fg); cursor: pointer; transition: border-color .25s; flex: none; }
.mode-chip:hover { border-color: var(--faint); }
.mode-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 10px var(--accent); }
.mode-chip.guest i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
/* 관리자 전환 창 */
.adm { display: flex; flex-direction: column; gap: 0; }
.adm-mark { width: 48px; height: 48px; display: block; }
.adm-mark .t { fill: #F3F5F9; stroke: var(--border2); } :root[data-theme="dark"] .adm-mark .t { fill: #E6E9F0; }
.adm-mark .s { fill: #0B0F14; }
.adm h3 { margin: 14px 0 6px; font-size: 17px; }
.adm p.sub { margin: 0; font-size: 13px; line-height: 1.6; }
.adm .inp { width: 100%; height: 46px; margin-top: 18px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--soft); outline: 0; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.adm .inp:focus { border-color: rgba(58,141,255,.6); box-shadow: 0 0 0 4px var(--accent-soft); }
.adm.bad .inp { border-color: var(--err); animation: shake .32s var(--soft-ease); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  table.hw td.lit::after, table.hw td, .quick button, .adm.bad .inp, table.hw td.touched { animation: none !important; }
  .btn::after { display: none; }
}
.adm-err { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--err); }
.adm-btns { justify-content: flex-end; margin-top: 8px; }
.adm-names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.adm-names:empty { display: none; }
.adm-names button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--border2); background: var(--elev); cursor: pointer; font-size: 13.5px; }
.adm-names button:hover { border-color: var(--faint); }
/* 설정 > 모드 (관리자 화면만) */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modes button { padding: 16px; border-radius: 14px; border: 1px solid var(--border2); background: var(--elev); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.modes button b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.modes button p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.modes button.on { border-color: var(--fg); box-shadow: 0 16px 40px -24px rgba(11,15,20,.35); }
/* 손님: 관리자 단추(내 자료·회의 녹음)·팀 목록·회의·접속 중은 아예 없다 (대표 10/3: 자물쇠도 보이지 않게. 서버도 막는다) */
body.is-guest [data-admin-only], body.is-guest #side-meetings, body.is-guest #side-live, body.is-guest #grp-team, body.is-guest #side-online { display: none !important; }
@media (max-width: 860px) { .modes { grid-template-columns: 1fr; } .mode-chip { padding: 0 10px; gap: 6px; font-size: 12px; } }
/* 바로가기 안내 (app.js makeShortcut): 이 기기의 줄을 진하게 */
.sc-how { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* 설정 첫 쪽의 바로가기 카드 (EPIC 설정과 같은 모양: 앱 아이콘 + 굵은 제목 + 한 줄 설명) */
.sc-card, .sg-card { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--card); color: var(--fg); text-align: left; cursor: pointer; font: inherit; transition: border-color .12s, background .12s; }
.sc-card:hover, .sg-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.sc-card:focus-visible, .sg-card:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.sc-card img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.sc-card span, .sg-card span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-card b, .sg-card b { font-size: 15px; }
.sc-card small, .sg-card small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.px > .sc-card, .px > .sg-card { max-width: 520px; }
.sc-row { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border2); font-size: 13px; color: var(--muted); }
.sc-row b { font-size: 13.5px; color: var(--fg2); }
.sc-row.on { border-color: var(--fg); color: var(--fg); }
.sc-row.on b { color: var(--fg); }
/* 위 막대의 언어 글자 (대표 10/3, EPIC·홈페이지와 같게): 칸 없이 글자만. 지금 언어는 밝게, 나머지는 흐리게 (i18n.js) */
.lang-letters { display: inline-flex; align-items: center; flex: none; }
.lang-letters[hidden] { display: none; }
.lang-letters .ll { height: 30px; min-width: 26px; padding: 0 4px; border: 0; background: none; color: var(--faint); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; cursor: pointer; transition: color .2s; }
.lang-letters .ll:hover, .lang-letters .ll.cur { color: var(--fg); }
.lang-letters.many:not(.open):not(:hover) .ll:not(.cur) { display: none; }      /* 언어가 셋 이상: 지금 글자만, 올리거나 누르면 펴진다 */
@media (max-width: 600px) {                                                       /* 휴대폰: 지금 글자 하나, 누르면 펴진다. 누름 자리 40px */
  .lang-letters .ll { height: 40px; min-width: 40px; }
  .lang-letters:not(.open) .ll:not(.cur) { display: none; }
  /* 펴진 글자는 지금 글자 아래로 내려온다: 줄 안에서 펴면 제목이 '새.' 처럼 한 글자로 눌렸다 (10/3 점검, 360px 관리자 제목 15px) */
  .lang-letters { position: relative; }
  .lang-letters.open .ll:not(.cur) { position: absolute; left: 0; top: calc(100% + 4px + var(--i, 0) * 44px); z-index: 45; background: var(--elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
  /* 관리자 칩은 점 하나 (뜻은 title·누르면 나오는 메뉴에). 글자 '관리자'·'Admin' 이 제목 자리를 50px 남짓 먹었다 */
  /* 점 하나만 남은 관리자 칩·눈 아이콘만 남은 관전 칩은 옆 아이콘 단추와 같은 36px 칸·테두리 없이 (10/23 PM: 동그라미가 옆 아이콘보다 크게 튀어나왔다) */
  .mode-chip:not(.guest), #main > .topbar .obs-chip { width: 36px; height: 36px; padding: 0; justify-content: center; border: 0; background: transparent; }
  .mode-chip:not(.guest) #mode-label { display: none; }
  .mode-chip:not(.guest) i { box-shadow: 0 0 0 2px var(--accent-soft); }
  #main > .topbar .obs-chip { color: var(--accent); }
  /* '함께 N명' 글은 옆 목록(접속 중)에 있다: 두 사람만 들어와도 제목이 22px 로 눌렸다. 같은 대화를 보는 얼굴은 하나만 */
  .viewers .together, .viewers > span:nth-child(n+2) { display: none; }
}

/* ---------- 사람 (10/2 대표: 접속자 누르면 카드 · 우클릭 메뉴 · 쪽지 · 친구 · 초대 · 단체 대화) — people.js ---------- */
/* 기본 프로필 얼굴: 평평한 원 대신 위가 살짝 밝은 둥근 면 (사진이 없어도 어설퍼 보이지 않게). 얇은 테두리 하나 */
.avatar { background: linear-gradient(160deg, color-mix(in srgb, var(--av, #6f727a) 78%, #fff) 0%, var(--av, #6f727a) 58%, color-mix(in srgb, var(--av, #6f727a) 82%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(11,15,20,.06); letter-spacing: .02em; font-family: var(--lat); }
.px-big { background: linear-gradient(160deg, color-mix(in srgb, var(--av, #6f727a) 78%, #fff) 0%, var(--av, #6f727a) 58%, color-mix(in srgb, var(--av, #6f727a) 82%, #000) 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(11,15,20,.06), 0 18px 40px -24px rgba(11,15,20,.45); font-family: var(--lat); font-weight: 600; }
[data-person], .avatar[data-n] { cursor: pointer; }
#me-avatar .avatar, label .avatar, .pcard .avatar, .ppl .avatar, .pprof .avatar { cursor: default; }
.online-person { cursor: pointer; transition: background .15s; }
.online-person:hover { background: var(--side-hover); }
.online-person.away { color: var(--side-muted); opacity: .72; }
.online-person.away::before { background: var(--faint); box-shadow: none; }
.side-online .lbl { display: flex; align-items: center; justify-content: space-between; }
.side-online .lbl .lbl-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -5px 0; border: 0; border-radius: 6px; background: transparent; color: var(--side-muted); cursor: pointer; }
.side-online .lbl .lbl-add:hover { background: var(--side-hover); color: var(--side-fg); }
/* 사람 카드 */
.popover.pcard-pop { padding: 0; min-width: 280px; max-width: 320px; overflow: hidden; }
.pcard { position: relative; padding: 18px 16px 14px; }
.pcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .85; }
.pc-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pc-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-id b { font-size: 16px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-role { font-size: 11.5px; color: var(--muted); }
.pc-st { font-size: 12.5px; color: var(--fg2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-now { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--soft); font-size: 12.5px; color: var(--muted); }
.pc-now i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.pc-now.on { color: var(--fg2); } .pc-now.on i { background: #3fb96f; box-shadow: 0 0 0 3px rgba(63,185,111,.18); }
.pc-now span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.pc-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--fg); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background .15s; }
.pc-acts button:hover { border-color: var(--border2); background: var(--hover); }
.pc-acts button[disabled] { opacity: .45; cursor: default; }
.pc-acts button:first-child { grid-column: 1 / -1; background: var(--primary); color: var(--on-primary); border-color: transparent; font-weight: 600; }
.pc-acts button:first-child:hover { background: var(--primary-hover); }
.pc-acts button:last-child:nth-child(even) { grid-column: 1 / -1; }   /* 첫 단추(한 줄) 뒤에 홀로 남는 마지막 단추도 한 줄로 */
.pc-acts button.is-friend { color: var(--ok); }
.popover .opt[disabled] { opacity: .45; cursor: default; }
.popover .opt .avatar { margin-top: -1px; }
/* 프로필 보기 창 */
.pprof { text-align: center; padding: 10px 4px 0; }
.pprof .pp-av { display: flex; justify-content: center; margin-bottom: 12px; }
.pprof h3 { margin: 0; font-size: 20px; letter-spacing: -.3px; justify-content: center; }
.pprof .pp-role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pprof .pp-st { margin-top: 10px; font-size: 14px; color: var(--fg2); }
.pprof .pc-now { justify-content: center; }
.pprof .pc-acts { margin-top: 14px; }
/* 사람 고르기 · 팀원 찾기 창 */
.modal.ppl-modal { width: min(520px, calc(100vw - 24px)); }
.ppl h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.ppl > .sub { margin: 0 0 12px; line-height: 1.55; }
.ppl .ppl-title { width: 100%; margin-bottom: 8px; }
.ppl-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--elev); color: var(--muted); }
.ppl-search:focus-within { border-color: var(--border2); box-shadow: 0 0 0 3px var(--accent-soft); }
.ppl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--fg); }
.ppl-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ppl-sel:empty { display: none; }
.ppl-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 4px; border-radius: 999px; background: var(--hover2); font-size: 12.5px; font-weight: 600; }
.ppl-chip button { display: inline-flex; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 50%; }
.ppl-chip button:hover { color: var(--fg); background: var(--hover2); }
.ppl-list { max-height: min(46vh, 380px); overflow: auto; margin: 10px -6px 0; padding: 0 6px; scrollbar-width: thin; }
.ppl-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 12px; cursor: pointer; }
.ppl-row:hover { background: var(--hover); }
.ppl-row.away .avatar { opacity: .55; filter: saturate(.6); }
.ppl-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.ppl-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ppl-nm b { font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.ppl-nm b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-nm b .tag { font-style: normal; height: 18px; flex: none; white-space: nowrap; }                 /* 이름 옆 꼬리표 (대표·친구·번호): 이름 줄 안에, 기울이지 않고 */
.ppl-nm small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-acts { display: flex; gap: 6px; flex: none; }
.ppl-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* 쪽지 목록 (MESSAGES) */
#grp-dm .side-label .r { display: inline-flex; align-items: center; gap: 8px; }
.unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; flex: none; }
.side-item.dm { padding: 6px 10px; }
.side-item.dm .t { display: flex; flex-direction: column; line-height: 1.25; }
.side-item.dm .dm-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item.dm .dm-nm em { font-style: normal; font-size: 11px; color: var(--side-muted); }
.side-item.dm .dm-last { font-size: 11.5px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.side-item.dm.off .avatar { opacity: .5; filter: saturate(.5); }
.side-item.dm.off .dm-nm { color: var(--side-muted); }
.dm-faces { display: inline-flex; flex: none; }
.dm-faces .avatar { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--side-solid); } .dm-faces .avatar:first-child { margin-left: 0; }
/* 위쪽 '함께 N명' 칩 · 입력창의 'AI 부르기' */
.conv-people { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border-radius: 999px; border: 1px solid var(--border); background: var(--elev); color: var(--fg2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.conv-people:hover { border-color: var(--border2); background: var(--hover); }
.conv-people .avatar { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--elev); } .conv-people .avatar:first-child { margin-left: 0; }
.chip.ai.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
/* 설정 > 내 프로필 > 친구 */
.px-friends { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: left; }
.fr-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.fr-head b { font-size: 14px; }
.fr-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.fr-row:hover { background: var(--hover); }
.fr-nm { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fr-nm b { font-size: 13.5px; }
.fr-row small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-empty { padding: 4px; }
@media (max-width: 600px) {
  /* 휴대폰: 사람 카드는 아래에서 올라오는 판 (손가락 자리 그대로 뜨면 반이 잘렸다) */
  .popover.pcard-pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; max-width: none; border-radius: 18px; }
  .pc-acts button { height: 40px; }
  .ppl-list { max-height: 50vh; }
  .ppl-acts .btn { padding: 0 8px; }
  .conv-people > span:not(.avatar) { display: none; }      /* 글자('참여 N명')만 숨긴다. 얼굴도 span 이라 전부 숨기면 칸이 13px 로 눌렸다 */
  .conv-people { padding-right: 6px; }
}

/* ---------- 휴대폰 · 여러 브라우저 다듬기 (10/3, 대표 10/2 "조작이 부드럽지 않다 · 글자 먹힘 · 경계선 · 어떤 브라우저든") ---------- */
/* 문서 전체는 당겨지지 않는다: 아이폰 고무줄의 빈 틈, 안드로이드 '당겨서 새로고침'이 목록을 올리다 페이지를 다시 여는 일 없이 안쪽 목록만 움직인다 */
html, body { overscroll-behavior: none; }
/* 세로 목록은 끝에 닿아도 바깥 판을 끌고 가지 않는다 (목록 끝에서 손가락이 다음 판을 흔들던 이음새) */
.pv-body, .side-scroll, #list-meetings, .transcript, .hello-mode .view, .pane, .fe-host, .modal, .setx-main, .popover, .palette .res, .mt-scroll, .mt-pane,
.ap-list, .vt-main.vt-org, .vt-body, #mrec-dock .mrb, .mrls, .tr-list, .mem-list, .mfp, .kb-list, .ppl-list, .checks { overscroll-behavior-y: contain; }
/* 옆으로 미는 줄(표·탭·조작 줄)은 끝에 닿아도 브라우저 '뒤로 가기' 밀기나 사이드바 열기로 넘어가지 않는다 */
.md .tbl, .md pre, pre.ftext, .scroll, .setx-nav, .vt-rail, .vt-chips, .transport, .dock-tabs, .seg, .set-tabs { overscroll-behavior-x: contain; }
/* 옆으로 미는 줄의 잘린 끝 (phone.js 가 fade-l · fade-r 를 붙인다): 반쯤 잘린 글자 대신 흐려지는 끝 */
.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* 입력칸 안내 글이 칸보다 길면 글자 중간에서 잘리지 않고 '…' 로 (회의 메시지 칸·상태 메시지 칸) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) { text-overflow: ellipsis; }
/* 고르기 칸도: 폭보다 긴 고른 글은 '…' 로 (양식 구조 카드의 '표준 칸' 이 'Company name · compa' 처럼 잘렸다, 10/3 검증) */
select { text-overflow: ellipsis; }
/* 회의 시작 창: 두 설정 줄 사이 선이 두 겹이었다 */
.mr-opt + .mr-opt { border-top: 0; margin-top: 0; }
/* 아이폰·카톡 웹뷰: 키보드가 화면을 덮을 때 보이는 높이에 맞춘다 (phone.js 가 --vvh 를 넣는다) */
html.kb-open .app, html.kb-open .main { height: var(--vvh); }
html.kb-open .modal-bg { bottom: auto; height: var(--vvh); }   /* 시트의 입력칸도 키보드 위에 (전엔 시트가 키보드 밑까지 깔려 칸이 가려졌다) */
/* 앱 안 브라우저(카톡 등) 안내: 회의 창에만 한 줄 */
.inapp-ban { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--fg2); font-size: 12px; line-height: 1.5; }
.inapp-ban .ia-t { flex: 1; min-width: 0; }
.inapp-ban .ia-how { display: block; color: var(--muted); }
.inapp-ban .btn { flex: none; }
.modal .inapp-ban { margin: 0 0 14px; }
#mrec-dock .inapp-ban { margin: 0 0 10px; }
/* 손가락 기기 */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }          /* 누를 때 번지는 네모 대신 아래 눌림 표시 */
  :where(button, .btn, .chip, .opt, .side-item, [role=button], label.switch):active { opacity: .72; }
}
@media (pointer: coarse) {
  /* 두 번 눌러 확대를 기다리는 지연 없이 바로 */
  button, a, input, select, textarea, label, summary, [role=button] { touch-action: manipulation; }
  /* 누르는 자리는 40px 이상: 보이는 크기는 그대로 두고 둘레의 투명한 자리를 넓힌다 (위 막대·입력창 줄이 넘치지 않게) */
  :where(.icon-btn, .chip, .send, .lbl-add, .mode-chip, .side-item .more, .fold-h .more, .vt-f, label.switch) { position: relative; }
  :where(.icon-btn, .chip, .send, .lbl-add, .mode-chip, .side-item .more, .fold-h .more, .vt-f, label.switch)::before {
    content: ""; position: absolute; top: min(0px, calc(50% - 20px)); bottom: min(0px, calc(50% - 20px)); left: min(0px, calc(50% - 20px)); right: min(0px, calc(50% - 20px)); }
  .btn, .btn.small { min-height: 40px; }                      /* 반짝임 때문에 둘레가 잘려(overflow) 자리를 못 넓혀 높이를 올린다 */
  .side-item .more, .fold-h .more { overflow: visible; }      /* 목록 줄·폴더의 '더보기': 컴퓨터용 overflow:hidden 이 넓힌 자리를 잘라 34px 였다 */
  .online-person { min-height: 40px; }                        /* 접속 중 이름 줄 (누르면 사람 카드): 28px 였다 */
  .side-item .who { padding: 11px 6px; margin: -11px 0 -11px -6px; max-width: calc(5.5em + 12px); }   /* 팀원 대화의 만든 사람 이름 (누르면 사람 카드): 글자는 그대로, 누르는 자리만 40px ('더보기' 자리와 겹치지 않게 오른쪽은 그대로) */
  .fold-h { min-height: 42px; }                               /* 폴더 줄이 36px 라 '더보기'의 넓힌 자리 아래가 다음 줄에 덮였다 */
  .side-online { padding-top: 12px; }                         /* 회의록 '+' 와 '팀원 찾기' 의 넓힌 자리가 1px 겹쳤다 */
  .side-online .lbl { margin-bottom: 11px; }                  /* '팀원 찾기' 의 넓힌 자리 아래를 첫 이름 줄(흐린 '자리 비움' 줄)이 7px 덮었다 */
  .box textarea { min-height: 40px; }                         /* 입력창 한 줄: 35px 였다 */
  select { min-height: 40px; }                                /* 고르는 칸·설정 입력칸 (설정 > 도구의 영상 품질이 34px 였다) */
  .set-rc .inp:not(textarea) { min-height: 40px; height: 40px; }
}
@media (pointer: coarse) and (max-width: 860px) {
  .top-actions { gap: 4px; }                                  /* 위 막대 아이콘은 붙어 있어 넓힌 자리가 옆 단추와 겹쳤다: 36 + 4 = 한 칸 40px */
  .top-actions .icon-btn { width: 36px; height: 36px; }
  .msg .tools { gap: 4px; }                                   /* 답 아래 복사·읽어 주기도 같은 까닭 */
  .side-search, #vt-sort, .vt-search { min-height: 40px; }
  .vt-seg button { width: 40px; height: 40px; }               /* 보관함 '크게·목록' (둘레가 잘리는 묶음이라 자리 대신 크기) */
  /* 휴대폰 회의 판: '오른쪽에 붙이기'·'크게 보기'는 판에서는 아무 일도 하지 않아 뺀다. 남은 단추는 한 칸 40px */
  #mrec-dock.sheet .mrh [data-mr=side], #mrec-dock.sheet .mrh [data-mr=big] { display: none; }
  #mrec-dock .mrh .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 860px) {
  /* 휴대폰 시트(설정·보관함·휴지통…): 위에 흐린 자리 56px 를 남겨 바깥을 눌러 닫는다. 10px 틈은 손가락이 닿으면 시트 위쪽 단추로 끌려가 닫히지 않았다 */
  .modal-bg { padding-top: calc(56px + env(safe-area-inset-top)); }
  .modal-bg > .modal { max-height: 100%; }
  /* 휴대폰 회의 판이 열려 있으면 '참여 요청' 쪽지는 판 머리를 덮지 않게 숨긴다 (판 안에 같은 참여 단추가 있다) */
  body:has(#mrec-dock.sheet:not([hidden])) #mrec-inv { display: none; }
  /* 회의 시작·끝내기 창: 글이 길어 '녹음 시작'이 창 아래로 잘려 있었다 → 단추 줄은 창 아래에 붙어 늘 보인다 */
  .modal .mr-foot { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(transparent, var(--card) 26px); padding-top: 28px; }
}
@media (max-width: 600px) {
  .popover.pcard-pop { bottom: calc(8px + env(safe-area-inset-bottom)); }   /* 아이폰 아래 막대 위로 */
}
/* 움직임 줄이기: 모든 움직임을 거의 0 으로 (사이드바·창·알림이 바로 나타난다) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.adm .adm-co { display: flex; justify-content: center; margin-top: 10px; text-decoration: none; }   /* 홈페이지 관리자 계정(대표·직원)으로 들어가기 (10/6) */
.kb-it .kb-check { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; align-self: center; }   /* 자주 쓰는 첨부: 여러 개 고르기 (10/6) */
.kb-it.on .kb-check { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pf-all { float: right; font-weight: 500; }   /* 회사 입력 칸을 바로 열고, 다른 프로필은 목록으로 (10/6) */
.acct-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }   /* 요금제 보기 · 회사 계정으로 로그인 (10/6) */

/* 파일 빼기 X (대표 10/7: 모든 파일 오른쪽에) — 칩 오른쪽 위 작은 동그라미. 컴퓨터는 올리면, 터치 화면은 늘 보인다 */
.file-wrap { position: relative; display: inline-flex; max-width: 100%; }
.file-wrap[hidden] { display: none; }
.file-x { position: absolute; top: -6px; right: -6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border2); background: var(--elev); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; opacity: 0; transition: opacity .12s; box-shadow: var(--shadow-s); }
.file-wrap:hover > .file-x, .file-x:focus-visible { opacity: 1; }
.file-x:hover { color: var(--fg); border-color: var(--fg); }
.file-dl { position: absolute; bottom: 4px; right: 4px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--elev); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); opacity: .75; }
.file-dl:hover { opacity: 1; color: var(--fg); }
.file-x.in-card { position: static; opacity: 1; width: 26px; height: 26px; border: 0; background: transparent; box-shadow: none; margin-left: 4px; }
.file-x.in-card:hover { background: var(--hover2); }
.doc-card[hidden] { display: none; }
@media (hover: none) { .file-x { opacity: 1; } }

/* 다 쓴 뒤 '공고문 직접 읽기' 알림 (대표 10/7 13번) — 작게, 오늘 하루 보지 않기 */
.read-tip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--hover); color: var(--fg2); font-size: 12.5px; }
.read-tip .t { flex: 1; min-width: 180px; }
.read-tip label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* 나란히 보기 (대표 10/7 9번): 왼쪽 쓰는 문서 · 오른쪽 원본 양식 */
.side-pane { left: 50%; border-left: 1px solid var(--border); background: var(--paper); }
.dock-body.nb-side #doc-view.active { right: 50%; }
.dock-body.nb-side .side-pane { display: block; }
.side-head { position: sticky; top: -14px; z-index: 2; margin: -14px -16px 10px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--paper); border-bottom: 1px solid var(--border); }
.side-dz { transform-origin: top left; }
@media (max-width: 860px) { .wide-only { display: none !important; } }

/* 공고문 탭 (대표 10/7 7번): 왼쪽 핵심·목차·파일, 오른쪽 공고 파일 바로 보기 */
.nv { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 12px; height: 100%; min-height: 420px; }
.nv-side { overflow: auto; min-width: 0; font-size: 13px; }
.nv-main { min-width: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--paper); }
.nv-frame { width: 100%; height: 100%; min-height: 420px; border: 0; background: #fff; }
.nv-pages { height: 100%; min-height: 420px; overflow: auto; display: grid; align-content: start; gap: 8px; padding: 8px; background: var(--paper); }
.nv-pages img { width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.nv-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.nv-keys { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--hover); }
.nv-k { display: grid; grid-template-columns: 64px 1fr; gap: 6px; line-height: 1.45; }
.nv-k b { color: var(--muted); font-weight: 600; }
.nv-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nv-toc button { width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 6px 8px; border-radius: 8px; cursor: pointer; display: grid; gap: 2px; }
.nv-toc button:hover { background: var(--hover); }
.nv-toc span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.nv-files { display: grid; gap: 4px; }
.nv-file { text-align: left; border: 1px solid var(--border); background: var(--elev); color: inherit; font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-file.on { border-color: var(--fg); }
@media (max-width: 860px) { .nv { grid-template-columns: 1fr; } .nv-main { min-height: 60vh; } }
/* 제출 점검 탭 (대표 10/7 14번) */
.ck-drop { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; margin-top: 14px; border: 1.5px dashed var(--border2); border-radius: 12px; text-align: center; cursor: pointer; color: var(--muted); }
.ck-drop b { color: var(--fg2); }
.ck-drop.on { border-color: var(--fg); background: var(--hover); }
.ck-ok, .ck-bad, .ck-wait { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.ck-wait { background: var(--hover); color: var(--fg2); font-weight: 500; line-height: 1.5; }
.ck-ok { background: rgba(26,127,55,.08); color: #1A7F37; }
.ck-bad { background: rgba(180,35,24,.08); color: #B42318; }
:root[data-theme="dark"] .ck-ok { color: #7EE2A0; } :root[data-theme="dark"] .ck-bad, :root[data-theme="dark"] .ck-list .red { color: #FF9C8F; }
.ck-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.ck-list, .ck-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ck-doc { display: flex; gap: 8px; align-items: flex-start; }
.ck-doc .t, .ck-file { display: grid; gap: 2px; min-width: 0; }
.ck-doc .t span { color: var(--muted); font-size: 12px; }
.ck-st { width: 18px; flex: none; color: var(--muted); }
.ck-doc.ok .ck-st { color: #1A7F37; } .ck-doc.missing .ck-st { color: #B42318; }
.ck-file { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.ck-file.bad { border-color: rgba(180,35,24,.35); }
.ck-list .red { color: #B42318; font-size: 12px; }
.ck-notes li { color: var(--fg2); font-size: 12.5px; padding-left: 10px; border-left: 2px solid var(--border2); }

/* 작성 주안점 (대표 10/7 3번): 칸마다 평가 항목·주안점·근거를 깔끔하게 */
.why-card { margin-top: 10px; }
.why-card > summary { list-style: none; cursor: pointer; }
.why-card > summary::-webkit-details-marker { display: none; }
.why-org { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--hover); font-size: 13px; }
.why-org ul { margin: 4px 0 0; padding-left: 18px; }
.why-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
.why-list li::marker { color: var(--faint); font-variant-numeric: tabular-nums; }
.why-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.why-crit { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--fg2); }
.why-a { color: var(--fg2); line-height: 1.55; margin-top: 2px; }
.why-tag { font-size: 11px; color: var(--faint); }
.why-f { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.tray-rec { font-size: 11.5px; font-weight: 700; color: var(--accent, var(--fg)); margin-left: 4px; }
.tray-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* 폰: 질문 모음이 화면의 1/3 을 넘지 않게 (점검 9: 224px 를 차지해 대화가 406px 만 보였다) — 넘치면 모음 안에서 굴린다 */
@media (max-width: 860px) { .tray { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 6px; } }
/* 대화 초대 링크 (10/9) */
.share-invite { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.share-invite .lbl { font-weight: 600; font-size: 13px; }
.inv-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inv-row .inp { flex: 1 1 220px; min-width: 0; font-size: 12.5px; }
.inv-h { margin-top: 4px; }
/* 칸 저장이 겹쳤을 때 고르기 (doc.js changedElsewhere, 10/11) — 지금 글과 내 글을 나란히 */
.cf-modal .cf-l { margin-top: 12px; font-weight: 600; font-size: 12.5px; }
.cf-modal .cf-t { margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 28vh; overflow-y: auto; font-size: 13px; line-height: 1.55; }
.inv-joined { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-p { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--hover); font-size: 12.5px; }
.inv-p .icon-btn { width: 22px; height: 22px; }
/* 알림함 (대표 10/9: 초대·쪽지를 놓쳐도 남게) — 위 막대의 종 단추 · 안 읽은 수 · 작은 목록 (inbox.js) */
.inbox-n { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.inbox-n[hidden] { display: none; }
.inbox-btn.has-new { color: var(--fg2); }
.inbox-panel { position: fixed; z-index: 61; width: 360px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-l); }
.inbox-panel[hidden] { display: none; }
.ib-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); flex: none; }
.ib-head > b { font-size: 14px; color: var(--fg); }
.ib-head .btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; }
.ib-head .btn[disabled] { opacity: .45; cursor: default; }
.ib-close { width: 30px; height: 30px; }
.ib-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px; min-height: 0; }
.ib-row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px 9px 14px; border-radius: 10px; cursor: pointer; outline: none; }
.ib-row:hover, .ib-row:focus-visible { background: var(--hover); }
.ib-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.ib-row.ib-new::before { content: ""; position: absolute; left: 4px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ib-row > .avatar, .ib-ic { flex: none; margin-top: 1px; }
.ib-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--hover2); color: var(--muted); }
.ib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-t { font-size: 13.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.ib-row.ib-new .ib-t { color: var(--fg); font-weight: 700; }
.ib-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-when { font-size: 11.5px; color: var(--faint); }
.ib-x { flex: none; width: 28px; height: 28px; opacity: 0; }
.ib-row:hover .ib-x, .ib-x:focus-visible { opacity: 1; }
.ib-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px 30px; color: var(--faint); text-align: center; }
.ib-empty b { color: var(--fg2); font-size: 14px; font-weight: 600; }
.ib-empty span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ib-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.ib-more:hover { background: var(--hover); color: var(--fg); }
@media (hover: none) { .ib-x { opacity: .75; width: 34px; height: 34px; } }
@media (max-width: 600px) {
  .inbox-panel { width: auto; border-radius: 16px; }
  .ib-row { padding: 11px 6px 11px 14px; }
  .ib-row.ib-new::before { top: 23px; }
}

/* 비밀번호 칸의 눈 단추 (계정 창, 10/10) */
.acct-pw { position: relative; display: block; width: 100%; }
.acct-pw > input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.acct-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.acct-eye:hover { color: var(--fg); background: var(--hover); }
.acct-eye:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

/* 미리보기: AI 가 쓰는 칸은 초안 대신 '작성 중' — 검사를 통과한 글만 또르르 (대표 10/10) */
table.hw .ai-working { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
table.hw .ai-working i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: aiw 1.1s ease-in-out infinite; }
table.hw .ai-working em { font-style: normal; font-weight: 500; opacity: .75; }
table.hw .ai-working em:empty { display: none; }
@keyframes aiw { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
table.hw .ct.reviewing > :not(.ai-working) { opacity: .38; transition: opacity .3s; }
table.hw .ct.reviewing > .ai-working { position: relative; z-index: 1; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { table.hw .ai-working i { animation: none; opacity: 1; } }

/* EDIT 스코어 · 공고 적합도 (대표 10/10 "스코어 그거 기능 다 빼먹었더라 적합성!"): 고리 하나 + 이름 + 한 줄.
   파랑은 고리·막대(진행 선)에만, 맞음·확인·안 맞음은 바탕 없이 점과 글자색 (시안 2 원칙) */
.es-card { padding: 14px 16px; }
.es-head { display: flex; align-items: center; gap: 14px; }
.es-head .es-t { min-width: 0; flex: 1; }
.es-head h4 { margin: 0 0 1px; font-size: 15px; }
.es-head .sub { font-size: 12.5px; }
.es-ring { flex: none; }
.es-ring .bg { fill: none; stroke: var(--soft); stroke-width: 6; }
:root[data-theme="dark"] .es-ring .bg { stroke: rgba(255,255,255,.08); }
.es-ring .fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.es-ring text { font: 700 19px var(--lat); fill: var(--fg); font-variant-numeric: tabular-nums; }
.score-card.busy .es-ring .fg { animation: es-pulse 1.2s ease-in-out infinite; }
@keyframes es-pulse { 50% { opacity: .3; } }
.es-lv { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--fg2); }
.es-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--faint); flex: none; }
.es-dot.good { background: var(--ok); } .es-dot.maybe { background: var(--warn); } .es-dot.no { background: var(--err); }
.es-up { color: var(--ok); }
.es-prev { color: var(--muted); }
.es-card .es-off { color: var(--err); }
.es-mini { align-self: flex-start; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--fg2); cursor: pointer; white-space: nowrap; }
.es-mini b { color: var(--fg); margin-left: 2px; font-variant-numeric: tabular-nums; }
.es-by, .es-cells, .fit-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.es-by li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 140px) 58px; align-items: center; gap: 10px; font-size: 13px; }
.es-by .nm, .es-cells .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-by .bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
:root[data-theme="dark"] .es-by .bar { background: rgba(255,255,255,.08); }
.es-by .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.es-by b { text-align: right; font-variant-numeric: tabular-nums; }
.es-by b small { color: var(--muted); font-weight: 400; }
.es-cells li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 10px; font-size: 13px; }
.es-cells .pips { display: inline-flex; gap: 3px; }
.es-cells .pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border2); }
.es-cells .pips i.on { background: var(--fg2); box-shadow: none; }
.es-cells .was { color: var(--ok); font-variant-numeric: tabular-nums; }
.es-cells .was.down { color: var(--warn); }                          /* 내려간 점수는 초록이 아니라 주의 색 (10/16 EPIC 점검 3번) */
.es-cells .pb { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.es-act { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.es-act .sub { font-size: 12.5px; }
.fit-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13px; }
.fit-list li svg { margin-top: 3px; }
.fit-list li.ok svg, .fit-list li.ok em { color: var(--ok); }
.fit-list li.q svg, .fit-list li.q em { color: var(--warn); }
.fit-list li.no svg, .fit-list li.no em { color: var(--err); }
.fit-list .t { min-width: 0; }
.fit-list .t small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.fit-list em { font-style: normal; font-size: 12px; white-space: nowrap; }
.fit-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fit-why span { font-size: 12.5px; color: var(--fg2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 4px; }
.fit-why.caution span { color: var(--warn); }
.es-chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.es-chips:empty { display: none; }
.es-chip { border: 1px solid var(--border); background: var(--surface); color: var(--fg2); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.es-chip b { color: var(--fg); font-variant-numeric: tabular-nums; }
.es-chip.busy b { opacity: .4; }
.es-chip:hover, .es-mini:hover { background: var(--hover); }
/* 하루 무료 서류 작성을 다 쓴 손님: 답 안의 가입하기 · 로그인 단추 (app.js needLogin, EPIC 기준 10/15) */
.need-login { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* 가속 5시간·한 주 몫 (accounts/windows, 10/22): 막대 · 한 단계 위 요금제 · 같은 크기 같은 색 두 단추 (전자상거래법 — 한쪽만 크거나 진하게 X) */
.acct-win { margin: 10px 0 0; }
.acct-win-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.acct-win-t b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.acct-win-bar { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.acct-win-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.acct-win.warn .acct-win-bar i { background: #F59E0B; }   /* 동그라미와 같은 색: 남았을 땐 파랑 · 70% 넘게 쓰면 주황 · 90% 넘게 쓰면 빨강 (대표 10/22) */
.acct-win.full .acct-win-bar i { background: #E5484D; }
.acct-win em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--muted); }
.acct-upg-l { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg); }
.acct-upg-l + .acct-upg-l { margin-top: 2px; color: var(--muted); }
.acct-upg-b { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 14px; }
.acct-upg-b .btn { min-width: 0; white-space: normal; line-height: 1.3; }
.need-upgrade { position: relative; margin-top: 10px; padding: 12px 40px 14px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); max-width: 460px; }
.need-upgrade .acct-win:first-of-type { margin-top: 0; }
.need-upgrade-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.need-upgrade-x:hover { background: var(--soft); color: var(--fg); }
.acct-fail { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--border); }
.acct-fail span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-fail em { font-style: normal; color: var(--muted); flex: none; }
@media (max-width: 600px) { .acct-upg-b { grid-auto-flow: row; } }
/* 채울 양식이 여럿일 때 양식마다 단추 (app.js pickForm, EPIC 점검 10/16 6번) — 긴 파일 이름은 한 줄로 줄인다 */
.pick-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pick-form .btn { max-width: 100%; min-width: 0; gap: 6px; }
.pick-form .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-score { margin-top: 10px; }
.msg-score:empty, .msg-score:has(> div:empty), .msg-score > div:empty { display: none; }
.es-pane { padding: 16px; display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.job [data-role=fit]:empty { display: none; }
.job [data-role=fit] .fit-card { margin-top: 10px; box-shadow: none; }
#tray .tray-head .es-chips { flex: none; }
#t-scores { margin-left: 6px; }
@media (max-width: 600px) { .es-by li { grid-template-columns: minmax(0, 1fr) 64px 50px; } .es-head { gap: 10px; } }

/* 서명 그림 (대표 10/11): '(서명)'·'(인)' 표시 위에 겹쳐, 글자가 위 (받은 파일의 '글 뒤로'와 같게) */
.sigat{position:relative;display:inline-block}
.sigat .sigt{position:relative;z-index:1}
.sigat .sigimg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;z-index:0;pointer-events:none}
/* 서명·도장 창 (sign.js) */
.sign-modal{max-width:540px}
.sign-modal .sg-pic{display:flex;align-items:center;justify-content:center;min-height:120px;max-height:220px;border:1px solid var(--border);border-radius:10px;margin:8px 0 10px;padding:12px;background-color:#fff}
.sign-modal .sg-pic.checker{background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.sign-modal .sg-pic img{max-width:100%;max-height:190px;object-fit:contain}
.sign-modal .sg-row{gap:8px;margin-top:10px;flex-wrap:wrap}
.sign-modal .sg-ask{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:12px}
.sign-modal .sg-ask .btn{justify-content:center;min-width:0;white-space:normal;text-align:center}
.sign-modal .sg-auto{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px}
/* 서명 패드 (sign.js Pad): 흰 종이 같은 칸 + 점선 서명 줄, 그리는 동안 화면이 움직이지 않게 */
.sign-modal .sg-padwrap{position:relative;margin:8px 0 8px;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.sign-modal #sg-canvas{display:block;position:relative;z-index:1;width:100%;height:210px;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
.sign-modal .sg-guide{position:absolute;z-index:0;left:22px;right:22px;bottom:46px;border-bottom:1.5px dashed rgba(11,15,20,.2);pointer-events:none}
.sign-modal .sg-guide span{position:absolute;left:0;bottom:7px;font-size:13px;color:rgba(11,15,20,.35)}
.sign-modal .sg-padwrap.inked .sg-guide span{display:none}
.sign-modal .sg-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sign-modal .sg-inks button{width:32px;padding:0;display:inline-grid;place-items:center}
.sign-modal .sg-inks i{width:14px;height:14px;border-radius:50%;display:block}
.sign-modal .sg-w{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.sign-modal .sg-w input{width:92px}
.sign-modal .sg-hint{margin-top:6px}
@media (max-width:640px){.sign-modal #sg-canvas{height:190px}.sign-modal .sg-w input{width:76px}}
.sg-card .sc-ic { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-style: normal; }
/* 사용량 게이지 · 미리 알림 (CM 10/18 — PLAYFORM_SHOW=usage_gauge 일 때만 그려진다, customer/account.js gauge) */
.acct-gauge { position: relative; display: inline-flex; align-items: center; margin: 0 6px; padding: 6px; border-radius: 8px; cursor: pointer; flex: none; }
.acct-gauge:hover, .acct-gauge:focus-visible, .acct-gauge.open { background: var(--soft); outline: none; }
/* 사용량 동그라미 (대표 10/22 — 클로드처럼): 쓴 만큼 차는 고리, 남았을 땐 파랑 · 70% 넘게 쓰면 주황 · 90% 넘게 쓰면 빨강 */
.acct-ring { width: 18px; height: 18px; display: block; }
.acct-ring circle { fill: none; stroke-width: 2.4; }
.acct-ring .t { stroke: var(--border); }
.acct-ring .a { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.acct-gauge.warn .acct-ring .a { stroke: #F59E0B; }
.acct-gauge.full .acct-ring .a { stroke: #E5484D; }
.acct-gauge-pop { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; width: 250px;
  padding: 2px 14px 12px; border-radius: 12px; background: var(--card); color: var(--fg); border: 1px solid var(--border); box-shadow: var(--shadow-s);
  font-size: 12px; cursor: default; white-space: normal; }
.acct-gauge-pop .acct-win { margin-top: 10px; }
.acct-gauge.open .acct-gauge-pop { display: block; }
@media (max-width: 640px) { .acct-gauge { margin: 0 2px; } .acct-gauge-pop { width: 230px; } }
.acct-dot { display: inline-block; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }

/* 한 칸씩 같이 쓰기 보기 카드 (writer/cowrite · static/cowrite.js, 대표 10/19). EPIC 과 같은 꼴: 테두리 1px · 둥근 10px · 추천은 강조색 테두리 + 작은 '추천' 표.
   이름표·꼬리표 없이, 보기 한 줄씩. 폰은 손가락 크기 (44px). */
.cw-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cw-list:empty { display: none; }
.cw-card { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.cw-card.done { opacity: .72; }
.cw-card.busy { opacity: .6; pointer-events: none; }
.cw-step { font-size: 12px; color: var(--muted); }
.cw-q { font-weight: 650; line-height: 1.45; color: var(--fg); word-break: keep-all; overflow-wrap: anywhere; }
.cw-opts { display: flex; flex-direction: column; gap: 6px; }
.cw-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; font: inherit; color: var(--fg);
  background: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.cw-opt:hover:not(:disabled), .cw-opt:focus-visible { background: var(--hover2); outline: none; }
.cw-opt.rec { border-color: var(--accent); }
.cw-opt.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cw-opt:disabled { cursor: default; }
.cw-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: 700; background: var(--hover2); color: var(--fg2); }
.cw-opt.rec .cw-n, .cw-opt.on .cw-n { background: var(--accent); color: #fff; }
.cw-t { flex: 1; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.cw-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; }
.cw-why { font-size: 12px; color: var(--muted); padding: 0 10px 2px 42px; margin-top: -2px; line-height: 1.4; }
.cw-etc { display: flex; gap: 6px; }
.cw-etc input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font: inherit; background: var(--bg); color: var(--fg); }
.cw-etc input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cw-picked { display: flex; justify-content: flex-end; }
.cw-picked span { max-width: 86%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--user-bubble); color: var(--user-ink); white-space: pre-wrap;
  word-break: keep-all; overflow-wrap: anywhere; }
.cw-reply { color: var(--fg); line-height: 1.5; padding: 2px 2px 0; }
.cw-going { align-self: flex-end; font-size: 12px; color: var(--muted); padding: 0 6px; animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cw-going { animation: none; } }
table.hw td .ai-working.cw-choosing b { color: var(--accent-ink); }
@media (max-width: 860px) { .cw-opt { min-height: 48px; } .cw-why { padding-left: 12px; } }
/* ---------- 대화 안 질문 카드 (static/tray.js · 대표 10/20 "야 에픽처럼 질문카드 안뜨냐!!!! … 에픽한테 배워서") ----------
   EPIC .cw-card 와 같은 꼴: 테두리 1px · 둥근 모서리 · 'n/N · 묶음' 작은 줄 · 굵은 질문 · 번호 동그라미 붙은 세로 보기 (추천은 강조색 테두리).
   답한 질문은 접힌 카드(.qc-past) + 손님 말풍선(.cw-picked), 닫은 질문은 '나중에' 줄(.qc-later). 권하기·관전은 채팅창 위 그대로 (.tray) */
#thread > .tray.qcard { align-self: flex-start; width: 100%; max-width: 640px; margin: 0; padding: 14px 14px 12px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--card); box-shadow: 0 1px 8px rgba(30, 20, 70, .05); max-height: none; overflow: visible; }
#thread > .tray.qcard .tray-head { padding: 0 0 8px; gap: 6px; font-size: 12px; align-items: flex-start; }
#thread > .tray.qcard .tray-head > svg { display: none; }
#thread > .tray.qcard .tray-head .tray-title { color: var(--muted); font-weight: 500; padding-top: 2px; }
#thread > .tray.qcard .tray-step { color: inherit; margin: 0; }
#thread > .tray.qcard .tray-head.big .tray-title { color: var(--fg); font-size: 15px; font-weight: 650; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; padding-top: 0; }
#thread > .tray.qcard .tray-q { padding: 0 0 10px; gap: 4px; }
#thread > .tray.qcard .tray-q b { font-size: 15px; font-weight: 650; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
#thread > .tray.qcard .tray-opts { gap: 7px; }
#thread > .tray.qcard .tray-opt { align-items: center; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
#thread > .tray.qcard .tray-opt.rec { border-color: var(--accent); }
#thread > .tray.qcard .tray-n { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--hover2); color: var(--fg2); font-size: 12px; font-weight: 700; }
#thread > .tray.qcard .tray-opt.rec .tray-n, #thread > .tray.qcard .tray-opt.on .tray-n { background: var(--accent); color: #fff; }
#thread > .tray.qcard .tray-l { font-size: 14px; }
#thread > .tray.qcard .tray-l b { font-weight: 500; line-height: 1.4; word-break: keep-all; }
#thread > .tray.qcard .tray-in { padding: 10px 0 0; }
#thread > .tray.qcard .tray-in input, #thread > .tray.qcard .tray-in textarea { min-height: 40px; border-radius: 10px; }
#thread > .tray.qcard .tray-gaps { padding: 0; }
#thread > .tray.qcard .tray-multi-bar { bottom: 0; margin: 4px -14px -12px; padding: 8px 14px; border-radius: 0 0 14px 14px; background: var(--card); }
/* 카드가 대화 끝에 있는 동안은 대화 아래쪽 흐림을 걷는다 — 카드 단추가 흐림 속에 들었다 */
.transcript:has(> .thread > .tray.qcard:not([hidden])) { -webkit-mask-image: none; mask-image: none; }
/* 끝 한 줄: 단추는 옆으로 */
#thread > .tray.qcard.end { padding: 10px 12px; }
#thread > .tray.qcard.end .tray-head { padding-bottom: 6px; }
#thread > .tray.qcard.end .tray-opts { flex-direction: row; flex-wrap: wrap; gap: 6px; }
#thread > .tray.qcard.end .tray-opt { width: auto; min-height: 38px; padding: 6px 12px 6px 8px; }
/* 답한 질문: 접힌 카드 + 손님 말풍선 */
.qc-past { display: flex; flex-direction: column; gap: 8px; }
/* 자료 읽기 카드의 사실 목록: 처음 5줄 + '더 보기' (10/26) */
.facts-more > summary { cursor: pointer; margin-top: 2px; }
.facts-more > .facts { margin-top: 4px; }
.qc-pcard { align-self: flex-start; max-width: 640px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 14px; color: var(--muted); }
.qc-ps { flex: 1 0 100%; font-size: 11.5px; }
.qc-pq { flex: 1 1 0; min-width: 0; font-size: 13.5px; color: var(--fg2); line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.qc-pt { flex: none; font-size: 11px; font-weight: 700; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.qc-pl { flex: 1 0 100%; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.qc-pl li { display: flex; flex-direction: column; gap: 1px; word-break: keep-all; overflow-wrap: anywhere; }
.qc-pl li b { color: var(--fg); font-weight: 600; }
/* 나중에로 닫아 둔 질문: 누르면 다시 열린다 */
.qc-later { display: flex; }
.qc-later-b { display: inline-flex; align-items: center; gap: 10px; max-width: 640px; min-height: 42px; padding: 8px 14px; border: 1px dashed var(--border2);
  border-radius: 12px; background: none; color: var(--fg2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.qc-later-b:hover, .qc-later-b:focus-visible { background: var(--hover2); outline: none; }
.qc-later-b:disabled { opacity: .6; cursor: default; }
.qc-later-t { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.qc-later-n { flex: 1; min-width: 0; word-break: keep-all; }
.qc-later-go { flex: none; color: var(--accent-ink); font-weight: 600; }
.ro-conv .qc-later { display: none; }
@media (max-width: 860px) {
  #thread > .tray.qcard { padding: 12px 11px 10px; max-height: none; overflow: visible; }
  html.kb-up #thread > .tray.qcard, html.kb-up #thread > #tray.qcard:focus-within { max-height: none; }
  /* 쓰기 전 카드의 단추 줄이 대화 아래에 붙어 있는 동안(tray.js stuck — 카드 아래가 화면 밖) 그 위를 흐리게: 그 밑을 지나는 물음이 반쯤 잘려 보이지 않고 '더 있음'으로 (10/21 대표) */
  #thread > #tray.qcard .tray-gaps .tray-gact::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; background: linear-gradient(to bottom, transparent, var(--card));
    pointer-events: none; opacity: 0; transition: opacity .15s; }
  #thread > #tray.qcard.stuck .tray-gaps .tray-gact::before { opacity: 1; }
  #thread > .tray.qcard .tray-multi-bar { margin: 4px -11px -10px; padding: 8px 11px; }
  #thread > .tray.qcard .tray-opt { min-height: 48px; }
  /* 카드에 답을 적는 동안(자판)은 아래 입력창을 접어 자판 위 자리를 카드에 (예전 채팅창 위 상자와 같게) */
  html.kb-up:has(#thread > #tray:focus-within) #composer .box { display: none; }
  /* 하나씩 답하는 카드(asking, 10/20 PH3)도 대화 안에서는 높이를 묶지 않는다 — 48vh 는 채팅창 위 상자일 때. 직접 쓰기 줄은 카드 아래에 붙인다 */
  html:not(.kb-up) #thread > #tray.qcard.asking { max-height: none; }
  #thread > #tray.qcard.asking .tray-in { bottom: 0; margin: 4px -11px -10px; padding: 8px 11px; background: var(--card); border-radius: 0 0 14px 14px; }
  #thread > #tray.qcard.asking:has(.tray-multi-bar) .tray-in, #thread > #tray.qcard.asking .tray-in:has(+ .tray-warn) { position: static; margin: 0; padding: 10px 0 0; background: none; border: 0; }
}
/* ---------- 문서 창 단축키 (dockeys.js, 대표 10/23 "단축키도 다되고") ---------- */
#doc-view:focus { outline: none; }
/* 찾기·바꾸기 (Ctrl+F · Ctrl+H): 문서 위 오른쪽 작은 칸 — 두 줄은 같은 틀 (왼쪽 입력칸 같은 너비 · 오른쪽 칸 같은 너비 · 모두 같은 높이, 오와 열) */
.doc-find { position: absolute; top: 8px; right: 12px; z-index: 6; display: grid; gap: 6px; width: min(380px, calc(100% - 24px)); padding: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-l); --dfh: 32px; }
.doc-find[hidden], .dock-body:has(#doc-view:not(.active)) .doc-find, .dock.idle .doc-find { display: none; }
.doc-find .df-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 6px; }
.doc-find .df-rep { display: none; }
.doc-find.rep .df-rep { display: grid; }
.doc-find .df-tail { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, var(--dfh)); align-items: center; gap: 2px; }
.doc-find .df-rep .df-tail { grid-template-columns: 1fr 1fr; gap: 6px; }
.doc-find input { min-width: 0; height: var(--dfh); min-height: var(--dfh); padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; }
.doc-find .df-n { text-align: right; padding-right: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.doc-find .df-n.none { color: var(--err); }
.doc-find .icon-btn { width: var(--dfh); height: var(--dfh); min-width: var(--dfh); min-height: var(--dfh); padding: 0; }
.doc-find .flip { display: inline-flex; transform: rotate(180deg); }
.doc-find.rep [data-df="rep"] { color: var(--accent-ink); background: var(--accent-soft); }
.doc-find .df-rep .btn { height: var(--dfh); min-height: var(--dfh); min-width: 0; padding: 0 6px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .doc-find { --dfh: 38px; } .doc-find .df-row { grid-template-columns: minmax(0, 1fr) 210px; } }
::highlight(doc-find) { background-color: rgba(255, 196, 0, .42); color: inherit; }
::highlight(doc-find-cur) { background-color: rgba(255, 138, 0, .78); color: #111; }
table.hw td.find-cur { box-shadow: inset 0 0 0 2px rgba(255, 138, 0, .9); }
/* 단축키 목록 (?) — 이름 | 키, 키는 같은 꼴의 작은 상자 */
.modal.kb-modal { width: min(560px, 100%); }
.kb-list { display: grid; grid-template-columns: 1fr; gap: 2px; max-height: calc(100dvh - 170px); overflow: auto; margin-top: 8px; }
.kb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.kb-row:last-child { border-bottom: 0; }
.kb-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-k { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.kb-k kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--bg);
  font: 600 11.5px/1.5 var(--mono); text-align: center; white-space: nowrap; }
@media (hover: none) { #t-keys { display: none; } }

/* ---------- 10/26 night-write: 화면 옮김 '<' '>' · 작성 중 한 줄 · 바로 시작은 회색 (대표 10/25 23:04 · 23:20) ---------- */
.nav-pair { display: inline-flex; flex: none; gap: 2px; align-items: center; }
.nav-pair[hidden] { display: none; }
.nav-b { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; padding: 0; }
.nav-b:hover:not(:disabled) { background: var(--hover2); color: var(--fg); }
.nav-b:disabled { opacity: .3; cursor: default; }
.nt-box .hd .nav-pair { margin: 2px 0 0 -6px; }
.np-top .nav-pair { margin-left: -6px; }
.fill-wait { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.4; }
.fill-wait[hidden], .dock-wait[hidden] { display: none; }
/* 답만 기다리는 멈춤 (대표 11/1 "되고 있는 건지 질문해서 멈춘 건지 구분이 너무 안 된다") — 줄 글자와 작업 카드 막대를 노랑 계열로 */
.fill-wait.is-ask, .dock-wait.is-ask { color: var(--warn); }
.progress.is-wait i { background: var(--warn); }
.dock-wait { margin: 0; padding: 6px 2px 8px; font-size: 12.5px; }
.tray-nb { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tray-nb:disabled { opacity: .3; cursor: default; background: none; }
.tray-gnav .tray-nb { padding: 0; }
.tray-gact .btn.go-soft, .tray-gact .btn.go-soft:hover { background: var(--hover2); color: var(--muted); border-color: transparent; box-shadow: none; }
.tray-opt[data-soft] { background: var(--soft); color: var(--muted); }
.tray-opt[data-soft] .tray-l b { color: var(--muted); font-weight: 500; }
.tray-busy { font-weight: 600; color: var(--fg); }
.ask-bg { z-index: 96; }   /* 화면 안 확인 창 (UI.ask) — 열린 창 위 */
.modal.go-ask-m h3.go-ask-h { margin: 4px 36px 16px 0; font-size: 16px; }
.modal.go-ask-m .go-ask { justify-content: flex-end; gap: 8px; }
.modal.go-ask-m .go-ask .btn { min-width: 76px; justify-content: center; }

/* 떠 있는 목록 창 (floatwin.js — 컴퓨터만, 대표 10/26 "드래그로 창 왜 못옮겨 … 목록같은거! 보관함 등"): 뒤를 막지 않고, 머리 줄을 잡고 옮긴다 */
.pf-float { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; padding: 0 !important; display: block !important; }
.pf-float > :not(.nt-drop) { pointer-events: auto; }      /* 창과 그 위 작은 창(공고 별 팝업·지역 판)만 누른다 */
.pf-float > .pf-fbox { position: fixed; margin: 0; box-shadow: 0 18px 50px -12px rgba(11,15,20,.38), 0 2px 8px rgba(11,15,20,.08); }
.pf-fbox > h3, .pf-fbox > .hd { cursor: grab; }
.pf-moving, .pf-moving * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }
.modal.pf-fbox.vault-modal { width: min(920px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 190px)); }
.modal.pf-fbox.trash-modal { width: min(600px, calc(100vw - 32px)); height: min(520px, calc(100dvh - 190px)); }
.nt-bg.pf-float .nt-drop { display: none !important; }
.nt-bg.pf-float.nt-dropping .nt-box { outline: 2px dashed var(--fg2); outline-offset: -4px; }
/* 끌어 놓기 (PFDrag): 놓을 자리는 흐린 테두리, 여러 개는 'n개' 작은 표 */
.pf-drop-on { outline: 2px dashed var(--accent) !important; outline-offset: -3px; }
.pf-ghost { position: fixed; top: -200px; left: -200px; padding: 4px 11px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vt-card.vsel, .vt-line.vsel { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-item[draggable="true"], .vt-card[draggable="true"], .vt-line[draggable="true"] { -webkit-user-drag: element; }