/* Toss-tone tokens (see web/DESIGN.md): gray canvas, borderless white cards, one sparing blue accent, big bold titles */
:root {
  color-scheme: light;
  --bg: #f2f4f6; --side: #f2f4f6; --card: #ffffff; --pop: #ffffff;
  --layer: #f2f4f6; --hover: #e9ecf0; --active: #e5e8eb; --track: #e5e8eb;
  --card-hover: #f9fafb;
  --line: #e5e8eb; --line-2: #d1d6db;
  --fg: #191f28; --fg-2: #4e5968; --fg-3: #6b7684;
  --accent: #3182f6; --on-accent: #ffffff;
  --ok: #0a8754; --warn: #b85e00; --err: #e42939;
  /* 미답장 (waiting for the owner's reply): orange fill + its text colour, 5.2:1 on white (light), 8:1 on the dark card (dark) */
  --unreplied: #c2410c; --on-unreplied: #ffffff;
  --r-card: 18px; --r-ctl: 10px; --edge: 28px;
  /* KakaoTalk chat (30-kakao.js): the room's backdrop, incoming / own bubbles, time and date chip */
  --kk-bg: #dbe5ee; --kk-in: #ffffff; --kk-in-fg: #191f28; --kk-own: #fee500; --kk-own-fg: #191919; --kk-time: #5b6877; --kk-chip: rgb(25 31 40 / .38); --kk-chip-fg: #ffffff;
  --scrim: rgb(0 0 0 / .4);
  --float: 0 8px 24px rgb(0 0 0 / .10), 0 1px 3px rgb(0 0 0 / .06);
  --shadow-panel: 0 6px 24px rgba(0, 0, 0, .06);
  /* terminal panel: dark in both themes */
  --tb: #101012; --tf: #e6e6ea; --td: #8d8d96; --tl2: #2b2b30; --tok: #4ade80; --terr: #ff7b7b; --tac: #a9a9ff;
  --font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Geist Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121214; --side: #121214; --card: #1d1d21; --pop: #26262b;
  --layer: #26262b; --hover: #2b2b31; --active: #303036; --track: #34343b;
  --card-hover: #232328;
  --line: #2b2b31; --line-2: #3d3d45;
  --fg: #ececf0; --fg-2: #b0b4bc; --fg-3: #8e939c;
  --accent: #4c94ff; --on-accent: #ffffff;
  --ok: #3ecf8e; --warn: #f5a524; --err: #ff6369;
  --unreplied: #ff9a4d; --on-unreplied: #1b1206;
  --scrim: rgb(0 0 0 / .6);
  --kk-bg: #161c23; --kk-in: #2b2f36; --kk-in-fg: #ececf0; --kk-own: #d9bd00; --kk-own-fg: #1b1b1b; --kk-time: #8e98a5; --kk-chip: rgb(255 255 255 / .12); --kk-chip-fg: #b0b4bc;
  --float: 0 8px 24px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .4);
  --shadow-panel: 0 6px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* manipulation: a double tap does not zoom the page (iPhone web app, owner 2026-10-26); pinch zoom still works. On every element, because a
   scrolling container (the chat timeline) starts its own touch-action chain; rules that set their own (pan-y, none) are more specific and stay. */
*, *::before, *::after { touch-action: manipulation; }
body { font: 400 14px/22px var(--font); font-variant-numeric: tabular-nums; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--fg); overflow: hidden; -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button:disabled { opacity: .4; cursor: default; pointer-events: none; }
kbd { display: inline-block; flex: none; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--layer); color: var(--fg-3); font: 500 11px/16px var(--font); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* layout: from 1100px one top row, below it the phone layout (tabs in a bottom bar). The markup is the same in both: #nav (the five tabs, one component), #pchip (the computer chip), #cmdk (search) and the app bar items.
   Wide: .side, .main and .appbar are display: contents, so each of their children is a cell of the .app grid and sits in the one row. Below 1100px they are the usual flex boxes. The 1100px edge is also where 채팅 puts its list next to the conversation. */
