/* CLI 관리 — renderer styles, ported from mockup 02 앱 패밀리 (gom's pick, 2026-10-04).
 * Source: C:\Users\claude\tools\claude_harness\climock_1004\designs\02\style.css
 * Family tokens: LiveMix "다크 콘솔" (surfaces, accent, lamp), Enqueue slate-card (paused amber, standby violet, pills),
 *                Tally (connected button pairs, Cascadia Mono numbers).
 * Colour rules  A = LiveMix blue #4c8dff · B = Enqueue violet #8b7cf6 (letter badges, never status colours)
 *               승인 대기/답변 필요 = amber #f5c451 (loudest) · 완료/안 봄 = green #35d07f · 작업 중 = neutral ✻
 *               light ring = selection · brand red #e5302d = logo dot only
 * Fonts         Malgun Gothic (system) + Cascadia Mono (system) — no web fonts.
 */
:root {
  --bg: #15171b;
  --bar: #1b1e24;
  --card: #1f2228;
  --card2: #272b32;
  --line: #2f343c;
  --hair: #262a31;
  --slot: #2a2e36;
  --slotline: #3a404a;
  --field: #242932;
  --text: #f1f2f4;
  --soft: #c6ccd5;
  --dim: #98a0ab;
  --term: #111317;

  --a: #4c8dff;
  --a-fill: #2a68dc;
  --a-ink: #8db5ff;
  --b: #8b7cf6;
  --b-fill: #6c58e6;
  --b-ink: #b6abff;
  --wait: #f5c451;
  --wait-ink: #2b2104;
  --done: #35d07f;
  --done-ink: #06210f;
  --done-text: #62e0a2;
  --brand: #e5302d;
  --sel: #e9ecf1;

  --side: 480px;
  /* 10/10: 아이폰(폰 웹)은 윈도우 글꼴이 없어 고정폭이 Courier 로 떨어졌다 → 애플 글꼴을 뒤에(윈도우는 그대로) */
  --ui: "Malgun Gothic", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --mono: "Cascadia Mono", Consolas, "Malgun Gothic", ui-monospace, Menlo, monospace;
  color-scheme: dark;   /* 10/10: 입력칸·Codex 화면 줄 등 기본 스크롤바·입력 부품도 어둡게(밝은 회색 기본 스크롤바 방지) */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  word-break: keep-all;
  user-select: none;
}
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.flex { flex: 1 1 auto; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }

