/* D2Coding (OFL, vendor/fonts/D2Coding-OFL.txt) — 한글이 정확히 두 칸 폭이라 터미널에서 띄어 보이지 않는다 */
@font-face { font-family: "D2Coding"; font-weight: 400; font-display: block; src: url("/vendor/fonts/d2coding-full.woff2") format("woff2"); }
@font-face { font-family: "D2Coding"; font-weight: 700; font-display: block; src: url("/vendor/fonts/d2coding-bold-full.woff2") format("woff2"); }
/* 한글만 120% 로 — Monaco·SF Mono·Menlo 는 한 칸이 0.6em 이라 한글 두 칸은 1.2em 인데, D2Coding 한글은 1.0em 이라
   칸이 남아 «한 글» 처럼 띄어 보였다. 영문은 그 글꼴 그대로 두고 한글(자모·음절·호환 자모)만 칸을 꽉 채운다. */
@font-face { font-family: "AtlasHangul"; font-weight: 400; font-display: block; size-adjust: 120%; src: url("/vendor/fonts/d2coding-full.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: "AtlasHangul"; font-weight: 700; font-display: block; size-adjust: 120%; src: url("/vendor/fonts/d2coding-bold-full.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }

:root {
  --bg: #0b0f17; --panel: #111827; --panel-2: #172033; --line: #233047;
  --text: #e6edf6; --dim: #8a99b0; --accent: #5aa9ff; --accent-2: #2f7de0;
  --ok: #3fcf8e; --warn: #f2c14e; --bad: #ff6b6b;
  --side: 300px; --bar: 52px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text);
  word-break: keep-all; overflow-wrap: anywhere;
  font: 14px/1.45 var(--ui-font, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif); }
button, input, select { font: inherit; color: inherit; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.dim { color: var(--dim); }
[hidden] { display: none !important; }

#app { display: grid; height: 100dvh; grid-template: var(--bar) 1fr / var(--side) 1fr;
  grid-template-areas: "bar bar" "side main"; padding-bottom: env(safe-area-inset-bottom); }

.bar { grid-area: bar; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; font-weight: 700; letter-spacing: .02em; font-size: 16px; }
.brand img { width: 24px; height: 24px; }
.brand small { font-weight: 400; color: var(--dim); font-size: 12px; }
.bar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.btn { border: 1px solid var(--line); background: var(--panel-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.primary:hover { background: var(--accent); }
.icon-btn { border: 0; background: transparent; font-size: 18px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.icon-btn:hover { background: var(--panel-2); }

.side { grid-area: side; overflow: auto; border-right: 1px solid var(--line); background: var(--panel); }
.side-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 6px; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.side-foot { padding: 12px 14px; }
.host { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.host-h { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-weight: 600; }
.host-h .tag { font-weight: 400; font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.host-h .meta { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(63, 207, 142, .15); }
.host-off { padding: 2px 14px 4px 30px; font-size: 12px; color: var(--dim); }
.sess { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 14px 7px 30px; cursor: pointer; border-left: 3px solid transparent; }
.sess:hover { background: var(--panel-2); }
.sess.open { border-left-color: var(--accent); background: var(--panel-2); }
.sess { position: relative; }
.sess .more { position: absolute; right: 6px; bottom: 6px; border: 0; background: transparent; color: var(--dim); width: 26px; height: 22px;
  border-radius: 6px; cursor: pointer; opacity: 0; font-size: 15px; line-height: 1; }
.sess:hover .more, .sess .more:focus { opacity: 1; }
@media (pointer: coarse) { .sess .more { opacity: .8; } }
.sess .more:hover { background: var(--line); color: var(--text); }
.peek { position: fixed; z-index: 55; width: min(640px, calc(100vw - 340px)); padding: 8px 10px 10px; border-radius: 10px; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.peek-h { font-weight: 600; }
.peek-s { font-size: 12px; color: var(--dim); margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek pre { margin: 0; font: 12px/1.45 "D2Coding", ui-monospace, Menlo, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 16em; overflow: hidden; }
.menu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 150px; padding: 4px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .4); }
.menu button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--line); }
.menu button.danger, .btn.danger { color: #ff6b6b; }
/* 전체 메뉴 (☰) — 묶음 제목 · 단축키 표시 · 아래 판본 */
.menu.nav { min-width: 250px; overflow-y: auto; }
.menu.nav button { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); }
.menu kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--dim); }
.menu-head { padding: 8px 10px 2px; font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.menu-head:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.menu-foot { padding: 6px 10px 4px; font-size: 11px; color: var(--dim); border-top: 1px solid var(--line); margin-top: 4px; }
/* 목록 숨기기 단추 — 목록이 숨으면 아이콘의 왼쪽 칸이 빈다 */
.side-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
#app.side-hidden .side-btn .side-fill { opacity: 0; }
/* 사용 안내 */
.dlg.help { max-height: calc(100vh - 48px); }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.help-toc .chip { font-size: 13px; }
.help-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; line-height: 1.6; font-size: 14px; }
.help-body h3 { margin: 14px 0 4px; font-size: 15px; color: var(--accent); }
.help-body section:first-child h3 { margin-top: 0; }
.help-body ul { margin: 0; padding-left: 20px; }
.help-body p { margin: 4px 0; }
.keys-table { border-collapse: collapse; }
.keys-table td { padding: 3px 14px 3px 0; vertical-align: top; }
.keys-table td:first-child { white-space: nowrap; }
.btn.danger { border-color: #7a2d2d; }
.btn.danger:hover { background: #3a1515; border-color: #ff6b6b; }
.sess .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .p { grid-column: 1 / -1; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; align-self: center; }
.badge.att { color: var(--ok); background: rgba(63, 207, 142, .12); }
.badge.idle { color: var(--dim); background: var(--panel-2); }
.badge.shell { color: var(--warn); background: rgba(242, 193, 78, .12); }
.badge.busy { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.badge.wait { color: #fff; background: #d9534f; font-weight: 600; }
@keyframes pulse { 50% { opacity: .45; } }

.main { grid-area: main; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabbar { display: flex; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 38px; }
.tabbar .icon-btn { height: auto; border-radius: 0; flex: none; }
.tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.newver { position: fixed; z-index: 40; left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); white-space: nowrap; }
@media (max-width: 760px) { .newver .dim { display: none; } }
.toast { position: absolute; z-index: 30; right: 16px; bottom: 16px; max-width: min(520px, calc(100% - 32px)); padding: 10px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); word-break: break-all; }
.toast.err { border-color: var(--bad); }
.stage.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.tab { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; color: var(--dim); font-size: 13px; }
.tab.on { color: var(--text); background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
.tab .x { border: 0; background: transparent; color: var(--dim); cursor: pointer; border-radius: 4px; width: 22px; height: 22px; }
.tab .x:hover { background: var(--panel-2); color: var(--text); }
.tab.dead { text-decoration: line-through; }
.tab.wait::before { content: "💬"; font-size: 12px; }
.tab.busy::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.stage { position: relative; flex: 1; min-height: 0; }
.find { position: absolute; top: 8px; right: 18px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.find input { width: 220px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.find span { min-width: 44px; text-align: center; font-size: 12px; }
.find button { border: 0; background: transparent; color: var(--text); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.find button:hover { background: var(--line); }
/* 여백은 .xterm 에 준다 — fit 애드온은 감싼 칸의 높이에서 «xterm 자신의» 여백만 뺀다. 칸에 여백을 주면
   그만큼(최대 한 줄의 반) 마지막 줄이 아래로 넘쳐 가려진다 (2026-10-19 사용자 화면에서 발견, 측정 855 vs 845px). */
.term { position: absolute; inset: 0; background: var(--bg); }
.stage.split .term.left { right: 50%; }
.stage.split .term.right { left: 50%; border-left: 1px solid var(--line); }
.stage.split .term.cur { box-shadow: inset 0 2px 0 var(--accent); }
.stage.split .term:not(.cur) { opacity: .82; }
.tab.vis { color: var(--text); box-shadow: inset 0 2px 0 var(--line); }
@media (pointer: coarse) { #btn-split { display: none; } }
.term .xterm { height: 100%; padding: 6px 4px 4px 8px; }
.notice { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 5; display: flex; gap: 10px; align-items: flex-start;
  background: #2a2412; border: 1px solid #6b5520; color: #ffe7a6; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.notice button { margin-left: auto; }
.gone { position: absolute; inset: auto 12px 12px 12px; z-index: 5; display: flex; gap: 10px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px; }
.empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 4px; }
.empty img { width: 72px; opacity: .9; }
.empty h1 { margin: 8px 0 0; font-size: 22px; }
.empty p { max-width: 440px; margin: 4px 0; }

.keys { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; background: var(--panel); border-top: 1px solid var(--line); }
.keys button { flex: none; min-width: 44px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }

/* 뜬 창은 뒤 화면과 또렷이 갈라 보이게 (사용자 지적 2026-10-21 — 설정·상태 창의 배경이 뒤와 같아 어디까지가 창인지 몰랐다):
   바탕을 글자색 쪽으로 몇 % 들어 올리고(테마마다 저절로 맞는다), 테두리·그림자를 진하게, 뒤는 더 어둡게 흐린다 */
dialog { border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, var(--panel) 90%, var(--text) 10%); color: var(--text);
  border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog .btn { background: color-mix(in srgb, var(--panel-2) 80%, var(--text) 8%); }
.dlg { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
/* 넓은 창은 «창» 자체에 폭을 준다 — 안쪽 폼에만 주면 창이 화면 끝까지 늘고 내용·닫기 단추가 왼쪽에 몰린다 (사용자 지적 2026-10-21) */
dialog:has(.wide) { width: min(1180px, calc(100vw - 24px)); }
dialog:has(.help) { width: min(720px, calc(100vw - 24px)); }
.dlg h2 { margin: 0; font-size: 17px; }
.dlg label, .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.dlg input, .dlg select, .dlg textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); width: 100%; }
.dlg input:focus, .dlg select:focus, .dlg textarea:focus { outline: 2px solid var(--accent-2); border-color: transparent; }
.name-row { display: flex; align-items: center; gap: 6px; }
.name-row > span { white-space: nowrap; flex: none; }
.crumb { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); font-size: 12px; word-break: break-all; }
.dirs { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.dirs li { padding: 7px 10px; cursor: pointer; color: var(--text); font-size: 13px; border-bottom: 1px solid #141c2b; }
.dirs li:hover, .dirs li.sel { background: var(--panel-2); }
.dirs li.up { color: var(--dim); }
.err { color: var(--bad); margin: 0; min-height: 1em; font-size: 13px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.grow { flex: 1; }
.hosts-wrap { overflow-x: auto; }
.hosts { border-collapse: collapse; width: 100%; font-size: 13px; }
.hosts th { text-align: left; color: var(--dim); font-weight: 500; padding: 4px 6px; white-space: nowrap; }
.hosts td { padding: 3px 4px; vertical-align: middle; }
.hosts td input { padding: 6px 8px; min-width: 90px; }
.hosts td.ops { white-space: nowrap; }
.hosts td.ops button { border: 0; background: transparent; cursor: pointer; color: var(--dim); width: 28px; height: 28px; border-radius: 6px; }
.hosts td.ops button:hover { background: var(--panel-2); color: var(--text); }

#app.side-hidden { grid-template-columns: 0 1fr; }
#app.side-hidden .side { visibility: hidden; border: 0; }
.size-row { display: flex; gap: 8px; align-items: center; }
.size-row input[type=range] { flex: 1; padding: 0; accent-color: var(--accent); }
.dlg label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.dlg label.check input { width: auto; accent-color: var(--accent); }

/* 집중 모드 — 터미널만 창 전체로 */
#app.focus { grid-template-rows: 0 1fr; grid-template-columns: 0 1fr; padding: 0; } /* 축약형 grid-template 은 영역 이름까지 지운다 */
#app.focus .bar, #app.focus .side, #app.focus .tabbar, #app.focus .keys, #app.focus .scrim { display: none !important; }
.focus-exit { display: none; }
#app.focus .focus-exit { display: block; position: absolute; z-index: 35; top: 6px; right: 10px; opacity: 0; transition: opacity .15s;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
#app.focus .focus-exit:hover, #app.focus .focus-exit:focus { opacity: .95; }

.only-narrow { display: none; }
@media (max-width: 760px) {
  #app { grid-template: var(--bar) 1fr / 1fr; grid-template-areas: "bar" "main"; }
  .only-narrow { display: inline-flex; align-items: center; justify-content: center; }
  #app.side-hidden .side { visibility: visible; }
  #app.focus { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 20; top: var(--bar); bottom: 0; left: 0; width: min(86vw, 340px); transform: translateX(-100%); transition: transform .18s ease; }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: var(--bar) 0 0 0; background: rgba(0, 0, 0, .45); z-index: 15; display: none; }
  .scrim.open { display: block; }
  .brand small, #btn-hosts, #btn-refresh, #btn-status, #btn-prefs { display: none; } /* 좁은 화면 — ☰ 메뉴에 다 있다 */
  .bar { gap: 6px; padding: 0 8px; }
}
@media (max-width: 420px) { .brand span { display: none; } } /* 폰 — 이름까지 넣으면 머리줄이 화면보다 넓어진다 (아이콘만) */

.gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse at top, var(--panel-2) 0%, var(--bg) 60%); }
.gate-card { width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.gate-card img { width: 72px; }
.gate-card h1 { margin: 0; font-size: 24px; letter-spacing: .02em; }
.gate-card p { margin: 0; color: var(--dim); }
.btn.big { padding: 10px 22px; font-size: 15px; border-radius: 10px; margin-top: 6px; }

/* 서버 상태 */
.status { border-collapse: collapse; width: 100%; font-size: 13px; }
.status th { text-align: left; color: var(--dim); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.status td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.status .tag { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.status .dot { display: inline-block; vertical-align: middle; }
.status .warn { color: var(--warn); }
.meter { position: relative; width: 150px; height: 18px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.meter i.warm { background: rgba(242, 193, 78, .45); }
.meter i.hot { background: rgba(255, 107, 107, .5); }
.meter span { position: relative; padding: 0 6px; font-size: 11px; line-height: 18px; }

/* 새 세션 — 최근 폴더 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

.notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.notes li { line-height: 1.4; }

/* 세션 바로 가기 (⌘K) — 화면 위쪽에 띄운다 */
#dlg-jump { margin-top: 12vh; }
.dlg.jump { gap: 8px; }
.jump-list { max-height: min(420px, 55vh); }
.jump-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 0 8px; align-items: center; }
.jump-list .p { grid-column: 1 / -1; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-list .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-list .on { color: var(--accent); font-size: 11px; }
.jump-list li.none { color: var(--dim); cursor: default; }
.jump-hint { margin: 0; font-size: 12px; }

/* ☰ 위 입력 대기 수 (폰은 창 제목이 안 보인다) */
#btn-nav { position: relative; }
#btn-nav:not([data-n=""])[data-n]::after { content: attr(data-n); position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #d9534f; color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
/* 키 막대 Ctrl — 켜짐(다음 글자 하나) · 잠금 */
.keys button.on { border-color: var(--accent); color: var(--accent); }
.keys button.lock { background: var(--accent); color: #000; }
.badge.ask { color: #1a1300; background: #f2c14e; font-weight: 600; }
/* 목록의 마지막 답 한 줄 (설정) — 높이 고정 */
.sess .last { grid-column: 1 / -1; font-size: 12px; color: var(--text); opacity: .7; height: 1.35em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 아이폰 Safari 는 빠른 두 번 톡을 «확대» 로 받는다 — Ctrl 두 번(잠금)에 화면이 커졌다 (사용자 실측 2026-10-20).
   키 막대·터미널·단추에서만 두 번 톡 확대를 끈다 (두 손가락 확대는 그대로). */
.keys, .keys button, .term, .tabbar, .icon-btn, .btn { touch-action: manipulation; }
/* 대화 기록 (L1) */
dialog:has(.talk) { width: min(820px, calc(100vw - 16px)); }
.dlg.talk { height: min(86dvh, 900px); }
.talk-bar { display: flex; gap: 8px; align-items: center; }
.talk-bar input[type=text], .talk-bar #talk-q { flex: 1; }
.talk-bar .check { flex: none; flex-direction: row; gap: 4px; align-items: center; }
.talk-bar .check input { width: auto; }
.talk-list { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.turn { border-radius: 10px; padding: 7px 10px; max-width: 92%; }
.turn .who { font-size: 11px; color: var(--dim); margin-bottom: 2px; }
.turn .say { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.turn.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.turn.claude { align-self: flex-start; background: var(--panel-2); }
.turn.tool { align-self: flex-start; padding: 2px 10px; font-size: 12px; color: var(--dim); }
.turn.tool .say { font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.talk-foot { margin: 0; font-size: 12px; }
/* 자주 쓰는 지시 (L3) */
.snip-list { display: flex; flex-direction: column; gap: 6px; max-height: 45dvh; overflow: auto; }
.snip { display: flex; gap: 6px; }
.snip-go { flex: 1; text-align: left; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; white-space: pre-wrap; }
.snip-go:hover { border-color: var(--accent); }
.snip-del { border: 0; background: transparent; cursor: pointer; flex: none; }
.talk-list { min-height: 0; }
/* 컨텍스트 사용률 (M2) */
.tab .ctx { font-size: 10px; color: var(--dim); margin-left: 4px; }
.tab .ctx.warn { color: var(--warn); }
.tab .ctx.bad { color: var(--bad); font-weight: 600; }
.tab .ctx:not(:empty) { cursor: pointer; }
.tab .who { font-size: 10px; color: var(--warn); margin-left: 4px; }
.sess .rt { display: flex; gap: 6px; align-items: center; }
.sess .ctxchip { font-size: 11px; color: var(--warn); cursor: pointer; white-space: nowrap; }
.sess .ctxchip.bad { color: var(--bad); font-weight: 600; }
#cmp-focus { width: 100%; box-sizing: border-box; }
.limits { border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 12px; display: flex; gap: 8px; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.limits .warn { color: var(--warn); }
.limits .bad { color: var(--bad); font-weight: 600; }
dialog:has(.usage) { width: min(680px, calc(100vw - 24px)); }
.usage .u-head { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.u-row { display: grid; grid-template-columns: minmax(190px, 1.2fr) 1.5fr auto; gap: 16px; align-items: center; padding: 12px 0; }
.u-l { display: flex; flex-direction: column; gap: 3px; }
.u-l .dim { font-size: 12px; }
.u-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.u-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--accent); min-width: 4px; transition: width .3s; }
.u-bar i.warn { background: var(--warn); }
.u-bar i.bad { background: var(--bad); }
.u-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; border-radius: 1px; }
.u-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.u-r .u-pct { font-variant-numeric: tabular-nums; }
.u-r .dim { font-size: 11px; }
.u-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0; }
.u-legend i { display: inline-block; width: 2px; height: 14px; background: var(--text); opacity: .55; }
.u-src { font-size: 12px; margin: 0; }
@media (max-width: 560px) { .u-row { grid-template-columns: 1fr auto; } .u-bar { grid-column: 1 / -1; grid-row: 2; } }
.mute-opts { display: flex; flex-direction: column; gap: 8px; }
.mute-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; font: inherit; }
.mute-opt .dim { font-size: 12px; }
.mute-opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sess .mute { font-size: 11px; opacity: .8; }
dialog:has(.search) { width: min(760px, calc(100vw - 24px)); }
.search-bar { display: flex; gap: 8px; }
.search-bar input { flex: 1; min-width: 0; }
.search-list { max-height: 60dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.search-list > p { padding: 10px; margin: 0; }
.hit { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.hit:hover { background: var(--panel-2); }
.hit-h { font-size: 13px; margin-bottom: 3px; }
.hit-h .dim { font-size: 12px; }
.hit-end { margin-left: 6px; font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.hit-s { font-size: 13px; line-height: 1.5; opacity: .9; word-break: break-word; }
.hit-s mark { background: color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sub-h { font-size: 14px; margin: 10px 0 0; }
.pk-list { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.pk { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.pk:last-child { border-bottom: 0; }
.pk input.pk-name { background: transparent; border: 1px solid transparent; color: var(--text); font: inherit; font-weight: 600; padding: 2px 4px; border-radius: 6px; width: min(260px, 100%); }
.pk input.pk-name:hover, .pk input.pk-name:focus { border-color: var(--line); background: var(--panel); }
.pk .pk-meta { grid-column: 1; font-size: 12px; color: var(--dim); }
.pk .pk-ops { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.role { font-size: 11px; border-radius: 10px; padding: 0 7px; margin-left: 6px; border: 1px solid var(--line); color: var(--dim); }
.role.admin { color: var(--ok); border-color: var(--ok); }
.role.guest { color: var(--warn); border-color: var(--warn); }
.en-kind { display: flex; flex-direction: column; gap: 6px; }
.en-sess { max-height: 34dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.en-sess .en-host { font-size: 12px; color: var(--dim); margin-top: 6px; }
.en-links { display: flex; flex-direction: column; gap: 8px; }
.en-link { display: flex; gap: 8px; align-items: center; }
.en-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; }
.warn-note { color: var(--warn); font-size: 13px; margin: 0; }
/* 제한 사용자 (사용자 결정 2026-10-21) — 관리 단추를 숨긴다. 판정은 서버가 한다 */
body.guest #btn-new, body.guest #btn-hosts, body.guest #btn-hosts2, body.guest #btn-status, body.guest .admin-only, body.guest .keys [data-k=snips] { display: none !important; }
body.readonly .keys, body.readonly #btn-image, body.readonly .ask-opts { display: none !important; }
.who-badge { font-size: 11px; color: var(--warn); border: 1px solid var(--warn); border-radius: 10px; padding: 0 7px; margin-left: 6px; }
.tpl { display: inline-flex; align-items: center; }
.tpl .tpl-x { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; padding: 0 4px; }
.tpl .tpl-x:hover { color: var(--bad); }
dialog:has(.events) { width: min(900px, calc(100vw - 24px)); }
.ev-list { max-height: 62dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; }
.ev-list > p { padding: 10px; margin: 0; }
.ev { display: grid; grid-template-columns: 9.5em 10em 1fr; gap: 10px; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.ev-t { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-x { word-break: break-word; }
.ev.guest .ev-w { color: var(--warn); }
.ev.bad .ev-x { color: var(--bad); }
@media (max-width: 560px) { .ev { grid-template-columns: 1fr 1fr; } .ev-x { grid-column: 1 / -1; } }
.sess .memo { grid-column: 1 / -1; font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#note-in, #cast-in { width: 100%; box-sizing: border-box; }
.cast-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.cast-row .cast-res { font-size: 12px; }
.cast-row .cast-res.ok { color: var(--ok); }
.cast-row .cast-res.bad { color: var(--warn); }
.olds { max-height: 55dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.olds .old { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.olds .old:last-child { border-bottom: 0; }
.olds .old > div { flex: 1; min-width: 0; }
.olds .old .p, .olds .old .last { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olds .old .p { color: var(--dim); direction: rtl; text-align: left; }
.olds .old .last { opacity: .75; }
.olds > p { padding: 10px; margin: 0; }
.push-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#push-state { margin: 4px 0 0; }
/* 대화 기록의 경로 (M3) */
.turn a.path { color: var(--accent); text-decoration: underline; word-break: break-all; }
/* 폰 미리보기 (M4) */
.peek.touch { width: calc(100vw - 16px); max-height: 45dvh; overflow: hidden; }
/* 허락 질문 (M1) */
.badge.ask { cursor: pointer; }
.ask-body { margin: 0; max-height: 40dvh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font: 12px/1.45 "D2Coding", ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.ask-q { margin: 0; font-weight: 600; }
.ask-opts { display: flex; flex-direction: column; gap: 6px; }
.ask-opts .btn { text-align: left; }
/* 대화 기록을 채팅처럼 (O2) */
.md { font-size: 14px; line-height: 1.55; word-break: break-word; user-select: text; -webkit-user-select: text; }
.md p { margin: 0 0 6px; }
.md .h { font-weight: 700; margin: 8px 0 4px; } .md .h1, .md .h2 { font-size: 15px; }
.md ul, .md ol { margin: 2px 0 6px; padding-left: 20px; } .md li.sub { margin-left: 16px; }
.md code { font: 12.5px ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.md pre.code { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow: auto; margin: 4px 0 8px; }
.md pre.code code { border: 0; padding: 0; background: none; white-space: pre; }
.md pre.code .copy { position: absolute; top: 4px; right: 4px; font-size: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.md .tbl { overflow: auto; margin: 4px 0 8px; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--bg); }
.md blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--dim); }
.md a, .turn .say a { color: var(--accent); }
details.turn.tools { align-self: flex-start; font-size: 12px; color: var(--dim); padding: 2px 10px; }
details.turn.tools summary { cursor: pointer; }
details.turn.tools ul { margin: 4px 0; padding-left: 18px; font-family: ui-monospace, Menlo, monospace; }
/* 대화창에서 바로 지시 (O1) */
.talk-say { display: flex; gap: 8px; align-items: flex-end; }
.talk-say textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 30dvh; }
.talk-to { font-size: 12px; font-weight: 600; color: var(--accent); }
/* 파일 보기 (O3) */
dialog:has(.files) { width: min(1100px, calc(100vw - 16px)); }
.dlg.files { height: min(86dvh, 900px); }
.file-crumb { display: flex; flex-wrap: wrap; gap: 4px; }
.file-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 32%) 1fr; gap: 8px; }
@media (max-width: 760px) { .file-wrap { grid-template-columns: 1fr; grid-template-rows: 35% 1fr; } }
.file-list { list-style: none; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.file-list li { padding: 6px 10px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--line); }
.file-list li:hover { background: var(--panel-2); } .file-list li.up { color: var(--dim); }
.file-view { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 8px 10px; min-height: 0; }
.file-view .file-name { font-size: 12px; color: var(--dim); margin-bottom: 6px; word-break: break-all; }
.file-view img { max-width: 100%; }
.file-view iframe { width: 100%; height: calc(100% - 24px); border: 0; background: #fff; }
.file-text { margin: 0; font: 12.5px/1.5 "D2Coding", ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
/* 변경 사항 (O4) */
dialog:has(.wide-git) { width: min(1000px, calc(100vw - 16px)); }
.dlg.wide-git { max-height: 88dvh; }
.git-list { list-style: none; margin: 0; padding: 0; max-height: 30dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.git-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--text); }
.git-list li:hover, .git-list li.sel { background: var(--panel-2); }
.git-list .st { color: var(--dim); font-size: 12px; } .git-list .p { word-break: break-all; }
.git-list .add { color: var(--ok); } .git-list .del { color: var(--bad); }
.git-diff { margin: 0; flex: 1; min-height: 120px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre; }
.git-diff .a { color: var(--ok); background: rgba(63, 207, 142, .08); } .git-diff .d { color: var(--bad); background: rgba(240, 90, 90, .08); } .git-diff .h { color: var(--accent); }
/* 메뉴 한 글자 단축키 (O5) */
.menu button { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.menu button kbd { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.md .ref { text-decoration: underline dotted; }
.file-view .md { font-size: 14px; line-height: 1.6; }
.file-view .md .h1 { font-size: 20px; } .file-view .md .h2 { font-size: 17px; } .file-view .md .h3 { font-size: 15px; }