.app { display: grid; grid-template-columns: 20px auto auto auto auto auto minmax(0, 1fr) auto auto auto auto 12px; grid-template-rows: 48px auto auto auto minmax(0, 1fr); height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); }
.side, .main, .appbar { display: contents; }
.brand, .rail, .pchip, #back, .appbar h1, .thead, .conn, .cmdk, #vtog, .ustrip { grid-row: 1; align-self: center; }
.gban { grid-row: 2; grid-column: 1 / -1; }
.trban { grid-row: 3; grid-column: 1 / -1; }
.oerr { grid-row: 4; grid-column: 1 / -1; }
.views { grid-row: 5; grid-column: 1 / -1; }
.brand { grid-column: 2; }
.brand { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-align: left; cursor: pointer; }
.brand:hover { background: var(--card); }
.brand span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { position: relative; flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--fg); }
.logo::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.brand { width: auto; }
.rail { grid-column: 4; display: flex; gap: 2px; margin-left: 12px; }
.ni { position: relative; display: flex; flex: none; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.ni:hover { background: var(--hover); color: var(--fg); }
.ni:disabled, .ni:disabled:hover { background: transparent; color: var(--fg-3); opacity: .5; cursor: default; }
.ni.on { color: var(--fg); font-weight: 700; }
.ni .ic { display: none; }
.ni .nl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the current tab: bold with an accent line under it; the unread count is a plain number after the label, the new-version mark a small dot */
.ni.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 2px; border-radius: 1px; background: var(--accent); }
.ni .nnb { min-width: 0; height: 16px; padding: 0; background: transparent; color: var(--warn); font-size: 12px; line-height: 16px; }
.ni .nub { width: 6px; min-width: 6px; height: 6px; padding: 0; font-size: 0; line-height: 0; }
.ni .nub[hidden] { display: none; }
.appbar .cmdk { grid-column: 9; display: flex; align-items: center; gap: 6px; width: auto; height: 28px; margin-left: 8px; padding: 0 4px 0 8px; border: 0; border-radius: var(--r-ctl); background: var(--card); color: var(--fg-3); }
.cmdk:hover { background: var(--card-hover); }
.cmdk .tx { display: none; }
#back { grid-column: 5; margin-left: 8px; }
.appbar h1 { grid-column: 6; min-width: 0; max-width: 320px; margin: 0 0 0 8px; font: 700 22px/30px var(--font); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* wide: the active tab names the page, so the big title shows only on a page with a back arrow (a project, a settings sub-page) */
.appbar:not(.back) h1 { display: none; }
.thead { grid-column: 7; }
.conn { grid-column: 8; margin-left: 8px; }
#vtog { grid-column: 10; margin-left: 4px; }
.ustrip { grid-column: 11; margin-left: 4px; }
.pchip { grid-column: 3; }
.conn { flex: none; height: 20px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; }
button.conn { border: 0; font-family: inherit; cursor: pointer; }
button.conn:disabled { cursor: default; }
.ustrip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.ustrip:hover { background: var(--hover); color: var(--fg); }
.ustrip .ubar { width: 48px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.ustrip .ubar i { display: block; height: 100%; border-radius: 2px; background: var(--fg-2); }
.ustrip.warn { color: var(--warn); } .ustrip.warn .ubar i { background: var(--warn); }
.ustrip.warn .uring { background: conic-gradient(var(--warn) calc(var(--p) * 1%), var(--track) 0); }
.ustrip .uring, .ustrip .upct { display: none; }
.ustrip .uring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--fg-2) calc(var(--p) * 1%), var(--track) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.ustrip.warn .uring { background: conic-gradient(var(--warn) calc(var(--p) * 1%), var(--track) 0); }
.views { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.view { max-width: 920px; margin: 0 auto; padding: 24px; }
.view.fill { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
/* wide: only the two-pane 채팅 screens start at the left like the top bar (--edge = where the logo starts); 프로젝트 does it in .views.pp; every other page stays centered */
@media (min-width: 1100px) { #v-chat, #v-activity, #v-monitoring { margin: 0; padding-left: var(--edge); padding-right: var(--edge); } }
/* wide: the top row holds only logo, computer, tabs and the right-side controls. A page with a back arrow (a settings sub-page, 모니터링) gets the arrow and its title as a page header in row 3, just above the page: both sit in the full-width cell and are offset to the left edge of the centered 920px column (.view max-width) */
@media (min-width: 1100px) {
  .appbar #back, .appbar h1 { grid-row: 3; grid-column: 1 / -1; align-self: start; justify-self: start; }
  .appbar #back { margin: 16px 0 0 calc(max(0px, (100% - 920px) / 2) + 18px); }
  .appbar h1 { max-width: min(560px, 100%); margin: 16px 0 0 calc(max(0px, (100% - 920px) / 2) + 52px); font: 700 20px/28px var(--font); }
}
@media (max-width: 1099px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-top: 0; }
  .main { order: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .appbar { display: flex; flex: none; align-items: center; gap: 4px; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 24px; background: var(--bg); }
  .appbar.back { padding-left: 12px; }
  .appbar h1, .appbar:not(.back) h1 { display: block; flex: 1; max-width: none; margin: 0; }
  #back, .conn { margin: 0; }
  #vtog, .ustrip { margin: 0; }
  .gban, .trban, .oerr, .views { grid-row: auto; grid-column: auto; }
  .views { flex: 1; }
  /* compact tab bar: a 46px row; the home-indicator inset is trimmed (labels end ~18px above the screen edge, clear of the indicator) */
  .side { order: 2; display: flex; min-width: 0; min-height: 0; padding: 0 0 max(2px, calc(env(safe-area-inset-bottom) - 16px)); border-top: 1px solid var(--line); background: var(--card); }
  .brand { display: none; }
  .rail { flex: 1; min-width: 0; gap: 0; margin: 0; }
  .ni { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; height: 46px; padding: 0 2px; border-radius: 0; font-size: 10px; line-height: 13px; text-align: center; }
  .ni:hover { background: transparent; }
  .ni.on { font-weight: 600; }
  .ni .ic { display: block; width: 20px; height: 20px; }
  .ni.on::after { content: none; }
  .ni .nnb { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 5px; background: var(--warn); color: var(--bg); font-size: 10.5px; }
  .ni .nub { position: absolute; top: 5px; left: calc(50% + 6px); width: 8px; min-width: 8px; height: 8px; }
  .ni.on::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
  /* search: the one #cmdk button is an icon in the app bar here (its label and key hint are for the top row) */
  .appbar .cmdk { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0; padding: 0; background: transparent; color: var(--fg-2); }
  .appbar .cmdk:hover { background: var(--hover); color: var(--fg); }
  .cmdk kbd { display: none; }
}
@media (max-width: 1099px) and (pointer: coarse) { .appbar .cmdk { width: 36px; height: 36px; } }
@media (max-width: 639px) {
  /* typing: the keyboard covers the bar's place, so the bar steps aside instead of floating above the keyboard */
  .app:has(.composer textarea:focus) .side { display: none; }
  .appbar { height: calc(52px + env(safe-area-inset-top)); padding-left: 16px; }
  .appbar h1 { font-size: 20px; line-height: 28px; }
  .main .composer { padding-bottom: 8px; }
  .ustrip { gap: 4px; padding: 0 4px; font-size: 11px; }
  .ustrip .ulab, .ustrip .ubar { display: none; }
  .ustrip .uring, .ustrip .upct { display: inline-block; }
  .view { padding: 16px 12px 24px; }
  .view.fill { padding-bottom: 0; }
}
@media (max-width: 1099px) and (pointer: coarse) { .app:has(.composer textarea:focus) .side { display: none; } }
/* buttons: one system for every page and card. Kind: primary (accent fill, the default), secondary (.tonal), quiet (.text), danger;
   size: md (default, 40px) and .sm (36px). A touch screen gets a 44px target. Card buttons keep their own class names (.dc-act,
   .dc-go, .dc-back, .dc-manual) and are aliased here, so the look is defined once. */
:root { --btn-h: 40px; --btn-h-sm: 36px; --btn-hit: 44px; }
.ib { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-2); padding: 0; }
.ib:hover { background: var(--hover); color: var(--fg); }
.ib.pri { background: var(--accent); color: var(--on-accent); border-radius: 50%; }
.ib.pri:hover { background: var(--accent); opacity: .88; }
.menu .mi.more { color: var(--fg-2); }
.menu .mi.more svg { margin-left: auto; width: 14px; height: 14px; }
.btn, .dc-act, .dc-go, .dc-back, .dc-manual { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h); padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-ctl); color: var(--fg-2); background: transparent; font: 600 14px/20px var(--font); text-decoration: none; white-space: nowrap; max-width: 100%; cursor: pointer; }
.btn, .dc-go, .dc-act.main { background: var(--accent); color: var(--on-accent); }
.btn.tonal, .btn.outlined, .dc-back, .dc-act.alt { background: var(--layer); color: var(--fg); }
.btn.text, .dc-act, .dc-manual { background: transparent; color: var(--fg-2); padding: 0 10px; }
.btn.sm { height: var(--btn-h-sm); padding: 0 12px; font-size: 13px; }
.btn:hover, .dc-go:hover, .dc-back:hover, .dc-act:hover, .dc-manual:hover { opacity: .85; }
.btn.tonal:hover, .btn.outlined:hover, .dc-back:hover, .dc-act.alt:hover { background: var(--hover); opacity: 1; }
.btn.text:hover, .dc-act:not(.main):not(.alt):hover, .dc-manual:hover { background: var(--hover); color: var(--fg); opacity: 1; }
.btn.danger { background: transparent; color: var(--err); padding: 0 10px; }
.btn.danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); opacity: 1; }
.btn.danger.fill { background: var(--err); color: #fff; padding: 0 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (pointer: coarse), (max-width: 639px) { .ib { width: 36px; height: 36px; } .btn, .dc-act, .dc-go, .dc-back, .dc-manual { height: auto; min-height: var(--btn-hit); } .ni { min-height: 44px; } }

/* cards, lists, tags, bars */
.col { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.card { position: relative; min-width: 0; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); padding: 20px; }
.card.tap { cursor: pointer; transition: background .15s; }
.card.tap:hover { background: var(--card-hover); }
.card.tap:focus-visible { outline-offset: 0; }
.card.foot { display: flex; flex-direction: column; }
.cf { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.cf .btn { flex: 0 1 auto; min-width: 0; height: var(--btn-h-sm); padding: 0 12px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
/* a path shown inside a row's text (25-settings-accounts.js): one short line, the full path in the row's title */
code.path-short { display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-bottom: 12px; }
.ch h3 { flex: 1; min-width: 0; margin: 0; font: 600 16px/22px var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch .chev { width: 14px; height: 14px; color: var(--fg-3); }
.card.tap:hover .chev { color: var(--fg); }
.big { font: 700 20px/28px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sup { color: var(--fg-2); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.err-t { color: var(--err); }
.muted { color: var(--fg-2); }
.empty { padding: 32px 16px; text-align: center; color: var(--fg-3); font-size: 12px; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); }
.dot.pri { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.dot.att { background: var(--warn); }
@keyframes pulse { 50% { opacity: .35; } }
.tag { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--layer); color: var(--fg-2); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.tag.err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.tag.pri { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tag.unreplied, .nb.unreplied { background: var(--unreplied); color: var(--on-unreplied); font-weight: 600; }
.dot.unreplied { background: var(--unreplied); }
button.cchip.unrep-no { height: 22px; padding: 0 8px; font-size: 11.5px; color: var(--unreplied); }
/* 초안 작성 beside 답장 안 함: the one action that moves the mail forward, so it carries the accent (30-monitoring.js mailDraftButton).
   A tonal pill with the pencil (owner 2026-10-29: bare accent text looked unfinished); --layer on the card, --hover under the pointer. */
button.cchip.mr-draft { height: 24px; gap: 4px; padding: 0 10px 0 8px; background: var(--layer); font-size: 12px; font-weight: 600; color: var(--accent); }
button.cchip.mr-draft:hover { background: var(--hover); }
button.cchip.mr-draft .ic { width: 14px; height: 14px; stroke-width: 2; }
/* a mail's row buttons on a phone: a finger-sized target (the row itself opens the mail, so a near miss must not) */
@media (pointer: coarse), (max-width: 639px) { button.cchip.mr-act { height: 32px; padding: 0 12px; font-size: 13px; } button.cchip.mr-draft { padding: 0 14px 0 10px; } button.cchip.mr-draft .ic { width: 16px; height: 16px; } }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row + .row { margin-top: 8px; }
.row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.tap { cursor: pointer; }
.row.tap:hover .nm { color: var(--accent); }
.kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kv .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv + .kv { margin-top: 8px; }
.kv .v { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-size: 12px; }
.bar { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--bar, var(--accent)); transition: width .3s; }
.bar.warn { --bar: var(--warn); } .bar.err { --bar: var(--err); }
.lim + .lim { margin-top: 12px; }
.more { margin-top: 12px; color: var(--fg-3); font-size: 12px; }
.sec { margin: 28px 4px 10px; color: var(--fg-2); font: 600 14px/20px var(--font); }
.sec:first-child { margin-top: 0; }
.list { border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }
.li { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 10px 16px; color: inherit; text-align: left; width: 100%; border: 0; background: transparent; }
button.li:hover, .li.tap:hover { background: var(--card-hover); }
.li .lead { flex: none; display: inline-flex; color: var(--fg-3); }
.li .tx { flex: 1; min-width: 0; }
.li .hd { font-size: 15px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
.li.prow { flex-wrap: wrap; }
.li.prow .tx { flex: 1 1 140px; }
.avatar { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--layer); border: 1px solid var(--line); color: var(--fg-2); font: 600 11px/16px var(--font); text-transform: uppercase; }
.heads { display: flex; align-items: center; gap: 8px; min-width: 0; }
.heads .t { min-width: 0; font: 600 13px/20px var(--font); overflow-wrap: anywhere; }
.sp { flex: 1; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.c4 { -webkit-line-clamp: 4; white-space: pre-line; overflow-wrap: anywhere; }
.pickbox { display: flex; flex-direction: column; gap: 16px; max-height: min(46dvh, 340px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.kb:empty { display: none; }
.li.on { background: var(--active); }
.li.off, .li.off:hover { background: transparent; cursor: default; }
.li.off .hd, .li.off .lead { color: var(--fg-3); }
/* 계정 card rows (web/js/25-settings-accounts.js): grip, order number, the tap area; a dragged row lifts and the rows it passes shift */
.li.acc { gap: 4px; padding-left: 6px; padding-right: 8px; }
.acc-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.acc-no { justify-content: center; min-width: 20px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-3); cursor: grab; touch-action: none; }
.acc-grip::before { content: ""; width: 10px; height: 16px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.7px) 0 0 / 5px 5.34px; }
.acc-grip:hover { background: var(--card-hover); color: var(--fg-2); }
.acc-mv { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); font-size: 16px; }
.acc-mv:hover:not(:disabled) { background: var(--card-hover); color: var(--fg); }
.acc-dragging .li.acc { transition: transform .15s; }
.acc-dragging .li.acc.drag { position: relative; z-index: 2; transition: none; background: var(--card); box-shadow: 0 6px 20px rgb(0 0 0 / .18); cursor: grabbing; }
.rt-roles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-roles .seg { flex: none; flex-wrap: nowrap; }
.rt-roles .seg button { flex: none; padding: 0 10px; }
.rt-rows { max-height: min(48dvh, 400px); overflow-y: auto; }
.rt-row { padding: 8px 12px; min-width: 0; }
.rt-row .top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rt-row .nm { min-width: 0; color: var(--fg); font-size: 13px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.rt-row .sup { margin-top: 2px; }
.tools-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tools-bar .sec { margin: 0; }
.sub { margin-top: 4px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }

/* tabs */
.chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 0 12px; min-width: 0; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--card); color: var(--fg-2); font-size: 13px; font-weight: 500; max-width: 100%; }
.chip:hover { background: var(--hover); color: var(--fg); }
.chip.on { background: var(--fg); color: var(--bg); }
.chip .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 모델 · 폴백: one card per target (model + effort, then the numbered fallback list). Neutral surfaces; the accent marks
   only the model answering now. */
.mt { max-width: 760px; }
.mt-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mt-intro { flex: 1 1 320px; margin: 0 4px; color: var(--fg-2); font-size: 13px; line-height: 20px; }
.mt-filter { flex: 0 1 220px; min-width: 160px; }
.mt-card { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 12px; }
.mt-use-list { display: flex; flex-direction: column; }
.mt-use-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.mt-use-row:first-child { border-top: 0; }
.mt-use-tx { flex: 1 1 100%; display: flex; flex-direction: column; min-width: 0; }
.mt-use-rest { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 2px 10px; }
.mt-use-m { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mt-use-row .tag { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-use-act { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); }
.mt-use-act:hover { background: var(--hover); color: var(--fg); }
.mt-use-act .ic { width: 18px; height: 18px; }
/* From 900px every row is one line: the label column takes the room, the model and tag shorten, the icon sits at the far right. */
@media (min-width: 900px) {
  .mt-use-row { flex-wrap: nowrap; gap: 0 12px; }
  .mt-use-tx { flex: 1 1 140px; }
  .mt-use-rest { flex: 0 1 auto; }
  .mt-use-m { max-width: 300px; }
  .mt-use-row .tag { max-width: 260px; }
  .mt-use-act { margin-left: auto; }
}
.mt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-head .t { min-width: 0; font: 700 17px/24px var(--font); overflow-wrap: anywhere; }
.mt-head .sup { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-head .sp { flex: 1; }
.mt-head .tag { flex: none; }
.mt-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-model { flex: 2 1 240px; max-width: 360px; }
.mt-eff { flex: 1 1 140px; max-width: 200px; }
.mt-fb-h .lb { display: block; margin-bottom: 6px; font: 500 12px/16px var(--font); color: var(--fg-2); }
.mt-fb-h .lb { margin: 0; }
.mt-apply { justify-content: flex-end; margin-top: -4px; }
.mt-fb { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.mt-fb-h { display: flex; align-items: baseline; gap: 8px; }
.mt-fb .note { margin-top: 2px; }
.mt-foot { margin-top: -6px; }
@media (max-width: 640px) { .mt-model, .mt-eff { max-width: none; } .mt-filter { flex-basis: 100%; } }
.fb-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fb-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 8px 10px 10px; border-radius: 12px; background: var(--layer); color: var(--fg); touch-action: none; user-select: none; }
.fb-item[data-i], .fb-item.base { cursor: pointer; }
.fb-item[data-i]:hover { background: var(--hover); }
.fb-item.open { outline: 2px solid var(--accent); outline-offset: -2px; }
.fbe { display: flex; flex-direction: column; gap: 12px; margin: -2px 0 4px; padding: 14px; border-radius: 12px; background: var(--layer); }
.fbe-grid, .fbe-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fbe-cap > .tf:first-child { grid-column: 1 / -1; }
.fbe-key { display: flex; align-items: center; gap: 8px; margin-top: -6px; }
.fbe-key .sup.warn { color: var(--warn); }
.fbe-act { display: flex; align-items: center; gap: 6px; }
.fbe-act .sp { flex: 1; }
@media (max-width: 560px) { .fbe-grid, .fbe-cap { grid-template-columns: 1fr; } }
.fb-item.off .nm, .fb-item.off .fb-n { opacity: .5; }
.fb-sw { min-width: 44px; height: 28px; padding: 0 10px; border-radius: 14px; border: 0; font-size: 12px; background: var(--hover); color: var(--fg-3); cursor: pointer; }
.fb-sw[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.fb-item.in-use { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.fb-item.drag { position: relative; z-index: 5; cursor: grabbing; box-shadow: var(--float); opacity: .94; }
.fb-item.over { outline: 2px dashed var(--fg-3); outline-offset: 2px; }
.fb-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 11px; background: var(--card); color: var(--fg-2); font: 600 12px/1 var(--font); }
.fb-item.in-use .fb-n { background: var(--accent); color: var(--on-accent); }
.fb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fb-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fb-top .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/20px var(--font); }
.fb-use, .fb-base { flex: none; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--card); color: var(--fg-2); font-size: 11px; line-height: 18px; font-weight: 600; }
.fb-use { color: var(--accent); }
.fb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-tags .tag { height: 20px; line-height: 16px; font-size: 11px; background: var(--card); color: var(--fg-2); }
.fb-tags .tag.warn { background: color-mix(in srgb, var(--warn) 14%, var(--card)); color: var(--warn); }
.fb-usage { color: var(--fg-2); }
.fb-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.fb-bar i { display: block; height: 100%; border-radius: 2px; background: currentColor; }
.fb-bar-l { font-size: 11px; line-height: 15px; }
.fb-acts { display: flex; align-items: center; flex: none; gap: 2px; }
.fb-acts button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--fg-2); }
.fb-acts button:hover, .fb-acts button:focus-visible { background: var(--hover); color: var(--fg); }
.fb-acts button:disabled { opacity: .3; background: transparent; }
.fb-acts .ic { width: 15px; height: 15px; }
.fb-acts .up .ic { transform: rotate(180deg); }
@media (pointer: coarse) { .fb-acts button { width: 34px; height: 34px; } }
.fb-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border: 1px dashed var(--line-2); border-radius: 18px; background: transparent; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.fb-add:hover:not(:disabled) { background: var(--hover); color: var(--fg); }
.fb-add:disabled { opacity: .5; }

/* fields */
.tf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tf > label, .tf > .lb { font: 500 12px/16px var(--font); color: var(--fg-2); }
.fi, .sel { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); outline: 0; font-size: 13px; text-align: left; }
.fi { min-width: 0; }
.fi::placeholder { color: var(--fg-3); }
.fi:focus, .sel[aria-expanded="true"] { border-color: var(--accent); box-shadow: none; }
.sel:hover { border-color: var(--fg-3); }
.sel .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel svg.ic { color: var(--fg-3); width: 14px; height: 14px; }
@media (pointer: coarse) { .fi, .sel { height: 40px; font-size: 16px; } }
.lbl { margin: 16px 0 6px; font: 500 12px/16px var(--font); color: var(--fg-2); }

/* menu: the single dropdown component */
.menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; padding: 6px; overflow-y: auto; border: 0; border-radius: 14px; background: var(--pop); box-shadow: 0 8px 24px rgb(0 0 0 / .14); outline: 0; }
.menu .mh, .ph { z-index: 2; padding: 8px 8px 4px; color: var(--fg-3); font: 500 11px/16px var(--font); }
.menu .mh { position: sticky; top: -4px; background: var(--pop); }
.menu.msheet { border-radius: 18px; padding: 8px; box-shadow: 0 -4px 28px rgb(0 0 0 / .22); }
.menu.msheet .mi { min-height: 48px; }
.mi { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; text-align: left; font-size: 13px; line-height: 20px; }
.mi:hover, .mi:focus-visible { background: var(--hover); outline: 0; }
.mi.ind { padding-left: 28px; }
.mi .ck { flex: none; width: 14px; height: 14px; color: var(--accent); }
.mi .ml { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.mi .ml small { flex: none; margin-left: auto; color: var(--fg-3); font-size: 11px; line-height: 16px; }
.mi.sel-on { font-weight: 500; }
@media (pointer: coarse) { .mi { min-height: 40px; font-size: 14px; } }

/* segmented control */
.seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 8px; background: var(--layer); }
.seg button { flex: 1 1 52px; min-width: 0; height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-2); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
@media (pointer: coarse) { .seg button { height: 34px; } }

/* dialog, palette, toast */
dialog.dlg, dialog.pal { margin: auto; border: 0; border-radius: 20px; background: var(--pop); color: var(--fg); box-shadow: 0 16px 48px rgb(0 0 0 / .22); overflow: auto; }
dialog.dlg { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
.steps { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 21px; }
dialog.dlg::backdrop, dialog.pal::backdrop { background: var(--scrim); }
dialog.dlg.wide { width: min(640px, calc(100vw - 24px)); }
/* settings dialogs (dialog({ classic: true })): the small box with its own header and footer, as before the full-screen overlay (14-overlay.css) */
dialog.dlg.cl { padding: 20px; overflow: auto; }
.dhd { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; }
.dhd .dx { margin: -2px -6px 0 auto; }
dialog.dlg.cl .dtitle { flex: 1; min-width: 0; }
.dact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dact:empty { display: none; }
.dtitle { margin: 0; font: 700 18px/26px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.dbody { display: flex; flex-direction: column; gap: 12px; color: var(--fg-2); }
.dbody p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
dialog.pal { width: min(560px, calc(100vw - 24px)); margin: 12vh auto auto; padding: 0; max-height: min(480px, calc(100dvh - 24px)); }
.pal-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.pal-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--fg); font-size: 14px; }
@media (pointer: coarse) { .pal-in { font-size: 16px; } }
.pal-list { padding: 4px; overflow-y: auto; max-height: 360px; }
.pal-i { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); text-align: left; }
.pal-i.on { background: var(--hover); }
.pal-i .ic { color: var(--fg-3); }
.pal-i .nm { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i .pd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 12px; }
.pal-i.cmd .nm { font-family: var(--mono); font-size: 12px; }
.pal-out { padding: 12px; max-height: 360px; overflow: auto; }
.pal-res { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pal-rh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pal-rt { flex: 1; min-width: 0; font: 600 15px/22px var(--font); overflow-wrap: anywhere; }
.pal-res .list { background: var(--layer); box-shadow: none; }
.pal-f { align-items: baseline; justify-content: space-between; min-height: 40px; padding: 8px 12px; }
.pal-f .tx { flex: 0 1 auto; }
.pal-f .hd { font-size: 13px; line-height: 20px; color: var(--fg-2); }
.pal-v { flex: 0 1 auto; min-width: 0; max-width: 62%; text-align: right; color: var(--fg); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.pal-vl + .pal-vl { margin-top: 2px; }
.pal-f.multi { display: block; }
.pal-f.multi .pal-v { max-width: none; margin-top: 4px; text-align: left; font-size: 13px; color: var(--fg-2); }
.pal-vl code { margin-right: 8px; color: var(--fg); font: 12px/18px var(--mono); }
.pal-res .cc-note { margin-top: 0; }
.pal-res .cc-act { margin-top: 2px; }
@media (max-width: 420px) { .pal-f:not(.multi) { display: block; } .pal-f:not(.multi) .pal-v { max-width: none; margin-top: 2px; text-align: left; } }
.snack { position: fixed; z-index: 2000; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); padding: 8px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
/* a refusal or failure stays calm (owner 2026-10-20: "빨간색 글자 나오면 놀란다 사람들"): the usual snackbar with a small amber dot */
/* A new shell waits for a tap: a bar across the top that pushes the app down (body:has), so it never covers a screen's own controls */
.shell-chip { position: fixed; z-index: 1999; inset: 0 0 auto 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; border: 0; border-radius: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; text-align: center; cursor: pointer; }
body:has(.shell-chip) .app { padding-top: 0; margin-top: calc(34px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 34px - env(safe-area-inset-top, 0px)); }
.upd-bar { position: fixed; z-index: 1998; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top, 0px)) 40px 6px; background: var(--accent); color: var(--on-accent); font-size: 13px; line-height: 20px; text-align: center; }
.upd-bar .ub-tx { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.upd-bar span.ub-tx { cursor: default; }
.upd-bar.download .ub-tx::after, .upd-bar.waiting .ub-tx::after, .upd-bar.restarting .ub-tx::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: 2px; animation: ub-pulse 1.2s ease-in-out infinite; }
.upd-bar.failed { background: var(--fg); color: var(--bg); }
.upd-bar .x { position: absolute; right: 8px; bottom: 4px; padding: 0 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
@keyframes ub-pulse { 50% { opacity: .25; } }
body:has(.upd-bar) { --ubh: var(--upd-h, calc(32px + env(safe-area-inset-top, 0px))); }
body:has(.upd-bar) .app { padding-top: 0; margin-top: var(--ubh); height: calc(100dvh - var(--ubh)); }
.snack.bad::before { content: ""; display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--err); vertical-align: 1px; }
.snack.act { display: flex; align-items: center; gap: 12px; }
.snack .sa { flex: none; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; }
@media (max-width: 639px) { .snack { bottom: calc(60px + max(2px, calc(env(safe-area-inset-bottom) - 16px))); } }
/* floating notices (alert / worklog / lane report events): compact cards top-right; each leaves ~4s after the owner
   has actually seen it (tab visible and window focused), hover pauses, a dismissed one never comes back */
.ntf-box { position: fixed; z-index: 1900; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; width: min(344px, calc(100vw - 32px)); pointer-events: none; }
.ntf { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 12px; border-radius: 14px; background: var(--pop); color: var(--fg); box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -4px rgb(0 0 0 / .12), 0 20px 40px -12px rgb(0 0 0 / .10); cursor: pointer; transform-origin: 100% 0; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s, background .15s; }
:root[data-theme="dark"] .ntf { background: #2a2a30; box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 0 0 1px rgb(255 255 255 / .06), 0 2px 4px rgb(0 0 0 / .3), 0 12px 32px -4px rgb(0 0 0 / .55); }
/* stacked cards step back a little, so the newest reads as the top layer */
.ntf + .ntf { transform: scale(.985); opacity: .97; }
.ntf + .ntf + .ntf { transform: scale(.97); opacity: .94; }
.ntf.in { animation: ntf-in .22s cubic-bezier(.2, .8, .2, 1); }
.ntf.out { opacity: 0; transform: translateX(12px) scale(.98); pointer-events: none; }
.ntf:hover { background: var(--card-hover); }
:root[data-theme="dark"] .ntf:hover { background: #303037; }
.ntf > .dot { flex: none; margin-top: 7px; }
.ntf .tx { flex: 1; min-width: 0; }
.ntf .hd { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 600 13px/20px var(--font); }
.ntf .hd .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf .hd .tm { flex: none; color: var(--fg-3); font-size: 11.5px; font-weight: 400; }
.ntf .bd2 { color: var(--fg-2); font-size: 12.5px; line-height: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ntf .x { flex: none; width: 24px; height: 24px; margin-top: -2px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-3); font-size: 16px; line-height: 24px; }
.ntf .x:hover { background: var(--hover); color: var(--fg); }
@keyframes ntf-in { from { opacity: 0; transform: translateX(16px) scale(.98); } }
@media (max-width: 639px) { .ntf-box { top: calc(8px + env(safe-area-inset-top)); right: 8px; width: calc(100vw - 16px); } }

/* 채팅 uses the same app bar as every page (title, 돋보기, usage); it only adds the session switcher right after the title
   and one 대화/로그 icon button next to the 돋보기 (shared by both views) */
.thead { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 4px 0 0; }
.appbar.tv h1 { flex: none; margin-right: 12px; }
.view.fill { padding-top: 8px; }
.tsw { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tsw::-webkit-scrollbar { display: none; }
.tchip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; max-width: 220px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--chip, var(--card)); color: var(--fg-2); font-size: 14px; font-weight: 500; }
.tchip:hover { background: var(--hover); color: var(--fg); }
.dragging { opacity: .4; }
.dropon { outline: 2px solid var(--accent); outline-offset: 2px; }
.tchip.on { background: var(--fg); color: var(--bg); font-weight: 600; }
.tchip.on .sb { background: color-mix(in srgb, var(--bg) 22%, transparent); color: inherit; }
.tchip .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip[hidden] { display: none; }
.tsep { flex: none; align-self: center; width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
.tsep[hidden] { display: none; }
.tchip.tmore .ic { width: 14px; height: 14px; }
.nb.warn { background: var(--warn); }
.nb { flex: none; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: var(--bg); font: 600 10.5px/16px var(--font); text-align: center; }
.sb { flex: none; height: 16px; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 500 10.5px/16px var(--font); white-space: nowrap; }
.sb.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.tdrop { display: none; flex: 1 1 120px; width: auto; min-width: 0; }
@media (max-width: 639px) { .thead.lanev .tdrop.sel { max-width: 112px; } }
#vtog { position: relative; }
#vtog .ud { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (pointer: coarse) { .tchip { height: 36px; } }
/* phone: the switcher is one small chip after the title (name + caret opens the session list) */
@media (max-width: 639px) {
  .appbar.tv h1 { margin-right: 8px; }
  .view.fill { padding-top: 4px; }
  .appbar .tsw { display: none; }
  .appbar .tdrop.sel { display: inline-flex; flex: 0 1 auto; width: auto; max-width: 168px; height: 32px; gap: 6px; padding: 0 8px 0 12px; border: 0; border-radius: 16px; background: var(--card); color: var(--fg); font: 600 14px/18px var(--font); }
  .appbar .tdrop .val { flex: 0 1 auto; }
  .appbar.tv .tdrop.sel { flex: none; }
  .appbar.tv .conn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* chat: Material 3 type scale + tonal surfaces, one reading column.
   - message text = M3 body-large 16px (line-height 26px: 24px is tuned for Latin, Hangul needs a little more air); meta = label-medium 12/16; tool rows = body-medium 13/20
   - measure capped at 40em of the 16px text (640px = 40 Hangul glyphs = ~65ch measured on "0", inside the 60-75ch band)
   - turn separation by spacing (32px between turns, 16px inside one), no rules or colored stripes
   - owner = right-aligned tonal bubble (--active, M3 surface-container-highest); answers = unboxed text;
     lane reports and alerts = tonal card (--layer + hairline); work in between folds into one quiet summary row
   - secondary text uses --fg-2 (AA on both themes); --fg-3 stays for non-text only */
.chatbox { position: relative; flex: 1; min-height: 0; }
.timeline { height: 100%; overflow-y: auto; overflow-x: hidden; padding-inline: 8px; margin-inline: -8px; }   /* the 8px gutter (padding, given back as margin) is room for the notice highlight's ring and bar: overflow-x hidden would clip them at the column edge (09-notices.css) */
.tl-in { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: var(--col); min-width: 0; margin: 0 auto; padding: 8px 0 32px; }
@media (max-width: 639px) { .tl-in { padding: 0 0 24px; } .tl-in > .bm { padding: 14px 16px; } }
.ub.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ubm { align-self: flex-end; height: 24px; padding: 0 4px; border: 0; background: none; color: var(--fg-2); font-size: 12.5px; font-weight: 500; }
.ubm:hover { color: var(--fg); }
.lw-s { display: flex; flex-direction: column; padding: 0 8px 6px 52px; }
.lw-s:empty { display: none; }
.lw-r { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: 8px; box-shadow: inset 2px 0 0 var(--line); font-size: 13px; }
.lw-r:hover { background: var(--layer); }
.lw-r .dot { width: 6px; height: 6px; }
.lw-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-st { flex: none; color: var(--fg-3); font-size: 12px; }
@media (max-width: 639px) { .lw-s { padding-left: 16px; } }
details.work.bad:not(.live) .wdot { display: block; background: var(--err); animation: none; }
.mt { font-size: 12px; line-height: 16px; color: var(--fg-2); }
.mt .mn { font-weight: 600; }
/* a status pill in a message header (진행 중/완료/질문/실패) is exactly the 16px text line, so it neither sinks below the name and time nor makes the line taller */
.mt > .tag { height: 16px; padding: 0 5px; margin-left: 6px; vertical-align: top; }
.um { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 80%; min-width: 0; margin-top: 16px; }
.um:first-child { margin-top: 0; }
.um.cont { margin-top: -10px; }
.ub { padding: 10px 16px; border-radius: 20px; background: color-mix(in srgb, var(--fg) 7%, var(--bg)); font-size: 15px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cont > .mt { display: none; }
.cont > .mt.dv { display: block; } .mt.dv-fail { color: var(--err); }
.bm.cont { margin-top: -4px; }
.bm { min-width: 0; overflow-wrap: anywhere; }
.bm .mt { margin-bottom: 4px; }
/* chat reads like Claude: one calm page (the log's gray), replies as plain text, owner bubbles a shade darker,
   alerts and opened work folds on white cards, the composer a floating white card with its chips inside */
.tl-in > .bm.rep, .tl-in > .bm.alert { max-width: none; padding: 14px 18px 16px; border-radius: var(--r-card); background: var(--card); }
.bm .more pre { background: var(--layer) !important; }
details.work[open] { padding: 6px 10px 8px; border-radius: var(--r-card); background: var(--card); }
.sendrow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ta ta" "bar send"; align-items: center; gap: 6px 8px; padding: 14px 12px 10px 18px !important; border: 1px solid var(--line) !important; border-radius: 22px !important; background: var(--card) !important; box-shadow: var(--shadow-panel); }
.sendrow:focus-within { border-color: var(--line-2) !important; }
/* "ulw" in the message (14-slash-commands.js autosize): a 2px blue → violet → pink edge, padding 1px less so nothing inside moves */
/* the keyword itself: the backdrop (14-slash-commands.js paintUlw) sits in the textarea's grid cell under it; its text is invisible, only the
   mark shows, as the same gradient under the word */
.sendrow .ta-hl { grid-area: ta; align-self: stretch; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; pointer-events: none; box-sizing: border-box; }
.sendrow .ta-hl[hidden] { display: none; }
.sendrow .ta-hl ~ textarea { position: relative; z-index: 1; }
.ta-hl .ulw-kw { color: transparent; background: linear-gradient(90deg, #5b9fe3, #9d8fe0, #e98aa6) bottom / 100% 2px no-repeat; border-radius: 2px; box-shadow: 0 -0.9em 0 0 color-mix(in srgb, #9d8fe0 14%, transparent) inset; }
.sendrow.ulw { border: 2px solid transparent !important; padding: 13px 11px 9px 17px !important; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, #5b9fe3, #9d8fe0 45%, #d98bc9 75%, #e98aa6) border-box !important; }
.sendrow textarea { grid-area: ta; }
.sendrow > .ib { grid-area: send; }
.sendrow > .cbar { grid-area: bar; margin: 0 0 0 -10px; padding: 0; min-height: 26px; }
/* Claude-style edges: the transcript (chat and log) fades into the page under the header and above the composer while
   there is more to scroll that way. Overlays only - no mask, shadow or layout change. */
.chatbox, .termbox { position: relative; }
.chatbox::before, .chatbox::after, .termbox::before, .termbox::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .15s; }
.chatbox::before, .termbox::before { top: 0; height: 28px; background: linear-gradient(var(--bg), transparent); }
.chatbox::after, .termbox::after { bottom: 0; height: 40px; background: linear-gradient(transparent, var(--bg)); }
.chatbox.fade-t::before, .termbox.fade-t::before, .chatbox.fade-b::after, .termbox.fade-b::after { opacity: 1; }
.chatbox > .jump, .termbox > .jump { position: absolute; left: 50%; right: auto; bottom: 14px; z-index: 2; transform: translateX(-50%); display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; min-width: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--fg); font-size: 0; line-height: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.chatbox > .jump svg, .termbox > .jump svg { display: block; width: 18px; height: 18px; margin: 0; }
.chatbox > .jump[hidden], .termbox > .jump[hidden] { display: none; }
/* Track B: attachments (composer tray, message files, lightbox), ended-lanes fold, target popovers */
.sendrow.has-att { grid-template-areas: "at at" "ta ta" "bar send"; }
.atray { grid-area: at; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 4px -6px; padding: 2px; }
.atray::-webkit-scrollbar { display: none; }
.fatt { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 56px; max-width: 220px; padding: 0 30px 0 10px; border-radius: 12px; background: var(--layer); color: var(--fg); }
.fatt.img { width: 56px; padding: 0; overflow: hidden; }
.fatt.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fatt .fi-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--card); color: var(--fg-2); }
.fatt .fi-ic svg { width: 18px; height: 18px; }
.fatt .fi-t { min-width: 0; display: flex; flex-direction: column; }
.fatt .fi-n { font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fatt .fi-m { font-size: 12px; line-height: 16px; color: var(--fg-3); }
.fatt.up { opacity: .55; }
.fatt .ax { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: rgb(0 0 0 / .55); color: #fff; }
.fatt .ax svg { width: 12px; height: 12px; }
.fatt:not(.img) .ax { background: transparent; color: var(--fg-3); top: 18px; }
#c-attach { width: 30px; padding: 0; justify-content: center; }
#c-attach svg { width: 18px; height: 18px; }
.composer.dropping .sendrow { background: color-mix(in srgb, var(--accent) 7%, var(--card)) !important; }
.mfiles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; }
.bm .mfiles { justify-content: flex-start; margin-top: 10px; }
.lg-x .mfiles, .a-text .mfiles { justify-content: flex-start; margin-top: 8px; }
.mfiles .thumb { display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--layer); cursor: zoom-in; }
.mfiles .thumb img { display: block; max-width: min(240px, 60vw); max-height: 200px; object-fit: cover; }
.mfiles .fatt { cursor: pointer; padding-right: 12px; text-decoration: none; }
.mfiles .fatt:hover { background: var(--hover); }
/* a session row on a fallback model: the model it runs and the 폴백 중 tag (08-home.js homeNowRow) */
.srow .smodel { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }

/* every file in a message carries its own download button (thumbnails: top-right corner, chips: right end) */
.fitem { flex: none; display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.fbox { position: relative; display: flex; max-width: 100%; }
/* the path under each file: one short line (shortPath in 15-attachments.js), the full path in the title, a tap copies it.
   width:0 + min-width:100% keeps a path inside its own chip's column: it never widens .fitem, so two files side by side keep
two separate paths under their own chips and a long one ends in an ellipsis. */
.fpath, .lb-p, .tv-p { display: block; width: 0; min-width: 100%; max-width: 100%; padding: 0; border: 0; background: none; color: var(--fg-3); font: 400 12px/18px var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: copy; }
.fpath { margin-top: 4px; }
.fpath:hover, .lb-p:hover, .tv-p:hover { color: var(--fg-2); }
.fbox > .fatt { padding-right: 48px; max-width: 260px; }
.fdl { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; color: var(--fg-2); text-decoration: none; }
.fdl svg { width: 18px; height: 18px; }
.fbox > .fatt + .fdl { top: 12px; right: 8px; }
.fbox > .fatt + .fdl:hover { background: var(--card); color: var(--fg); }
.fbox > .thumb + .fdl { top: 6px; right: 6px; background: rgb(0 0 0 / .55); color: #fff; }
.fbox > .thumb + .fdl:hover { background: rgb(0 0 0 / .72); }
.mfiles .fatt.off { cursor: default; opacity: .55; padding-right: 12px; }
.mfiles .fatt.off:hover { background: var(--layer); }
@media (pointer: coarse) { .fdl { width: 36px; height: 36px; border-radius: 18px; } .fbox > .fatt + .fdl { top: 10px; } }
.bm .md code.path.fp { cursor: pointer; }
.bm .md code.path.fp:hover { text-decoration: underline; text-underline-offset: 3px; }
dialog.lbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
dialog.lbox::backdrop { background: rgb(10 10 12 / .86); }
.lbox .lb-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100%; }
.lbox .lb-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; }
.lbox .lb-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lbox .lb-bar a, .lbox .lb-bar button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: rgb(255 255 255 / .12); color: #fff; font-size: 13px; text-decoration: none; }
.lbox .lb-bar button.x { width: 32px; padding: 0; justify-content: center; }
.lbox .lb-p { padding: 0 16px 12px; color: rgb(255 255 255 / .72); }
.lbox .lb-img:focus { outline: 0; }
.lbox .lb-img { display: grid; place-items: center; min-height: 0; padding: 0 16px 24px; }
.lbox .lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ended { margin-top: 12px; border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.ended > summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; list-style: none; cursor: pointer; color: var(--fg-2); font-size: 14px; font-weight: 600; }
.ended > summary::-webkit-details-marker { display: none; }
.ended > summary svg { width: 16px; height: 16px; transition: transform .15s; }
.ended[open] > summary svg { transform: rotate(90deg); }
.ended .er { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 14px; text-align: left; }
.ended .er:hover { background: var(--card-hover); }
.ended .er .sup { flex: none; margin-left: auto; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.ended > summary > .elabel { flex: none; white-space: nowrap; }
.ended > summary > .ecounts { flex: 1; min-width: 0; color: var(--fg-3); font-size: 13px; font-weight: 500; }
.ended .ecount { display: inline-block; white-space: nowrap; }
.ended > summary > .elabel:has(+ .etools) { flex: 1; }
.ended .ecount::before { content: " · "; }
.ended .ecount.need { color: var(--warn); }
.ended .etools { display: flex; align-items: center; gap: 4px; margin: -6px -8px -6px 0; }
.ended:not([open]) .etools { display: none; }
.ended .etools .btn { height: 28px; font-size: 13px; }
.ended .erow { display: flex; align-items: center; border-top: 1px solid var(--line); }
.ended .erow .er { flex: 1; min-width: 0; border-top: 0; padding-right: 8px; }
.ended .erow .edel { margin-right: 12px; color: var(--fg-3); }
.ended .erow .edel:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.ended .er .tag { flex: none; }
.ended .erow .er .en { flex: 0 1 auto; min-width: 3em; }
.ended .erow .er .sup { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ended .en { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ended label.er { cursor: pointer; min-height: 48px; }
.ended label.ck-all { color: var(--fg-2); font-weight: 600; }
.ended .ck { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.dl-list { margin: 0; padding: 8px 12px; max-height: 40vh; overflow-y: auto; list-style: none; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg); font-size: 14px; line-height: 24px; }
.dl-list li { overflow-wrap: anywhere; }
.dl-body { display: flex; flex-direction: column; gap: 12px; }
@media (pointer: coarse) { .ended .etools .btn { height: 36px; } .ended .erow .edel { margin-right: 6px; } }
.bm.alert .mn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--err); vertical-align: middle; }
.bm .more { margin-top: 8px; }
.bm .more > summary { width: fit-content; color: var(--fg-2); font-size: 13px; line-height: 20px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.bm .more > summary::-webkit-details-marker { display: none; }
.bm .more[open] > summary { margin-bottom: 4px; }
.bm .more pre { margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--fg-2); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; }
.gban { flex: none; display: flex; align-items: center; gap: 10px; width: calc(100% - 48px); max-width: 872px; margin: 0 auto 4px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--card); color: var(--fg-2); font-size: 13px; line-height: 20px; }

.oerr { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; width: calc(100% - 48px); max-width: 872px; margin: 0 auto 6px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--card); color: var(--fg-2); font-size: 13px; line-height: 20px; box-shadow: inset 0 0 0 1px var(--warn, #d9822b); }
.oerr[hidden] { display: none; }
.oerr .tx { flex: 1 1 220px; min-width: 0; }
.oerr .tx b { color: var(--fg); font-weight: 600; }
.oerr .btn { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 600; }
@media (max-width: 600px) { .oerr { width: calc(100% - 24px); } .oerr .btn { width: 100%; } }
.gban .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gban .tx b { color: var(--fg); font-weight: 600; }
.gban .x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-3); font-size: 18px; line-height: 28px; }
.gban .x:hover { background: var(--hover); color: var(--fg); }
@media (max-width: 639px) { .gban { width: calc(100% - 24px); } }
.bm .md { font-size: 15.5px; line-height: 28px; }
.bm > .mt { margin-bottom: 6px; } .bm > .mt .mn { color: var(--fg); }
.bm .md p { margin: 0 0 12px; } .bm .md p:last-child { margin-bottom: 0; }
.bm .md p.h { margin: 24px 0 8px; font-size: 17px; line-height: 26px; } .bm .md p.h b { font-weight: 700; } .bm .md p.h:first-child { margin-top: 0; }
.bm .md ul, .bm .md ol { margin: 0 0 12px; padding-left: 24px; }
.bm .md li + li { margin-top: 4px; }
.bm .md code { padding: 2px 6px; border-radius: 6px; background: var(--layer); color: var(--fg); font-size: .84em; }
.bm .md code.path { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.bm .md b { font-weight: 700; }
.bm pre { margin: 12px 0 16px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--layer); color: var(--fg); font-size: 13px; line-height: 20px; white-space: pre; overflow-wrap: normal; overflow: auto; max-height: 360px; }
.bm .md pre code { padding: 0; background: none; font-size: inherit; }
.md .tbl { max-width: 100%; margin: 4px 0 12px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.md table { border-collapse: collapse; min-width: 100%; font-size: 14px; line-height: 22px; }
.md th, .md td { padding: 8px 12px; text-align: left; vertical-align: top; white-space: nowrap; }
.md th { background: var(--layer); color: var(--fg-2); font-weight: 600; font-size: 13px; }
.md tr + tr td, .md thead + tbody tr:first-child td { border-top: 1px solid var(--line); }
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.a-div + .um { margin-top: 0; }
.box pre, .cmdbox pre { margin: 8px 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--layer); color: var(--fg); font-size: 12.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.box pre { margin: 6px 0 0; padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 18px; max-height: 300px; }
.box pre.err, .cmdbox.err pre { color: var(--err); }
.cmdbox { min-width: 0; }
/* command answer card (out events with .card, command replies) */
.ccard { max-width: 560px; padding: 14px 16px; border-radius: var(--r-card); background: var(--card); }
/* the session-result card sits straight in the timeline column: as wide as the replies and the composer, not the 560px a command answer gets */
.bm.res > .ccard { max-width: none; }
@media (max-width: 639px) { .tl-in > .bm.res { padding: 0; } .bm.res > .mt { padding: 0 16px; } }
.cc-hd { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.cc-facts { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 4px 16px; margin: 10px 0 0; font-size: 14px; line-height: 22px; }
.cc-facts dt { color: var(--fg-3); overflow-wrap: anywhere; }
.cc-facts dd { margin: 0; min-width: 0; color: var(--fg); overflow-wrap: anywhere; white-space: pre-line; }
.cc-note { margin-top: 10px; color: var(--fg-3); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; white-space: pre-line; }
.cc-act { margin-top: 12px; }
.cc-act .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .cc-facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .cc-facts dd { margin-bottom: 8px; } }
.cmdbox pre { margin: 0 0 4px; font-family: var(--mono); }
.pn { display: flex; gap: 8px; min-width: 0; color: var(--fg-2); font-size: 13px; line-height: 20px; cursor: pointer; }
.pn .pt { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn.open .pt { display: block; }
.pn .mt { flex: none; }
.sn { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 14px; border-radius: 12px; background: var(--layer); font-size: 14px; line-height: 22px; }
.sn .st { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* login requests (dotz_auth, 16-target-switcher-conversation.js paintAuth): the form's header, body (.abd) and footer sit directly in the full-screen overlay card (14-overlay.css) */
.au { display: contents; font-size: 14px; line-height: 20px; }
.au .abd { display: flex; flex-direction: column; gap: 10px; }
.au p { margin: 0; color: var(--fg-2); }
.au input:not([type=checkbox]) { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--fs-fill); color: var(--fg); font: 16px var(--font); min-width: 0; width: 100%; box-sizing: border-box; }
.au .fld { display: flex; flex-direction: column; gap: 4px; }
.au .fld label { color: var(--fg-2); font-size: 12px; }
.au .ctl { display: flex; gap: 6px; align-items: center; }
.au .eye { flex: none; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--fs-fill); color: var(--fg-2); font: 13px var(--font); }
.au input.bad { border-color: var(--danger, #d93025); }
.au .ferr { color: var(--danger, #d93025); font-size: 12px; min-height: 0; }
.au .rem { display: flex; gap: 8px; align-items: center; color: var(--fg-2); font-size: 13px; }
.au .note { color: var(--fg-3); font-size: 12px; }
.sn .ml-from { font-weight: 600; color: var(--fg); }
.sn .ml-subj { color: var(--fg); }
.sn .ml-snip { color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md p { margin: 0 0 6px; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 0 0 6px; padding-left: 20px; }
.md code { padding: 1px 4px; border-radius: 4px; background: var(--layer); font-size: .92em; }
.md pre code { padding: 0; background: none; }
.bm .md p.meta { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.bm .md p.meta + p:not(.meta) { margin-top: 12px; }
.md li.sub { margin-left: 20px; list-style-type: circle; }
.md blockquote { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); }
details.work > summary { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 28px; margin-left: -4px; padding: 0 8px 0 4px; border-radius: 8px; color: var(--fg-2); font-size: 13px; line-height: 20px; cursor: pointer; list-style: none; }
details.work > summary:hover { background: var(--hover); color: var(--fg); }
details.work > summary::-webkit-details-marker { display: none; }
details.work > summary::before { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: rotate(-45deg); transition: transform .15s; }
details.work[open] > summary::before { transform: rotate(45deg); }

.wdot { display: none; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
details.work.live .wdot { display: block; }
.wsum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 4px 0 0 4px; padding-left: 16px; }
.wbody .a-text { padding: 4px 8px; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.wbody .a-time, .wbody .ttime, .wbody details.box .cl, .wbody .a-div { color: var(--fg-2); }
.wbody .a-time, .wbody .ttime { font-size: 12px; }
.tl-in > .a-div { margin: 8px 0 0; font: 500 12px/16px var(--font); color: var(--fg-2); }
.tl-in > .a-div:first-child { margin-top: 0; }
.tl-in > details.work:not([open]) + .bm, .tl-in > details.work:not([open]) + .pn { margin-top: -6px; }
@media (max-width: 639px) { .um { max-width: 90%; } .bm pre { padding: 10px 12px; } .bm.rep, .bm.alert { padding: 10px 12px 12px; } }
:root { --col: 736px; }
.composer { flex: none; width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 0 max(16px, env(safe-area-inset-bottom)); }
.composer.tmode { max-width: var(--col); }
.working { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 8px; color: var(--fg-3); font-size: 12.5px; line-height: 20px; }
#working-tx { min-width: 0; overflow-wrap: anywhere; }
.working .btn { flex: none; height: 24px; padding: 0 8px; font-size: 12px; }
/* running state: a pulsing line above the composer, a spinner on the model chip, and the send button turns into stop */
.runline { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 8px 6px; color: var(--accent); font-size: 13px; font-weight: 600; line-height: 20px; animation: runpulse 1.6s ease-in-out infinite; }
.runline[hidden] { display: none; }
.pausenote { margin: 0 0 6px 6px; color: var(--warn); font-size: 12.5px; line-height: 18px; }
.pausenote[hidden] { display: none; }
.pausenote .pn-go { height: 24px; margin-left: 6px; padding: 0 8px; font-size: 12.5px; }
.runline .dot { width: 7px; height: 7px; }
/* The run state line (41-runstate.js): always on above the composer, so the owner sees what the agent is doing and, when
   nothing runs while the plan has tasks left, why. */
.runstate { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 6px 6px; color: var(--fg-3); font-size: 12.5px; line-height: 18px; }
.runstate[hidden] { display: none; }
.runstate .dot { width: 7px; height: 7px; flex: none; }
.runstate .rs-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runstate.warn { color: var(--warn); }
.runstate.err { color: var(--err); }
.runstate .rs-go { flex: none; height: 24px; padding: 0 8px; font-size: 12.5px; }
/* The run state line says the same thing as the older working line, so that one steps aside while this line is on. */
.composer.rs-on .runline { display: none; }
/* On a phone the dot, the text and the button stay on one center line: a running line keeps to one line with an ellipsis;
   a warning or error reason must be readable whole, so only that one wraps. */
@media (max-width: 639px) {
  .runstate.warn .rs-tx, .runstate.err .rs-tx { white-space: normal; }
  .runstate .rs-go { height: 30px; padding: 0 10px; }
}
/* The top of the timeline: older messages load as it comes into view; the button is the fallback. */
.tl-top { display: flex; justify-content: center; margin: 0 0 -6px; }
.tl-top[hidden] { display: none; }
.tl-top .tl-more { height: 26px; font-size: 12.5px; }
/* Inline line buttons are not card buttons: the touch rule's 44px min-height (01-tokens.css) would make the line itself 44px tall.
   They keep their compact height and get a larger hit area from an invisible box around them. */
.runstate .rs-go, .pausenote .pn-go, .tl-top .tl-more { position: relative; min-height: 0; }
.runstate .rs-go::after, .pausenote .pn-go::after, .tl-top .tl-more::after { content: ""; position: absolute; inset: -8px -4px; }
.runline.warn { color: var(--warn); }
@keyframes runpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#working > .dot, #working-tx, #working > .sp, #working-stop { display: none !important; }
#c-model.run::after { content: ""; flex: none; width: 11px; height: 11px; margin-left: 2px; border: 1.6px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#send-btn.stop { background: var(--fg); color: var(--bg); }
#send-btn.stop > svg { display: none; }
#send-btn.stop::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .runline, #c-model.run::after { animation: none; } }
@media (pointer: coarse) { .working .btn { height: 36px; padding: 0 10px; } }
.qlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.qitem { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--layer); min-width: 0; }
.qitem .qb { flex: 1; min-width: 0; }
.qitem .qt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; line-height: 18px; }
.qitem .qm { margin-top: 2px; color: var(--fg-3); font-size: 11px; line-height: 16px; }
.qitem .btn { flex: none; height: 28px; padding: 0 8px; font-size: 12px; }
@media (max-width: 639px) { .qitem { flex-wrap: wrap; } .qitem .qb { flex-basis: 100%; } .qitem .qa { margin-left: auto; } }
@media (pointer: coarse) { .qitem .btn { height: 36px; padding: 0 10px; } }
.qitem .qa { display: flex; gap: 4px; flex: none; }
.composer.tmode .qitem { background: var(--tb); border-color: var(--tl2); color: var(--tf); }
.composer.tmode .qitem .qm { color: var(--td); }
/* phone working actions: no row of their own - stop is the send button (with text typed it sends into the running turn)
   and the end is the floating jump button; no extra chip in the composer bar (owner 2026-10-21: a ⋯ there breaks the bar) */
@media (max-width: 639px) {
  .sendrow > .cbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sendrow > .cbar::-webkit-scrollbar { display: none; }
  .cbar .working .btn { display: none; }
  .chatbox > .jump, .termbox > .jump { left: auto; right: 12px; bottom: 12px; transform: none; }
}
/* slash menu: a floating card above the composer (Discord-style) */
.composer { position: relative; }
.hintrow { position: absolute; z-index: 30; left: 0; right: 0; display: flex; flex-direction: column; max-height: min(360px, 50vh); padding: 6px; border-radius: 16px; background: var(--pop); box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 2px 6px rgb(0 0 0 / .06), 0 12px 32px -6px rgb(0 0 0 / .16); }
:root[data-theme="dark"] .hintrow { background: #2a2a30; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px -6px rgb(0 0 0 / .6); }
.sl-hd { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; color: var(--fg-3); font: 600 11.5px/16px var(--font); }
.sl-hd .logo { width: 14px; height: 14px; border-radius: 4px; }
.sl-hd .logo::after { inset: 4px; background: var(--pop); }
:root[data-theme="dark"] .sl-hd .logo::after { background: #2a2a30; }
.sl-hd .nm { color: var(--fg-2); }
.sl-args { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.sl-c, .sl-a { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--layer); color: var(--fg-3); font: 500 12px/16px var(--font); }
.sl-c { background: var(--fg); color: var(--bg); font-weight: 600; }
.sl-a.done { color: var(--fg); }
.sl-a.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.sl-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
/* every row is one fixed-height line: bold /command, its args, then the gray description right after them (Discord) */
.sl-i { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); text-align: left; font: 400 13px/20px var(--font); white-space: nowrap; }
.sl-i.on { background: var(--layer); }
:root[data-theme="dark"] .sl-i.on { background: #34343b; }
.sl-i .c { flex: none; font-weight: 700; font-size: 14px; }
.sl-i .ar { flex: none; color: var(--fg-3); font-size: 12.5px; }
.sl-i .d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; color: var(--fg-3); font-size: 12.5px; }
@media (max-width: 639px) { .sl-i { height: 44px; } .sl-i .ar { display: none; } }
.sendrow { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 18px; border: 1px solid transparent; border-radius: 24px; background: var(--layer); }
.sendrow:focus-within { border-color: var(--accent); }
.cbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-top: 8px; padding: 0 4px; }
.cchip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; max-width: 100%; padding: 0 10px; border: 0; border-radius: 13px; background: transparent; color: var(--fg-2); font-size: 12.5px; line-height: 16px; font-weight: 500; white-space: nowrap; }
button.cchip:hover { background: var(--layer); color: var(--fg); }
.cchip.warn { color: var(--warn); }
/* 360-390px: the chips pull together while the api label shares the row, so the bar keeps fitting without scrolling. */
@media (max-width: 600px) { .cbar.api { gap: 2px; } .cbar.api .cchip { padding: 0 6px; } .cbar.api .cchip.capi { font-size: 10.5px; } }
.cchip.capi { height: 20px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-size: 11px; line-height: 16px; font-weight: 600; }
.cchip.err { color: var(--err); }
/* whose model and context the chips show (뙃쥐 or a lane), and a lane's worker model: labels, not buttons */
.cchip.cown { padding: 0 4px; opacity: .65; font-weight: 600; }
/* the phone app bar already names the session, and the row has no room for the labels */
@media (max-width: 600px) { .cchip.cown { display: none; } }
.cbar .working { margin: 0; min-height: 26px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 6px; }
.cbar .working #working-tx { color: var(--fg-2); font-weight: 500; font-size: 12.5px; }
/* Unitless line-height (22/14, 24/16 as before) so the line grows with the font under text zoom; a px line-height stayed put and clipped the glyphs.
   The floor is one full line plus the padding, never below it whatever height autosize or an old px style says: em fallback first (same value,
   the line-height is explicit), 1lh where supported. */
.sendrow textarea { --ta-pad: 4px; flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; box-sizing: border-box; padding: var(--ta-pad) 0; font-size: 14px; line-height: 1.5714; min-height: calc(1.5714em + 2 * var(--ta-pad)); min-height: calc(1lh + 2 * var(--ta-pad)); max-height: 140px; }
.sendrow textarea::placeholder { color: var(--fg-3); }
.prompt { display: none; }
@media (pointer: coarse) { .sendrow textarea { font-size: 16px; line-height: 1.5; min-height: calc(1.5em + 2 * var(--ta-pad)); min-height: calc(1lh + 2 * var(--ta-pad)); } }
.composer.tmode .sendrow { background: var(--card); }
.composer.tmode .qitem { background: var(--card); border-color: transparent; }

/* terminal: the same data as a terminal session */
.termbox { position: relative; flex: 1; min-height: 0; margin-bottom: 12px; }
.term { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 0 12px; font: 14px/22px var(--font); color: var(--fg); }
.term > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.term .tmore { display: flex; margin: 0 auto 12px; }
.term .tdv, .term .lg-note { margin: 10px auto; color: var(--fg-3); font-size: 12.5px; line-height: 18px; text-align: center; }/* attachment chips as buttons (md and text open in the reader) and the reader sheet */
button.fatt { border: 0; font: inherit; text-align: left; cursor: pointer; }
dialog.tbox { width: min(760px, 100vw); height: min(80dvh, 100dvh); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--pop); color: var(--fg); box-shadow: 0 12px 40px rgb(0 0 0 / .22); overflow: hidden; }
dialog.tbox::backdrop { background: rgb(10 10 12 / .5); }
.tbox .tv-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
.tbox .tv-p { padding: 8px 20px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.tbox .tv-bar { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tbox .tv-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tbox .tv-bar a, .tbox .tv-bar button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); font-size: 13px; text-decoration: none; }
.tbox .tv-bar button.x { width: 32px; padding: 0; }
.tbox .tv-body { min-height: 0; overflow: auto; padding: 16px 20px 28px; font-size: 15px; line-height: 26px; overflow-wrap: anywhere; }
.tbox .tv-body:focus { outline: 0; }
.tbox .tv-body p { margin: 0 0 12px; }
.tbox .tv-body p.h { margin: 20px 0 8px; font-size: 17px; line-height: 26px; } .tbox .tv-body p.h:first-child { margin-top: 0; }
.tbox .tv-body ul, .tbox .tv-body ol { margin: 0 0 12px; padding-left: 24px; }
.tbox .tv-body pre { margin: 0; font: 13px/20px var(--mono); white-space: pre-wrap; }
.tbox .tv-body .md pre, .tbox .tv-body > .md pre { margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--layer); }
.tbox .tv-st { color: var(--fg-3); font-size: 13px; line-height: 20px; }
@media (max-width: 639px) { dialog.tbox { width: 100vw; height: 100dvh; border-radius: 0; } }

/* log: one card per turn - header (dot, what was asked, when, how long), answers as text, tool calls folded into one summary row */
.lg { margin-bottom: 12px; padding: 16px 18px; border-radius: var(--r-card); background: var(--card); }
.lg-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-h .dot { width: 8px; height: 8px; }
.lg-t { flex: 1; min-width: 0; font: 600 15px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-m { flex: none; color: var(--fg-3); font-size: 12.5px; line-height: 16px; font-variant-numeric: tabular-nums; }
.lg-b { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-left: 18px; }
.lg-b:empty { display: none; }
.lg-x .md { font-size: 14.5px; line-height: 24px; }
.lg-x .md p { margin: 0 0 8px; } .lg-x .md p:last-child { margin: 0; }
.lg-x .md code { padding: 1px 5px; border-radius: 5px; background: var(--layer); font-size: .86em; }
.lg-x .md pre { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: var(--layer); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font-size: 12.5px; line-height: 19px; }
.lg-n { color: var(--fg-3); font-size: 12.5px; line-height: 18px; }
.lg-q { padding: 8px 12px; border-radius: 10px; background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lg.dim { padding: 8px 18px; background: transparent; }
.lg.dim .lg-t { font-weight: 500; font-size: 13px; color: var(--fg-3); }
.lg.dim .lg-b { display: none; }
.lg-e { color: var(--fg); font-size: 14px; line-height: 22px; }
.lg-e::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--err); vertical-align: middle; }
.lg-e details > summary { display: inline; margin-left: 6px; color: var(--fg-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.lg-e details > summary::-webkit-details-marker { display: none; }
.lg-e pre, .lr-o pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--layer); color: var(--fg-2); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.lr-o pre.err { color: var(--err); }
.ls > summary { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 30px; padding: 0 10px; border-radius: 15px; background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; cursor: pointer; list-style: none; }
.ls > summary::-webkit-details-marker { display: none; }
.ls > summary::after { content: ""; flex: none; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.ls[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ls > summary:hover { color: var(--fg); }
.ls-r { display: flex; flex-direction: column; margin-top: 6px; }
.lr { border-radius: 10px; cursor: pointer; }
.lr:hover { background: var(--card-hover); }
.lr-h { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 8px; min-width: 0; }
.lr-k { flex: none; min-width: 34px; color: var(--fg-3); font-size: 12px; font-weight: 600; }
.lr-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px/18px var(--mono); color: var(--fg); }
.lr-d { flex: none; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lr .dot { width: 7px; height: 7px; }
.lr-o { display: none; padding: 0 8px 10px 52px; }
.lr.open .lr-o { display: block; }
.lr-sub { margin-top: 6px; color: var(--fg-2); font-size: 12.5px; }
@media (max-width: 639px) { .lg { padding: 14px 14px; } .lg-b { padding-left: 0; } .lr-o { padding-left: 8px; } .lr-k { min-width: 28px; } }
.tu, .th, .tt, .tk, .tr, .te { display: flex; gap: 8px; min-width: 0; }
.tu { margin: 14px -8px 6px; padding: 4px 8px; border-radius: 4px; background: rgb(255 255 255 / .07); }
.tu .tg { color: var(--tac); }
.tu .tx { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl { margin: 6px 0; border-radius: 4px; cursor: pointer; }
.tl:focus-visible, .tk:focus-visible { outline-offset: 3px; }
.tl.ok > .th > .tg { color: var(--tok); }
.tl.bad > .th > .tg { color: var(--terr); }
.th b { flex: none; font-weight: 600; }
.th .ti { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--td); }
.tl.open .th .ti { white-space: normal; overflow-wrap: anywhere; }
.tr { margin-left: 22px; color: var(--td); }
.tr .rt { min-width: 0; flex: 1; }
.tr .ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .more { opacity: .7; }
.tl.bad > .tr { color: var(--terr); }
.full { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; font: inherit; }
.targs { margin: 4px 0 0 22px; padding: 6px 8px; border-radius: 6px; background: rgb(255 255 255 / .06); color: var(--td); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font: inherit; }
.tl:not(.open) .full, .tl:not(.open) .targs { display: none; }
.tl.open .short { display: none; }
.tt { margin: 10px 0; }
.tt .md { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tk { margin: 4px 0; color: var(--td); font-style: italic; cursor: pointer; }
.tk .tkt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk .tkf { display: none; min-width: 0; flex: 1; }
.tk.open .tkt { display: none; } .tk.open .tkf { display: block; }
.tdv { margin: 12px 0; font-size: 11.5px; line-height: 16px; text-align: center; overflow-wrap: anywhere; }
.te { margin: 6px 0; color: var(--terr); overflow-wrap: anywhere; }
.tc { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--td); font: inherit; }
.tc.err { color: var(--terr); }
.jump { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
.a-div { margin: 8px 4px; font-size: 11px; line-height: 16px; color: var(--fg-3); text-align: center; overflow-wrap: anywhere; }
.a-text { padding: 6px 8px; overflow-wrap: anywhere; }
.a-time { margin-right: 8px; font-size: 11px; color: var(--fg-3); }
.a-error { margin: 4px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); overflow-wrap: anywhere; }
details.box { border-radius: 6px; }
details.box > summary { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; cursor: pointer; list-style: none; border-radius: 6px; font-size: 13px; line-height: 20px; }
details.box > summary:hover, details.box[open] > summary { background: var(--hover); }
details.box > summary::-webkit-details-marker { display: none; }
details.box > summary::before { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(-45deg); transition: transform .15s; }
details.box[open] > summary::before { transform: rotate(45deg); }
.tname { flex: none; font: 500 12px/20px var(--mono); color: var(--fg); }
.tsum { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.tsum:empty { display: none; }
.ttime { flex: none; font-size: 11px; color: var(--fg-3); }
.tstate { flex: none; min-width: 10px; font-weight: 600; font-size: 12px; }
.tstate.ok { color: var(--ok); } .tstate.bad { color: var(--err); }
details.box .body { padding: 4px 8px 8px 21px; }
details.box .cl { margin: 8px 0 0; font: 500 11px/16px var(--font); color: var(--fg-3); }
details.box .cl:first-child { margin-top: 0; }
details.box .cl.err { color: var(--err); }
details.think > summary .tname { font-family: var(--font); color: var(--fg-2); }
details.think .md { padding: 4px 8px 8px 21px; color: var(--fg-2); font-size: 12px; }
.subline { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 12px; line-height: 16px; cursor: pointer; }
.subs { flex: none; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
.subsum { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 10px; border: 0; background: transparent; color: var(--fg-2); font-size: 12.5px; line-height: 20px; text-align: left; }
.subsum:hover { background: var(--hover); color: var(--fg); }
.subsum .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subsum .chev { width: 14px; height: 14px; color: var(--fg-3); transition: transform .15s; }
.subsum[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sublist { max-height: 196px; overflow-y: auto; padding: 4px; border-top: 1px solid var(--line); }
.subrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; line-height: 20px; text-align: left; }
.subrow:hover { background: var(--hover); }
.subrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subrow .chev { width: 14px; height: 14px; color: var(--fg-3); }
.subrow.off .nm { color: var(--fg-2); }
.subrow b { font-weight: 500; }
.sheet { position: fixed; z-index: 900; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(480px, 100vw); border-left: 1px solid var(--line-2); background: var(--bg); box-shadow: -8px 0 24px rgb(0 0 0 / .12); }
.sh-head { flex: none; display: flex; align-items: center; gap: 8px; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 16px; border-bottom: 1px solid var(--line); }
.sh-t { flex: 1; min-width: 0; }
.sh-name { font: 600 13px/20px var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-t .sup { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; }
.sh-body:not(.term) > * + * { margin-top: 4px; }
.sh-body.term { height: auto; padding: 12px 14px; border: 0; border-radius: 0; }
@media (max-width: 639px) { .sheet { width: 100vw; border-left: 0; } .sh-body { padding: 12px; } }
.tl-in > .a-div { margin: 0; }

/* home: '답 필요' and '지금 진행 중' lists (one row per target: dot, name, one-line activity, worker n/m, status) */
.hn-h { display: flex; align-items: baseline; gap: 8px; margin: 4px 4px 10px; }
.hn-h h2 { margin: 0; font: 700 18px/26px var(--font); letter-spacing: -.02em; }
.hn-h .sup { color: var(--fg-3); }
.hn + .hn-h { margin-top: 24px; }
.hn { border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.hr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; background: transparent; color: inherit; text-align: left; }
.hr + .hr { box-shadow: inset 0 1px 0 var(--line); }
.hr.st:hover { background: transparent; }
.hr:hover { background: var(--card-hover); }
.hr .dot { width: 10px; height: 10px; }
.hr .hb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hr .hn1 { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 15px/22px var(--font); }
.hr .hn1 .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr .ha { min-width: 0; color: var(--fg-2); font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr .hp { flex: none; color: var(--fg-3); font-size: 12.5px; line-height: 16px; font-variant-numeric: tabular-nums; }
.hr .hs.unreplied { color: var(--unreplied); font-weight: 600; }
.hr .hs { flex: none; min-width: 44px; text-align: right; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.hr .hs.pri { color: var(--accent); } .hr .hs.warn { color: var(--warn); } .hr .hs.err { color: var(--err); }
/* a session row (sessionRow in 18-lanes.js): the parent project leads the second line, the activity trails it */
.hr .ha:has(.sproj) { display: flex; align-items: baseline; gap: 6px; }
.hr .sproj { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--fg); font-weight: 500; }
.hr .sproj.none { color: var(--fg-3); font-weight: 400; }
.hr .sline { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg-3); }
.hr .sline::before { content: "·"; margin-right: 6px; }
.srows .hr + .li, .srows .li + .hr { box-shadow: inset 0 1px 0 var(--line); }
/* 답변 필요 (09-needs-you.js): a critical row's dot is the error ink; 더 보기 is the list's last row, full width */
.hr .dot.att.err { background: var(--err); }
.hn .ny-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--fg-2); font: 500 13px/18px var(--font); cursor: pointer; }
.hn .ny-more:hover { background: var(--hover); color: var(--fg); }
.hn .empty { padding: 18px 16px; text-align: left; font-size: 13px; color: var(--fg-3); }
#home-sec { margin-top: 28px; }

/* lanes board */
/* board: free-form 12-column card grid shared by 홈 and 레인 (positions are calc() of the container width, so no JS layout pass is needed) */
.bbar { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 8px; }
.bbar .btn { height: 24px; font-size: 12px; }
@media (pointer: coarse) { .bbar { margin-bottom: 4px; } .bbar .btn { height: 36px; font-size: 13px; padding: 0 12px; } }
.board { position: relative; }
.bi { position: absolute; border-radius: 8px; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, box-shadow .15s; }
.bi > .card { overflow: hidden auto; }
.bi:hover, .bi.bdrag { box-shadow: var(--float); }
.bi.bdrag { z-index: 6; transition: box-shadow .15s; }
/* a finger resting on a card before the long press: no text selection or callout while it waits; the lifted card shows at once */
.bi.bpress, .bi.bpress * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.board.narrow .bi { transition: transform .18s ease, box-shadow .15s; }
.board.narrow .bi.bdrag { transition: box-shadow .15s; transform-origin: center; }
.board.narrow .bi.bdrag > .card { background: var(--card-hover); }
@media (prefers-reduced-motion: reduce) { .bi, .board.narrow .bi, .bph { transition: none; } }
.bph { position: absolute; border: 1.5px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, transparent); transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease; pointer-events: none; }
.boarding { user-select: none; -webkit-user-select: none; }
.board:not(.narrow) .bhead { cursor: grab; touch-action: none; }
.board:not(.narrow) .bi.bdrag .bhead { cursor: grabbing; }
.board .card { padding: 12px 14px; }
.board .ch { margin-bottom: 8px; }
.board .ch .ib { width: 24px; height: 24px; }
/* the same glyph, a finger-sized hit area: 40px on a touch screen, sitting in the header's own margin */
@media (pointer: coarse) { .board .ch .ib { width: 40px; height: 40px; margin: -10px -10px -10px -4px; } }
.brz { position: absolute; z-index: 3; touch-action: none; }
.brz.se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.brz.se::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); border-bottom-right-radius: 3px; opacity: .35; transition: opacity .15s; }
.bi:hover .brz.se::after, .bi.bdrag .brz.se::after, .brz.se:hover::after { opacity: .9; }
.brz.e { top: 14px; bottom: 16px; right: -3px; width: 8px; cursor: ew-resize; }
.brz.s { left: 14px; right: 16px; bottom: -3px; height: 8px; cursor: ns-resize; }
.board.narrow .brz { display: none; }
/* 세션 and 프로젝트 tabs: a column of chat-list rows (.cv-list, 10-conversations.css) */
#v-projects { max-width: 640px; }

.board.narrow { display: flex; flex-direction: column; gap: 12px; }
.board.narrow .bi { position: relative; }
.board.narrow .bi > .card { height: auto; overflow: visible; }
.board.narrow .bhead { cursor: grab; }
.board.narrow .bi.bdrag .bhead { cursor: grabbing; }
.bi > .card { width: 100%; height: 100%; }
.card.att { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.card.att.err { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); background: color-mix(in srgb, var(--err) 8%, var(--card)); }
.card.tap.att:hover { border-color: color-mix(in srgb, var(--warn) 75%, var(--line)); background: color-mix(in srgb, var(--warn) 14%, var(--card)); }
.card.tap.att.err:hover { border-color: color-mix(in srgb, var(--err) 75%, var(--line)); background: color-mix(in srgb, var(--err) 14%, var(--card)); }
.card.tap .lstat { color: var(--fg-2); }
.card .subline { margin-top: 6px; }
.card .clamp { margin-top: 6px; }
/* bundle card: one row per item, each row opens the item and has its own ⋯ */
.glist { display: flex; flex-direction: column; gap: 2px; }
.grow { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 -6px; padding: 4px 4px 4px 6px; border-radius: 6px; cursor: pointer; }
.grow:hover { background: var(--hover); }
.grow .gm { flex: 1; min-width: 0; }
.grow .gm .bar { margin-top: 6px; }
.grow > .ib { flex: none; width: 24px; height: 24px; opacity: 0; }
.grow:hover > .ib, .grow:focus-within > .ib, .grow > .ib[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .grow > .ib { opacity: 1; } }
.grow.att { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.grow.att.err { background: color-mix(in srgb, var(--err) 12%, transparent); }
@media (pointer: coarse) { .brz.e, .brz.s { display: none; } .brz.se { width: 24px; height: 24px; } .brz.se::after { right: 6px; bottom: 6px; } }
/* markdown has block children (lists, code), so a line clamp would cut through a line: cap the height and fade a long report */
.lstat { flex: none; padding: 6px 12px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; padding: 0 12px; }
.lr:hover { background: var(--hover); }
.lr .lt { flex: none; color: var(--fg-3); font-size: 11px; }
.lr .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .tn { font-weight: 600; }
.lr .ts { color: var(--fg-2); }
.lr .st { flex: none; color: var(--fg-3); }
.lr .st.ok { color: var(--ok); } .lr .st.bad { color: var(--err); }
.lr.tx .lb { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-family: var(--font); font-size: 12.5px; }
.lr.dv, .lr.th { color: var(--fg-3); }
.lr.er .lb { color: var(--err); }
@media (max-width: 599px) {
  .lr.tx .lb { -webkit-line-clamp: 1; }
}
/* 구성: 프로젝트 (작업 채널·홈 채널에 묶인 레인 카드를 나란히; 카드를 누르면 그 프로젝트만의 지도) */
.pj { margin-top: 28px; }
.pj-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.pj-hd .t { font: 600 15px/22px var(--font); }
.pj-hd .sup { flex: 1 1 260px; min-width: 0; }
.pj-lg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--fg-3); font-size: 11.5px; }
.pj-row { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; }
.pj-card { flex: 0 0 340px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--fg); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.pj-card:hover { background: var(--hover); border-color: var(--fg-3); }
.pj-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-card.diff, .pj-card.diff:hover { border-color: color-mix(in srgb, var(--mine) 55%, var(--line-2)); }
.pj-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.pj-nm { flex: 1 1 auto; min-width: 0; font: 600 15px/22px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pj-chs { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-tg { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 22px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--bg); color: var(--fg-2); font: 500 11.5px/16px var(--font); overflow-wrap: anywhere; }
.pj-tg .kd { color: var(--fg-3); font-weight: 400; }
/* the project's folder: one short line (pathCopy + shortPath), the full path in the title, a tap copies it */
.pj-cwd { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--fg-3); font: 400 12px/18px var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: copy; }
.pj-cwd:hover { color: var(--fg-2); }
.pj-fs { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--layer); }
.pj-f { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; line-height: 20px; }
.pj-f .k { flex: none; width: 104px; color: var(--fg-3); font-size: 11.5px; } /* fits 서브에이전트 모델 on one line */
.pj-f .v { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; overflow-wrap: anywhere; }
.pj-f .dim, .pj-sc .tx.dim { color: var(--fg-3); }
.pj-f .was { color: var(--fg-3); text-decoration: line-through; }
.pj-f .ar { color: var(--mine); }
.pj-f.diff .v b { color: var(--mine); font-weight: 600; }
.pj-f .bd { align-self: center; }
.pj-g { color: var(--fg-3); font-size: 10.5px; }
.pj-sc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pj-sc .cl { color: var(--fg-3); font: 500 11px/16px var(--font); }
.pj-sc .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.pj-bk { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pj-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 600 15px/22px var(--font); }
@media (max-width: 639px) {
  .pj-row { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
  .pj-card { flex: none; width: 100%; }
}
/* 구성: harness map */
#v-harness { max-width: none; }
.hm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.hm-bar .sup { flex: 1 1 260px; min-width: 0; }
.hm-scroll { overflow-x: auto; padding: 0 0 8px; }
.hm-canvas { position: relative; margin: 0 auto; }
.hm-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hm-edge { fill: none; stroke: color-mix(in srgb, var(--fg-3) 55%, transparent); stroke-width: 1.4; transition: stroke .15s; }
.hm-edge.sup { stroke-dasharray: 4 3; }
.hm-edge.hot { stroke: var(--accent); stroke-width: 1.8; }
.hm-ah { fill: color-mix(in srgb, var(--fg-3) 70%, transparent); }
.hm-ah.hot { fill: var(--accent); }
.hm-lb { fill: var(--accent); font: 500 10.5px var(--font); stroke: var(--bg); stroke-width: 4px; paint-order: stroke; opacity: 0; transition: opacity .15s; }
.hm-lb.hot { opacity: 1; }
.hm-ch { position: absolute; top: 0; height: 18px; color: var(--fg-3); font: 500 11px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-n { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 6px 10px 6px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); text-align: left; transition: border-color .15s, background .15s; }
.hm-n:hover { background: var(--hover); border-color: var(--fg-3); }
.hm-n.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hm-n.sup { border-style: dashed; background: var(--bg); }
.hm-n.sup:hover { background: var(--hover); }
.hm-n .t { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 12.5px/18px var(--font); letter-spacing: -.01em; }
.hm-n .t .ic { width: 13px; height: 13px; color: var(--fg-3); }
.hm-n .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-n .s, .hm-n .lk { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: 11.5px; line-height: 15px; overflow-wrap: anywhere; }
.hm-n .lk { color: var(--fg-3); font-size: 11px; }
.hm-n.m { position: static; width: 100%; height: auto; min-height: 52px; padding: 8px 12px; }
.hm-flow .sec { margin: 16px 0 8px; }
.hm-flow .sec:first-child { margin-top: 0; }
.hm-stack { display: flex; flex-direction: column; gap: 8px; }
.hm-down { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--fg-3); font-size: 11.5px; line-height: 16px; }
.hm-down .ic { width: 14px; height: 14px; }
/* 구성: simple map = the main line as a responsive flow of stage cards (3 columns from 1200px, 2 from 700px, one stacked
   column below). Each card: an optional "<previous>에서 · <label>" line, a header (step number, title, count) and one inner list
   that scrolls by itself past --hm-list-h, so the page never scrolls sideways. The chevron connector sits in the grid gap:
   right-pointing between neighbours in a row, down-pointing at the start of a new row and in the stacked column. */
#harness { --hm-gap: 28px; --hm-list-h: 264px; }
.hm-simple { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hm-gap); align-items: start; }
/* toolbar: tonal buttons sit on the gray canvas here, so they take the card fill to stay visible */
.hm-bar > .btn.tonal { background: var(--card); }
.hm-bar > .btn.tonal:hover { background: var(--card-hover); }
.hm-st { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: var(--r-card); background: var(--card); transition: box-shadow .15s, background .15s; }
.hm-st.one { cursor: pointer; }
.hm-st.one:hover { background: var(--card-hover); }
.hm-st.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hm-st.rel { box-shadow: inset 0 0 0 1px var(--accent); }
.hm-row.rel, .hm-chip.rel { border-color: var(--accent); }
.hm-ar { position: absolute; top: 20px; left: calc(var(--hm-gap) / -2); display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--card); color: var(--fg-3); box-shadow: 0 0 0 4px var(--bg); pointer-events: none; }
.hm-ar .ic { width: 14px; height: 14px; stroke-width: 2.25; }
.hm-from { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; margin: -4px 0 -4px; color: var(--fg-3); font: 400 12px/16px var(--font); word-break: keep-all; overflow-wrap: anywhere; }
.hm-from b { color: var(--fg-2); font-weight: 500; }
.hm-from b::before { content: "·"; margin-right: 6px; color: var(--fg-3); font-weight: 400; }
.hm-sh { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
button.hm-sh { cursor: pointer; }
.hm-sh .t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: 600 16px/22px var(--font); letter-spacing: -.01em; }
.hm-sh .l { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.hm-sh .s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: 13px; line-height: 19px; word-break: keep-all; overflow-wrap: anywhere; }
.hm-no { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--layer); color: var(--fg-2); font: 600 12px/1 var(--font); letter-spacing: 0; }
.hm-ct { margin-left: auto; font-variant-numeric: tabular-nums; }
.hm-list { display: flex; flex-direction: column; gap: 12px; min-height: 0; max-height: var(--hm-list-h); margin: 0 -8px; padding: 0 8px 2px; overflow-y: auto; overscroll-behavior: contain; }
.hm-list.fix { height: var(--hm-list-h); }
.hm-rows { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.hm-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg); font: 500 13px/18px var(--font); text-align: left; }
.hm-row:hover { background: var(--card-hover); }
.hm-row.on { border-color: var(--accent); }
.hm-row .dot { flex: none; }
.hm-row .l { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row .s { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-weight: 400; font-size: 12px; }
.hm-with { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.hm-rows + .hm-with, .hm-list > .hm-with:first-child { border-top: 0; padding-top: 0; }
.hm-rows + .hm-with { border-top: 1px solid var(--line); padding-top: 12px; }
.hm-with .wl { color: var(--fg-3); font: 500 12px/16px var(--font); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 28px; padding: 2px 10px; border: 1px solid transparent; border-radius: 16px; background: var(--layer); color: var(--fg-2); font: 500 12px/16px var(--font); }
.hm-chip:hover { background: var(--hover); color: var(--fg); }
.hm-chip.on { border-color: var(--accent); color: var(--fg); }
.hm-chip.warn { background: color-mix(in srgb, var(--warn) 12%, var(--layer)); color: var(--warn); }
.hm-chip.err { background: color-mix(in srgb, var(--err) 12%, var(--layer)); color: var(--err); }
.hm-chip.off { opacity: .65; }
.hm-chip .dot { flex: none; }
.hm-chip .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chip .hm-bd { margin: 0; gap: 3px; flex-wrap: nowrap; }
.hm-chip .bd { height: 14px; padding: 0 4px; font-size: 10px; line-height: 12px; }
.hm-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
/* connectors: the first card of every row turns its chevron down and moves it into the row gap above */
.hm-simple > .hm-st:nth-of-type(3n+1) > .hm-ar { top: calc(var(--hm-gap) / -2); left: 32px; margin: -11px 0 0 -11px; transform: rotate(90deg); }
@media (max-width: 1199px) {
  .hm-simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-simple > .hm-st:nth-of-type(3n+1) > .hm-ar { top: 20px; left: calc(var(--hm-gap) / -2); margin: 0 0 0 -11px; transform: none; }
  .hm-simple > .hm-st:nth-of-type(2n+1) > .hm-ar { top: calc(var(--hm-gap) / -2); left: 32px; margin: -11px 0 0 -11px; transform: rotate(90deg); }
}
@media (max-width: 699px) {
  #harness { --hm-gap: 32px; --hm-list-h: 300px; }
  .hm-simple { grid-template-columns: minmax(0, 1fr); }
  .hm-st { padding: 16px; }
  /* toolbar: the view switch takes a row of its own, the three buttons share the next one */
  #harness .hm-bar > .seg { flex: 1 1 100%; }
  #harness .hm-bar > .seg button { flex: 1 1 0; }
  #harness .hm-bar > .btn { flex: 1 1 0; padding: 0 12px; }
  .hm-simple > .hm-st > .hm-ar, .hm-simple > .hm-st:nth-of-type(n) > .hm-ar { top: calc(var(--hm-gap) / -2); left: 32px; margin: -11px 0 0 -11px; transform: rotate(90deg); }
  /* the vertical connector: a hairline through the gap behind the chevron */
  .hm-simple > .hm-st + .hm-st::before { content: ""; position: absolute; top: calc(var(--hm-gap) * -1); left: 31px; width: 2px; height: var(--hm-gap); background: var(--line-2); }
}
.hs-desc { margin: 0; color: var(--fg-2); font-size: 12.5px; line-height: 20px; overflow-wrap: anywhere; }
.sh-body .sec { margin: 20px 0 8px; }
.hs-facts { border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.hs-fact { display: flex; gap: 12px; padding: 6px 12px; font-size: 12.5px; line-height: 19px; }
.hs-fact + .hs-fact { border-top: 1px solid var(--line); }
.hs-fact .k { flex: none; width: 92px; color: var(--fg-2); overflow-wrap: anywhere; }
.hs-fact .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hs-set { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.hs-set + .hs-set { margin-top: 8px; }
.hs-set .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hs-set .lb { flex: 1; min-width: 0; font: 500 13px/20px var(--font); overflow-wrap: anywhere; }
.hs-set .ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-set .ctl .fi, .hs-set .ctl .sel { flex: 1; min-width: 0; }
.hs-set .unit { flex: none; color: var(--fg-3); font-size: 12px; }
.hs-act { justify-content: flex-end; margin-top: 8px; }
.hs-ro { font-size: 13px; color: var(--fg-2); }
.note { margin-top: 6px; color: var(--fg-3); font-size: 11.5px; line-height: 16px; overflow-wrap: anywhere; }
.note:empty { display: none; }
.note.ok { color: var(--ok); }
.note.err { color: var(--err); }
textarea.fi { display: block; height: auto; padding: 8px 10px; line-height: 18px; resize: vertical; }
.hs-mono { font: 12px/18px var(--mono); min-height: 280px; }
.hs-sw { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: var(--track); transition: background .15s; }
.hs-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s; }
.hs-sw[aria-checked="true"] { background: var(--accent); }
.hs-sw[aria-checked="true"]::after { transform: translateX(16px); }
.dcs-form { flex-direction: column; align-items: stretch; gap: 12px; }
.dcs-trail { display: inline-flex; align-items: center; gap: 8px; }
.dcs-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dcs-err { color: var(--err); font-size: 13px; line-height: 20px; }
.dcs-saved { align-self: flex-start; }
.ms-copy { display: flex; gap: 8px; }
.ms-copy .fi { flex: 1; min-width: 0; }
.ms-addrow .tx { min-width: 0; }
.ms-add { margin-top: 12px; }
#webaccess .dcs-form > div > :is(.sup, .dcs-saved) { margin-top: 6px; }
.dcs-res { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; }
.dcs-res.err { color: var(--err); }
.dcs-ok { color: var(--ok); font-weight: 600; }
.dcs-res .btn { align-self: flex-start; margin-top: 6px; }
.dv-code { font: 600 32px/40px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 6px; }
/* settings: 업데이트 */
.sec .upd-new { margin-left: 8px; vertical-align: middle; }
/* a section heading with its own action (실행 하네스 · 확인): the button sits at the right end, apart from the title */
.sec.sec-act { display: flex; align-items: center; gap: 8px; }
.sec.sec-act .upd-new { margin-left: 0; }
.sec.sec-act > .btn { margin-left: auto; }
.upd-box { padding: 12px 16px 14px 52px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.upd-box .hd { font-size: 14px; line-height: 20px; font-weight: 600; }
.upd-box.err .hd, .upd-box.err .upd-msg { color: var(--err); }
.upd-box.ok .upd-msg { color: var(--ok); }
.upd-box code { font: 12px/18px var(--mono); padding: 0 4px; border-radius: 4px; background: var(--layer); }
.upd-msg { font-size: 13px; line-height: 19px; white-space: pre-line; overflow-wrap: anywhere; }
.upd-detail { color: var(--fg-3); font: 11.5px/16px var(--mono); overflow-wrap: anywhere; }
.upd-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; min-width: 0; }
.upd-log li { display: flex; gap: 8px; min-width: 0; font-size: 13px; line-height: 19px; color: var(--fg-2); }
.upd-log li.dim { color: var(--fg-3); }
.upd-log code { flex: none; background: none; padding: 0; color: var(--fg-3); }
.upd-log span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-block { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); font-size: 13px; line-height: 19px; }
.upd-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.upd-act .sup { color: var(--fg-3); font-size: 12px; }
.upd-at { flex: none; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--layer); color: var(--fg); font: inherit; font-size: 13px; }
@media (max-width: 600px) { .upd-box { padding-left: 16px; } }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chips .chip { height: auto; min-height: 28px; padding: 3px 10px; text-align: left; }
.hs-chips .chip .tx { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 640px) { #harness.hs-open { padding-right: 480px; } }
/* 구성: 기능 보기 (badges on the map, 기능 목록 panel, 상세의 "여기서 작동하는 기능") */
.btn.tonal[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.hm-bd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bd { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 4px; font: 500 10.5px/14px var(--font); white-space: nowrap; }
.bd.f { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.bd.a { border: 1px dashed var(--fg-3); color: var(--fg-2); }
.tag.st.enforced { background: var(--accent); color: var(--bg); }
.tag.st.advisory { box-sizing: border-box; border: 1px dashed var(--fg-3); background: transparent; color: var(--fg-2); }
.fc { margin-top: 28px; }
.fc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.fc-bar .fi { flex: 1 1 200px; width: auto; }
.fc-bar .sel { width: auto; min-width: 150px; }
.fc-bar .seg { flex: none; flex-wrap: nowrap; }
.fc-bar .seg button { flex: none; padding: 0 12px; }
.fc-count { margin: 4px 0 12px; }
.fc-gh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; width: 100%; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); text-align: left; font: 600 13px/20px var(--font); }
.fc-gh .ic { width: 14px; height: 14px; color: var(--fg-3); transition: transform .15s; }
.fc-gh[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.fc-gh .sup { font-weight: 400; }
.fc-gh .note { flex-basis: 100%; margin: 0 0 0 24px; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin: 10px 0 20px; }
.fc-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.fc-card:hover { background: var(--hover); border-color: var(--fg-3); }
/* Material 3 card types instead of a colored side stripe: enforced = filled card, advisory = outlined card. */
.fc-card.enforced, .hs-ft.enforced { border-color: transparent; background: var(--layer); }
.fc-card.enforced:hover, .hs-ft.enforced.go:hover { background: var(--active); border-color: transparent; }
.fc-card.off { opacity: .6; }
.fc-card .top, .hs-ft .top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fc-card .nm, .hs-ft .nm { flex: 1; min-width: 0; font: 600 13px/20px var(--font); overflow-wrap: anywhere; }
.fc-card .wh, .hs-ft .wh { color: var(--fg-2); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fc-card .fc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-card .src, .hs-ft .src { color: var(--fg-3); font: 11px/16px var(--mono); overflow-wrap: anywhere; }
.fc-card .dup, .hs-ft .dup { color: var(--warn); font-size: 11.5px; line-height: 16px; overflow-wrap: anywhere; }
.hs-fts { display: flex; flex-direction: column; gap: 8px; }
.hs-ft { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); }
.hs-ft.go { cursor: pointer; }
.hs-ft.go:hover { background: var(--hover); }
.hs-ft.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hs-fw > .fi { margin-top: 8px; }
.fc-sw { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* 구성: 커스텀 표시 (config.json 의 ui.origin_view 가 켜졌을 때만 그려져요) */
:root { --mine: #0e7490; }
:root[data-theme="dark"] { --mine: #38c0d9; }
.bd.m { border: 1px solid color-mix(in srgb, var(--mine) 55%, transparent); background: color-mix(in srgb, var(--mine) 14%, transparent); color: var(--mine); }
.tag.m, .tag.scope.personal, .tag.scope.project { background: color-mix(in srgb, var(--mine) 14%, transparent); color: var(--mine); }
.tag.scope { height: auto; min-height: 20px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.hm-bar .hm-legend { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; }
.hm-legend .bd { flex: none; }
.hm-bar .seg { flex: none; flex-wrap: nowrap; }
.hm-bar .seg button { flex: none; padding: 0 12px; }
.hm-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.hm-mine .mt { color: var(--mine); font: 500 11px/16px var(--font); }
.hm-chip.mine { border-color: color-mix(in srgb, var(--mine) 55%, var(--line-2)); }
.hm-row .bd { flex: none; }
.hm-st.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.hm-none { color: var(--fg-3); font-size: 13px; line-height: 19px; }
.hm-cs .hm-more { flex: none; align-self: flex-start; height: 28px; margin-top: 2px; padding: 0 8px; font-size: 12px; }
.hm-cr .m2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-cs { display: flex; flex-direction: column; gap: 2px; }
.hm-cs .cl { position: sticky; top: 0; z-index: 1; margin: 0 -8px; padding: 6px 8px 4px; background: var(--card); color: var(--fg-3); font: 500 12px/16px var(--font); }
.hm-cs .cl:not(:first-child) { margin-top: 6px; }
.hm-cr { display: flex; flex: none; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px; margin: 0 -8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg); text-align: left; font: 500 13px/18px var(--font); }
.hm-cr:hover { background: var(--card-hover); }
.hm-cr .m1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.hm-cr .m2 { color: var(--fg-3); font-weight: 400; font-size: 12px; line-height: 16px; }
.hm-cr .m2.mono { font-family: var(--mono); font-size: 11px; }
.hs-or { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: var(--fg-2); font-size: 12px; line-height: 18px; }
/* ---------- chat: decision card above the composer, todo strip above the timeline ---------- */
.dcard { display: flex; flex-direction: column; max-height: max(60dvh, 240px); margin: 0 0 8px; border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 6%, var(--card)); overflow: hidden; }
.dcard[hidden] { display: none; }
/* a waiting send-approval card that later posts pushed up: one row in the dock that opens it (10-decision-card.js dcPointer) */
.dc-wait { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dc-wait-k { flex: none; font-weight: 600; color: var(--accent); }
.dc-wait-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-wait-n { flex: none; opacity: .7; font-size: .9em; }
.dc-wait-go { flex: none; font-weight: 600; }
.dc-hd { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 8px 16px; }
.dc-tt { flex: 1; min-width: 0; }
.dc-ey { display: block; color: var(--fg-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.dc-q { margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.dc-q p { margin: 0; }
.dc-decide { margin: 6px 0 4px; font: 400 14px/21px var(--font); letter-spacing: 0; overflow-wrap: anywhere; }
.dc-decide-k { font-weight: 600; }
.dc-decide ul { margin: 2px 0 0; padding-left: 18px; }
.dc-decide li + li { margin-top: 2px; }
.dcard.fold .dc-q { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dcard.fold .dc-hd { padding-bottom: 12px; }
.dc-fold { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3); }
.dc-fold:hover { background: var(--hover); }
.dc-fold .ic { width: 18px; height: 18px; transition: transform .15s; }
.dcard.fold .dc-fold .ic { transform: rotate(180deg); }
.dc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; }
.dc-steps { flex: none; display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.dc-steps::-webkit-scrollbar { display: none; }
.dc-chip { flex: none; max-width: 70%; height: var(--btn-h-sm); padding: 0 12px; border: 0; border-radius: 999px; background: var(--card); color: var(--fg-2); font: inherit; font-size: 13px; line-height: var(--btn-h-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-chip.got { color: var(--fg); }
.dc-chip.on { background: var(--fg); color: var(--bg); }
.dc-sub, .dcm-sub { padding: 2px 4px 0; color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 600; }
.dc-row, .dcm-row { flex: none; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.dcm-row { background: var(--layer); }
.dc-row:hover:not(:disabled), .dcm-row:hover:not(:disabled) { background: var(--card-hover); }
.dc-row:active:not(:disabled), .dcm-row:active:not(:disabled) { background: var(--active); }
.dc-row:disabled, .dcm-row:disabled { cursor: default; }
.dc-row:disabled:not(.on), .dcm-row:disabled:not(.on) { opacity: .6; }
.dc-row.rec, .dcm-row.rec { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.dc-row.on, .dcm-row.on { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.dc-key { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dcm-row .dc-key { background: var(--card); }
.dc-row.rec .dc-key, .dcm-row.rec .dc-key { background: var(--accent); color: var(--on-accent); }
.dc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-lb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.dc-tag { flex: none; padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; line-height: 18px; font-weight: 600; }
.dc-ds { color: var(--fg-3); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.dc-draft { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); }
.dc-dr-h { display: flex; gap: 8px; font-size: 13px; line-height: 20px; }
.dc-dr-k { flex: none; color: var(--fg-3); }
.dc-dr-v { min-width: 0; color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.dc-dr-b { max-height: min(22dvh, 180px); margin-top: 2px; overflow-y: auto; overscroll-behavior: contain; color: var(--fg); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-edit { flex: none; display: flex; flex-direction: column; gap: 8px; }
.dc-ctx { display: flex; align-items: center; gap: 8px; }
.dc-note { width: 100%; box-sizing: border-box; min-height: 72px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); resize: vertical; font-size: 14px; line-height: 22px; }
.dc-note:focus { outline: 0; border-color: var(--accent); }
.dc-eb { display: flex; gap: 8px; }
.dc-fl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-fl .dr-add { flex: none; padding: 0 12px; }
.dc-fl .fatt { height: 48px; max-width: 100%; }
/* 돌아가기 (secondary) and the send button (primary) are the one button system (01-tokens.css); only the row layout is here */
.dc-back, .dc-go { flex: 1; }
@media (pointer: coarse) { .dc-note { font-size: 16px; } }
.dc-st { flex: none; padding: 4px 16px 10px; color: var(--fg-3); font-size: 12.5px; line-height: 18px; }
/* In the 알림 / 작업내역 conversations the rows are not answer buttons: a tap on the message opens the decision sheet (30-notices.js). */
.dcm.fx { cursor: pointer; }
.dcm.fx .dcm-row { pointer-events: none; }
.dcm { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin-top: 10px; }
.todo { flex: none; margin: 0 0 8px; border-radius: 12px; background: var(--card); }
.todo[hidden] { display: none; }
.td-bar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--fg); font: inherit; font-size: 13.5px; line-height: 20px; text-align: left; cursor: pointer; }
.td-bar .td-g { margin-top: 0; }
.td-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-n { flex: none; color: var(--fg-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.td-ch { flex: none; width: 16px; height: 16px; color: var(--fg-3); transition: transform .15s; }
.td-bar[aria-expanded="true"] .td-ch { transform: rotate(180deg); }
.td-list { max-height: min(40dvh, 320px); padding: 0 12px 10px; overflow-y: auto; overscroll-behavior: contain; }
.td-ph { margin: 8px 0 2px; color: var(--fg-3); font-size: 12px; line-height: 16px; font-weight: 600; }
.td-r { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 13.5px; line-height: 20px; }
.td-tx { min-width: 0; overflow-wrap: anywhere; }
.tr-done .td-tx { color: var(--fg-3); }
.tr-drop .td-tx { color: var(--fg-3); text-decoration: line-through; }
.td-g { flex: none; position: relative; width: 14px; height: 14px; margin-top: 3px; box-sizing: border-box; border-radius: 50%; }
.tg-pend { border: 1.5px solid var(--fg-3); }
.tg-act { border: 1.5px solid var(--fg); }
.tg-act::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--fg); }
.tg-done { background: var(--fg-3); }
.tg-done::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid var(--card); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.tg-drop { border: 1.5px dashed var(--fg-3); }
@media (pointer: coarse) { .dc-fold { width: 44px; height: 44px; margin: -6px -4px 0 0; } .td-bar { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .dc-fold .ic, .td-ch { transition: none; } }
/* ---- 프로젝트 · 세션 (docs/layers.md §5) ---- */
#v-project { max-width: 1180px; }
.pmv-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.pmv-hmain { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Left-aligned: when the head wraps (narrow screens, or the hint under a disabled button widens the box) a right-aligned button floated away from the text above it. */
.pmv-hact { flex: none; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pmv-hact .note { margin-top: 0; }
.pmv-hrow { display: flex; align-items: center; gap: 8px; }
.pmd { display: flex; flex-direction: column; gap: 12px; }
.pmd .as-h { overflow-wrap: anywhere; }
.pmv-edit { display: block; width: 100%; margin: 0 -8px; padding: 2px 8px; border: 0; border-radius: var(--r-ctl); background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; overflow-wrap: anywhere; box-sizing: content-box; }
.pmv-edit:hover { background: var(--hover); }
.pmv-edit.empty { color: var(--fg-3); }
.pmv-title { font: 700 20px/28px var(--font); }
.pmv-purpose { color: var(--fg-2); font-size: 14px; line-height: 22px; }
.pmv-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pmv-form .fi { width: 100%; }
.pmv-code { font-family: var(--mono); font-size: 12.5px; line-height: 18px; white-space: pre; overflow: auto; }
.pmv-ta { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; line-height: 22px; }
.pmv-acts { display: flex; justify-content: flex-end; gap: 8px; }
.pmv-cols { display: flex; flex-direction: column; }
.pmv-col { display: contents; }
.pmv-sec { display: flex; flex-direction: column; min-width: 0; margin-top: 28px; }
.pmv-sec > .sec { margin-top: 0; }
@media (min-width: 640px) {
  .pmv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .pmv-col { display: flex; flex-direction: column; min-width: 0; }
}
.pmv-goal { display: flex; flex-direction: column; gap: 12px; }
.pmv-prog { display: flex; align-items: center; gap: 12px; }
.pmv-prog .bar { flex: 1; margin-top: 0; height: 6px; border-radius: 3px; }
.pmv-prog .bar i { border-radius: 3px; }
.pmv-big { flex: none; font: 700 20px/28px var(--font); }
.pmv-mlist { display: flex; flex-direction: column; }
.pmv-ms { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; }
.pmv-ms + .pmv-ms { border-top: 1px solid var(--line); }
.pmv-ms .pmv-edit { font-size: 15px; line-height: 22px; }
.pmv-ms.done .pmv-edit { color: var(--fg-3); text-decoration: line-through; }
.pmv-mtx { flex: 1; min-width: 0; padding-top: 1px; }
.pmv-ck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 4px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--bg); }
.pmv-ck .ic { width: 14px; height: 14px; opacity: 0; }
.pmv-ck[aria-checked="true"] { border-color: var(--fg); background: var(--fg); }
.pmv-ck[aria-checked="true"] .ic { opacity: 1; }
.pmv-add { display: flex; align-items: stretch; gap: 8px; }
.pmv-add .fi { flex: 1; min-width: 0; }
.pmv-add .btn { flex: none; height: auto; }
.pmv-add .btn:disabled { opacity: 1; background: var(--card); border-color: var(--line-2); color: var(--fg-3); }
.pmv-rt { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.pmv-rt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.pmv-rt-name { flex: 1 1 120px; min-width: 0; font: 500 15px/22px var(--font); overflow-wrap: anywhere; }
.pmv-rt-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--fg-3); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.pmv-rt-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pmv-rt-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.pmv-fld { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pmv-fld .fi { flex: 1; min-width: 0; }
.pmv-day { margin: 14px 4px 6px; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.pmv-day:first-child { margin-top: 0; }
.pmv-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lproj { padding-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 12px; line-height: 16px; }

/* Rows of the 모니터링 screen (30-monitoring.js), the jump highlight (30-notices.js), the 홈 cards (08-home.js) and the decision sheet (30-notices.js). */
.nt-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--fg); font: inherit; text-align: left; }
.nt-row:hover { background: var(--card-hover); }
.nt-row:active { background: var(--active); }
.nt-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--fg-3); }
.nt-dot.tone-done { background: var(--ok); }
.nt-dot.tone-run { background: var(--accent); }
.nt-dot.tone-ask { background: var(--warn); }
.nt-dot.tone-fail { background: var(--err); }
.nt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-t { font: 500 15px/22px var(--font); overflow-wrap: anywhere; }
.nt-row.un .nt-t { font-weight: 600; }
.nt-m { color: var(--fg-3); font: 400 12px/16px var(--font); }
/* The message a notice led to (ntFlash in 30-notices.js marks the element with .nt-hl). The effect sits on the content, never on the row:
   - a card or bubble (.ub, .ccard, .sn, .pn) is lit inside its own rounded shape: a faint tint of itself plus a soft accent ring (the overlay copies the host's radius);
   - plain text (.nt-hl.nt-bar) gets only a faint tint inside the message's own bounds (no left bar: owner 2026-10-22).
   It fades in ~0.2s after the scroll lands (delay), holds, and is gone at ~2s. The ring and glow stay within 8px: the timeline's own 8px gutter (03-base.css) keeps them from being clipped. */
.nt-hl { position: relative; --hl: 9%; --hl-ring: 34%; --hl-glow: 20%; }
:root[data-theme="dark"] .nt-hl { --hl: 13%; --hl-ring: 46%; --hl-glow: 26%; }
.nt-hl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--accent) var(--hl), transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) var(--hl-ring), transparent), 0 0 8px 0 color-mix(in srgb, var(--accent) var(--hl-glow), transparent); opacity: 0; pointer-events: none; animation: nt-hl 1.8s ease-in-out .2s both; }
/* Plain text: the phone's message already has 16px side padding, so the bar sits in it. From 640px up the host grows 8px each side as padding and gives it back as margin: the text does not move. */
.nt-hl.nt-bar { border-radius: var(--r-ctl); }
@media (min-width: 640px) { .nt-hl.nt-bar { margin-inline: -8px; padding-inline: 8px; } }
.nt-hl.nt-bar::after { box-shadow: none; }
@keyframes nt-hl { 0% { opacity: 0; } 14% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } }
/* Reduced motion: no fade or scroll animation, just a still tint for a moment (a step animation; !important beats the global animation: none). */
@media (prefers-reduced-motion: reduce) {
  .nt-hl::after { animation: nt-hl-still 1.4s step-end both !important; }
}
@keyframes nt-hl-still { 0% { opacity: 1; } 100% { opacity: 0; } }

@keyframes nt-in { from { opacity: 0; } to { opacity: 1; } }

.mon-sum { padding: 4px 4px 12px; color: var(--fg-2); font: 500 14px/20px var(--font); }
.mon-list { padding: 4px; }
.mon-kind { margin-left: 8px; vertical-align: 1px; }
.nt-mon { cursor: default; }
button.nt-mon { cursor: pointer; }
button.nt-mon .chev { flex: none; align-self: center; color: var(--fg-3); }
div.nt-mon:hover, div.nt-mon:active { background: transparent; }
div.nt-mon .nt-dot { margin-top: 7px; }

/* Home cards: 알림 / 작업내역 / 모니터링 (fixed height on the board). No overflow here: the board's own rule (.bi > .card, 05-log.css) lets a card shorter than its rows scroll instead of cutting the last ones off. */
.card.hc { display: flex; flex-direction: column; }
.hc .ch .tag { flex: none; }
.hc-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 8px; }
.hc-row { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 14px/20px var(--font); }
.hc-row { cursor: pointer; border-radius: var(--r-ctl); margin-inline: -6px; padding: 4px 6px; }
.hc-row:hover { background: var(--card-hover); }
.hc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hc-row .nt-dot { margin-top: 0; }
.hc-row .tb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-row .t, .hc-row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-row .n { color: var(--fg-3); font: 400 12px/16px var(--font); }
.hc-row .m { flex: none; color: var(--fg-3); font: 400 12px/16px var(--font); }
.hc-mon { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.hc-mon .nt-dot { margin-top: 6px; }
.hc-mon .b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-mon .n, .hc-mon .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-mon .n { font: 500 14px/20px var(--font); }
.hc-mon .s { color: var(--fg-3); font: 400 12px/16px var(--font); }
.hc-more { margin-top: 8px; color: var(--fg-3); font: 400 12px/16px var(--font); }
.hc-none { margin-top: 8px; color: var(--fg-3); font: 400 14px/22px var(--font); }

/* Decisions (30-notices.js): a question that waits on the owner. Tapping its card on 홈 opens the full-screen overlay (14-overlay.css): the whole text, then one button per option (recommended first). */
/* Computer switch sheet (33-peers.js): the bottom sheet on the phone and a centered dialog from 700px. Decisions and notices use the full-screen overlay (14-overlay.css), not this. */
.ds-bd { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .42); animation: nt-in .14s ease-out; }
.ds-sheet { display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: 90dvh; border-radius: 20px 20px 0 0; background: var(--pop); color: var(--fg); padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--float); animation: ds-up .18s ease-out; }
.ds-hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 12px 0 20px; }
.ds-ey { flex: 1; color: var(--warn); font: 600 13px/20px var(--font); }
.ds-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 12px; }
@media (min-width: 700px) {
  .ds-bd { align-items: center; }
  .ds-sheet { border-radius: 20px; max-height: min(80vh, 760px); padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .ds-bd, .ds-sheet { animation: none; } }
.ds-t { margin: 4px 0 0; font: 700 20px/28px var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ds-m { margin: 2px 0 12px; color: var(--fg-3); font: 400 12px/16px var(--font); }
.ds-md { color: var(--fg-2); font: 400 14px/22px var(--font); overflow-wrap: anywhere; }
.ds-md p { margin: 0 0 10px; }
.ds-md p:last-child { margin-bottom: 0; }
.ds-md code { overflow-wrap: anywhere; }
.ds-opt, .ds-direct { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; border-radius: var(--r-ctl); background: var(--fs-fill); color: var(--fg); font: inherit; text-align: left; }
.ds-opt.c { align-items: center; }
.ds-opt:hover, .ds-direct:hover { background: var(--hover); }
.ds-opt:active, .ds-direct:active { background: var(--active); }
.ds-opt.rec { background: var(--accent); color: var(--on-accent); }
.ds-opt.rec:hover, .ds-opt.rec:active { background: var(--accent); filter: brightness(.94); }
.ds-opt:disabled, .ds-direct:disabled { opacity: .55; }
.ds-lb { display: flex; align-items: center; gap: 8px; font: 600 15px/22px var(--font); overflow-wrap: anywhere; }
.ds-tag { flex: none; padding: 0 8px; border-radius: 10px; background: rgba(255, 255, 255, .22); font: 600 11px/18px var(--font); }
.ds-ds { font: 400 13px/18px var(--font); opacity: .82; overflow-wrap: anywhere; }
.ds-direct { align-items: center; background: transparent; color: var(--fg-2); font: 500 14px/20px var(--font); }
.ds-st { color: var(--fg-3); font: 400 13px/18px var(--font); text-align: center; }
.ds-res { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--fs-fill); }
.ds-rl { color: var(--ok); font: 600 12px/16px var(--font); }
.ds-ra { font: 600 15px/22px var(--font); overflow-wrap: anywhere; }
@keyframes ds-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Decision overlay (30-notices.js dkOpen, 10-decision-card.js renderSheet) and draft approval (hub/draft-approval.ts): content only; the frame is 14-overlay.css. */
.dc-dh { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 22px; }
.dc-dh .dc-dr-v { font-size: 16px; word-break: keep-all; }
.dc-dh .dc-dr-v.sub { font-weight: 500; }
.fs-body .dc-dr-b { max-height: none; margin: 0; overflow: visible; font-size: 15px; line-height: 24px; word-break: keep-all; }
.fs-body .dc-q { margin-top: 0; font-size: 17px; line-height: 26px; }
/* the send sheet's buttons are the one button system (01-tokens.css): .dc-act quiet, .dc-act.alt secondary, .dc-act.main primary */
.dc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-act { flex: none; }
.dc-act:active:not(:disabled) { background: var(--active); }
.dc-act.alt { background: var(--fs-fill); }
.dc-act.main { order: 0; padding: 0 20px; }
.dc-act.main:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #000); }
.dc-act:disabled { opacity: .55; }
.dc-manual { margin-left: auto; gap: 4px; padding: 0 4px 0 8px; color: var(--fg-3); font-size: 13px; }
.dc-manual:active { color: var(--fg); }
.dc-manual .ic { width: 14px; height: 14px; }

/* x (무시): a question that waits on the owner can be waved off. 44px thumb target on every surface, quiet --fg-3 until pressed. */
button.nt-x { width: 44px; height: 44px; border-radius: var(--r-ctl); color: var(--fg-3); }
button.nt-x:active { background: var(--active); color: var(--fg); }
.hr.hrx { gap: 0; padding: 0; }
.hrx-m { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 4px 12px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.hrx-m:last-child { padding-right: 16px; }
.hrx .nt-x { margin-right: 8px; }
/* The x keeps its 44px target but takes no row height (it overhangs into the row padding and the list gap), so a row with an x is as tall as one without. */
.hc-row .nt-x { margin-block: -12px; margin-right: -6px; }
/* A row without an x keeps the x's slot (44px minus the -6px overhang) when its list has one, so the times line up in one column. */
.hc-list:has(.nt-x) > .hc-row:not(:has(.nt-x))::after { content: ""; flex: none; width: 38px; }
.ds-rl.ign { color: var(--fg-3); }
.dc-hb { flex: none; display: flex; align-items: center; gap: 2px; }
/* 홈 답변 필요: a monitoring app's send approvals folded into one row; the items unfold below it, indented. */
.ntg-h[aria-expanded="true"] .hs { color: var(--muted, inherit); }
.ntg-l { margin: 0 0 6px 20px; padding-left: 8px; border-left: 2px solid var(--line, rgba(128, 128, 128, .35)); }

/* 알림 conversation: 지우기 (x) on each alert that needs no answer (30-notices.js ntAlertMarks) */
#tl > [data-ts]:has(> .al-x) { position: relative; padding-right: 44px; }
#tl > [data-ts] > .al-x { position: absolute; top: 8px; right: 8px; color: var(--fg-3); }
#tl > [data-ts] > .al-x:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

/* 채팅 (web/js/31-conversations.js): the chat list (a row = icon, title, one-line preview, status; never a time) and the "새 메시지" divider.
   Below 1100px the list and a conversation are two screens (#v-chat.cv-listing = the list); from 1100px they sit side by side. */
.cv-side, .cv-list { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-panel); overflow: hidden auto; }
.cv-side { display: none; }
.cv-head { display: none; }
#v-chat.cv-listing > .cv-side, #v-monitoring.cv-listing > .cv-side { display: block; }
#v-chat.cv-listing > :not(.cv-side), #v-monitoring.cv-listing > :not(.cv-side) { display: none; }

.cv-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 6px 16px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; }
.cv-row + .cv-row { border-top: 1px solid var(--line); }
/* the open conversation: a small accent dot in the row's left padding (the slot every row already has, so text never shifts); phone only — the wide layout already highlights the row */
.cv-row { position: relative; }
@media (max-width: 1099px) { .cv-row.on::before { content: ""; position: absolute; top: 50%; left: 5px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); } }
.cv-row:hover { background: var(--card-hover); }
.cv-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--layer); color: var(--fg-2); font: 700 15px/24px var(--font); }
.cv-av .ic { width: 20px; height: 20px; }
/* the app's own mark (the top bar's .logo) as the main assistant's icon */
.cv-av .logo { width: 55%; height: 55%; border-radius: 28%; }
.cv-av .logo::after { inset: 31%; }
.cv-av.nt { background: var(--layer); color: var(--fg); }
.cv-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-n, .cv-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-n { font: 500 15px/22px var(--font); }
.cv-p { color: var(--fg-3); font: 400 14px/20px var(--font); }
.mon-pc { margin-left: 8px; white-space: nowrap; color: var(--fg-3); font: 400 11px/16px var(--font); }
.cv-id { margin-left: 8px; color: var(--fg-3); font: 400 12px/16px var(--font); }
.cv-row.unread .cv-n { font-weight: 700; }
/* a session under its project: indented, smaller avatar; the group label for sessions started from chat */
.cv-row.sub { min-height: 44px; padding-left: 32px; }
.cv-row.sub .cv-av { width: 28px; height: 28px; }
.cv-row.sub .cv-n { font-size: 14px; }
.cv-gh { padding: 12px 16px 4px; color: var(--fg-3); font: 500 12px/16px var(--font); }
.cv-m { flex: none; display: flex; align-items: center; gap: 6px; }
/* a row with a preview line (running sessions, 모니터링) */
.cv-row.pv { align-items: flex-start; padding-block: 10px; }
.cv-row.pv .cv-p { font-size: 13px; line-height: 18px; }
.cv-row.pv .cv-m { align-self: center; }
.cv-m2 { display: flex; align-items: center; gap: 6px; }
.cv-m2:empty { display: none; }
.cv-head .cvmenu { margin-left: auto; }

/* the header picker (chips / caret menu) is replaced by the list in 대화; 로그 keeps it */
.thead[data-mode="chat"] :is(.tsw, .tdrop) { display: none !important; }
/* phone, inside a conversation: back arrow + the conversation's name take the whole bar */
.appbar.cvconv h1 { flex: 1 1 0; min-width: 0; margin-right: 0; }
.appbar.cvconv .thead { flex: 0 0 auto; margin: 0; }

.tl-in > .cv-new { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--accent); font: 600 12px/16px var(--font); }
.tl-in > .cv-new::before, .tl-in > .cv-new::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
/* a gateway system line (11-todo-strip.js sysLine): small, muted and centered like the divider above, no bubble */
.tl-in > .cv-sys { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; align-self: center; width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 2px 10px; border: 0; border-radius: 999px; background: none; color: var(--fg-3); font: 500 12px/16px var(--font); text-align: center; overflow-wrap: anywhere; }
.tl-in > button.cv-sys { cursor: pointer; }
.tl-in > button.cv-sys:hover { background: var(--line-2); color: var(--fg-2); }
.cv-sys .ic { width: 14px; height: 14px; flex: none; }
.cv-sys .cv-sys-st { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.cv-sys .cv-sys-st[hidden] { display: none; }
.cv-sys .cv-sys-mt { font-variant-numeric: tabular-nums; }

@media (max-width: 1099px) {
  .cv-row.on { background: transparent; }
}

@media (min-width: 1100px) {
  :root { --cv-w: 240px; }
  :is(#v-chat, #v-monitoring) { display: grid; max-width: none; column-gap: 16px; grid-template-columns: var(--cv-w) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  :is(#v-chat, #v-monitoring) > * { grid-column: 2; }
  :is(#v-chat, #v-monitoring) > .cv-side { grid-column: 1; grid-row: 1 / -1; display: block; min-height: 0; margin-bottom: 16px; padding: 8px; }
  :is(#v-chat, #v-monitoring) > .cv-head { grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 4px 12px; }
  #v-chat > .subs { grid-row: 2; }
  #v-chat > .todo { grid-row: 3; }
  #v-chat > .bell { grid-row: 2; }
  #v-chat > .bell-list { grid-row: 4; }
  :is(#v-chat, #v-monitoring) > .chatbox { grid-row: 4; }
  #v-chat > .composer { grid-row: 5; }
  .cv-row.pv { padding-block: 6px; }
  .cv-row { min-height: 36px; padding: 4px 10px; gap: 8px; border-radius: var(--r-ctl); }
  .cv-row.sub { min-height: 36px; padding-left: 20px; }
  .cv-row .cv-n, .cv-row.sub .cv-n { font-size: 14px; line-height: 20px; }
  .cv-row + .cv-row { margin-top: 2px; border-top: 0; }
  .cv-row.on { background: var(--layer); }
  :is(.cv-side, .cv-list) .cv-av, .cv-row.sub .cv-av { width: 24px; height: 24px; font-size: 12px; }
  :is(.cv-side, .cv-list) .cv-av .ic { width: 14px; height: 14px; }
  .cv-list { padding: 8px; }
  /* 프로젝트: the list beside the open project's page, like 채팅 (go() in 05-command-palette.js sets .pp) */
  .views.pp { display: grid; grid-template-columns: var(--cv-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 16px; overflow: hidden; width: 100%; padding: 24px var(--edge) 0; }
  .views.pp > .view { min-height: 0; max-width: none; margin: 0; padding: 0 0 24px; overflow-y: auto; }
  .views.pp > #v-projects { grid-column: 1; grid-row: 1; margin-bottom: 16px; padding: 0; background: transparent; }
  .views.pp > #v-project { grid-column: 2; grid-row: 1; max-width: none; }
  .cv-head .cv-av { width: 36px; height: 36px; font-size: 15px; }
}

/* The tabs of the 알림 conversation (31-conversations.js bellPaint): a chip row over the timeline; every tab but 전체 swaps the timeline for a list of that class.
   Badges: 답변 필요 orange (--warn), 경고 red (--err), the rest the plain accent. */
.bell[hidden], .bell-list[hidden] { display: none; }
.bell { flex: none; display: flex; gap: 6px; margin: 0 0 8px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.bell::-webkit-scrollbar { display: none; }
.bell .chip { height: 32px; padding: 0 8px; gap: 4px; font-size: 12.5px; }
.nb.err { background: var(--err); }
#v-chat.bell-on > .chatbox { display: none; }
.bell-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.bell-gh { padding: 12px 4px 6px; color: var(--fg-2); font: 600 13px/18px var(--font); }
.bell-gh:first-child { padding-top: 4px; }
.bell-none { padding: 32px 16px; color: var(--fg-3); text-align: center; font: 400 14px/20px var(--font); }
.hr .dot.un { background: var(--accent); }

/* Computers (33-peers.js): the chip next to the title, the switch sheet (uses the .ds-* sheet of 09-notices.css) and the bell's other-computer lines. */
.pchip { position: relative; display: none; flex: none; align-items: center; gap: 6px; height: 32px; max-width: 168px; margin: 0 auto 0 8px; padding: 0 8px 0 12px; border: 0; border-radius: 16px; background: var(--card); color: var(--fg); font: 600 14px/18px var(--font); }
.pchip:hover { background: var(--card-hover); }
.pchip:active { background: var(--active); }
.appbar.hasp .pchip { display: inline-flex; }
.appbar.hasp h1 { flex: 0 1 auto; }
.pchip[hidden] { display: none; }
.pc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-c { flex: none; display: inline-flex; }
/* the unread dot sits on the chip's top-right corner, outside the chevron */
.pc-d { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); box-sizing: content-box; }
.pc-d.need { background: var(--warn); }
.pc-i { flex: none; width: 14px; height: 14px; transform: rotate(90deg); color: var(--fg-3); }
.pr-ey { color: var(--fg-2); }
.pr-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.pr-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: var(--r-ctl); background: var(--bg); color: var(--fg); font: inherit; text-align: left; }
.pr-row:hover { background: var(--hover); }
.pr-row:active { background: var(--active); }
.pr-row.on .pr-s { color: var(--fg-2); }
/* the computer being viewed: a small accent dot in a left slot every row reserves (14px extra padding); connection state is the pill on the right, never a second dot */
.pr-row { position: relative; padding-left: 30px; }
.pr-row.on::before { content: ""; position: absolute; top: 50%; left: 14px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.pr-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-t { font: 600 15px/22px var(--font); overflow-wrap: anywhere; }
.pr-s { color: var(--fg-3); font: 400 12px/16px var(--font); }
.pr-bd { flex: none; padding: 0 8px; border-radius: 12px; background: var(--card); color: var(--fg-2); font: 600 12px/22px var(--font); white-space: nowrap; }
.pr-bd.need { color: var(--warn); }
.pr-st { flex: none; padding: 0 8px; border-radius: 12px; background: var(--card); color: var(--fg-3); font: 600 12px/22px var(--font); white-space: nowrap; }
.pr-st.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.pr-line .chev { flex: none; align-self: center; color: var(--fg-3); }
@media (max-width: 699px) {
  .pchip { max-width: 132px; margin-left: 6px; }
}

/* another computer opened inside the installed app (33-peers.js prGo): the whole screen, the safe areas kept by this frame because a page in an iframe reads them as 0 */
.pr-frame { position: fixed; inset: 0; z-index: 2000; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--bg); }
.pr-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }

/* ---------- composer above the phone keyboard ----------
   --kb / --vvh come from web/js/34-composer-viewport.js (visualViewport). With interactive-widget=resizes-content the page already shrinks
   above the keyboard and --kb stays 0; on a browser that ignores it, --kb shrinks the app so the whole composer still sits above the keyboard.
   The layout is the default one; only the box's growth is capped: about 5 lines, and never more than 40% of the visible height for the
   whole composer (box + chip row + paddings, ~72px), then the box scrolls inside itself. */
@media (max-width: 639px) {
  .app { height: calc(100dvh - var(--kb, 0px)); }
  .sendrow textarea { max-height: min(calc(7.5em + 2 * var(--ta-pad)), calc(var(--vvh, 100dvh) * .4 - 72px)); overflow-y: auto; }
}

/* code blocks in messages: a bar with copy / run buttons above the code (web/js/35-code-blocks.js); web terminal sheet (36-shell.js) */
.md .cb { max-width: 100%; margin: 12px 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--layer); overflow: hidden; }
.md .cb > pre { margin: 0; padding-top: 6px; border: 0; border-radius: 0; background: none; }
.cb-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px 6px 0 12px; -webkit-user-select: none; user-select: none; }
.cb-bar[data-lang]::before { content: attr(data-lang); margin-right: auto; color: var(--fg-3); font: 500 11px/16px var(--mono); }
.cb-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--hover); color: var(--fg-2); font: 600 13px/20px var(--font); cursor: pointer; touch-action: manipulation; }
.cb-btn::after { content: attr(data-label); }
.cb-btn:hover { background: var(--active); color: var(--fg); }
.cb-btn.run { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cb-btn.done { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.cb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

dialog.dlg.shell[open] { display: flex; flex-direction: column; width: min(820px, calc(100vw - 24px)); height: min(760px, calc(var(--vvh, 100dvh) - 24px)); padding: 12px; overflow: hidden; }
dialog.dlg.shell .fs-hd { padding: 0 0 8px; }
dialog.dlg.shell .dbody { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
dialog.dlg.shell .dact { display: none; }
.sh-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; min-width: 0; }
.sh-st { margin-right: 4px; font: 500 12px/16px var(--font); color: var(--fg-3); white-space: nowrap; }
.sh-st[data-tone="ok"] { color: var(--ok); }
.sh-st[data-tone="err"] { color: var(--err); }
.sh-term { flex: 1; min-height: 120px; min-width: 0; padding: 8px 4px 4px 10px; border-radius: 12px; background: var(--tb); overflow: hidden; }
.sh-term .xterm { height: 100%; }
.sh-term .xterm-viewport { background: transparent !important; scrollbar-width: thin; }
.sh-term .xterm-screen { cursor: text; }
@media (pointer: coarse) { .sh-term .xterm-helper-textarea { font-size: 16px; } }
.ib.sh-k-pw, .ib.sh-more { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: auto; min-width: 32px; padding: 0 8px; gap: 4px; color: var(--fg-2); }
.ib.sh-k-pw .ic { width: 16px; height: 16px; }
.ib.sh-k-pw .sh-k-t { font: 500 12px/16px var(--font); }
.ib.sh-k-pw.hot { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ib.sh-more { font-size: 18px; line-height: 1; }
.sh-keys { display: flex; gap: 4px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.sh-keys::-webkit-scrollbar { display: none; }
.btn.sh-k { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 2px; font-family: var(--mono); }
.btn.sh-k.on { background: var(--accent); color: var(--bg); }
.sh-pw { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.sh-pw[hidden] { display: none; }
.sh-pw-t { color: var(--fg-2); font: 500 12.5px/18px var(--font); }
.sh-pw-r { display: flex; align-items: center; gap: 6px; }
.btn.sh-pw-send { flex: none; height: 44px; min-width: 76px; }
.sh-pw-in { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); color: var(--fg); font: 16px var(--font); }
@media (max-width: 639px) {
  dialog.dlg.shell[open] { width: 100vw; max-width: 100vw; height: var(--vvh, 100dvh); max-height: none; margin: 0; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
}

/* a 목록 fence (02-basic-markdown.js listBlockHtml): list rows like a messenger's chat list */
.md .mlist { margin: 12px 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); overflow: hidden; }
.md .mlist-h { padding: 12px 16px 6px; color: var(--fg-3); font: 600 13px/18px var(--font); }
.md .mlist-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; }
.md .mlist-row + .mlist-row { border-top: 1px solid var(--line); }
.md .mlist-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 15px; background: var(--layer); color: var(--fg-2); font: 600 16px/1 var(--font); }
.md .mlist-main { flex: 1; min-width: 0; }
.md .mlist-t, .md .mlist-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md .mlist-t { color: var(--fg); font: 500 15px/22px var(--font); }
.md .mlist-s { color: var(--fg-3); font: 400 13px/18px var(--font); }
.md .mlist-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.md .mlist-m { color: var(--fg-3); font: 400 12px/16px var(--font); }
.md .mlist-b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--err); color: #fff; font: 600 11px/20px var(--font); text-align: center; }

/* Full-screen overlay: the one frame for every pop-up over the app (38-overlay.js fsOpen; 02-basic-markdown.js dialog() wears the same classes on a native <dialog>).
   Phone: covers the whole screen, tab bar included: header (title, 무시, close) and footer (actions) stay put, only the body scrolls, safe-area padded,
   kept above the keyboard (.kb, set by fsOpen). Desktop: a centered dialog (.tall = the large one, for a draft). Menus, toasts and tooltips are not overlays. */
.fs-bd { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: var(--scrim); animation: nt-in .14s ease-out; }
.fs-card { --fs-fill: var(--layer); display: flex; flex-direction: column; width: min(560px, calc(100% - 48px)); max-height: min(86dvh, 820px); margin: 0; border-radius: 20px; background: var(--card); color: var(--fg); box-shadow: var(--float); overflow: hidden; animation: ds-up .18s ease-out; }
.fs-card:focus { outline: 0; }
.fs-card.tall { width: min(720px, calc(100% - 48px)); height: min(86dvh, 820px); }
dialog.fs-card:not([open]) { display: none; }
dialog.fs-card::backdrop { background: var(--scrim); }
.fs-hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 8px 12px 24px; }
.fs-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-ey { display: block; color: var(--fg-2); font: 600 13px/20px var(--font); }
.fs-ey .fs-left { color: var(--accent); }
.fs-t { margin: 0; font: 700 20px/28px var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.fs-ey.warn { color: var(--warn); }
.fs-ey.err { color: var(--err); }
.fs-ey.done { color: var(--ok); }
.fs-ey.ign { color: var(--fg-3); }
.fs-hb { flex: none; display: flex; align-items: center; gap: 2px; }
.fs-ign { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--fg-2); font: 500 14px/20px var(--font); }
.fs-ign:hover { background: var(--hover); color: var(--fg); }
.fs-ign:active { background: var(--active); }
.fs-ign:disabled { opacity: .55; }
.ib.fs-x { width: 44px; height: 44px; border-radius: var(--r-ctl); color: var(--fg-3); }
.fs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 16px; }
.fs-body.panel { margin: 0 16px; padding: 16px; border-radius: 12px; background: var(--fs-fill); }
.fs-body.fit { flex: 0 1 auto; }
.fs-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fs-ft { flex: none; margin-top: auto; display: flex; flex-direction: column; gap: 8px; max-height: 55%; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; }
.fs-ft.row { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-height: none; }
.fs-ft:empty { display: none; }
.fs-ft .dc-row, .fs-ft .dc-note, .fs-ft .dc-back, .fs-ft .dc-chip:not(.on) { background: var(--fs-fill); }
.fs-ft .dc-row.on { background: color-mix(in srgb, var(--accent) 12%, var(--fs-fill)); }
.fs-ft .dc-st { padding: 0 4px; }
.fs-ft .dc-note { min-height: 88px; }
@media (max-width: 639px) {
  .fs-bd { align-items: stretch; background: var(--bg); }
  .fs-bd.kb { bottom: auto; }
  .fs-card, .fs-card.tall, dialog.dlg.fs-card[open] { --fs-fill: var(--card); width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; background: var(--bg); box-shadow: none; padding-top: env(safe-area-inset-top); }
  dialog.dlg.fs-card[open] { height: var(--vvh, 100dvh); }
  .fs-hd { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .fs-body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .fs-body.panel { margin: 0 max(8px, env(safe-area-inset-left)); padding: 16px; }
  .fs-ft { padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .fs-ft.row .btn { flex: 1; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .fs-bd, .fs-card { animation: none; } }

/* ---------- 원문 보기 (web/js/10-draft-original.js): the mail or comment a draft answers, as its own panel next to the draft ---------- */
/* Hosts: the send sheet (.fs-card.od-host, 14-overlay.css) and the comment view's draft (.od-cwrap). The draft is untouched; .od-on = the original is shown.
   >= 900px: the original is a separate card (header 원문 + x, own scroll) to the left, the draft slides right (250ms). Narrower: the 초안 | 원문 toggle slides between them. */
.od-bar { flex: none; display: flex; margin: 0 16px 8px; }
.od-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--fs-fill); color: var(--fg-2); font: 500 14px/20px var(--font); }
.od-tg:hover { background: var(--hover); }
.od-tg:active { background: var(--active); }
.od-tg svg { flex: none; width: 16px; height: 16px; }
.od-tt { color: var(--fg); font-weight: 600; }
.od-seg { display: none; }
.od-sg { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-3); font: 600 14px/20px var(--font); }
.od-sg[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.od-stage, .od-draftcol { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.od-orig { display: flex; flex-direction: column; min-width: 0; color: var(--fg); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.od-orig[inert] { visibility: hidden; transition-delay: 0s, 0s, .25s; }
.od-oh { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 8px 8px 24px; }
.od-ot { flex: 1; min-width: 0; font: 700 18px/26px var(--font); letter-spacing: -.02em; }
.od-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 24px; }
.od-pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.od-pane .dc-dh { align-items: flex-start; }
.od-pane .dc-dr-k { flex: none; }
.od-pane .dc-dr-v { min-width: 0; overflow-wrap: anywhere; }
.od-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); min-width: 0; }
.od-body .mb-txt { max-width: none; padding: 0; border: 0; background: transparent; }
.od-files { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.od-post { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 12px; }
.od-post .kk-av.kk-thumb { flex: none; width: 56px; height: 40px; border-radius: 8px; object-fit: cover; }
.od-pt { display: flex; flex-direction: column; min-width: 0; }
.od-ptt { font: 600 14px/20px var(--font); overflow-wrap: anywhere; }
.od-parent { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--line-2); color: var(--fg-3); font-size: 14px; line-height: 20px; }
.od-pc { overflow-wrap: anywhere; white-space: pre-wrap; }
.od-ct { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/23px var(--font); }
.od-pane .od-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; color: var(--accent); font: 500 14px/20px var(--font); text-decoration: none; }
.od-pane .od-open svg { width: 16px; height: 16px; }
.od-note { color: var(--fg-3); font-size: 14px; line-height: 22px; }

/* comment view: the draft card is the .kk-draft inside .od-cwrap; the original is a card of the same family */
.od-cwrap { flex: none; display: flex; flex-direction: column; }
.od-cwrap > .od-bar { margin: 0 0 6px; }
.od-cwrap .od-stage { flex: none; }
.od-cwrap .od-orig { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-panel); max-height: min(46dvh, 360px); }
.od-cwrap .od-oh { padding: 8px 4px 0 14px; }
.od-cwrap .od-ot { font: 600 14px/20px var(--font); }
.od-cwrap .od-x { width: 36px; height: 36px; }
.od-cwrap .od-pane { padding: 4px 14px 12px; }
.kk-drafts:has(.od-on) { max-height: min(62dvh, 520px); }

@media (min-width: 900px) {
  .fs-card.tall.od-host { --od-p: clamp(300px, calc(100vw - 784px), 480px); position: relative; overflow: visible; transition: transform .25s ease, width .25s ease; }
  .fs-card.tall.od-host.od-on { width: min(720px, calc(100vw - 64px - var(--od-p))); transform: translateX(calc((var(--od-p) + 16px) / 2)); }
  .fs-card .od-orig { position: absolute; top: 0; bottom: 0; right: calc(100% + 16px); width: var(--od-p); background: var(--card); border-radius: 20px; box-shadow: var(--float); overflow: hidden; opacity: 0; transform: translateX(24px); }
  .od-on > .od-stage > .od-orig { opacity: 1; transform: none; }
  .od-cwrap .od-stage { flex-direction: row; align-items: stretch; }
  .od-cwrap .od-orig { flex: 0 0 0; opacity: 0; transform: translateX(-16px); overflow: hidden; transition: flex-basis .25s ease, margin .25s ease, opacity .25s ease, transform .25s ease, visibility 0s; }
  .od-cwrap.od-on .od-orig { flex-basis: 45%; margin-right: 12px; opacity: 1; transform: none; }
  .od-cwrap .od-orig[inert] { transition-delay: 0s, 0s, 0s, 0s, .25s; }
  .od-cwrap .kk-draft { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 899px) {
  .od-bar { margin: 0 max(8px, env(safe-area-inset-left)) 8px max(8px, env(safe-area-inset-left)); }
  .od-cwrap > .od-bar { margin: 0 0 6px; }
  .od-tg { display: none; }
  .od-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 11px; background: var(--layer); }
  .od-stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
  .od-draftcol, .od-orig, .od-cwrap .kk-draft { grid-area: 1 / 1; min-width: 0; min-height: 0; }
  .od-draftcol, .od-cwrap .kk-draft { transition: transform .25s ease, visibility 0s; }
  .od-draftcol[inert], .od-cwrap .kk-draft[inert] { visibility: hidden; transition-delay: 0s, .25s; }
  .od-on > .od-stage > .od-draftcol, .od-on > .od-stage > .kk-draft { transform: translateX(-100%); }
  .od-orig { align-self: stretch; transform: translateX(100%); }
  .od-on > .od-stage > .od-orig { transform: none; }
  .od-oh { display: none; }
  .fs-card .od-pane { margin: 0 max(8px, env(safe-area-inset-left)); padding: 16px; border-radius: 12px; background: var(--fs-fill); }
  .od-cwrap .od-stage { display: grid; }
  .od-cwrap .od-pane { margin: 0; padding: 12px 14px; }
  .od-cwrap .od-orig { background: var(--card); }
  .od-pane .dc-dh { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .od-orig, .od-draftcol, .od-cwrap .kk-draft, .fs-card.tall.od-host, .od-cwrap .od-orig { transition: none; }
}
/* the comment a combined card (reply + mail) answers, inline at the top of the card (10-draft-original.js orgInline) */
.od-inline { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.od-inline .od-pane, .fs-card .od-inline .od-pane { flex: none; overflow: visible; margin: 0; padding: 0; border-radius: 0; background: none; }
.od-inline .od-open { min-height: 36px; }
.dr-fh.ok { color: var(--ok); }

/* 답장 초안 카드 (web/js/10-reply-card.js) and the 답장 확인 queue (web/js/30-replies.js) */
.rq-hd { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.rq-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-weight: 600; }
.rq-hd .rc-time { flex: none; }
.rq-lb { margin-top: 4px; color: var(--fg-2); font: 600 12px/16px var(--font); }
.rq-to { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 8px; }
.rq-to .dr-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-sub { margin-top: 6px; }
.rq-orig { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; padding: 6px 10px; border-left: 2px solid var(--line, rgb(128 128 128 / .3)); color: var(--fg-2); font: 400 13px/19px var(--font); overflow-wrap: anywhere; }
.rq-orig .rq-ow { margin-right: 6px; color: var(--fg-1, inherit); font-weight: 600; }
.rq-body { margin-top: 8px; font: 400 14px/21px var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-body.clamp { max-height: calc(21px * 6); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.rq-body .kk-dt { max-height: none; margin: 0; overflow: visible; }
.rq-parts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: normal; }
.rq-part { max-width: 85%; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); white-space: pre-wrap; }
.rq-part.sent { opacity: .55; }
.rq-more { height: 28px; margin-top: 2px; padding: 0 4px; font-size: 13px; }
.rq-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rq-edit .kk-rv { min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line, rgb(128 128 128 / .3)); background: var(--card); color: inherit; font: 400 16px/22px var(--font); }
.rq-edit .btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* the queue: one list, newest first, an app filter on top */
.rq-q { display: flex; flex-direction: column; gap: 12px; }
.rq-q > .rq { padding: 12px 14px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); }
.rq-q > .rq.busy { opacity: .6; }
.rq-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-open { margin-left: auto; height: 28px; padding: 0 8px; font-size: 12px; }
@media (pointer: coarse), (max-width: 639px) { .rq-q > .rq { padding: 12px; } .rq-acts .dr-send { flex: 1; } }

/* ---------- reply: quoted message above the composer, the swipe pull and the desktop hover button (web/js/39-reply.js) ---------- */
[data-rid] { position: relative; touch-action: pan-y; }
[data-rid].rp-pull, [data-rid].rp-snap { transform: translateX(calc(var(--rp-x, 0px) * -1)); }
[data-rid].rp-snap { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
[data-rid].rp-pull { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rp-ind { position: absolute; top: 50%; right: calc(var(--rp-x, 0px) * -1 + 6px); width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%; background: var(--hover); color: var(--fg-3); opacity: var(--rp-p, 0); transform: scale(calc(.6 + .4 * var(--rp-p, 0))); transition: background .12s, color .12s; pointer-events: none; }
.rp-hit > .rp-ind { background: var(--accent); color: var(--on-accent); transform: scale(1.12); }
@keyframes rp-flash { from { background: color-mix(in srgb, var(--accent) 16%, transparent); } to { background: transparent; } }
[data-rid].rp-flash { animation: rp-flash 1.2s ease-out; border-radius: var(--r-ctl); }
.rp-btn { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--hover); color: var(--fg-2); opacity: 0; pointer-events: none; transition: opacity .12s; }
.rp-btn:hover { background: var(--active); color: var(--fg); }
.um > .rp-btn { right: 100%; margin-right: 6px; bottom: 0; }
/* The 6px gap between an own (right-aligned) bubble and its button is part of the button's hit area, so the pointer never leaves the row on its way there. */
.um > .rp-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 8px; }
.bm > .rp-btn { top: 0; right: 0; }
/* The hidden button keeps catching the pointer (it is a child of the row, so the row stays hovered while the pointer is on it) and shows with the row's hover or its own keyboard focus. */
@media (hover: hover) and (pointer: fine) { .rp-btn { pointer-events: auto; } [data-rid]:hover > .rp-btn, .rp-btn:focus-visible { opacity: 1; } }
@media (hover: none), (pointer: coarse) { .rp-btn { display: none; } }
.rpbar { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; padding: 4px 4px 4px 12px; border-radius: var(--r-ctl); background: var(--hover); color: var(--fg-2); font-size: 13px; line-height: 20px; }
.rpbar[hidden] { display: none; }
.rpbar .rp-ic { color: var(--accent); }
.rp-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-au { font-weight: 700; color: var(--fg); }
.rp-ct, .rpq-ct { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpq { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; padding: 4px 10px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--fg-2); font: inherit; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer; }
.rpq-au { font-weight: 700; color: var(--fg); }

/* Settings sub-screens (설정, 모델·폴백, 공급자, 사용량, 컨텍스트) and the small settings dialogs (dialog.dlg.cl) on a phone.
   Scoped to those surfaces so the rest of the app keeps its compact controls. Loaded last: same-specificity rules here win. */
@media (max-width: 639px) {
  /* fallback chain: the five step buttons sit on their own row, so the model name and tags keep the full width */
  #models .fb-item { flex-wrap: wrap; row-gap: 6px; }
  #models .fb-item .fb-acts { flex: 1 0 100%; justify-content: flex-end; }
  /* editor options that do not fit side by side wrap to the next line instead of being cut with an ellipsis */
  #models .fbe .seg button { flex: 1 0 auto; padding: 0 12px; }
  /* update: commit subjects and paths wrap; the time field and switch drop under the text instead of squeezing it */
  #settings .upd-log span { white-space: normal; overflow-wrap: anywhere; }
  #settings .li:has(> .upd-at) { flex-wrap: wrap; row-gap: 8px; }
  #settings .li:has(> .upd-at) > .tx { flex: 1 1 calc(100% - 48px); }
  #settings .upd-at { margin-left: auto; }
  /* provider rows: login and logout buttons are one row under the name, aligned with it */
  #providers .li.prow .btns { flex: 1 0 100%; padding-left: 36px; }
}
@media (max-width: 639px), (pointer: coarse) {
  :is(#settings, #models, #providers, #usage, #context, #harness) .btn { min-height: 40px; }
  #harness .hm-row { height: 40px; }
  #harness .hm-chip { min-height: 36px; }
  :is(#settings, #models, #providers, #usage, #context) .ib { width: 40px; height: 40px; }
  :is(#models, dialog.dlg) :is(.fi, .sel) { min-height: 44px; }
  :is(#models, dialog.dlg) .seg button { height: 40px; }
  dialog.dlg select.fi { height: 44px; }
  dialog.dlg summary { padding: 14px 0; }
  dialog.dlg.cl .btn { min-height: 40px; }
  #settings .upd-at { height: 40px; }
  #settings .hs-sw::before { content: ""; position: absolute; inset: -12px -4px; }
  #models .fb-sw { min-width: 48px; height: 40px; }
  #models .fb-acts button { width: 40px; height: 40px; border-radius: 20px; }
  #models .fb-add { height: 40px; }
  dialog.dlg.cl .dhd .dx { width: 44px; height: 44px; margin: -10px -14px 0 auto; }
  dialog.dlg.cl .dact .btn { min-height: 44px; }
  dialog.dlg.cl .chip { height: 40px; min-width: 40px; justify-content: center; }
}

/* 빠른 처리 (web/js/30-triage.js): the banner that offers it, and the full view that answers many waiting send approvals of one kind fast.
   Desktop: a large centered dialog, the item in a readable column, actions on one row with key hints. Phone: the whole screen, three large
   buttons at the bottom (보내기 the widest, under the thumb), no key hints. Colors are the theme tokens, so dark mode follows. */
.trban { flex: none; display: flex; align-items: center; gap: 10px; width: calc(100% - 48px); max-width: 872px; margin: 0 auto 6px; padding: 10px 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--fg); font: 600 14px/20px var(--font); text-align: left; cursor: pointer; }
.trban[hidden] { display: none; }
.trban .ic { flex: none; width: 18px; height: 18px; color: var(--accent); }
.trban .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trban .go { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; }
.trban:hover { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.trban:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fs-card.tr { width: min(880px, calc(100% - 48px)); height: min(92dvh, 960px); max-height: none; }
.tr .tr-pos { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.tr .tr-sum { color: var(--fg-3); font: 500 14px/20px var(--font); }
.tr-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--track); overflow: hidden; }
.tr-bar > span { display: block; height: 100%; background: var(--accent); transition: width .2s ease-out; }
.tr-tog { gap: 4px; }
.tr-tog .ic { width: 16px; height: 16px; }
.tr-body { display: flex; flex-direction: column; gap: 12px; }
.tr-body:focus { outline: 0; }
.tr-q { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 18px/26px var(--font); letter-spacing: -.01em; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fg-2); font-size: 13px; line-height: 20px; }
.tr-meta b { color: var(--fg-3); font-weight: 600; }
.tr-rule { padding: 0 8px; border-radius: 999px; background: var(--layer); color: var(--fg-2); }
.tr-k { color: var(--fg-3); font: 600 12px/18px var(--font); }
.tr-org { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--fs-fill); }
.tr-org.muted { color: var(--fg-3); font-size: 13px; }
.tr-who { color: var(--fg-2); font-size: 13px; line-height: 20px; }
.tr-otx { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 22px; max-height: 9.5em; overflow-y: auto; }
.tr-info { margin: 0; padding: 0 0 0 18px; color: var(--fg-2); font-size: 13px; line-height: 20px; }
.tr-warn { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); font-size: 13px; line-height: 20px; }
.tr-ta { width: 100%; min-height: 132px; max-height: 52vh; field-sizing: content; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--fg); font: 400 15px/24px var(--font); resize: vertical; box-sizing: border-box; }
.tr-ta:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.tr-ta:disabled { opacity: .7; }
.tr-mail { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.tr-files { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-file { padding: 2px 10px; border-radius: 999px; background: var(--layer); color: var(--fg-2); font-size: 12px; line-height: 20px; }
.tr-st { flex: none; padding: 0 8px; border-radius: 999px; background: var(--layer); color: var(--fg-2); font: 600 12px/22px var(--font); }
.tr-st.sent { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.tr-st.failed, .tr-st.err { background: color-mix(in srgb, var(--err) 14%, var(--card)); color: var(--err); }
.tr-st.sending, .tr-st.queued { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); }
.tr-ft { gap: 8px; }
.tr-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tr-b { height: 48px; min-width: 112px; padding: 0 20px; font-size: 15px; }
.tr-go { min-width: 160px; }
.tr-keys { color: var(--fg-3); font-size: 12px; line-height: 18px; text-align: right; }
.tr-note { min-height: 84px; }
.tr-empty { align-items: center; justify-content: center; text-align: center; }
.tr-done-t { font: 700 20px/28px var(--font); }
.tr-sumlist { display: flex; flex-direction: column; gap: 6px; width: min(320px, 100%); margin: 8px 0 0; padding: 0; list-style: none; }
.tr-sumlist li { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: var(--fs-fill); }
.tr-list { gap: 10px; }
.tr-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--fs-fill); }
.tr-row.locked { opacity: .75; }
.tr-rh { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--fg); font: 600 14px/20px var(--font); text-align: left; cursor: pointer; }
.tr-rh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tr-n { flex: none; min-width: 24px; height: 24px; border-radius: 12px; background: var(--card); color: var(--fg-2); font: 600 12px/24px var(--font); text-align: center; }
.tr-rq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-rb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 22px; color: var(--fg); cursor: pointer; }
.tr-rb.open { display: block; -webkit-line-clamp: none; }
.tr-rb.mail { padding-top: 8px; border-top: 1px solid var(--line); color: var(--fg-2); }
.tr-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--card); align-self: flex-start; }
.tr-sg { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--fg-2); font: 600 13px/20px var(--font); cursor: pointer; }
.tr-sg.on { background: var(--accent); color: var(--on-accent); }
.tr-sg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tr-rn { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--fg); font: 400 14px/20px var(--font); }
@media (max-width: 639px) {
  .fs-card.tr { width: 100%; height: 100%; }
  .trban { width: calc(100% - 24px); margin: 0 auto 6px; }
  .tr-keys { display: none; }
  .tr-acts { display: grid; grid-template-columns: 1fr 1fr 1.6fr; }
  .tr-acts > :only-child { grid-column: 1 / -1; }
  .tr-acts > :first-child:nth-last-child(2) { grid-column: 1 / 3; }
  .tr-b, .tr-go { min-width: 0; height: 56px; padding: 0 8px; }
  .tr-list .tr-seg { align-self: stretch; }
  .tr-sg { flex: 1; min-height: 44px; }
  .tr-q { font-size: 17px; }
}
@media (pointer: coarse) { .tr-keys { display: none; } }
.tr-post { color: var(--fg); font: 600 13px/20px var(--font); }
.tr-cmt .tr-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.tr-cmt .tr-who b { color: var(--fg); font-weight: 600; }
.tr-nav { display: flex; justify-content: space-between; gap: 8px; }

/* result card (11-resultcard.js): a mail or a monitoring result - header, title, labelled sections, the original folded */
.tl-in > .bm.rc, #mon-tl > .bm.rc { display: flex; flex-direction: column; gap: 12px; }
.rc-hd { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.rc-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-weight: 600; }
.rc-time { flex: none; margin-left: auto; white-space: nowrap; }
.rc-title { color: var(--fg); font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.rc-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-sh { color: var(--fg-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.bm.rc .rc-sec .md { font-size: 15px; line-height: 24px; }
.rc-raw > summary { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 32px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; list-style: none; }
.rc-raw > summary::-webkit-details-marker { display: none; }
.rc-raw > summary::before { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: rotate(-45deg); transition: transform .15s; }
.rc-raw[open] > summary::before { transform: rotate(45deg); }
.rc-raw > summary:hover { background: var(--hover); color: var(--fg); }
.rc-rawbody { margin-top: 8px; padding: 12px 14px; max-height: 60vh; overflow: auto; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); }
.bm.rc .rc-rawbody .md { font-size: 14px; line-height: 22px; }
.rc-rawbody .md .tbl { background: var(--card); }
/* the original of a mail (11-mailbody.js): the HTML frame (white page, auto height, no inner scroll) or the laid-out text */
.rc-rawbody.own { padding: 0; max-height: none; overflow: visible; background: none; }
.mb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mb-bar { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.mb-bar .mb-note { min-width: 0; flex: 1; }
.mb-frame { display: block; width: 100%; height: 120px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; }
.mb-fail { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-3); }
.mb-txt { max-width: 46em; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--fg); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; word-break: keep-all; text-wrap: pretty; }
.mb-txt > :first-child { margin-top: 0; }
.mb-txt > :last-child { margin-bottom: 0; }
.mb-txt p { margin: 0 0 14px; line-height: 26px; }
.mb-txt li { line-height: 26px; }
.mb-txt .mt-lb { color: var(--fg); font-weight: 600; }
.mb-txt a { color: var(--accent); }
.mb-txt hr { margin: 14px 0; border: 0; border-top: 1px solid var(--line-2); }
.mb-txt .mt-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 600; }
.mb-txt .mt-h::before { content: ""; flex: none; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }
.mb-txt ul, .mb-txt ol { margin: 0 0 12px; padding-left: 22px; }
.mb-txt li { margin: 2px 0; padding-left: 2px; }
.mb-txt li::marker { color: var(--fg-3); }
.mb-txt .mt-kv { display: flex; flex-direction: column; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--layer); overflow: hidden; }
.mb-txt .mt-kv > div { display: grid; grid-template-columns: minmax(84px, 30%) minmax(0, 1fr); gap: 4px 14px; padding: 8px 12px; }
.mb-txt .mt-kv > div + div { border-top: 1px solid var(--line); }
.mb-txt .mt-kv dt { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 22px; }
.mb-txt .mt-kv dd { margin: 0; min-width: 0; font-size: 14px; line-height: 22px; }
@media (max-width: 520px) { .mb-txt .mt-kv > div { grid-template-columns: 1fr; gap: 0; } }
.mb-txt .mt-tbl { max-width: 100%; margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.mb-txt .mt-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.mb-txt .mt-tbl th, .mb-txt .mt-tbl td { padding: 8px 12px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
.mb-txt .mt-tbl th { background: var(--layer); color: var(--fg-2); font-weight: 600; }
.mb-txt .mt-tbl td + td, .mb-txt .mt-tbl th + th { border-left: 1px solid var(--line); }
.mb-txt .mt-tbl tr + tr td { border-top: 1px solid var(--line); }
.mb-txt .mt-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
/* a run of market quotes (label, value, change, low, high): compact, numbers right-aligned, Korean-market colors (up red, down blue) */
.mb-txt .mt-nt caption { padding: 8px 12px; text-align: left; background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mb-txt .mt-nt th, .mb-txt .mt-nt td { padding: 6px 10px; }
.mb-txt .mt-nt td + td, .mb-txt .mt-nt th + th { border-left: 0; }
.mb-txt .mt-nt th { padding-top: 4px; padding-bottom: 4px; color: var(--fg-3); font-size: 12px; font-weight: 500; }
.mb-txt .mt-nt .lb { font-weight: 600; color: var(--fg); }
.mb-txt .mt-nt .up { color: var(--err); }
.mb-txt .mt-nt .dn { color: var(--accent); }
.mb-txt .mt-nt td:nth-child(n+4) { color: var(--fg-2); }
@media (max-width: 520px) { .mb-txt .mt-nt th, .mb-txt .mt-nt td { padding: 6px; } .mb-txt .mt-nt { font-size: 13px; } }
.mb-txt blockquote.mt-quote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--line-2); }
.mb-txt .mt-quote-body, .mb-txt .mt-fold-body { color: var(--fg-2); }
.mb-txt .mt-quote-body > :last-child, .mb-txt .mt-fold-body > :last-child { margin-bottom: 0; }
.mb-txt details.mt-quote, .mb-txt details.mt-fold { margin: 0 0 12px; }
.mb-txt details > summary { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 32px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; list-style: none; }
.mb-txt details > summary::-webkit-details-marker { display: none; }
.mb-txt details > summary::before { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: rotate(-45deg); transition: transform .15s; }
.mb-txt details[open] > summary::before { transform: rotate(45deg); }
.mb-txt details > summary:hover { background: var(--hover); color: var(--fg); }
.mb-txt details > div { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--line-2); font-size: 14px; line-height: 22px; }
.rc-rawbody .md th { background: var(--layer); }
@media (max-width: 1099px) { .appbar.cvconv h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 17px; line-height: 22px; overflow-wrap: anywhere; } }
/* mail row (30-monitoring.js monConvNode): a compact result card that is one tap target (role=button); in the original view (11-todo-strip.js) its files */
#mon-tl > .bm.rc.mr { gap: 2px; padding: 8px 14px; cursor: pointer; }
#mon-tl > .bm.rc.mr:hover { background: var(--hover); }
#mon-tl > .bm.rc.mr:focus-visible { outline-offset: -2px; }
/* A mail row is one compact line each: who and when, the subject, two summary points, the first thing to do (owner 2026-10-27). */
.mr .rc-title { overflow: hidden; font-size: 14.5px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.mr-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--fg-2); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
ul.mr-sum.mr-pts { display: block; margin: 0; padding: 0; list-style: none; }
.mr-pts li { position: relative; overflow: hidden; padding-left: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mr-pts li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); }
.mr-todo { display: flex; gap: 6px; min-width: 0; color: var(--fg-2); font-size: 12.5px; line-height: 18px; }
.mr-todo b { flex: none; color: var(--warn); font-weight: 600; }
.mr-todo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-slot { margin-top: 6px; display: flex; gap: 6px; }
/* the 초안 작성 dialog (30-monitoring.js mailDraftDialog): the mail it answers as a tonal block (sender, subject, summary), then the box.
   The block is a --bg well in the floating dialog (its --pop equals --layer in dark), and --card on the phone's full-screen --bg (14-overlay.css) */
.md-dlg { gap: 16px; }
.md-ctx { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--bg); }
@media (max-width: 639px) { .md-ctx { background: var(--card); } }
.md-from { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.md-from span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-from .ic { width: 14px; height: 14px; }
.md-subj { color: var(--fg); font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.md-ctx .mr-sum { margin-top: 2px; font-size: 14px; line-height: 22px; -webkit-line-clamp: 3; }
.md-ctx ul.mr-pts li { position: relative; padding-left: 12px; }
.md-ctx ul.mr-pts li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); }
.md-ctx .mr-todo { margin-top: 2px; font-size: 13px; line-height: 20px; }
.md-ask { display: flex; flex-direction: column; gap: 8px; }
.md-lbl { color: var(--fg-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.md-ask textarea.fi { min-height: 88px; font-size: 15px; line-height: 22px; padding: 10px 12px; }
/* the ⋯ of a mail card (30-monitoring.js mailMenuBtn): the last item of the header, at the top right; the negative margin keeps the 16px header line */
/* --fg-2 and a larger icon (owner 2026-10-29): the --fg-3 dots were easy to miss on the card */
.rc-hd .mr-more { margin: -6px -8px -6px 0; color: var(--fg-2); }
.rc-hd .mr-more .ic { width: 20px; height: 20px; }
.rc-hd .mr-more:hover, .rc-hd .mr-more[aria-expanded="true"] { background: var(--active); color: var(--fg); }
/* 초안 작성 on the open mail's card (11-todo-strip.js): below 1100px, where the conversation head and its 초안 작성 are hidden */
.mr-conv-act { margin-top: 2px; }
@media (min-width: 1100px) { .mr-conv-act { display: none; } }
.rc-hd .rc-src + .mr-more, .rc-hd .tag + .mr-more { margin-left: auto; }
@media (pointer: coarse), (max-width: 639px) { .rc-hd .mr-more { margin: -10px -10px -10px 0; } }
.mr-clip { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.mr-clip .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mr-files { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.mr-fh { color: var(--fg-3); font-size: 12px; line-height: 16px; font-weight: 600; }
.mr-file { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--fg); font-size: 14px; line-height: 20px; text-decoration: none; }
.mr-file:hover { background: var(--hover); }
.mr-file .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-2); }
.mr-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-fsize { flex: none; color: var(--fg-3); font-size: 12px; }
/* send-approval draft card (30-monitoring.js draftCardNode): the mail it would send, its state as a badge with the time, the choices below */
#mon-tl > .bm.rc.dr { gap: 12px; }
.dr-ic { flex: none; display: inline-flex; color: var(--fg-3); }
.dr-ic .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-st { margin-left: auto; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dr-q { font-size: 15px; line-height: 22px; }
.dr-orig { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); min-width: 0; }
.dr-ok { color: var(--fg-3); font-size: 12px; line-height: 16px; font-weight: 600; }
.dr-os { color: var(--fg-2); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.dr-os b { color: var(--fg); font-weight: 600; }
.dr-ob { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--fg-3); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.dr-mail { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); }
.dr-to { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dr-k { flex: none; color: var(--fg-3); font-size: 13px; line-height: 20px; }
.dr-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 12px; background: var(--layer); color: var(--fg); font-size: 13px; line-height: 20px; }
.dr-sub { color: var(--fg); font-size: 16px; line-height: 24px; font-weight: 700; overflow-wrap: anywhere; }
/* 받는이·참조 of a mail reply draft (10-decision-card.js draftToNode): 답장 | 전체 답장, chips with x, one add field per row */
.dr-recv { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dr-recv[hidden] { display: none; }
.dr-seg { align-self: flex-start; flex-wrap: nowrap; }
.dr-seg button { flex: none; padding: 0 12px; }
.dr-rcrow { align-items: flex-start; }
.dr-rc-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.dr-rc { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding-right: 2px; }
.dr-rc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; }
.dr-rc-t:disabled { cursor: default; }
.dr-rc-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--fg-3); cursor: pointer; }
.dr-rc-x:hover { background: var(--hover); color: var(--fg); }
.dr-rc-x .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dr-rc-add { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: 14px; background: transparent; color: var(--fg-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dr-rc-add:hover { background: var(--hover); }
.dr-rc-add .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dr-rc-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.dr-rc-in { min-width: 0; width: 15em; max-width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--fg); font: inherit; font-size: 13px; }
.dr-rc-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dr-rc-edit .btn { min-height: 32px; padding: 0 10px; }
@media (pointer: coarse) { .dr-rc-x { width: 36px; height: 36px; } .dr-rc-add, .dr-rc-in, .dr-rc-edit .btn { min-height: 38px; } }
/* the mail that goes out right after a comment reply, in the same card (10-decision-card.js draftMailNode) */
.dr-mailpart { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.dr-mh { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; line-height: 16px; font-weight: 600; }
.dr-mh svg { flex: none; width: 14px; height: 14px; }
.dr-rulebar { display: flex; margin: 2px 0 4px; }
.dr-origin { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-3); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.dr-origin a { color: inherit; text-decoration: underline; }
.dr-origin svg { flex: none; width: 14px; height: 14px; }
.dr-body { display: flex; flex-direction: column; gap: 10px; color: var(--fg); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.dr-body p { margin: 0; white-space: pre-wrap; }
/* the files a draft sends along, and what is missing (10-decision-card.js draftFilesNode); the send sheet and the card share it */
.dr-files { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.dr-fh { color: var(--fg-3); font-size: 12px; line-height: 16px; font-weight: 600; }
.dr-att { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg); text-decoration: none; }
a.dr-att:hover { background: var(--hover); }
a.dr-att:active { background: var(--active); }
.dr-fi { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--card); color: var(--fg-2); }
.dr-fi .ic, .dr-att > .ic, .dr-none .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-att > .ic { width: 16px; height: 16px; color: var(--fg-3); }
.dr-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; }
.dr-fm { flex: none; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.dr-none, .dr-warn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--fg); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.dr-none .ic { color: var(--warn); }
.dr-warn { font-weight: 600; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 18%, var(--card)); }
.dr-warn > .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-wt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dr-wn { font-weight: 500; color: var(--fg-2); font-size: 12px; line-height: 18px; }
.dr-files[hidden], .dr-warnbox[hidden] { display: none; }
.dr-warnbox { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dr-ar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dr-ar > .dr-att { flex: 1; }
.dr-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--fg-3); cursor: pointer; }
.dr-x:hover { background: var(--hover); color: var(--fg); }
.dr-x .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dr-add { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 14px; border: 1px dashed var(--line-2); border-radius: var(--r-ctl); background: transparent; color: var(--fg-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dr-add:hover { background: var(--hover); }
.dr-add:disabled { opacity: 0.6; cursor: default; }
.dr-add .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-menu { display: flex; flex-direction: column; gap: 6px; }
.dr-menu .btn { width: 100%; min-height: 44px; }
.dr-lib { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.dr-li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.dr-li:hover { background: var(--hover); }
.dr-hit { flex: none; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 18px; }
.dr-q2 { margin: 12px 0 6px; color: var(--fg-2); font: 600 13px/18px var(--font); }
.dr-edit.ask { min-height: 64px; }
.dr-act .dr-manual { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.dr-act .dr-manual .ic { width: 14px; height: 14px; }
.dr-act { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dr-act.dr-row, .dr-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.dr-act .btn { height: var(--btn-h); padding: 0 18px; font-size: 15px; }
.dr-act .btn.text { padding: 0 12px; }
.dr-edit { width: 100%; box-sizing: border-box; min-height: 160px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); color: var(--fg); font: inherit; font-size: 15px; line-height: 24px; resize: vertical; }
.dr-edit:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (pointer: coarse), (max-width: 639px) { .dr-mail { padding: 12px 14px; } .dr-row .dr-send { flex: 1; } .dr-add, .dr-act .btn { height: var(--btn-hit); } }
.dr-rm { color: var(--fg-3); cursor: pointer; }
.dr-rm:hover { background: var(--hover); color: var(--fg); }
.dr-rm .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* a handled reply draft folded under its mail in the conversation (30-mail-sent.js): one line, a tap unfolds the mail as it went out */
.ms-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 4px 0 8px; }
.ms-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-card); background: var(--card); }
.ms-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-card); background: transparent; color: var(--fg-2); font: 500 14px/20px var(--font); text-align: left; cursor: pointer; }
.ms-line:hover { background: var(--card-hover); }
.ms-line .ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-k { flex: none; color: var(--fg); font-weight: 600; white-space: nowrap; }
.ms-m { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 13px; }
.ms-ch { color: var(--fg-3); transition: transform .15s; }
.ms-card.open .ms-ch { transform: rotate(180deg); }
.ms-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 16px 12px; }
.ms-ft { display: flex; justify-content: flex-end; }
.ms-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 4px; }
.ms-hd .ms-n { color: var(--fg-3); font-size: 12px; }
.ms-rm .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mr-filter { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0 8px; background: var(--bg); }
.mr-filter .mr-f { height: 28px; padding: 0 10px; font-size: 12.5px; color: var(--fg-2); background: var(--layer); }
.mr-filter .mr-f.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.mr-filter .mr-fn { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }

/* 모니터링 > 앱 > 카카오톡 (web/js/30-kakao.js): the room column (rooms to watch + the watched ones) and a KakaoTalk-style chat.
   From 1100px the column sits beside the chat; below it they are two screens (.kk.chat-open = the chat). Colors are the --kk-* tokens (01-tokens.css). */
.kk { display: flex; flex: 1; min-height: 0; gap: 16px; }
#v-monitoring.kk-on > .chatbox { display: none; }
.kk-rooms, .kk-chat { min-height: 0; border-radius: var(--r-card); box-shadow: var(--shadow-panel); overflow: hidden; }
.kk-rooms { flex: 1; min-width: 0; overflow-y: auto; background: var(--card); margin-bottom: 12px; }
.kk-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--kk-bg); margin-bottom: 12px; }
@media (max-width: 1099px) {
  .kk:not(.chat-open) .kk-chat { display: none; }
  .kk.chat-open .kk-rooms { display: none; }
  .kk-chat { margin-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; }
}
@media (min-width: 1100px) {
  #v-monitoring > .kk { grid-row: 4; margin-bottom: 4px; }
  .kk-rooms { flex: none; width: 300px; margin-bottom: 0; }
  .kk-chat { margin-bottom: 0; }
}

/* room choice */
.kk-ph { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; background: transparent; text-align: left; }
.kk-ph:hover { background: var(--card-hover); }
.kk-pt { font: 600 14px/20px var(--font); }
.kk-cnt { flex: 1; color: var(--fg-3); font: 400 13px/20px var(--font); }
.kk-chev { color: var(--fg-3); transition: transform .15s; }
.kk-ph[aria-expanded="true"] .kk-chev { transform: rotate(180deg); }
.kk-q { display: block; width: calc(100% - 32px); min-height: 44px; margin: 4px 16px 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--layer); color: var(--fg); font: 400 16px/22px var(--font); }
.kk-q::placeholder { color: var(--fg-3); }
.kk-q:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kk-hint { padding: 0 16px 8px; color: var(--fg-3); font: 400 12px/16px var(--font); }
.kk-note { padding: 20px 16px; color: var(--fg-3); font: 400 13px/20px var(--font); text-align: center; }
.kk-pl { max-height: min(46dvh, 360px); overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kk-pr { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; }
.kk-pr + .kk-pr { border-top: 1px solid var(--line); }
.kk-pr.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kk-pn { display: block; max-width: 100%; min-height: 24px; margin: -4px 0; padding: 4px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.kk-pn:hover { text-decoration: underline; }
.kk-pn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kk-auto { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--fg-3); font: 400 12px/18px var(--font); }
.kk-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h) 45% 82%); color: hsl(var(--h) 45% 26%); font: 600 15px/1 var(--font); }
.kk-av.sp { background: transparent; }
:root[data-theme="dark"] .kk-av { background: hsl(var(--h) 22% 30%); color: hsl(var(--h) 45% 86%); }
.kk-row .cv-m { flex-direction: column; align-items: flex-end; gap: 4px; }
.kk-t { color: var(--fg-3); font: 400 12px/16px var(--font); white-space: nowrap; }
@media (min-width: 1100px) { :is(.kk-rooms) .kk-av { width: 32px; height: 32px; font-size: 14px; } }

/* switch */
.kk-sw { position: relative; flex: none; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--track); transition: background .15s; }
.kk-sw::before { content: ""; position: absolute; inset: -9px -4px; }
.kk-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.kk-sw.on { background: var(--accent); }
.kk-sw.on .kk-knob { transform: translateX(18px); }
.kk-sw.sm { width: 34px; height: 20px; border-radius: 10px; }
.kk-sw.sm .kk-knob { width: 16px; height: 16px; }
.kk-sw.sm.on .kk-knob { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .kk-sw, .kk-knob, .kk-chev { transition: none; } }

/* chat */
.kk-head { display: none; align-items: center; gap: 12px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.kk-head:not(:empty) { display: flex; }
@media (max-width: 1099px) { .kk-head, .kk-head:not(:empty) { display: none; } }
.kk-owed { display: none; }
@media (max-width: 1099px) { .kk-owed:not([hidden]) { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card); border-bottom: 1px solid var(--line); } }
.kk-box { position: relative; flex: 1; min-height: 0; display: flex; }
.kk-tl { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px 12px 8px; }
.kk-in { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
.kk-in > .kk-note { margin: auto; color: var(--kk-time); }
.kk-pill { position: absolute; left: 50%; bottom: 12px; z-index: 2; height: 32px; padding: 0 14px; transform: translateX(-50%); border-radius: 16px; box-shadow: var(--float); }
.kk-top { display: flex; justify-content: center; padding: 2px 0 6px; }
.kk-more { align-self: center; color: var(--kk-time); }
.kk-date { align-self: center; margin: 14px 0 8px; padding: 4px 12px; border-radius: 12px; background: var(--kk-chip); color: var(--kk-chip-fg); font: 500 12px/16px var(--font); }
.kk-new { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; color: var(--kk-time); font: 600 12px/16px var(--font); }
.kk-new::before, .kk-new::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--kk-time) 45%, transparent); }
.kk-gap { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--kk-time); }
.kk-gap::before, .kk-gap::after { content: ""; flex: 1; border-top: 1px dashed color-mix(in srgb, var(--kk-time) 55%, transparent); }
.kk-gap .btn { color: var(--kk-time); }
.kk-m { display: flex; min-width: 0; }
.kk-m:empty { display: none; }
.kk-m.first { margin-top: 10px; }
.kk-m.in { gap: 8px; align-items: flex-start; }
.kk-m.me { flex-direction: column; align-items: flex-end; }
.kk-mb { min-width: 0; max-width: calc(100% - 46px); display: flex; flex-direction: column; align-items: flex-start; }
.kk-m.in:not(:has(> .kk-av)) .kk-mb { max-width: 86%; }
.kk-name { margin: 0 0 4px 2px; color: var(--fg-2); font: 500 12px/16px var(--font); }
.kk-line { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; min-width: 0; }
.kk-m.me .kk-line { max-width: 86%; }
.kk-bub { min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--kk-in); color: var(--kk-in-fg); font: 400 14px/21px var(--font); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(0 0 0 / .05); }
.kk-m.in.first .kk-bub { border-top-left-radius: 4px; }
.kk-m.me .kk-bub { background: var(--kk-own); color: var(--kk-own-fg); }
.kk-m.me.first .kk-bub { border-top-right-radius: 4px; }
.kk-bub.ph { opacity: .75; }
.kk-emo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.kk-m.me .kk-emo { align-items: flex-end; }
/* a sticker image: no bubble, at most 120px like KakaoTalk's in-chat size */
.kk-sticker { width: 120px; height: 120px; }
@media (max-width: 639px) { .kk-sticker { width: 100px; height: 100px; } }
.kk-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.kk-emo-chip { font-size: 13px; }
.kk-chat { --kk-rd: #d99700; }
:root[data-theme="dark"] .kk-chat { --kk-rd: #ffd21f; }
/* time side of a bubble: the read counter (yellow, bold) above the time; own bubbles right-align it, incoming ones left-align it */
.kk-meta { flex: none; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 1px; }
.kk-m.me .kk-meta { align-items: flex-end; }
.kk-rd { color: var(--kk-rd); font: 700 11px/14px var(--font); white-space: nowrap; }
.kk-time { flex: none; color: var(--kk-time); font: 400 11px/14px var(--font); white-space: nowrap; }
.kk-m.pend.sending .kk-bub { opacity: .7; }
.kk-st { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--kk-time); font: 400 11px/16px var(--font); }
.kk-st .btn { height: 24px; padding: 0 6px; font-size: 12px; }
.kk-m.pend.failed .kk-st { color: var(--err); }
.kk-m.pend.failed .kk-bub { box-shadow: 0 0 0 1.5px var(--err); }

/* media (30-kakao.js kkMediaNode): photos and videos sit in the timeline without a colored bubble; files, voice and locations are white cards */
.kk-chat { --kk-maxw: 240px; }
@media (max-width: 639px) { .kk-chat { --kk-maxw: 200px; } }
.kk-media { min-width: 0; max-width: 100%; }
.kk-photo { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--kk-chip); cursor: pointer; }
.kk-media > .kk-photo { width: min(var(--pw, var(--kk-maxw)), var(--kk-maxw)); aspect-ratio: var(--ar, 4 / 3); max-height: 320px; }
.kk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.kk-media > .kk-photo.gone:not(.kk-video) { display: grid; place-items: center; width: auto; min-width: 160px; aspect-ratio: auto; background: var(--kk-in); cursor: default; }
.kk-gonet, .kk-bub.gone { color: var(--kk-time); font: 400 12px/18px var(--font); text-align: center; }
.kk-gonet { padding: 6px; }
.kk-bub.card.gone { background: var(--kk-in) !important; color: var(--kk-time) !important; }
.kk-album { display: grid; gap: 3px; width: var(--kk-maxw); max-width: 100%; border-radius: 12px; overflow: hidden; }
.kk-album.c2 { grid-template-columns: repeat(2, 1fr); }
.kk-album.c3 { grid-template-columns: repeat(3, 1fr); }
.kk-album > .kk-photo { width: auto; max-height: none; aspect-ratio: 1; border-radius: 0; }
.kk-album > .kk-photo.gone { display: grid; place-items: center; background: var(--kk-in); }
.kk-more-n { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; font: 600 18px/1 var(--font); }
.kk-video { background: #1b1f26; }
.kk-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(0 0 0 / .55); }
.kk-play::after { content: ""; position: absolute; left: 17px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.kk-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 8px; background: rgb(0 0 0 / .55); color: #fff; font: 500 11px/16px var(--font); }
.kk-bub.card { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; white-space: normal; }
.kk-m.me .kk-bub.card { background: var(--kk-in); color: var(--kk-in-fg); }
.kk-bub.card.voice { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; }
.kk-bub.card audio { width: min(240px, 100%); height: 36px; }
.kk-bub.card.file { width: 260px; max-width: 100%; }
.kk-fi { flex: none; width: 28px; height: 28px; color: var(--fg-2); }
.kk-fb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kk-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/20px var(--font); }
.kk-sub { color: var(--kk-time); font: 400 12px/16px var(--font); }
.kk-open { flex: none; height: 32px; padding: 0 12px; font-size: 13px; }
.kk-bub.card.file.off .kk-fn { opacity: .7; }
.kk-nopc { flex: none; }
.kk-bub.card.loc { flex-direction: column; align-items: flex-start; gap: 0; max-width: 260px; text-decoration: none; color: var(--kk-in-fg); }
.kk-bub.card.loc .kk-fn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.kk-bub.reply { display: flex; flex-direction: column; gap: 4px; min-width: 150px; max-width: 100%; }
/* The quote reads as a link to the original: a bar on its left and "원문 보기" on the right of its name line. */
.kk-quote { display: flex; flex-direction: column; gap: 1px; align-self: stretch; margin: -2px -4px 0; padding: 4px 8px 4px 10px; border: 0; border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; text-align: left; font: 400 12px/17px var(--font); }
/* not ".jump": that global class (05-log.css) is the absolutely placed scroll-to-latest button, and it pulled every quote out of its bubble */
.kk-quote.kk-qjump { cursor: pointer; border-left-color: var(--accent); }
.kk-quote.kk-qjump:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.kk-quote .kk-qn { display: flex; align-items: baseline; gap: 8px; }
.kk-qgo { margin-left: auto; flex: none; color: var(--accent); font-size: 11px; font-weight: 600; }
.kk-quote.busy .kk-qgo { visibility: hidden; }
.kk-quote.busy::after { content: attr(data-wait); color: var(--fg-3); font-size: 11px; }
/* after a jump: back to the reply the owner came from */
.kk-backpill { position: absolute; left: 50%; bottom: 84px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--accent); color: #fff; font: 600 13px/1 var(--font); box-shadow: 0 4px 14px rgb(0 0 0 / .25); transform: translateX(-50%); cursor: pointer; }
.kk-backpill .ic { width: 14px; height: 14px; transform: rotate(-90deg); fill: none; stroke: currentColor; stroke-width: 2; }
.kk-m.kk-hl { position: relative; }
.kk-m.kk-hl::before { content: attr(data-hl); position: absolute; top: -18px; left: 0; padding: 1px 8px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 11px/16px var(--font); pointer-events: none; }
.kk-m.me.kk-hl::before { left: auto; right: 0; }
.kk-quote:disabled { cursor: default; }
/* a quote tap flashes the original message (30-kakao.js kkFlash) */
.kk-m.kk-hl .kk-bub, .kk-m.kk-hl .kk-media, .kk-m.kk-hl .kk-sticker { animation: kk-hl 3.2s ease; border-radius: 10px; }
@keyframes kk-hl { 0%, 75% { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .kk-m.kk-hl .kk-bub, .kk-m.kk-hl .kk-media, .kk-m.kk-hl .kk-sticker { animation-duration: .01s; } }
.kk-qn { font-weight: 600; opacity: .85; }
.kk-qt { opacity: .75; }
.kk-qt { overflow-wrap: anywhere; }
.kk-rt { white-space: pre-wrap; overflow-wrap: anywhere; }
/* an address in a bubble is a link; its preview card sits under the bubble (30-kakao.js kkLpCard) */
.kk-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.kk-lps { display: flex; flex-direction: column; gap: 6px; width: 260px; max-width: 100%; margin-top: 6px; }
.kk-m.me .kk-lps { align-self: flex-end; }
.kk-lp { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--card); color: var(--fg); text-decoration: none; box-shadow: var(--shadow-panel); }
.kk-lp img { display: block; width: 100%; max-height: 150px; object-fit: cover; background: var(--layer); }
.kk-lp-b { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; }
.kk-lp-s { color: var(--fg-3); font: 500 11px/15px var(--font); }
.kk-lp-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/18px var(--font); }
.kk-lp-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font: 400 12px/17px var(--font); }
.kk-lp-ph { padding: 10px; color: var(--fg-3); font: 400 12px/16px var(--font); }
.kk-sys { align-self: center; max-width: 86%; margin: 10px 0 4px; padding: 3px 12px; border-radius: 12px; background: var(--kk-chip); color: var(--kk-chip-fg); font: 400 12px/17px var(--font); text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
.kk-vw video, .kk-vw img { max-width: 100%; max-height: 100%; }
/* a room that is not watched: read-only, this bar instead of the composer */
.kk-ro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); color: var(--fg-2); font: 400 13px/18px var(--font); }
.kk-ro[hidden] { display: none; }
.kk-ro .btn { flex: none; min-height: 44px; }
.kk-vw video { background: #000; }

/* composer: the chat composer's look (.composer, .sendrow), a draft card above it */
.kk-chat > .kk-composer { max-width: none; margin: 0; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 639px) { .kk-chat > .kk-composer { padding-bottom: 8px; } }
.kk-drafts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; max-height: min(30dvh, 240px); overflow-y: auto; overscroll-behavior: contain; }
.kk-draft { flex: none; padding: 10px 12px; border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow: var(--shadow-panel); }
.kk-dh { color: var(--fg-2); font: 600 12px/16px var(--font); }
.kk-draft .btns { gap: 6px; }
.kk-choices { flex-wrap: wrap; }
.kk-draft .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.kk-dt { max-height: min(16dvh, 120px); margin: 2px 0 8px; overflow-y: auto; font: 400 14px/21px var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
/* a draft of several messages: one bubble each, in send order (a part already in the room is muted) */
.kk-dt.kk-dps { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-height: min(28dvh, 220px); white-space: normal; }
.kk-dp { max-width: 86%; padding: 6px 10px; border-radius: 12px; background: var(--kk-own); color: var(--kk-own-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.kk-dp.sent { opacity: .55; }
.kk-rq { margin: 2px 0 6px; color: var(--fg-2); font: 600 13px/18px var(--font); }
.kk-rv { width: 100%; box-sizing: border-box; min-height: 40px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); color: inherit; font: 400 16px/22px var(--font); }
.kk-rv:focus { outline: 0; border-color: var(--accent); }
.kk-st { color: var(--fg-3); font: 500 12.5px/18px var(--font); }
.kk-manual { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.kk-manual .ic { width: 14px; height: 14px; }
/* 메시지 만들어 줘: the intent box above the composer (30-kakao.js kkIntentBox) */
.kk-intent { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: var(--shadow-panel); }
.kk-intent .btns { gap: 6px; }
.kk-intent .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.kk-edit { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; color: var(--fg-2); font: 500 12.5px/18px var(--font); }
.kk-edit .btn { height: 28px; }
.kk-dbtn { gap: 4px; background: var(--layer); color: var(--fg); }
.kk-dbtn .ic { width: 14px; height: 14px; }
.kk-dbtn:disabled { opacity: .6; }

/* 사용자별 분석 (30-kakao.js kkPerson): desktop a side panel, phone a full-screen sheet */
.kk-pd { border: 0; padding: 0; max-width: none; max-height: none; background: transparent; color: var(--fg); }
.kk-pd::backdrop { background: rgb(0 0 0 / .3); }
.kk-pd-in { display: flex; flex-direction: column; width: min(400px, 100vw); max-height: min(680px, 100dvh); margin: auto; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); overflow: hidden; }
.kk-pd-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.kk-pd-h .x { margin-left: auto; }
.kk-pd-b { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.kk-psec { padding: 10px 0; border-bottom: 1px solid var(--line); }
.kk-psec:last-child { border-bottom: 0; }
.kk-prow { display: flex; gap: 12px; padding: 3px 0; font: 400 13px/19px var(--font); }
.kk-pk { flex: none; width: 108px; color: var(--fg-3); }
.kk-pv { min-width: 0; overflow-wrap: anywhere; }
.kk-hist { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 8px 0 4px; }
.kk-hb { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.kk-hax { display: flex; justify-content: space-between; color: var(--fg-3); font: 400 10px/14px var(--font); }
.kk-hax7 { justify-content: space-around; font-size: 11px; }
.kk-pun { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.kk-put { font: 400 13px/19px var(--font); overflow-wrap: anywhere; }
.kk-sum { padding-top: 12px; }
.kk-sum .btn { margin-top: 8px; height: 34px; }
@media (min-width: 640px) { .kk-pd { margin: 0 0 0 auto; height: 100dvh; } .kk-pd-in { height: 100dvh; max-height: none; border-radius: 0; } }
@media (max-width: 639px) { .kk-pd { margin: 0; width: 100vw; height: 100dvh; } .kk-pd-in { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } }

/* 모니터링 > 앱 > 댓글 (web/js/30-monitoring-comments.js): the same pane; a reply's parent and a source's choices */
.kk-reply { margin-bottom: 4px; color: var(--kk-time); font: 400 12px/16px var(--font); }
.kk-pick-src { padding: 4px 0 8px; border-top: 1px solid var(--line, rgb(128 128 128 / .2)); }
.kk-pick-src > .btn { margin: 0 16px; }
.cm .kk-draft input.kk-ta { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line, rgb(128 128 128 / .3)); background: var(--card); color: inherit; font: 400 16px/22px var(--font); }

/* 모니터링 > 인스타그램 > DM, and the post card / thumbnails of 댓글 */
.cm-tabs { margin: 8px 16px; }
.dm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px 8px; }
.dm-note { color: var(--fg-3); font: 400 12px/16px var(--font); }
.kk-av.kk-thumb { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--layer); }
.cm-post { display: flex; align-items: center; gap: 12px; margin: 8px 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cm-post .kk-av.kk-thumb { width: 64px; height: 48px; }
.cm-pt { display: block; color: var(--fg); font: 600 14px/20px var(--font); overflow-wrap: anywhere; }
.cm-pl { display: inline-block; margin-top: 2px; color: var(--accent, var(--fg-2)); font: 500 12px/16px var(--font); }
/* a room row's second line on the right: 미답장 then the unread count, side by side (30-kakao.js kkRow) */
.kk-row .kk-rmeta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* comment thread, reply style (web/js/30-monitoring-comments.js cmThreadNodes): replies indented under their comment, a draft under the comment it answers */
.cm-th { display: flex; flex-direction: column; min-width: 0; margin-top: 10px; }
.cm-th > .kk-m.first { margin-top: 0; }
.cm-replies { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 6px 0 0 18px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.cm-replies > .kk-m.first { margin-top: 8px; }
.cm-mine { margin: 0 4px 2px 0; color: var(--kk-time); font: 600 11px/16px var(--font); }
.cm-dq { margin: 8px 0 4px; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--card); min-width: 0; }
.cm-dqh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--fg-3); font: 400 12px/18px var(--font); }
.cm-dqh b { color: var(--fg-2); font-weight: 600; }
.cm-dqt { color: var(--fg); font: 400 13px/20px var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-replies .od-cwrap { margin: 2px 0 6px; }

/* 모니터링 > 앱 > 설정 대화 (web/js/32-app-settings.js): the switches above the conversation, the 설정 button of a detail's title bar and the change card.
   The switch itself is the kakao one (.kk-sw, 17-kakao.css). */
.app-sw { display: flex; flex-direction: column; width: 100%; max-width: var(--col); min-width: 0; margin: 0 auto 8px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); overflow: hidden; }
.app-sw[hidden] { display: none; }
.as-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; }
.as-row + .as-row { border-top: 1px solid var(--line); }
.as-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-n { font: 600 14px/20px var(--font); }
.as-h { color: var(--fg-3); font: 400 12px/16px var(--font); }
.as-v { flex: none; color: var(--fg-2); font: 400 13px/20px var(--font); }
.as-rm { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.as-rml { margin: 0; padding-left: 18px; color: var(--fg-2); font: 400 13px/20px var(--font); }
.as-del { display: flex; align-items: flex-start; gap: 8px; font: 400 13px/20px var(--font); }
.as-del input { flex: none; margin-top: 3px; }
.as-rm .as-act { margin-top: 4px; }
/* the 대화 and ⋯ buttons of a detail's title bar: at the right end of the head */
:is(.cv-head, .kk-head) .as-hd { flex: none; margin-left: auto; }
:is(.cv-head, .kk-head) .as-hd + .as-hd { margin-left: 0; }
.as-hd[hidden] { display: none; }

.as-card { margin: 4px 0; padding: 12px 16px; border-radius: var(--r-card); background: var(--layer); }
.as-ct { margin-bottom: 8px; font: 600 14px/20px var(--font); }
.as-cr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 4px 0; }
.as-cr + .as-cr { border-top: 1px solid var(--line); }
.as-cn { flex: none; min-width: 96px; color: var(--fg-2); font: 400 13px/20px var(--font); }
.as-cv { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 500 13px/20px var(--font); }
.as-act { display: flex; gap: 8px; margin-top: 12px; }
.as-done { margin-top: 8px; font: 600 13px/20px var(--font); }
.as-done.applied { color: var(--ok); }
.as-done.cancelled, .as-card.cancelled .as-cr { color: var(--fg-3); }
.as-in { flex: none; width: 150px; height: 32px; }
.as-in[type="number"] { width: 96px; text-align: right; }
select.as-in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the settings screen (asScreen): a pushed view with a back button, the options card as its body */
.as-screen .fs-hd { gap: 4px; padding-left: max(4px, env(safe-area-inset-left)); }
.as-screen .fs-tt { flex: 1; min-width: 0; }
.as-screen .fs-body { padding-top: 8px; }
.as-screen .app-sw { margin: 0 auto 16px; background: var(--card); }
.as-screen .fs-body .as-row { padding: 8px 16px; }
.as-screen .fs-body .as-rm { padding: 12px 16px; border-top: 1px solid var(--line); }

/* 앱 추가 (web/js/32-app-settings.js): the sheet and the template chips above the chat box. */
.fs-body .as-sec { margin: 16px 0 4px; color: var(--fg-2); font: 600 13px/20px var(--font); }
.fs-body .as-sec:first-child { margin-top: 0; }
.fs-body .as-row { padding: 8px 0; }
.as-ic { flex: none; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--layer); color: var(--fg-2); }
.as-ic svg { width: 18px; height: 18px; }
.as-lead { margin-bottom: 8px; }
.as-tpls, .tplrow { display: flex; flex-wrap: wrap; gap: 6px; }
.as-tpls { margin-bottom: 16px; }
.tplrow { position: relative; flex-wrap: nowrap; align-items: center; padding: 6px 12px 2px; }
.tplrow .tplnote { flex: 1; min-width: 0; padding: 0 4px; font-size: 13px; color: var(--fg-2); }
.tplrow[hidden] { display: none; }
.tplnote { padding: 2px 16px 0; color: var(--fg-3); font-size: 12px; line-height: 18px; }
.tplnote[hidden] { display: none; }
.as-tpl { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); color: var(--fg); font: 500 13px/20px var(--font); cursor: pointer; }
.as-tpl:hover { background: var(--hover); color: var(--fg); }
.as-tpl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
#mon-chips { flex-wrap: wrap; overflow-x: visible; }
.as-tpl-x { width: 36px; padding: 0; }
.as-tpl-x svg { width: 14px; height: 14px; }
.as-btns { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.as-name .as-in { flex: 1 1 120px; min-width: 0; }
.fs-body .as-rm { padding: 8px 0 12px; border-top: 0; }
.fs-body .as-row ~ .btn { margin-top: 16px; }
.as-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); }
.as-dot.ok { background: var(--ok); }
.as-dot.fail { background: var(--err); }
.as-why { color: var(--err); overflow-wrap: anywhere; }
.as-appr .as-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.app-sw > .as-sec { margin: 16px 0 0; padding: 0 16px; }
.app-sw > .as-sec:first-child, .app-sw > .as-conn + .as-sec { margin-top: 0; padding-top: 14px; }
/* 연결 상태 sits above every section, on the card's own top edge. */
.app-sw > .as-conn { min-height: 56px; }
.app-sw > .as-conn + .as-row, .app-sw > .as-conn + .as-sec + .as-row { border-top: 0; }
/* 승인 대기 is a sub-heading inside 자동 초안과 승인, not a section of its own. */
.app-sw > .as-sub { margin: 8px 0 0; padding: 4px 16px 0; color: var(--fg-3); font: 600 12px/18px var(--font); }
.as-every-wrap { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.as-every { flex: none; width: 68px; height: 32px; text-align: right; }
.as-unit { color: var(--fg-3); font: 400 12px/18px var(--font); }
/* 자동 초안 규칙 (32-app-settings.js arNodes): the 기본 규칙 box and a rule's form take the row's full width; the boxes grow with their text. */
.as-col { flex-direction: column; align-items: stretch; gap: 8px; }
.as-in.as-ta { width: 100%; height: auto; min-height: 32px; resize: vertical; font: inherit; line-height: 20px; }
textarea.as-in.as-ta { padding-top: 6px; padding-bottom: 6px; }
.as-rule .as-n { display: flex; }
.as-rform .as-act { margin-top: 0; }
.as-rl { display: flex; flex-direction: column; gap: 4px; }

/* A lot piled up (web/js/30-monitoring.js monBar / monFeedNodes / monGroupNode, web/js/31-conversations.js convBar): the view chips with their
   counts and 읽음 처리 on one sticky bar, section and day lines, one compact row per report or per source, and the 더 보기 button of a page. */
.mon-bar { align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
.mon-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mon-tabs::-webkit-scrollbar { display: none; }
.mon-bar .mr-f { height: 32px; }
.mon-read { flex: none; height: 32px; padding: 0 10px; font-size: 13px; }
.mon-read:disabled { color: var(--fg-3); }
.mon-sh { padding: 12px 4px 0; color: var(--fg-2); font: 600 13px/18px var(--font); }
.mon-sh:first-of-type { padding-top: 0; }
.mon-day { padding: 4px 4px 0; color: var(--fg-3); font: 500 12px/16px var(--font); }

/* a report or a folded source as one compact row: source, state, time on the first line, the summary under it (two lines at most) */
:is(#mon-tl, .fr-list) > .bm.rc.fr { gap: 4px; padding: 10px 16px; cursor: pointer; }
.fr-list > .bm.alert { padding: 10px 16px; border-radius: var(--r-card); background: var(--card); }
.fr-list > .bm.rc { display: flex; flex-direction: column; gap: 12px; }
:is(#mon-tl, .fr-list) > .bm.rc.fr:hover { background: var(--hover); }
:is(#mon-tl, .fr-list) > .bm.rc.fr:focus-visible { outline-offset: -2px; }
.fr-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--fg-2); font-size: 14px; line-height: 20px; overflow-wrap: break-word; }
/* unread: the source in full weight and a dot before it (never a coloured edge) */
.fr.un .rc-src { color: var(--fg); font-weight: 700; }
.fr.un .rc-src::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.fr .fr-n { font-variant-numeric: tabular-nums; }
.fr-chev { flex: none; display: inline-flex; color: var(--fg-3); transition: transform .15s; }
.fr-chev .ic { width: 16px; height: 16px; }
.fr.grp.open .fr-chev { transform: rotate(180deg); }
.fr.grp.open { background: var(--layer); }
.fr-list { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; }
.fr-list > .fr-open, #mon-tl > .fr-open { gap: 12px; }
.mon-more { align-self: center; min-height: 44px; padding: 0 16px; font-size: 14px; }
.mon-rep { color: var(--fg-3); font-size: 12px; line-height: 16px; }

/* 채팅's list at volume (31-conversations.js): the view chips over the list, the 더 보기 row of the projects */
.cv-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.cv-bar .cv-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cv-bar .cv-tabs::-webkit-scrollbar { display: none; }
.cv-bar .mr-f { height: 32px; padding: 0 10px; font-size: 12.5px; color: var(--fg-2); background: var(--layer); }
.cv-bar .mr-f.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.cv-bar .mr-fn { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }
.cv-bar .cv-read { flex: none; margin-left: auto; height: 32px; padding: 0 8px; font-size: 13px; }
.cv-more { display: flex; justify-content: center; padding: 8px 0; }
.cv-more .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.cv-empty { padding: 24px 16px; color: var(--fg-3); font-size: 14px; line-height: 20px; text-align: center; }
@media (min-width: 1100px) {
  .cv-bar { flex-wrap: wrap; margin: -8px -8px 4px; padding: 8px; border-radius: var(--r-card) var(--r-card) 0 0; }
  .cv-bar .cv-tabs { flex: 1 0 100%; }
  .cv-bar .mr-f { padding: 0 8px; }
  .cv-bar .cv-read { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .fr-chev { transition: none; } }

/* 앱 (web/js/30-apps.js): the 모니터링 list's rows on the left and the open app on the right. Below 1100px the list and the app
   are two screens (#v-apps.cv-listing = the list); the app's own page fills the pane under the dotz header. */
#v-apps { min-height: 0; }
#v-apps > .apps-pane { display: none; flex: 1; min-height: 0; }
#v-apps.cv-listing > .cv-side { display: block; }
#v-apps.cv-listing > .apps-pane { display: none; }
#v-apps:not(.cv-listing) > .apps-pane { display: flex; }
#v-apps > .cv-side { display: none; }

/* the status dot on the app's own mark (a row and the header): green = running, red = no answer, gray = off / unknown */
.cv-av.app-av { position: relative; }
.app-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--card); border-radius: 50%; background: var(--fg-3); }
.app-dot.ok { background: var(--ok); }
.app-dot.err { background: var(--err); }
.app-dot.off { background: var(--line-2); }

.apps-pane { flex-direction: column; min-width: 0; min-height: 0; }
.apps-hd { display: flex; flex: none; align-items: center; gap: 10px; min-height: 56px; padding: 8px 4px 12px; }
.apps-hd .cv-av { width: 36px; height: 36px; }
.apps-hb { flex: 1; min-width: 0; }
.apps-n { margin: 0; font: 700 18px/24px var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-p { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--fg-3); font: 400 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-hd .ib { color: var(--fg-2); }

.apps-frame { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); }
.apps-card { padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); }
.apps-note { margin: 0 0 12px; color: var(--fg-2); font-size: 14px; line-height: 21px; }
.apps-card .btn { margin-top: 4px; }
.apps-set .apps-block { margin-top: 18px; }
.apps-kk { margin: 0 0 4px; color: var(--fg-3); font: 500 12px/16px var(--font); }
.apps-kv { display: flex; flex-direction: column; gap: 2px; }
.apps-kr { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.apps-kr:last-child { border-bottom: 0; }
.apps-kv2 { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.apps-pre { margin: 0; padding: 12px; overflow-x: auto; border-radius: var(--r-ctl); background: var(--layer); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.apps-err .sup { color: var(--fg-3); font-size: 12px; overflow-wrap: anywhere; }

@media (min-width: 1100px) {
  #v-apps { display: grid; max-width: none; margin: 0; padding-left: var(--edge); padding-right: var(--edge); column-gap: 16px; grid-template-columns: var(--cv-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #v-apps > .cv-side { grid-column: 1; grid-row: 1; display: block; min-height: 0; margin-bottom: 16px; padding: 8px; }
  #v-apps.cv-listing > .cv-side, #v-apps > .apps-pane, #v-apps:not(.cv-listing) > .apps-pane { display: flex; }
  #v-apps > .apps-pane { grid-column: 2; grid-row: 1; min-height: 0; margin-bottom: 16px; }
  #v-apps > .apps-pane:not(:has(.apps-frame)) { display: block; }
}

/* 캔버스 (web/js/30-canvas.js): the 앱 screen's header and frame (20-apps.css) for an HTML page the bot made. From 1100px a third
   column beside the conversation; below that a full-screen sheet on the page canvas, under the pick outline (21-picker.css, z 70). */
#v-chat > #canvas { display: none; }
#v-chat.canvas-open > #canvas:not([hidden]) { display: flex; }
@media (max-width: 1099px) {
  #v-chat.canvas-open > #canvas { position: fixed; inset: 0; z-index: 60; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
}
@media (min-width: 1100px) {
  #v-chat.canvas-open { grid-template-columns: var(--cv-w) minmax(360px, 1fr) minmax(0, 1.25fr); }
  #v-chat.canvas-open > #canvas { grid-column: 3; grid-row: 1 / -1; min-height: 0; margin-bottom: 16px; }
}

/* The mailbox of the mail app (web/js/30-mail-box.js): row checkbox and star, the bold unread row, the selection bar, the floating 메일 쓰기 and its sheet, the inline reply. */
.mr-lead { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: -4px; }
.mr-chk, .mbox-all { flex: none; width: 16px; height: 16px; margin: 0 6px 0 4px; accent-color: var(--accent); cursor: pointer; }
.mr-star { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-3); }
button.mr-star { cursor: pointer; }
button.mr-star:hover { background: var(--active); color: var(--fg); }
.mr-star .ic { width: 18px; height: 18px; }
.mr-star.on { color: #f5b301; }
.mr-star.on .ic { fill: currentColor; }
span.mr-star:not(.on) { opacity: .45; }
.mr.mr-new .rc-src, .mr.mr-new .rc-title { color: var(--fg); font-weight: 700; }
.mr:not(.mr-new) .rc-title { color: var(--fg-2); font-weight: 400; }
#mon-tl > .bm.rc.mr.mr-sel { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

.mbox-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 36px; padding: 2px 14px 6px 14px; color: var(--fg-2); font-size: 12.5px; }
.mbox-bar.on { position: sticky; top: 40px; z-index: 2; margin: 0 0 4px; padding-top: 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mbox-n { margin-right: auto; font-variant-numeric: tabular-nums; }
.mbox-bar.on .mbox-n { margin-right: 4px; color: var(--fg); font-weight: 600; }
.mbox-b { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: var(--layer); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mbox-b:hover:not(:disabled) { background: var(--hover); }
.mbox-b:disabled { opacity: .45; cursor: not-allowed; }
.mbox-b .ic { width: 16px; height: 16px; }
.mbox-b.mbox-x { width: 30px; padding: 0; justify-content: center; margin-left: auto; }
.mbox-note { flex: 1 0 100%; color: var(--fg-3); font-size: 12px; line-height: 16px; }
.mbox-open { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }

.mbox-fab { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 56px; height: 56px; padding: 0 20px; border: 0; border-radius: 28px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); cursor: pointer; }
.mbox-fab:hover { filter: brightness(1.08); }
.mbox-fab .ic { width: 22px; height: 22px; }
/* A phone keeps the button above the compact tab bar (web/css/01-tokens.css .side: a 46px row), not on top of its tabs. */
@media (max-width: 639px) { .mbox-fab { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; } .mbox-fab-t { display: none; } }

.mbox-sheet { position: fixed; z-index: 60; right: 24px; bottom: 0; display: flex; flex-direction: column; width: 520px; max-height: min(640px, calc(100vh - 48px)); border-radius: 12px 12px 0 0; background: var(--pop); color: var(--fg); box-shadow: 0 8px 32px rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-bottom: 0; overflow: hidden; }
.mbox-sheet.min { max-height: 44px; }
.mbox-sheet.min > :not(.mbox-sh) { display: none; }
.mbox-sh { display: flex; align-items: center; gap: 2px; flex: none; height: 44px; padding: 0 6px 0 16px; background: var(--layer); }
.mbox-st { flex: 1; font-size: 14px; font-weight: 700; }
.mbox-sb, .mbox-rb { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 4px 16px 0; }
.mbox-f { position: relative; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.mbox-fk { flex: none; width: 56px; color: var(--fg-3); font-size: 12.5px; }
.mbox-in { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; }
.mbox-cc { flex: none; border: 0; background: none; color: var(--fg-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.mbox-cc:hover { color: var(--fg); }
.mbox-ta { flex: 1; min-height: 120px; margin: 8px 0; padding: 0; border: 0; outline: 0; resize: none; background: none; color: var(--fg); font: inherit; font-size: 14px; line-height: 21px; }
.mbox-fw:empty { display: none; }
.mbox-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 8px; }
.mbox-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--line-2); border-radius: 15px; background: var(--layer); color: var(--fg); font-size: 12.5px; }
.mbox-chip.wait { opacity: .6; padding-right: 10px; }
.mbox-chip .ic { flex: none; width: 14px; height: 14px; color: var(--fg-3); }
.mbox-cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbox-cs { flex: none; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.mbox-cx { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-3); cursor: pointer; }
.mbox-cx:hover { background: var(--active); color: var(--fg); }
.mbox-cx .ic { width: 12px; height: 12px; }
.mbox-sf { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; }
.mbox-hint { margin-left: auto; color: var(--fg-3); font-size: 12px; }
@media (max-width: 639px) {
  .mbox-sheet { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; }
  .mbox-sheet.min { inset: auto 0 0 0; max-height: 44px; border-radius: 12px 12px 0 0; }
  .mbox-sb { flex: 1; }
  .mbox-hint { display: none; }
  .mbox-sf { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

.mbox-reply { margin: 12px 0 20px; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mbox-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.mbox-mode { height: 32px; gap: 6px; padding: 0 14px 0 10px; font-size: 13px; font-weight: 600; background: var(--layer); color: var(--fg-2); }
.mbox-mode.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.mbox-mode .ic { width: 16px; height: 16px; }
.mbox-reply.open .mbox-rb { padding: 4px 0 0; overflow: visible; }
.mbox-reply .mbox-sf { padding: 6px 0 0; }
.mbox-quote { margin: 4px 0 6px; color: var(--fg-3); font-size: 12.5px; }
.mbox-quote summary { width: fit-content; padding: 2px 10px; border-radius: 10px; background: var(--layer); cursor: pointer; }
.mbox-qt { max-height: 220px; margin: 6px 0 0; padding-left: 10px; overflow: auto; border-left: 3px solid var(--line-2); font: inherit; white-space: pre-wrap; word-break: break-word; }

/* A phone keeps the sender's name whole: the unread tag is the bold row itself (the row's aria-label still says 안 읽음), the paperclip count
   is in the open mail, and the one tag that stays is small. */
@media (max-width: 639px) {
  .mr .tag.mr-unread, .mr .mr-clip { display: none; }
  .mr .rc-hd .tag { font-size: 10.5px; padding: 0 6px; }
}

/* ---------- a mail's people and its thread (web/js/30-mail-thread.js): 보낸 사람 / 받는 사람 / 참조, and the same-sender panel ---------- */
.mhd { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); font-size: 13px; line-height: 20px; }
.mhd-r { display: flex; gap: 8px; min-width: 0; }
.mhd-k { flex: none; width: 56px; color: var(--fg-3); }
.mhd-v { min-width: 0; overflow-wrap: anywhere; }
.mhd-none { color: var(--fg-3); }
.mhd-n { color: var(--fg); font-weight: 600; }
.mhd-a { color: var(--fg-3); }
.mhd-more { min-height: 24px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--card); color: var(--accent); font: 500 12px/20px var(--font); cursor: pointer; }
.mhd-more:hover { background: var(--hover); }
.mhd-wrap .mhd { margin-top: 0; }
.mr-to { overflow: hidden; color: var(--fg-3); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.od-pane .mhd-wrap .mhd { margin-top: 0; }

.mth { display: none; }
.mth-m { display: none; margin-top: 10px; }
.mth-mb { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--layer); color: var(--fg-2); font: 500 14px/20px var(--font); text-align: left; }
.mth-mb .ic { flex: none; width: 16px; height: 16px; }
.mth-mt { flex: 1; min-width: 0; color: var(--fg); text-align: left; }
.mth-ch { transition: transform .15s; }
.mth-mb.open .mth-ch { transform: rotate(180deg); }
.mth-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mth-m > .mth-list { margin-top: 4px; padding: 4px; border-radius: var(--r-ctl); background: var(--layer); }
.mth-row { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mth-row:hover { background: var(--card-hover); }
.mth-row.on { background: var(--layer); cursor: default; }   /* the selected fill of every list (.cv-row.on) */
.mth-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mth-when { flex: 1; min-width: 0; color: var(--fg-3); font-size: 12px; line-height: 16px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-subj { font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-sum { color: var(--fg-3); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-h { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; }
.mth-ht { flex: 1; min-width: 0; color: var(--fg); font-size: 14px; line-height: 20px; font-weight: 600; }
.mth-n { flex: none; min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--layer); color: var(--fg-3); font-size: 12px; line-height: 20px; text-align: center; }

@media (max-width: 1023px) {
  .mth-m { display: block; }
}

@media (min-width: 1024px) {
  .mth-m { display: none; }
  #v-chat.mail-open .chatbox { display: flex; gap: 16px; align-items: stretch; }
  #v-chat.mail-open .chatbox > .timeline { flex: 1 1 auto; min-width: 0; }
  #v-chat.mail-open #mail-thread { display: flex; flex-direction: column; flex: 0 0 280px; min-height: 0; margin: 0 0 16px; padding: 10px 6px 10px 10px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); overflow: hidden; }
  /* The transcript's top fade (.chatbox::before, 03-base.css) spans the whole box; the panel beside it stays clear of it (owner 2026-10-28). */
  #v-chat.mail-open #mail-thread { position: relative; z-index: 2; }
  #mail-thread[hidden] { display: none; }
  #mail-thread > .mth-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* 모니터링 (web/js/30-monitoring.js): a monitor's wait drawn as a thin bar from its last run to its next, the result as a tag, the connection
   banner of a down app or watch, and the 감시 소식 overview of every plain monitor. One blue accent, grey track; overdue turns warn, a stopped
   one grey, a running check a moving shimmer. */
.mon-prog-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; }
.mon-prog-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mon-prog { display: block; flex: 1; min-width: 32px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.mon-prog i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--accent); }
.mon-prog.ok i { background: var(--ok); }
.mon-prog.warn i { background: var(--warn); }
.mon-prog.err i { background: var(--err); }
.mon-prog.off i { background: var(--line-2); }
.mon-prog.none i { background: transparent; }
.mon-prog.none.ok, .mon-prog.none.warn, .mon-prog.none.err { background: currentColor; }
.mon-prog.none.ok { color: var(--ok); } .mon-prog.none.warn { color: var(--warn); } .mon-prog.none.err { color: var(--err); }
.mon-prog.run i { width: 35% !important; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: mon-sweep 1.1s linear infinite; }
@keyframes mon-sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.mon-prog-tx { display: block; color: var(--fg-3); font: 400 12px/16px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-prog-wrap.compact { margin-top: 6px; }
.mon-prog-wrap.compact .mon-prog { height: 3px; }
.mon-prog-wrap.compact .mon-prog-tx { font-size: 11px; line-height: 15px; }
/* a list row's bar is a second full-width line under the title and status, so a peer row's machine chip and badge never squeeze its meta text */
.cv-row.has-mon-prog { flex-wrap: wrap; row-gap: 2px; }
.cv-row.has-mon-prog > .mon-row-status { flex: 1 0 100%; order: 8; margin-top: 2px; }
.cv-row.has-mon-prog > .mon-prog-wrap { flex: 1 0 100%; order: 9; margin-top: 2px; }
/* the result tag (same look as .tag, its own class so the row's other tags keep their place in a query) */
.mon-ptag { display: inline-flex; align-items: center; align-self: center; flex: none; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--layer); color: var(--fg-2); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mon-ptag.pri { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.mon-ptag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.mon-ptag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.mon-ptag.err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }

/* the open item's head: the row of icon, name and state, then the bar / banner under it (wide screens; a phone puts them in the timeline) */
#mon-head .mon-hdwrap { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
#mon-head .mon-hdrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
#mon-head .mon-hdrow .cv-b { flex: 1; }
#mon-head .mon-prog-wrap { width: 100%; }
.mon-actions { display: flex; justify-content: center; }

/* a connection that is down: said at the top of the conversation, with 지금 다시 확인; the row says the same in its status line */
.mon-banner { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--err) 10%, transparent); font-size: 13px; line-height: 18px; }
.mon-banner .ic { flex: none; color: var(--err); }
.mon-banner-tx { flex: 1; min-width: 0; color: var(--fg-2); overflow-wrap: break-word; }
.mon-banner-tx b { color: var(--err); font-weight: 600; }
.mon-banner .btn { flex: none; }
/* disconnected: only the owner can reconnect it, so orange; a failed check stays red (web/DESIGN.md status color rule) */
.mon-banner.down { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.mon-banner.down .ic, .mon-banner.down .mon-banner-tx b { color: var(--warn); }
/* connected, but the last check failed: a warning, not the outage colour */

/* 감시 소식 opens with this: one compact row per plain monitor, what needs the owner first */
.mon-ov { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-panel); }
.mon-ov-h { padding: 0 4px 4px; color: var(--fg); font: 700 14px/20px var(--font); }
.mon-ov-row { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; }
.mon-ov-row:hover { background: var(--hover); }
.mon-ov-hd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mon-ov-n { min-width: 0; font: 600 14px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-ov-peer { color: var(--fg-3); font: 400 12px/16px var(--font); }
.mon-ov-s { color: var(--fg-3); font: 400 12px/16px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-ov-empty { padding: 4px; color: var(--fg-3); font-size: 13px; }

/* the top of an older page: the reports above load when this reaches the view (the button under it stays as a fallback) */
.mon-sentinel { width: 100%; height: 1px; }

/* 프로젝트 (web/js/18-lanes.js, 19-project-main.js): three levels on one tab.
   1 list  - search + chips (전체 / 진행 중 / 확인 필요 / 끝남), compact rows (name, one status line, milestone bar, last activity), 더 보기.
   2 overview - 확인 필요 (one action) and four summary rows.
   3 pages - one section each, opened over the overview as a .pdv overlay (its own history entry: 뒤로 returns to the overview).
   The list prefix is .pl- (not .pj-: 05-log.css already owns .pj- for the project bands). */

/* ---- level 1: the list ---- */
.pl { display: flex; flex-direction: column; gap: 12px; }
.pl-top { display: flex; flex-direction: column; gap: 8px; }
.pl-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--card); color: var(--fg-3); }
.pl-search .ic { width: 18px; height: 18px; }
.pl-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--fg); font: inherit; outline: 0; }
.pl-search input::placeholder { color: var(--fg-3); }
.pl-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
/* one line at every width: the chips scroll sideways instead of wrapping */
.pl-chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pl-chips::-webkit-scrollbar { display: none; }
.pl-chips .mr-f { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--card); color: var(--fg-2); font-size: 13px; }
.pl-chips .mr-f:hover { background: var(--card-hover); }
.pl-chips .mr-f.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.pl-chips .mr-fn { margin-left: 3px; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }
.pl-list { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-panel); overflow: hidden; }
.pl-list .cv-more { border-top: 1px solid var(--line); }
.pl-row { display: flex; width: 100%; min-width: 0; padding: 12px 16px; border: 0; background: transparent; color: inherit; text-align: left; }
.pl-row + .pl-row { border-top: 1px solid var(--line); }
.pl-row:hover { background: var(--card-hover); }
/* the open project: the same selected fill as the chat list (.cv-row.on) */
.pl-row.on, .pl-row.on:hover { background: var(--layer); }
.pl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/22px var(--font); }
.pl-nb { flex: none; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 600 11px/18px var(--font); text-align: center; }
.pl-at { flex: none; color: var(--fg-3); font-size: 12px; line-height: 18px; }
.pl-s { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-2); font-size: 13px; line-height: 18px; }
.pl-s .dot { width: 7px; height: 7px; }
.pl-sw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-p { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
/* one progress rule everywhere: accent while it runs, success green once every milestone is done */
.pl-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.pl-bar.done i { background: var(--ok); }
.pl-pn { flex: none; color: var(--fg-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.pl-gh { padding: 12px 16px 4px; color: var(--fg-3); font: 500 12px/16px var(--font); }
.pl-row.sub { min-height: 48px; padding: 10px 16px; }
.pl-row.sub .pl-n { font-weight: 500; }

/* ---- level 2: the overview ---- */
.pm-o { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-top: 16px; }
.pm-need, .pm-calm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pm-need-k, .pm-calm-k { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font: 600 13px/20px var(--font); }
.pm-need-k { color: var(--warn); }
.pm-need-t, .pm-calm-t { font: 600 17px/24px var(--font); overflow-wrap: anywhere; }
.pm-need-s { color: var(--fg-2); font-size: 13px; line-height: 20px; }
.pm-need-a, .pm-calm .btn { margin-top: 10px; }
.pm-calm-t.sup { color: var(--fg-3); font-weight: 400; font-size: 14px; }
.pm-rows { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-panel); overflow: hidden; }
.pm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 18px; border: 0; background: transparent; color: inherit; text-align: left; }
.pm-row + .pm-row { border-top: 1px solid var(--line); }
.pm-row:hover { background: var(--card-hover); }
.pm-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-row-k { color: var(--fg-3); font: 600 12px/16px var(--font); }
.pm-row-v { font: 500 15px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-v.empty { color: var(--fg-3); }
.pm-row-s { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
.pm-row-s .pl-bar { flex: 0 0 72px; }
.pm-row-st { min-width: 0; color: var(--fg-3); font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row .lead { width: 16px; height: 16px; color: var(--fg-3); }
.pm-o-foot { padding: 0 4px; color: var(--fg-3); font-size: 12px; line-height: 16px; }

/* the page menu (⋯) beside 프로젝트 채팅: the same 40px round button the app's other ⋯ menus use on a page header */
.pmv-hact .ib.pmv-more { width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--fg-2); box-shadow: var(--shadow-panel); }
.pmv-hact .ib.pmv-more:hover { background: var(--card-hover); color: var(--fg); }
.pmv-hact .ib.pmv-more .ic { width: 18px; height: 18px; }
/* the goal page's own bar follows the same colour rule */
.pmv-prog .bar.done i { background: var(--ok); }

/* ---- level 3: a section page (an overlay, full screen on a phone) ---- */
.pdv-hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px 6px 8px; }
.pdv-back { width: 40px; height: 40px; border-radius: var(--r-ctl); color: var(--fg-2); }
.pdv-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pdv-t { margin: 0; font: 700 20px/28px var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pdv-ey { color: var(--fg-3); font-size: 13px; line-height: 18px; }
.pdv-body { display: flex; flex-direction: column; padding: 6px 20px 24px; }
.pdv-stack { display: flex; flex-direction: column; min-width: 0; }
.pdv-stack .sec:first-child { margin-top: 4px; }
/* a page, not a dialog: wide screens get the same tall surface as .fs-card.tall */
@media (min-width: 640px) { .fs-card.pdv { width: min(760px, calc(100% - 48px)); height: min(86dvh, 860px); max-height: none; } }
@media (max-width: 639px) {
  .pdv-hd { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .pdv-body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ---- wide: the list beside the overview, like 채팅's conversation list ---- */
@media (min-width: 1100px) {
  .views.pp { grid-template-columns: 304px minmax(0, 1fr); }
  .views.pp > #v-projects { padding: 0 8px 0 4px; }
  /* the chip row is wider than the column most of the time: the fade shows there is more to scroll */
  .pl-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
  .pl-row { padding: 10px 12px; }
  .pl-n { font-size: 14px; line-height: 20px; }
  .pl-at { font-size: 11.5px; }
  .pl-gh { padding: 10px 12px 2px; }
  .pm-o { max-width: 680px; }
}

/* ---------- element picker (web/js/15-picker.js): the app header's hint, hover box, numbered markers, composer chips ---------- */
.pk-hint { flex: none; color: var(--fg-3); font: 400 12px/16px var(--font); white-space: nowrap; }
.apps-hb .pk-hint { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.pk-box { position: fixed; z-index: 70; pointer-events: none; border-radius: 4px; outline: 2px solid var(--accent); outline-offset: -1px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pk-box[hidden] { display: none; }
.pk-lab { position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; max-width: min(320px, 80vw); padding: 3px 8px; border-radius: 8px; background: var(--pop); color: var(--fg); font: 500 12px/16px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.pk-box.below .pk-lab { bottom: auto; top: 100%; margin: 4px 0 0; }
#pick-marks { position: fixed; inset: 0; z-index: 71; pointer-events: none; }
.pk-mark { position: fixed; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font: 700 11.5px/1 var(--font); box-shadow: 0 1px 4px rgb(0 0 0 / .25); transform: translate(0, -50%); }
.pk-mark[hidden] { display: none; }
.atray.has-pick { flex-wrap: wrap; overflow-x: visible; }
.pk-chip { height: 44px; max-width: min(320px, 100%); padding: 0 32px 0 8px; border-radius: 16px; gap: 8px; }
.pk-n { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.pk-chip .fi-t { min-width: 0; }
.pk-chip .fi-n { max-width: 200px; }
.pk-chip .fi-m { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-chip .ax { top: 8px; right: 2px; width: 28px; height: 28px; border-radius: 14px; background: transparent; color: var(--fg-3); }
.pk-chip .ax svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .pk-chip .ax { top: 6px; width: 32px; height: 32px; border-radius: 16px; } }
@media (max-width: 639px) { .pk-chip { max-width: 100%; } .pk-chip .fi-n { max-width: 168px; } .pk-chip .fi-m { max-width: 180px; } }