/* ── atoms ─────────────────────────────────────────────────── */
.logo { display: block; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.wordmark { font: 700 19px/1 var(--ui); letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.ico { width: 15px; height: 15px; flex: none; }
.ico-s { width: 13px; height: 13px; }

.ab {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  font: 700 13px/1 var(--ui); font-style: normal; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ab-A { background: var(--a-fill); }
.ab-B { background: var(--b-fill); }
.ab-sm { width: 19px; height: 19px; border-radius: 5px; font-size: 12px; }
.ab-md { width: 24px; height: 24px; border-radius: 6px; font-size: 13.5px; }
.ab-lg { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
.ab-xl { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.ab-astra { background: #4a515c; color: #f1f2f4; font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 24px; padding: 0 10px 0 7px; border-radius: 12px;
  border: 1px solid var(--slotline); background: var(--card2); color: #d9dee6;
  font: 700 12.5px/1 var(--ui); white-space: nowrap;
}
.g { display: inline-grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; width: 14px; color: var(--dim); }
.g-busy { font-size: 13px; }
.g-shell { font: 700 12px/1 var(--mono); }
.pill-waiting, .pill-answer { background: var(--wait); border-color: var(--wait); color: var(--wait-ink); }
.pill-waiting .g, .pill-answer .g {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--wait-ink); color: var(--wait); font: 900 12px/1 var(--ui);
}
.pill-idle, .jpill-done { background: rgba(53, 208, 127, .13); border-color: rgba(53, 208, 127, .5); color: var(--done-text); }
.pill-idle .g, .jpill-done .g { color: var(--done-text); font-weight: 700; }
.pill-unknown, .jpill-failed, .jpill-unknown { border-style: dashed; border-color: #6b7380; background: transparent; color: var(--soft); }
.spin { width: 14px; height: 14px; flex: none; color: #b7bec8; }

.unseen {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  background: var(--done); color: var(--done-ink); font: 700 12px/1 var(--ui); white-space: nowrap; flex: none;
}
.since { font: 13px/1 var(--mono); color: var(--dim); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 36px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  font: 700 14px/1 var(--ui); white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.btn:hover:not(:disabled) { background: #2e333b; }
.btn:active:not(:disabled) { background: #22262d; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-sm { height: 28px; padding: 0 10px; border-radius: 8px; gap: 5px; font-size: 13px; }
.btn-sm .ico { width: 12px; height: 12px; }
.btn-new.is-open { background: #343a45; border-color: #6b7380; }
.btn-to-B { color: var(--b-ink); border-color: rgba(139, 124, 246, .55); background: rgba(139, 124, 246, .12); }
.btn-to-A { color: var(--a-ink); border-color: rgba(76, 141, 255, .55); background: rgba(76, 141, 255, .12); }
.btn-to-B:hover:not(:disabled) { background: rgba(139, 124, 246, .2); }
.btn-to-A:hover:not(:disabled) { background: rgba(76, 141, 255, .2); }
.btn-fill-B { background: var(--b-fill); border-color: var(--b-fill); color: #fff; }
.btn-fill-A { background: var(--a-fill); border-color: var(--a-fill); color: #fff; }
.btn-fill-B:hover:not(:disabled) { background: #7a68ee; }
.btn-fill-A:hover:not(:disabled) { background: #3574e6; }
.btn-ok { color: var(--done-text); border-color: rgba(53, 208, 127, .5); background: rgba(53, 208, 127, .1); }
.btn-ok:hover:not(:disabled) { background: rgba(53, 208, 127, .18); }
.btn-big { height: 52px; padding: 0 26px; border-radius: 12px; font-size: 17px; gap: 10px; }
.btn-big .ico { width: 18px; height: 18px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  min-width: 0;
}
.chead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none;
  height: 46px; padding: 0 16px; border-bottom: 1px solid var(--hair);
}
.chead h2 { font: 700 15px/1 var(--ui); white-space: nowrap; }
/* 좁으면 들어가는 개수까지만 보이고 나머지는 통째로 다음 줄(숨김) — 글자 중간에서 잘리지 않게(10/5, 0.1.9 까지 '작업' 에서 잘림) */
.cnts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; align-items: center; gap: 0 14px;
  height: 16px; min-width: 0; overflow: hidden; }
.cnt { display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px/1 var(--ui); color: var(--soft); white-space: nowrap; }
.cnts > .cnt { height: 16px; }   /* 줄 높이 = 칸 높이 — 다음 줄(숨김)의 윗부분이 1~3.5px 비치지 않게(아스트라 P3) */
.cnt .g { width: auto; }
.cnts.is-compact { gap: 0 10px; }
.cnts.is-compact .cw { display: none; }          /* 좁을 때: 기호 + 숫자만(app.js renderCounts) */
.cnt-waiting, .cnt-answer { color: var(--wait); }
.cnt-waiting .g, .cnt-answer .g { width: 15px; height: 15px; border-radius: 50%; background: var(--wait); color: var(--wait-ink); font: 900 12px/1 var(--ui); }
.cnt-idle, .cnt-idle .g { color: var(--done-text); }

.um { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.um-l { font: 12.5px/1 var(--ui); color: var(--dim); }
.um-v { font: 700 12.5px/1 var(--mono); color: var(--text); }
/* 너비 = 폭 단계 기본(--umw: 62·54·40·28) 과 PC 칸 자리 맞춤 상한(--umcap, .top.fitN) 중 작은 것 */
.um-bar { display: block; width: min(var(--umw, 62px), var(--umcap, 999px)); height: 6px; border-radius: 3px; background: var(--slot); overflow: hidden; flex: none; }
.um-bar i { display: block; height: 100%; border-radius: 3px; }
.um-bar i:not([style*="width: 0%"]) { min-width: 3px; }
.um-A i { background: var(--a); }
.um-B i { background: var(--b); }
.um-astra i { background: #c6ccd5; }

.mchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; flex: none;
  border-radius: 6px; background: var(--field); border: 1px solid var(--line);
  font: 12px/1 var(--mono); color: #aeb6c2; white-space: nowrap;
}
.mchip-diff { color: var(--text); border-color: #6b7380; background: #2b3039; }
.smeta .mchip { margin-left: auto; }
.mchip-t { height: 24px; font-size: 12.5px; }

/* ── frame ─────────────────────────────────────────────────── */
.app { display: grid; grid-template-rows: 64px minmax(0, 1fr); height: 100vh; }
.top {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 0 16px 0 18px; background: var(--bar); border-bottom: 1px solid var(--line);
}
.mtop { display: none; }
.vsep { width: 1px; height: 30px; background: var(--line); flex: none; margin: 0 2px; }
.accts { display: flex; gap: 10px; min-width: 0; overflow: hidden; }
.acct {
  display: grid; grid-template-columns: auto auto; column-gap: 11px; row-gap: 6px; align-items: center;
  padding: 6px 14px 6px 8px; border-radius: 11px; flex: none;
  background: var(--card); border: 1px solid var(--line);
}
.acct > .ab { grid-row: 1 / span 2; }
.acct-l1 { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.acct-l1 .aseen { margin-left: 2px; }
.amail { font: 13.5px/1.15 var(--ui); color: var(--soft); }
.acount, .aname { font: 700 13px/1.15 var(--ui); color: var(--text); }
.acct-l2 { display: flex; align-items: center; gap: 14px; }
.aseen { font: 12px/1 var(--ui); color: var(--dim); white-space: nowrap; }

.viewseg { display: inline-flex; flex: none; }
.viewseg .btn { width: 40px; padding: 0; }
.viewseg .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.viewseg .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.viewseg .btn[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: #15171b; }

.body {
  --layout-gap: 14px;
  display: grid; grid-template-columns: var(--side-width, var(--side)) var(--layout-gap) minmax(0, 1fr);
  padding: 14px; min-height: 0;
}
.side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.side > .side-divider { flex: 0 0 var(--layout-gap); }
/* the window list has priority (who needs me); 아스트라 takes what is left and scrolls */
.ccard { flex: 0 0 auto; max-height: calc(100% - 140px); min-height: 0; display: flex; flex-direction: column; }
.ccard .slist { overflow-y: auto; min-height: 0; }
.acard { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.acard .jlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.acard.is-empty { flex: 0 0 auto; }
body:not(.is-mini) .side.is-sized > .ccard { flex: 0 0 var(--side-height); max-height: none; }
body:not(.is-mini) .side.is-sized > .acard { flex: 1 1 0; }
.slist::-webkit-scrollbar, .jlist::-webkit-scrollbar, .tx::-webkit-scrollbar { width: 8px; }
.slist::-webkit-scrollbar-thumb, .jlist::-webkit-scrollbar-thumb, .tx::-webkit-scrollbar-thumb { background: #3a404a; border-radius: 4px; }

/* session list — fixed order; status = glyph + text (+ tint only for the rows that need gom) */
.slist { display: flex; flex-direction: column; gap: 3px; padding: 6px; }
.srow {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.srow:hover { background: #252931; }
.srow > .ab { grid-row: 1; width: 24px; height: 24px; font-size: 13.5px; }
.stitle { grid-column: 2; font: 700 15px/1.35 var(--ui); color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.smeta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }   /* 좁으면 모델 칩이 다음 줄로(10/5, 0.1.9 까지 행 밖으로 잘림) */
.srow.st-waiting, .srow.st-answer { background: rgba(245, 196, 81, .1); box-shadow: inset 3px 0 0 var(--wait); }
.srow.is-unseen { background: rgba(53, 208, 127, .075); box-shadow: inset 3px 0 0 var(--done); }
.srow[aria-current="true"] { background: #2b3038; box-shadow: inset 0 0 0 1.5px rgba(233, 236, 241, .72); }
.srow.st-waiting[aria-current="true"], .srow.st-answer[aria-current="true"] { box-shadow: inset 3px 0 0 var(--wait), inset 0 0 0 1.5px rgba(233, 236, 241, .72); }
.srow.is-unseen[aria-current="true"] { box-shadow: inset 3px 0 0 var(--done), inset 0 0 0 1.5px rgba(233, 236, 241, .72); }

/* Astra jobs */
.jlist { display: flex; flex-direction: column; padding: 2px 6px 6px; }
.jrow { padding: 10px 10px 10px 12px; border-top: 1px solid var(--hair); }
.jrow:first-child { border-top: 0; }
.jhead { display: flex; align-items: center; gap: 10px; }
.jtitle { flex: 1 1 auto; min-width: 0; font: 700 14.5px/1.35 var(--ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpill-running { color: var(--soft); }
.jprog { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.jsteps { font: 700 13px/1 var(--mono); color: var(--text); white-space: nowrap; min-width: 66px; }
.jtools { font: 13px/1 var(--mono); color: var(--soft); white-space: nowrap; }
.segbar { display: flex; gap: 3px; flex: 1 1 auto; height: 8px; min-width: 60px; }
.segbar i { flex: 1 1 0; border-radius: 2px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.jo-A .segbar i.on { background: var(--a); }
.jo-B .segbar i.on { background: var(--b); }
.jo-none .segbar i.on { background: #c6ccd5; }
.js-done .segbar i.on { background: var(--done); }
.jel { font: 13px/1 var(--mono); color: var(--dim); white-space: nowrap; min-width: 40px; text-align: right; margin-left: auto; }
.jfoot { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 22px; }
.jowner { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; font: 13px/1.3 var(--ui); color: var(--soft); }
.jowner > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── work area: panes keep their DOM parent; only their rectangles change ── */
.work { min-width: 0; min-height: 0; }
.stage { position: relative; display: grid; height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.stage > * { grid-row: 1; min-width: 0; min-height: 0; }
.stage.is-tiles { display: block; }
.stage.is-tiles > .pane, .stage > .tile-divider, .tile-preview {
  position: absolute; left: var(--tile-x); top: var(--tile-y); width: var(--tile-w); height: var(--tile-h);
}
.stage.is-tiles > .pane { overflow: hidden; transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease; }
.stage.is-tiles .phead { cursor: grab; touch-action: none; }
.stage.is-tiles .prow2 { flex-wrap: wrap; row-gap: 4px; }
.stage.is-tiles .prow2 > .pair { margin-left: auto; }
.stage > .pane.is-lifting { opacity: .45; }
.tile-preview {
  z-index: 6; pointer-events: none; border-radius: 10px;
  background: rgba(233, 236, 241, .07); border: 1.5px solid rgba(233, 236, 241, .55);
}
body.is-dragging .stage > .pane, body.is-dragging-row .stage > .pane { transition: none; }
@media (prefers-reduced-motion: reduce) { .stage.is-tiles > .pane { transition: none; } }

.pane, .ext { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.pane.is-focus { border-color: rgba(233, 236, 241, .62); }
.pane.st-waiting, .pane.st-answer { border-color: rgba(245, 196, 81, .7); }
/* 10/10: 고른 칸이 승인 대기·답변 필요여도 고른 표시가 보이게(노란 테두리에 흰 테두리가 덮였다) — 목록 줄과 같은 방식 */
.pane.is-focus.st-waiting, .pane.is-focus.st-answer { box-shadow: 0 0 0 1.5px rgba(233, 236, 241, .72); }
.pane.is-exited .well { opacity: .55; }
.thead { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px 0 16px; min-width: 0; }
.ttitle { font: 700 18px/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tstart { font: 13px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.tpath { font: 13px/1 var(--mono); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* split pane header: two rows */
.phead { display: flex; flex-direction: column; gap: 9px; padding: 12px 12px 10px 14px; border-radius: 13px 13px 0 0; min-width: 0; cursor: pointer; }
.pane.st-waiting .phead, .pane.st-answer .phead { background: rgba(245, 196, 81, .09); }
.prow1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptitle { font: 700 15.5px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prow2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pair { display: inline-flex; flex: none; }
.pair .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pair .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
/* 10/10 첨부 — 큰 칸 머리 [첨부], 칸 나누기 머리는 아이콘만(마우스 올리면 이름) · 올리는 동안 % · 파일을 칸 위로 끌어 오면 점선 */
.btn-attach { position: relative; overflow: hidden; }
.btn-attach .ico { width: 15px; height: 15px; }
.btn-sm.btn-attach .ico { width: 14px; height: 14px; }
.btn-attach.is-icon { width: 28px; padding: 0; }
.btn-attach.is-busy:disabled { opacity: 1; color: var(--dim); cursor: progress; }
/* 진행 막대 = 둥근 모서리 안쪽에 바탕 줄 + 채움(마지막 디자인 검사: 막대를 아래 끝에 붙이면 0~12% 동안 모서리에 가려 안 보였다) */
.btn-attach.is-busy::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--slotline); }
.btn-attach .attbar { position: absolute; left: 5px; bottom: 3px; z-index: 1; height: 2px; min-width: 3px; max-width: calc(100% - 10px); border-radius: 1px; background: var(--sel); }
.pane.is-drop { outline: 2px dashed var(--soft); outline-offset: -6px; }
/* 디자인 검사(1280 폭 = 1920 화면 150%): 머리가 좁으면 [첨부]는 아이콘만(이름은 마우스 올리면)·시작 시각 숨김 — 창 폭이 아니라 그 칸 머리 폭으로 */
.thead { container-type: inline-size; }
@container (max-width: 1000px) {
  .thead .tstart { display: none; }
  .thead .btn-attach .attl { display: none; }
  .thead .btn-attach { width: 36px; padding: 0; }
}

/* terminal well — xterm.js fills .xt; FitAddon measures .xt (no padding on it) */
.well {
  margin: 0 8px 8px; padding: 12px 6px 6px 16px; min-height: 0; min-width: 0; overflow: hidden;
  border-radius: 10px; background: var(--term); border: 1px solid #22252c;
}
.xt { width: 100%; height: 100%; min-height: 0; }
.xt .xterm { height: 100%; }
.xt .xterm-viewport { background-color: var(--term) !important; }
.pane.is-split .well { margin: 0 6px 6px; padding: 10px 4px 4px 12px; }

/* external session — read-only conversation */
.tx {
  height: 100%; overflow-y: auto; padding-right: 10px;
  font: var(--tx-font, 14.5px)/1.6 var(--mono); color: #e6e9ee; white-space: pre-wrap; overflow-wrap: anywhere;
  user-select: text;
}
.msg { margin: 0 0 12px; }
.msg-user { color: #b9c1cd; }
.msg-assistant { color: #eef0f3; }
.msg-tool { color: #a9b1bd; }
.msg-tool .mk { color: #6cc8e0; }
.mk { color: var(--dim); }

/* split dividers */
.divider { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; cursor: col-resize; touch-action: none; }
.divider::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 50%; width: 1px; margin-left: -0.5px; background: #2a2e36; pointer-events: none; }
/* The extra 6 px sit over the pane's outer margin, outside its terminal well. */
.divider::after { content: ""; position: absolute; inset: 0 -6px; }
.divider-row { cursor: row-resize; }
.divider-row::before { top: 50%; bottom: auto; left: 16px; right: 16px; width: auto; height: 1px; margin: -0.5px 0 0; }
.divider-row::after { inset: -6px 0; }
.grip {
  position: relative; flex: none; width: 12px; height: 68px; max-width: 100%; max-height: 100%; border-radius: 6px; pointer-events: none;
  background-color: #30353e; border: 1px solid #4a515d;
  background-image: radial-gradient(circle, #c3c9d2 0 1.4px, transparent 1.8px);
  background-size: 10px 9px; background-position: center 3px; background-repeat: repeat-y;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.divider-row .grip { width: 68px; height: 12px; background-size: 9px 10px; background-position: 3px center; background-repeat: repeat-x; }
.divider:hover .grip, .divider.is-drag .grip { border-color: #8a929e; background-color: #3a404a; }
.divider:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; border-radius: 6px; }
body.is-dragging, body.is-dragging * { cursor: col-resize !important; }
body.is-dragging-row, body.is-dragging-row * { cursor: row-resize !important; }
body.is-moving, body.is-moving * { cursor: grabbing !important; }
body:is(.is-dragging, .is-dragging-row, .is-moving), body:is(.is-dragging, .is-dragging-row, .is-moving) * { user-select: none !important; -webkit-user-select: none !important; }

.empty { display: grid; place-items: center; height: 100%; }

/* ── dialogs ───────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(9, 10, 13, .62); }
.scrim-soft { background: rgba(9, 10, 13, .5); }
.dlg {
  position: fixed; z-index: 60;
  background: var(--card); border: 1px solid #3a404a; border-radius: 14px;
  box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 22px 24px 20px;
}
.dtitle { font: 700 19px/1.2 var(--ui); }
.dbtns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dbtns .btn { min-width: 92px; height: 38px; }

.dlg-move { left: 50%; top: 46%; transform: translate(-50%, -50%); width: 600px; max-width: calc(100vw - 40px); }
.dsess { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 700 15.5px/1.3 var(--ui); color: var(--soft); }
.dsess span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 18px; }
.slot {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px 12px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line);
}
.slot-to-B { border-color: rgba(139, 124, 246, .7); background: rgba(139, 124, 246, .1); }
.slot-to-A { border-color: rgba(76, 141, 255, .7); background: rgba(76, 141, 255, .1); }
.smail { font: 13.5px/1.2 var(--ui); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rarrow { color: var(--dim); }
.rarrow .ico { width: 44px; height: 18px; }

.dlg-new { top: 74px; width: 560px; max-width: calc(100vw - 16px); }
.dlg-new::before {
  content: ""; position: absolute; top: -7px; right: var(--notch, 36px); width: 12px; height: 12px;
  background: var(--card); border-left: 1px solid #3a404a; border-top: 1px solid #3a404a; transform: rotate(45deg);
}
.dlg-new.at-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dlg-new.at-center::before { display: none; }
.flabel { display: block; margin: 18px 0 8px; font: 700 13px/1 var(--ui); color: var(--dim); }
.segs { display: flex; }
.segs-mode { margin-top: 10px; }
.seg {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0;
  height: 40px; padding: 0 12px; border: 1px solid var(--line); background: var(--card2); color: var(--soft);
  font: 700 13.5px/1 var(--ui); white-space: nowrap; cursor: pointer;
}
.seg > span { overflow: hidden; text-overflow: ellipsis; }
.seg:first-child { border-radius: 9px 0 0 9px; }
.seg + .seg { border-radius: 0 9px 9px 0; margin-left: -1px; }
.segs-acct .seg { flex: 1 1 auto; justify-content: flex-start; font-weight: 400; }   /* 10/10: 내용 폭 기준 — 이메일 두 개가 잘리지 않게(CODEX 칸은 짧게) */
.seg-B[aria-pressed="true"] { position: relative; background: rgba(139, 124, 246, .16); border-color: var(--b); color: var(--text); font-weight: 700; }
.seg-A[aria-pressed="true"] { position: relative; background: rgba(76, 141, 255, .16); border-color: var(--a); color: var(--text); font-weight: 700; }
.segs-mode .seg[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: #15171b; }
.pathrow { display: flex; gap: 8px; }
.pathf {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  background: var(--field); border: 1px solid var(--line); border-radius: 9px;
  font: 13.5px/1 var(--mono); color: var(--text);
}
.pathf .ico { color: var(--dim); }
.pathf span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.pathrow .btn { height: 40px; }

/* update — quiet top-bar button + dialog with a progress bar (n% only) */
.btn-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--soft); font-weight: 700; padding: 0 10px; }
.btn-quiet:hover:not(:disabled) { background: var(--card2); border-color: var(--line); }
.btn-quiet.is-latest { color: var(--done-text); }
.dlg-upd { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 420px; max-width: calc(100vw - 40px); }
.uver { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 700 22px/1 var(--mono); color: var(--text); }
.uver .from { color: var(--dim); font-weight: 400; }
.uver .rarrow .ico { width: 34px; height: 16px; }
.uprog { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ubar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--slot); overflow: hidden; }
.ubar i { display: block; height: 100%; border-radius: 4px; background: var(--sel); transition: width .2s linear; }
.upct { font: 700 13px/1 var(--mono); color: var(--text); min-width: 40px; text-align: right; }

/* login gate */
body.is-boot .app, body.is-boot .login { visibility: hidden; }
body.is-login .app { display: none; }
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.login-box { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 380px; max-width: calc(100vw - 40px); margin-top: -60px; }
.login-title { font: 700 28px/1.2 var(--ui); letter-spacing: -0.01em; }
.login-card { width: 100%; padding: 22px 22px 22px; margin-top: 12px; }
.btn-login { width: 100%; height: 52px; font-size: 16px; border-radius: 10px; gap: 10px; }
.btn-login .ico { width: 18px; height: 18px; }
.btn-light { background: var(--sel); border-color: var(--sel); color: #15171b; }
.btn-light:hover:not(:disabled) { background: #ffffff; }
.btn-login.is-done { background: rgba(53, 208, 127, .14); border-color: rgba(53, 208, 127, .6); color: var(--done-text); opacity: 1; }

/* ── narrower windows: the top bar sheds detail step by step (default window is 1600, minimum 1100) ── */
@media (max-width: 1800px) {
  .amail { display: none; }
  :root { --umw: 54px; }
}
@media (max-width: 1500px) {
  :root { --side: 388px; --umw: 40px; }
  .body { --layout-gap: 12px; padding: 12px; }
  .acct .aseen:not(.areset) { display: none; }
  .acct-l2 { gap: 10px; }
  .acct { padding: 6px 11px 6px 7px; column-gap: 9px; }
  .accts { gap: 8px; }
  .wordmark, .vsep { display: none; }
  .btn { padding: 0 12px; }
  .top { gap: 12px; }
  #updLabel { display: none; }
  .btn-quiet { padding: 0 9px; }
}
@media (max-width: 1240px) {
  .top > .brand { display: none; }
  :root { --umw: 28px; }
  .acct-l2 { gap: 8px; }
  .top { padding: 0 10px 0 10px; gap: 9px; }
  .btn { padding: 0 10px; }
  .viewseg .btn { width: 34px; }
  .thead { gap: 9px; }
  .tstart { display: none; }
}
.btn-quiet.is-latest #updLabel { display: inline !important; }

/* ── 10/6 PC 칸(아스트라 옆) — 세로 막대 채널: CPU·메모리·GPU·VRAM·디스크 + 업/다운 ──
   막대 = 얼마나 찼나(글자는 쓴 양만, 전체 용량은 마우스 올리면). 노랑은 용량 90% 넘음일 때만(app.js paintPc). */
.ab-pc { background: #4a515c; color: #f1f2f4; }
.ab-pc svg { display: block; width: 17px; height: 17px; }
.acct-pc > .ab { grid-row: 1; }
.acct-pc .pc-name { font: 700 12px/1 var(--ui); color: var(--text); align-self: center; }
#gomPcCard { grid-template-columns: auto auto auto; }
.pcg { display: flex; align-items: center; gap: 15px; }
.pch { display: inline-flex; align-items: center; gap: 7px; }
.pct { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pl { font: 12.5px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.pv { font: 700 12.5px/1 var(--mono); color: var(--text); white-space: nowrap; }
.pv.is-hot { color: var(--wait); }
.pmeter { position: relative; display: block; width: 6px; height: 32px; border-radius: 3px; background: var(--slot); overflow: hidden; flex: none; }
.pmeter i { position: absolute; left: 0; right: 0; bottom: 0; min-height: 3px; border-radius: 3px; background: #c6ccd5; }
.pmeter i.is-zero { min-height: 0; }
.pmeter.is-hot i { background: var(--wait); }
.acct-pc .s { display: none; }

/* PC 칸이 있으면 위쪽 줄이 자리를 내준다 — 창 폭 경계가 아니라 실제로 남는 자리를 재서(app.js fitTop) 덜 쓰는 것부터 한 단계씩.
   10/6 아스트라 P2: 폭 경계로만 접으면 경계 바로 위(1241~1380 등)·칸 나누기 단추·'최신 버전'·웹 반영 시각/다운로드가 보일 때 잘림.
   .top.fitN 은 누적(fit1…fitN 전부 붙음). 빠진 값은 PC 칸에 마우스 올리면(title). */
.top.fit1 #updLabel { display: none; }                                   /* 1 '업데이트 확인' 글자(아이콘·기능 그대로) */
.top.fit1 #btnUpdate { padding: 0 9px; }
.top.fit2 .amail { display: none; }                                      /* 2 A·B 이메일 */
.top.fit3 { --umcap: 40px; }                                             /* 3 사용량 막대 40 */
.top.fit4 .wordmark, .top.fit4 .vsep { display: none; }                  /* 4 'CLI 관리' 글자 */
.top.fit5 .blab { display: none; }                                       /* 5 새 창·줄이기·다운로드 글자(아이콘 그대로) */
.top.fit5 #btnNew, .top.fit5 #btnShrink, .top.fit5 .wdlbtn { padding: 0 10px; }
.top.fit6 .acct-pc .f { display: none; }                                 /* 6 업/다운 짧게(K·M) */
.top.fit6 .acct-pc .s { display: inline; }
.top.fit7 { --umcap: 32px; }                                             /* 7 막대 32 · PC 칸 사이 좁게 */
.top.fit7 .pcg { gap: 10px; }
.top.fit7 .pch { gap: 6px; }
.top.fit8 { --umcap: 24px; }                                             /* 8 막대 24 · 더 좁게 */
.top.fit8 .pcg { gap: 8px; }
.top.fit8 .pch { gap: 5px; }
.top.fit9 .areset { display: none; }                                     /* 9 아스트라 초기화 시각 */
.top.fit10 .acct-pc .pk-net { display: none; }                           /* 10 업/다운 */
.top.fit11 .acct-pc > .ab { display: none; }                             /* 11 PC 아이콘 */
.top.fit11 .acct-pc { padding-left: 11px; }
.top.fit12 { --umcap: 20px; }                                            /* 12 막대 20 */
.top.fit13 .acct-pc .pk-disk { display: none; }                          /* 13 디스크 */
.top.fit14 { --umcap: 16px; }                                            /* 14 막대 16 */
.top.fit15 .acct-pc .pk-mem { display: none; }                           /* 15 메모리 */
.top.fit16 .acct-pc .pk-vram { display: none; }                          /* 16 VRAM — 여기까지면 CPU·GPU 만 */
.top.fit17 .accts .aseen { display: none; }
.top.fit18 .acct { column-gap: 7px; padding-right: 8px; padding-left: 8px; }
.top.fit18 .acct-l2 { gap: 8px; }
.top.fit18 .um { gap: 4px; }
.top.fit19 .acct-l2 .um-bar { display: none; }
.top.fit19 .accts { gap: 4px; }
.top.fit19 .acct { column-gap: 4px; }

/* ── mini (380×720, always on top) — narrow window or 줄이기 ── */
body.is-mini .app { grid-template-rows: 52px minmax(0, 1fr); }
body.is-mini .top, body.is-mini .work { display: none; }
body.is-mini .mtop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 10px 0 12px; background: var(--bar); border-bottom: 1px solid var(--line);
}
body.is-mini .mtop .wordmark { display: inline; font-size: 16px; }
body.is-mini .body { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
body.is-mini .side { gap: 10px; }
body.is-mini .side-divider, body.is-mini .tile-divider, body.is-mini .tile-preview { display: none !important; }
body.is-mini .chead { height: 40px; padding: 0 12px; }
body.is-mini .chead h2 { font-size: 14px; }
body.is-mini .cnts { gap: 10px; }
body.is-mini .slist { padding: 4px; gap: 2px; }
body.is-mini .srow { padding: 6px 9px 7px; row-gap: 5px; column-gap: 9px; grid-template-columns: 22px minmax(0, 1fr); }
body.is-mini .srow > .ab { width: 22px; height: 22px; font-size: 12.5px; }
body.is-mini .stitle { font-size: 13.5px; -webkit-line-clamp: 1; }
body.is-mini .pill { height: 22px; font-size: 12px; padding: 0 9px 0 6px; }
body.is-mini .pill-waiting .g, body.is-mini .pill-answer .g { width: 15px; height: 15px; }
body.is-mini .since { font-size: 12px; }
body.is-mini .smeta .mchip { display: none; }
body.is-mini .jlist { padding: 2px 4px 4px; }
body.is-mini .jrow { padding: 8px 8px 9px 9px; }
body.is-mini .jtitle { font-size: 13.5px; }
body.is-mini .jprog { margin-top: 7px; }
body.is-mini .jsteps { font-size: 12.5px; min-width: 60px; }
body.is-mini .jel, body.is-mini .jfoot { display: none; }
body.is-mini .acard { min-height: 0; }

/* ── phone page (유튜브다운.com/cli — web.html + web.js) — mockup 02 web list ──
 * Scoped to body.web; also undoes the desktop width steps above (they match a 390 px phone too). */
html:has(body.web) { height: auto; }
body.web { overflow: auto; height: auto; min-height: 100%; font-size: 15px; user-select: text; -webkit-text-size-adjust: 100%; }
body.web .login-box { margin-top: -40px; }
body.web .btn-login { text-decoration: none; }
.wlist { max-width: 560px; margin: 0 auto; padding: 0 12px 28px; display: flex; flex-direction: column; gap: 12px; }
.wtop {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 58px; margin: 0 -12px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--line);
}
.web .wordmark { display: inline; font-size: 18px; }
.wsync {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--card2); border: 1px solid var(--line); font: 700 13.5px/1 var(--mono); color: var(--text); white-space: nowrap;
}
.wsync .ico { width: 14px; height: 14px; color: var(--dim); }
.wsync.is-stale { color: var(--wait); border-color: rgba(245, 196, 81, .55); background: rgba(245, 196, 81, .08); border-style: dashed; }
.wsync.is-stale .ico { color: var(--wait); }
.wcnts { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 2px 4px 0; }
.wcnts:empty { display: none; }
.web .cnt { font-size: 14px; }
.web .chead { height: 50px; padding: 0 16px; }
.web .chead h2 { font-size: 17px; }
.web .slist { padding: 6px; gap: 3px; }
.web .slist:empty, .web .jlist:empty { display: none; }
.web .srow { cursor: default; padding: 12px 12px 13px; row-gap: 9px; grid-template-columns: 26px minmax(0, 1fr); }
.web .srow:hover { background: none; }
.web .srow.st-waiting, .web .srow.st-answer { background: rgba(245, 196, 81, .1); }
.web .srow.is-unseen { background: rgba(53, 208, 127, .075); }
.web .srow > .ab { width: 26px; height: 26px; font-size: 14.5px; border-radius: 7px; }
.web .stitle { font-size: 16.5px; line-height: 1.4; -webkit-line-clamp: 3; }
.web .smeta { flex-wrap: wrap; row-gap: 7px; }
.web .pill { height: 28px; font-size: 14px; padding: 0 12px 0 8px; border-radius: 14px; }
.web .pill-waiting .g, .web .pill-answer .g { width: 18px; height: 18px; font-size: 13px; }
.web .unseen { height: 24px; font-size: 13.5px; padding: 0 9px; }
.web .since { font-size: 14px; }
.web .mchip { height: 24px; font-size: 13px; }
.web .jlist { padding: 2px 6px 6px; }
.web .jrow { padding: 14px 10px 14px 12px; }
.web .jhead { align-items: flex-start; }
.web .jtitle { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }   /* 띄어쓰기 없는 긴 이름(파일·경로)도 줄바꿈 */
.web .jprog { margin-top: 12px; }
.web .jsteps { font-size: 14.5px; min-width: 74px; }
.web .jtools { font-size: 14.5px; }
.web .segbar { height: 10px; }
.web .jel { font-size: 14px; }
.web .jfoot { margin-top: 11px; }
.web .jowner { font-size: 14.5px; }
.web .ab-sm { width: 21px; height: 21px; font-size: 12.5px; }
.wcodex { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.wreset { font: 12.5px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.web .um-l, .web .um-v { font-size: 13.5px; }
.web .um-bar { width: 70px; height: 7px; }
.wusage { padding: 4px 0; }
.wu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
.wu-row + .wu-row { border-top: 1px solid var(--hair); }
.wu-m { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.wu-m .um-bar { width: 56px; }
.wu-seen { font: 13px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.wdl { height: 48px; padding: 0 16px; border-radius: 10px; font-size: 15px; text-decoration: none; align-self: stretch; }
.wdl .ico { width: 16px; height: 16px; }
.web .g { font-size: 13px; }
.web .cnt .g { font-size: 13px; }
.web .ab-sm { font-size: 13px; }
.wreset { font-size: 13px; }
/* 10/6 폰 PC 칸(아스트라 칸 바로 아래) — 세로 막대 채널 3칸 × 2줄, 전체 용량까지 글자로 */
.wpcg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding: 12px 16px 16px; }
.web .wpcg .pl { font-size: 13px; }
.web .wpcg .pv { font-size: 13.5px; }
.web .wpcg .pmeter { width: 7px; height: 36px; }
.web .wpcg .pct { gap: 8px; }

/* ── 10/4: 우클릭 메뉴 [삭제] · 삭제 확인 · 폰 창 상세(최근 대화) ──
 * 되돌릴 수 없는 '삭제'에만 브랜드 빨강(로고 점과 같은 #e5302d). 나머지는 기존 dlg·btn·tx 그대로. */
.cmenu {
  position: fixed; z-index: 70; min-width: 156px; padding: 6px;
  background: var(--card); border: 1px solid #3a404a; border-radius: 11px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cmenu[hidden] { display: none; }
.cmi {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: 700 14px/1 var(--ui); cursor: pointer; text-align: left;
}
.cmi .ico { width: 15px; height: 15px; flex: none; }
.cmi:hover, .cmi:focus-visible { background: #2b3038; outline: none; }      /* 10/10: 마우스를 올리면 고른 항목이 보이게(위험 항목은 아래 빨강) */
.cmi-danger { color: #ff8a8f; }
.cmi-danger:hover, .cmi-danger:focus-visible { background: rgba(229, 48, 45, .16); color: #ffb3b6; outline: none; }
.btn-danger { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #f0443f; }
.srow.is-closing { opacity: .42; pointer-events: none; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80;
  padding: 11px 16px; border-radius: 10px; background: #33191b; border: 1px solid rgba(229, 48, 45, .6);
  color: #ffd2d3; font: 700 14px/1.2 var(--ui); white-space: nowrap;
}
.toast[hidden] { display: none; }
/* 10/10: 폰은 화면 아래 고정 입력칸을 덮지 않게 위쪽 머리 바로 아래에, 긴 문구는 줄바꿈 */
.web .toast { top: calc(66px + env(safe-area-inset-top)); bottom: auto; width: max-content; max-width: calc(100vw - 24px); white-space: normal; text-align: center; text-wrap: balance; }
.dlg-del { left: 50%; top: 42%; transform: translate(-50%, -50%); width: 430px; max-width: calc(100vw - 28px); }
.derr { margin-top: 12px; font: 700 14px/1.35 var(--ui); color: #ff9ea2; }

/* 폰: 행 누르기 = 상세, 꾹 누르기 = 삭제 확인 */
.web .srow { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.web .srow:active, .web .srow.is-pressing { background: #262b33; }
.web .srow.is-pressing { box-shadow: inset 0 0 0 1.5px rgba(229, 48, 45, .55); transition: box-shadow .5s ease-in; }
@media (prefers-reduced-motion: reduce) { .web .srow.is-pressing { transition: none; } }
.web .dlg-del .dtitle { font-size: 19px; }
.web .dlg-del .dbtns .btn { flex: 1; height: 46px; font-size: 15.5px; }
.web .dsess { font-size: 15px; }

.wdetail { max-width: 560px; margin: 0 auto; padding: 0 12px 28px; display: flex; flex-direction: column; gap: 12px; }
.wdetail[hidden] { display: none; }
.wdtop { justify-content: flex-start; gap: 10px; }
.wback { width: 42px; height: 40px; padding: 0; border-radius: 10px; }
.wback .ico { width: 18px; height: 18px; }
.wdname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wdname .stitle { font: 700 16.5px/1.3 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; display: block; }
.wdmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 0 4px; }
.wdtx { padding: 14px 14px 4px; }
.web .wdtx .tx { height: auto; overflow: visible; padding: 0; font-size: 13.5px; line-height: 1.62; }
.web .wdtx .msg { margin-bottom: 13px; }
.wderr { padding: 4px 4px 0; font: 700 14.5px/1.4 var(--ui); color: #ff9ea2; }
.wderr[hidden] { display: none; }

/* ── 10/4: 아스트라 '완료 지우기' · PC 웹(web_app.html = 앱 화면 그대로) 상단의 반영 시각·다운로드 ── */
.bclear { color: var(--dim); }
.bclear:hover:not(:disabled) { color: var(--text); }
.wdlbtn { text-decoration: none; }
body.is-web .top .wsync { flex: none; }
.web .chead .bclear { height: 30px; font-size: 13.5px; }

/* ── 10/4: CODEX 창(아스트라와 같은 ◆) · [+] 메뉴 · 웹 입력칸 · Codex 화면 ── */
.ab-CODEX { background: #4a515c; color: #f1f2f4; }
.seg + .seg:not(:last-child) { border-radius: 0; }                      /* A | B | CODEX 세 칸 */
.seg-CODEX[aria-pressed="true"] { position: relative; background: rgba(198, 204, 213, .12); border-color: #c6ccd5; color: var(--text); font-weight: 700; }
.btn-fill-CODEX { background: #4a515c; border-color: #6b7380; color: #fff; }
.btn-fill-CODEX:hover:not(:disabled) { background: #57606c; }
.nmenu { min-width: 236px; }
.nmenu .cmi { height: 42px; gap: 11px; font-weight: 700; }
.nmenu .cmi:hover, .nmenu .cmi:focus-visible { background: #2b3038; outline: none; }
.nmenu .cmi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext.has-input { grid-template-rows: auto minmax(0, 1fr) auto; }
.tinput { display: flex; align-items: flex-end; gap: 10px; margin: 0 8px 8px; }
.tinput textarea, .wdinput textarea {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 160px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text);
  font: 14.5px/1.5 var(--mono); outline: none;
}
.tinput textarea:focus, .wdinput textarea:focus { border-color: #6b7380; box-shadow: 0 0 0 2px rgba(233, 236, 241, .14); }
.btn-send { height: 42px; padding: 0 16px; background: var(--sel); border-color: var(--sel); color: #15171b; }
.btn-send:hover:not(:disabled) { background: #fff; }
.msg-screen { margin: 0; white-space: pre; overflow-x: auto; font: 13.5px/1.45 var(--mono); color: #e6e9ee; }

/* 폰: 상단 [+] · 상세 아래 입력칸(화면 아래 고정) */
.wplus { width: 40px; height: 36px; padding: 0; border-radius: 10px; }
.wplus .ico { width: 16px; height: 16px; }
.wtop .flex { flex: 1 1 auto; }
.wdinput {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); z-index: 6;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bar); border-top: 1px solid var(--line);
}
/* 화면 아래 고정 입력칸에 마지막 줄이 가리지 않게 — 입력칸 실제 높이(--wdin-h, 여러 줄로 커지면 같이, web.js autoGrow) 기준. 값이 없으면 한 줄 높이 */
.wdetail.has-input { padding-bottom: calc(var(--wdin-h, calc(66px + env(safe-area-inset-bottom))) + 12px); }
.wdinput[hidden] { display: none; }
.wdinput textarea { font-size: 16px; }                                   /* 16px 미만이면 아이폰이 확대한다 */
.wdinput .btn-send { height: 44px; }
/* 10/10 첨부(gom 고른 후보 '나') — 입력칸 왼쪽 클립, 첨부가 있으면 입력칸 위 한 줄에 사진 타일(가로로 넘김) */
.wdinput { flex-wrap: wrap; }
.wdinput textarea { flex-basis: 0; }       /* 줄바꿈 허용 뒤에도 입력칸이 자기 글 폭을 고집해 [보내기]를 다음 줄로 밀지 않게(360 폭 실측) */
.wdattach { width: 44px; height: 44px; padding: 0; border-radius: 10px; color: var(--soft); }
.wdattach .ico { width: 20px; height: 20px; }
.wdattach[hidden] { display: none; }
.attrow { order: -1; flex: 0 0 calc(100% + 24px); display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -12px; padding: 12px 12px 2px; }   /* 화면 양끝까지(디자인 검사: 오른쪽 24px 앞에서 끊겼다) · 끝에서 더 밀어도 뒤로 가기 안 됨 */
.attrow::-webkit-scrollbar { display: none; }
.attrow[hidden] { display: none; }
.att { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--soft); }
.att img { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.att .attf { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font: 700 11px/1 var(--mono); letter-spacing: .02em; }
.att .attf .ico { width: 22px; height: 22px; }
.att .attv { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 9px;
  background: rgba(17, 19, 23, .62); font: 700 13px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; }
.att .attv:disabled { cursor: default; }
.att .attv[hidden] { display: none; }
.att.is-err { border-color: rgba(229, 48, 45, .85); cursor: pointer; }
.att.is-err .attv { background: rgba(17, 19, 23, .72); color: #ff8a86; font-family: var(--ui); }
.att .attx { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--bar); background: #3a404a; color: var(--text); cursor: pointer; }
.att .attx::before { content: ""; position: absolute; inset: -8px; }      /* 누르는 자리 38px(실측 — '다시'가 진짜 단추라 가운데를 누르면 '다시') */
.att.is-up .attf .ico, .att.is-err .attf .ico { visibility: hidden; }    /* 파일 타일: % · '다시' 가 파일 그림 위에 겹치지 않게 — 확장자는 남겨 어느 파일인지 보이게 */
.wdinput { touch-action: manipulation; }                                  /* × 를 연달아 눌러도 아이폰 두 번 눌러 확대 안 됨 */
.att .attx .ico { width: 11px; height: 11px; }
.wdinput .btn-send:disabled { opacity: .45; }
.web .wdtx .msg-screen { font-size: 12px; }

/* ── 10/4: 바깥 Claude 창 '앱으로 가져오기'(--resume 으로 앱이 쥐어 채팅되게) ── */
.btn-adopt { color: var(--a-ink); border-color: rgba(76, 141, 255, .5); background: rgba(76, 141, 255, .12); }
.btn-adopt:hover:not(:disabled) { background: rgba(76, 141, 255, .2); }
.wdadopt { align-self: flex-start; height: 42px; margin: 2px 0; }
/* 폰 상세 머리 오른쪽 끝 [B로 전환] — 앱 'B로 옮기기'와 같은 색·아이콘(.btn-to-A/B) */
.wdswitch { flex: none; margin-left: auto; height: 38px; padding: 0 12px; gap: 6px; border-radius: 10px; font-size: 14px; }
.wdswitch .ico { width: 15px; height: 15px; }
.wdswitch[hidden] { display: none; }

/* ── 10/4 gom "웹에서 ✽ Fluttering… (34s · thinking)": 작업 중 상태 줄 — Claude 터미널 줄처럼 조용한 한 줄 ── */
.tstatus {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  margin: 0 8px 8px; padding: 2px 16px 4px;
  font: 14px/1.5 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden;
}
.tstatus[hidden] { display: none; }
.tstatus .sstar { flex: none; width: 1.2em; text-align: center; color: var(--soft); }
.tstatus .sword { flex: none; color: var(--text); font-weight: 700; }
.tstatus .sdet { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wdstatus { margin: 0; padding: 10px 14px; background: var(--bg); font-size: 15px; }
.web .wdstatus.has-det { flex-wrap: wrap; row-gap: 2px; white-space: normal; }       /* 10/10: 폰 폭에선 Claude 설명 '(34s · ↑ 1.2k tokens)'이 늘 잘렸다 → 설명이 붙으면 둘째 줄(초만이면 한 줄 그대로) */
.web .wdstatus.has-det .sdet { order: 3; flex: 1 1 100%; padding-left: calc(1.2em + 8px); overflow-wrap: anywhere; }
/* 10/10: 작업 상태 줄 + '불러오지 못했습니다'를 입력칸 바로 위에 함께 고정 — 대화 끝을 보다가 통신이 끊겨도 보이게(예전엔 맨 위에만) */
.wdfoot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; background: var(--bg); }
.wdfoot:not(:has(> :not([hidden]))) { display: none; }
.wdfoot .wderr { padding: 8px 14px 6px; }
.wdetail.has-input .wdfoot { bottom: var(--wdin-h, calc(66px + env(safe-area-inset-bottom))); }
.wdetail:not(.has-input) .wdfoot { padding-bottom: env(safe-area-inset-bottom); }

/* ── 10/4: 발송취소 · 눌러서 확인하는 아스트라 상태 · 확인 보고 ── */
.tstatus .scancel { margin-left: auto; flex: none; height: 28px; padding: 0 12px; font: 600 13px/1 var(--ui); }
.wdstatus .scancel { height: 34px; padding: 0 14px; font-size: 14px; }
button.pill { font: inherit; line-height: inherit; cursor: pointer; }
button.jcheck:hover { border-color: #8a929e; color: var(--text); }
button.jcheck:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.dreport { margin: 4px 0 2px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--soft); font-size: 14px; line-height: 1.45; }
.dreport li { overflow-wrap: anywhere; }
.dreport li:first-child { color: var(--text); }
.dlg-report { left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); }
/* 웹 '결과 열기' — 아스트라 결과 내용(앱은 이 PC 편집기로 연다). 터미널 칸과 같은 바탕·글꼴: 아스트라가 쓴 글 그대로 */
.dlg-result {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.dlg-result .dtitle { overflow-wrap: anywhere; }
.dresult {
  flex: 1 1 auto; min-height: 96px; max-height: min(64vh, 640px); overflow: auto; margin: 14px 0 0; padding: 14px 16px;
  background: var(--term); border: 1px solid var(--hair); border-radius: 10px;
  color: var(--soft); font: 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
}
.dresult, .dreport, .dsess, .dlg .dtitle { user-select: text; -webkit-user-select: text; }   /* 10/10: 결과·보고 글자를 끌어서 복사 */
.dresult::-webkit-scrollbar { width: 8px; }
/* 10/10: 폰 결과 창 — 주소 막대가 보여도 화면 안(dvh), 본문 폭 넓게, [닫기]는 다른 확인창처럼 가로 꽉 */
.web .dlg-result { max-height: calc(100dvh - 32px); padding: 16px 14px 14px; }
.web .dlg-result .dtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.web .dresult { padding: 12px; max-height: min(64dvh, 640px); }
.web .dlg-result .dbtns .btn { flex: 1; height: 46px; }
.dresult::-webkit-scrollbar-thumb { background: #3a404a; border-radius: 4px; }

/* ── 10/5 gom "세션 만든 시간 날짜": 그 대화를 만든 때(M/D HH:MM) ──
 * 목록 행 오른쪽 위 = 메일 목록의 받은 시각 자리. 아래 모델 칩과 같은 오른쪽 열, 보조 정보라 흐린 색·숫자 글꼴(기존 'N분째'와 같은 급).
 * 큰 칸 머리는 원래 'HH:MM 시작' 자리를 그대로 쓰고 날짜를 붙였다(app.js startText). 칸 나누기 머리엔 안 넣음 — 왼쪽 목록과 겹치고 좁은 칸 제목만 줄인다. */
.srow.has-born { grid-template-columns: 24px minmax(0, 1fr) auto; }
.srow.has-born .smeta { grid-column: 2 / -1; }
.srow > .sborn { grid-column: 3; grid-row: 1; align-self: start; font: 12.5px/20px var(--mono); color: var(--dim); white-space: nowrap; }
body.is-mini .srow.has-born { grid-template-columns: 22px minmax(0, 1fr) auto; }
body.is-mini .srow > .sborn { font-size: 12px; line-height: 18px; }
.web .srow.has-born { grid-template-columns: 26px minmax(0, 1fr) auto; }
.web .srow > .sborn { font-size: 13.5px; line-height: 23px; }
.web .tstart { display: inline; font-size: 14px; }   /* 폰 상세 — PC 좁은 창(1240px 이하)에서 숨기는 규칙이 폰 폭에도 걸리므로 되살림 */