/* 노틸러스 브리핑룸 (NTLS) - 2_CommonStorage/1_Design/Starbucks.md 를 다크 모드로 옮긴 것.
 *
 * 문서의 원칙을 그대로 지킨다:
 *   · 녹색 4단 (Starbucks #006241 · Accent #00754A · House #1E3932 · Uplift #2b5148) 을 역할별로
 *     - Accent = 채운 버튼·활성 탭, House = 머리띠(feature band), Uplift = 장식·테두리
 *   · 금색(#cba258)은 의식(ceremony) 자리에만 - 여기서는 1~3위 배지 테두리에만 쓴다
 *   · 버튼은 전부 50px 알약, 눌림은 scale(.95)
 *   · 카드 12px, 그림자는 저알파 2~3겹 (다크라 거의 안 보이니 얇은 선을 같이)
 *   · 위계는 크기보다 굵기·색, 자간 -0.01em
 *   · 그라데이션 없음, 색면 블록으로 깊이
 * 다크 바탕은 순흑 대신 에스프레소빛 녹흑(#0e1311) - 문서의 "순백 대신 크림" 을 어둡게 뒤집은 것.
 * 글꼴: SoDoSans 는 독점 서체라 문서 권고대로 대체 - 한글이 있어야 하므로 Pretendard(SIL OFL).
 */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920; font-style: normal; font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  color-scheme: dark;
  --canvas: #0e1311;
  --canvas-2: #111815;
  --surface: #161f1b;
  --surface-2: #1c2722;
  --surface-3: #23312b;
  --house: #1E3932;
  --uplift: #2b5148;
  --sbux: #006241;
  --accent: #00754A;
  --accent-hover: #00865a;
  --accent-text: #3fc28c;   /* 어두운 바탕에서 읽히는 녹색 글자 (Accent 를 밝힌 것) */
  --mint: #d4e9e2;
  --gold: #cba258;
  --text: rgba(255, 255, 255, .90);
  --text-2: rgba(255, 255, 255, .70);
  --text-3: rgba(255, 255, 255, .50);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --up: #ff5c5c;            /* 한국식: 상승 빨강 */
  --down: #4e8eff;          /* 하락 파랑 */
  --red: #e5484d;
  --party-ppp: #e61e2b;
  --party-dpk: #3d63db;     /* 민주당 #152484 는 어두운 바탕에서 안 보여 밝혔다 */
  --party-rebuild: #2a93e8;
  --party-reform: #ff7a1a;
  --r: 12px;
  --pill: 50px;
  --shadow-card: 0 0 .5px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 2px rgba(0, 0, 0, .2), 0 0 2px rgba(0, 0, 0, .3);
  --shadow-float: 0 0 6px rgba(0, 0, 0, .4), 0 8px 12px rgba(0, 0, 0, .3);
  --ease: cubic-bezier(.25, .46, .45, .94);
  --nav-h: 64px;
  --gutter: 16px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 768px) { :root { --nav-h: 72px; --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; }
/* 스크롤바를 늘 세워 둔다 - 탭을 옮기는 순간 본문이 잠깐 짧아져 스크롤바가 사라졌다 생기면 화면 폭이
   17px 출렁이고 헤더·본문이 '틱' 하고 밀린다 (10-06 프레임 측정: 1423↔1440). gutter 만으로는 안 막혔다 */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; background: var(--canvas); }
/* 스크롤바 (10-07 대표님 "모든 스크롤 좀 세련되게, 다크모드로 안 보이게") - 평소엔 안 보이고 바탕도 화면색이다.
   굴리는 동안(app.js 가 .sb-on 을 붙였다 0.9초 뒤 뗀다) · 그 칸에 마우스를 올렸을 때만 가는 막대가 흐리게 뜨고,
   막대를 잡으러 가면 굵고 밝아진다. 크롬은 scrollbar-color 를 주면 ::-webkit-scrollbar 를 무시하므로 파이어폭스에만 표준 속성을 쓴다 */
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; min-height: 36px; }
body *:hover::-webkit-scrollbar-thumb, .sb-on::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .16); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); border-width: 2px; }
::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, .46); border-width: 2px; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  body *:hover, .sb-on { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.5; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(0, 117, 74, .55); }

/* ── 버튼: 전부 알약 + scale(.95) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--pill); padding: 7px 16px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  background: transparent;
}
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { border-color: var(--accent-text); color: var(--accent-text); }
.btn-outline:hover:not(:disabled) { background: rgba(63, 194, 140, .08); }
.btn-ghost { border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); }
.btn-inverse { background: #fff; border-color: #fff; color: var(--accent); }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ── 상단 내비: 화면 맨 위에 고정. 본문은 내비 높이만큼 내려 둔다 (모바일은 두 줄이라 실제 높이를 JS 가 --nav-real 로 잰다) ── */
body.app { padding-top: var(--nav-real, var(--nav-h)); }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h);
  background: rgba(14, 19, 17, .92); backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: var(--shadow-nav); border-bottom: 1px solid var(--line);
}
.nav__in { height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* 로고: 원형 녹색 배지(Green Accent) + 흰 마이크 - '브리핑룸'. 이름은 노틸러스(흰색 800) + 브리핑룸(녹색 700) - 10-13 서비스 이름 '노틸러스 브리핑룸' */
.logo { width: 36px; height: 36px; display: block; flex: 0 0 auto; }
.brand__name { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent-text); white-space: nowrap; }
.brand__name b { font-weight: 800; color: #fff; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: 0;
}

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--pill); font-weight: 600; font-size: 15px; color: var(--text-2);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
/* 헤더는 움직이지 않는다 - 버튼 눌림(scale .95)을 탭·로그아웃에는 주지 않는다 (대표님 "틱틱 거림" 지적) */
.nav .btn:active { transform: none; }
.tab.on { background: var(--accent); color: #fff; }
.nav__right { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 720px) {
  .nav { height: auto; }
  .nav__in { flex-wrap: wrap; gap: 6px 10px; padding-top: 10px; padding-bottom: 8px; }
  .logo { width: 32px; height: 32px; }
  .brand__name { font-size: 17px; }
  .tabs { order: 3; flex-basis: 100%; }
  .tabs { gap: 1px; }
  .tab { padding: 7px 7px; font-size: 13.5px; } /* 휴대폰은 아래 720px 규칙이 7칸 두 줄 격자로 놓는다 */
  .nav__right { margin-left: auto; }
}

/* ── 페이지 틀 ── */
.page { max-width: 1440px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; }
.page-head .sub { margin: 4px 0 0; color: var(--text-3); font-size: 14px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--accent-text); text-transform: uppercase; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card);
}
.band {
  background: var(--house); border-radius: var(--r); padding: 24px; color: #fff; position: relative; overflow: hidden;
}
.band .sub { color: rgba(255, 255, 255, .72); }
.muted { color: var(--text-3); }
.empty { padding: 48px 20px; text-align: center; color: var(--text-3); }
.empty b { display: block; color: var(--text-2); font-size: 16px; margin-bottom: 6px; }
.err { color: #ffb4b4; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--pill);
  font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap;
}
.badge.ok { border-color: rgba(63, 194, 140, .45); color: var(--accent-text); }
.badge.warn { border-color: rgba(203, 162, 88, .5); color: var(--gold); }
.badge.bad { border-color: rgba(229, 72, 77, .5); color: #ff9a9d; }
.spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-text);
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-3); }

/* 칩 (날짜·정렬) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; transition: all .2s ease;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--mint); border-color: var(--mint); color: var(--house); }

/* ══════════════ 1. 브리핑 ══════════════ */
.brief { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.brief-side { position: sticky; top: calc(var(--nav-real, var(--nav-h)) + 16px); max-height: calc(100vh - var(--nav-real, var(--nav-h)) - 32px); overflow: auto; padding: 16px 10px 16px 16px; }
.brief-side h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; }
.bs-day { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.bs-day:first-of-type { margin-top: 0; }
.bs-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; color: var(--text-2); transition: background .15s ease;
}
.bs-slot:hover { background: var(--surface-2); color: var(--text); }
.bs-slot.on { background: var(--house); color: #fff; }
.bs-slot .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-slot .s { font-size: 12px; color: var(--text-3); }
.bs-slot.on .s { color: rgba(255, 255, 255, .7); }
.bs-slot .k { margin-left: 3px; padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--gold); background: rgba(203, 162, 88, .14); }
.bs-slot.on .k { color: #fff; background: rgba(255, 255, 255, .18); }
.bs-slot .k.news { color: var(--accent-text); background: rgba(63, 194, 140, .14); }
.bs-slot .k.urgent { color: #ff9a9d; background: rgba(229, 72, 77, .16); }
.bs-slot.on .k.news, .bs-slot.on .k.urgent { color: #fff; background: rgba(255, 255, 255, .18); }
.bs-urgent { width: 100%; margin-bottom: 14px; background: #c8363b; border-color: #c8363b; color: #fff; }
.bs-urgent:hover:not(:disabled) { background: #d94449; border-color: #d94449; }
.brief-band { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.brief-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brief-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.brief-actions .btn { padding: 6px 12px; font-size: 13px; }
/* 버튼 쌍 [A4 요약 | PDF] - 왼쪽 = 이미지 보기, 오른쪽 = 내려받기 */
.btn-pair { display: inline-flex; }
.btn-pair > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 10px; }
.btn-pair > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 9px; border-left-color: rgba(0, 117, 74, .28); }
.modal__note { color: rgba(255, 255, 255, .8); font-size: 14px; padding: 40px 0; display: flex; align-items: center; gap: 10px; }
.brief-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brief-tts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.brief-tts audio { height: 36px; width: min(520px, 100%); }
.brief-tts.err { color: #ffb4b4; }
.brief-band h1 { margin: 6px 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.brief-band .eyebrow { color: rgba(255, 255, 255, .7); }
.brief-band .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brief-band .badge { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
.brief-band .badge.ok { border-color: rgba(212, 233, 226, .6); color: var(--mint); }
.brief-list { display: grid; gap: 10px; }
.bi { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 20px; }
.bi-rank {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--surface-3); color: var(--mint); font-variant-numeric: tabular-nums;
}
.bi-rank.top { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px rgba(203, 162, 88, .7); }
.bi h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.45; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; } /* 단어 중간에서 안 끊기게 */
.bi h3 a:hover { color: var(--accent-text); }
.bi .meta { font-size: 13px; color: var(--text-3); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.bi .meta .dot::before { content: "·"; }
.bi p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.75; }
.bi p.none { color: var(--text-3); font-style: italic; }
/* 개별 [복사 | 텔레] - 카드 오른쪽 위 모서리에 매단다: 묶음의 윗선이 카드 윗선과 한 줄로 겹치고 아래 모서리만 둥글다
   (대표님 10-06: 아래에 두면 카드가 길어진다 → 테두리에 걸치되 선이 겹치게). margin-top = -(카드 padding 18 + 테두리 1) */
/* 윗선·오른쪽 선 둘 다 카드 선과 겹친다: margin = -(padding + 테두리 1). 오른쪽 위 모서리는 카드와 같은 곡률, 왼쪽 아래만 둥글게 */
.bi-acts { float: right; display: flex; margin: -19px -21px 8px 14px; border: 1px solid var(--line-2); border-radius: 0 var(--r) 0 10px; overflow: hidden; background: var(--surface); }
.bi-acts .btn { border: 0; border-radius: 0; background: transparent; color: var(--text-2); padding: 4px 12px 5px; font-size: 12px; transform: none; }
.bi-acts .btn + .btn { border-left: 1px solid var(--line-2); }
.bi-acts .btn:hover { background: var(--surface-2); color: var(--text); }
.bi-acts .tele-btn.arm { background: #d62b2f; color: #fff; }
.bi-acts .tele-btn.sent { color: var(--accent-text); }
@media (max-width: 960px) { .bi-acts { margin-top: -15px; margin-right: -15px; } } /* 좁은 화면 카드 padding 14 + 테두리 1 (아래 960px 규칙과 짝) */
/* 휴대폰: 버튼이 넷이라 제목 첫 줄이 한 단어만 남는다 - 제목은 버튼 아래에서 시작 */
@media (max-width: 640px) { .bi-acts { margin-bottom: 4px; } .bi h3 { clear: right; } }
@media (max-width: 960px) {
  .brief { grid-template-columns: 1fr; }
  .bi { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px 14px; }
  .bi-rank { width: 30px; height: 30px; font-size: 13px; }
  .bi h3 { font-size: 16px; }
  .bi p { font-size: 14.5px; }
  .brief-band h1 { font-size: 22px; }
}

/* A4 보기 */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .78); display: flex; flex-direction: column; }
.modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); color: #fff; }
.modal__body { flex: 1 1 auto; overflow: auto; padding: 0 var(--gutter) 32px; display: grid; gap: 16px; justify-items: center; }
.modal__body img { width: min(820px, 100%); height: auto; border-radius: 4px; box-shadow: var(--shadow-float); background: #fff; }

/* ══════════════ 2. 여조 ══════════════ */
.poll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .poll-grid { grid-template-columns: 1fr; } }
.pp { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.pp-head .meta { font-size: 12.5px; color: var(--text-3); }
.pp-sub { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.bar-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 13.5px; }
.bar-row .lbl { color: var(--text-2); }
.track { height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.fill { height: 100%; border-radius: 6px; }
.fill.pos { background: var(--accent-text); }
.fill.neg { background: var(--red); }
.bar-row .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dl { font-size: 12px; font-weight: 600; margin-left: 4px; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.parties li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.parties .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.parties .nm { color: var(--text-2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parties .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.trend svg { width: 100%; height: auto; display: block; }
.trend .lg { display: flex; gap: 12px; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.trend .lg i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.pp-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); line-height: 1.6; }
.pp-foot a { color: var(--accent-text); }

/* ══════════════ 3. 지표 ══════════════ */
.ind-group { margin-bottom: 28px; }
.ind-group h2 { margin: 0 0 10px; font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.ind-group h2 small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .ind-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.q { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 128px; }
.q .nm { font-size: 13.5px; color: var(--text-2); font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.q .val { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.3; }
.q .val small { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.q .chg { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.q .at { font-size: 11.5px; color: var(--text-3); margin-top: auto; }
.q svg { width: 100%; height: 30px; display: block; margin-top: 4px; }
.q.stale .val { color: var(--text-2); }
@media (max-width: 480px) { .q { padding: 12px; min-height: 112px; } .q .val { font-size: 19px; } }

/* ══════════════ 4. 뉴스 ══════════════ */
.news-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.news-tools .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/* 정렬 · 날짜 · 검색을 한 줄로 (대표님 10-06). 좁으면 접힌다 */
.news-tools.one { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.news-tools.one .search { margin-left: auto; }
.news-tools.one .search input { width: 200px; }
.tools-sep { width: 1px; height: 22px; background: var(--line-2); }
@media (max-width: 720px) { .tools-sep { display: none; } .news-tools.one .search { margin-left: 0; flex: 1 1 100%; } .news-tools.one .search input { flex: 1 1 auto; width: auto; } }
.search { display: flex; gap: 6px; align-items: center; }
.search input {
  width: min(280px, 60vw); padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--line-2);
  background: var(--surface); outline: none; font-size: 14px;
}
.search input:focus { border-color: var(--accent-text); }
.news-list { list-style: none; margin: 0; padding: 0; }
.nr {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.nr:hover { background: var(--canvas-2); }
.nr-rank { font-weight: 800; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.nr-rank.top { color: var(--gold); }
.nr-meta { font-size: 12.5px; color: var(--text-3); display: flex; gap: 6px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; }
.nr-meta .press { color: var(--text-2); font-weight: 600; }
.nr-meta .sec { padding: 0 7px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); font-size: 11.5px; }
.nr-title { font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.nr-title:hover { color: var(--accent-text); }
/* 숫자 칸은 가운데 정렬 - 퍼센트와 그 아래 원데이터가 한 축에, 한 줄 칸(댓글·성별)은 두 줄 칸의 가운데 높이에 (대표님 10-06) */
.nr-stats { display: grid; grid-template-columns: 82px 124px 112px 78px 86px; gap: 4px; align-items: center; font-size: 12.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.nr-stats b { color: var(--text-2); font-weight: 700; }
.nr-stats small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; letter-spacing: -0.01em; }
.nr-stats .cmt b { color: var(--text); }
.nr-stats .pos b { color: var(--accent-text); }
.nr-stats .neg b { color: #ff9a9d; }
.nr-stats .m { color: #7fb2ff; } .nr-stats .f { color: #ff9bc8; }
.sum-btn { padding: 4px 12px; font-size: 12.5px; }
/* 행 끝 [요약 / 텔레] - 위아래로 (대표님 10-06: '텔레' 는 요약 아래) */
.row-acts { display: flex; flex-direction: column; gap: 5px; align-items: stretch; width: 78px; } /* '보내기?' 로 바뀌어도 칸이 안 밀리게 */
.row-acts .btn { padding: 4px 12px; font-size: 12.5px; }
.tele-btn.arm { background: #d62b2f; border-color: #d62b2f; color: #fff; }
.tele-btn.sent { border-color: var(--accent-text); color: var(--accent-text); }
.sum-acts { display: inline-flex; gap: 6px; }
@media (max-width: 900px) {
  .nr { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 6px; }
  .nr-stats { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .nr .row-acts { grid-column: 3; grid-row: 1 / 3; align-self: start; }
}
.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.pager .chip { min-width: 38px; text-align: center; }
.pager .gap { color: var(--text-3); padding: 6px 2px; }

/* ══════════════ 5. AI ══════════════ */
body.ai-mode { overflow: hidden; }
.ai { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: calc(100dvh - var(--nav-real, var(--nav-h))); }
.ai-side { background: var(--canvas-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ai-side__top { padding: 14px; display: flex; gap: 8px; }
.ai-side__top .btn { flex: 1 1 auto; }
.ai-convs { flex: 1 1 auto; overflow: auto; padding: 0 8px 12px; }
.ai-convs h4 { margin: 14px 10px 4px; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.cv {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px;
  font-size: 14px; color: var(--text-2); cursor: pointer;
}
.cv:hover { background: var(--surface-2); color: var(--text); }
.cv.on { background: var(--surface-3); color: #fff; }
.cv .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv .more {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--text-3);
  cursor: pointer; opacity: 0; display: grid; place-items: center;
}
.cv:hover .more, .cv.on .more, .cv .more:focus { opacity: 1; }
.cv .more:hover { background: var(--surface-3); color: var(--text); }
.cv input { flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--accent-text); border-radius: 6px; padding: 2px 6px; font-size: 14px; outline: none; }
.menu {
  position: fixed; z-index: 120; min-width: 150px; padding: 6px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-float);
}
.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 7px; font-size: 14px; cursor: pointer; }
.menu button:hover { background: var(--surface-3); }
.menu button.danger { color: #ff9a9d; }
.ai-usage { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.ai-usage .bar { height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 4px 0 8px; }
.ai-usage .bar i { display: block; height: 100%; background: var(--accent-text); }
.ai-usage .bar i.hi { background: var(--gold); }

.ai-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.ai-top { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ai-top .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ai-scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.ai-thread { max-width: 780px; margin: 0 auto; padding: 28px 20px 24px; display: flex; flex-direction: column; gap: 26px; }
.ai-hello { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
.ai-hello h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.ai-hello h1 .mark { display: inline-block; width: 40px; height: 40px; vertical-align: -8px; margin-right: 10px; }
.ai-hello h1 .mark .logo { width: 40px; height: 40px; }
.ai-hello .composer { width: min(720px, 100%); }
.msg-u { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg-u .msg-user { max-width: 100%; }
.msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.msg-imgs img { width: 168px; height: 168px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); display: block; background: var(--surface-2); }
.msg-user { align-self: flex-end; max-width: 85%; background: var(--surface-3); padding: 11px 16px; border-radius: 18px 18px 4px 18px; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.6; }
.msg-asst { align-self: stretch; }
.msg-asst .think { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas-2); }
.msg-asst .think summary {
  list-style: none; cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--text-2); display: flex; gap: 8px; align-items: center;
}
.msg-asst .think summary::-webkit-details-marker { display: none; }
.msg-asst .think summary::before { content: "›"; display: inline-block; transition: transform .2s ease; color: var(--text-3); }
.msg-asst .think[open] summary::before { transform: rotate(90deg); }
.msg-asst .think .tb { padding: 2px 14px 12px 26px; font-size: 13.5px; color: var(--text-3); white-space: pre-wrap; line-height: 1.65; }
/* 생각하는 중 - 마지막 다섯 줄만 보이고 위는 흐려진다. 안쪽 스크롤이 없어 대화 스크롤과 싸우지 않는다 (10-07) */
.msg-asst .think.live .tb { height: calc(1.65em * 5 + 14px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
.msg-asst .foot { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--text-3); font-size: 12px; min-height: 26px; }
.icon-btn { width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.msg-asst .error { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(229, 72, 77, .4); color: #ffb4b4; font-size: 14px; background: rgba(229, 72, 77, .07); }
.cursor::after { content: ""; display: inline-block; width: 8px; height: 16px; background: var(--accent-text); border-radius: 2px; vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 마크다운 */
.md { line-height: 1.75; font-size: 15.5px; word-break: keep-all; overflow-wrap: anywhere; }
.md th, .md td { overflow-wrap: normal; }   /* 표 칸에 anywhere 가 물리면 최소 폭이 한 글자로 줄어 다시 꺾인다 */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 12px; }
.md h1, .md h2, .md h3, .md h4 { margin: 20px 0 8px; line-height: 1.4; font-weight: 700; }
.md h1 { font-size: 21px; } .md h2 { font-size: 19px; } .md h3 { font-size: 17px; } .md h4 { font-size: 15.5px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 24px; }
.md li { margin: 3px 0; }
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.md blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--uplift); color: var(--text-2); }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: 2px 5px; border-radius: 5px; }
.md pre { position: relative; margin: 0 0 14px; background: #0a0e0c; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow: auto; }
.md pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.6; }
.md pre .copy { position: absolute; top: 6px; right: 6px; }
.md table { border-collapse: collapse; margin: 0 0 14px; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--line-2); padding: 6px 10px; text-align: left; font-size: 14px; }
.md th { background: var(--surface-2); }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0; }

/* 첨부 */
.att-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.att { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); }
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att.busy img { opacity: .4; }
.att .spin { position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -7px; }
.att.bad { border-color: var(--red); }
.att.bad img { opacity: .35; }
.att .x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(0, 0, 0, .72); color: #fff; display: grid; place-items: center; cursor: pointer; }
.att .x svg { width: 12px; height: 12px; }
.att-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text-2); flex: 0 0 auto; }
.drop-overlay { position: absolute; inset: 10px; z-index: 30; border: 2px dashed var(--accent-text); border-radius: 18px;
  background: rgba(14, 19, 17, .88); display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--accent-text); pointer-events: none; }
/* 첨부 문서 칩 (10-09 대표님 "모든 AI 대화창에 첨부파일") - 그림 칸과 같은 높이 한 줄: 종류 표 · 이름 · 크기와 상태(올리는 중 · 글 N자 · 못 꺼냄 · 실패) */
.att.doc { width: 224px; max-width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 34px 0 10px; }
.att-ic { flex: 0 0 auto; width: 36px; height: 42px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--text-2); background: var(--surface-3); }
.att-ic.k-pdf { color: #ff9f7a; background: rgba(255, 120, 90, .15); }
.att-ic.k-docx { color: #8fb6ff; background: rgba(100, 150, 255, .15); }
.att-ic.k-xlsx { color: var(--accent-text); background: rgba(63, 194, 140, .15); }
.att-ic.k-pptx { color: #ffb27a; background: rgba(255, 160, 80, .15); }
.att-ic.k-hwpx, .att-ic.k-hwp { color: #7fd3f0; background: rgba(80, 190, 230, .15); }
.att-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.att-tx b { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tx small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tx .bad { color: #ff8a8f; }
.att-tx .warn { color: var(--gold); }
.att.doc .spin { position: static; width: 10px; height: 10px; margin: 0; vertical-align: -1px; }
.att.doc.busy .att-ic { opacity: .5; }
.att.doc .x { top: 50%; right: 8px; transform: translateY(-50%); background: var(--surface-3); color: var(--text-2); }
.att.doc .x:hover { color: var(--text); }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 100%; }
.msg-files .att.doc { padding-right: 12px; color: inherit; text-decoration: none; cursor: pointer; }
.msg-files .att.doc:hover { border-color: var(--text-3); }
/* 칩이 많으면 칩 줄 안에서 굴린다 - 문서 칩이 쌓여 입력칸 · 보내기가 화면 밖으로 밀렸다 (10-09 반증: 휴대폰 8개 · 1280x720 오른쪽 대화 7개부터).
   세 줄 남짓 보이고 넷째 줄 머리가 살짝 보여 더 있는 줄 안다. 칩을 누르면 안내 전체 (chatkit.js) */
.att-row { max-height: 228px; overflow-y: auto; overscroll-behavior: contain; }
.att-row .att[data-note] { cursor: pointer; }
/* 안내(toast)는 눌림을 받지 않는다 - 휴대폰에서 입력창 위로 떠 4초 동안 보내기 · 모델 고르기를 가로챘다 (10-09 반증). 단추가 든 드라이브 안내는 빼고 */
.toast:not(.gw-toast) { pointer-events: none; }
/* 오른쪽 대화창 - 대화 칸 전체가 끌어 놓기를 받는다 (놓기 안내 막) */
.cp { position: relative; }
.cp > .drop-overlay { inset: 8px; padding: 0 16px; font-size: 15px; text-align: center; line-height: 1.5; }

/* 입력창 */
.composer-wrap { padding: 0 20px 18px; }
.composer {
  max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px;
  box-shadow: var(--shadow-card); padding: 12px 12px 10px 16px; transition: border-color .2s ease;
}
.composer:focus-within { border-color: rgba(63, 194, 140, .5); }
.composer textarea {
  width: 100%; resize: none; border: 0; outline: none; background: transparent; font-size: 15.5px; line-height: 1.6;
  max-height: 40vh; min-height: 26px; padding: 2px 0;
}
.composer textarea::placeholder { color: var(--text-3); }
.composer .ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer .grow { flex: 1 1 auto; }
.select {
  appearance: none; padding: 6px 30px 6px 13px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--surface-2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-2);
}
.select:hover { color: var(--text); }
/* Thinking 단계 토글 (10-09 대표님 "이미지와 같이 토글타입으로") - 어두운 작은 알약 · 단계마다 회색 점 · 지금 단계에 흰 손잡이.
   값은 숨긴 select 가 쥔다 (chatkit.js effortSlider). --eff-css 는 화면이 이 규칙이 있는 판인지 확인하는 표시 (열어 둔 옛 탭은 select 그대로)
   보이는 크기는 작게, 누르는 자리는 안쪽 여백만큼 넓게 (여백을 음수 바깥 여백으로 되돌려 줄 높이는 그대로) */
.eff { --eff-css: 1; position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 7px 5px; margin: -7px -5px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.eff[hidden] { display: none; }
.eff-t { --pad: 8px; --t: 0; position: relative; display: block; width: 60px; height: 18px; border-radius: var(--pill); background: var(--canvas); border: 1px solid var(--line-2); outline: none; transition: border-color .2s ease; }
.eff:hover .eff-t { border-color: rgba(255, 255, 255, .26); }
.eff-t:focus-visible { box-shadow: 0 0 0 2px rgba(63, 194, 140, .55); }
.eff-dots { position: absolute; inset: 0; }
.eff-dots i { position: absolute; top: 50%; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--t)); width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, .34); transition: opacity .16s ease; }
.eff-dots i.on { opacity: 0; }
.eff-h { position: absolute; top: 50%; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--t)); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: left .16s var(--ease); }
.eff-tip { position: absolute; z-index: 20; bottom: calc(100% + 9px); left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--t)); transform: translateX(-50%); padding: 4px 9px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow-float); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; transition: left .16s var(--ease); }
.eff-tip[hidden] { display: none; }
.eff.off { cursor: default; }
.eff.off .eff-t { opacity: .45; }
/* 손가락 - 누르는 자리는 늘 넓게, 보이는 토글은 휴대폰 격자(520px 이하)에서만 크게.
   넓은 손가락 화면(태블릿)까지 92px 로 키우니 제작 대화의 좁은 입력창에서 모델 이름이 'O…' 로 줄었다 (10-09 반증) */
@media (pointer: coarse) {
  .eff { padding: 10px 8px; margin: -10px -8px; }
}
@media (pointer: coarse) and (max-width: 520px) {
  .eff-t { --pad: 10px; width: 92px; height: 22px; }
  .eff-h { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .eff-dots i { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
}
/* 고대비(윈도우 forced-colors) - 배경색이 지워져 손잡이 · 점이 사라지고 빈 알약만 남았다 (10-09 반증). 시스템 색으로 그린다 */
@media (forced-colors: active) {
  .eff-t { border-color: CanvasText; }
  .eff-h, .eff-dots i { forced-color-adjust: none; }
  .eff-h { background: Highlight; box-shadow: none; }
  .eff-dots i { background: GrayText; }
  .eff.off .eff-h { background: GrayText; }
  .eff-t:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}
.toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; background: transparent; transition: all .2s ease;
}
.toggle:active { transform: scale(.95); }
.toggle .sw { width: 26px; height: 15px; border-radius: 10px; background: var(--surface-3); position: relative; transition: background .2s ease; }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); transition: all .2s ease; }
.toggle.on { border-color: rgba(63, 194, 140, .55); color: var(--accent-text); }
.toggle.on .sw { background: var(--accent); }
.toggle.on .sw::after { left: 13px; background: #fff; }
.send {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform .2s ease, background .2s ease;
}
.send:hover { background: var(--accent-hover); }
.send:active { transform: scale(.95); }
.send:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: none; cursor: default; }
.send.stop { background: var(--text); color: var(--canvas); }
.hint { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
.ai-backdrop { display: none; }
@media (max-width: 520px) { .composer .ctl { gap: 6px; } .composer .select { padding: 6px 26px 6px 10px; font-size: 12.5px; background-position: right 9px center; } }
@media (max-width: 860px) {
  .ai { grid-template-columns: 1fr; }
  .ai-side { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .25s var(--ease); }
  .ai.side-open .ai-side { transform: none; }
  .ai.side-open .ai-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
  .ai-top { display: flex; }
  .ai-thread { padding: 18px 14px 18px; }
  .composer-wrap { padding: 0 10px 10px; }
  .msg-user { max-width: 92%; }
  .ai-hello h1 { font-size: 24px; }
  .composer-wrap .hint { display: none; }
}

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; background: var(--surface-3); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: var(--pill); font-size: 14px; box-shadow: var(--shadow-float); }

/* 로그인 */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login .box { width: min(400px, 100%); padding: 32px 28px; }
.login h1 { margin: 16px 0 4px; font-size: 22px; }
.login p { margin: 0 0 20px; color: var(--text-3); font-size: 14px; }
.login input { width: 100%; padding: 12px 16px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; margin-bottom: 12px; }
.login input:focus { border-color: var(--accent-text); }
.login .btn { width: 100%; padding: 11px 16px; font-size: 15px; }
.login .err { min-height: 20px; font-size: 13px; margin-top: 10px; }

/* ══════════════ 요약 ══════════════ */
.sum-wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 16px; }
.sum-input { display: flex; gap: 8px; }
.sum-input input {
  flex: 1 1 auto; min-width: 0; padding: 11px 18px; border-radius: var(--pill); border: 1px solid var(--line-2);
  background: var(--surface); outline: none; font-size: 15px;
}
.sum-input input:focus { border-color: var(--accent-text); }
.sum-input .btn { padding: 10px 22px; font-size: 15px; }
.sum-hello { padding: 28px 8px; text-align: center; line-height: 1.8; color: var(--text-2); }
.sum-hello b { color: var(--text); }
.kb { display: inline-block; padding: 1px 8px; border-radius: var(--pill); font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.kb.youtube { background: rgba(255, 60, 60, .14); color: #ff8b8b; }
.kb.article { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.cv.sumi { gap: 8px; }
.sum-card { padding: 22px 24px; }
.sum-head { display: flex; gap: 18px; align-items: flex-start; }
.sum-thumb { flex: 0 0 200px; }
.sum-thumb img { width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); }
.sum-hd { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.sum-hd .kb { align-self: flex-start; }
.sum-hd h2 { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 700; }
.lnk { color: var(--accent-text); }
.sum-tabs { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sum-tabs .chip { display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.chip .dot.ok { background: var(--accent-text); }
.chip .dot.bad { background: var(--red); }
.chip.on .dot.ok { background: var(--sbux); }
.sum-content { font-size: 15.5px; line-height: 1.8; }
.sum-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.sum-lead { margin: 0 0 12px; color: var(--text); }
.sum-content h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.sum-content ul { margin: 0; padding-left: 22px; color: var(--text-2); }
.sum-content li { margin: 4px 0; }
.sum-raw { white-space: pre-wrap; color: var(--text-2); }
.sum-meta { font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.script p { margin: 0 0 12px; color: var(--text-2); }
.script .tc { display: inline-block; min-width: 52px; margin-right: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.sum-err { padding: 16px 18px; border-radius: var(--r); border: 1px solid rgba(229, 72, 77, .4); background: rgba(229, 72, 77, .06); color: #ffb4b4; }
.sum-err p { margin: 6px 0 12px; color: var(--text-2); }
.sum-foot { font-size: 12px; margin-top: 16px; }
@media (max-width: 640px) {
  .sum-wrap { padding: 14px 12px 32px; }
  .sum-card { padding: 16px; }
  .sum-head { flex-direction: row; gap: 12px; }     /* 썸네일 330x186 이 본문을 첫 화면 밖으로 밀던 것 (10-08) */
  .sum-thumb { flex: 0 0 104px; }
  .sum-thumb img { width: 104px; border-radius: 8px; }
  .sum-hd h2 { font-size: 17px; }
  .sum-input .btn { padding: 10px 16px; }
}

/* ══════════════ 유튭 ══════════════ */
/* 입력창은 제목 줄 오른쪽 (대표님 10-06). 좁으면 제목 아래로 내려간다 */
.yt-headrow { align-items: center; }
.yt-input { flex: 0 1 460px; min-width: 0; }
.yt-input input { padding: 9px 16px; font-size: 14px; }
.yt-input .btn { padding: 8px 18px; font-size: 14px; }
.yt-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.yt-filter { min-width: 220px; max-width: 100%; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.yt-bar .btn.on { border-color: var(--accent-text); color: var(--accent-text); }
.yt-info { font-size: 13px; }
.yt-tabs { margin-left: auto; }
.yr-ch { color: var(--accent-text); font-weight: 600; }
.yt-manage { margin-top: 10px; padding: 6px 14px; }
.ytm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ytm-row:last-child { border-bottom: 0; }
.ytm-row img, .ytm-ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-3); }
.ytm-main { flex: 1 1 auto; min-width: 0; }
.ytm-main a { font-weight: 600; }
.ytm-main .muted { font-size: 12.5px; }
@media (max-width: 720px) { .yt-input { flex-basis: 100%; } .yt-filter { flex: 1 1 100%; } .yt-tabs { margin-left: 0; } }
.yt-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.yt-head h2 { margin: 0; font-size: 18px; }
.yt-head h2 a:hover { color: var(--accent-text); }
.yt-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.yt-list { list-style: none; margin: 0; padding: 0; }
.yr { display: grid; grid-template-columns: 168px minmax(0, 1fr) 124px 72px 112px; /* 마지막 칸 = 버튼(78px) + 댓글과의 간격 */ gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.yr:last-child { border-bottom: 0; }
.yr:hover { background: var(--canvas-2); }
.yr-h { padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.yr-h:hover { background: transparent; }
.yr-h span:nth-child(3), .yr-h span:nth-child(4) { text-align: right; }
.yr-thumb { position: relative; display: block; }
.yr-thumb img { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.vb { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vb.live { background: #e5131c; }
.vb.up { background: var(--uplift); }
.vb.past { right: auto; left: 5px; background: rgba(30, 57, 50, .92); color: var(--mint); }
.new-b { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.yr-sec { list-style: none; padding: 12px 14px 6px; font-size: 13px; font-weight: 700; color: var(--accent-text); border-bottom: 1px solid var(--line); }
.yr-title { font-size: 15px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yr-title:hover { color: var(--accent-text); }
.yr-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.yr-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.yr-num small { display: none; }
.yr .row-acts { justify-self: end; }
@media (max-width: 760px) {
  .yr { grid-template-columns: 128px minmax(0, 1fr) auto; grid-template-areas: "t m b" "t n c"; gap: 4px 10px; padding: 10px 6px; }
  .yr-h { display: none; }
  .yr-thumb { grid-area: t; align-self: start; }
  .yr-thumb img { width: 128px; }
  .yr-main { grid-area: m; }
  .yr .row-acts { grid-area: b; align-self: start; }
  .yr-num { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
  .yr-v { grid-area: n; }
  .yr-c { grid-area: c; }
  .yr-num small { display: inline; color: var(--text-3); font-weight: 500; margin-right: 4px; }
}
/* 유튭 개편 (10-11) - 넣은 영상 목록: 좋아요 칸이 하나 늘었다 (영상 | 제목 | 조회·시청 | 좋아요 | 댓글 | 단추). 옛 .yr 규칙은 그대로 둔다 */
.yt-list.ytl .yr { grid-template-columns: 168px minmax(0, 1fr) 104px 72px 72px 112px; }
.ytl .yr-h span:nth-child(5) { text-align: right; }
.ytl .yr-sfx { white-space: nowrap; }   /* '시청 중' 은 한 덩어리로 줄을 바꾼다 (10-11 검증: 조회 칸 104px 에 '123,456명 시청 중' 이 안 들어가 '중' 만 다음 줄로 떨어졌다) */
.yt-got { white-space: nowrap; }
.yt-stale { color: var(--gold); }
.yt-rm { padding: 0 2px; border: 0; background: none; color: var(--text-3); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.yt-rm:hover { color: var(--red); }
.yt-warn { flex: 1 1 100%; font-size: 13px; color: var(--gold); }
.yt-cut { font-weight: 600; color: var(--text-3); }
/* 숫자 세 칸 묶음 (.yr-nums) - 데스크톱은 없는 셈이라 세 칸이 위 격자 칸에 그대로 든다.
   휴대폰은 한 줄에 흘리고 모자라면 다음 줄로 (10-11 검증: 세 칸을 한 줄 격자에 묶어 두니 조회 1,234,567 · 좋아요 23,456 이면 390px 에서 '댓글 4,56' 으로 잘리고 360px 에서는 숫자가 화면 밖이었다) */
.ytl .yr-nums { display: contents; }
@media (max-width: 760px) {
  .yt-list.ytl .yr { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: 't m' 't n' 'a a'; }
  .ytl .yr-nums { grid-area: n; display: flex; flex-wrap: wrap; gap: 2px 12px; }
}
@media (max-width: 720px) { .yt-warn { order: 5; } }
@media (pointer: coarse) { .yt-rm { display: inline-block; padding: 7px 6px; margin: -7px 0; } }

/* ══════════════ 제작 · 도구 · 선거 (작성과 같은 틀, 왼쪽 목록 1.5배) ══════════════ */
.ai.wide-side { grid-template-columns: 408px minmax(0, 1fr); }
.ws-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ws-body > .ai-scroll { flex: 1 1 auto; }
.cp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cp-hello { max-width: 780px; margin: 0 auto; padding: 48px 20px 8px; }
.ws-hello h2 { margin: 6px 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.ws-hello p { margin: 0 0 8px; line-height: 1.7; }
.cp-composer { flex: 0 0 auto; padding: 8px 20px 16px; }
.cp-composer .composer { max-width: 780px; margin: 0 auto; }
.cp-acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 선거 › 법령정보 (10-07 밤) - 왼쪽(목록 자리) = 검색 카드 + 자주 찾는 법령 / 결과 · 가운데 = 조문 뷰어 (nautilus.kr 1_legalinfo) · 자료 검색 (NautilusLegal Search) */
.ws-sidepanel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lw-side { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.lw-scard { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lw-scard h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lw-scard h3 svg { color: var(--accent-text); flex: 0 0 auto; }
.lw-scard h3 .grow { flex: 1 1 auto; }
.lw-search, .lw-msearch { display: flex; gap: 6px; }
.lw-search .sms-in, .lw-msearch .sms-in { flex: 1 1 auto; min-width: 0; }
.lw-search .btn, .lw-msearch .btn { flex: 0 0 auto; gap: 5px; }
.lw-favlist { display: flex; flex-direction: column; gap: 6px; }
.lw-favlist button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--canvas); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.lw-favlist button svg { color: var(--text-3); flex: 0 0 auto; }
.lw-favlist button:hover, .lw-favlist button.on { border-color: var(--accent-text); }
.lw-favlist button.on svg, .lw-favlist button:hover svg { color: var(--accent-text); }
.lw-sidenote { padding: 0 2px; line-height: 1.6; }
.lw-sidenote a { color: var(--accent-text); }
.lw-hits { display: flex; flex-direction: column; gap: 4px; }
.lw-hits button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--canvas); color: var(--text); font: inherit; cursor: pointer; }
.lw-hits button:hover { border-color: var(--line-2); }
.lw-hits button.on { border-color: var(--accent-text); background: rgba(63, 194, 140, .08); }
.lw-hits b { font-size: 13.5px; }
.lw-hits small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); }
.lw-wrap { max-width: 1120px; margin: 0 auto; padding: 22px 20px 48px; display: flex; flex-direction: column; gap: 14px; }
.lw-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lw-top h2 { margin: 4px 0 0; font-size: 24px; }
.lw-modes { display: flex; gap: 6px; }
.lw-modes button { padding: 7px 16px; border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lw-modes button.on { background: var(--text); color: var(--canvas); border-color: var(--text); }
.lw-msearch:not(.lw-dsearch) { display: none; }
#lwm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lw-view { padding: 0; min-width: 0; overflow: hidden; }
.lw-empty { min-height: 40vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; }
.lw-dh { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.lw-dt { display: flex; align-items: center; gap: 8px; }
.lw-dt h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; }
.lw-dt h3 svg { color: var(--accent-text); }
.lw-dt .grow { flex: 1 1 auto; }
.lw-badge { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lw-meta { font-size: 12.5px; color: var(--text-3); }
.lw-meta .acc { color: var(--accent-text); font-weight: 700; }
.lw-dh select.sms-in { height: 40px; }
.lw-tools { display: flex; gap: 8px; }
.lw-tools .sms-in { flex: 1 1 auto; padding: 8px 12px; }
.lw-body { display: flex; flex-direction: column; padding: 8px 22px 12px; }
.lw-head { margin: 22px 0 8px; text-align: center; font-size: 14.5px; color: var(--accent-text); scroll-margin-top: 230px; }
.lw-art { padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 230px; }
.lw-no { display: block; border: 0; background: none; padding: 0; margin-bottom: 4px; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: copy; text-align: left; }
.lw-no b { color: var(--accent-text); font-size: 14px; margin-right: 2px; }
.lw-no:hover { color: var(--text); }
.lw-art p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.lw-art mark, .lw-no mark, .lw-dhit mark { background: rgba(203, 162, 88, .35); color: var(--text); border-radius: 3px; padding: 0 1px; }
.lw-add { margin: 6px 22px 22px; }
.lw-add summary { cursor: pointer; font-size: 13px; color: var(--text-2); font-weight: 600; }
.lw-add pre { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--canvas-2); font-family: inherit; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.lw-dempty { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.lw-dempty p { margin: 0; font-size: 14.5px; }
.lw-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-samples .chip { cursor: pointer; font-weight: 700; }
.lw-dcap { padding: 0 2px; }
.lw-dhits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lw-dhit { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.lw-dhead { display: flex; align-items: baseline; gap: 10px; }
.lw-dhead b { font-size: 14.5px; }
.lw-dhead .grow { flex: 1 1 auto; }
.lw-dhead small { color: var(--text-3); font-variant-numeric: tabular-nums; }
.lw-dsrc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.lw-dsrc a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.lw-dhit p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 860px) { .lw-msearch:not(.lw-dsearch) { display: flex; } } /* 왼쪽이 서랍이 되는 폭 (.ai 860) - 가운데에도 검색칸 */
@media (max-width: 640px) { .lw-wrap { padding: 14px 12px 32px; } .lw-dh { position: static; padding: 14px 16px; } .lw-body { padding: 6px 16px 10px; } .lw-dt h3 { font-size: 17px; } }

/* 선거사무장 첫 화면 (10-07 밤) - 자주 묻는 질문 · 선관위 자료 상태 */
.cp-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-top: 16px; }
.cp-starter { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
.cp-starter:hover { border-color: var(--accent-text); color: var(--text); }
.cp-datast { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-datast b { color: var(--accent-text); }
/* 대화 도구 실행 카드 (10-09 대표님 "AI 대화가 그 카테고리 내용을 직접 바꾼다") - 답 글 속 도구 자리 (actcards.js) */
.act { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 13.5px; line-height: 1.45; }
.act-i { flex: 0 0 auto; display: inline-flex; color: var(--accent-text); }
.act-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-b b { font-size: 13px; color: var(--text); }
.act-s { color: var(--text-2); overflow-wrap: anywhere; }
.act-st { flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-3); }
.act[data-st="done"] .act-st { color: var(--accent-text); }
.act[data-st="error"] { border-color: rgba(229, 72, 77, .45); }
.act[data-st="error"] .act-i, .act[data-st="error"] .act-st { color: #ff9a9d; }
.act[data-st="undone"] { opacity: .72; }
.act[data-st="undone"] .act-i { color: var(--text-3); }
.act-read, .act-navigate { padding: 6px 10px; background: transparent; border-style: dashed; }
.act-read .act-b, .act-navigate .act-b { flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
.act-read .act-b b, .act-navigate .act-b b { color: var(--text-2); font-weight: 600; }
.act-read .act-s, .act-navigate .act-s { color: var(--text-3); }
.act-undo, .act-cta { flex: 0 0 auto; }
/* 결과물 다듬기 (10-07) - 대화 사이에 끼는 결과물 카드 · 입력칸 위 '바탕으로 다듬기' 표 */
.cp-out { align-self: stretch; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.cp-out__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-out__h b { font-size: 14px; }
.cp-out__h small { color: var(--text-3); font-size: 12.5px; }
.cp-out__h .grow { flex: 1 1 auto; }
.cp-out__imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.cp-out__imgs figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-out__imgs img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: var(--canvas-2); border: 1px solid var(--line); }
.cp-out__imgs figcaption { display: flex; align-items: center; gap: 8px; }
.cp-out__imgs figcaption span { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-out__imgs figcaption .btn { flex: 0 0 auto; }
.cp-ref { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; margin-bottom: 8px; border: 1px solid rgba(63, 194, 140, .45); border-radius: 10px; background: rgba(63, 194, 140, .08); font-size: 13px; }
.cp-ref img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.cp-ref span { flex: 1 1 auto; min-width: 0; }
.cp-ref .icon-btn { flex: 0 0 auto; }
.wide-side .wr-kind { font-size: 13px; padding: 9px 2px; white-space: nowrap; }
.ws-card { padding: 22px 24px; }
.ws-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-hd h2 { margin: 0; font-size: 20px; }
.ws-status { margin-left: auto; padding: 2px 10px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-3); font-size: 12px; font-weight: 700; }
.ws-desc { margin: 12px 0 4px; font-size: 15.5px; color: var(--text); line-height: 1.7; }
.ws-card h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.ws-plan { margin: 0; padding-left: 20px; color: var(--text-2); line-height: 1.8; }
.ws-uses { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-uses .chip { cursor: default; }
.ws-note { margin: 16px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(203, 162, 88, .12); color: #f1d08f; font-size: 13.5px; }
.ws-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.ws-step { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.ws-step b { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-size: 11.5px; }
.ws-arrow { color: var(--text-3); }
@media (max-width: 860px) {
  .ai.wide-side { grid-template-columns: 1fr; }
  .wide-side .ai-side { width: min(408px, 92vw); }
}

/* ══════════════ 도구 화면 ══════════════ */
.tl-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tl-card label { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-top: 6px; }
.tl-card label small { font-weight: 500; color: var(--text-3); margin-left: 4px; }
.tl-card input:not([type=checkbox]):not([type=file]), .tl-card textarea {
  width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 15px; line-height: 1.6; resize: vertical;
}
.tl-card input:focus, .tl-card textarea:focus { border-color: var(--accent-text); }
.tl-ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.tl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.tl-row .btn { margin-left: auto; }
.tl-mode { margin-bottom: 4px; }
.tl-drop { display: flex; align-items: center; justify-content: center; min-height: 110px; border: 1.5px dashed var(--line-2); border-radius: 14px; color: var(--text-3); cursor: pointer; text-align: center; padding: 16px; font-weight: 500 !important; }
.tl-drop:hover { border-color: var(--accent-text); color: var(--text-2); }
.tl-bar { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.tl-orig { white-space: pre-wrap; line-height: 1.9; font-size: 15px; padding: 12px 14px; border-radius: 12px; background: var(--canvas-2); }
.tl-mark { background: rgba(229, 72, 77, .18); color: inherit; border-bottom: 2px solid #ff8a8f; border-radius: 3px; padding: 0 1px; }
.tl-mark.spacing { background: rgba(127, 178, 255, .16); border-color: #9cc2ff; }
.tl-mark.orthography { background: rgba(203, 162, 88, .16); border-color: var(--gold); }
.tl-fix { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-fix label { font-weight: 500 !important; color: var(--text) !important; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 0 !important; }
.tl-fix s { color: #ff9a9d; } .tl-fix b { color: var(--accent-text); } .tl-fix small { color: var(--text-3); }
.tl-k { font-size: 11.5px; padding: 0 7px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); font-weight: 700; }
.tl-st { font-size: 13.5px; color: var(--text-2); } .tl-st summary { cursor: pointer; }
.tl-fixed { white-space: pre-wrap; line-height: 1.8; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.tl-res { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.tl-res b { color: var(--accent-text); word-break: break-all; }
.tl-links { list-style: none; margin: 0; padding: 0; }
.tl-links li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-links img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.tl-lmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tl-lmain b { font-size: 14px; word-break: break-all; } .tl-lmain small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-clicks { font-size: 12.5px; white-space: nowrap; }
.tl-links .arm { color: #ff9a9d; border-color: #ff9a9d; }

/* ══════════════ 유튜브 모니터링 (ntls.kr/youtube 구성) ══════════════ */
.ym-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ym-back { flex: 0 0 100%; font-size: 13px; }
.ym-title { flex: 1 1 360px; min-width: 0; }
.ym-title h1 { margin: 4px 0 6px; font-size: 22px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.ym-sub { font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ym-sub .vb { position: static; display: inline-block; }
.ym-ctrl { display: flex; gap: 8px; align-items: center; }
.ym-note { margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; background: rgba(203, 162, 88, .12); color: #f1d08f; border: 1px solid rgba(203, 162, 88, .3); }
.ym-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start; }
.ym-left { display: flex; flex-direction: column; gap: 12px; }
.ym-video { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.ym-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ym-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ym-tile { min-height: 84px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.ym-tile:last-child { grid-column: 1 / -1; min-height: 0; }
.ym-tile small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.ym-tile b { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-tile em { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.ym-tile.paid b { color: var(--gold); }
.ym-kw { padding: 12px; }
.ym-kwf { display: flex; gap: 6px; }
.ym-kwf input { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; }
.ym-kwf input:focus { border-color: var(--accent-text); }
.ym-kwlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ym-kwchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 11px; border-radius: var(--pill); background: var(--surface-2); font-size: 13px; font-weight: 600; }
.ym-kwchip small { font-size: 11.5px; color: var(--accent-text); font-weight: 700; }
.ym-kwchip button { border: 0; background: var(--surface-3); color: var(--text-2); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; }
.ym-feed { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--nav-real, var(--nav-h)) - 150px); min-height: 480px; }
.ym-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--line); }
.ym-tabs .chip small { font-size: 11.5px; opacity: .8; margin-left: 2px; }
.ym-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.ym-cmtrun { font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.ym-rows { flex: 1 1 auto; overflow: auto; padding: 4px 0; }
.ym-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.ym-row.paid { background: rgba(203, 162, 88, .07); }
.ym-row.reply { padding-left: 30px; }
.ym-row.del { opacity: .45; }
.ym-row.del .ym-x { text-decoration: line-through; }
.ym-t { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-b { min-width: 0; overflow-wrap: anywhere; }
.ym-a { font-weight: 700; color: var(--text-2); margin-right: 8px; font-size: 13px; }
.ym-re { color: var(--text-3); margin-right: 4px; }
.ym-x { color: var(--text); }
.ym-emo { width: 20px; height: 20px; vertical-align: -4px; margin: 0 1px; }
.ym-amt { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: var(--pill); background: var(--gold); color: #1a1a1a; font-size: 12px; font-weight: 800; }
.ym-kind, .ym-tag, .ym-deltag, .ym-rc { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--pill); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.ym-kind { background: rgba(203, 162, 88, .16); color: var(--gold); margin: 0 6px 0 0; }
.ym-tag { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.ym-deltag { background: rgba(229, 72, 77, .16); color: #ff9a9d; }
.ym-rc { background: var(--surface-3); color: var(--text-3); font-weight: 600; }
.ym-more { text-align: center; padding: 12px; }
.ym-ask { align-items: center; justify-content: center; }
.ym-askbox { width: min(520px, calc(100vw - 32px)); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ym-askbox input { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 15px; }
.ym-askbox input:focus { border-color: var(--accent-text); }
.ym-askft { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 960px) {
  .ym-grid { grid-template-columns: 1fr; }
  .ym-feed { height: 70vh; }
}

/* ══════════════ 작성 (논평 · SNS · 연설 · 대본) ══════════════ */
/* 종류 탭 다섯 칸을 왼쪽 목록 맨 위에 꽉 차게 붙인다 - 목록이 곧 패널이라 안쪽 패널은 두지 않는다 (대표님 10-06).
   위는 상단 메뉴 선, 오른쪽은 목록 오른쪽 선과 겹친다(margin-right -1px). 논평은 왼쪽 끝, 대본은 오른쪽 끝 */
.wr-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wr-kinds { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 -1px 0 0; border: 1px solid var(--line); border-top: 0; border-left: 0; background: var(--surface-2); flex: 0 0 auto; }
.wr-kind { padding: 9px 0; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.wr-kind + .wr-kind { border-left: 1px solid var(--line-2); }
.wr-kind:hover { color: var(--text); background: var(--surface-3); }
.wr-kind.on { background: var(--mint); color: var(--house); }
.kb.wk { background: rgba(203, 162, 88, .14); color: var(--gold); }
.kb.wk.sns { background: rgba(127, 178, 255, .14); color: #9cc2ff; }
.kb.wk.press { background: rgba(255, 255, 255, .1); color: var(--text); }
.kb.wk.speech { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.kb.wk.script { background: rgba(255, 155, 200, .14); color: #ffb3d4; }
.cv .dot.bad { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--red); vertical-align: middle; }
.wr-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.wr-form__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 16px; }
.wr-form label { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-top: 6px; }
.wr-form label small { font-weight: 500; color: var(--text-3); margin-left: 4px; }
.wr-form textarea {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--canvas-2);
  outline: none; font-size: 15px; line-height: 1.6; resize: vertical;
}
.wr-form select { width: auto; padding: 8px 32px 8px 14px; }   /* 테두리·배경·화살표는 .select (기본 iOS 모양이던 것) */
.wr-form textarea:focus, .wr-form select:focus { border-color: var(--accent-text); }
.wr-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wr-opt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wr-opt > span { flex: 0 0 34px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.wr-form__ft { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wr-form__ft .muted { font-size: 12.5px; }
.wr-text { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.wr-paras { white-space: normal; }
.wr-paras p { margin: 0 0 12px; white-space: pre-wrap; }
.wr-sec { display: inline-block; margin: 6px 0 2px; padding: 1px 10px; border-radius: var(--pill); background: var(--surface-3); color: var(--accent-text); font-size: 12.5px; font-weight: 700; }
.wr-card { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--gold); font-weight: 700; white-space: pre-wrap; }
.wr-card small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.wr-seg { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wr-seg ul { margin: 6px 0 0; padding-left: 22px; color: var(--text-2); }
.wr-note { margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 14px; }
.wr-note small { color: var(--accent-text); font-weight: 700; margin-right: 6px; }
.wr-flag, .wr-warn { margin-bottom: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; }
.wr-flag { background: rgba(203, 162, 88, .12); color: #f1d08f; border: 1px solid rgba(203, 162, 88, .3); }
.wr-flag::before { content: "확인 필요 · "; font-weight: 700; }
.wr-warn { background: rgba(229, 72, 77, .08); color: #ffb4b4; border: 1px solid rgba(229, 72, 77, .3); }
.wr-req { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.wr-req summary { cursor: pointer; color: var(--text-3); font-weight: 600; }
.wr-req__b { margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.wr-req__b b { font-size: 12.5px; color: var(--text-3); }
.wr-req__b p { margin: 2px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wr-revise { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.wr-revise textarea#note { flex: 1 1 100%; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; resize: none; line-height: 1.55; max-height: 40vh; font-size: 14px; }
.wr-revise textarea#note:focus { border-color: var(--accent-text); }
.wr-learn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.wr-del { border: 0; background: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--text-3); }
.wr-del:hover { color: var(--text); }
.wr-del.arm { color: #ff9a9d; font-weight: 700; }
@media (max-width: 640px) {
  .wr-form { padding: 16px; }
}

/* ══════════════ 사설 ══════════════ */
.ed-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-reload { margin-left: auto; }
.ed-lead1 { margin-top: 3px; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .ed-reload { margin-left: 0; } .ed-lead1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
@media (max-width: 480px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-card { padding: 16px 18px; }
.ed-card header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ed-card h3 { margin: 0; font-size: 17px; font-weight: 800; }
.ed-card ul { list-style: none; margin: 0; padding: 0; }
.ed-item { padding: 12px 0; border-top: 1px solid var(--line); }
.ed-item:first-child { border-top: 0; }
.ed-title { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.ed-title:hover { color: var(--accent-text); }
.ed-lead { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ed-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.ed-none { font-size: 13px; margin: 8px 0 4px; }
.ed-sec { margin: 30px 0 12px; font-size: 18px; display: flex; gap: 10px; align-items: baseline; }
.ed-sec small { font-size: 13px; font-weight: 500; }
.empty-card { padding: 40px 24px; text-align: center; color: var(--text-3); font-size: 14.5px; }

/* ── 설정 (10-06) ── */
.nav-gear { width: 34px; height: 34px; border-radius: 50%; color: var(--text-2); }
.nav-gear:hover, .nav-gear.on { color: var(--accent-text); background: rgba(63, 194, 140, .08); }
.st-page { max-width: 980px; }
.st-sec { padding: 22px 24px 18px; margin-bottom: 16px; }
.st-sh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.st-sh h2 { margin: 0; font-size: 18px; font-weight: 700; }
.st-sh small { color: var(--text-3); font-size: 13px; }
.st-grp { padding: 14px 0 12px; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.st-grp:last-child { border-bottom: 0; }
.st-gh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* 묶음 안에 감싼 목록도 같은 간격 (10-07 대표님 지적: Claude CLI 행·버튼이 여백 없이 붙었다 - 감싼 div 가 부모의 gap 을 끊었다) */
.st-list { display: flex; flex-direction: column; gap: 6px; }
.st-gh h3 { margin: 0; font-size: 15px; font-weight: 700; }
.st-gh small { font-size: 12.5px; }
.st-note { margin: 0; font-size: 12.5px; color: var(--text-3); }
.st-note.st-warn { color: #f0c36d; } /* 연결은 됐는데 빠진 권한 (10-10) */
.st-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); min-height: 44px; }
.st-row.off { opacity: .55; }
.st-n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-2); flex: 0 0 auto; }
.st-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.st-main b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.st-main small { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.st-main code, .st-row code { font-size: 13px; color: var(--text); letter-spacing: .02em; }
.st-acts { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.st-danger:hover { color: #ff8a8f !important; }
.st-v { font-size: 12.5px; padding: 2px 9px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); max-width: 100%; overflow-wrap: anywhere; }
.st-v.ok { background: rgba(63, 194, 140, .12); color: var(--accent-text); }
.st-v.warn { background: rgba(203, 162, 88, .14); color: var(--gold); }
.st-v.bad { background: rgba(229, 72, 77, .12); color: #ff9a9d; }
.st-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-in input { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; }
.st-in input:focus { border-color: var(--accent-text); }
.st-tag { font-size: 12px; color: var(--gold); flex: 1 1 100%; }
.st-sel { padding: 6px 28px 6px 10px; font-size: 13px; }
.st-add { align-self: flex-start; }
.st-sw { position: relative; width: 36px; height: 20px; flex: 0 0 auto; cursor: pointer; }
.st-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.st-sw span { position: absolute; inset: 0; border-radius: 20px; background: var(--surface-3); transition: background .2s; pointer-events: none; }
.st-sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.st-sw input:checked + span { background: var(--accent); }
.st-sw input:checked + span::after { transform: translateX(16px); }
.st-sw input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.st-login { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent-text); background: rgba(63, 194, 140, .05); font-size: 14px; }
.st-login ol { margin: 0 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.st-login li .btn, .st-login li .st-in { margin-top: 6px; }
.st-login a.btn { display: inline-flex; }
.st-prof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 12px; }
.st-prof label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.st-prof label:has(textarea) { grid-column: 1 / -1; }
.st-prof input, .st-prof textarea { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; font-weight: 400; color: var(--text); resize: vertical; line-height: 1.6; }
.st-prof input:focus, .st-prof textarea:focus { border-color: var(--accent-text); }
.st-pft { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 설정 › 프로필 새 양식 (10-10 대표님 양식) - settingsProfile.js. 묶음 · 머리 · 안내 · 단추는 설정 공용(.st-grp · .st-gh · .st-note · .btn), 칸은 .st-prof 와 같은 모양.
   카드 안에 새 판을 두르지 않는다 - 'AI' 표는 칸 이름 옆 · 줄 윗선에 걸고, 조사 알림만 클로드 로그인 안내(.st-login)와 같은 테두리. 저장 줄은 카드 아랫선에 붙는다.
   넓은 화면 규칙 먼저, 좁은 화면은 이 묶음 끝의 @media */
.pf { display: flex; flex-direction: column; }
.pf-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.pf-g.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-g > .w2 { grid-column: span 2; }
.pf-g > .w3 { grid-column: span 3; }
.pf-g > .w4 { grid-column: 1 / -1; }
.pf-g > .pf-pt { grid-column: span 2; }   /* 현 직함 옆의 직함 - 한 줄 (설계 변경 2) */
.pf-cap { grid-column: 1 / -1; margin: 2px 0 -6px; font-size: 12.5px; font-weight: 700; color: var(--text-3); }   /* 현 직함 아래 '현 지역구' - 아래 칸들이 새 줄에서 시작한다 */
.pf-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-l { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.pf-priv { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; }   /* 개인정보 칸 - AI 에 보내지 않습니다 (설계 변경 2) */
.pf input, .pf textarea { width: 100%; min-width: 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; font-weight: 400; color: var(--text); }
.pf input { height: 42px; padding: 0 12px; }
.pf textarea { padding: 9px 12px; line-height: 1.6; resize: vertical; }
.pf select.select { width: 100%; min-width: 0; height: 42px; padding: 0 30px 0 12px; background-color: var(--canvas-2); font-size: 14px; font-weight: 400; color: var(--text); text-overflow: ellipsis; }
.pf select.select:disabled { opacity: .5; cursor: default; }
.pf :is(input, textarea, select):focus { border-color: var(--accent-text); }
.pf :is(input, textarea)::placeholder { color: var(--text-3); }
.pf .pf-bad { border-color: var(--red) !important; box-shadow: 0 0 0 1px rgba(229, 72, 77, .35); }
.pf :is(input, select, textarea, button, summary) { scroll-margin: calc(var(--nav-real, var(--nav-h)) + 16px) 0 84px; }   /* 칸으로 옮겨 갈 때 위 메뉴 · 바닥 저장 줄에 가리지 않게 */
.pf-hint { margin: 0; min-height: 42px; align-self: end; display: flex; align-items: center; font-size: 13px; color: var(--text-3); }
.pf-hint.pf-hlt { color: var(--gold); font-weight: 600; }
.pf-hl [data-k="run.office"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(203, 162, 88, .18); }   /* 후보·예정인데 출마 직위가 비었다 */
.pf-x { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.pf-x:hover { color: #ff8a8f; border-color: var(--line-2); }
.pf-slot:empty { display: none; }
/* 검색 줄 · 조사 진행 · 조사 알림 */
.pf-sr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.pf-sr > .btn { height: 42px; padding-inline: 24px; }
.pf-job { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-height: 34px; font-size: 13.5px; color: var(--text-2); }
.pf-job .pf-step { font-weight: 600; color: var(--text); }
.pf-job .pf-sec { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pf-job > .btn { margin-left: auto; }
.pf-job.ok { color: var(--accent-text); }
.pf-ban { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent-text); background: rgba(63, 194, 140, .05); font-size: 13.5px; }
.pf-ban__h { display: flex; align-items: flex-start; gap: 8px; }
.pf-ban__h p { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--text-2); }
.pf-ban__h b { color: var(--text); font-weight: 700; }
.pf-ban__h .pf-x { margin: -6px -6px -6px 0; }
.pf-ban ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--text-2); overflow-wrap: anywhere; }
.pf-ban li b { margin-right: 6px; color: var(--text); font-weight: 600; }
.pf-src { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-3); }
.pf-src a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* 내 이력서 가져오기 (설계 변경 3) - 검색 줄 넷째 칸 단추 · 끌어 놓는 동안 검색 묶음 테두리 · 다른 값 줄 · 칸 이름 옆 '이력서' 표 */
.pf-sr.cv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.pf-sr > .btn[data-pf-cv] { padding-inline: 16px; white-space: nowrap; }
.st-grp.pf-drop { outline: 2px dashed var(--accent-text); outline-offset: 6px; border-radius: 10px; }
.pf-cvn { margin-top: -4px; }
.pf-ban__o { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
/* AI 가 채운 칸 (고치면 빠진다) · 조사 뒤에도 빈 칸 · 이미 적은 칸에 대한 AI 제안 */
.pf-ai :is(input, select, textarea) { border-color: var(--accent-text); box-shadow: 0 0 0 1px rgba(63, 194, 140, .3); }
.pf-f.pf-ai > .pf-l::after, .pf-row.pf-ai::after { content: "AI"; padding: 0 6px; border-radius: var(--pill); background: rgba(63, 194, 140, .16); color: var(--accent-text); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 16px; }
.pf-row.pf-ai::after { position: absolute; top: -8px; left: 8px; background: var(--house); }
.pf-f.pf-ai.pf-cv > .pf-l::after, .pf-row.pf-ai.pf-cv::after { content: "이력서"; letter-spacing: 0; }
.pf-need :is(input, select, textarea), .pf-need .st-add { border-style: dashed; border-color: rgba(203, 162, 88, .8); }
.pf-f.pf-need > .pf-l::after, .st-grp.pf-need > .st-gh::after { content: "직접 채워 주세요"; font-size: 11.5px; font-weight: 600; color: var(--gold); }
.pf-sug { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent-text); font-size: 13px; font-weight: 400; color: var(--text-2); }
.pf-sugv { flex: 1 1 140px; min-width: 0; max-height: 8.5em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-sugv > b { color: var(--accent-text); font-weight: 700; }
.pf-suga { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pf-sug details { flex: 1 1 200px; min-width: 0; }
.pf-sug summary { cursor: pointer; color: var(--accent-text); }
.pf-sug ol { margin: 6px 0 2px; padding-left: 20px; color: var(--text-3); overflow-wrap: anywhere; }
/* 현 직함 · 출마 예정 미리보기 · 예전 입력 */
.pf-prev { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--text-3); }
.pf-prev b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
/* 선거 일정 (10-13) - 맨 위 D-day 한 줄은 미리보기 줄과 같은 판에 D-day 만 굵게 (지난 선거는 금색). 일정 칸은 출마 예정 아래 같은 격자(.pf-g) 그대로 */
.pf-dday { margin-top: 12px; align-items: baseline; }
.pf-dday .pf-dn { font-size: 16px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pf-dday.past .pf-dn { color: var(--gold); }
.pf-old { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--gold); }
.pf-old > span { flex: 1 1 200px; min-width: 0; max-height: 7.5em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 학력 · 경력 줄 - 넓은 화면은 한 줄 (머리 줄이 칸 이름) */
.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-row { display: grid; grid-template-columns: 112px 156px minmax(0, 1fr) minmax(0, 1.4fr) 96px 34px; gap: 6px; align-items: center; position: relative; }
.pf-row.car { grid-template-columns: 112px 156px minmax(0, 1fr) minmax(0, 1fr) 34px; }
.pf-row.car.all { grid-template-columns: 112px 156px minmax(0, 1fr) minmax(0, 1fr) 62px 34px; }   /* '대표로' 칸 폭을 박는다 - 줄마다 따로인 격자라 auto 면 머리 줄(빈 칸)과 칸 이름이 어긋났다 */
.pf-row > [data-c="top"] { padding-inline: 6px; }
.pf-row.pf-lh { margin-bottom: -4px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.pf-row.pf-lh > span { padding-left: 4px; }
.pf-row select.select { padding-right: 26px; background-position: right 10px center; }
.pf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.pf-pair > span { color: var(--text-3); }
/* 저장 줄 - 바뀐 게 있으면 화면 바닥에 붙는다 (모양은 늘 같은 자리 · 같은 크기라 붙어도 아래 글이 밀리지 않는다) */
.pf-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; margin: 0 -24px -18px; padding: 12px 24px; border-top: 1px solid transparent; border-radius: 0 0 var(--r) var(--r); }
.pf-ft.pf-dirty { position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-top-color: var(--line); box-shadow: 0 -8px 16px rgba(0, 0, 0, .3); }
.pf-ftm { flex: 1 1 auto; min-width: 0; }
.pf-msg { font-size: 13.5px; font-weight: 600; color: var(--gold); }
.pf-msg.pf-err { color: #ff9a9d; }
@media (max-width: 900px) {
  .pf-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 이력서 단추가 있으면 주소 칸은 한 줄씩, 두 단추는 그 아래 한 줄 오른쪽에 (넷째 칸까지 한 줄이면 주소 칸이 150px 로 줄었다) */
  .pf-sr.cv { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pf-sr.cv > .pf-f { grid-column: 1 / -1; }
  .pf-sr.cv > .btn[data-pf-search] { grid-column: 2; }
  .pf-g > .w3 { grid-column: 1 / -1; }
  .pf-g > .pf-pt { grid-column: auto; }   /* 두 칸 격자에서도 현 직함 옆에 */
}
@media (max-width: 820px) {   /* 줄이 좁아지면 날짜 한 줄 · 글 칸은 아래로 */
  .pf-row.pf-lh { display: none; }
  .pf-row, .pf-row.car, .pf-row.car.all { grid-template-columns: 120px minmax(0, 1fr) auto; padding: 10px; border-radius: 10px; background: var(--surface-2); }
  .pf-row { grid-template-areas: "from to to" "school school x" "place st st"; }
  .pf-row.car { grid-template-areas: "from to to" "org org x" "title title title"; }
  .pf-row.car.all { grid-template-areas: "from to to" "org org x" "title title top"; }
  .pf-row > [data-c="from"] { grid-area: from; } .pf-row > [data-c="to"] { grid-area: to; } .pf-row > [data-c="place"] { grid-area: place; }
  .pf-row > [data-c="school"] { grid-area: school; } .pf-row > [data-c="st"] { grid-area: st; } .pf-row > [data-c="org"] { grid-area: org; }
  .pf-row > [data-c="title"] { grid-area: title; } .pf-row > [data-c="top"] { grid-area: top; } .pf-row > [data-c="x"] { grid-area: x; justify-self: end; }
}
@media (max-width: 640px) {
  .pf-g, .pf-g.two, .pf-sr { grid-template-columns: minmax(0, 1fr); }
  .pf-g > :is(.w2, .w3, .w4, .pf-pt) { grid-column: auto; }
  .pf-hint { min-height: 0; }
  .pf-sr > .btn { justify-self: end; }
  .pf-pair { grid-template-columns: 118px auto minmax(0, 1fr); }   /* 종료일 칸이 '현재 또는 2022.06.30' 을 다 보이게 */
  .pf-ft { margin: 0 -16px -14px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) { .st-sec { padding: 18px 16px 14px; } .st-prof { grid-template-columns: 1fr; } .st-acts { margin-left: 0; } }

/* ── 프로젝트 (제작·토론회, 10-06) - 가운데 대화 + 오른쪽 272px 기초 자료 ── */
.pj { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 272px; flex: 1 1 auto; min-height: 0; }
.pj-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pj-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pj-head .grow, .rp-bar .grow, .dbf h3 .grow { flex: 1 1 auto; }
.pj-title { flex: 0 1 380px; min-width: 120px; font-size: 16px; font-weight: 700; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; outline: none; }
.pj-title:hover { border-color: var(--line-2); }
.pj-title:focus { border-color: var(--accent-text); background: var(--canvas-2); }
.pj-seg { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--surface-2); gap: 2px; }
.pj-seg button { border: 0; background: transparent; color: var(--text-2); font-weight: 600; font-size: 13.5px; padding: 6px 14px; border-radius: var(--pill); cursor: pointer; }
.pj-seg button:hover { color: var(--text); }
.pj-seg button.on { background: var(--mint); color: var(--house); }
.pj-del:hover { color: #ff8a8f !important; }
.pj-mt-btn { display: none; }
.pj-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pj-content > .ai-scroll { flex: 1 1 auto; }
.pj-side { border-left: 1px solid var(--line); background: var(--canvas-2); min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pj-side-bd { display: none; }
@media (max-width: 1180px) {
  .pj { grid-template-columns: minmax(0, 1fr); }
  .pj-mt-btn { display: inline-flex; }
  .pj-side { position: absolute; z-index: 40; top: 0; right: 0; bottom: 0; width: min(300px, 88vw); transform: translateX(102%); transition: transform .25s var(--ease); box-shadow: var(--shadow-float); }
  .pj.mt-open .pj-side { transform: none; }
  .pj.mt-open .pj-side-bd { display: block; position: absolute; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
}
@media (max-width: 860px) { .pj-head { padding: 8px 10px; } .pj-title { flex-basis: 100%; } }

/* 기초 자료 */
.mt { padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.mt.drag { outline: 2px dashed var(--accent-text); outline-offset: -6px; border-radius: 10px; }
.mt-h { display: flex; align-items: baseline; justify-content: space-between; }
.mt-h b { font-size: 14.5px; }
.mt-h small { color: var(--text-3); font-size: 12.5px; }
.mt-hint { margin: -4px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.mt-drop { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.mt-drop:hover { border-color: var(--accent-text); }
.mt-drop b { font-size: 13px; }
.mt-drop small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.mt-link { display: flex; gap: 6px; }
.mt-link input, .mt-textform input, .mt-textform textarea { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--canvas); outline: none; font-size: 13px; }
.mt-link input:focus, .mt-textform input:focus, .mt-textform textarea:focus { border-color: var(--accent-text); }
.mt-textbtn { align-self: flex-start; }
.mt-textform { display: flex; flex-direction: column; gap: 6px; }
.mt-textform textarea { resize: vertical; line-height: 1.55; }
.mt-textform div { display: flex; justify-content: flex-end; gap: 6px; }
.mt-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-empty { font-size: 12.5px; color: var(--text-3); padding: 8px 2px; }
.mt-it { display: flex; align-items: flex-start; gap: 8px; padding: 8px 6px 8px 8px; border-radius: 10px; background: var(--surface); cursor: pointer; }
.mt-it:hover { background: var(--surface-2); }
.mt-it.up { cursor: default; }
.mt-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.mt-ic.k-youtube { color: #ff7b7b; } .mt-ic.k-pdf { color: #ff9f7a; } .mt-ic.k-image { color: var(--accent-text); }
.mt-ic.k-video { color: #9cc2ff; } .mt-ic.k-link { color: var(--gold); } .mt-ic.k-office { color: #8fb6ff; }
.mt-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-tx b { font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tx small { font-size: 11.5px; color: var(--text-3); line-height: 1.45; overflow-wrap: anywhere; }
.mt-tx .bad { color: #ff9a9d; } .mt-tx .warn { color: var(--gold); }
.mt-tx .spin { width: 10px; height: 10px; vertical-align: -1px; }
.mt-bar { display: block; height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 3px; }
.mt-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.mt-it .icon-btn { width: 22px; height: 22px; flex: 0 0 auto; opacity: .55; }
.mt-it .icon-btn:hover { opacity: 1; color: #ff8a8f; }
.mt-it .icon-btn svg { width: 13px; height: 13px; }

/* 새 프로젝트 · 토론회 설정 */
.pj-new { max-width: 780px; margin: 0 auto; padding: 26px 20px 48px; }
.pj-new.wide { max-width: 940px; }
.pj-new h2 { margin: 6px 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.pj-new > .muted { margin: 0; line-height: 1.6; font-size: 14px; }
.pj-note { font-size: 12.5px; margin-top: 10px; }
.pj-newform { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.dbf { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.dbf section { background: var(--surface); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-card); }
.dbf h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dbf h3 small { font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.dbf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.dbf-grid .wide { grid-column: 1 / -1; }
.dbf label:not(.el-chk):not(.chip), .pj-newform label, .dbf .wide { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.dbf label small, .pj-newform label small { font-weight: 500; color: var(--text-3); }
.dbf .lbl { font-size: 13px; font-weight: 700; color: var(--text-2); }
.dbf input:not([type=radio]):not([type=checkbox]), .dbf textarea, .pj-newform input, .pj-newform textarea {
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; font-weight: 400; color: var(--text); resize: vertical; line-height: 1.6; width: 100%; }
.dbf input:focus, .dbf textarea:focus, .pj-newform input:focus, .pj-newform textarea:focus { border-color: var(--accent-text); }
.dbf select.select { width: 100%; padding: 9px 30px 9px 12px; font-size: 14px; font-weight: 400; }
.dbf section > textarea { width: 100%; }
.dbf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.dbf-chips .chip { cursor: pointer; font-weight: 600; flex-direction: row; }
.dbf-chips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dbf-chips .chip:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.dbf-opp { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px 14px; margin-bottom: 10px; }
.dbf-opp__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dbf-ft { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .dbf-grid { grid-template-columns: 1fr; } .dbf section { padding: 14px; } .pj-new { padding: 18px 14px 40px; } }

/* 토론회 분석 보고서 */
.rp { display: flex; flex-direction: column; gap: 14px; }
.rp-card { padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.rp-card > div:first-child { flex: 1 1 360px; min-width: 0; }
.rp-card h2 { margin: 6px 0; font-size: 20px; }
.rp-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; }
.rp-card .error { margin-top: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(229, 72, 77, .4); color: #ffb4b4; font-size: 13px; }
.rp-run { justify-content: flex-start; }
.rp-run > div { flex: 1 1 auto; }
.rp-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.rp-doc { padding: 22px 28px; line-height: 1.75; }
.rp-doc > :first-child { margin-top: 0; }
.rp-doc h2 { border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin-top: 28px; color: var(--mint); }
.rp-doc h3 { color: var(--accent-text); }
.rp-doc table { display: table; width: 100%; }
@media (max-width: 640px) { .rp-doc { padding: 16px 14px; } }

/* 자료 미리보기 */
.pv-card { width: min(860px, 100%); padding: 18px 20px; }
.pv-card img.pv-media, .pv-card video.pv-media { display: block; width: auto; max-width: 100%; max-height: 50vh; border-radius: 8px; margin: 0 auto 12px; background: #000; box-shadow: none; }
.pv-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.pv-text { margin: 0; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; font-family: var(--font); font-size: 13.5px; line-height: 1.75; color: var(--text); }

/* ── 제작 결과물 · 만들기 창 (10-07) ── */
.pj-seg small { font-size: 11.5px; font-weight: 700; margin-left: 2px; opacity: .75; }
.mk-outs { display: flex; flex-direction: column; gap: 14px; }
.mk-empty { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mk-empty p { margin: 0; font-size: 14px; line-height: 1.6; }
.mk-out { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mk-oh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-oh b { font-size: 14.5px; }
.mk-oh small { font-size: 12.5px; }
.mk-oh .grow { flex: 1 1 auto; }
.mk-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); }
.mk-st.ok { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.mk-st.run, .mk-st.wait { background: rgba(203, 162, 88, .14); color: var(--gold); }
.mk-st.bad { background: rgba(229, 72, 77, .14); color: #ff9a9d; }
.mk-st .spin { width: 10px; height: 10px; }
.mk-prog { font-size: 13px; color: var(--text-2); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.mk-err { font-size: 13px; color: #ffb4b4; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(229, 72, 77, .4); }
.mk-warn { margin: 0; padding: 8px 12px 8px 28px; border-radius: 10px; background: rgba(203, 162, 88, .08); color: var(--gold); font-size: 12.5px; line-height: 1.6; }
.mk-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mk-imgs.one { grid-template-columns: minmax(0, 420px); }
.mk-imgs a { display: block; border-radius: 10px; overflow: hidden; background: var(--canvas-2); border: 1px solid var(--line); }
.mk-imgs img { display: block; width: 100%; height: auto; }
.mk-video { width: 100%; max-height: 60vh; border-radius: 10px; background: #000; }
.mk-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.mk-audio audio { flex: 1 1 260px; height: 36px; }
.mk-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-files .chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.mk-files .chip small { font-size: 11px; color: var(--text-3); }
.mk-modal { align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.mk-box { width: min(560px, 100%); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 32px); overflow: auto; }
.mk-bh { display: flex; align-items: center; justify-content: space-between; }
.mk-bh b { font-size: 16px; }
.mk-sec { display: flex; flex-direction: column; gap: 8px; }
.mk-sec .lbl { font-size: 13px; font-weight: 700; color: var(--text-2); }
.mk-engs { display: flex; flex-direction: column; gap: 6px; }
.mk-eng { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; }
.mk-eng:has(input:checked) { border-color: var(--accent-text); background: rgba(63, 194, 140, .06); }
.mk-eng.off { opacity: .5; cursor: not-allowed; }
.mk-eng input { margin-top: 3px; accent-color: var(--accent); }
.mk-eng span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-eng b { font-size: 14px; }
.mk-eng small { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.mk-eng em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); margin-left: 4px; vertical-align: 1px; }
.mk-paid { background: rgba(203, 162, 88, .16); color: var(--gold); }
.mk-free { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.mk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.mk-opts label { display: flex; flex-direction: column; gap: 6px; }
.mk-opts label:only-child { grid-column: 1 / -1; }
.mk-opts .select { width: 100%; padding: 8px 30px 8px 12px; font-size: 13.5px; }
.mk-box details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mk-box textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); color: var(--text); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; outline: none; }
.mk-box textarea:focus { border-color: var(--accent-text); }
.mk-paidnote { margin: 0; font-size: 12.5px; color: var(--gold); }
.mk-ft { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 520px) { .mk-opts { grid-template-columns: 1fr; } }

/* ── 선거 프로젝트 설정 (10-07) - 선거 고르기 · 여론조사 표 ── */
.el-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 360px; overflow: auto; padding: 2px; }
.el-chk { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); cursor: pointer; font-weight: 500 !important; }
.el-chk:has(input:checked) { border-color: var(--accent-text); background: rgba(63, 194, 140, .06); }
.el-chk input { margin-top: 3px; accent-color: var(--accent); }
.el-chk span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.el-chk b { font-size: 13px; color: var(--text); font-weight: 600; }
.el-chk small { font-size: 12px; color: var(--text-3); }
.el-table { max-height: 420px; overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.el-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.el-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; text-align: left; padding: 8px 10px; white-space: nowrap; z-index: 1; }
.el-table td { padding: 7px 10px; border-top: 1px solid var(--line); white-space: nowrap; color: var(--text); font-weight: 400; }
.el-table td:nth-child(n+4), .el-table th:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.el-table tr:has(input:checked) td { background: rgba(63, 194, 140, .05); }
.el-table input { accent-color: var(--accent); }

/* ── 왼쪽 목록 화면의 오른쪽 머리 · 폭 통일 (10-07) - 작성·제작·도구·선거 모두 같은 머리, 같은 폭 880px ── */
.ws-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ws-head .eyebrow { margin: 0; }
.ws-head__t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-head h2 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
.ws-head p { margin: 0; font-size: 14px; line-height: 1.6; }
.pj-new, .pj-new.wide { max-width: 880px; padding: 24px 20px 48px; }
.pj-new > .ws-head + * { margin-top: 16px; }

/* 카드 안쪽 여백 · 입력칸 이름 통일 (10-07) - 작성·도구·제작·선거의 입력 카드와 결과 카드가 같은 값을 쓴다 */
.wr-form, .tl-card, .dbf section, .pj-newform, .rp-card, .mk-out, .mk-empty { padding: 20px 22px; }
.wr-form label, .tl-card label, .dbf label:not(.el-chk):not(.chip), .pj-newform label, .dbf .lbl, .mk-sec .lbl, .st-prof label { font-size: 13.5px; }
@media (max-width: 640px) { .wr-form, .tl-card, .dbf section, .pj-newform, .rp-card, .mk-out, .mk-empty { padding: 16px; } }

/* 버튼 묶음 간격 통일 (10-07) - 한 줄에 붙는 작은 버튼들은 6px */
.mk-oh, .rp-bar, .rp-pick, .mk-ft, .dbf h3, .tl-row, .tl-ft { gap: 6px; }


/* 모니터링 링크 창 - 지금 받는 중인 목록 (10-07) */
.ym-running { display: flex; flex-direction: column; gap: 6px; }
.ym-running:empty { display: none; }
.ym-run { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.ym-run a { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.ym-run b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-run small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════ 휴대폰 최적화 (10-07 대표님 "모바일에서 가로 드래그가 먹혀서 사용하는데 어려움 - 가로 드래그는 필요 없지 않나?") ══════════════
   점검 (390px, 터치): 페이지 자체가 넓어지는 곳 둘(열린 프로젝트 696px - 화면 밖 오른쪽에 숨은 자료 서랍 / 유튜브 모니터링 398px - 통계 칸 최소 폭)과
   옆으로 미는 띠 셋(맨 위 메뉴 · 브리핑 회차 칩 · 여론조사 고르기 표)을 없앤다. 표·코드 블록 안쪽 가로 스크롤만 남긴다 */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.pj { overflow: clip; }                                     /* 서랍(translateX 102%)이 페이지 폭을 늘리지 않게 - hidden 이면 닫힌 서랍에 초점이 가는 순간 칸이 옆으로 밀렸다 (10-08 검증) */
.ym-grid > *, .ym-left { min-width: 0; }
.ym-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .ym-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; overflow: visible; } /* 탭 14개 = 7·7 두 줄 (10-08 커뮤·구글 더해 6칸이면 세 줄 166px 이 됐다) */
  .tab { padding: 7px 0; text-align: center; font-size: 13.5px; white-space: nowrap; }
  .dbf .el-table th:nth-child(4), .dbf .el-table td:nth-child(4), .dbf .el-table th:nth-child(6), .dbf .el-table td:nth-child(6) { display: none; }
  .el-table th, .el-table td { padding: 7px 6px; }
  .ym-title h1 { font-size: 19px; }
}
/* 손가락 화면 - 입력칸 16px(아이폰은 16px 미만 입력칸을 누르면 화면을 확대해 옆으로 밀린다) · 작은 버튼은 누르기 쉬운 높이로 */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 16px !important; }
  .btn-sm { min-height: 34px; }
}
/* 넘침 셋 (10-07 점검) - 뉴스 검색칸 · AI 첫 화면 입력창 선택 상자 · 여론조사 고르기 표가 줄어들지 않았다 */
.search, .search input { min-width: 0; }
.composer, .composer .ctl { min-width: 0; }
.composer .select { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .news-tools.one .search { min-width: 0; }
  .ai-hello { padding: 20px 12px; }
  .composer .select { max-width: 38%; }
  .el-table table { font-size: 12.5px; }
  .el-table th { font-size: 12px; }
  .dbf .el-table th:nth-child(5), .dbf .el-table td:nth-child(5) { display: none; } /* 휴대폰은 기관·기간·민주당·국민의힘만 (고르는 표라 나머지는 분석에 그대로 쓰인다) */
  .el-table th, .el-table td { padding: 7px 5px; }
}
.ai-hello > #slot-hello { width: min(720px, 100%); min-width: 0; }   /* 가운데 정렬 칸이 입력창 내용 폭으로 커지던 것 */

.el-table th .sm { display: none; }
@media (max-width: 720px) {
  .el-table th .lg { display: none; } .el-table th .sm { display: inline; }
  .dbf .el-table table { table-layout: fixed; }
  .dbf .el-table th:nth-child(1), .dbf .el-table td:nth-child(1) { width: 30px; }
  .dbf .el-table th:nth-child(7), .dbf .el-table td:nth-child(7), .dbf .el-table th:nth-child(8), .dbf .el-table td:nth-child(8) { width: 46px; }
  .dbf .el-table td:nth-child(2), .dbf .el-table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 720px) { .el-yr { display: none; } }  /* 휴대폰은 조사 기간에서 연도를 뺀다 (10.01~02) */
.st-prof input, .st-prof textarea, .st-in input, .dbf input, .dbf textarea, .dbf select { min-width: 0; }   /* 입력칸 기본 최소 폭이 좁은 화면(360px)에서 칸을 밀어내던 것 */
@media (max-width: 640px) { .st-prof { grid-template-columns: minmax(0, 1fr); } .st-prof input, .st-prof textarea { width: 100%; } }

/* ══════════════ 문자보내기 (10-07 대표님 "nautilus.kr 에서 적용된 레이아웃을 흉내만 … 파일첨부도 빠져있고 … 주소록 구글시트도") ══════════════
   nautilus.kr 13_Main-Web 1_sms 화면(2_slmms 3열 · 3_20shot 스피드 모드 · 4_address)을 대조해 이 앱의 어두운 바탕으로 옮겼다.
   폰 미리보기 껍데기(240×520, 흰 화면 · 회색 말풍선)는 실제 문자 앱처럼 보이게 밝은 그대로 */
.sms-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px 48px; container-type: inline-size; }
.sms-wrap.narrow { max-width: 880px; }
.sms-wrap--speed { max-width: 1120px; }
.sms-wrap > .ws-head + * { margin-top: 0; }
.sms-wrap .warn { color: var(--gold); }
.sms-wrap .bad, .sms-book .bad { color: #ff9a9d; }
.sms-wrap .acc, .sms-dlg .acc { color: var(--accent-text); }
.sms-tag { padding: 2px 10px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; }
.sms-cap { font-size: 12px; color: var(--text-3); line-height: 1.55; margin: 0; }
.sms-lnk { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sms-lnk:hover { text-decoration: underline; }

/* 3열 (nautilus.kr lg:grid-cols-3) - 좁으면 2열(수신번호가 아래 한 줄) → 1열 */
.sms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 16px; }
/* 가운데 칸이 860px 넘으면 nautilus.kr 처럼 3열 (1600px 화면에서 왼쪽 목록·오른쪽 주소록을 빼고 남는 폭) */
@container (min-width: 600px) { .sms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sms-col { grid-column: 1 / -1; } }
@container (min-width: 860px) { .sms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sms-col { grid-column: auto; } }
@container (min-width: 860px) and (max-width: 1080px) { .sms-panel { padding: 16px 14px; } .sms-opts { padding: 12px; } }
.sms-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; container-type: inline-size; }
.sms-panel { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.sms-rcv { flex: 1 1 auto; }
.sms-ph { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sms-ph svg { color: var(--accent-text); flex: 0 0 auto; }
.sms-lbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sms-lbl > span { font-size: 13px; font-weight: 700; color: var(--text-3); }
.sms-in { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--canvas); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.sms-in:focus { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.sms-in:disabled { opacity: .4; cursor: not-allowed; }
select.sms-in { height: 44px; padding-block: 0; }
.sms-emptybox { border: 1px dashed var(--line-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.sms-opts { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--canvas-2); display: flex; flex-direction: column; gap: 12px; }
.sms-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.sms-sw { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 10px; border: 0; padding: 0; background: var(--surface-3); cursor: pointer; transition: background .2s ease; }
.sms-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.sms-sw.on { background: var(--accent); }
.sms-sw.on i { transform: translateX(16px); }
.sms-red { margin: 0; font-size: 12px; line-height: 1.6; color: #ff9a9d; }
.sms-body { resize: none; line-height: 1.6; }
.sms-meter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sms-badge { padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 800; background: rgba(96, 150, 255, .16); color: #93b8ff; }
.sms-badge[data-t="MMS"] { background: rgba(203, 162, 88, .16); color: var(--gold); }
/* MMS 이미지 */
.sms-mms { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sms-mms__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.sms-add { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.sms-add:hover { border-color: var(--accent-text); color: var(--accent-text); }
.sms-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--text-3); font-size: 12px; cursor: pointer; text-align: center; }
.sms-drop:hover, .sms-drop.drag, .sms-imglist.drag, .sms-fbox.drag, .sms-file.drag { border-color: var(--accent-text); color: var(--accent-text); }
.sms-imglist { display: grid; gap: 8px; max-height: 10rem; overflow-y: auto; border: 1px dashed transparent; border-radius: 8px; }
.sms-img { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); }
.sms-img__t { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); }
.sms-img__n { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-img__n small { margin-left: 6px; color: var(--text-3); }
.sms-img .icon-btn { width: 24px; height: 24px; flex: 0 0 auto; }

/* 휴대폰 미리보기 (nautilus.kr 240×520 껍데기) */
.sms-pvw { align-items: center; }
.sms-pvw .sms-ph { align-self: stretch; }
.sms-phone { width: min(240px, 100%); aspect-ratio: 240 / 520; flex: 0 0 auto; background: #000; border: 2px solid #3a3d42; border-radius: 2.5rem; padding: 3px; position: relative; overflow: hidden; }
.sms-phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 26px; background: #000; border-radius: 0 0 16px 16px; z-index: 2; }
.sms-phone__scr { width: 100%; height: 100%; background: #fff; border-radius: 2.3rem; display: flex; flex-direction: column; overflow: hidden; color: #000; }
.sms-phone__top { display: flex; align-items: center; justify-content: space-between; padding: 32px 12px 8px; background: #f6f6f6; border-bottom: 1px solid #e5e7eb; }
.sms-phone__nav { color: #3b82f6; font-size: 10px; }
.sms-phone__who { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sms-phone__who i, .sms-phone__av { display: grid; place-items: center; border-radius: 50%; background: #d1d5db; color: #6b7280; font-style: normal; font-weight: 800; }
.sms-phone__who i { width: 28px; height: 28px; font-size: 9px; }
.sms-phone__body { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.sms-phone__day { text-align: center; font-size: 8px; color: #9ca3af; margin-bottom: 8px; }
.sms-phone__row { display: flex; align-items: flex-end; gap: 4px; }
.sms-phone__av { width: 20px; height: 20px; flex: 0 0 auto; font-size: 7px; }
.sms-phone__msg { max-width: 85%; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sms-phone__msg img { width: 100%; border-radius: 12px; object-fit: contain; display: block; }
.sms-phone__bub { background: #e5e5ea; color: #000; font-size: 11.2px; line-height: 1.4; padding: 6px 8px; border-radius: 12px 12px 12px 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-phone__bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid #e5e7eb; background: #f6f6f6; }
.sms-phone__bar i, .sms-phone__bar b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; flex: 0 0 auto; }
.sms-phone__bar i { background: #d1d5db; color: #6b7280; }
.sms-phone__bar b { background: #3b82f6; color: #fff; font-size: 9px; }
.sms-phone__bar span { flex: 1 1 auto; height: 24px; border-radius: 12px; background: #fff; border: 1px solid #d1d5db; }
.sms-types { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sms-type { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--canvas-2); text-align: center; }
.sms-type b { font-size: 12px; color: var(--text-3); }
.sms-type small { font-size: 11px; color: var(--text-3); }
.sms-type.on { border-color: var(--accent-text); background: rgba(63, 194, 140, .08); }
.sms-type.on b { color: var(--accent-text); }
.sms-type.on small { color: var(--text); }

/* 수신번호 입력 */
.sms-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); }
.sms-seg button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sms-seg button:hover { color: var(--text); }
.sms-seg button.on { background: var(--accent); color: #fff; }
.sms-rbody { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.sms-file { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--canvas); }
.sms-fbtn { flex: 0 0 auto; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.sms-fbtn:hover { border-color: var(--accent-text); }
.sms-fname { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-fname b { color: var(--accent-text); }
.sms-fbox { flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 12px 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--canvas-2); font-size: 12px; color: var(--text-3); line-height: 1.6; }
.sms-fbox small { font-size: 11.5px; }
.sms-glist { flex: 1 1 auto; min-height: 120px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); }
.sms-glist ul { list-style: none; margin: 0; padding: 0; }
.sms-glist li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
.sms-glist li:last-child { border-bottom: 0; }
.sms-glist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-glist li small, .sms-sp__row small { flex: 0 0 auto; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sms-glist__e { height: 100%; min-height: 118px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-3); padding: 12px; text-align: center; }
.sms-nums { flex: 1 1 auto; resize: none; min-height: 9rem; line-height: 1.6; }
.sms-total { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.sms-total:empty { display: none; }
.sms-set { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sms-set__h { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.sms-at { height: 44px; color-scheme: dark; }
.sms-fixed { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--accent-text); border-radius: 8px; background: rgba(63, 194, 140, .08); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.sms-acts { display: flex; gap: 8px; }
.sms-acts .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: 8px; }
.sms-acts #go { flex: 2 1 0; }
@container (max-width: 330px) { .sms-acts { flex-wrap: wrap; } .sms-acts #go { flex-basis: 100%; } }
/* 발송 접수 완료 덮개 (수신번호 칸 위) */
.sms-done { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(22, 31, 27, .93); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
.sms-done h2 { margin: 8px 0 0; font-size: 16px; }
.sms-done p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.65; }
.sms-done__ic.ok { color: var(--accent-text); }
.sms-done__ic.warn { color: var(--gold); }
/* 발신번호 관리 */
.sms-mng { margin-top: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--canvas-2); display: flex; flex-direction: column; gap: 10px; }
.sms-mng ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sms-mng li { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 10px; border-radius: 6px; background: var(--surface); font-size: 13px; font-variant-numeric: tabular-nums; }
.sms-mng li small { color: var(--text-3); }
.sms-mng li .icon-btn { margin-left: auto; width: 24px; height: 24px; }
li.sms-mng__none { color: var(--text-3); background: none; padding-left: 2px; }
.sms-mng__add { display: flex; gap: 6px; flex-wrap: wrap; }
.sms-mng__add .sms-in { flex: 1 1 8rem; padding: 7px 10px; font-size: 13px; }
.sms-mng__080 { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.sms-mng__080 .sms-in { padding: 7px 10px; font-size: 13px; }
.sms-mng__ft { display: flex; justify-content: flex-end; gap: 6px; }

/* 작은 창 - 미리보기 · 테스트발송 · 발송 확인 */
.sms-dlg { width: min(440px, 100%); gap: 12px; }
.sms-dlg__h { display: flex; align-items: center; justify-content: space-between; }
.sms-dlg__h b { font-size: 15px; }
.sms-dlg .sms-dl { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.sms-dlg__img { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 8px; display: block; background: var(--canvas-2); }
.sms-dlg__txt { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.sms-dlg__p { margin: 0; font-size: 14px; line-height: 1.6; }
.sms-dlg__f { display: flex; flex-direction: column; gap: 10px; }
.sms-dlg__ft { display: flex; justify-content: flex-end; gap: 6px; }
.sms-dlg__res { font-size: 13px; line-height: 1.55; padding: 8px 12px; border-radius: 8px; }
.sms-dlg__res.bad { color: #ffb4b4; border: 1px solid rgba(229, 72, 77, .4); }
.sms-dlg__res.warn { color: #f1d08f; border: 1px solid rgba(203, 162, 88, .35); }

/* 알림 줄 · 발송 내역 */
.sms-note { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.sms-note.ok { background: rgba(63, 194, 140, .1); color: var(--accent-text); border: 1px solid rgba(63, 194, 140, .3); }
.sms-note.warn { background: rgba(203, 162, 88, .12); color: #f1d08f; border: 1px solid rgba(203, 162, 88, .3); }
.sms-note.bad { background: rgba(229, 72, 77, .08); color: #ffb4b4; border: 1px solid rgba(229, 72, 77, .4); }
.sms-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-top: 16px; }
.sms-card h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sms-card .sms-note { margin-top: 0; }
.sms-soft { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--canvas-2); }
.sms-bubble { justify-self: start; max-width: 100%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-detail h3 { flex-wrap: wrap; }
.sms-detail__t { font-weight: 600; font-size: 14px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.sms-detail__imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.sms-detail__imgs img { width: 120px; max-width: 100%; border-radius: 8px; display: block; }
.sms-st { padding: 3px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 800; white-space: nowrap; }
.sms-st.ok, .sms-st.run { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.sms-st.warn { background: rgba(203, 162, 88, .16); color: var(--gold); }
.sms-st.bad { background: rgba(229, 72, 77, .14); color: #ff9a9d; }
.sms-st.off { background: var(--surface-3); color: var(--text-3); }
.sms-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13.5px; }
.sms-dl dt { color: var(--text-3); }
.sms-dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; text-align: right; }
.sms-detail .sms-dl dd { text-align: left; }
.sms-nums summary { cursor: pointer; font-size: 13px; color: var(--text-2); font-weight: 600; }
.sms-nums div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sms-nums .chip { cursor: default; font-variant-numeric: tabular-nums; }

/* 20건 분할 2단계 - 수동 원키 스피드 모드 (nautilus.kr 3_20shot) */
.sms-sp { display: flex; flex-direction: column; gap: 16px; }
.sms-sp__head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sms-sp__head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; }
.sms-sp__head h2 svg { color: var(--accent-text); }
.sms-sp__head p { margin: 6px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.9; }
.sms-sp__head kbd { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--canvas-2); font-family: inherit; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.sms-sp__head kbd.acc { color: var(--accent-text); }
.sms-sp__touch { display: none; }
@media (pointer: coarse) { .sms-sp__touch { display: inline; } }
.sms-sp__cnt { text-align: right; display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.sms-sp__cnt small { font-size: 12px; font-weight: 700; color: var(--text-3); }
.sms-sp__cnt b { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sms-sp__bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.sms-sp__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.sms-sp__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 700px) { .sms-sp__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sms-sp__wait { padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; position: relative; height: min(62vh, 560px); user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; }
.sms-sp__wait.charging::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(63, 194, 140, .5); border-radius: inherit; pointer-events: none; animation: smsPulse 1s ease-in-out infinite; }
@keyframes smsPulse { 50% { opacity: .3; } }
.sms-sp__wh { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sms-sp__wh h3 { margin: 0; font-size: 13px; }
.sms-sp__wh p { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.sms-sp__wh p b { font-size: 18px; font-weight: 900; }
.sms-sp__list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.sms-sp__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-3); transition: background .12s ease, border-color .12s ease; flex: 0 0 auto; }
.sms-sp__row b { font-size: 13px; color: var(--text); flex: 1 1 auto; }
.sms-sp__ck { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: 0 0 auto; }
.sms-sp__row.on { border-color: var(--accent-text); background: rgba(63, 194, 140, .08); }
.sms-sp__row.on .sms-sp__ck { background: var(--accent); border-color: var(--accent); color: #fff; }
.sms-sp__right { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sms-sp__msg { padding: 18px 20px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sms-sp__msg h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sms-sp__msg h3 svg { color: var(--accent-text); }
.sms-sp__txt { flex: 1 1 auto; min-height: 8rem; max-height: 40vh; overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.sms-sp__go { height: 7rem; border-radius: 10px; border: 0; font: inherit; font-size: 22px; font-weight: 900; cursor: pointer; background: var(--surface-2); color: var(--text-3); transition: opacity .15s ease; }
.sms-sp__go.ready { background: var(--accent); color: #fff; }
.sms-sp__go.done { background: #1f9d6a; color: #fff; }
.sms-sp__go:disabled { cursor: not-allowed; }
.sms-sp__go.ready:hover:not(:disabled), .sms-sp__go.done:hover { opacity: .9; }
.sms-sp__back { align-self: flex-end; }

/* 오른쪽 주소록 (nautilus.kr 4_address) + 구글 시트 */
.sms-sheet { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.sms-sheet.off { border-style: dashed; }
.sms-sheet__t { display: flex; gap: 8px; align-items: flex-start; }
.sms-sheet__t svg { color: #34a853; flex: 0 0 auto; margin-top: 1px; }
.sms-sheet__t span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sms-sheet__t b { font-size: 13px; }
.sms-sheet__t small { font-size: 11.5px; color: var(--text-3); line-height: 1.45; overflow-wrap: anywhere; }
.sms-sheet__b { display: flex; gap: 6px; }
.sms-sheet__b .btn { flex: 1 1 0; justify-content: center; gap: 5px; }
.sms-sheet > .btn { justify-content: center; gap: 5px; }
.sms-sync.on svg { animation: spin 1s linear infinite; }
.sms-sheet__s { font-size: 11.5px; color: var(--text-3); line-height: 1.5; overflow-wrap: anywhere; }
.sms-sheet .sms-lnk { align-self: flex-start; font-size: 12px; }
.sms-search { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--canvas); color: var(--text-3); }
.sms-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 7px 0; outline: none; font-size: 13px; color: var(--text); }
.sms-search:focus-within { border-color: var(--accent-text); }
.sms-quick { display: flex; gap: 6px; }
.sms-quick input { flex: 1 1 0; min-width: 0; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--canvas); outline: none; font-size: 13px; color: var(--text); }
.sms-quick input[name="name"] { flex: .8 1 0; }
.sms-quick input:focus { border-color: var(--accent-text); }
.sms-quick .btn { flex: 0 0 auto; }
.sms-bk-tools { display: flex; gap: 6px; }
.sms-bk-tools .btn { flex: 1 1 0; justify-content: center; cursor: pointer; }
.sms-g .sms-put { flex: 0 0 auto; align-self: center; }
.sms-bk-h { display: flex; align-items: center; gap: 6px; }
.sms-bk-h .icon-btn { flex: 0 0 auto; width: 30px; height: 30px; }
.sms-bk-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14.5px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; color: var(--text); outline: none; }
.sms-bk-name:hover { border-color: var(--line-2); }
.sms-bk-name:focus { border-color: var(--accent-text); background: var(--canvas); }
.sms-bk-acts { display: flex; align-items: center; gap: 6px; }
.sms-bk-acts .grow { flex: 1 1 auto; }
.sms-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.sms-all input, .sms-c input { accent-color: var(--accent); }
.sms-ct { gap: 3px; }
.sms-c { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 10px; background: var(--surface); cursor: pointer; }
.sms-c:hover { background: var(--surface-2); }
.sms-c:has(input:checked) { background: rgba(63, 194, 140, .09); }
.sms-c input { margin-top: 3px; flex: 0 0 auto; }
.sms-c span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sms-c b { font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-c small { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sms-gdel { align-self: flex-start; margin-top: 6px; gap: 5px; color: var(--text-3) !important; }
.sms-gdel:hover { color: #ff8a8f !important; }
/* RCS (nautilus.kr 1_rcs) - 머리 탭 · 작성(버튼·대체문자) · RCS 미리보기 카드 */
.sms-subtabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); }
.sms-subtabs button { padding: 6px 14px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sms-subtabs button:hover { color: var(--text); }
.sms-subtabs button.on { background: var(--accent); color: #fff; }
.sms-rsec { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sms-rsec .sms-opt b { font-size: 13px; color: var(--text); }
.sms-add:disabled, .sms-add[disabled] { opacity: .4; cursor: not-allowed; }
button.sms-add { background: none; font: inherit; font-size: 12px; font-weight: 600; }
.rcs-btn { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); }
.rcs-btn__r { display: flex; gap: 6px; align-items: center; }
.rcs-btn .sms-in { padding: 7px 9px; font-size: 12.5px; }
.rcs-btn select.sms-in { width: auto; flex: 0 0 auto; height: 34px; }
.rcs-btn__r input { flex: 1 1 auto; min-width: 0; }
.rcs-btn .icon-btn { flex: 0 0 auto; }
.rcs-top { justify-content: flex-start; gap: 8px; padding-top: 34px; }
.rcs-logo { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: #00754A; color: #fff; display: grid; place-items: center; font-style: normal; }
.rcs-who { display: flex; flex-direction: column; min-width: 0; }
.rcs-who b { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #111827; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcs-who b svg { color: #3b82f6; flex: 0 0 auto; }
.rcs-who small { font-size: 10px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.rcs-card { background: #f1f1f3; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.rcs-card img { display: block; width: 100%; object-fit: cover; }
.rcs-card__b { padding: 10px; color: #1f2937; }
.rcs-card__b b { display: block; font-size: 12px; color: #111827; margin-bottom: 4px; }
.rcs-card__b p { margin: 0; font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rcs-card__b i { color: #9ca3af; }
.rcs-card__btns { border-top: 1px solid #e5e7eb; }
.rcs-card__btns span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; font-size: 11px; font-weight: 700; color: #2563eb; }
.rcs-card__btns span:last-child { border-bottom: 0; }
.rcs-foot { display: flex; justify-content: flex-end; padding: 0 10px 10px; }
.sms-dlg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sms-dlg__res.ok { color: var(--accent-text); border: 1px solid rgba(63, 194, 140, .35); }

/* RCS 설정 · 이용안내 */
.sms-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@container (min-width: 760px) { .sms-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sms-bform { display: flex; flex-direction: column; gap: 12px; }
.sms-fl { display: flex; flex-direction: column; gap: 6px; }
.sms-fl > span { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; }
.sms-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sms-chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.sms-prof { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-2); }
.sms-prof img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sms-prof div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sms-prof b { font-size: 13px; }
.sms-prof small { font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.sms-bform .btn-primary { justify-content: center; }
.sms-blist { list-style: none; margin: 0; padding: 0; }
.sms-blist li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sms-blist li:last-child { border-bottom: 0; }
.sms-blist li > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sms-blist p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sms-blist b { font-size: 14px; }
.sms-blist small { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.sms-guide { max-width: 760px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 14px; }
.sms-guide p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.sms-guide b { color: var(--text); }
.sms-steps, .sms-warns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sms-steps li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.sms-steps li:last-child { border-bottom: 0; }
.sms-steps span { color: var(--text-3); }
.sms-warns li { position: relative; padding: 5px 0 5px 18px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.sms-warns li::before { content: "!"; position: absolute; left: 2px; top: 5px; font-weight: 900; color: var(--gold); }

/* 발송 내역 (nautilus.kr 5_sendinghistory) - 표 · 받는 사람별 결과 */
.sms-hf { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sms-hf__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sms-hf__t small { font-size: 12px; color: var(--text-3); }
.sms-hf select.sms-in { width: auto; min-width: 12rem; }
.sms-hl { margin-top: 14px; }
.sms-hre { gap: 5px; }
.sms-tw { overflow-x: auto; }
.sms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sms-table th { text-align: left; padding: 8px 12px 8px 0; font-size: 12px; font-weight: 700; color: var(--text-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sms-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sms-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.sms-table .mono, .sms-blist .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sms-htable td:last-child { width: 1%; white-space: nowrap; padding-right: 0; }
.sms-cnt { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 13px; white-space: nowrap; }
.sms-cnt .ok { color: var(--accent-text); }
.sms-cnt .bad { color: #ff9a9d; font-weight: 700; }
.sms-cnt .warn { color: var(--gold); }
.sms-cnt .mute { color: var(--text-3); }
.sms-hst { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.sms-hst.ok { color: var(--accent-text); }
.sms-hst.bad { color: #ff9a9d; }
.sms-hst.warn { color: var(--gold); }
.sms-hst.off { color: var(--text-3); }
.sms-seg--inline { align-self: flex-start; }
.sms-seg--inline button { flex: 0 0 auto; padding: 6px 14px; }
.sms-pg { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13px; }
.sms-pg small { color: var(--text-3); }
.sms-pg > span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sms-pg .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.sms-card h3 .btn { gap: 4px; }
.pj.sms .pj-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pj.sms .pj-seg button { white-space: nowrap; }

@media (max-width: 640px) {
  .sms-wrap { padding: 18px 14px 40px; }
  .sms-panel, .sms-card { padding: 16px; }
  .sms-sp__cnt b { font-size: 22px; }
  .sms-sp__wait { height: 52vh; }
  .sms-sp__go { height: 5.5rem; font-size: 19px; }
}

/* 제작 만들기 창 - 도구를 묶음별로 (10-07 대표님 "선택할 수 있게": 힉스필드 · Gemini · 피그마 · 자체 엔진) */
.mk-box { width: min(680px, 100%); }
.mk-grp { display: flex; flex-direction: column; gap: 6px; }
.mk-grp + .mk-grp { margin-top: 6px; }
.mk-gh { font-size: 12px; font-weight: 800; color: var(--text-3); letter-spacing: .02em; }
.mk-grp .mk-engs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; }
.mk-grp .mk-eng { padding: 9px 11px; }
.mk-grp .mk-eng b { font-size: 13.5px; }
.mk-rec { background: rgba(63, 194, 140, .14); color: var(--accent-text); }
.mk-opts label[hidden] { display: none !important; }

/* 목록 '⋯' 메뉴 - 손가락 화면에는 hover 가 없어 늘 보이게 (10-07, 프로젝트 목록에도 메뉴를 달며) */
@media (hover: none) { .cv .more { opacity: 1; } }
.cv input { color: var(--text); }

/* AI 화면 바깥 스크롤 (10-07 대표님 "스크롤이 넘 많고") - 휴대폰 가로 끌림을 막느라 html 에 overflow-x 를 준 뒤로
   body 의 overflow:hidden 이 브라우저 창까지 가지 않아, 윈도우에서 몇 px 넘치면 창 전체 스크롤바가 하나 더 생겼다. 창 자체를 묶는다 */
html:has(body.ai-mode) { overflow: hidden; }
body.ai-mode { height: 100dvh; }

/* 설정 다섯 갈래 (10-07) - 머리 줄 알약 탭은 제작·도구의 [대화|결과물] 과 같은 .pj-seg */
.st-tabs { margin: 4px 0 16px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .st-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; }
  .st-tabs button { padding: 7px 6px; font-size: 13px; border-radius: 12px; }
}
.st-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.st-gscopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; margin-top: 4px; }
.st-gft { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.st-row .st-main code { overflow-wrap: anywhere; }
.st-row .st-main { min-width: 0; }
.st-row .st-main code { white-space: normal; word-break: break-all; }

/* ── 선거 › 선거분석·여론조사 '데이터' 칸 (10-07 밤 대표님 "기본 화면은 데이터, 그리고 AI 와 대화") - eldata.js ── */
.pj-new.data { max-width: 1180px; width: 100%; display: flex; flex-direction: column; gap: 28px; }
.eld-ch .grow, .eld-rh .grow, .eld-pdh .grow, .eld-pkft .grow { flex: 1 1 auto; }
.eld-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.eld-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eld-h h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.eld-h small { color: var(--text-3); font-size: 12.5px; }
.eld-h .btn { margin-left: auto; }
.eld-pad { padding: 18px 20px; }
.eld-cap { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.eld-cap b { color: var(--text-2); }
.eld-cap a { color: var(--accent-text); }
/* 우리 지역 표 - 칸 = 1위 정당 색 */
.eld-gridcard { padding: 6px; overflow: hidden; }
.eld-gwrap { overflow-x: auto; }
.eld-gt { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.eld-gt thead th { padding: 8px 6px 4px; font-weight: 600; vertical-align: bottom; text-align: center; white-space: nowrap; }
.eld-gt thead th b { display: block; font-size: 14px; color: var(--text); }
.eld-gt thead th small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.45; }
.eld-gt .eld-rn { text-align: left; padding: 6px 10px; font-weight: 700; white-space: nowrap; color: var(--text); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.eld-gt thead .eld-rn { color: var(--text-3); font-size: 12px; }
.eld-gt tr.tot .eld-rn { color: var(--accent-text); }
.eld-gc { text-align: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; min-width: 96px; transition: box-shadow .15s var(--ease); }
.eld-gc:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.eld-gc b { display: block; font-size: 13.5px; }
.eld-gc small { display: block; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.eld-gt tr.tot .eld-gc small { color: var(--text); font-weight: 700; }
.eld-gc.empty, .eld-pc.empty { color: var(--text-3); cursor: default; text-align: center; }
.eld-pch, .eld-pc { border-left: 1px solid var(--line-2); }
.eld-pc { text-align: center; padding: 7px 10px; white-space: nowrap; }
.eld-pc b { display: block; font-size: 13.5px; }
.eld-pc b.con { color: #ff5a63; }
.eld-pc b.pro { color: #7d9bff; }
.eld-pc small { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 선거 결과 보기 */
.eld-pick { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.eld-pkrow { display: flex; gap: 10px; flex-wrap: wrap; }
.eld-pkrow label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.eld-pkrow label span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.eld-pkrow .select { min-width: 120px; max-width: 100%; }
.eld-pkft { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eld-res { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.eld-rh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eld-rh h3 { margin: 0; font-size: 18px; font-weight: 800; }
.eld-rh small { color: var(--text-3); font-size: 12.5px; }
.eld-to { font-size: 13px; color: var(--text-2); }
.eld-to b { font-size: 16px; color: var(--text); margin-left: 4px; }
.eld-dist { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.eld-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.eld-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eld-stat { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eld-stat small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.eld-stat b { font-size: clamp(18px, 2vw, 25px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eld-stat span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.eld-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.eld-ch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.eld-ch > b { font-size: 15.5px; }
.eld-ch small { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.eld-rk { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.eld-win, .eld-first { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: var(--pill); }
.eld-win { background: rgba(63, 194, 140, .16); color: var(--accent-text); }
.eld-first { background: var(--surface-3); color: var(--text-2); }
.eld-pt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.eld-pt i, .eld-tt th i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: 1px; }
.eld-pt i { margin-right: 0; }
.eld-cp { font-size: 16px; font-variant-numeric: tabular-nums; }
.eld-bar { height: 7px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.eld-bar i { display: block; height: 100%; border-radius: 6px; }
.eld-blk { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eld-blk h4 { margin: 0; font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eld-blk h4 small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.eld-filter { margin-left: auto; max-width: 180px; padding: 6px 12px; font-size: 12.5px; }
.eld-twrap { overflow: auto; max-height: 520px; border: 1px solid var(--line-2); border-radius: 10px; }
.eld-tt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eld-tt th, .eld-tt td { padding: 7px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.eld-tt thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; border-top: 0; z-index: 2; text-align: right; }
.eld-tt thead th:first-child { text-align: left; left: 0; z-index: 3; }
.eld-tt tbody th { text-align: left; font-weight: 600; color: var(--text); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.eld-tt td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.eld-tt td small { display: block; font-size: 11px; color: var(--text-3); }
.eld-tt td.mx { color: var(--text); font-weight: 800; }
.eld-tt tr.go { cursor: pointer; }
.eld-tt tr.go:hover th, .eld-tt tr.go:hover td { background: var(--surface-2); }
.eld-src { border-top: 1px solid var(--line); padding-top: 12px; }
/* 여론조사 - 여조 패널 + 고른 조사 + 자세히 */
.pp-more { margin-left: 8px; background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pp-more:hover { text-decoration: underline; }
.eld-ptable tr.go { cursor: pointer; }
.eld-ptable tr.go:hover td { background: var(--surface-2); }
.eld-ptable tr.on td { background: rgba(63, 194, 140, .08); }
.eld-modal .modal__body { align-content: start; }
.eld-pd { width: min(980px, 100%); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.eld-pdh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eld-pdh h3 { margin: 0; font-size: 20px; font-weight: 800; }
.eld-pdh small { color: var(--text-3); font-size: 12.5px; }
.eld-pd2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.eld-xtabs { display: inline-flex; gap: 6px; margin-left: 4px; flex-wrap: wrap; }
.eld-xts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.eld-xt h5 { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.eld-xt table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eld-xt th, .eld-xt td { padding: 6px 8px; border-top: 1px solid var(--line); }
.eld-xt thead th { color: var(--text-3); font-weight: 600; border-top: 0; text-align: right; }
.eld-xt tbody th { text-align: left; font-weight: 600; color: var(--text-2); }
.eld-xt td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 72px;
  background: linear-gradient(90deg, transparent calc(100% - var(--w)), color-mix(in srgb, var(--c) 26%, transparent) calc(100% - var(--w))); }
@media (max-width: 760px) {
  .eld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eld-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eld-pd2 { grid-template-columns: 1fr; }
  .eld-res { padding: 16px 14px; }
  .eld-pd { padding: 16px 14px; }
  .eld-pkrow label { flex: 1 1 140px; }
  .eld-pkrow .select { width: 100%; }
}
/* 선거분석·여론조사 - 가운데 데이터(+ 보고서) · 오른쪽 AI 대화 (10-08 대표님 "가운데 데이터 보면서 AI 와 대화를 오른쪽 영역 - 기초자료가 필요 없으니") */
.pj.pj-dc { grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 460px); }
.pj-dc .pj-chat { display: flex; flex-direction: column; overflow: hidden; }
.pj-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pj-chat-x { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pj-chat-x .grow { flex: 1 1 auto; }
.pj-chat .cp-hello { padding: 22px 16px 6px; }
.pj-chat .ws-hello h2 { font-size: 18px; margin: 4px 0 6px; }
.pj-chat .ws-hello p { font-size: 13px; line-height: 1.6; }
.pj-chat .cp-starters { grid-template-columns: 1fr; }
.pj-chat .ai-thread { padding: 20px 14px 18px; gap: 20px; }
.pj-chat .cp-composer { padding: 8px 12px 12px; }
.pj-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pj-pane > .ai-scroll { min-height: 0; }
.pj-name { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 auto; }
.pj-name > b { font-size: 16px; padding: 5px 8px; }
.pj-name > small { color: var(--text-3); font-size: 12px; }
.pj-name .pj-title { flex: 0 1 380px; }
.eld-area { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.eld-area .select { max-width: 100%; }
@media (max-width: 1180px) { .pj.pj-dc { grid-template-columns: minmax(0, 1fr); } .pj-dc .pj-side { width: min(460px, 100vw); } .pj-chat-x { display: flex; } }
@media (max-width: 860px) { .pj-name { flex-basis: 100%; } .pj-name > small { display: none; } }
/* 대화창 첨부 (10-08 대표님 "개인적인 첨부 파일을 올리며 엮어서 물어볼 수 있게") - chatpanel attach · project.js chatFiles */
.cp-att { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-att:hover { color: var(--text); border-color: var(--text-3); }
.cp.drag .composer { border-color: var(--accent-text); box-shadow: 0 0 0 2px rgba(63, 194, 140, .25); }
.cp-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cp-chips-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.cp-chips-h b { color: var(--accent-text); }
.cp-chips-h small { color: var(--text-3); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 112px; overflow: auto; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 9px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 12px; cursor: pointer; min-width: 0; }
.cp-chip:hover { border-color: var(--text-3); }
.cp-chip i { display: inline-flex; color: var(--text-3); }
.cp-chip b { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-chip small { color: var(--text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cp-chip small .bad { color: #ff8a8f; }
.cp-chip small .warn { color: var(--gold); }
.cp-chip.up { cursor: default; }
.cp-chip.bad, .cp-chip.failed { border-color: rgba(229, 72, 77, .45); }
.cp-chip button { border: 0; background: transparent; color: var(--text-3); width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.cp-chip button:hover { color: var(--text); background: var(--surface-3); }
.cp-chip button svg { width: 12px; height: 12px; }
.cp-attrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-attrow small { font-size: 11.5px; color: var(--text-3); }
.cp-attform { display: flex; gap: 6px; align-items: center; }
.cp-attform.col { flex-direction: column; align-items: stretch; }
.cp-attform.col div { display: flex; justify-content: flex-end; gap: 6px; }
.cp-attform input, .cp-attform textarea { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line-2); background: var(--canvas-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--text); outline: none; resize: vertical; }
.cp-attform input:focus, .cp-attform textarea:focus { border-color: var(--accent-text); }
/* 선관위 자료 검색 - 법령정보 '자료 검색' 과 선거사무장 가운데 칸 공용 (law.js affairsSearch) */
.lw-afs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lw-ask { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lw-ask:hover { text-decoration: underline; }
/* 법령정보 오른쪽 AI 대화 (10-08) - 머리 줄(새 대화)은 늘 보이고 '닫기' 는 서랍일 때만 */
.pj-chat-x.on { display: flex; }
.lw-mob { display: none !important; }
.lw-modes .pj-mt-btn { margin-left: auto; border-color: var(--accent-text); color: var(--accent-text); }   /* 'AI 대화' 는 보기 모드가 아니다 - 다른 탭처럼 녹색 테두리로 오른쪽 끝 */
@media (max-width: 1180px) { .lw-mob { display: inline-flex !important; } }

/* ══════════════ 휴대폰 점검 2차 (10-08 대표님 "다시 모바일 최적화 - 입력창 삐구 난 것들 · 난해 · 브리핑 목록 덕지덕지, 좌측 접히게") ══════════════
   8개 화면 묶음을 390·360px 로 재고 찍어 본 결과 (scratchpad mob/result.json). 아이폰 입력 확대는 위 (pointer: coarse) 16px 규칙이 이미 막고 있었고,
   '입력창 삐구' 는 그 규칙으로 칸만 40~46px 로 커지고 옆 단추·고르기는 34~38px 라 한 줄이 어긋나던 것 */

/* ☰ 서랍 공통 - 서랍 안 닫기 단추 · ☰ 40px · 넓은 서랍 폭 (닫을 띠가 31px 뿐이었다) */
.ai-side-x { display: none; }
@media (max-width: 860px) {
  .ai-side__top .ai-side-x { display: grid; flex: 0 0 auto; width: 40px; height: 40px; color: var(--text-2); }
  .ai-side__top.x-only { justify-content: flex-end; padding: 8px 10px 0; }   /* 법령정보(목록 없는 탭) - 닫기 단추만 */
  .wide-side .ai-side { width: min(340px, 86vw); }
  .wide-side .wr-kind { font-size: 12.5px; letter-spacing: -0.04em; }
}
@media (min-width: 861px) { .ai-side__top.x-only { display: none; } }
@media (pointer: coarse) {
  .ai-top .icon-btn { width: 40px; height: 40px; margin-block: -6px; color: var(--text-2); }   /* 음수 여백이라 머리줄 45px 그대로 */
  .ai-top .icon-btn:first-child { margin-left: -8px; }
  .ai-top .icon-btn:last-child:not(:first-child) { margin-right: -8px; }
}

/* 브리핑 - 지난 회차 ☰ 왼쪽 서랍 (960px 이하). 961px 이상은 왼쪽 sticky 목록 그대로 */
.bs-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bs-top .bs-urgent { flex: 1 1 auto; width: auto; margin-bottom: 0; }
.brief-mtop, .brief-backdrop, .brief-side .ai-side-x { display: none; }
@media (max-width: 960px) {
  .page.brief-page { padding-top: 0; }
  .brief-mtop { display: flex; align-items: center; gap: 8px; position: sticky; top: var(--nav-top, var(--nav-real, var(--nav-h))); z-index: 30;
    margin: 0 calc(-1 * var(--gutter)) 14px; padding: 8px var(--gutter) 8px 12px;
    background: rgba(14, 19, 17, .94); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
  .brief-mtop .icon-btn { width: 40px; height: 40px; margin: -6px 0 -6px -8px; color: var(--text-2); }
  .brief-mtop .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .brief-side { display: block; position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); max-height: none;
    border-radius: 0; border-width: 0 1px 0 0; background: var(--canvas-2); box-shadow: none;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(20px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  .brief.side-open .brief-side { transform: none; visibility: visible; transition: transform .25s var(--ease); box-shadow: var(--shadow-float); }
  .brief.side-open .brief-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); touch-action: none; }
  html:has(.brief.side-open) { overflow: hidden; }   /* 서랍이 열린 동안 뒤 화면이 같이 굴러가지 않게 */
  .brief-side .ai-side-x { display: grid; flex: 0 0 auto; width: 40px; height: 40px; color: var(--text-2); }
  .bs-slot { padding: 11px 12px; }                   /* 손가락 높이 43px */
}

/* 브리핑 머리띠 - 휴대폰은 제목·정보 먼저, 작업 단추는 2열 (단추 10개가 제목 위에서 4줄로 들쭉날쭉했다) */
.ba-media { display: contents; }   /* 데스크톱은 지금과 같은 한 줄 */
@media (max-width: 640px) {
  .brief-band { padding: 18px 16px; }
  .brief-top { display: contents; }
  .brief-band > h1 { order: 1; margin-top: 2px; }
  .brief-band > .brief-meta { order: 2; }
  .brief-band > #tts-slot { order: 4; }
  .brief-actions { order: 3; margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .brief-actions > * { display: flex; min-width: 0; }
  .brief-actions > .ba-media { grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
  .ba-media > * { display: flex; flex: 1 1 calc(50% - 3px); min-width: max-content; }   /* 긴 상태 글은 혼자 한 줄 */
  .brief-actions > span:empty, .ba-media > span:empty { display: none; }
  .brief-actions > .btn, .brief-actions span > .btn, .brief-actions span > .btn-pair { flex: 1 1 auto; }
  .brief-actions .btn-pair > .btn { flex: 1 1 0; }
  .brief-actions .btn, .brief-actions .btn-pair > .btn { padding: 8px 6px; }
  .brief-actions .btn svg { display: none; }
  /* 기사 카드 - 순위 원을 단추 줄 왼쪽에 띄우고 제목·요약은 카드 폭 그대로 (2열 격자는 순위 칸 42px 가 끝까지 비었다) */
  .bi { display: block; }
  .bi-rank { float: left; margin: 0 8px 6px 0; }
  .bi h3 { clear: both; }
}
/* A4 창 - 그림을 누르면 원본 새 탭 (링크로 감싸면 손가락 터치 보정이 여백 탭까지 끌어가 빈자리 닫기가 안 됐다) */
.modal__body > img { cursor: zoom-in; }

/* 입력줄 - 손가락 화면 16px 강제로 커진 칸과 옆 단추·고르기를 한 줄 40px 로 ('입력창 삐구' 의 본체) */
@media (pointer: coarse) {
  .st-in > input, .st-in > .select, .st-in > .btn,
  .news-tools .search > input, .news-tools .search > .btn,
  .cp-attform:not(.col) > input, .cp-attform:not(.col) > .btn,
  .rcs-btn select.sms-in, .rcs-btn__r > input,
  .sms-mng__add > .sms-in, .sms-mng__add > .btn { height: 40px; min-height: 0; padding-block: 0; }
  .news-tools .search > input { -webkit-appearance: none; appearance: none; }
  .news-tools .search > .btn { padding-inline: 16px; }
  .rcs-btn .icon-btn { width: 36px; height: 40px; }
}
.search input::-webkit-search-decoration { -webkit-appearance: none; }
/* 좁은 화면 줄바꿈 - 단추가 혼자 다음 줄 왼쪽으로 떨어지지 않게 */
@media (max-width: 640px) {
  .st-in > input { flex: 1 1 120px; }
  .st-in:has(> input + input) > input { flex-basis: 100%; }     /* 칸 둘 이상(채널·봇·OAuth) = 칸마다 한 줄, 단추는 끝에 */
  .st-in > .select { flex: 1 1 auto; min-width: 0; }
  .st-in > .btn-primary { margin-left: auto; }
  .sms-mng__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }   /* [번호] / [이름 | 추가] */
  .sms-mng__add #mnum { grid-column: 1 / -1; }
}

/* 대화 입력창 공용 (AI 탭 · 제작·선거 대화) - 보내기 원이 찌그러지고 모델·단계 칸이 잘리던 것 */
.composer .send { flex: 0 0 auto; }
@media (max-width: 720px) {
  .cp-composer { padding: 6px 10px 10px; }
  .composer textarea { max-height: 128px; overflow-y: auto; }   /* 5줄까지, 넘치면 칸 안에서 스크롤 */
  .composer .ctl > .select { max-width: none; }
  .composer #effort, .composer #cpe { flex-shrink: 3; }
  .cp-ref { padding: 4px 4px 4px 6px; gap: 8px; margin-bottom: 6px; }
  .cp-ref img { width: 32px; height: 32px; }
  .cp-out__imgs img { max-height: 220px; }
}
@media (max-width: 520px) {
  /* 두 줄: [클립][입력칸][보내기] / [모델 ▾][단계 ▾] - 첨부·자료 칩·다듬기 표가 있으면 그 위 */
  .composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px;
    grid-template-areas: 'top top top top' 'ref ref ref ref' 'clip ta ta send' 'model model effort effort';
    padding: 10px 10px 10px 12px; border-radius: 20px; }
  .composer:not(:has(.att-btn, .cp-att)) { grid-template-areas: 'top top top top' 'ref ref ref ref' 'ta ta ta send' 'model model effort effort'; }
  .composer > .att-row, .composer > .cp-files { grid-area: top; }
  .composer > .cp-ref { grid-area: ref; }
  .composer > textarea { grid-area: ta; align-self: center; }
  .composer .ctl { display: contents; }
  .composer .ctl > .grow { display: none; }
  .composer .att-btn, .composer .cp-att { grid-area: clip; align-self: end; width: 38px; height: 38px; }
  .composer .send { grid-area: send; align-self: end; width: 38px; height: 38px; }
  .composer .ctl > .select { min-width: 0; margin-top: 8px; }
  .composer #model, .composer #cpm { grid-area: model; }
  .composer #effort, .composer #cpe { grid-area: effort; }
  /* Thinking 토글 (10-09) - 단계 칸 자리, 줄 높이 전체가 누르는 자리 */
  .composer .ctl > .eff { grid-area: effort; justify-self: start; align-self: stretch; margin: 8px 0 0 -8px; padding: 0 8px; }
  /* 단계 풍선은 토글 왼쪽에 (모델 칸 위) - 위에 띄우면 '최대' 풍선이 화면 오른쪽 끝에서 잘리고 보내기 단추를 덮었다 (10-09 반증) */
  .composer .ctl > .eff .eff-tip { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translateY(-50%); transition: none; }
  /* 첨부 칩 - 문서 칩은 낮게, 칩 줄은 두 줄 반까지 (좁은 화면에서 입력칸 · 보내기 자리를 지킨다, 10-09 반증 360x640 은 5개부터 밀렸다) */
  .att-row { max-height: 146px; }
  .att-row .att.doc { height: 52px; }
  .att-row .att.doc .att-ic { width: 30px; height: 36px; }
}

/* ══ 음성 입력 (10-11 대표님 "서버 하나로 실시간") - public/js/voice.js. 마이크 단추는 첨부 단추 옆,
   듣는 동안의 상태 줄은 입력창 윗선에 걸린 탭이다 (패널 라인에 걸기 - 입력창 안에 상자를 새로 두르지 않는다. 탭 아랫변이 입력창 윗선을 덮는다).
   --vc-css 는 화면이 이 규칙이 있는 판인지 확인하는 표시 (열어 둔 옛 탭은 단추를 붙이지 않는다 - .eff 의 --eff-css 와 같다).
   --vc-auto 는 자동 보내기(10-12 - 스위치 · 곧 보냄 · 좁은 칸 짧은 안내) 모양을 아는 판 표시. voice.js 는 값 2 일 때만 자동 보내기를 켠다 -
     다른 값(없음 · 1)이면 그 단추를 붙이지 않고 지금처럼 사람이 멈추고 보낸다.
   --vc-cfm 은 보내기 전 확인(10-12 대표님 결정 - 구글 대화, .is-cfm · 듣는 표시 .vc-ear) 모양을 아는 판 표시. 없으면(10-12 저녁 판) voice.js 가
     확인 시간은 그대로 두고 곧 보냄 모양(.is-rec.vc-pend)을 빌린다.
   기본값을 먼저 두고 휴대폰 · 손가락은 아래 @media 에서만 바꾼다 (10-08 데스크톱 회귀 교훈) ══ */
.vc-mic { --vc-css: 1; --vc-auto: 2; --vc-cfm: 1; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text-2);
  display: inline-grid; place-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.vc-mic[hidden] { display: none; }
.vc-mic:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.vc-mic:active { transform: scale(.95); }
.vc-mic:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(63, 194, 140, .55); }
.vc-mic.off { color: var(--text-3); }                                   /* 받아쓰기 서버가 꺼져 있다 - 누르면 까닭을 알린다 */
.vc-mic.on, .vc-mic.on:hover { background: var(--red); border-color: var(--red); color: #fff; }   /* 듣는 중 - 누르면 멈추고 정리 */
.vc-mic.wait { cursor: default; }
.vc-mic .spin { width: 14px; height: 14px; }
.cp .vc-mic { width: 32px; height: 32px; }                              /* 오른쪽 대화창 - 옆 클립(.cp-att)과 같은 32px */
.composer:has(.vc-mic.on) { border-color: rgba(229, 72, 77, .55); }     /* 듣는 동안 입력창 테두리 - 빨간 점과 같은 색 */
/* 상태 탭 - 입력창(.composer, 가운데 정렬 최대 780px)과 같은 폭의 줄 안에서 왼쪽 둥근 모서리를 피해 붙는다 */
.vc-bar { position: relative; z-index: 2; display: flex; width: min(780px, 100%); margin: 0 auto -1px; padding-left: 24px; pointer-events: none; container-type: inline-size; }
.vc-bar[hidden] { display: none; }
.ai-hello .vc-bar { width: min(720px, 100%); }
.vc-tab { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 34px; padding: 3px 5px 3px 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 12px 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.vc-bar:has(+ .composer:focus-within) .vc-tab { border-color: rgba(63, 194, 140, .5); }   /* 입력창 테두리와 같은 색 */
.vc-bar:has(+ .composer .vc-mic.on) .vc-tab { border-color: rgba(229, 72, 77, .55); }
.vc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(229, 72, 77, .22); animation: vcBlink 1.2s ease-in-out infinite; }
@keyframes vcBlink { 50% { opacity: .35; } }
.vc-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.vc-time.late { color: var(--gold); }
.vc-lv { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.vc-lv i { width: 3px; height: 16px; border-radius: 2px; background: var(--accent-text); transform: scaleY(.18); transition: transform .08s linear; }
.vc-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-hint { color: var(--text-3); }
.vc-short { display: none; color: var(--text-2); }
/* 좁은 대화창(오른쪽 칸 · 휴대폰)은 긴 안내(' · 말을 마치면 바로 보냅니다')를 빼고, 자동 보내기를 아는 판이면 '듣는 중' 자리에 짧은 안내를 둔다 -
   켬 '말 끝나면 보냄' · 끔 '다 말하면 ■' (10-12 검토 10 · 11: 대표님이 쓰시는 오른쪽 칸 · 휴대폰에서 곧 보낸다는 것 · 끈 뒤 할 일이 안 보였다).
   듣는 중은 빨간 점 · 시계가 보인다. '듣는 중' 글자는 읽어 주기 프로그램만 읽는다 (안 보이게만) */
@container (max-width: 560px) {
  .vc-hint { display: none; }
  .vc-short { display: inline; }
  .vc-msg:has(> .vc-short) > .vc-st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 더 좁으면(휴대폰 390 · 법령정보 서랍) 소리 막대를 빼 짧은 안내 자리를 낸다 - 빨간 점 · 시계가 듣는 중을 보인다 */
@container (max-width: 380px) { .vc-bar:has([data-vc="auto"]) .vc-lv { display: none; } }
/* 아주 좁으면(휴대폰 360 · 데스크톱 오른쪽 대화 칸 · 제작 대화 칸) 스위치 이름을 '자동' 으로 줄이고 간격을 좁힌다. 곧 보냄 동안은 시계도 뺀다 (곧 보냅니다 자리) */
@container (max-width: 330px) {
  .vc-bar:has([data-vc="auto"]) .vc-tab { gap: 6px; }
  .vc-auto-x { display: none; }
  .vc-bar.vc-pend .vc-time, .vc-bar.vc-hold .vc-time { display: none; }   /* 확인 뒤 이어 받는 중(vc-hold)도 '저절로 안 보냄' 자리 */
}
.vc-warn { color: var(--gold); }
.vc-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.vc-b { padding: 4px 10px; border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.vc-b:hover { color: var(--text); border-color: var(--text-3); }
.vc-b.pri { border-color: var(--accent-text); color: var(--accent-text); }
.vc-x { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.vc-x:hover { background: var(--surface-2); color: var(--text); }
/* 자동 보내기 켜고 끄기 (10-12) - 듣는 동안만 보이는 작은 스위치. 켜짐 = 초록 (입력창 초점 테두리와 같은 색) */
.vc-auto { align-items: center; gap: 6px; }
.vc-auto i { position: relative; flex: 0 0 auto; width: 22px; height: 12px; border-radius: 6px; background: var(--line-2); transition: background .15s ease; }
.vc-auto i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); transition: transform .15s ease, background .15s ease; }
.vc-auto[aria-checked="true"] { border-color: rgba(63, 194, 140, .55); color: var(--accent-text); }
.vc-auto[aria-checked="true"] i { background: rgba(63, 194, 140, .28); }
.vc-auto[aria-checked="true"] i::after { transform: translateX(10px); background: var(--accent-text); }
/* 곧 보냄 (10-12 검토 6 · 9 · 10) - 받아 적은 글이 문장으로 끝나고 조용해지면 점이 초록으로 바뀌고 탭 아래 초록 줄이 찬다 (다 차면 멈추고 보낸다).
   그동안 스위치 자리에 [보내지 않기] - 누르면 여기서 멈추고 글은 입력칸에 둔다. 줄 길이는 voice.js 가 --vc-p (0~1) 로 준다 */
.vc-pend .vc-dot { background: var(--accent-text); box-shadow: 0 0 0 3px rgba(63, 194, 140, .22); animation: none; }
.vc-pend .vc-st { color: var(--accent-text); font-weight: 600; }
.vc-pend .vc-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-text);
  transform-origin: left center; transform: scaleX(var(--vc-p, 0)); transition: transform .1s linear; }
/* 상태마다 보이는 것 - 여는 중(is-open) · 듣는 중(is-rec) · 정리 중(is-fin, 정리 뒤 보낼 것이면 vc-to-send) · 정리 실패(is-fail) · 안내(is-err · is-note) */
.vc-tab > .spin, .vc-dot, .vc-time, .vc-lv, .vc-acts [data-vc] { display: none; }
.is-open .vc-tab > .spin, .is-fin .vc-tab > .spin { display: inline-block; flex: 0 0 auto; }
.is-rec .vc-dot, .is-rec .vc-time, .is-fin .vc-time, .is-rec .vc-lv { display: inline-flex; }
.is-rec .vc-dot { display: block; }
/* 정리 실패는 [다시 시도] [이 글 그대로] [취소] 만 이름으로 연다 - '모두 열고 몇을 닫기' 는 새 단추가 생길 때마다 실패 탭에 새어 나왔다 (10-13 검토 2) */
.is-open [data-vc="cancel"], .is-rec [data-vc="cancel"], .is-fin [data-vc="cancel"], .is-fail [data-vc="retry"], .is-fail [data-vc="keep"], .is-fail [data-vc="cancel"] { display: inline-block; }
.is-rec [data-vc="auto"] { display: inline-flex; }
.vc-to-send [data-vc="nosend"], .is-rec.vc-pend [data-vc="nosend"] { display: inline-block; }
.is-rec.vc-pend [data-vc="auto"] { display: none; }
.is-err [data-vc="close"], .is-note [data-vc="close"] { display: inline-block; }
.is-fail .vc-msg, .is-err .vc-msg, .is-note .vc-msg { white-space: normal; }
.is-fail .vc-msg { color: var(--gold); }
.is-err .vc-msg { color: #ff9a9d; }
.is-err .vc-tab, .is-note .vc-tab { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }   /* 긴 안내는 글만 줄을 바꾸고 × 는 오른쪽 위에 */
.is-err .vc-x, .is-note .vc-x { margin: -4px 0; }
.is-fail .vc-tab { flex-wrap: wrap; row-gap: 4px; padding-top: 5px; padding-bottom: 5px; }   /* 정리 실패 - 단추 셋이 모자라면 다음 줄 오른쪽으로 */
.is-fail .vc-acts { margin-left: auto; }
/* 보내기 전 확인 (10-12 대표님 결정 - 구글 대화만, voice.js CONFIRM_MS) - 저절로 멈춰 정리한 글을 입력칸에 두고 2초 뒤 보낸다.
   초록 점 · '2초 뒤 보냅니다 · 받아 적은 글을 확인해 주세요' · [보내지 않기](초록 - 막는 쪽을 강조) [취소], 탭 아래 곧 보냄 초록 줄이 줄어든다 (voice.js 가 --vc-p 1 → 0).
   탭에는 보내는 단추가 없다 (10-13 검토 1 · 2 · 10) - 곧 보냄 · 정리 중 · 확인 모두 [보내지 않기] [취소] 라 상태가 바뀌는 순간 눌러도 보내지 않는다.
   바로 보내기는 입력창의 보내기(↑) · Enter. 마이크 단추는 ■ (누르면 보내지 않음) 초록 테두리.
   마이크를 연 채 들을 때(vc-hear)는 둘째 줄 왼쪽에 소리 막대 + '말하면 이어 적고 안 보냄' (좁으면 '말하면 보내지 않음' - .vc-ear, 검토 8 - 확인 중에 듣는 표시가 없었다).
   정리하며 글이 바뀌었으면 바뀐 곳(.vc-chg)을 금색으로 (검토 9). 좁은 칸(오른쪽 대화 칸 · 휴대폰 - 구글 대화는 늘 여기)은 글 줄 + 단추 줄
   (말줄임 없이 - 글이 칸보다 길면 글만 줄을 바꾼다). 넓은 칸은 한 줄 */
.vc-mic.cfm { border-color: rgba(63, 194, 140, .55); color: var(--accent-text); }
.vc-mic.cfm:hover { border-color: var(--accent-text); color: var(--accent-text); }
.vc-cnt { font-variant-numeric: tabular-nums; }
.vc-chg { color: var(--gold); font-weight: 600; }
.vc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 읽어 주기 프로그램만 읽는다 */
.vc-ear { display: none; flex: 0 1 auto; min-width: 0; overflow: hidden; align-items: center; gap: 6px; margin-right: auto; padding-right: 8px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.vc-ear .vc-lv { flex: 0 0 auto; height: 14px; }
.vc-ear-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vc-ear-s { display: none; }
@container (max-width: 330px) { .vc-ear-l { display: none; } .vc-ear-s { display: block; } }   /* 데스크톱 오른쪽 칸 · 휴대폰 360 - 단추 둘 옆에 들게 짧게 */
.is-cfm .vc-dot { display: block; }
.is-cfm [data-vc="nosend"], .is-cfm [data-vc="cancel"] { display: inline-block; }
.is-cfm [data-vc="nosend"] { border-color: var(--accent-text); color: var(--accent-text); }
.vc-bar.is-cfm.vc-hear .vc-ear, .vc-bar.is-cfm.vc-hear .vc-ear .vc-lv { display: inline-flex; }
/* 확인 중에 다시 말해 이어 받아 적는 중 (vc-hold - 이번에는 저절로 보내지 않는다) - 스위치 대신 [보내지 않기] (확인 탭의 그 자리 그대로 - 누르려던 손이 스위치를 바꾸지 않게) */
.is-rec.vc-hold [data-vc="auto"] { display: none; }
.is-rec.vc-hold [data-vc="nosend"] { display: inline-block; }
@container (max-width: 560px) {
  .is-cfm .vc-tab { flex-wrap: wrap; row-gap: 4px; padding-top: 5px; padding-bottom: 5px; }
  .is-cfm .vc-msg { flex: 1 1 0; white-space: normal; }
  .is-cfm .vc-acts { flex: 1 0 100%; min-width: 0; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .vc-dot { animation: none; } .vc-lv i { transition: none; } .vc-pend .vc-tab::after { transition: none; } }
@media (pointer: coarse) {
  .composer .vc-mic { width: 38px; height: 38px; }                     /* 옆 클립 · 보내기와 같은 38px */
  .vc-b { padding: 7px 12px; }
  .vc-x { width: 34px; height: 34px; }
}
@media (max-width: 520px) {
  /* 두 줄 격자에 마이크 칸 - [클립][입력칸][마이크][보내기] / [모델 ▾][단계] (클립이 없으면 입력칸이 그 자리까지) */
  .composer:has(.vc-mic:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'top top top top top' 'ref ref ref ref ref' 'clip ta ta mic send' 'model model effort effort effort'; }
  .composer:has(.vc-mic:not([hidden])):not(:has(.att-btn, .cp-att)) { grid-template-areas: 'top top top top top' 'ref ref ref ref ref' 'ta ta ta mic send' 'model model effort effort effort'; }
  .composer .vc-mic { grid-area: mic; align-self: end; width: 38px; height: 38px; }
  /* 기초 자료(입력창 띠 · 자료 알약)와 함께 - 띠 줄과 알약 칸을 지키고 마이크 칸을 더한다. 따로 두면 서로의 격자를 덮어
     AI 탭은 띠가 뜨면 입력칸이 8px 로 눌리고, 제작 대화는 마이크가 셋째 줄로 밀렸다 (10-12 운영 판과 합칠 때) */
  .ai-nb .composer:has(.vc-mic:not([hidden])) { grid-template-areas: 'strip strip strip strip strip' 'top top top top top' 'ref ref ref ref ref' 'clip ta ta mic send' 'model model effort srcp srcp'; }
  .cp-composer .composer:has(> .src-strip):has(.vc-mic:not([hidden])) { grid-template-areas: 'strip strip strip strip strip' 'top top top top top' 'ref ref ref ref ref' 'clip ta ta mic send' 'model model effort effort effort'; }
  .vc-bar { padding-left: 20px; }
}

/* 가로 넘침 - 여조 패널 · 여론조사 자세히 창 · 작성 경고 칸 (+ 세로로 굴러가는 칸의 안전망) */
.pp, .eld-pd2 > div { container-type: inline-size; }   /* 여조 패널 · 여론조사 자세히 창의 정당 칸 - 자기 칸 폭 기준 */
.eld-pd2 > div { min-width: 0; }
@container (max-width: 343px) { .parties { grid-template-columns: minmax(0, 1fr); gap: 5px; } }   /* 정당 한 줄에 하나 - 패널이 좁을 때만 (휴대폰 · 선거 여론조사 좁은 칸) */
.modal__body { grid-template-columns: minmax(0, 1fr); }
.wr-flag, .wr-warn, .sum-err, .sum-err p { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .poll-grid { grid-template-columns: minmax(0, 1fr); }
  .pp { padding: 16px 14px; }
}
.ai-scroll, .cp-scroll, .modal__body { overflow-x: hidden; }   /* 표·코드·지역표는 자기 칸(.el-table·.eld-gwrap·.sms-tw·.md pre)에서 가로 스크롤 */

/* 프로젝트 머리줄 한 줄 (860px 이하) - 제작 · 선거 · 문자 (두 줄로 꺾여 대화 칸을 먹었다) */
@media (max-width: 860px) {
  .pj-head:has(> .pj-title) { flex-wrap: nowrap; padding: 6px 10px; }
  .pj-head:has(> .pj-title) > .pj-title { flex: 1 1 0; min-width: 0; }
  .pj-head:has(> .pj-title) > .grow { display: none; }
  .pj-head > .pj-del { display: none; }                     /* 휴대폰 삭제는 ☰ 목록 ⋯ 메뉴로 */
  .pj-name:not(:has(.pj-title)) { display: none; }          /* 선거 - 기록 없을 때 이름 줄은 ☰ 줄과 같은 말 */
  .pj.sms .pj-head { flex-wrap: nowrap; gap: 6px; }
  .pj.sms .pj-head > .grow { display: none; }
  .pj.sms .pj-seg { flex: 0 1 auto; min-width: 0; }
  .pj.sms #pjmt { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 480px) { .pj.sms .pj-seg button { padding: 6px 9px; font-size: 13px; } }

/* 창(모달) 공통 - 머리줄 불투명 · 닫기 40px (뒤 상단 메뉴가 비쳤다) */
.modal__body { overscroll-behavior: contain; }
.modal__bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__bar > span { flex: 0 0 auto; align-items: center; }
@media (max-width: 960px), (pointer: coarse) {
  .modal__bar { gap: 10px; background: var(--canvas); border-bottom: 1px solid var(--line); padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 8px; }
  .modal__bar .icon-btn { width: 40px; height: 40px; color: rgba(255, 255, 255, .85); }
  .modal { background: rgba(0, 0, 0, .94); }   /* 창 뒤 메뉴 둘째 줄이 비쳤다 */
  .modal__body { padding-top: 16px; }
}

/* 손가락 누름 영역 - 보이는 크기는 그대로, 누르는 자리만 넓게 */
@media (pointer: coarse) {
  .cv .more { width: 36px; height: 36px; margin: -5px -4px -5px 0; opacity: 1; }
  .att .x { width: 26px; height: 26px; }
  .msg-asst .foot .icon-btn, .md pre .copy { width: 36px; height: 36px; }
  .mt-it .icon-btn { width: 32px; height: 32px; margin: -5px -5px -5px 0; opacity: .8; }
  .cp-chip button { width: 30px; height: 30px; margin: -4px -4px -4px 0; }
  .mk-bh .icon-btn, .sms-dlg__h .icon-btn { width: 40px; height: 40px; margin: -6px -8px -6px 0; }
  .pp-foot a { display: inline-block; padding: 6px 4px; margin: -6px -4px; }
  .pp-more { padding: 6px 4px; margin: -6px -4px -6px 4px; }
  .lw-ask, .lw-dsrc a { padding: 7px 4px; margin: -7px -4px; }
}
/* 두 번 눌러 확인 - '빼기?' 가 좁은 아이콘 단추 안에서 세로로 꺾이던 것 */
.mt-it .icon-btn[data-armed], .cp-chip button[data-armed] { width: auto; padding: 0 9px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #ff8a8f; background: rgba(229, 72, 77, .14); border-radius: var(--pill); opacity: 1; }

/* 한국어 줄바꿈 - 낱말 단위로 (음절 가운데서 끊기던 것. 긴 주소·영문은 overflow-wrap 으로 끊긴다) */
.bi p, .brief-band .sub, .nr-title, .yt-list .yr-sub, .sum-hd h2, .sum-content,
.ws-hello h2, .eld-rh h3, .eld-cap, .lw-meta, .sms-cap,
.st-sh small, .st-gh small, .st-note, .st-main small { word-break: keep-all; overflow-wrap: anywhere; }
.sms-table td { word-break: keep-all; }      /* 표 칸은 anywhere 를 주면 최소폭이 한 글자로 줄어 다시 꺾인다 */
.cp-datast { display: block; }
.cp-datast b { margin: 0 3px; }

/* 배치·입력 방식에 따라 바뀌는 말 - 휴대폰에는 오른쪽 칸·끌어다 놓기·단축키가 없다 */
.lay-narrow { display: none; }
@media (max-width: 1180px) { .lay-wide { display: none; } .lay-narrow { display: inline; } }
@media (pointer: coarse) { .desk { display: none; } }

/* 휴대폰 여백 - 1105줄 640px 규칙이 1209줄 .pj-new 에 덮여 죽어 있던 것 되살림 */
@media (max-width: 640px) {
  .pj-new, .pj-new.wide { padding: 18px 14px 40px; }
}

/* 아이폰 터치 기본 동작 - 두 번 빨리 누르는 확인 단추가 더블탭 확대로 먹히지 않게 · 탭 회색 번쩍임 */
html { touch-action: manipulation; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* 날짜 칸 · 고르기 칸의 아이폰 기본 모양 - 옆 칸과 높이·정렬을 맞춘다 */
@media (pointer: coarse) {
  .sms-at, .dbf input[type=date] { -webkit-appearance: none; appearance: none; text-align: left; }
  .sms-at::-webkit-date-and-time-value, .dbf input[type=date]::-webkit-date-and-time-value { text-align: left; }
  .sms-at { padding-block: 0; }
  .dbf input[type=date] { display: block; min-height: 46px; line-height: 1.6; }
  select.sms-in { -webkit-appearance: none; appearance: none; padding-right: 30px;
    background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
}

/* 안전 영역 - 토스트가 홈 표시줄에 붙지 않게 (index.html 은 viewport-fit=cover 를 빼 사파리가 노치 쪽을 비운다) */
.toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ── 도구 (10-08 휴대폰 점검) ── */
/* 이미지링크·링크단축 목록 - 주소가 세로로 4~6줄 꺾이고 썸네일이 띠로 찌그러지던 것: 첫 줄 = 썸네일 + 주소, 둘째 줄 = 클릭수 · 단추 */
@media (max-width: 640px) {
  .tl-links li { flex-wrap: wrap; gap: 8px; }
  .tl-links li > a { flex: 0 0 auto; }
  .tl-links img { width: 48px; height: 48px; display: block; }
  .tl-lmain { flex: 1 1 calc(100% - 64px); }
  .tl-links li:not(:has(> a)) > .tl-lmain { flex-basis: 100%; }
  .tl-clicks { margin-right: auto; }
}
.tl-q { display: inline-flex; align-items: center; gap: 6px; }
/* 문자 - 카드 머리 (제목이 한 글자씩 세로로 꺾였다) · 오른쪽 끝 정렬 */
.sms-ph .grow, .sms-card h3 .grow { flex: 1 1 auto; }
@media (max-width: 640px) {
  @container (max-width: 599px) {
    .sms-card h3 { flex-wrap: wrap; row-gap: 6px; }
    .sms-card h3 > .grow { flex: 1 0 100%; height: 0; }
    .sms-pvw { display: none; }                                 /* 폰 미리보기 663px 가 작성과 받는 사람 사이를 막던 것 - 맨 아래 '미리보기' 창이 같은 일을 한다 */
    .ws-head__t .ws-status { margin-left: 0; }
  }
}
@container (max-width: 599px) {
  /* 발송 내역 - 좁으면 카드형: 일시 / 타입·상태 / 건수 + 오른쪽 '더보기' (화면 밖에 있었다) */
  .sms-htable thead { display: none; }
  .sms-htable, .sms-htable tbody { display: block; }
  .sms-htable tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'd d m' 't s m' 'c c c'; gap: 6px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sms-htable td { padding: 0; border: 0; }
  .sms-htable td:nth-child(1) { grid-area: d; }
  .sms-htable td:nth-child(2) { grid-area: t; }
  .sms-htable td:nth-child(3) { grid-area: c; }
  .sms-htable td:nth-child(4) { grid-area: s; }
  .sms-htable td:nth-child(5) { grid-area: m; width: auto; }
  .sms-htable .sms-cnt { white-space: normal; gap: 4px 12px; }
}
.sms-wrap .sms-tag, .sms-dlg__chips .sms-tag { white-space: nowrap; }   /* 문자 화면만 - 전역이면 자료 검색의 긴 출처 알약이 카드 밖으로 나갔다 */
.lw-dsrc .sms-tag { overflow-wrap: anywhere; min-width: 0; }
/* 스피드 모드 - 세로로 쓸면 스크롤 (손가락은 0.25초 누르고 있어야 채운다, sms.js) */
.sms-sp__wait { touch-action: pan-y; -webkit-touch-callout: none; }
@media (pointer: coarse) {
  .sms-opts { gap: 4px; }
  .sms-opt { min-height: 40px; }
  .sms-sw { width: 44px; height: 26px; border-radius: 13px; }
  .sms-sw i { width: 22px; height: 22px; }
  .sms-sw.on i { transform: translateX(18px); }
  .sms-lnk { padding: 10px 6px; margin: -10px -6px; }
  .sms-fbtn { padding: 8px 14px; }
  .sms-pg .icon-btn, .sms-mng li .icon-btn, .sms-img .icon-btn { width: 36px; height: 36px; }
  .sms-bk-name { border-color: var(--line-2); background: var(--canvas); }   /* 그룹 이름은 고칠 수 있는 칸 - 제목처럼 보였다 */
}
@media (max-width: 640px) { .sms-at:disabled { display: none; } }   /* 즉시발송이면 빈 예약 칸을 숨긴다 */

/* ── 뉴스·사설·여조·지표 (10-08 휴대폰 점검) ── */
/* 목록 행 - 반응 줄이 '텔레' 단추 위에 겹쳐 찍히고 행마다 칸이 달리 접히던 것: [순위 메타 … 요약 텔레] / 제목 / 리드 / 반응 4칸 */
@media (max-width: 720px) {
  .nr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'rank meta acts' 'title title title' 'lead lead lead' 'stats stats stats'; align-items: center; gap: 4px 8px; padding: 12px 6px; }
  .nr > div:first-of-type { display: contents; }
  .nr-rank { grid-area: rank; min-width: 16px; text-align: left; font-size: 14px; }
  .nr-meta { grid-area: meta; margin: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; }
  .nr-title { grid-area: title; }
  .ed-lead1 { grid-area: lead; margin-top: 0; }
  .nr .row-acts { grid-area: acts; flex-direction: row; width: auto; gap: 6px; }
  .nr .row-acts .btn { min-width: 50px; }
  .nr .row-acts .tele-btn { min-width: 64px; }
  .nr-stats { grid-area: stats; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 2px; align-items: start; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
  .nr-stats small { white-space: normal; }
  .nr-stats .cmt { grid-area: 1 / 1; align-self: start; }
  .nr-stats > span:last-child { grid-area: 1 / 1; align-self: end; font-size: 11px; }
  /* 도구 줄 - 날짜 칩 8개 대신 고르기 하나 (도구만 165px 를 먹었다) */
  .news-tools.one #dates { display: none; }
  .news-tools.one .date-sel { display: block; flex: 0 1 auto; min-width: 0; height: 36px; padding-block: 0; color: var(--text); }
  .news-tools.one .ed-reload { margin-left: auto; }
  /* 화면 머리 - 위 여백·제목 줄이고 '확인 시각' 은 소제목 줄 오른쪽 끝 */
  .page { padding-top: 16px; }
  .page-head { position: relative; margin-bottom: 14px; }
  .page-head h1 { font-size: 21px; }
  .page-head > #at { position: absolute; top: 0; right: 0; font-size: 12px; line-height: 18px; }
}
.date-sel { display: none; }
@media (max-width: 380px) { .nr-stats { font-size: 12px; } .nr-stats small { font-size: 10.5px; } }
@media (max-width: 480px) {
  .pager { gap: 4px; }
  .pager .chip { min-width: 34px; padding: 6px 0; }
  .pager .gap { padding: 6px 0; }
  .q .val.long { font-size: 16px; }                                  /* 비트코인 '원' 만 둘째 줄로 꺾이던 것 */
  .ind-grid > .q:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 홀수 묶음 마지막 칸 빈자리 */
}

/* ── 유튜브 · 모니터링 (10-08 휴대폰 점검) ── */
@media (max-width: 760px) {
  /* 영상 행 - 단추 세 개 세로 기둥이 제목 칸을 80~110px 로 눌렀다: 단추는 행 맨 아래 한 줄 */
  .yt-list .yr { grid-template-columns: 120px auto minmax(0, 1fr); grid-template-areas: 't m m' 't v c' 'a a a'; gap: 4px 12px; padding: 12px 8px; align-items: start; }
  .yt-list .yr-thumb img { width: 120px; }
  .yt-list .yr-num { white-space: nowrap; }
  .yt-list .yr-v { grid-area: v; }
  .yt-list .yr-c { grid-area: c; }
  .yt-list .yr .row-acts { grid-area: a; flex-direction: row; justify-content: flex-end; justify-self: stretch; width: auto; gap: 6px; margin-top: 6px; }
  .yt-list .yr .row-acts .btn { min-width: 72px; }
  .yr-sfx { display: none; }
}
@media (max-width: 720px) {
  /* 머리·조작 카드 - 보기 탭과 동작 칩이 섞여 4줄 */
  .yt-headrow .sub { display: none; }
  .yt-bar { gap: 8px; padding: 10px 12px; }
  .yt-tabs { display: contents; }
  .yt-filter { order: 1; }
  .yt-bar [data-manage] { order: 2; }
  .yt-bar [data-monitor], .yt-bar [data-reload] { order: 3; }
  .yt-info { order: 4; flex: 1 1 100%; font-size: 12.5px; }
  .yt-bar [data-tab] { order: 5; }
  /* 모니터링 - 통계 3열 · 시간 칸 · 탭 구분선 = 줄 나눔 · 제목 3줄 */
  .ym-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ym-tile { min-height: 0; padding: 8px 10px; }
  .ym-tile:last-child { grid-column: auto; }
  .ym-tile.paid { grid-column: span 2; }
  .ym-tile b { font-size: 17px; }
  .ym-tile small { font-size: 11.5px; }
  .ym-tile em { white-space: normal; font-size: 11.5px; }
  .ym-row { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 7px 12px; }
  .ym-row.reply { padding-left: 24px; }
  .ym-t { white-space: normal; overflow: visible; font-size: 11.5px; }
  .ym-sep { flex-basis: 100%; height: 0; margin: 0; background: none; }
  .ym-title h1 { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 960px) {
  /* 채팅 목록 - 페이지 1,083px 아래 + 70vh 안쪽 스크롤 두 겹이던 것: 페이지와 같이 굴러가고 탭 줄은 메뉴 아래 고정 */
  .ym-feed { height: auto; min-height: 0; scroll-margin-top: calc(var(--nav-real, var(--nav-h)) + 8px); }
  .ym-rows { overflow: visible; flex: none; }
  .ym-tabs { position: sticky; top: var(--nav-top, var(--nav-real, var(--nav-h))); z-index: 5; background: var(--surface); border-radius: var(--r) var(--r) 0 0; }
}
@media (pointer: coarse) {
  .ym-kwchip { padding: 3px 3px 3px 12px; }
  .ym-kwchip button { width: 30px; height: 30px; font-size: 15px; }
  .yt-info .lnk, .ytm-main a, .ym-back { display: inline-block; padding: 7px 0; margin: -7px 0; }
}
.ym-kwchip button.arm { width: auto; padding: 0 9px; border-radius: var(--pill); background: #d62b2f; color: #fff; font-size: 12px; font-weight: 700; }

/* ── 요약 · 작성 (10-08 휴대폰 점검) ── */
.wr-kinds--top { display: none; }
@media (max-width: 860px) {
  .wrx .ai-top .tt { display: none; }
  .wr-kinds--top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 1 1 auto; min-width: 0; margin: 0; border: 1px solid var(--line-2); border-radius: var(--pill); overflow: hidden; background: var(--surface-2); }
  .wr-kinds--top .wr-kind { padding: 8px 0; font-size: 13.5px; white-space: nowrap; }
}
.sum-acts .tele-btn { min-width: 70px; }   /* '보내기?' 로 바뀌어도 다음 줄로 뛰지 않게 */
.sum-acts--end { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 640px) {
  .wr-form__ft .btn-primary { flex: 1 1 100%; padding: 11px 16px; font-size: 15px; }
  .sum-tabs .sum-acts { margin-left: auto; }
}
@media (pointer: coarse) {
  .wr-del, .sum-hd .lnk { display: inline-block; padding: 8px 4px; margin: -8px -4px; }
  .wr-req summary { padding: 8px 0; margin: -8px 0; }
  .wr-learn { padding: 8px 0; }
  .script .tc { padding: 4px 0; margin-top: -4px; margin-bottom: -4px; }
}
.wr-learn input { accent-color: var(--accent); }

/* ── 제작 (10-08 휴대폰 점검) ── */
/* '자료 N' · '주소록' 서랍 닫기 (닫으려면 왼쪽 어두운 띠를 정확히 눌러야 했다) */
.mt-x { display: none; }
@media (max-width: 1180px) {
  .pj .mt-x { display: inline-flex; }
  .mt-h { align-items: center; }
  .mt-h small { margin-left: auto; margin-right: 8px; }
}
/* 만들기 창 - 휴대폰은 꽉 찬 시트, 머리·단추 줄 고정, 고른 도구만 설명 (도구 14개가 1,618px 이고 '만들기' 가 맨 아래였다).
   .mk-box 는 문자 작은 창도 쓰므로 form.mk-box 로 좁힌다 */
.mk-ft { flex-wrap: wrap; }
.mk-ft .mk-paidnote { flex: 1 1 100%; }
@media (max-width: 640px) {
  .mk-modal:has(> form.mk-box) { padding: 0; }
  form.mk-box { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 0 16px; gap: 12px; }
  .mk-bh { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: calc(12px + env(safe-area-inset-top, 0px)) 0 8px; }
  .mk-ft { position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .mk-eng:not(:has(input:checked)) small { display: none; }
  /* 결과물 카드 머리 - 1줄 상태·도구 / 2줄 시각 / 3줄 단추 (단추가 두 줄 좌우로 갈라졌다) */
  .mk-oh > small { flex-basis: 100%; }
  .mk-oh > .grow { display: none; }
  /* 여러 장 결과물은 2열 (카드뉴스 6장이 한 장씩 쌓였다) */
  .mk-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-imgs.one { grid-template-columns: minmax(0, 1fr); }
  .cp-out__imgs:has(> figure + figure) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cp-out__imgs:has(> figure + figure) figcaption { flex-direction: column; align-items: stretch; gap: 4px; }
  /* 흐름 안내 1→2→3→4 - 화살표가 줄 맨 앞으로 떨어지던 것 */
  .ws-flow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ws-arrow { display: none; }
}

/* ── 선거 (10-08 휴대폰 점검) ── */
@media (max-width: 720px) {
  /* 여론조사 데이터 표 - 체크·기관·기간·긍정·부정·민주·국힘 / 지난 회차 - 회차·기간·긍정·부정·민주·국힘 */
  #pdt th:nth-child(4), #pdt td:nth-child(4), #pdt th:nth-child(9), #pdt td:nth-child(9), #pdt th:nth-child(10), #pdt td:nth-child(10) { display: none; }
  .eld-pd .eld-ptable th:nth-child(3), .eld-pd .eld-ptable td:nth-child(3), .eld-pd .eld-ptable th:nth-child(4), .eld-pd .eld-ptable td:nth-child(4),
  .eld-pd .eld-ptable th:nth-child(9), .eld-pd .eld-ptable td:nth-child(9), .eld-pd .eld-ptable th:nth-child(10), .eld-pd .eld-ptable td:nth-child(10) { display: none; }
  .eld-ptable input[type=checkbox] { width: 20px; height: 20px; }
}
/* 법령정보 - 제목 반복(☰ 줄이 이미 말한다) · 조문 머리 줄이기 · '↑ 찾기·장' · 장 바로가기 멈춤 자리 */
@media (max-width: 860px) {
  .lw-top > div:first-child { display: none; }
  .lw-modes { flex: 1 1 100%; }
}
.lw-up { display: none; }
@media (max-width: 640px) {
  .lw-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lw-dh { gap: 8px; padding: 12px 14px; }
  .lw-head, .lw-art { scroll-margin-top: 12px; }
  .lw-up { display: inline-flex; position: absolute; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 10px 14px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 700; box-shadow: var(--shadow-float); }
  .lw-up[hidden] { display: none; }
  .eld-pick { padding: 14px 12px; }
  /* 우리 지역 표 - 첫 열이 '잘못 투입·구분된 투표지' 글 폭(140px)으로 커져 선거 열이 2개만 보였다 */
  .eld-gt .eld-rn { white-space: normal; word-break: keep-all; min-width: 60px; max-width: 84px; font-size: 12.5px; padding: 6px; }
  .eld-gc { min-width: 78px; padding: 6px 4px; }
}
.lw-view { overflow: clip; }   /* hidden 이 sticky 기준 칸을 가로채 데스크톱 조문 머리도 안 붙었다 */
@media (pointer: coarse) { .lw-no { padding: 6px 0; margin: -6px 0 -2px; } }
/* 여론조사 - 'AI 가 읽는 조사' 가 패널 6개 아래 3,300px 였다: 바로가기 · 휴대폰은 추세선 뺀 짧은 패널 */
.eld-jump { display: none; }
@media (max-width: 760px) {
  .eld-jump { display: inline-flex; }
  #pdg .pp .trend { display: none; }
  #pdg .pp { padding: 16px; gap: 10px; }
  .eld-pkrow label:has([data-pk='key']) { flex-basis: 100%; }   /* '선거' 고르기만 한 줄 - 이름이 잘렸다 */
  .eld-stats:not(.three) .eld-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #pdt { max-height: none; }
  .eld-twrap { max-height: 60vh; }
}
@media (max-width: 400px) {
  .eld-stats.three .eld-stat { padding: 10px; }
  .eld-stat b { overflow-wrap: normal; white-space: nowrap; font-size: 17px; }
}
.eld-h .btn + .btn { margin-left: 0; }

/* ── 설정 (10-08 휴대폰 점검) ── */
@media (max-width: 640px) {
  .st-row[data-name] > .st-main, #tg .st-row:not(:has(.st-sw)) > .st-main { flex-basis: 96px; }   /* 키 줄이 [검증][교체][삭제] 를 이름 아래로 떨어뜨려 98px 두 줄이었다 */
  .st-acts .btn-sm { padding-inline: 10px; }
  .st-acts:has(.st-sel) { flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; }                                     /* 채널 줄 - '삭제' 하나가 셋째 줄로 */
  .st-acts .st-sel { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
  .st-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }                                   /* 탭 다섯 - 3열에 빈칸이 남았다 */
  .st-tabs button { grid-column: span 2; }
  .st-tabs button:nth-child(n+4) { grid-column: span 3; }
  .st-pft { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -14px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); flex-wrap: nowrap; box-shadow: 0 1px 0 var(--surface); }   /* 프로필 저장 - 늘 바닥에 (1px 틈으로 뒤 글이 비치지 않게) */
  .st-pft small { flex: 1 1 0; min-width: 0; }
}
@media (pointer: coarse) {
  .st-acts > .select { height: 34px; padding-block: 0; }
  .st-sw input { inset: -10px -8px; width: auto; height: auto; }   /* 켜고 끄기 스위치 누름 자리 36x20 → 52x40 (보이는 모양 그대로) */
}

/* ══ 휴대폰 점검 2차 검증 뒤 (10-08) ══ */
/* 한국어 줄바꿈 - 화면 전체 기본값. 낱말(어절) 가운데서 꺾이던 것이 칸마다 따로 남아 있었다. 긴 영문·주소는 넘칠 때만 끊는다 (break-word 는 표·격자 최소 폭을 줄이지 않는다) */
body { word-break: keep-all; overflow-wrap: break-word; }
.nw { white-space: nowrap; }
.wr-revise .btn { margin-left: auto; }
/* 뉴스·사설 반응 칸 - 반응이 없는 행에서 '댓글 -' 와 성별·연령 '-' 가 한 칸에 포개졌다: 1열은 위아래 두 줄, 긍정·중립·부정은 두 줄을 차지 */
@media (max-width: 720px) {
  .nr-stats > span:nth-child(1) { grid-area: 1 / 1; align-self: start; }
  .nr-stats > span:nth-child(5) { grid-area: 2 / 1; align-self: start; font-size: 11px; }
  .nr-stats > span:nth-child(2) { grid-area: 1 / 2 / 3 / 3; }
  .nr-stats > span:nth-child(3) { grid-area: 1 / 3 / 3 / 4; }
  .nr-stats > span:nth-child(4) { grid-area: 1 / 4 / 3 / 5; }
  .nr-meta .press { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 긴 언론사 이름은 말줄임 - 시각이 잘리던 것 */
  .nr-meta > span:last-child { flex: 0 0 auto; }
  .ym-title h1.open { display: block; -webkit-line-clamp: none; overflow: visible; }   /* 모니터링 제목 - 눌러서 펼친다 */
}
/* 만들기 창 - 내용이 짧아도 [취소][만들기] 줄은 시트 바닥 · 배지 줄바꿈 · 다듬기 표 × */
@media (max-width: 640px) { form.mk-box .mk-ft { margin-top: auto; } }
.mk-paid, .mk-free, .mk-rec { white-space: nowrap; }
@media (pointer: coarse) {
  .cp-ref .icon-btn { width: 36px; height: 36px; margin: -4px -4px -4px 0; }
  .composer .att-btn, .composer .send { width: 38px; height: 38px; }   /* 격자(520 이하) 밖에서도 고르기 38px 와 같은 높이 */
  .rcs-btn select.sms-in { padding-right: 28px; background-position: right 10px center; }   /* RCS 버튼 종류 - 화살표가 글 끝을 덮었다 */
}
/* 여론조사 자세히 '지난 회차' - 휴대폰은 창 안에서 표가 따로 굴러가지 않게 */
@media (max-width: 760px) { .eld-pd .el-table { max-height: none; } }
/* 선거 결과 카드 숫자 5칸 - 카드가 좁으면(데스크톱 오른쪽 대화가 열린 1024~1600 포함) 2열 (숫자가 세로로 꺾였다) */
.eld-res { container-type: inline-size; }
@container (max-width: 880px) {
  .eld-stats:not(.three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eld-stats:not(.three) .eld-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ══ 휴대폰 점검 3차 (2차 검증 뒤, 10-08) ══ */
/* 토스트 - 화면 절반 폭에 묶여 짧은 문구도 2~3줄이었다 · 긴 주소가 든 문구는 화면 밖으로 */
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; }
/* 해시태그 - 짧으면 한 덩어리, 줄보다 길면 칸 안에서 꺾인다 */
.wr-paras .nw { display: inline-block; max-width: 100%; white-space: normal; word-break: break-all; }
/* 띄어쓰기 없는 긴 이름(파일·칩) - 전역 keep-all 로 한 어절이 되어 칸 밖으로 나갔다 */
.sms-fbox { overflow-wrap: anywhere; }
.ws-hd > .muted { min-width: 0; overflow-wrap: anywhere; }
.mk-files .chip { max-width: 100%; overflow-wrap: anywhere; }
.mk-files .chip small { flex: 0 0 auto; white-space: nowrap; }
/* 지표 '장 마감' 배지 - 두 줄 이름 높이로 늘어나 동그라미가 됐다 */
.q .nm .badge { align-self: flex-start; min-height: 20px; }
/* 뉴스 검색 - '지우기' 가 붙으면 360 에서 입력칸이 좁아졌다 */
@media (max-width: 400px) { .news-tools .search > .btn { padding-inline: 12px; } }
@media (pointer: coarse) { .sms-bk-h .icon-btn { width: 36px; height: 36px; } }   /* 주소록 그룹 화면 뒤로 */

/* ══════════════ 제작 4칸 (10-08 대표님 "소카테고리 버튼들 2줄로, 왼쪽 목록 영역을 작성과 동일하게 줄이고,
   그 옆에 기초자료, 기초자료 자리엔 선거와 같은 AI 대화창") ══════════════
   목록 272px(탭 2줄) | 기초 자료 | 결과물·설정 | AI 대화. 1279px 이하 = 자료가 왼쪽 서랍('자료 N'), 1180px 이하 = 대화도 오른쪽 서랍('AI 대화'),
   860px 이하 = 목록도 서랍(☰). 기본값을 먼저, 폭별 규칙을 뒤에 둔다 (10-08 데스크톱 회귀 교훈) */
@media (min-width: 861px) { .ai.wide-side.ws-narrow { grid-template-columns: 272px minmax(0, 1fr); } } /* 860 이하의 1fr 을 이기지 않게 */
.wr-kinds.rows .wr-kind.rs { border-left: 0; }                         /* 둘째 줄 첫 탭 - 왼쪽 끝 선 겹침 없앰 */
.wr-kinds.rows .wr-kind.rn { border-top: 1px solid var(--line-2); }     /* 둘째 줄 - 줄 사이 선 */
.pj.pj-mk { grid-template-columns: clamp(232px, 16vw, 272px) minmax(0, 1fr) clamp(320px, 24vw, 420px); }
.pj-mats { border-right: 1px solid var(--line); background: var(--canvas-2); min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pj-mk .pj-chat { display: flex; flex-direction: column; overflow: hidden; }
.pj-mats-btn { display: none; }
.pj-mk .mk-empty .ws-flow { margin: 14px 0 16px; }
@media (max-width: 1279px) {
  .pj.pj-mk { grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 400px); }
  .pj-mats-btn { display: inline-flex; }
  .pj-mk .pj-mats { position: absolute; z-index: 40; top: 0; left: 0; bottom: 0; width: min(300px, 88vw); transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--shadow-float); }
  .pj.mats-open .pj-mats { transform: none; }
  .pj.mats-open .pj-side-bd { display: block; position: absolute; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
}
@media (max-width: 1180px) {
  .pj.pj-mk { grid-template-columns: minmax(0, 1fr); }
  .pj-mk .pj-side { width: min(460px, 100vw); }
}

/* ══════════════ 구글 (10-08 대표님 "'선거'와 'AI' 사이에 '구글', 세부로는 캘린더 · 드라이브 · 시트") ══════════════
   google.js - 제작과 같은 틀(목록 272px). 가운데 = 머리줄(.gw-bar) + 스크롤 칸(.gw-body) */
.gw { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gw-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; min-height: 53px; }
.gw-bar .grow { flex: 1 1 auto; }
.gw-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.gw-nav b { font-size: 16px; margin-left: 8px; white-space: nowrap; }
.gw-nav .icon-btn { width: 34px; height: 34px; }
.gw-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px; transition: opacity .15s ease; }
.gw-body.busy { opacity: .55; }
.gw-empty { padding: 48px 12px; text-align: center; color: var(--text-3); font-size: 14px; }
.gw-note { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 24px auto; }
.gw-note p { margin: 0; line-height: 1.6; font-size: 13.5px; }
.gw-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.gw-hint { font-size: 12.5px; margin: 0; line-height: 1.6; }
/* 왼쪽 */
.gw-side { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.gw-side > .btn, .gw-two .btn { justify-content: center; }
.gw-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.gw-sh b { font-size: 13px; color: var(--accent-text); flex: 0 0 auto; }
.gw-sh small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gw-up { display: flex; flex-direction: column; gap: 10px; }
.gw-ud h5 { margin: 0 0 4px; font-size: 12px; color: var(--text-3); font-weight: 700; }
.gw-none { font-size: 12.5px; color: var(--text-3); }
.gw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gw-two .btn { padding-left: 6px; padding-right: 6px; }
.gw-mkf { display: flex; flex-direction: column; gap: 6px; }
.gw-mkf input, .gw-card input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.gw-mkf input:focus, .gw-card input:focus { border-color: var(--accent-text); }
.gw-mkf div { display: flex; justify-content: flex-end; gap: 6px; }
.gw-views { display: flex; flex-direction: column; gap: 2px; }
.gw-views h5 { margin: 4px 0 4px; font-size: 12px; color: var(--text-3); }
.gw-view { text-align: left; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.gw-view:hover { background: var(--surface-2); color: var(--text); }
.gw-view.on { background: var(--surface-3); color: var(--text); }
.gw-perm p { margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.gw-perm b { color: var(--text); }
/* 일정 줄 - 목록 · 주 · 왼쪽 '앞으로 2주' · 그날 창 공용 */
.gw-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 7px 8px 7px 10px; margin-bottom: 4px; border: 0; border-left: 3px solid var(--c); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.gw-row:hover { background: var(--surface-3); }
.gw-rt { flex: 0 0 auto; min-width: 74px; padding-top: 1px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gw-rx { display: flex; flex-direction: column; min-width: 0; }
.gw-rx b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.gw-rx small { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
/* 월 */
.gw-mon { display: flex; flex-direction: column; min-width: 0; min-height: 100%; }
.gw-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-bottom: 6px; font-size: 12px; color: var(--text-3); text-align: center; }
.gw-dow .sun, .gw-day.sun .gw-dn { color: #ff8a8f; }
.gw-dow .sat, .gw-day.sat .gw-dn { color: #8ab4ff; }
.gw-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gw-day { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.gw-day:hover { background: rgba(255, 255, 255, .025); }
.gw-day.out > * { opacity: .45; }
.gw-dn { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.gw-day.today .gw-dn { background: var(--accent); color: #fff; }
.gw-chip { display: block; width: 100%; padding: 2px 6px; border: 0; border-left: 3px solid var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text); font: inherit; font-size: 12px; line-height: 1.45; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.gw-chip.bar { background: color-mix(in srgb, var(--c) 42%, transparent); }
.gw-chip:hover { filter: brightness(1.18); }
.gw-chip i { margin-right: 4px; font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gw-more { padding: 1px 6px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 700; text-align: left; cursor: pointer; }
.gw-more:hover { color: var(--text); text-decoration: underline; }
/* 주 */
.gw-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.gw-wd { min-width: 0; min-height: 180px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas-2); cursor: pointer; }
.gw-wd h4 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 12px; color: var(--text-3); }
.gw-wd h4 b { font-size: 18px; color: var(--text); }
.gw-wd.today { border-color: var(--accent-text); }
.gw-wd.today h4 b { color: var(--accent-text); }
.gw-wd.sun h4 span { color: #ff8a8f; }
.gw-wd.sat h4 span { color: #8ab4ff; }
.gw-wd .gw-row { flex-direction: column; gap: 2px; }   /* 좁은 칸 - 시각 위, 제목 아래 */
.gw-wd .gw-rt { min-width: 0; }
/* 목록 */
.gw-list { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; }
.gw-list h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.gw-list section.today h4 { color: var(--accent-text); }
/* 일정 창 · 양식 */
.gw-box { width: min(560px, 100%); }
.gw-ev { display: flex; flex-direction: column; gap: 10px; }
.gw-ev p { margin: 0; }
.gw-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.gw-when i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.gw-when small { padding: 1px 8px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.gw-loc { color: var(--text-2); font-size: 14px; }
.gw-desc { max-height: 40vh; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--canvas-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.gw-desc a { color: var(--accent-text); }
.gw-daylist { display: flex; flex-direction: column; }
.mk-ft .grow { flex: 1 1 auto; }
.gw-form { margin-top: 0; gap: 12px; }
.gw-form input:not([type=checkbox]), .gw-form textarea, .gw-form .select { width: 100%; }
.gw-dt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* 시작 · 끝 한 줄씩 - 시간 칸이 '오후 07:30' 까지 보이게 */
.gw-dti { display: flex; gap: 6px; }
.gw-dti input[type=date] { flex: 1 1 auto; min-width: 0; }
.gw-dti input[type=time] { flex: 0 0 150px; width: 150px !important; }
.gw-form.allday input[type=time] { display: none; }
.gw-ad { align-self: flex-start; }
/* 드라이브 */
.gw-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; font-size: 14px; }
.gw-crumb a { color: var(--text-2); text-decoration: none; }
.gw-crumb a:hover { color: var(--text); text-decoration: underline; }
.gw-sep { color: var(--text-3); }
.gw-search { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--canvas-2); color: var(--text-3); }
.gw-search:focus-within { border-color: var(--accent-text); }
.gw-search input { width: 170px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.gw-search .icon-btn { width: 28px; height: 28px; }
.gw-sort { height: 36px; }
.gw-files { display: flex; flex-direction: column; }
.gw-fh, .gw-f { display: grid; grid-template-columns: minmax(0, 1fr) 110px 76px 110px; align-items: center; gap: 8px; padding: 0 8px; }
.gw-fh { padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text-3); }
.gw-fh span:nth-child(3) { text-align: right; }
.gw-f { min-height: 50px; border-bottom: 1px solid var(--line); cursor: pointer; }
.gw-f:hover { background: rgba(255, 255, 255, .03); }
.gw-f.up { cursor: default; }
.gw-f.bad small { color: #ff8a8f; }
.gw-fn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gw-ic { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-2); }
.gw-ic.dir { color: #f6bf26; }
img.gw-ic { object-fit: contain; }
.gw-ft { display: flex; flex-direction: column; min-width: 0; }
.gw-ft b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-ft small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-fm, .gw-fs { font-size: 12.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gw-fs { text-align: right; }
.gw-fa { display: flex; justify-content: flex-end; gap: 2px; }
.gw-fa .icon-btn { width: 32px; height: 32px; color: var(--text-2); }
.gw-fa .icon-btn:hover { color: var(--text); }
.gw-fa .icon-btn[data-armed] { width: auto; padding: 0 8px; font-size: 12px; font-weight: 700; color: #ff8a8f; }
.gw-morew { display: flex; justify-content: center; padding: 14px; }
/* 시트 */
.gw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.gw-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.gw-card h3 { margin: 0; font-size: 16px; }
.gw-card p { margin: 0; font-size: 13px; line-height: 1.6; }
.gw-card .gw-acts { justify-content: flex-end; }
.gw-sh0 .gw-hint { margin-top: 14px; }
.gw-stitle { min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.gw-tag { cursor: default; font-size: 12px; padding: 3px 10px; }
.gw-bar .btn svg { vertical-align: -2px; margin-right: 2px; }
.gw-tabs { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.gw-tabs .chip { white-space: nowrap; }
.gw-tabs .chip.off:not(.on) { opacity: .6; }
.gw-tblw { max-height: calc(100% - 48px); overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.gw-tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.gw-tbl th, .gw-tbl td { max-width: 280px; padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-3); font-weight: 700; text-align: center; }
.gw-tbl tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface-2); color: var(--text-3); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.gw-tbl thead th:first-child { left: 0; z-index: 3; }
.gw-tbl td { color: var(--text); }
.gw-tnote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; }
@media (max-width: 720px) {
  .gw-bar { padding: 8px 10px; }
  .gw-body { padding: 10px; }
  .gw-nav b { font-size: 15px; margin-left: 4px; }
  .gw-grid { grid-auto-rows: minmax(68px, auto); }
  .gw-day { padding: 2px; }
  .gw-dn { width: 22px; height: 22px; font-size: 12px; }
  .gw-chip { padding: 1px 3px; border-left-width: 2px; font-size: 10.5px; }
  .gw-chip i { display: none; }
  .gw-week { grid-template-columns: minmax(0, 1fr); }      /* 주 = 날마다 한 줄 */
  .gw-wd { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .gw-wd h4 { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
  .gw-wd .gw-row { flex-direction: row; }
  .gw-fh { display: none; }
  .gw-f { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "m a"; padding: 8px 4px; }
  .gw-fn { grid-area: n; }
  .gw-fa { grid-area: a; }
  .gw-fm { grid-area: m; padding-left: 30px; font-size: 12px; }
  .gw-fs { display: none; }
  .gw-search { flex: 1 1 160px; }
  .gw-search input { width: 100%; min-width: 0; }
  .gw-cards { grid-template-columns: minmax(0, 1fr); }
  .gw-stitle { max-width: 100%; flex-basis: 100%; }
}
@media (max-width: 400px) { .gw-dti input[type=time] { flex-basis: 128px; width: 128px !important; } }

/* ══════════════ 10-08 검증 뒤 고침 (제작 4칸 · 구글 · 상단 메뉴) ══════════════ */
/* 상단 메뉴 14개 - 좁은 PC 폭에서 여백을 줄여 'AI' 까지 다 보이게 (1100~1250px 에서 오른쪽 탭이 가려졌다. 스크롤 막대도 숨어 있어 모르고 지나쳤다) */
@media (max-width: 1280px) and (min-width: 861px) { .nav__in { gap: 12px; } .tabs { gap: 2px; } .tab { padding: 8px 10px; } }
@media (max-width: 1080px) and (min-width: 861px) { .brand__name { display: none; } .tab { padding: 8px 8px; } }
/* 860px 이하는 휴대폰처럼 7칸 두 줄 격자 (720px 규칙과 같은 모양) */
@media (max-width: 860px) {
  .nav { height: auto; }
  .nav__in { flex-wrap: wrap; gap: 6px 10px; padding-top: 10px; padding-bottom: 8px; }
  .tabs { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .tab { padding: 7px 0; text-align: center; font-size: 13.5px; white-space: nowrap; }
  .nav__right { margin-left: auto; }
}
/* 닫힌 서랍은 초점 순서에서 뺀다 - 아이폰 '다음 칸'·Tab 이 닫힌 서랍 안 입력칸으로 가 화면이 밀리던 것 (.brief-side 와 같은 방식) */
@media (max-width: 1279px) {
  .pj-mk .pj-mats { visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  .pj.mats-open .pj-mats { visibility: visible; transition: transform .25s var(--ease); }
}
@media (max-width: 1180px) {
  .pj-side { visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  .pj.mt-open .pj-side { visibility: visible; transition: transform .25s var(--ease); }
}
/* 제작 머리줄 - 861~1440px 은 한 줄 (이름은 줄임표), 860px 이하는 이름을 빼고 [결과물|설정][자료][AI 대화] 한 줄 (이름은 설정 칸에서 고친다) */
@media (min-width: 861px) and (max-width: 1440px) {
  .pj-mk .pj-head { flex-wrap: nowrap; }
  .pj-mk .pj-name { flex: 1 1 0; min-width: 0; }
  .pj-mk .pj-name > small { display: none; }
  .pj-mk .pj-name > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pj-mk .pj-name .pj-title { flex: 1 1 auto; min-width: 0; width: 100%; }
  .pj-mk .pj-head > .grow { display: none; }
  .pj-mk .pj-head > .btn, .pj-mk .pj-seg { flex: 0 0 auto; }
}
@media (max-width: 860px) {
  .pj-mk .pj-name { display: none; }
  .pj-mk .pj-head { flex-wrap: nowrap; gap: 6px; }
  .pj-mk .pj-head > .grow { flex: 1 1 auto; }
}
/* 구글 - 머리줄이 눌려 둘째 줄이 아래 칸(탭 칩·목록)을 덮던 것 */
.gw-bar { flex: 0 0 auto; }
/* 월 보기는 한 화면에 6줄 - 칸 높이를 나눠 갖고, 넘치는 칩은 '+N개' 로 (한 칸만 바빠도 모든 줄이 늘어 노트북에서 잘렸다) */
.gw-body:has(> .gw-mon) { display: flex; flex-direction: column; }
.gw-mon { flex: 1 1 auto; min-height: 0; }
.gw-grid { grid-template-rows: repeat(6, minmax(84px, 1fr)); grid-auto-rows: auto; }
.gw-day { overflow: hidden; }
/* 일정 창 - 띄어쓰기 없는 긴 제목이 닫기 단추를 밀어내지 않게 */
.gw-box .mk-bh { gap: 10px; }
.gw-box .mk-bh b { min-width: 0; overflow-wrap: anywhere; }
.gw-box .mk-bh .icon-btn { flex: 0 0 auto; }
.gw-ftag { margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); background: rgba(63, 194, 140, .14); color: var(--accent-text); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.gw-warn { color: #f1d08f; }
@media (pointer: coarse) {
  .gw-search .icon-btn { width: 36px; height: 36px; }
  .gw-crumb a { display: inline-block; padding: 8px 2px; margin: -8px 0; }
}
@media (max-width: 720px) {
  .gw-grid { grid-template-rows: none; grid-auto-rows: minmax(68px, auto); }   /* 휴대폰은 내용대로 (위 6줄 나눔 규칙을 끈다) */
}

/* 드라이브 왼쪽 폴더 나무 (10-08 대표님 "드라이브는 목록에 폴더들 나열") - 깊이는 --d 로 들여쓴다 */
.gw-tree { display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; }
.gw-tree h5, .gw-views h5 { margin: 4px 6px; font-size: 12px; color: var(--text-3); }
.gw-tn { display: flex; align-items: center; padding-left: calc(var(--d, 0) * 14px); border-radius: 8px; }
.gw-tn:hover { background: var(--surface-2); }
.gw-tn.on { background: var(--surface-3); }
.gw-tc { flex: 0 0 auto; width: 26px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.gw-tc svg { transition: transform .15s ease; }
.gw-tc[aria-expanded="true"] svg { transform: rotate(90deg); }
.gw-tc:hover { color: var(--text); }
.gw-tl { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 2px; color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.gw-tl svg { flex: 0 0 auto; color: #f6bf26; }
.gw-tl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-tn.on .gw-tl, .gw-tl:hover { color: var(--text); }
.gw-tnote { margin: 0; padding: 4px 8px 4px calc(var(--d, 0) * 14px + 34px); font-size: 12px; color: var(--text-3); }
.gw-tlink { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 12px; cursor: pointer; }
.gw-views .gw-view { font-size: 13.5px; padding: 8px 10px; }
@media (pointer: coarse) { .gw-tc { width: 36px; height: 38px; } .gw-tl { padding-top: 10px; padding-bottom: 10px; } }

/* 드라이브 우클릭 메뉴 · 끌어다 놓기 (10-09 대표님 "우클릭하면 구글 드라이브처럼 두번째 기능이 되게, 드래그로 파일 업로드") ─
   메뉴는 공용 .menu 모양을 잇는다 - 아이콘 · 구분선 · 꺼짐(흐림, 까닭은 title) · 하위 메뉴 ▸ · 오른쪽 단축키. 1180px 이하는 아래에서 올라오는 시트 */
.gw-menu { min-width: 236px; max-width: min(330px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.gw-menu .gw-mi { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 14px; }
.gw-mi > i { flex: 0 0 18px; display: grid; place-items: center; color: var(--text-2); font-style: normal; }
.gw-mi > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-mi > kbd, .gw-mi > .gw-mcar { flex: 0 0 auto; margin-left: 12px; color: var(--text-3); font-family: inherit; font-size: 12px; font-weight: 500; }
.gw-mcar { display: grid; place-items: center; }
.gw-menu .gw-mi:focus, .gw-menu .gw-mi[aria-expanded="true"] { background: var(--surface-3); outline: none; }
.gw-menu .gw-mi:focus-visible { box-shadow: inset 0 0 0 1px var(--line-2); }
.gw-menu .gw-mi[aria-disabled="true"] { opacity: .4; cursor: default; }
.gw-menu .gw-mi[aria-disabled="true"]:hover { background: transparent; }
.gw-menu .gw-mi[aria-disabled="true"]:focus { background: var(--surface-3); }
.gw-menu .gw-mi.danger > i { color: #ff9a9d; }
.gw-msep { height: 1px; margin: 5px 6px; background: var(--line-2); }
.gw-msubm { z-index: 121; }
/* 휴대폰 · 태블릿 - 아래에서 올라오는 시트 (하위 메뉴는 그 자리에서 펼친다) */
.gw-sheet-bd { position: fixed; inset: 0; z-index: 119; background: rgba(0, 0, 0, .5); }
.menu.gw-sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; max-width: none; max-height: min(80dvh, 640px); padding: 0 8px calc(10px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; animation: gw-up .2s var(--ease); }
.menu.gw-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 2px; background: var(--line-2); }
@keyframes gw-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .menu.gw-sheet { animation: none; } }
.gw-sheet .gw-mi { min-height: 48px; font-size: 15px; }
.gw-mhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.gw-mhead svg { flex: 0 0 auto; color: var(--text-2); }
.gw-mhead b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.gw-sheet .gw-mcar svg { transition: transform .15s ease; }
.gw-sheet .gw-mi[aria-expanded="true"] .gw-mcar svg { transform: rotate(90deg); }
.gw-msub { padding-left: 30px; }
/* 줄 - 메뉴가 열린 줄은 고른 듯 칠한다 · 키보드 초점 · 새 사본 잠깐 칠하기 · 줄 안 이름 고치기 · 중요 표시 · ⋮ */
.gw-f.ctx, .gw-tn.ctx { background: var(--surface-3); }
.gw-f.up { color: var(--text); }   /* 올리는 중 줄 - 공용 .up(오름 = 빨강) 글자색을 받지 않게 (예전부터 이름이 빨갛게 보였다) */
.gw-f:focus { outline: none; }
.gw-f:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-text); border-radius: 6px; }
.gw-f.flash { animation: gw-flash 2.4s ease; }
@keyframes gw-flash { 0%, 55% { background: rgba(63, 194, 140, .22); } 100% { background: transparent; } }
.gw-ren { width: 100%; min-width: 0; padding: 4px 8px; border: 1px solid var(--accent-text); border-radius: 6px; background: var(--canvas-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; outline: none; }
.gw-star { display: inline-grid; place-items: center; margin-left: 6px; color: #f6bf26; vertical-align: -1px; }
.gw-fa .gw-dots { color: var(--text-3); }
@media (pointer: coarse) { .gw-f, .gw-tl { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .gw-ren { -webkit-user-select: text; user-select: text; } }   /* 길게 누르기 = 메뉴 (글자 고르기 · 링크 미리보기가 뜨지 않게). 줄 안 이름 칸은 아이폰에서도 고칠 수 있게 */
@media (max-width: 720px) { .gw-fa > :not(.gw-dots) { display: none; } }   /* 휴대폰 줄 끝은 ⋮ 하나 - 열기 · 내려받기는 메뉴에 */
/* 끌어다 놓기 - 목록 위 안내 막 (누르기를 가로채지 않는다 - 아래 폴더 줄을 칠해야 한다) */
.gw { position: relative; }
.gw-drop { position: absolute; left: 6px; right: 6px; bottom: 6px; top: 60px; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; border: 2px dashed var(--accent-text); border-radius: 12px; background: rgba(63, 194, 140, .07); pointer-events: none; }
.gw-drop.row { border-color: transparent; background: none; }
.gw-drop.no { border-color: #ff8a8f; background: rgba(255, 138, 143, .07); }
.gw-drop b { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-float); }
.gw-drop b svg { flex: 0 0 auto; }
.gw-drop b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-drop.no b { background: #5c2b2f; color: #ffd9db; }
.gw-f.drop, .gw-tn.drop { background: rgba(63, 194, 140, .16); box-shadow: inset 0 0 0 2px var(--accent-text); }
.gw-f.drop.no, .gw-tn.drop.no { background: rgba(255, 138, 143, .1); box-shadow: inset 0 0 0 2px #ff8a8f; }
/* 되돌리기 단추가 있는 알림 */
.toast.gw-toast { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; text-align: left; }
.toast.gw-toast > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }   /* 띄어쓰기 없는 긴 파일 이름이면 '되돌리기' 단추가 화면 밖으로 밀렸다 (10-09 반증) */
.gw-tbtn { flex: 0 0 auto; padding: 7px 12px; border: 0; border-radius: var(--pill); background: transparent; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.gw-tbtn:hover { background: var(--surface-2); }
/* 창 - 옮기기(폴더 고르기) · 공유 · 세부정보 · 묻기 */
.gw-mv { max-height: min(50dvh, 420px); overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.gw-mn { display: flex; align-items: center; padding-left: calc(var(--d, 0) * 16px); }
.gw-mf { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 4px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.gw-mf:hover { background: var(--surface-2); color: var(--text); }
.gw-mn.on .gw-mf { background: rgba(63, 194, 140, .18); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.gw-mf svg { flex: 0 0 auto; color: #f6bf26; }
.gw-mf span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-mf small { flex: 0 0 auto; margin-left: auto; padding: 1px 7px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-3); font-size: 11px; font-weight: 700; }
.gw-mf[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.gw-mf[aria-disabled="true"]:hover { background: none; color: var(--text-2); }
.gw-mv .gw-tnote { padding-left: calc(var(--d, 0) * 16px + 30px); }
.gw-shrow { display: flex; gap: 8px; }
.gw-shrow input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--canvas-2); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.gw-shrow input:focus { border-color: var(--accent-text); }
.gw-shrow .select { flex: 0 0 auto; }
.gw-shrow2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.gw-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.gw-chk input { accent-color: var(--accent); }
.gw-shh { margin: 2px 0 -6px; font-size: 12.5px; color: var(--text-3); }
.gw-perms { display: flex; flex-direction: column; gap: 2px; max-height: 34dvh; overflow: auto; }
.gw-pm { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.gw-av, .gw-genic { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 14px; font-weight: 700; }
.gw-genic { color: var(--text-2); }
.gw-pmt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gw-pmt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pmt small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pmr { flex: 0 0 auto; padding-right: 8px; font-size: 13px; color: var(--text-3); }
.gw-gen { display: flex; align-items: center; gap: 10px; }
.gw-gen .select { flex: 1 1 auto; min-width: 0; }
.gw-gennote { margin: -6px 0 0 42px; font-size: 12px; line-height: 1.5; color: #f1d08f; }
.gw-dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: 14px; }
.gw-dl dt { color: var(--text-3); font-size: 13px; }
.gw-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gw-dl dd a { color: var(--text-2); }
.gw-dl dd a:hover { color: var(--text); }
.gw-dl dd small { color: var(--text-3); }
.gw-ddesc { white-space: pre-wrap; }
.gw-ddesc a { color: var(--accent-text) !important; }
.gw-cmsg { margin: 0; line-height: 1.6; }
@media (max-width: 480px) { .gw-shrow { flex-wrap: wrap; } .gw-shrow input { flex-basis: 100%; } .gw-dl { grid-template-columns: 80px minmax(0, 1fr); } }

/* ══════════════ 시트 편집기 (10-08 대표님 "시트는 지금처럼 왼쪽 목록에 열면 실제 시트 규격으로 작성 할 수 있게") ══════════════
   구글 시트 모양 - 흰 격자 · 회색 열·줄 머리 · 파란 고른 칸 · 위 이름 칸·fx 수식 줄 · 아래 탭 줄. 머리줄(제목·단추)은 사이트 색 그대로 */
.ss .ss-fx { flex: 0 0 auto; display: flex; align-items: center; height: 34px; background: #fff; border-bottom: 1px solid #e1e3e1; color: #1f1f1f; }
.ss-nm { flex: 0 0 auto; width: 104px; height: 100%; display: flex; align-items: center; padding: 0 10px; border-right: 1px solid #e1e3e1; font-size: 13px; color: #444; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
.ss-fxl { flex: 0 0 auto; padding: 0 10px; color: #9aa0a6; font: italic 15px/1 Georgia, serif; }
.ss-fxin { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px; border: 0; outline: none; background: transparent; color: #1f1f1f; font-family: inherit; font-size: 13px; }
.ss-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #fff; }
.ss-in { position: relative; width: max-content; min-width: 100%; min-height: 100%; background: #fff; }
.ss-in > .gw-empty, .ss-in > .gw-note { color: #5f6368; }
/* 구글 시트 기본: Arial 10pt · 줄 21px · 세로 맞춤 아래 · 안쪽 여백 3px (10-08 "100% 동일하게") - 줄 높이·열 너비는 구글 값을 인라인으로 */
.ss-tbl { border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; color: #000; font: calc(10pt * var(--z, 1))/1.25 Arial, "Noto Sans KR", "Malgun Gothic", sans-serif; }
.ss-tbl td { padding: 0 3px; border-right: 1px solid #e2e3e3; border-bottom: 1px solid #e2e3e3; background-color: var(--ssbg, #fff); white-space: nowrap; overflow: hidden; text-overflow: clip; vertical-align: bottom; cursor: cell; }
.ss-tbl.nogrid td { border-color: transparent; }
.ss-tbl td.mg { display: none; }   /* 병합에 덮인 칸은 격자에서 빠져야 병합 첫 칸의 colspan·rowspan 이 그 자리를 차지한다 */
.ss-tbl tr.hr { visibility: collapse; }   /* 숨긴 줄은 접는다 - display:none 은 표 계산에서 빠져 병합(rowspan)에 걸리면 아래 줄이 밀렸다 (10-09 검토) */
.ss-tbl td.hc, .ss-tbl th.hc { padding: 0; border: 0; visibility: hidden; }   /* 숨긴 열은 빼지 않는다 - 빼면 다음 칸이 그 자리로 밀린다. 너비 0 */
.ss-tbl td.ov { overflow: visible; }
.ss-ov { display: block; overflow: hidden; white-space: nowrap; pointer-events: none; }   /* 빈 옆 칸으로 넘친 글 - 누르면 그 옆 칸이 골라지게 */
.ss-tbl td.nt { background-image: linear-gradient(225deg, #000 5px, transparent 5px); }   /* 메모 - 오른쪽 위 검은 삼각형 */
/* 층 순서 (10-09 검토 - 고정 줄의 넘친 글이 옆 칸에 가리고, 고른 상자가 고정 줄·줄 번호 위에 그려졌다):
   고른 상자 0 < 고정 칸 1 (넘치는 칸 2) < 고정 줄 3 (넘치는 칸 4) < 줄 번호 4 < 고정 줄+칸 5 (넘치는 칸 6) < 고정 줄 번호 6 < 열 머리 7 < 고정 칸 열 머리 8 < 모서리 9 < 입력칸 10.
   고정 줄·칸의 고른 표시는 표 앞에 둔 붙어 서는 틀(.ss-fz, 모양은 google.js 인라인) 안 상자 - 고정 칸 틀 3 · 고정 줄 틀 5 · 모서리 틀 7.
   같은 층이면 뒤에 오는 표 칸이 위라 스크롤하면 고정 칸이 덮고, 넘친 글(2 · 4 · 6)보다는 위다 (10-09 반증: 칸 안쪽 그림자로 그려 넘친 글 아래에 깔렸다).
   넘치는 고정 칸을 한 층 올린다 - 고정 칸은 칸마다 따로 붙어 서 같은 층이면 뒤 고정 칸 흰 바탕이 앞 칸의 넘친 글을 덮었다 (10-09 4차 반증: 고정 열 2칸 이상에서 A 칸 밖으로 아무것도 안 보였다) */
.ss-tbl tr.fz > td, .ss-tbl tr.fz > th { position: sticky; top: var(--fzt); z-index: 3; }
.ss-tbl tr.fz > td.ov { z-index: 4; }   /* 고정 줄 긴 제목이 뒤 칸 흰 바탕에 가리지 않게 */
.ss-tbl td.fzc { position: sticky; z-index: 1; }
.ss-tbl td.fzc.ov { z-index: 2; }   /* 고정 칸 긴 글이 뒤 고정 칸 흰 바탕에 가리지 않게 */
.ss-tbl tr.fz > td.fzc { z-index: 5; }
.ss-tbl tr.fz > td.fzc.ov { z-index: 6; }
/* 고정선 - 마지막 보이는 고정 줄 아래(fzl) · 마지막 보이는 고정 칸 오른쪽(fzr), 굵은 회색. 모서리 칸은 둘 다.
   fzb = 마지막 보이는 고정 줄까지 내려오는 병합 칸 (그 줄의 tr.fzl 은 병합 머리 줄이 아니면 닿지 않는다).
   오른쪽 선은 칸 글 위 층에 긋는다 - 안쪽 그림자는 글 아래라 고정선에서 잘린 긴 글자가 선 위에 그려졌다 (10-09 5차 반증). 붙어 서는 칸(sticky)이 기준 상자다.
   아래 선은 칸 테두리로 - 글은 테두리 안쪽에서 잘리므로 선을 덮지 않고, 선도 글을 덮지 않는다
   (10-09 6차 반증: 글 위 층의 아래 선이 마지막 고정 줄 글자 꼬리 g j p q y 를 가렸다 - 머리 줄 'App' 의 p). 칸에 그은 아래 테두리보다 고정선이 앞선다 (구글과 같다) */
.ss-tbl td.fzr::after, .ss-tbl thead th.fzr::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: #c4c7c5; pointer-events: none; }
.ss-tbl tr.fzl > td:not(.hc), .ss-tbl tr.fzl > th, .ss-tbl td.fzb:not(.hc) { border-bottom: 2px solid #c4c7c5 !important; }
.ss-tbl thead th.fzc { z-index: 8; }
.ss-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ss-tbl th { background: #f8f9fa; color: #5f6368; font-size: 12px; font-weight: 500; border-right: 1px solid #c4c7c5; border-bottom: 1px solid #c4c7c5; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ss-tbl thead th { position: sticky; top: 0; z-index: 7; text-align: center; font: 500 calc(11px * var(--z, 1)) / 1 system-ui, sans-serif; }
.ss-tbl tbody th { position: sticky; left: 0; z-index: 4; text-align: center; font: calc(11px * var(--z, 1)) / 1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ss-tbl tbody tr.fz > th { z-index: 6; }
.ss-tbl thead th.ss-corner { left: 0; z-index: 9; }
.ss-tbl thead th.hi, .ss-tbl tbody tr.hi > th { background: #d3e3fd; color: #0b57d0; font-weight: 700; }
.ss-tbl, .ss-tbl td { -webkit-user-select: none; user-select: none; }   /* 끌어 고를 때 글자가 파랗게 잡히지 않게 */
.ss-cur, .ss-range { position: absolute; z-index: 0; box-sizing: border-box; pointer-events: none; }   /* 고정 줄·칸·머리 아래 - 스크롤하면 가린다 (보통 칸 글보다는 위) */
.ss-cur { border: 2px solid #1a73e8; }
.ss-range { border: 1px solid #1a73e8; background: rgba(26, 115, 232, .1); }
.ss-ed { position: absolute; z-index: 10; box-sizing: border-box; margin: 0; padding: 2px 3px; border: 0; outline: none; resize: none; overflow: hidden; white-space: pre; background: #fff; color: #000; font: calc(10pt * var(--z, 1))/1.25 Arial, "Noto Sans KR", "Malgun Gothic", sans-serif; line-height: 1.25; opacity: 0; pointer-events: none; caret-color: #1a73e8; }
.ss-ed.on { z-index: 10; opacity: 1; pointer-events: auto; box-shadow: 0 0 0 2px #1a73e8, 0 2px 8px rgba(0, 0, 0, .25); }
.ss-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 18px 56px; color: #5f6368; }
.ss-foot .btn { color: #1f1f1f; border: 1px solid #c4c7c5; background: #fff; }
.ss-foot .btn:hover { background: #f1f3f4; }
.ss-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 8px; background: #f8f9fa; border-top: 1px solid #e1e3e1; overflow-x: auto; scrollbar-width: none; }
.ss-add { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; margin-right: 4px; border: 0; border-radius: 50%; background: none; color: #444; cursor: pointer; }
.ss-add:hover { background: #e8eaed; }
.ss-tab { flex: 0 0 auto; padding: 8px 16px; border: 0; border-radius: 8px; background: none; color: #444; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ss-tab:hover { background: #e8eaed; }
.ss-tab.on { background: #e1e9f7; color: #0b57d0; }
.ss-st { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ss-st.bad { color: #ff8a8f; }
@media (max-width: 720px) {
  .ss-nm { width: 78px; }
  .ss-tbl td { height: 32px; }                       /* 손가락으로 누르기 */
}
/* 설정 › 계정 연결 - 받은 권한 표시 · 체크만 하고 연결 안 했을 때 안내와 단추 강조 (10-08 "드라이브 전체 보기 클릭했는데 새로고침하면 풀리고") */
.st-got { margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); background: rgba(63, 194, 140, .14); color: var(--accent-text); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.st-gpend { color: #f1d08f; }
.st-attn { animation: stAttn 1.6s ease-in-out infinite; }
@keyframes stAttn { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 194, 140, .55); } 50% { box-shadow: 0 0 0 6px rgba(63, 194, 140, 0); } }

/* 오른쪽 AI 대화 - 구글 · 작성 (10-08 대표님 "구글과 작성에도 우측 AI 와 대화"). 법령정보와 같은 틀(.pj.pj-dc), sidechat.js
   넓은 화면 = 오른쪽 고정 칸 + '접기' · 1180px 이하 = 서랍 + 오른쪽 아래 'AI 대화' 단추 */
.ws-scw { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sc-main > .ws-body, .sc-main > .ai-scroll { flex: 1 1 auto; min-height: 0; }
.sc-pj { --sc-fab-b: 64px; }
.sc-fab { display: none; position: absolute; right: 16px; bottom: calc(var(--sc-fab-b) + env(safe-area-inset-bottom, 0px)); z-index: 30;
  align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--pill); border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-float); }
.sc-fab:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media not all and (max-width: 1180px) {   /* min-width:1181px 로 쓰면 1180~1181 사이 소수점 폭에서 둘 다 안 맞았다 (10-08 검토) */
  .pj.pj-dc.sc-fold { grid-template-columns: minmax(0, 1fr); }
  .sc-fold > .pj-side { display: none; }
  .sc-fold > .sc-fab { display: inline-flex; }
}
@media (max-width: 1180px) {
  /* 둥근 'AI 대화' 단추가 가운데 맨 아래 단추(작성의 '고쳐 쓰기' 등)를 덮지 않게 굴림 칸 끝에 여백 */
  .sc-main .sum-wrap, .sc-main .gw-body, .sc-main .ai-scroll > :last-child { padding-bottom: calc(var(--sc-fab-b) + 56px + env(safe-area-inset-bottom, 0px)); }
  .sc-pj > .sc-fab { display: inline-flex; }
  .sc-pj.mt-open > .sc-fab { display: none; }
  .sc-wide { display: none !important; }
}

/* 시트 도구 막대·펼침 메뉴 (10-08 대표님 "작성때 사용하는 각종 툴") - 구글 시트 도구 막대와 같은 순서 · 밝은 바탕 */
.gw.ss { position: relative; }
.ss-tb { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; padding: 4px 8px; background: #f9fbfd; border-bottom: 1px solid #e1e3e1; color: #444746; overflow-x: auto; scrollbar-width: thin; }
.ss-tb-b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 28px; height: 28px; padding: 0 5px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ss-tb-b:hover { background: #e8eaed; }
.ss-tb-b.on, .ss-tb-b.open { background: #d3e3fd; color: #0b57d0; }
.ss-tb-txt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ss-tb-txt small { font-size: 9px; margin-left: 1px; }
.ss-tb-font { display: inline-block; max-width: 86px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; text-align: left; }
.ss-tb-sep { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 4px; background: #c7c7c7; }
.ss-tb-size { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; }
.ss-tb-size input { width: 34px; height: 24px; padding: 0; border: 1px solid #747775; border-radius: 4px; background: #fff; color: #1f1f1f; font: inherit; font-size: 13px; text-align: center; }
.ss-tb-col .ss-swatch { fill: currentColor; }
.ss-menu { position: absolute; z-index: 40; min-width: 160px; max-width: min(420px, calc(100% - 8px)); max-height: 60vh; overflow: auto; padding: 6px; border-radius: 8px; background: #fff; color: #1f1f1f; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); }
.ss-mi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
.ss-mi:hover { background: #f1f3f4; }
.ss-mi.on { background: #e8f0fe; color: #0b57d0; font-weight: 700; }
.ss-mi small { margin-left: auto; padding-left: 16px; color: #80868b; font-size: 11px; }
.ss-pal { display: grid; gap: 3px; padding: 4px; }
.ss-pal-r { display: flex; gap: 3px; }
.ss-pal-r:nth-child(2) { margin-bottom: 6px; }
.ss-pal-c { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; cursor: pointer; }
.ss-pal-c:hover, .ss-pal-c.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a73e8; }
.ss-pal-f { display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px; border-top: 1px solid #e8eaed; margin-top: 4px; font-size: 13px; }
.ss-pal-f .ss-mi { width: auto; }
.ss-pal-f input[type=color] { width: 32px; height: 24px; padding: 0; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; vertical-align: middle; }
.ss-pal-f select { height: 26px; border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; color: #1f1f1f; font: inherit; font-size: 13px; }
.ss-bd { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ss-menu-halign, .ss-menu-valign, .ss-menu-wrap { min-width: 140px; }
@media (pointer: coarse) { .ss-tb-b { min-width: 36px; height: 36px; } .ss-pal-c { width: 26px; height: 26px; } .ss-mi { padding: 10px 14px; } }

/* 커뮤 - 디시 갤러리 글 목록 (10-08 대표님 "전체/비대위/국바세 전환하며 목록으로"). 수집 3_Crawler/Dcinside_Gallery */
.cm-bar { align-items: flex-start; }
.cm-tabs { flex: 1 1 100%; }
.cm-tabs .chip small { margin-left: 4px; font-size: 11px; opacity: .8; }
.cm-st.failing, .cm-st.missing { color: #ff8a8f; }
.cm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-find input { width: 180px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--canvas-2); color: var(--text); font: inherit; font-size: 13px; }
.cm-info { margin-left: auto; align-self: center; }
.cm-card { margin-top: 12px; padding: 0 4px; }
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 60px 46px; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cm-list.all .cm-row { grid-template-columns: 74px 118px minmax(0, 1fr) 150px 60px 46px; }
.cm-row.cm-h { padding-top: 12px; padding-bottom: 8px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.cm-row.cm-h > span:nth-last-child(-n+2) { text-align: right; }
.cm-row:last-child { border-bottom: 0; }
.cm-when { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-gal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.cm-title { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; }
.cm-title:hover .cm-t { text-decoration: underline; }
.cm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-sub { flex: 0 0 auto; padding: 1px 7px; border-radius: var(--pill); background: var(--canvas-2); color: var(--text-2); font-size: 12px; }
.cm-cmt { flex: 0 0 auto; color: #ff9b5e; font-size: 13px; font-weight: 700; }
.cm-ic { flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-3); font-size: 11px; }
.cm-ic.cc { border-color: var(--accent-text); color: var(--accent-text); }
.cm-writer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.cm-writer.fixed { color: var(--text); font-weight: 600; }
.cm-writer.ip { color: var(--text-3); }
.cm-num { text-align: right; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.cm-list .empty { padding: 28px 12px; text-align: center; color: var(--text-3); }
@media (max-width: 760px) {
  .cm-row, .cm-list.all .cm-row { grid-template-columns: 1fr auto; grid-template-areas: "t t" "m n"; row-gap: 4px; }
  .cm-row.cm-h { display: none; }
  .cm-title { grid-area: t; }
  .cm-when, .cm-gal, .cm-writer { font-size: 12px; }
  .cm-row > .cm-when { grid-area: m; }
  .cm-row > .cm-gal, .cm-row > .cm-writer { display: none; }
  .cm-row > .cm-num:last-child { display: none; }
  .cm-row > .cm-num { grid-area: n; }
  .cm-find input { width: 140px; }
  .cm-info { margin-left: 0; flex-basis: 100%; }
}

/* ══════════════ 구글 › 메일 (10-09 대표님 "구글에 하나 빠졌다. 캘린더/메일/드라이브/시트") - gmail.js ══════════════
   왼쪽 = 쓰기 · 편지함/라벨 / 가운데 = 목록 · 대화 / 쓰기 창. 본문 HTML 은 흰 종이 iframe (메일은 흰 바탕을 전제로 만든다) */
.gm-new { justify-content: center; gap: 8px; }
.gm-labels { display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; }
.gm-labels h5 { margin: 10px 8px 4px; font-size: 12px; color: var(--text-3); }
.gm-lb { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.gm-lb:hover { background: var(--surface-2); color: var(--text); }
.gm-lb.on { background: var(--surface-3); color: var(--text); }
.gm-lb > i { flex: 0 0 18px; display: grid; place-items: center; font-style: normal; color: var(--text-3); }
.gm-lb.on > i { color: var(--accent-text); }
.gm-lb > i.gm-ldot { color: var(--c, var(--text-3)); }
.gm-lb > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-lb > b { flex: 0 0 auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gm-lb.has > b, .gm-lb.has > span { color: var(--text); font-weight: 800; }
.gm-acc { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.gm-bar .gm-search { flex: 1 1 auto; max-width: 560px; }
.gm-bar .gm-search input { width: 100%; min-width: 0; }
.gm-ref { width: 34px; height: 34px; }
.gm-selbar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 53px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.gm-selbar b { font-size: 14px; }
.gm-selbar .icon-btn { width: 34px; height: 34px; color: var(--text-2); }
.gm-selbar .icon-btn:hover { color: var(--text); }
.gm-list { padding: 0; }
.gm-where { margin: 0; padding: 12px 16px 8px; font-size: 13px; color: var(--text-3); font-weight: 700; }
.gm-rows { display: flex; flex-direction: column; }
.gm-row { display: grid; grid-template-columns: 26px 28px minmax(90px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14px; cursor: pointer; }
.gm-row:hover { background: rgba(255, 255, 255, .03); box-shadow: inset 0 -1px 0 var(--line-2); }
.gm-row:focus { outline: none; }
.gm-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-text); }
.gm-row.unread { background: rgba(255, 255, 255, .025); color: var(--text); }
.gm-row.unread .gm-from, .gm-row.unread .gm-sub b, .gm-row.unread time { font-weight: 800; color: var(--text); }
.gm-row.sel { background: rgba(63, 194, 140, .1); }
.gm-ck { display: grid; place-items: center; width: 26px; height: 32px; cursor: pointer; }
.gm-ck input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.gm-star { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.gm-star svg { width: 17px; height: 17px; }
.gm-star:hover { color: var(--text); }
.gm-star.on, .gm-tstar.on { color: #f6bf26; }
.gm-from { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.gm-from > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-from small { flex: 0 0 auto; color: var(--text-3); font-size: 12px; font-weight: 600; }
.gm-dr { flex: 0 0 auto; color: #ff8a8f; font-style: normal; font-size: 12px; font-weight: 700; }
.gm-sub { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.gm-sub b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text); }
.gm-snip { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.gm-chip { flex: 0 0 auto; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--c, #8a9a93) 26%, transparent); color: var(--text); font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.gm-meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; color: var(--text-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-clip { display: inline-grid; place-items: center; color: var(--text-3); }
/* 대화 */
.gm-tbar { gap: 4px; }
.gm-tbar .icon-btn { width: 36px; height: 36px; color: var(--text-2); }
.gm-tbar .icon-btn:hover { color: var(--text); }
.gm-tcount { color: var(--text-3); font-size: 12px; }
.gm-lmenu { position: relative; }
.gm-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 190px; max-height: 50dvh; overflow: auto; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); box-shadow: var(--shadow-float); }
.gm-pop > b { padding: 2px 6px 6px; font-size: 12px; color: var(--text-3); }
.gm-pop .gw-chk { padding: 6px; border-radius: 6px; }
.gm-pop .gw-chk:hover { background: var(--surface-3); }
.gm-thread { padding: 6px 18px 24px; }
.gm-subject { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; }
.gm-msgs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.gm-msg { border-bottom: 1px solid var(--line); }
.gm-mh { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; }
.gm-msg.open .gm-mh { align-items: start; }
.gm-av { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--uplift); color: #fff; font-size: 15px; font-weight: 700; }
.gm-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-wl { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gm-wl b { font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.gm-wl small { color: var(--text-3); font-size: 12.5px; overflow-wrap: anywhere; }
.gm-to { color: var(--text-3); font-size: 12.5px; overflow-wrap: anywhere; }
.gm-snip1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mh time { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.gm-mh .icon-btn { width: 32px; height: 32px; color: var(--text-2); }
.gm-imgbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px 46px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; }
.gm-imgbar span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gm-imgbar svg { flex: 0 0 auto; }
.gm-bodyw { margin: 0 0 14px 46px; min-width: 0; }
.gm-frame { display: block; width: 100%; min-height: 60px; border: 0; border-radius: 10px; background: #fff; }
.gm-plain { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.gm-plain a, .gm-to a { color: var(--accent-text); }
.gm-atts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px 46px; }
.gm-att { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; }
.gm-att:hover { border-color: var(--accent-text); }
.gm-att[aria-busy="true"] { opacity: .55; cursor: progress; } /* 받는 중 (gmail.js downloadAtt) */
.gm-att b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-att small { flex: 0 0 auto; color: var(--text-3); }
.gm-att svg { flex: 0 0 auto; color: var(--text-3); }
.gm-mft, .gm-ft { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-mft { margin: 0 0 14px 46px; }
.gm-ft { margin-top: 18px; }
.gm-ft .btn svg, .gm-mft .btn svg, .gm-cfoot .btn svg, .gm-confb .btn svg { vertical-align: -3px; margin-right: 4px; }
/* 쓰기 창 - 넓은 화면은 가운데 큰 창, 휴대폰은 꽉 찬 화면. 바깥을 눌러도 닫히지 않는다 (닫기 = 임시 저장) */
.gm-cm { align-items: center; justify-content: center; padding: 16px; }
.gm-cbox { position: relative; width: min(780px, 100%); height: min(88dvh, 780px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gm-ch { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.gm-ch b { font-size: 15px; }
.gm-cst { color: var(--text-3); font-size: 12px; }
.gm-cf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: 0 18px 10px; }
.gm-cl { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.gm-cl[hidden] { display: none; }
.gm-cl > span { flex: 0 0 74px; color: var(--text-3); font-size: 13px; }
.gm-cl input { flex: 1 1 auto; min-width: 0; padding: 11px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.gm-ccb { flex: 0 0 auto; padding: 4px 6px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.gm-ccb:hover { color: var(--text); }
.gm-ctext { flex: 1 1 auto; min-height: 200px; margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; line-height: 1.7; resize: none; outline: none; }
.gm-q { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--canvas-2); }
.gm-q summary { cursor: pointer; color: var(--text-3); font-size: 12.5px; margin-top: 4px; }
.gm-q pre { margin: 8px 0 0; max-height: 30dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); font: 13px/1.6 var(--font); }
.gm-catts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.gm-catts[hidden] { display: none; }
.gm-ca { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 4px 5px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.gm-ca.bad { border-color: rgba(229, 72, 77, .6); }
.gm-ca b { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-ca small { flex: 0 0 auto; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.gm-ca.bad small { color: #ff9a9d; }
.gm-cax { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.gm-cax:hover { background: var(--surface-3); color: var(--text); }
.gm-cax svg { width: 14px; height: 14px; }
.gm-catot { color: var(--text-3); font-size: 12px; }
.gm-catot.bad { color: #ff9a9d; font-weight: 700; }
.gm-cfoot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.gm-cic { width: 36px; height: 36px; color: var(--text-2); }
.gm-cic.armed, [data-discard].armed { width: auto; padding: 0 10px; color: #ff9a9d; font-size: 13px; font-weight: 700; }
.gm-conf { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(14, 19, 17, .82); }
.gm-conf[hidden] { display: none; }
.gm-confin { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-2); box-shadow: var(--shadow-float); }
.gm-confin h4 { margin: 0 0 12px; font-size: 16px; }
.gm-cr { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; font-size: 14px; }
.gm-cr > span { color: var(--text-3); font-size: 13px; padding-top: 2px; }
.gm-cr > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-cr b { font-size: 15px; overflow-wrap: anywhere; }
.gm-confin p { margin: 8px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.gm-confb { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.gm-ch .grow, .gm-cfoot .grow, .gm-selbar .grow { flex: 1 1 auto; }
/* AI 초안 카드 - 받는 사람을 크게 (확인할 것이 그것이다) */
.act[data-tool="mail_draft"] .act-s { color: var(--text); font-size: 14px; font-weight: 700; }
/* 단추 둘(열기 · 되돌리기)이 좁은 대화 칸에서 글을 한 글자 폭으로 밀어내지 않게 - 단추는 둘째 줄로 */
.act[data-tool="mail_draft"] { flex-wrap: wrap; row-gap: 8px; }
.act[data-tool="mail_draft"] .act-b { flex: 1 1 calc(100% - 40px); }
.act[data-tool="mail_draft"] .act-st { margin-left: 25px; margin-right: auto; }
@media (max-width: 720px) {
  .gm-row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ck from meta" "ck sub star"; column-gap: 6px; row-gap: 1px; padding: 8px 8px 8px 4px; align-items: start; }
  .gm-ck { grid-area: ck; height: 26px; }
  .gm-from { grid-area: from; }
  .gm-meta { grid-area: meta; }
  .gm-sub { grid-area: sub; display: block; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.45; }
  .gm-sub b { display: inline; }
  .gm-star { grid-area: star; width: 32px; height: 30px; }
  .gm-where { padding: 10px 12px 6px; }
  .gm-thread { padding: 4px 12px 20px; }
  .gm-subject { font-size: 18px; }
  .gm-mh { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .gm-mh > .icon-btn { display: none; }
  .gm-av { width: 32px; height: 32px; font-size: 14px; }
  .gm-bodyw, .gm-atts, .gm-imgbar, .gm-mft { margin-left: 0; }
  .gm-frame { border-radius: 8px; }
  .gm-cm { padding: 0; }
  .gm-cbox { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .gm-cl > span { flex-basis: 64px; }
  .gm-cl input, .gm-ctext { font-size: 16px; }   /* 아이폰은 16px 보다 작은 칸을 누르면 화면을 키운다 */
  .gm-cr { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (pointer: coarse) { .gm-lb { padding-top: 10px; padding-bottom: 10px; } .gm-ck input { width: 18px; height: 18px; } .gm-tbar .icon-btn { width: 40px; height: 40px; } }

/* 설정 › 결제 (10-10) */
/* settingsBilling.js - 묶음·줄·칩·스위치·상태 표시는 설정 공용(.st-grp · .st-row · .chip · .st-sw · .st-v · .st-gft) 그대로, 여기는 결제만의 것 */
.bl-bal { font-size: 18px; font-variant-numeric: tabular-nums; }
.bl-charge { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 2px; }
.bl-charge > .btn { margin-left: auto; }
.bl-rule { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; color: var(--text-2); }
.bl-rule > span { white-space: nowrap; }
.bl-rule input { width: 64px; padding: 6px 8px 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bl-rule input:focus { border-color: var(--accent-text); }
.bl-rule input.bl-bad { border-color: var(--red); }
.bl-off .bl-rule { opacity: .6; }   /* 꺼 둔 동안 - 값은 그대로 고칠 수 있다 */
.bl-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.bl-use b, .bl-charge .chip { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .bl-charge .chips { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }   /* 금액 다섯 = 한 줄 (넷 · 하나로 갈라졌다) */
  .bl-charge .chip { padding-inline: 4px; }
  .st-tabs button:nth-child(n+4) { grid-column: span 2; }   /* 탭 여섯 = 세 칸씩 두 줄 - 10-08 다섯 칸 규칙(3 + 2)으로는 '결제' 가 셋째 줄에 혼자 반 폭으로 남았다 */
}

/* ══════════════ 기초 자료 공용 부품 (10-11 대표님 "AI 카테고리도 우측에 기초 자료 · 기초자료 디자인을 더 직관적으로") - sources.js ══════════════
   칸 .src (AI 탭 오른쪽 · 제작 왼쪽) · 선거 칩(.cp-chip 그대로) · 자료 보기 창 .src-modal · 인용 칩 button.src-cite · 입력창 알약 .src-pill · 입력창 띠 .src-strip.
   있는 부품을 빌린다: 켜고 끄기 .st-sw (설정 텔레그램) · 상태 .mk-st · 창 .modal + .pv-card + .pv-text · 이름 .pj-title · 시작 질문 .cp-starters · 놓기 막 .drop-overlay · 막대 = .ai-usage 값.
   새 모양은 번호 알약 .src-no = 인용 칩 하나. 칸 안에 상자를 두르지 않는다 (가로줄로만 - 패널 라인). 기본값을 먼저, 폭별 · 손가락 규칙은 뒤 (10-08 데스크톱 회귀 교훈).
   --src-css = 이 판의 CSS 인지 화면이 확인하는 표시 (열어 둔 옛 탭은 옛 app.css 를 쥐고 있다) */
:root { --src-css: 1; }

/* 칸 틀 - 머리 · 넣기 줄 · (칸) · 굴림 몸통 · 바닥 */
.src { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--canvas-2); }
.src-h { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--line); }
.src-h > b { font-size: 15px; font-weight: 700; }
.src-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.src-cnt .spin { width: 10px; height: 10px; }
.src-h > .grow { flex: 1 1 auto; }
.src-fold, .src-close { display: none; }      /* 자리마다 아래 폭별 규칙에서 켠다. 상태 이름은 src-folded · src-open (같은 이름이면 이 규칙이 AI 탭 전체를 숨긴다) */

/* 넣기 줄 · 링크 · 글 칸 (굴리지 않는다) */
.src-add { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.src-add > .btn { min-width: 0; gap: 4px; padding-inline: 6px; }
.src-add > .btn svg { flex: 0 0 auto; width: 14px; height: 14px; }
.src-form { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.src-form__h { display: flex; align-items: center; gap: 6px; }
.src-form__h > b { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.src-form input, .src-form textarea { width: 100%; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--canvas); color: var(--text); font-size: 13px; line-height: 1.55; outline: none; resize: vertical; }   /* .cp-attform · 옛 .mt-link 입력칸과 같은 값 */
.src-form input:focus, .src-form textarea:focus { border-color: var(--accent-text); }
.src-form textarea { min-height: 64px; }
.src-form__f { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--text-3); }
.src-form__f .warn { color: var(--gold); }
.src-form__f .bad { color: #ff8a8f; }

/* 몸통 - 이것만 굴러간다 */
.src-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.src-empty { display: flex; flex-direction: column; gap: 10px; padding: 20px 14px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r); text-align: center; transition: border-color .2s ease; }
.src.drag .src-empty { border-color: var(--accent-text); }
.src-empty > svg { align-self: center; width: 30px; height: 30px; color: var(--accent-text); }
.src-empty > b { font-size: 14px; line-height: 1.5; word-break: keep-all; }
.src-empty > small { font-size: 11.5px; line-height: 1.55; color: var(--text-3); word-break: keep-all; }
.src-all { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 0 0 8px; font-size: 12px; color: var(--text-3); }
.src-all > span { flex: 1 1 auto; min-width: 0; }

/* 목록 한 줄 - (번호) 이름 · 스위치 / 종류 · 상태 · 빼기 */
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.src-it { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a sw" "a x"; align-items: center; column-gap: 8px; row-gap: 4px; padding: 8px; border-radius: 10px; background: var(--surface); transition: background .15s ease; }
.src-it:hover { background: var(--surface-2); }
.src-a { grid-area: a; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-items: center; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.src-a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.src-nm { min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-l2 { grid-column: 2; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.src-l2 .src-tx { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-kd { flex: 0 0 auto; display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--text-2); }
.src-kd svg { width: 13px; height: 13px; }
.src-kd.k-image { color: var(--accent-text); } .src-kd.k-video { color: #9cc2ff; } .src-kd.k-pdf { color: #ff9f7a; }
.src-kd.k-office { color: #8fb6ff; } .src-kd.k-hwp { color: #7fd3f0; } .src-kd.k-youtube { color: #ff7b7b; } .src-kd.k-link { color: var(--mint); }   /* .mt-ic · .att-ic 값 - 링크만 금색 → 민트. 음성은 원본처럼 기본 색 (새 색을 만들지 않는다 - 음표 모양이 종류를 말한다) */
.mk-st.src-st { font-size: 11px; padding: 1px 7px; gap: 4px; }
.src-it > .st-sw { grid-area: sw; justify-self: end; }
.src-it > .st-sw:has(input:disabled), .src-pv-st > .st-sw:has(input:disabled) { opacity: .35; }   /* 보기 창도 같은 흐림 - 못 읽은 자료가 켜진 스위치처럼 보였다 (10-11 시험) */
.src-it > .st-sw input:disabled, .src-pv-st > .st-sw input:disabled { cursor: default; }
.src-x { grid-area: x; justify-self: end; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; opacity: .55; }
.src-x:hover { opacity: 1; color: #ff8a8f; background: var(--surface-3); }
.src-x svg { width: 13px; height: 13px; }
.src-x[data-armed] { width: auto; padding: 0 9px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #ff8a8f; background: rgba(229, 72, 77, .14); border-radius: var(--pill); opacity: 1; }
.src-it.off .src-a { opacity: .55; }                    /* 설정 텔레그램 꺼 둔 줄과 같은 흐림 - 스위치는 흐리지 않는다 */
.src-it.off .src-no, .src-it.failed .src-no { background: var(--surface-3); color: var(--text-3); }
.src-it.upl .src-a, .src-it.upfail .src-a { cursor: default; }   /* '.up' 은 쓰지 않는다 - 전역 .up 이 상승 빨강 */
.src-prog { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.src-prog > i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.src-redo { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.src-it.flash { animation: srcFlash 1.6s ease; }
@keyframes srcFlash { 0%, 40% { background: rgba(63, 194, 140, .16); } 100% { background: var(--surface); } }
.src-it.hl { box-shadow: inset 0 0 0 1px var(--accent-text); }
.src-note { margin: 2px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-3); word-break: keep-all; }
.src-note p { margin: 0 0 4px; }
.src-old { margin: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
/* 번호를 모르는 줄 (옛 서버 - 응답에 plan 이 없다) - 번호 자리 없이 이름부터 */
.src-it.nos .src-a { grid-template-columns: minmax(0, 1fr); }
.src-it.nos .src-l2 { grid-column: 1; }

/* 번호 알약 = 인용 칩 (같은 그림이어야 '자료 2' 가 바로 이어진다). 번호 알약은 앱이 그리는 자리(칸 줄 · 노트 첫 화면 안내 · 보기 창 머리)로만 좁힌다 -
   전역 .src-no 면 답 글의 <a class="src-no" href="바깥"> 가 진짜 칩과 같은 녹색 번호로 그려졌다 (10-11 검증). 인용 칩은 button 이라 답 글이 흉내 낼 수 없다 (정화가 button 을 걷는다) */
.src-it .src-no, .src-lead .src-no, .src-pv-t .src-no, button.src-cite { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pill); background: rgba(63, 194, 140, .14); color: var(--accent-text); font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.src-it .src-no .spin { width: 9px; height: 9px; }
button.src-cite { position: relative; min-width: 18px; height: 18px; margin: 0 1px; border: 0; font-family: inherit; font-size: 11px; vertical-align: 1px; cursor: pointer; transition: background .15s ease; }
button.src-cite:hover, button.src-cite:focus-visible { background: rgba(63, 194, 140, .3); outline: none; }
button.src-cite.off { background: var(--surface-3); color: var(--text-3); }
button.src-cite.gone { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); text-decoration: line-through; }
.src-cites { white-space: nowrap; }

/* 바닥 - AI 가 읽는 양 (.ai-usage 와 같은 값) */
.src-use { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.src-use b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-2); }
.src-use .num { font-variant-numeric: tabular-nums; }
.src-use .bar { height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 4px 0 2px; }
.src-use .bar i { display: block; height: 100%; background: var(--accent-text); transition: width .3s ease; }
.src-use .bar i.hi { background: var(--gold); }
.src-use small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; }
.src-use small.warn { color: var(--gold); }

/* 놓기 막 - 칸 위 (.drop-overlay 그대로, 둘째 줄) */
.src > .src-cover { inset: 8px; padding: 0 16px; font-size: 15px; text-align: center; line-height: 1.5; }
.drop-overlay b { display: block; }
.drop-overlay small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }

/* 자료 보기 창 (지금 .modal 틀) */
.src-modal .modal__bar { gap: 10px; }
.src-pv-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.src-pv-t .pj-title { flex: 1 1 auto; min-width: 0; max-width: 640px; color: #fff; text-overflow: ellipsis; }
.src-pv-t > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-pv-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.src-pv-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.pv-card.src-pv { display: flex; flex-direction: column; gap: 12px; }
.src-pv audio { width: 100%; }
.src-pv-st { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 13px; color: var(--text-2); }
.src-pv-st b { font-weight: 600; color: var(--text); }
.src-pv-st .grow { flex: 1 1 auto; }
.src-pv-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.src-pv-h .lbl { font-size: 13px; font-weight: 700; color: var(--text-2); }
.src-pv-h small { font-size: 12.5px; color: var(--text-3); }
.src-pv-h .grow { flex: 1 1 auto; }
.src-md { font-size: 13.5px; }                         /* 그림 · 영상 설명 마크다운 (.md 위에) */
.src-cut { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; font-weight: 700; color: var(--gold); white-space: normal; }
.src-cut::before, .src-cut::after { content: ""; flex: 1 1 24px; border-top: 1px dashed rgba(203, 162, 88, .6); }
.src-unread, .src-pv.off .pv-text { color: var(--text-3); }
.src-more { align-self: center; }
.src-pv-x { display: contents; }                       /* 글 · [나머지 글 보기] 를 다시 그리는 자리 - 감싼 div 가 카드의 gap · 가운데 맞춤을 끊지 않게 */

/* 입력창 '자료 N' 알약 (btn btn-outline btn-sm 위에 - 제작 머리줄 '자료 N' 과 같은 단추) · 입력창 띠 */
.src-pill { position: relative; flex: 0 0 auto; gap: 5px; }
.src-pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
.src-pill[aria-expanded="true"] { background: rgba(63, 194, 140, .12); }
.src-pill .spin { width: 10px; height: 10px; }
.src-pill .src-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--surface); background: var(--gold); }
.src-pill .src-dot.bad { background: var(--red); }
.composer .src-pill { height: 34px; padding-block: 0; }   /* 모델 고르기 · 클립과 같은 높이 (실측 34) */
.src-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: -2px 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }   /* 입력창 안 맨 위 줄 - 새 상자를 두르지 않는다 */
.src-strip > span { flex: 1 1 150px; min-width: 0; }   /* 150 = 360 폭에서도 단추 · 닫기가 글 옆 한 줄에 (200 이면 [x] · [취소] 가 혼자 아랫줄로 떨어졌다) */
.src-strip .spin { width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.src-strip.warn > span { color: var(--gold); }

/* 선거 칩 - .cp-chip 그대로, 넣기 줄 · 칸만 칩 자리에 맞춘다 */
.cp-chip.off b, .cp-chip.off small, .cp-chip.off i { opacity: .55; }
.cp-chip.upl { cursor: default; }
.cp-files .src-add, .cp-files .src-form { padding: 0; border: 0; }
.cp-files .src-addnote { font-size: 11.5px; color: var(--text-3); }

/* AI 탭 - [목록 272 | 대화 | 기초 자료]. .ai 는 작업 공간 틀(.ai.wide-side)도 쓰므로 .ai-nb 로만 */
.ai.ai-nb { position: relative; overflow: clip; grid-template-columns: 272px minmax(0, 1fr) clamp(280px, 22vw, 320px); }   /* clip = 서랍 translateX 가 칸 밖으로 나가도 페이지가 늘지 않게 (.pj 와 같은 까닭) */
.ai-src { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); background: var(--canvas-2); }
.ai-src > .src { flex: 1 1 auto; height: auto; }
.ai-src-bd { display: none; }
.ai-nb .ai-hello { overflow: auto; justify-content: safe center; }   /* 안내 줄 · 시작 질문으로 휴대폰에서 넘칠 때 위가 잘리지 않게 */
.ai-hello .src-lead { margin: -8px 0 0; width: min(720px, 100%); font-size: 14px; line-height: 1.6; color: var(--text-3); text-align: center; word-break: keep-all; }
.ai-hello .src-lead .src-no, .src-hello .src-lead .src-no { vertical-align: 1px; margin: 0 2px; }
.ai-hello .src-starters { width: min(720px, 100%); margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }   /* 2열 → 좁으면 1열 (설계 6-3) - .cp-starters 의 230px 그대로면 720 폭에서 3 + 1 로 놓였다 */
/* 다시 연 말 0 노트 대화 - 노트 안내를 대화 칸 안에 (제작 · 선거 대화 첫 화면 .cp-hello > .ws-hello 그대로, 입력창은 아래 그대로 - 10-11). 시작 질문은 가운데 빈 화면과 같은 2열 */
.src-hello .src-starters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ai-nb .att-row:not([hidden])::before { content: "이 메시지에 첨부"; flex: 1 0 100%; font-size: 11.5px; color: var(--text-3); }
.cv .cv-src { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cv .cv-src svg { width: 12px; height: 12px; }
.cv.on .cv-src { color: var(--accent-text); }
/* 끌고 들어오면 두 자리가 함께 - 손 아래만 진하게 · 실선. 흐리게는 안 글 · 테두리만 (막 바탕 .88 은 그대로) -
   막 전체를 .5 로 흐리니 바탕까지 옅어져 밑 글이 절반 넘게 비치고 막 글과 한 자리에 포개져 둘 다 안 읽혔다 (10-11 검증) */
.ai-nb.dnd .ai-main:not(.drag) > .drop-overlay > div, .ai-nb.dnd .src:not(.drag) > .src-cover > div { opacity: .5; }
.ai-nb.dnd .ai-main:not(.drag) > .drop-overlay, .ai-nb.dnd .src:not(.drag) > .src-cover { border-color: rgba(63, 194, 140, .45); }
.ai-nb .drag > .drop-overlay { border-style: solid; }
.ai-nb .ai-main > .drop-overlay { inset: 8px; padding: 0 16px; font-size: 15px; text-align: center; line-height: 1.5; }   /* 두 줄 막 - 칸 막(.src-cover) · 오른쪽 대화창 막과 같은 값 (제목이 긴 둘째 줄 왼쪽 끝에 붙고 휴대폰은 테두리에 붙었다, 10-11 검증). 옛 한 줄 막(.ai-nb 없음)은 그대로 */

/* 제작 - 칸 안에서 목록만 굴린다 (머리 · 넣기 줄 · 바닥이 붙어 있게). 232px 칸 여백은 자리로 (@container 쓰지 않음) */
.pj-mk .pj-mats { overflow: hidden; display: flex; flex-direction: column; }
.pj-mk .pj-mats > .src { flex: 1 1 auto; height: auto; }
.pj-mk .src-body { padding-inline: 10px; }

/* 넓은 화면 - sidechat 과 같은 경계 (min-width:1181px 은 소수점 폭에서 비었다, 10-08) */
@media not all and (max-width: 1180px) {
  .ai.ai-nb.src-folded { grid-template-columns: 272px minmax(0, 1fr); }
  .ai-nb.src-folded > .ai-src { display: none; }
  .ai-nb .src-fold { display: inline-flex; }
}
@media not all and (max-width: 1279px) { .pj-mk .pj-head { min-height: 56px; } }   /* 칸 머리(.src-h 56px)와 밑줄을 한 줄로 (실측 55.3px) */
@media (max-width: 1279px) { .pj-mk .src-close { display: inline-flex; } .pj-mk .src-h { min-height: 0; } }   /* 서랍 머리는 오른쪽 'AI 대화' 서랍 머리(.pj-chat-x)와 같은 높이 - 56px 는 1280 이상에서 가운데 머리와 밑줄을 맞출 때만 */
@media (max-width: 1180px) {
  .ai.ai-nb { grid-template-columns: 272px minmax(0, 1fr); }
  .ai-nb > .ai-src { position: absolute; z-index: 40; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); border-left: 0; box-shadow: var(--shadow-float);
    transform: translateX(102%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  .ai-nb.src-open > .ai-src { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .ai-nb.src-open > .ai-src-bd { display: block; position: absolute; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
  .ai-nb .src-close { display: inline-flex; }
  .ai-nb .src-h { min-height: 0; }                                 /* 서랍 머리 - 제작 서랍 머리와 같은 높이 */
}
@media (max-width: 860px) {                                        /* 왼쪽 목록 서랍(.ai-side)과 거울 - 화면 맨 위까지 */
  .ai.ai-nb { grid-template-columns: minmax(0, 1fr); }             /* 위 1180 규칙(.ai.ai-nb)이 지금 .ai 의 1fr 를 이겨서 다시 적는다 - 빠뜨리면 휴대폰에 272px 빈 칸 */
  .ai-nb > .ai-src { position: fixed; z-index: 60; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ai-nb.src-open > .ai-src-bd { position: fixed; z-index: 55; background: rgba(0, 0, 0, .5); }
}
@media (max-width: 520px) {
  /* 입력창 둘째 줄 [모델 ▾][단계][자료 N] - 첫 줄 [클립][입력칸][보내기] 그대로. 띠는 맨 위 줄 */
  .ai-nb .composer { grid-template-areas: 'strip strip strip strip' 'top top top top' 'ref ref ref ref' 'clip ta ta send' 'model model effort srcp'; }
  .ai-nb .composer .ctl > .src-pill { grid-area: srcp; justify-self: end; align-self: stretch; height: auto; margin-top: 8px; padding-inline: 10px; }
  .ai-nb .composer .src-pill .t { display: none; }                 /* 아이콘 + 수만 */
  .ai-nb .composer .send { justify-self: end; }
  .cp-composer .composer:has(> .src-strip) { grid-template-areas: 'strip strip strip strip' 'top top top top' 'ref ref ref ref' 'clip ta ta send' 'model model effort effort'; }
  .composer > .src-strip { grid-area: strip; }
  .pj-mk .pj-head .src-pill .t { display: none; }                  /* 제작 머리줄도 아이콘 + 수만 - 글까지 넣으면 390 에서 [만들 내용|결과물] 이 두 줄로 꺾였다 */
  .ai-nb .composer .src-pill:has(> .spin) > svg, .pj-mk .pj-head .src-pill:has(> .spin) > svg { display: none; }   /* 읽는 중이면 돌기가 아이콘 자리에 - 알약이 넓어져 360 에서 모델 이름이 잘렸다 */
  /* 단계 토글의 오른쪽 누름 여백은 뺀다 (칸 사이 8px 로 떨어진다) - 360 에서 모델 칸이 '2' 137px 로 줄어 'Gemma 4 26B' 가 잘렸다 (10-11 검증, 설계 12-2-13 '140px 이상') */
  .ai-nb .composer .ctl > .eff { padding-right: 0; }
}
@media (max-width: 375px) {
  /* 알약 글이 길면('1/2' · '22/23' - paintPill 의 .long) 아이콘을 빼고 여백 · 틈을 줄인다 - 360 에서 모델 칸이 '1/2' 127px · '22/23' 109px 로 줄어 'Gemma 4 26B' 가 잘렸다 (10-11 검증).
     자리가 모자란 이 폭에서만 - 520 이하 전체에 걸었더니 390 · 520 처럼 넉넉한 폭에서도 같은 단추가 수에 따라 아이콘이 있다 없다 했다 (설계 6-1 · 6-2 '아이콘 + 수', 10-11 검증) */
  .ai-nb .composer .ctl > .src-pill.long { padding-inline: 6px; gap: 3px; }   /* 틈 3 - 360 '22/23' + 읽는 중(돌기 + 수)에서도 모델 칸 140px (5 면 139.4) */
  .ai-nb .composer .src-pill.long > svg { display: none; }
}

/* 손가락 - 보이는 크기는 그대로, 누르는 자리만 넓게 */
@media (pointer: coarse) {
  .src-it { padding: 9px 8px; row-gap: 10px; }                     /* 스위치 누름 자리와 아랫줄 빼기가 겹치지 않게 */
  .src-it > .st-sw input { inset: -10px -8px -3px; }               /* 설정의 -10px -8px 에서 아래만 줄임 */
  .src-x { width: 32px; height: 32px; margin: -5px -5px -5px 0; opacity: .8; }
  .src-add > .btn, .src-form .btn, .src-all .btn, .src-strip .btn { min-height: 40px; }   /* 머리 [접기] · [닫기] 는 btn-sm 34px 그대로 - 옆 'AI 대화' 서랍 머리 [닫기] 와 같게 (10-11 검증: 40 · 34 로 어긋났다) */
  .src-strip .icon-btn { width: 36px; height: 36px; }               /* 띠 [x] - 같은 입력창 참고 띠(.cp-ref)와 같은 값 (28px 그대로였다) */
  .src-empty { border-style: none; }                               /* 끌어 놓기가 없다 */
  .src-empty > .btn { min-height: 44px; }
  button.src-cite::after { content: ""; position: absolute; inset: -12px -3px; }   /* 보이는 18px, 누르는 42px (18 + 12 x 2) - 줄 간격 그대로 */
  .composer .src-pill { min-height: 38px; }                        /* 입력창 알약만 모델 고르기(38px)와 같게 - 제작 머리줄 알약은 옆 'AI 대화' 단추와 같은 높이 그대로 (10-11 통합 시험: 390 에서 둘이 38 · 34 로 어긋났다) */
  .src-pv-nav .icon-btn { width: 40px; height: 40px; }
}

/* ══ 설정 › 학습DB (10-11) - settingsLearn.js · learnUpload.js, 설정 › AI 모델의 모델별 호출 확인(.ld-kc) ══
   묶음 · 줄 · 알약 · 스위치 · 칩 · 끌어 놓기 칸은 공용(.st-grp · .st-row · .st-v · .st-sw · .chip · .mt-drop · .mt-bar · .sms-pg · .pf-x) 그대로, 여기는 학습DB 만의 것 (접두 .ld-).
   기본값을 먼저 두고 휴대폰은 맨 끝 @media 에서만 바꾼다 (10-08 데스크톱 회귀 교훈). 유형 분포 막대색 --ld-bar 는 카드 바탕(--surface) 위에서 대비 3:1 을 넘고 밝기도 알맞은 녹색 (팔레트 검사기로 확인 - --accent 는 대비 2.9 · --accent-text 는 너무 밝다) */
#learn { --ld-bar: #22a374; }
.ld-qs, .ld-qc, .ld-addbox, #ldaddr:not(:empty) { display: flex; flex-direction: column; gap: 6px; }   /* 감싼 칸도 묶음과 같은 간격 */
.ld-addbox { gap: 8px; }
#ldaddf:empty, #ldaddr:empty { display: none; }
/* 1. 처음 자료 넣기 */
.ld-ob { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--accent-text); background: rgba(63, 194, 140, .05); }
.ld-obh { display: flex; align-items: flex-start; gap: 8px; }
.ld-obh p { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ld-obh b { font-size: 15.5px; font-weight: 700; color: var(--text); }
.ld-obh span { font-size: 13px; color: var(--text-2); }
.ld-obh .pf-x { margin: -6px -8px 0 0; }
.ld-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.ld-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed var(--line-2); background: var(--surface); cursor: pointer; outline: none; transition: border-color .15s ease, background .15s ease; }
.ld-dragging .ld-card { border-color: rgba(63, 194, 140, .55); }   /* 파일을 들고 들어오면 카드 전체가 넣는 곳으로 */
/* 마우스 올림 · 키보드 초점 = 같은 화면 '+ 직접 추가' 끌어 놓기 칸(.mt-drop:hover)과 같은 진한 초록 (10-12 검토: 반투명이라 거의 안 보였다).
   마우스 올림은 올릴 수 있는 기기에서만 - 손가락 기기는 누른 자리에 마우스 올림이 남아 고르지 않은 카드가 진하게 남는다 */
.ld-card:focus-visible { border-color: var(--accent-text); }
@media (hover: hover) { .ld-card:hover { border-color: var(--accent-text); } }
.ld-card.on { border-style: solid; border-color: var(--accent-text); background: rgba(63, 194, 140, .12); }
.ld-card.busy { border-style: solid; border-color: rgba(63, 194, 140, .55); }
/* 맨 아랫줄 '+ 넣기' (넣는 곳 표시) · 올리는 동안은 '올리는 중 1/2' + 진행 막대 (설명은 그대로 - 10-12 검토: 설명을 바꾸면 PPT 줄이 102 → 86px 로 출렁였다).
   같은 줄 높이, 한 줄의 카드끼리 바닥에 맞춘다. 같은 값이 settingsLearn.js CARDF · CARDF_B · CARDF_BAR 에 글 안(inline)으로도 있다 (옛 app.css 를 쥔 탭) - 바꿀 때 둘 다 */
.ld-cardf { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: auto; padding-top: 2px; }
.ld-cardf b { font-size: 12px; font-weight: 650; color: var(--accent-text); white-space: nowrap; }
.ld-cardf .mt-bar { flex: 1 1 auto; margin-top: 0; }
.ld-cardh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ld-cardh svg { flex: 0 0 auto; color: var(--text-3); }
.ld-cardh b { font-size: 14px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-cardh em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ld-card small { font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.ld-obft { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ld-obimp { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.ld-obimp small { font-size: 12px; color: var(--text-3); flex: 1 1 200px; min-width: 0; }
/* 올리기 알림 (선적재 · 직접 추가) */
.ld-up { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--surface-2); }
.ld-uphd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ld-uph { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ld-uph b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ld-uph small { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.ld-uphd .pf-x { margin: -4px -6px -4px 0; }
.ld-upl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-upr { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; }
.ld-upr:first-child { border-top: 0; }
.ld-upi { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.ld-upi .spin { width: 12px; height: 12px; }
.ld-upt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-upt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-upt small { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.ld-upr.err small { color: #ff9a9d; }
.ld-upr.dup small, .ld-upr.stop small { color: var(--gold); }
.ld-upr .pf-x { margin: -2px 0; width: 30px; height: 30px; }
.ld-mtx { display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; }
/* 2. 학습 모델 - 맨 위 카드 = 지금 학습 모델 (.ld-cur, 갈래 이름 .ld-curg), 로컬 모델 서버 상태는 '로컬' 묶음 이름 아래 .ld-lst (10-12 대표님 "학습모델 변경했는데 변경되지 않음") */
.ld-curg { font-weight: 600; color: var(--text-2); }
.ld-mg { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.ld-mgl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12.5px; color: var(--text-3); padding-top: 7px; }
.ld-lst { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; cursor: default; }
.ld-mgn { display: inline-flex; align-items: center; gap: 6px; }   /* 지금 모델이 로컬이면 상태는 점만 - 이름 바로 옆 (글은 위 카드 알약이 말한다, 10-12 검토 '실행 안 됨' 두 번) */
/* 고를 수 없는 칩 (Gemini · GPT 키 검증 안 됨) - 흐리게 두되 누를 수 있다 (aria-disabled, 누르면 까닭 알림 - 10-12 검토). :disabled 는 옛 화면 파일이 쓰던 것.
   흐림 .42 는 settingsLearn.js GRAY 로 글 안(inline)에도 있다 (배포 직후 옛 app.css 를 쥔 탭에서 칩이 또렷했다) - 바꿀 때 둘 다 */
.ld-mg .chip:disabled, .ld-mg .chip[aria-disabled="true"] { opacity: .42; cursor: default; }
.ld-mg .chip[aria-disabled="true"] { cursor: help; }
.ld-mg .chip:disabled:hover, .ld-mg .chip[aria-disabled="true"]:hover { color: var(--text-2); border-color: var(--line-2); }
.ld-mg .chip:disabled:active, .ld-mg .chip[aria-disabled="true"]:active { transform: none; }
.ld-link { align-self: center; padding: 6px 4px; font-size: 12.5px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
#ldmodel [data-ld-mrefresh][aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }   /* [다시 확인] → '◌ 확인 중' (칸 · 단추 폭은 그대로 - 두 글을 한 칸에 겹친 모양은 settingsLearn.js recheckBtn 의 글 안) */
/* 3. 대기열 */
.ld-now > .spin { flex: 0 0 auto; }
.ld-now .ld-nowsw { color: var(--gold); }   /* 모델을 바꾸기 전에 시작한 항목 - '바꾸기 전에 시작해 이 모델로 마칩니다 - 다음 항목부터 …' (10-12 검토) */
.ld-qn { margin: 0; font-size: 13px; color: var(--text-2); }
.ld-qn b { color: var(--text); font-weight: 600; }
.ld-qa { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ld-qre { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ld-qre small { font-size: 12.5px; color: var(--text-3); }
/* 4. 자동 적재 · 페르소나 반영 - 카테고리마다 한 줄, 스위치 두 칸 */
.ld-tg { display: flex; flex-direction: column; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.ld-tgr { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); min-height: 44px; }
.ld-tgr:first-child { border-top: 0; }
.ld-tgh { min-height: 0; padding-block: 7px 5px; font-size: 12px; color: var(--text-3); }
.ld-tgh > span:not(:first-child), .ld-tgc { justify-self: center; text-align: center; }
.ld-tgc { display: flex; justify-content: center; }   /* 스위치(label)가 글줄 속에 들면 폭 · 높이가 없어 손잡이만 보였다 */
.ld-tgc small { font-size: 11.5px; line-height: 1.3; }
.ld-swt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ld-swt b { font-size: 13.5px; font-weight: 600; }
.ld-swt small { font-size: 12px; color: var(--text-3); }
/* 5. 요약 - 개수 칸 · 유형 분포 막대 (막대 끝에 값, 글자는 글자색) */
.ld-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.ld-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ld-kpi small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ld-kpi b { font-size: 20px; font-weight: 650; color: var(--text); line-height: 1.3; }
.ld-kpi:hover:not(:disabled) { border-color: var(--line-2); }
.ld-kpi.on { border-color: var(--accent-text); }
.ld-kpi:disabled { cursor: default; }
.ld-kpi:disabled b { color: var(--text-3); }
.ld-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--text-3); }
.ld-dot.ok { background: var(--accent-text); }
.ld-dot.bad { background: var(--red); }
.ld-dot.wait { background: var(--gold); }
.ld-dist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2px 20px; }
.ld-dr { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ld-dr:hover, .ld-dr.on { background: var(--surface-2); }
.ld-dr:focus-visible, .ld-kpi:focus-visible, .ld-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.ld-drl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-drl svg { flex: 0 0 auto; color: var(--text-3); }
.ld-dr.on .ld-drl { color: var(--text); }
.ld-drt { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ld-drt i { display: block; height: 8px; width: calc((100% - 44px) * var(--w, 0)); min-width: 3px; border-radius: 0 4px 4px 0; background: var(--ld-bar); }
.ld-drt b { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ld-sumacts { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
/* 6. 항목 목록 */
.ld-items { scroll-margin-top: calc(var(--nav-real, var(--nav-h)) + 12px); }   /* 요약 칸 · 쪽 단추가 목록으로 옮길 때 위 메뉴 아래에 멈추게 */
.ld-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-find { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 0; height: 34px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--canvas-2); color: var(--text-3); }
.ld-find:focus-within { border-color: var(--accent-text); }
.ld-find input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--text); }
.ld-tools .select { flex: 0 1 auto; min-width: 0; max-width: 170px; text-overflow: ellipsis; }
.ld-addbtn { margin-left: auto; }
.ld-selbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(63, 194, 140, .35); background: rgba(63, 194, 140, .07); }
.ld-selbar b { font-size: 13.5px; }
.ld-selb { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ld-rows { display: flex; flex-direction: column; gap: 4px; }
.ld-empty .btn { margin-left: 8px; }
.ld-it { border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; min-width: 0; }
.ld-it.open { border-color: var(--line-2); }
.ld-it.sel { border-color: rgba(63, 194, 140, .45); }
.ld-row { display: flex; align-items: stretch; min-width: 0; }
.ld-ck { display: flex; align-items: center; padding: 0 2px 0 12px; cursor: pointer; flex: 0 0 auto; }
.ld-ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ld-head { flex: 1 1 auto; min-width: 0; min-height: 44px; display: grid; grid-template-columns: 112px 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px 9px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ld-head:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.ld-when { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-st { justify-self: start; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ld-st .spin { width: 10px; height: 10px; }
.ld-title { min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-it.open .ld-title { white-space: normal; overflow-wrap: anywhere; }
.ld-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ld-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.ld-au.ref { color: var(--gold); }
.ld-pg { margin-top: 2px; }
/* 펼친 칸 */
.ld-det { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px 40px; min-width: 0; }
.ld-dm { margin: 0; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.ld-dm a, .ld-rm a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ld-fail { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(229, 72, 77, .08); }
.ld-failm { flex: 1 1 200px; min-width: 0; font-size: 13px; color: #ffb4b4; overflow-wrap: anywhere; }
.ld-wait { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2); }
.ld-wait p { margin: 0; font-size: 13px; color: var(--text-2); }
.ld-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
.ld-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface); }
.ld-col h4 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.ld-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ld-tx h5 small { font-weight: 500; }
.ld-text { max-height: 340px; overflow: auto; overscroll-behavior: contain; }
.ld-files { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ld-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ld-fig img { display: block; width: auto; max-width: 100%; max-height: 280px; border-radius: 8px; background: var(--canvas); object-fit: contain; }
.ld-fig audio, .ld-fig video { display: block; width: 100%; }
.ld-fig video { max-height: 320px; border-radius: 8px; background: #000; }
.ld-fig figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); }
.ld-fig figcaption span { min-width: 0; overflow-wrap: anywhere; }
.ld-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ld-pages img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); background: var(--canvas); }
.ld-doc { background: var(--surface-2); }
.ld-doc > svg { flex: 0 0 auto; color: var(--text-3); }
.ld-rs { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }
.ld-rb { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ld-rb h5, .ld-tx h5 { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-3); }
.ld-rb dl { margin: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 3px 10px; font-size: 13px; line-height: 1.55; }
.ld-rb dt { color: var(--text-3); }
.ld-rb dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ld-rb ul, .ld-rb ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.ld-rb.ref li { color: var(--text-2); }
.ld-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-tags span { padding: 1px 8px; border-radius: var(--pill); background: var(--surface-3); font-size: 12px; color: var(--text-2); }
.ld-rm { margin: 0; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.ld-wait-n { margin: 0; font-size: 13px; color: var(--text-3); }
.ld-wait-n .spin { width: 11px; height: 11px; vertical-align: -1px; }
.ld-acts { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
/* 고쳐 쓰기 · 직접 추가 칸 */
.ld-edit, .ld-add { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ld-add { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.ld-af { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.ld-fl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ld-fl > span { font-size: 12.5px; color: var(--text-3); }
.ld-fl input, .ld-fl textarea, .ld-mtx textarea, .ld-wait textarea { width: 100%; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; font-size: 14px; color: var(--text); }
.ld-fl textarea, .ld-mtx textarea, .ld-wait textarea { resize: vertical; line-height: 1.6; }
.ld-fl input:focus, .ld-fl textarea:focus, .ld-mtx textarea:focus, .ld-wait textarea:focus { border-color: var(--accent-text); }
.ld-fl .select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.ld-drop.on { border-color: var(--accent-text); background: rgba(63, 194, 140, .08); }
.ld-afb { display: inline-flex; gap: 6px; margin-left: auto; }
/* 종합 페르소나 창 - 카드는 내용 높이만큼 (.modal__body 격자가 한 줄을 끝까지 늘여, 아직 판이 없을 때 한 줄 안내가 화면 높이의 빈 카드로 보였다 - .eld-modal 과 같은 고침, 10-12 점검) */
.ld-modal .modal__body { align-content: start; }
.ld-pv { display: flex; flex-direction: column; gap: 12px; }
.ld-pvbar { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.ld-pvbar .select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
/* 설정 › AI 모델 - 모델마다 실제로 불러 본 결과 (키 줄 아래 한 줄) */
.ld-kc { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ld-kc > span { padding: 1px 8px; border-radius: var(--pill); background: var(--surface-3); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ld-kc > .ok { color: var(--accent-text); }
.ld-kc > .bad { color: #ff9a9d; }
@media (max-width: 640px) {
  /* 설정 탭 일곱 = 넷 · 셋 두 줄 (여섯 칸 규칙 3 + 3 이면 일곱째가 셋째 줄에 1/3 폭으로 혼자 남는다) */
  .st-tabs:has(> button:nth-child(7)) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .st-tabs:has(> button:nth-child(7)) button, .st-tabs:has(> button:nth-child(7)) button:nth-child(n+4) { grid-column: span 3; }
  .st-tabs:has(> button:nth-child(7)) button:nth-child(n+5) { grid-column: span 4; }
  .ld-ob { padding: 12px; }
  .ld-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ld-cur > .st-main { flex-basis: 100%; }   /* 지금 학습 모델 카드 - 알약 · [다시 확인] 은 늘 아랫줄 (390 에서 글 길이에 따라 제목 옆 ↔ 아랫줄로 모델마다 출렁였다, 10-12 검토) */
  .ld-mg { grid-template-columns: minmax(0, 1fr); }
  .ld-mgl { padding-top: 0; flex-direction: row; align-items: center; gap: 8px; }   /* 묶음 이름이 칩 위 한 줄 - 로컬 상태는 이름 옆 */
  .ld-qre { margin-left: 0; }
  /* 개수 칸 넷 = 한 줄, 받아쓰기까지 다섯 = 셋 · 둘 - 세 칸 격자는 '실패' 가 둘째 줄에 1/3 폭으로 혼자 남았다 (10-12 점검) */
  .ld-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ld-kpis:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ld-kpis:has(> :nth-child(5)) > * { grid-column: span 2; }
  .ld-kpis:has(> :nth-child(5)) > :nth-child(n+4) { grid-column: span 3; }
  .ld-kpi { padding: 7px 10px; }
  .ld-kpi b { font-size: 18px; white-space: nowrap; }   /* 숫자는 한 줄 - 네 칸(360 폭 칸 69px)에서 1만 건이 넘으면 '12,34 / 5' 로 가운데서 갈렸다 (10-12 검토) */
  /* 1만 건부터(.long - paintSum, 글자 여섯 '10,000') 숫자를 폭 따라 줄이고(360 → 15.1px · 390 → 16.4px · 430 부터 18px) 안쪽 여백을 2px 씩 덜어
     '88,888' 은 안쪽 칸에, '123,456' 도 칸 안에 든다 (r2 kpi.mjs 실측) */
  .ld-kpis.long .ld-kpi { padding-inline: 8px; }
  .ld-kpis.long .ld-kpi b { font-size: clamp(15px, 4.2vw, 18px); }
  .ld-sumacts { margin-left: 0; }
  /* 거르기 줄 = [찾기 · 직접 추가] / [상태 · 유형 · 출처] 격자 (10-12 점검) - flex 줄바꿈은 폭에 따라 칸이 섞였고(430 · 640 에서 고르기 칸이 첫 줄로),
     390 에서 세 칸이 '전체 상태' 보다 1px 좁아 셋 다 '전체 …' 로 잘려 어느 칸인지 알 수 없었다. 안쪽 여백 · 화살표 자리를 .composer .select(520 이하)처럼 줄인다 */
  .ld-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-find { grid-row: 1; grid-column: 1 / 3; }
  .ld-addbtn { grid-row: 1; grid-column: 3; margin-left: 0; }
  .ld-tools .select { grid-row: 2; max-width: none; padding-inline: 8px 20px; background-position: right 7px center; }   /* 360 폭 칸 94px 에 '전체 상태' (16px) 가 들어가게 */
  .ld-ck { padding-left: 10px; }
  /* 줄 머리 = 두 줄 (상태 · 제목 / 적재 시각 · 출처 · 유형 · 작성자) - 끊는 자리는 ::after */
  .ld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 9px 10px 9px 6px; }
  .ld-head::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .ld-st { order: 0; }
  .ld-title { order: 1; flex: 1 1 0; }
  .ld-when { order: 3; font-size: 12px; }
  .ld-meta { order: 4; min-width: 0; overflow: hidden; gap: 6px; }
  .ld-det { padding: 0 10px 12px; }
  .ld-col { padding: 10px 12px; }
  .ld-rb dl { grid-template-columns: 64px minmax(0, 1fr); }
  .ld-tgr { grid-template-columns: minmax(0, 1fr) 48px 48px; gap: 8px; padding-inline: 10px; }
}
@media (pointer: coarse) {
  .ld-ck { padding-right: 6px; }
  .ld-ck input { width: 20px; height: 20px; }
}

/* ══ 설정 › 사용설명서 (10-13 대표님 "설정 프로필 전에 사용설명서 탭 - 기본개요 / 카테고리별 상세 안내 / 설정 안내") - settingsManual.js · 설정 탭 줄 여덟 ══
   있는 부품 그대로: 하위 탭 .pj-seg (설정 탭 줄과 같은 알약) · 묶음 .st-grp · 줄 .st-row · 꼬리표 .st-v · 번호 .st-n · 바로 가기 .chips ·
   펼치기 상자 .ld-it(학습DB 항목) + 칸 이름표 .ld-rb dl · 표 .ld-tg(학습DB '자동 적재 · 페르소나 반영' 표 - 페르소나 표 · RAG 표). 여기는 자리 · 펼침 표시(›) · 빈 자리만 - 새 모양을 짓지 않는다.
   기본값을 먼저, 휴대폰은 아래 @media 에서만 (10-08 데스크톱 회귀 교훈).
   --mn-css = 이 판의 CSS 인지 화면이 확인하는 표시 (열어 둔 옛 탭은 옛 app.css 를 쥐고 있다 - 그때 화면은 위에 '새로 고침' 한 줄을 단다).
   10-13 보완 = 2: 꼬리표 세 자리 고정(.mn-no 빈 자리) · RAG 한눈에 표(.mn-rtg) · 기본개요 목록이 펼치기 안으로 (.mn-list 없앰) */
:root { --mn-css: 2; }
.mn-tabs { margin: 14px 0 2px; }
.mn-tabs, .mn-body .st-grp[id] { scroll-margin-top: calc(var(--nav-real, var(--nav-h)) + 12px); }   /* 하위 탭 · 바로 가기로 옮길 때 위 메뉴 아래에 멈추게 (.ld-items 와 같은 값) */
.mn-old { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mn-when { flex: 0 0 96px; font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }   /* 하루 시각표 - 시각 칸 */
.mn-sub { margin-top: 6px; font-size: 13px; color: var(--text-2); }
.mn-go { margin-left: auto; }   /* 카테고리 머리 끝 '<이름> 화면으로' - 묶음 머리 줄에 건다 */
/* 펼치기 - 상자는 학습DB 항목(.ld-it)과 같고, 펼침 표시 › 는 AI 답의 '생각 과정' 접기와 같은 꼴 */
.mn-it[open] { border-color: var(--line-2); }
.mn-sum { list-style: none; position: relative; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-height: 44px; padding: 9px 12px 9px 30px; border-radius: 10px; cursor: pointer; }
.mn-sum::-webkit-details-marker { display: none; }
.mn-sum::before { content: "›"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 17px; line-height: 1; transition: transform .2s var(--ease); }
.mn-it[open] > .mn-sum::before { transform: translateY(-50%) rotate(90deg); }
.mn-sum:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.mn-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.mn-tags > .mn-no[hidden] { display: inline-block !important; visibility: hidden; }   /* 꼬리표 빈 자리 - AI · RAG · 페르소나가 줄마다 같은 자리에 서게. 전역 [hidden] 이 !important 라 여기도 (옛 app.css 면 hidden 그대로 빠진다) */
.mn-det { padding: 0 14px 14px 30px; }
.mn-it .ld-rb dl { grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; }
.mn-it .ld-rb dd > ul { gap: 3px; }
.mn-it .ld-rb > ul { gap: 5px; }   /* 기본개요 펼치기 속 목록 (요금 · 밖으로 나가는 것) - 한 줄이 길다 */
.mn-jump { margin: 2px 0 4px; }
.mn-jump .chip { padding-inline: 10px; }   /* 바로 가기가 데스크톱 카드 한 줄에 들게 (13px 이면 '페르소나' 하나가 둘째 줄에 혼자) */
.mn-ptg .st-v { padding-inline: 8px; white-space: nowrap; }
/* RAG 한눈에 - 페르소나 표와 같은 .ld-tg 에 글 칸 둘 (질문마다 늘 싣는 것 · AI 가 필요하면 찾는 것) */
.mn-rtg .ld-tgr { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.mn-rtg .ld-tgh > span:not(:first-child) { justify-self: start; text-align: left; }
.mn-rc { font-size: 12.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.mn-rc small { font-size: 12px; color: var(--text-3); }
.mn-body .st-row > .st-main small { font-size: 13px; line-height: 1.6; color: var(--text-2); }   /* 읽는 글이 길다 - 설정 줄의 12px 회색 설명을 이 안에서만 한 단 키운다 */
.mn-body .st-main small.mn-when2 { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }   /* 설정 안내 - '언제' 줄 */
@media (max-width: 640px) {
  /* 설정 탭 여덟 = 넷 · 넷 두 줄 (일곱 칸 규칙 4 + 3 이면 여덟째가 셋째 줄에 1/3 폭으로 혼자 남는다) - 일곱 칸 규칙 뒤에 두어 같은 무게에서 이긴다 */
  .st-tabs:has(> button:nth-child(8)) button:nth-child(n+5) { grid-column: span 3; }
  .mn-tabs { display: flex; width: 100%; }
  .mn-tabs button { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; white-space: nowrap; }
  .mn-when { flex-basis: 100%; }
  .mn-cat > .st-gh > .mn-go { order: 1; }                         /* 카테고리 머리 = [이름 · 화면으로] / [설명] 두 줄 - 설명이 길어 단추가 셋째 줄에 혼자 남았다 */
  .mn-cat > .st-gh > small { order: 2; flex-basis: 100%; }
  .mn-sum { padding-left: 28px; }
  .mn-sum::before { left: 11px; }
  .mn-det { padding: 0 12px 12px; }
  .mn-it .ld-rb dl { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 10px; }
  .mn-ptg .ld-tgr { grid-template-columns: minmax(0, 1fr) 58px 58px; gap: 6px; }   /* 학습DB 표의 48px 칸(스위치 자리)에는 '들어감' · '켜짐' 꼬리표가 넘친다 */
  .mn-ptg .st-v { padding-inline: 6px; font-size: 12px; }
  .mn-rtg .ld-tgr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }   /* RAG 표 = [세부 기능] / [늘 · 필요하면] 두 줄 */
  .mn-rtg .ld-tgr > :first-child { grid-column: 1 / -1; }
  .mn-rtg .ld-tgh > :first-child { display: none; }
  .mn-rtg .ld-swt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }   /* 이름 · 카테고리를 한 줄에 (줄마다 한 줄 아낀다) */
}

/* ══ 작성 › 대본 두 갈래 · 출연 준비 (10-13) ══
   있는 모양을 그대로 쓴다: 갈래 알약 = .pj-seg (제목 옆 - 제작 [결과물|설정] · 설정 탭과 같은 알약), 칸 머리 = .wr-sec, 항목 = .wr-seg,
   마무리 한 줄 = .wr-card, 꼬리표 = .kb.wk (목록 꼬리표는 요약 목록 .cv.sumi + .kb 와 같은 꼴). 여기는 간격 · 출처 글씨만 더한다 */
.wr-later { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.wr-prep__sec + .wr-prep__sec { margin-top: 16px; }
.wr-prep__sec > .wr-sec { margin-top: 0; }
.wr-prep .wr-seg p { margin: 4px 0 0; }
.wr-prep .wr-seg .kb { margin-right: 6px; vertical-align: 1px; }
.wr-src { font-size: 12px; font-weight: 500; color: var(--text-3); }
.wr-prep__none { margin: 6px 0 0; font-size: 13.5px; }
.wr-prep .wr-card { margin-top: 18px; }

/* ══ 작성 › 근거 묶음 · 앱 점검 · 본보기 안내 (10-13) ══
   있는 모양을 쓴다: 근거 줄 = .wr-opt (형식 · 분량 · 어체와 같은 줄) + 칩, 미리 보기 · 넣은 근거 자료 = .wr-req__b 상자 · details.wr-req 접기 (요청 내용과 같은 꼴),
   앱 점검 = .wr-flag '확인 필요' 줄 (엔진 경고와 같은 줄), 글 끝 근거 = .wr-sec 머리, 본보기 안내 = .wr-later. 여기는 간격 · 목록 · 단추 글씨만 더한다 */
.wr-evbtn { border: 0; background: none; padding: 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.wr-evbtn:disabled { opacity: .5; cursor: default; }
.wr-evnote { margin: -4px 0 0 46px; font-size: 12.5px; line-height: 1.55; }
.wr-evbox { margin: 0; font-size: 13px; }
.wr-evbox > p.muted, .wr-evd .wr-req__b > p.muted { margin: 0 0 4px; font-size: 12.5px; }
.wr-evl { margin: 4px 0 2px; padding-left: 18px; }
.wr-evl li { margin: 4px 0; line-height: 1.55; overflow-wrap: anywhere; }
.wr-evl li.on > b { color: var(--accent-text); }
.wr-srcs { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.wr-srcs ul { margin: 6px 0 4px; padding-left: 18px; }
.wr-srcs li { margin: 3px 0; overflow-wrap: anywhere; }
.wr-srcs > small { font-size: 12px; }
@media (max-width: 640px) {
  .wr-evnote { margin-left: 0; }
}
@media (pointer: coarse) {
  .wr-evbtn { display: inline-block; padding: 8px 4px; margin: -8px -4px; }
}

/* ══ 노틸러스 분양 (10-14) ══
   담당별 조각 (ntls-impl/css/*.css) 을 한 곳에 - core · admin · ui · integrate · fix. 모두 새 이름(.ntls- · .ss- · .bl-site · .us- · .cv-by · .ai-claude)만 쓴다 (있는 모양을 덮지 않는다).
   폭별 규칙은 각 조각의 @media 안에만 (10-08 데스크톱 회귀 교훈) */
/* ── core (10-14 분양) - 머리 알림 · 비밀번호 바꾸기 화면 · 대표만 안내 · 사용 중지 안내 한 장 (app.js · auth.ts sendSuspendedPage) ── */
/* 머리 알림 - 메뉴 줄(.nav) 안 맨 아래 한 줄. 높이가 --nav-real 에 들어간다 (AI 화면 높이 계산) */
.ntls-notice { padding: 7px var(--gutter); font-size: 13px; line-height: 1.45; text-align: center; border-top: 1px solid var(--line); color: var(--text); background: rgba(63, 194, 140, .10); }
.ntls-notice.warn { background: rgba(229, 72, 77, .16); color: #ffd0d1; }
/* 비밀번호 바꾸기 (첫 로그인 · 내 계정) - 로그인 상자와 같은 결 */
.ntls-pw, .ntls-deny { width: min(440px, calc(100% - 2 * var(--gutter))); margin: 40px auto; padding: 28px 24px; }
.ntls-pw h1, .ntls-deny h1 { margin: 0 0 8px; font-size: 20px; }
.ntls-pw p, .ntls-deny p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.ntls-pw form { display: flex; flex-direction: column; }
.ntls-pw label { font-size: 13px; color: var(--text-2); margin: 0 0 6px; }
.ntls-pw input { width: 100%; padding: 11px 15px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--canvas-2); outline: none; margin-bottom: 14px; }
.ntls-pw input:focus { border-color: var(--accent-text); }
.ntls-pw .btn { width: 100%; padding: 11px 16px; font-size: 15px; margin-top: 4px; }
.ntls-pw .err { min-height: 20px; font-size: 13px; margin-top: 10px; }
.ntls-pw a { color: var(--accent-text); }
/* 사용 중지 안내 한 장 - .login .box 위에 글만 */
.ntls-stop h1 { font-size: 20px; }
.ntls-stop p { line-height: 1.6; }
@media (max-width: 480px) {
  .ntls-pw, .ntls-deny { margin: 20px auto; padding: 22px 18px; }
}
/* ── admin (10-14 분양 3단계) - 설정 › 사용자등록 (settingsSites.js · 접두 .ss-) · 분양 결제 보기 (settingsBilling.js .bl-site) ──
   있는 부품 그대로: 묶음 .st-grp · 머리 .st-gh · 줄 .st-row · 꼬리표 .st-v · 단추 .btn · 칸 .st-prof · 한 줄 칸 .st-in · 바닥 .st-gft · 안내 .st-note · 고르기 .select.
   여기는 사용자등록만의 것 - 사이트 줄(누르면 펼침) · 펼친 칸 · 한 번만 보이는 임시 비밀번호 · 기동 기록 · 기한 칸. 기본값을 먼저, 폭별 규칙은 뒤 (10-08 데스크톱 회귀 교훈) */
.ss-list { gap: 8px; }
.ss-site { display: flex; flex-direction: column; }
/* 사이트 줄 = 단추 (누르면 펼침) - .st-row 모양 그대로, 단추 기본 모양만 걷는다 */
button.ss-head { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.ss-head:hover { background: var(--surface-3); }
button.ss-head:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-site.open > button.ss-head { box-shadow: inset 0 0 0 1px var(--accent-text); }
.ss-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-facts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ss-facts span { white-space: nowrap; }
/* 펼친 칸 - 사이트 줄 아래 왼쪽 선 하나 (상자를 두르지 않는다 - 패널 라인) */
.ss-detail { margin: 4px 0 10px 8px; padding: 0 0 0 14px; border-left: 2px solid var(--line-2); }
.ss-detail .st-grp:first-child { padding-top: 8px; }
.ss-btns { justify-content: flex-start; }
.ss-btns .st-acts { margin-left: 0; }
.ss-until { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.ss-until input { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--canvas-2); color: var(--text); font: inherit; font-size: 12.5px; }
.ss-sub { flex: 1 1 100%; }
.ss-form .ss-wide, .ss-form .st-pft { grid-column: 1 / -1; }
.ss-form select.select { width: 100%; min-width: 0; height: 42px; padding: 0 30px 0 12px; border-radius: 10px; background-color: var(--canvas-2); font-size: 14px; font-weight: 400; color: var(--text); }
.ss-addr { display: flex; align-items: center; gap: 6px; }
.ss-addr input { flex: 1 1 auto; min-width: 0; }
.ss-addr small { font-weight: 400; color: var(--text-3); white-space: nowrap; }
.ss-user .st-v { white-space: nowrap; }
/* 관리 비밀 칸 */
.ss-lock .st-in input { max-width: 360px; }
.ss-lock code { overflow-wrap: anywhere; }
/* 한 번만 보이는 임시 비밀번호 */
.ss-temp { padding: 14px 16px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(203, 162, 88, .07); margin-bottom: 12px; }
.ss-temp .st-gh h3 { color: var(--gold); }
.ss-pw { font-size: 20px !important; letter-spacing: .08em; user-select: all; -webkit-user-select: all; }
/* 기동 기록 - 글로만 (textContent) */
.ss-logwrap { display: flex; flex-direction: column; gap: 4px; }
.ss-log { margin: 0; max-height: 300px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--canvas-2); border: 1px solid var(--line); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; color: var(--text-2); }
.ss-alerts > summary, .ss-events > summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.ss-alerts .st-list, .ss-events .st-list { margin-top: 6px; }
.ss-top .st-gh .st-acts { margin-left: auto; }
/* 분양 결제 보기 (3-I) */
.bl-site { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 6px; }
.bl-site .st-main b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ss-detail { margin-left: 2px; padding-left: 10px; }
  .ss-facts { gap: 2px 10px; font-size: 11.5px; }
  .ss-top .st-gh .st-acts { margin-left: 0; }
  .ss-pw { font-size: 18px !important; }
}
/* ── ui (10-14 분양) - 설정 › 사용자 · 내 계정 (settingsUsers.js · 접두 .us-) ──
   있는 부품 그대로: 묶음 .st-grp · 머리 .st-gh · 줄 .st-row · 꼬리표 .st-v · 단추 .btn · 칸 .st-prof · 바닥 .st-pft · 안내 .st-note.
   설정 › 텔레그램 '정시 브리핑 받기' (settings.js relayHtml) 는 있는 .st-row · .st-sw · .st-note.st-warn 만 쓴다 - 여기 규칙 없음.
   여기는 내 계정 비밀번호 칸 셋만 - 넓은 화면은 한 줄에 셋, 휴대폰은 한 칸씩. 기본값을 먼저, 폭별 규칙은 뒤 (10-08 데스크톱 회귀 교훈) */
.us-pw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.us-pw .us-err { grid-column: 1 / -1; color: #ffb4b4; }
@media (max-width: 640px) {
  .us-pw { grid-template-columns: minmax(0, 1fr); }
}
/* ── integrate (10-14 분양) - AI 탭 대화 목록의 만든 사람 (ai.js .cv-by - 7장 C-6) · 클로드 연결 전 안내 한 줄 (ai.js #aiclaude - 7장 A-3) ──
   있는 부품 그대로: 대화 줄 .cv (자료 수 .cv-src 와 같은 작은 글) · 빈 새 대화 머리 .ai-hello (기초 자료 안내 .src-lead 와 같은 자리 · 같은 결) */
.cv .cv-by { flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-3); }
.cv.on .cv-by { color: var(--text-2); }
.ai-hello .ai-claude { margin: -8px 0 0; width: min(720px, 100%); font-size: 13px; line-height: 1.6; color: var(--text-3); text-align: center; word-break: keep-all; }
.ai-hello .ai-claude a { color: var(--accent-text); white-space: nowrap; }
/* ── fix (10-14 반박 점검 고침 - notes/fix.md) - 사용자등록 (.ss-) · 텔레그램 채널 줄 관리 알림 칸 · 분양 로그인 안내 · 머리 알림 링크 (.ntls-) ──
   있는 부품 그대로: 묶음 .st-grp · 줄 .st-row · 안내 .st-note · 꼬리표 .st-v · 체크 .gw-chk. 여기는 새 이름만, 폭별 규칙은 @media 안에만 */
.ss-form .ss-pvrow { margin: -4px 0 0; }
.ss-preview { display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.ss-preview.st-warn, .ss-err.st-warn, .ss-win.st-warn { color: #f0c36d; }
.ss-won { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ss-cmd { overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ss-ready .st-list { margin-top: 6px; }
.ss-until small { font-size: 11.5px; }
.ntls-alertchk { flex: 0 0 auto; }
.login p.ntls-forgot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; text-align: center; }
.ntls-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .ntls-alertchk { flex: 1 1 100%; order: 3; }
}

/* 로그인 화면 아래 개인정보처리방침 링크 (10-17) - 행이 둘이 되어도 가운데에 모이게 */
.login { align-content: center; gap: 14px; }
.login .login-legal { margin: 0; font-size: 12.5px; text-align: center; }
.login .login-legal a { color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }