/* ============================================================
   Ground 화면 테마 (밝게 / 어둡게 / 낡은 종이 / 크래프트 / 밤바다)
   · 각 화면의 <style> 안 :root 가 "밝게" 값을 정한다 (그대로). 어둡게는 html[data-theme="dark"] 로 덮어쓴다
   · 화면 코드는 색을 직접 쓰지 않고 아래 변수만 쓴다:
       --bg 바탕 · --card 카드/패널 · --surface-2 살짝 가라앉은 면(입력·칩·세그) · --surface-3 표 머리글/아주 옅은 면
       --line 얇은 구분선 · --line-strong 테두리(입력칸·표) · --hover 마우스 올린 면
       --text 본문 · --text-2 보조 · --text-3 흐린 글자 · --accent 강조(파랑) · --on-accent 강조 위 글자
       --glass 반투명 유리 패널 · --input-bg 입력칸 배경 · --shadow-c 그림자 색
   · 테마 선택은 theme.js (localStorage "theme": light | dark | paper(낡은 종이) | craft(크래프트) | midnight(밤바다) | system, 개인 설정으로 서버 동기화)
   ============================================================ */
/* 끌기 커서 (11-253): 윈도우 Chrome/Electron 의 기본 grab·grabbing 은 저해상 비트맵이라 깨져 보이고 상황에 따라 안 바뀌기도 해서, 모든 화면이 같은 SVG 손·주먹을 쓴다.
   화면 코드는 cursor: var(--cur-grab) / var(--cur-grabbing) 만 쓴다. SVG 를 못 그리는 브라우저는 뒤의 grab / grabbing 으로 */
:root {
  --cur-grab: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23fff' stroke='%231d1d1f' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9.2 13.4V7.6a1.7 1.7 0 0 1 3.4 0v5.2V5.4a1.7 1.7 0 0 1 3.4 0v7.4V6.6a1.7 1.7 0 0 1 3.4 0v6.6V9a1.7 1.7 0 0 1 3.4 0v8.6c0 4.3-3.1 7.4-7.4 7.4h-1.2c-2.6 0-4.5-1.1-5.8-3L5 17.4a1.8 1.8 0 0 1 3-2l1.2 1.6z'/%3E%3C/g%3E%3C/svg%3E") 14 14, grab;
  --cur-grabbing: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23fff' stroke='%231d1d1f' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8.6 15.2v-2.4a1.6 1.6 0 0 1 3.2 0v-1a1.6 1.6 0 0 1 3.2 0v-.4a1.6 1.6 0 0 1 3.2 0v1a1.6 1.6 0 0 1 3.2 0v5.2c0 3.9-2.9 6.6-6.8 6.6h-1c-2.4 0-4.1-1-5.3-2.7L5.5 17.6a1.7 1.7 0 0 1 2.8-1.8z'/%3E%3Cpath d='M11.8 12.8v3M15 11.8v4M18.2 12.4v3.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 14 14, grabbing;
}
:root {
  --surface-2: #f2f2f7; --surface-3: #fafafa; --line-strong: #d1d1d6; --hover: rgba(0, 0, 0, .05);
  --glass: rgba(255, 255, 255, .92); --glass-soft: rgba(255, 255, 255, .5); --nav: rgba(255, 255, 255, .6); --input-bg: #fff; --on-accent: #fff; --shadow-c: rgba(0, 0, 0, .18); --paper: #fff;
  --read-bg: #fff; --read-text: #1d1d1f;
  --brand-text: var(--brand-2, var(--accent));   /* 모듈 색 글자 (메뉴 선택 · 강조 버튼 글자 · 링크). 어두운 테마에서는 아래에서 밝게 띄운다 */   /* 읽기 면: 메일·게시 본문 · 결재 종이. 어두운 테마에서는 흰색 대신 같은 계열의 옅은 톤 (눈이 덜 아프게) */
  --auto-text: color-mix(in srgb, #1f6fd6 60%, var(--text));   /* 자동으로 채워진 값 (본인이 고르거나 적기 전) — 경비 관리항목·지출항목. 밝은 테마는 파랑 계열, 어두운 테마는 청록 (2026-09-20) */
  color-scheme: light;
}
/* 보조 글자 · 주말 날짜 (2026-10-17 통합 테스트 대비 점검, 사용자 "폰과 같은 값으로").
   밝게의 --text-3 은 화면마다 자기 :root 에 #a1a1a6(흰 바탕 2.5:1)으로 적혀 있어 여기서 한 번에 덮는다 — 폰 m/ui.css ⑲ 와 같은 값.
   주말 날짜는 근태 · 예약 · 일정 · 날짜 고르기가 각자 고정 색(#ff6b6b 등, 2.6:1)을 써서 테마 변수로 모은다. */
html:root:not([data-theme="dark"]):not([data-theme="paper"]):not([data-theme="craft"]) { --text-3: #747479; }
:root { --day-sun: #c92a2a; --day-sat: #2a66c4; }   /* 이름에 day- 를 붙인다 — 폰 m/ui.css 의 --sat(상단 안전 영역)과 겹치면 폰 제목 줄이 상태 표시줄 밑으로 올라간다 (2026-10-18 회귀) */
html[data-theme="dark"] { --day-sun: #ff7b72; --day-sat: #6cb0ff; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e; --window: #1c1c1e; --card: #2c2c2e; --sidebar: rgba(30, 30, 32, .94);
  --surface-2: #3a3a3c; --surface-3: #242426; --line: rgba(255, 255, 255, .1); --line-strong: #48484a; --hover: rgba(255, 255, 255, .07);
  --text: #f5f5f7; --text-2: #c4c4ca; --text-3: #9a9aa0; --accent: #0a84ff; --accent-2: #409cff; --selected: #0a84ff;   /* 보조 글씨는 밝은 테마보다 한 단계 밝게 (어두운 바탕에서 작은 글씨가 가라앉지 않게) */
  --bubble-other: #47474d; --bubble-other-text: #f5f5f7; --bubble-other-line: rgba(255, 255, 255, .12); --bubble-other-shadow: 0 1px 2px rgba(0, 0, 0, .35);   /* 상대 말풍선 = 바탕보다 한 단계 밝은 면 + 얇은 밝은 테두리 (PC · 폰 같은 값, 결정 11-352 · 11-362) */
  --glass: rgba(36, 36, 38, .94); --glass-soft: rgba(255, 255, 255, .03); --nav: rgba(255, 255, 255, .035); --input-bg: #1c1c1e; --on-accent: #fff; --shadow: 0 10px 40px rgba(0, 0, 0, .6); --shadow-c: rgba(0, 0, 0, .6); --paper: #fff;
  --read-bg: #dcdde2; --read-text: #1d1d1f;
  --auto-text: color-mix(in srgb, #4fd3c4 72%, var(--text));   /* 자동으로 채워진 값 — 어두운 바탕에서는 파랑이 가라앉아 청록으로 */
}
/* 어두운 테마의 모듈 색 글자: 모듈 색은 중간 명도라 어두운 바탕에서 가라앉는다 → 흰색을 섞어 밝게 띄우고, 같은 색의 은은한 빛을 글자 뒤에 깔아 또렷하게 (색감은 유지) */
html[data-theme="dark"] { --brand-text: color-mix(in srgb, var(--brand-box, var(--brand, var(--accent))) 62%, #fff); }   /* 어두운 바탕 글자는 박스 색에서(밝은 색 조합이면 짝 색보다 박스 색이 잘 보인다, 11-229) */
html[data-theme="dark"] nav button.box.on, html[data-theme="dark"] nav .new, html[data-theme="dark"] .tag.on, html[data-theme="dark"] .seg button.on { text-shadow: 0 0 10px var(--brand-glow, var(--brand-soft, transparent)); }
/* ============================================================
   상자 안 입력칸 (.field-box, 모든 테마 — 2026-09-22 결정 11-199)
   · 검색창·AI 질문칸·대화 입력칸·메일/게시 머리 줄처럼 "바깥 상자가 입력 면을 그리는" 곳은 그 상자에 class="field-box".
   · 안쪽 input·textarea·select 는 어느 테마에서도 자기 면·테두리·둥근 모서리·포커스 링이 없다 — 테마의 일반 입력칸 규칙
     (크래프트·밤바다의 포커스 링, 어둡게·낡은 종이의 입력 면)이 겹쳐 상자 안에 타원형 테두리가 한 겹 더 생기던 것.
   · 포커스 표시는 바깥 상자(:focus-within)만 한다 (메일 검색과 같은 방식). 테마·화면 규칙보다 늘 이기도록 !important (폰 화면의 같은 규칙과 같은 방식)
   ============================================================ */
.field-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
}
/* ============================================================
   모듈 아이콘 박스 (.mbox, 모든 테마 — 2026-09-24 결정 11-223)
   · PC 런처(index.html #launcher .tile) · 홈 대시보드 칸(home.html .stat .ic)과 "같은 모양 · 같은 색" 을 다른 곳에도 — PC 모듈 화면 머리의 로고,
     폰의 모듈 칩(더보기 메뉴 · 홈 대시보드 · 알림 줄 · 첫 화면 고르기). 색은 --mb (기본: 그 화면의 모듈 색 --brand → theme.js 색 조합 --mc-<모듈>)
   · 모양은 개인 설정 '아이콘 모양'(html[data-icons]) — 심플(solid) · 바둑알(gloss) · 떠 있는 타일(float): 모듈 색 바탕 + 흰 그림, 파스텔: 옅은 바탕 + 색 그림
   · 크기 · 둥근 모서리 · 그림 크기는 각 화면의 규칙 그대로(여기서는 면 · 그림자 · 그림 색만)
   ============================================================ */
/* 짝 색(결정 11-229): 박스 색 --mb · 박스 위 그림 --mi(흰색 또는 밝은 박스의 짙은 짝 색) · 강조 --ma(파스텔 칩의 바탕 · 그림) · 테두리 --mr(흰 박스 · 먹색 박스만).
   모듈 화면 안에서는 그 화면의 --brand-box · --brand-ink · --brand-acc · --brand-ring(theme.js 색 조합 --mc/--mi/--ma/--mr-<모듈>)을, 폰 칩은 네 값을 인라인으로 준다 */
.mbox { --mb: var(--brand-box, var(--brand, var(--accent))); --mi: var(--brand-ink, #fff); --ma: var(--brand-acc, var(--mb)); --mr: var(--brand-ring, transparent); position: relative; overflow: hidden; border: 0; }
html:is([data-icons="solid"], [data-icons="gloss"], [data-icons="float"]) .mbox { color: var(--mi); outline: 1px solid var(--mr); outline-offset: -1px; }
html:is([data-icons="solid"], [data-icons="gloss"], [data-icons="float"]) .mbox svg { position: relative; z-index: 1; stroke: var(--mi); stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
html[data-icons="solid"] .mbox { background: linear-gradient(170deg, color-mix(in srgb, var(--mb) 70%, #fff) 0%, var(--mb) 52%, color-mix(in srgb, var(--mb) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16), 0 1px 1.5px rgba(0,0,0,.18), 0 4px 8px -3px color-mix(in srgb, var(--mb) 55%, transparent); }
html[data-icons="solid"][data-theme="craft"] .mbox { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 color-mix(in srgb, var(--mb) 62%, #000), 0 5px 10px -4px rgba(60,50,35,.35); }   /* 크래프트: 런처와 같은 색종이 두께 선 */
html[data-icons="gloss"] .mbox { background: linear-gradient(180deg, color-mix(in srgb, var(--mb) 62%, #fff) 0%, var(--mb) 60%, color-mix(in srgb, var(--mb) 86%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.14), 0 1px 1.5px rgba(0,0,0,.2), 0 5px 10px -4px color-mix(in srgb, var(--mb) 60%, transparent); }
html[data-icons="gloss"] .mbox::before { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 48%; border-radius: 9px 9px 50% 50% / 9px 9px 30% 30%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06)); pointer-events: none; }
html[data-icons="gloss"] .mbox svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
html[data-icons="float"] .mbox { background: linear-gradient(150deg, color-mix(in srgb, var(--mb) 82%, #fff) 0%, var(--mb) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 3px -1px color-mix(in srgb, var(--mb) 70%, #000), 0 8px 14px -6px color-mix(in srgb, var(--mb) 80%, transparent); }
html[data-icons="float"] .mbox svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }
/* 파스텔: 런처의 파스텔 타일과 같은 식 — 모듈 색 14% 의 옅은 바탕 · 같은 색 얇은 테두리 · 색 그림 (어두운 테마에서도 같은 옅은 칩). 밝은 박스 색이면 짝 색(--ma)으로 */
html[data-icons="pastel"] .mbox { background: color-mix(in srgb, var(--ma) 14%, #fff); color: var(--ma); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ma) 28%, #fff), 0 1px 2px rgba(0,0,0,.08); }
html[data-icons="pastel"] .mbox svg { position: relative; z-index: 1; stroke: var(--ma); filter: none; }
/* ============================================================
   낡은 종이 테마 (paper): 미색 종이 위에 갈색 잉크. 글꼴은 화면 전체를 책 본문 같은 부드러운 고딕(고운돋움)으로
   · 바탕은 살짝 누런 종이 + 가장자리로 갈수록 어두워지는 낡은 종이 느낌(비네트) + 아주 옅은 종이결
   · 강조색은 파랑 대신 낡은 가죽 같은 갈색. 오류·성공 색(빨강·초록)은 그대로
   ============================================================ */
html[data-theme="paper"] {
  color-scheme: light;
  --bg: #f3ecdd; --window: #f3ecdd; --card: #fbf7ee; --sidebar: rgba(247, 241, 228, .94);
  --surface-2: #efe6d3; --surface-3: #f6f0e3; --line: rgba(90, 70, 40, .13); --line-strong: #d7cbb3; --hover: rgba(90, 60, 20, .06);
  --text: #2b2318; --text-2: #6b5d4a; --text-3: #796950; --accent: #8a5a2b; --accent-2: #a56f3b; --selected: #8a5a2b; --on-accent: #fff;
  --bubble-other: #fffdf7; --bubble-other-text: #2b2318; --bubble-other-line: rgba(90, 70, 40, .16); --bubble-other-shadow: 0 1px 2px rgba(80, 50, 20, .14);   /* 바탕(#f3ecdd)보다 밝은 종이 + 갈색 테두리 — 전의 #efe6d3 은 바탕과 거의 같았다 */
  --glass: rgba(251, 247, 238, .92); --glass-soft: rgba(255, 252, 245, .5); --nav: rgba(255, 252, 245, .6); --input-bg: #fffdf8; --shadow: 0 10px 40px rgba(80, 50, 20, .22); --shadow-c: rgba(80, 50, 20, .18); --paper: #fffdf8;
  --read-bg: #fbf7ee; --read-text: #2b2318;
  --auto-text: color-mix(in srgb, #2f6a8f 60%, var(--text));   /* 자동으로 채워진 값 — 갈색 잉크와 부딪히지 않는 가라앉은 파랑 */
  --paper-font: "Gowun Dodum", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;   /* 책 본문 같은 부드러운 고딕 (Google Fonts). 굵기가 하나뿐이라 굵은 글씨는 아래에서 윤곽선으로 보강 */
}
/* 낡은 종이: 가장자리로 갈수록 갈색으로 바래는 비네트 + 종이결(노이즈) + 군데군데 옅은 얼룩. 스크롤해도 종이는 그대로(fixed) */
html[data-theme="paper"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 95% at 50% 45%, transparent 40%, rgba(120, 85, 40, .14) 72%, rgba(95, 65, 28, .34) 100%),
    radial-gradient(420px 260px at 8% 96%, rgba(120, 85, 40, .10), transparent 70%),
    radial-gradient(360px 220px at 94% 6%, rgba(120, 85, 40, .08), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38 0 0 0 0 .27 0 0 0 0 .1 0 0 0 .13 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed, fixed;
}
/* 카드·패널 가장자리도 살짝 바랜 종이처럼 (안쪽으로 옅은 갈색 그늘) */
html[data-theme="paper"] .card, html[data-theme="paper"] .box, html[data-theme="paper"] .panel { box-shadow: inset 0 0 0 1px rgba(255, 252, 245, .6), inset 0 0 26px rgba(120, 85, 40, .09), 0 1px 2px rgba(80, 50, 20, .08); }
/* 글꼴: 본문·입력칸·단추는 기본 글꼴 프리텐다드(2026-09-22 사용자 결정 — 모든 테마 본문 통일, Windows 가독성), 제목만 고운돋움. 못 불러오면 시스템 고딕 */
html[data-theme="paper"] h1, html[data-theme="paper"] h2, html[data-theme="paper"] h3, html[data-theme="paper"] .t, html[data-theme="paper"] .mh2, html[data-theme="paper"] .mh { font-family: var(--paper-font); letter-spacing: 0; }
/* 고운돋움은 굵기가 하나라 굵은 글씨를 브라우저가 흉내만 낸다 → 고운돋움으로 그리는 제목에만 얇은 윤곽선 (본문의 굵은 글씨는 프리텐다드 진짜 굵기) */
html[data-theme="paper"] :is(h1, h2, h3, .t, .mh, .mh2) { -webkit-text-stroke: .45px currentColor; }
/* 입력칸·선택 상자는 흰 종이보다 살짝 누런 미색 */
html[data-theme="paper"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="paper"] textarea, html[data-theme="paper"] select { background: var(--input-bg); color: var(--text); border-color: var(--line-strong); }
html[data-theme="paper"] ::-webkit-scrollbar-thumb { background: rgba(90, 60, 20, .22); }
/* 결재 문서 종이·메일 본문은 종이 테마에서는 같은 미색 종이 */
html[data-theme="paper"] .keep-light, html[data-theme="paper"] .paper { background: var(--read-bg); }

/* ============================================================
   크래프트 테마 (craft): 크림색 종이를 오려 붙인 공작 느낌. 밝은 계열 독립 테마 html[data-theme="craft"]
   · 팔레트: 벽 미색 #ece7dc · 카드 크림 #faf6ee · 짙은 청록 #3e6b78(구조: 선·머리글·차트·포커스) · 테라코타 #c9784a(강조: 주 버튼·링크·배지)
     모래색 #e3d8bf · 형광펜 노랑 #f3dc8c. 모듈 고유 색은 규칙대로 그대로 (theme-rules.md 3장)
   · "오려 붙인 종이": 카드·메뉴 상자·버튼 아래에 종이 두께 선(2px, 짙은 종이색) + 따뜻한 색의 퍼진 그림자. 찢은 가장자리·테이프는 2단계
   · 글꼴: 제목·메뉴·버튼은 주아(Jua, 둥근 굵은 손글씨풍), 본문은 프리텐다드(2026-09-22 사용자 결정 — 나눔고딕은 Windows 에서 작은 글자가 가늘고 거칠게 보였음; 처음엔 2026-09-19 나눔고딕). 못 불러오면 시스템 고딕
   ============================================================ */
html[data-theme="craft"] {
  color-scheme: light;
  --bg: #e9e6df; --window: #e9e6df; --card: #faf7f0; --sidebar: rgba(243, 240, 233, .96);
  --surface-2: #e6e2d8; --surface-3: #f3f0e9; --line: rgba(62, 80, 86, .13); --line-strong: #cbc5b8; --hover: rgba(62, 107, 120, .08);
  --text: #2a2622; --text-2: #5f5a52; --text-3: #746e5d; --accent: #c9784a; --accent-2: #b5683c; --selected: #c9784a; --on-accent: #fff;
  --bubble-me: #3e6b78; --bubble-me-text: #fff; --bubble-other: #faf7f0; --bubble-other-text: #2a2622; --bubble-other-line: transparent; --bubble-other-shadow: 0 2px 0 rgba(60, 50, 35, .18);   /* 내 말풍선은 청록 종이, 상대는 크림 종이(테두리 없이 종이 두께 선) */
  --glass: rgba(250, 247, 240, .93); --glass-soft: rgba(255, 252, 246, .55); --nav: #3e6b78; --input-bg: #fffdf9;   /* --nav: 모듈 왼쪽 메뉴 판은 청록 종이 (캡처의 청록 판에 붙은 크림 쪽지) */ --shadow: 0 12px 34px rgba(60, 50, 35, .22); --shadow-c: rgba(60, 50, 35, .2); --paper: #fffdf8;
  --read-bg: #faf7f0; --read-text: #2a2622;
  --auto-text: color-mix(in srgb, #2b7a78 62%, var(--text));   /* 자동으로 채워진 값 — 크래프트의 청록 계열 */
  --craft-teal: #3e6b78; --craft-teal-2: #2f5561; --craft-sand: #e3d8bf; --craft-mark: #f3dc8c; --craft-edge: #d3cdc0;   /* 종이 두께 선 색 */
  --craft-font: "Jua", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --craft-body: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;   /* 본문·보조 글자 = 기본 글꼴 프리텐다드 (가변 굵기라 굵은 글씨 보강 불필요) */
}
/* 벽: 크림 종이 + 위쪽이 살짝 밝은 조명 + 아주 옅은 종이결. 낡은 종이처럼 바래지는 않는다 (깨끗한 새 종이) */
html[data-theme="craft"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255, 253, 248, .6) 0%, transparent 40%, rgba(90, 85, 75, .06) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed;
}
/* 오려 붙인 종이: 카드·패널·메뉴 상자·버튼 아래에 종이 두께 선 + 따뜻한 그림자. 테두리 선은 거의 지운다 (종이는 선이 없다) */
html[data-theme="craft"] .card, html[data-theme="craft"] .panel, html[data-theme="craft"] .stat, html[data-theme="craft"] nav .new, html[data-theme="craft"] nav button.box, html[data-theme="craft"] .open > .box {
  border-color: transparent; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 var(--craft-edge), 0 7px 16px -6px rgba(60, 50, 35, .32);
}
html[data-theme="craft"] .card .card, html[data-theme="craft"] .card .box { box-shadow: inset 0 0 0 1px var(--line); }   /* 종이 안의 종이는 겹쳐 띄우지 않는다 */
/* 모듈 왼쪽 메뉴 = 청록 종이 판. 판 위의 작은 글자(구역 이름·©·링크)는 밝게, 쪽지(버튼)는 크림 */
html[data-theme="craft"] nav:not(#launcher) { border-right: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .12); --text: #fff; --text-2: rgba(255, 255, 255, .82); --text-3: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .18); --hover: rgba(255, 255, 255, .12); color: var(--text); }
/* 판 위에 붙은 쪽지(버튼·입력칸·카드) 안에서는 글자색 변수를 크림 종이용으로 되돌린다 */
html[data-theme="craft"] nav:not(#launcher) :is(button.box, .new, .card, input, select, textarea) { --text: #2a2622; --text-2: #5f5a52; --text-3: #746e5d; --line: rgba(62, 80, 86, .13); --hover: rgba(62, 107, 120, .08); }
html[data-theme="craft"] nav:not(#launcher) .sec { color: rgba(255, 255, 255, .85); font-size: 12px; }
/* 판 위의 선택 행(조직도 부서 트리 등, 모듈 색 옅은 면 + 모듈 색 글자)은 청록 판에서 안 보인다 → 크림 쪽지로 */
html[data-theme="craft"] nav:not(#launcher) #tree .d.on, html[data-theme="craft"] nav:not(#launcher) li.on, html[data-theme="craft"] nav:not(#launcher) .row.on { background: var(--card); --text: #2a2622; --text-2: #5f5a52; color: var(--craft-teal-2); box-shadow: 0 2px 0 var(--craft-edge); border-radius: 8px; }
html[data-theme="craft"] nav:not(#launcher) #tree .d.on .cnt { background: var(--craft-teal); color: #fff; }
html[data-theme="craft"] nav:not(#launcher) .copy, html[data-theme="craft"] nav:not(#launcher) .copy a, html[data-theme="craft"] nav:not(#launcher) .mgr, html[data-theme="craft"] nav:not(#launcher) > a, html[data-theme="craft"] nav:not(#launcher) .link, html[data-theme="craft"] nav:not(#launcher) small { color: rgba(255, 255, 255, .62); }
html[data-theme="craft"] nav:not(#launcher) button.box { background: var(--card); color: var(--text); margin-bottom: 7px; padding-top: 10px; padding-bottom: 10px; }
html[data-theme="craft"] nav:not(#launcher) button.box .cnt { background: var(--craft-sand); color: var(--craft-teal-2); }
/* 관리자 페이지 메뉴(nav button, .box 없음)는 청록 판 위 밝은 글자, 선택은 크림 쪽지 */
html[data-theme="craft"] nav:not(#launcher) > button:not(.box):not(.new), html[data-theme="craft"] nav:not(#launcher) > div > button:not(.box):not(.new) { color: rgba(255, 255, 255, .85); }
html[data-theme="craft"] nav:not(#launcher) > button:not(.box):not(.new):hover { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-theme="craft"] nav:not(#launcher) > button:not(.box):not(.new).on { background: var(--card); color: var(--craft-teal-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 var(--craft-edge), 0 8px 16px -6px rgba(0, 20, 30, .45); border-radius: 8px; }
html[data-theme="craft"] nav:not(#launcher) button.box:hover { background: #fffdf8; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--craft-edge), 0 10px 20px -6px rgba(60, 50, 35, .36); }
/* 선택된 메뉴: 캡처의 주황 슬랩처럼 테라코타 색 종이 한 장을 위에 붙인 모양. ★ 이 테마만의 예외: 모듈 색 대신 테마 강조색(--accent)을 쓴다 —
   청록 판 위에 모듈 색(보라·빨강…) 슬랩이 올라가면 색이 부딪혀서. 사용자 결정 2026-09-19 (decisions.md 8장 · theme-rules.md 3장) */
html[data-theme="craft"] nav:not(#launcher) button.box, html[data-theme="craft"] nav:not(#launcher) .new { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 var(--craft-edge), 0 8px 16px -6px rgba(0, 20, 30, .45); }
html[data-theme="craft"] nav:not(#launcher) button.box.on { background: var(--accent); color: var(--on-accent); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 var(--accent-2), 0 8px 18px -6px rgba(0, 20, 30, .5); }
html[data-theme="craft"] nav:not(#launcher) button.box.on:hover { transform: none; }
html[data-theme="craft"] nav:not(#launcher) button.box.on .cnt { background: rgba(255, 255, 255, .28); color: #fff; }
html[data-theme="craft"] nav:not(#launcher) button.box.on .cnt.hot { background: var(--danger, #ff3b30); }
html[data-theme="craft"] nav:not(#launcher) .new { background: var(--card); color: var(--brand-text); }
html[data-theme="craft"] nav:not(#launcher) .new:hover { background: #fffdf8; }
html[data-theme="craft"] .stat { border-radius: 8px; }
/* 일반 버튼·입력칸도 살짝 두께가 있는 종이 조각 */
html[data-theme="craft"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="craft"] textarea, html[data-theme="craft"] select { background: var(--input-bg); color: var(--text); border-color: var(--line-strong); border-radius: 8px; }
html[data-theme="craft"] input:focus, html[data-theme="craft"] textarea:focus, html[data-theme="craft"] select:focus { border-color: var(--craft-teal); box-shadow: 0 0 0 3px rgba(62, 107, 120, .16); }
html[data-theme="craft"] .seg { border-radius: 8px; }
html[data-theme="craft"] .seg button.on { box-shadow: 0 1px 0 var(--craft-edge); }
html[data-theme="craft"] ::selection { background: var(--craft-mark); color: var(--text); }
html[data-theme="craft"] mark { background: var(--craft-mark); color: var(--text); border-radius: 3px; padding: 0 .15em; }
html[data-theme="craft"] ::-webkit-scrollbar-thumb { background: rgba(62, 107, 120, .3); }
/* 청록은 구조에: 표 머리글·구역 제목·작은 라벨 */
html[data-theme="craft"] th, html[data-theme="craft"] .mh, html[data-theme="craft"] .mh2, html[data-theme="craft"] nav .sec, html[data-theme="craft"] .lbl > b { color: var(--craft-teal-2); }
html[data-theme="craft"] th { background: color-mix(in srgb, var(--craft-teal) 8%, var(--card)); border-bottom-color: color-mix(in srgb, var(--craft-teal) 30%, transparent); }
/* 글꼴: 본문은 프리텐다드, 제목·메뉴·버튼은 주아 */
html[data-theme="craft"] body, html[data-theme="craft"] input, html[data-theme="craft"] select, html[data-theme="craft"] textarea { font-family: var(--craft-body); }
html[data-theme="craft"] button { font-family: var(--craft-body); }
html[data-theme="craft"] :is(h1, h2, h3, h4, .t, .mh, .mh2, .tbar h1, .hd > span, nav button.box, nav .new, .seg button, .tab, #launcher .tile + span:not(.lbl), .stat b) { font-family: var(--craft-font); font-weight: normal; letter-spacing: .01em; }
html[data-theme="craft"] :is(h1, h2, h3) { color: var(--text); }
/* 읽기 면: 메일·게시 본문과 결재 종이는 카드 크림 (순백 아님) */
html[data-theme="craft"] .keep-light, html[data-theme="craft"] .paper { background: var(--read-bg); }
/* 런처 타일(오른쪽 세로 막대): 유리 광택 대신 종이 두께 */
/* 홈 화면: 캡처의 파이 차트처럼 청록·테라코타·모래색 종이를 과감하게. 통계 타일은 청록·테라코타·모래 색 종이 3장 반복 (테두리만 있는 크림 타일은 이질적이라 뺐다, 2026-09-19), 카드 제목은 청록 + 테라코타 밑줄, AI 카드는 청록 판 */
html[data-theme="craft"] .hello h1 { background: linear-gradient(transparent 62%, var(--craft-mark) 62%, var(--craft-mark) 92%, transparent 92%); display: inline-block; padding: 0 4px; }   /* 형광펜 */
html[data-theme="craft"] .stat { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 rgba(0, 0, 0, .18), 0 7px 16px -6px rgba(60, 50, 35, .35); }
html[data-theme="craft"] .stat .ic { background: rgba(255, 255, 255, .22); color: #fff; }
html[data-theme="craft"] .stat small { color: rgba(255, 255, 255, .82); }
html[data-theme="craft"] .stat b, html[data-theme="craft"] .stat b:hover { color: #fff; }
html[data-theme="craft"] .stat:nth-child(3n+1) { background: var(--craft-teal); color: #fff; }
html[data-theme="craft"] .stat:nth-child(3n+2) { background: var(--accent); color: #fff; }
html[data-theme="craft"] .stat:nth-child(3n+3) { background: var(--craft-sand); color: var(--text); }
html[data-theme="craft"] .stat:nth-child(3n+3) .ic { background: rgba(255, 255, 255, .6); color: var(--craft-teal-2); } html[data-theme="craft"] .stat:nth-child(3n+3) small { color: var(--text-2); } html[data-theme="craft"] .stat:nth-child(3n+3) b, html[data-theme="craft"] .stat:nth-child(3n+3) b:hover { color: var(--craft-teal-2); }
html[data-theme="craft"] .stat:hover { transform: translateY(-2px); }
html[data-theme="craft"] .card > h2 { color: var(--craft-teal-2); font-weight: normal; font-size: 18px; padding-bottom: 8px; position: relative; }
html[data-theme="craft"] .card > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background: var(--accent); }   /* 테라코타 밑줄 */
html[data-theme="craft"] .card > h2 .more { color: var(--accent); font-family: var(--craft-body); font-weight: bold; }
html[data-theme="craft"] .card .row:hover { background: color-mix(in srgb, var(--craft-sand) 55%, var(--card)); }
html[data-theme="craft"] .row .av.ntc { background: var(--craft-sand); color: var(--craft-teal-2); } html[data-theme="craft"] .row .av.ntc.imp { background: var(--accent); color: #fff; }
html[data-theme="craft"] .badge { background: var(--accent); }
html[data-theme="craft"] .row.unread .tx b::before { background: var(--accent); }
/* 조직도: 왼쪽 판의 검색·트리는 크림 쪽지 한 장에 담는다 (다른 모듈의 슬랩 메뉴와 같은 인상) */
html[data-theme="craft"] nav:not(#launcher) #tree { background: var(--card); --text: #2a2622; --text-2: #5f5a52; --text-3: #746e5d; --line: rgba(62, 80, 86, .13); --hover: rgba(62, 107, 120, .08); color: var(--text); border-radius: 8px; padding: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 var(--craft-edge), 0 8px 16px -6px rgba(0, 20, 30, .45); }
html[data-theme="craft"] nav:not(#launcher) #tree .d.on { background: var(--accent); color: #fff; box-shadow: none; } html[data-theme="craft"] nav:not(#launcher) #tree .d.on .cnt { background: rgba(255, 255, 255, .28); color: #fff; }
html[data-theme="craft"] nav:not(#launcher) #tree .d .cnt { background: var(--craft-sand); color: var(--craft-teal-2); }
/* 메신저: 말풍선도 오려 붙인 종이 (아래 두께 선), 대화방 목록 선택은 테라코타 쪽지 */
html[data-theme="craft"] .bubble { box-shadow: 0 2px 0 rgba(60, 50, 35, .18); border-radius: 10px; }
html[data-theme="craft"] li.me .bubble { box-shadow: 0 2px 0 var(--craft-teal-2); }
html[data-theme="craft"] #rooms li { border-radius: 8px; }
html[data-theme="craft"] #rooms li.active { box-shadow: 0 2px 0 var(--accent-2); }
html[data-theme="craft"] #launcher .tile::before, html[data-theme="craft"] #launcher .tile::after { display: none; }
html[data-theme="craft"] #launcher .tile { box-shadow: 0 2px 0 var(--craft-edge), 0 5px 10px -4px rgba(60, 50, 35, .35); border-radius: 9px; }

/* 크래프트 2차: 명시적으로 고른 홈/로그인 종이만. 내용·포커스·드래그에는 clip/filter를 걸지 않는다.
   skin 하나가 그림자를, 그 안의 가상 요소가 종이 윤곽을 담당한다. 다른 테마에서는 완전히 숨김. */
.craft-paper-skin { display: none; }
html[data-theme="craft"] {
  --craft-cut: polygon(0 1px, 16% 0, 34% 1px, 53% 0, 75% 2px, 100% 0, calc(100% - 1px) 38%, 100% 71%, calc(100% - 1px) calc(100% - 2px), 89% calc(100% - 1px), 78% calc(100% - 3px), 66% 100%, 54% calc(100% - 2px), 42% 100%, 30% calc(100% - 2px), 17% 100%, 1px calc(100% - 1px), 0 63%, 1px 28%);
  --craft-cut-torn: polygon(1px 0, 23% 1px, 42% 0, 68% 2px, 100% 0, calc(100% - 1px) 48%, 100% calc(100% - 3px), 95% calc(100% - 2px), 91% calc(100% - 4px), 86% 100%, 81% calc(100% - 2px), 75% calc(100% - 4px), 70% calc(100% - 1px), 64% calc(100% - 3px), 57% 100%, 52% calc(100% - 2px), 47% calc(100% - 4px), 41% calc(100% - 1px), 35% calc(100% - 3px), 29% 100%, 22% calc(100% - 2px), 15% calc(100% - 4px), 8% calc(100% - 1px), 0 calc(100% - 3px), 1px 60%, 0 22%);
}
html[data-theme="craft"] :is(#wrap, #login, .screen) .craft-sheet {
  position: relative; isolation: isolate; overflow: visible; background: transparent;
  border-color: transparent; border-radius: 2px; box-shadow: none;
  --craft-stock: var(--card); --craft-outline: var(--craft-cut);
}
html[data-theme="craft"] .craft-sheet > .craft-paper-skin {
  display: block; position: absolute; inset: 0 0 -2px; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 2px 0 #b5aa9366) drop-shadow(1px 6px 4px #3c322329);
}
html[data-theme="craft"] .craft-paper-skin::before {
  content: ""; position: absolute; inset: 0; clip-path: var(--craft-outline);
  background: repeating-linear-gradient(94deg, #473d2903 0 .6px, transparent .6px 4px), linear-gradient(175deg, #ffffff14, transparent 40%, #51453609), var(--craft-stock);
}
html[data-theme="craft"] :is(#wrap, #login, .screen) .craft-tape { --craft-outline: var(--craft-cut-torn); }
html[data-theme="craft"] .craft-tape > .craft-paper-skin::after {
  content: ""; position: absolute; top: -9px; left: calc(50% - 32px); width: 64px; height: 20px;
  transform: rotate(-4deg); background: linear-gradient(100deg, #e8d9bdb8, #ebdfc8e8 55%, #ddcbaac9);
  clip-path: polygon(2% 0, 98% 2%, 96% 20%, 100% 39%, 97% 60%, 100% 80%, 98% 100%, 0 97%, 3% 78%, 0 55%, 3% 31%);
}
html[data-theme="craft"] #wrap .stat:nth-child(3n+1) { --craft-stock: var(--craft-teal); }
html[data-theme="craft"] #wrap .stat:nth-child(3n+2) { --craft-stock: var(--accent); }
html[data-theme="craft"] #wrap .stat:nth-child(3n+3) { --craft-stock: var(--craft-sand); }
html[data-theme="craft"] #wrap .card[data-card="notice"] > .craft-paper-skin::after { transform: rotate(3deg); }
/* 긴 제목이 열기 버튼을 밀어내지 않도록 카드 안에서만 줄을 바꾼다. */
html[data-theme="craft"] #wrap .card > h2 { flex-wrap: wrap; }
html[data-theme="craft"] #wrap .card > h2 .more { white-space: nowrap; }
/* 메뉴는 배경 span의 윤곽에만 얇은 두께/부드러운 그림자를 만든다.
   버튼 본체를 필터/clip으로 감싸지 않아 문자·포커스·배지·클릭 영역을 보존한다. */
.craft-menu-skin, .craft-nav-edge { display: none; }
html[data-theme="craft"] nav:not(#launcher) { background-image: none; box-shadow: none; }
/* 메뉴판과 맞닿은 한 장의 청록 종이 끝. 스크롤/본문 폭은 그대로 두고 내용 위 클릭은 통과한다.
   회색 테두리나 반복 배경 없이 잘린 면의 윤곽에만 그림자를 붙여 이중선을 피한다. */
html[data-theme="craft"] .craft-nav-edge {
  display: block; position: relative; flex: 0 0 0; width: 0; min-width: 0; align-self: stretch;
  z-index: 1; pointer-events: none; filter: drop-shadow(2px 0 2px rgba(24, 45, 48, .22));
}
html[data-theme="craft"] .craft-nav-edge::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 6px;
  background: var(--craft-teal);
  clip-path: polygon(0 0, 75% 0, 95% 3%, 65% 7%, 80% 10%, 45% 14%, 60% 18%, 100% 23%, 75% 27%, 85% 32%, 50% 37%, 70% 41%, 95% 46%, 60% 50%, 80% 54%, 45% 59%, 70% 63%, 100% 68%, 65% 73%, 85% 77%, 55% 82%, 75% 87%, 100% 91%, 60% 96%, 80% 100%, 0 100%);
}
html[data-theme="craft"].bare .craft-nav-edge { display: none; }
html[data-theme="craft"] nav:not(#launcher) :is(button.box, button.new) {
  position: relative; isolation: isolate; border-radius: 2px; background: transparent;
  border-color: transparent; --craft-menu-stock: var(--card);
  --craft-menu-cut: polygon(.5px 1px, 14% 0, 32% .5px, 53% 0, 77% 1px, calc(100% - 1px) 0, 100% 27%, calc(100% - .5px) 64%, 100% calc(100% - 1px), 86% 100%, 68% calc(100% - .5px), 47% 100%, 29% calc(100% - 1px), 13% 100%, .5px calc(100% - .5px), 0 72%, .5px 36%);
}
html[data-theme="craft"] nav:not(#launcher) button.box:nth-of-type(3n+2) {
  --craft-menu-cut: polygon(0 .5px, 21% 1px, 38% 0, 62% .5px, 81% 0, calc(100% - .5px) 1px, 100% 41%, calc(100% - 1px) 76%, 100% 100%, 79% calc(100% - 1px), 59% 100%, 36% calc(100% - .5px), 17% 100%, 0 calc(100% - 1px), .5px 65%, 0 23%);
}
html[data-theme="craft"] nav:not(#launcher) button.box:nth-of-type(3n) {
  --craft-menu-cut: polygon(1px 0, 18% .5px, 43% 0, 66% 1px, 88% .5px, 100% 0, calc(100% - .5px) 31%, 100% 68%, calc(100% - 1px) calc(100% - .5px), 91% 100%, 73% calc(100% - 1px), 51% calc(100% - .5px), 31% 100%, 12% calc(100% - .5px), 0 100%, .5px 56%, 0 18%);
}
html[data-theme="craft"] nav:not(#launcher) :is(button.box, button.new),
html[data-theme="craft"] nav:not(#launcher) :is(button.box, button.new):hover,
html[data-theme="craft"] nav:not(#launcher) button.box.on { box-shadow: none; filter: none; }
html[data-theme="craft"] nav:not(#launcher) button.box::before,
html[data-theme="craft"] nav:not(#launcher) button.box::after { display: none; }
html[data-theme="craft"] nav:not(#launcher) .craft-menu-skin {
  display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(30, 44, 43, .24)) drop-shadow(0 4px 3px rgba(12, 34, 40, .25));
}
html[data-theme="craft"] .craft-menu-skin::before {
  content: ""; position: absolute; inset: 0; clip-path: var(--craft-menu-cut);
  background: linear-gradient(172deg, #ffffff20, transparent 45%, #493c2906), var(--craft-menu-stock);
}
html[data-theme="craft"] nav:not(#launcher) :is(button.box, button.new):hover { background: transparent; --craft-menu-stock: #fffdf8; }
html[data-theme="craft"] nav:not(#launcher) button.box.on { background: transparent; --craft-menu-stock: var(--accent); }
/* 검색 상자(메일·게시·설문·메신저 대화방/대화 상대·조직도): 바깥 상자만 입력 면으로 칠하고 내부 input은 높이를 채운다.
   일반 입력의 크래프트 배경·포커스 규칙을 중첩하면 안쪽에 가느다란 흰 띠가 생긴다 (안쪽 면·링은 공통 .field-box 가 지운다). */
html[data-theme="craft"] .craft-search {
  background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: 8px;
  box-sizing: border-box; cursor: text;
}
html[data-theme="craft"] :is(#search, #orgSearch).craft-search { background: var(--input-bg); }   /* 메신저 검색은 화면 규칙이 id 라 면을 한 번 더 */
html[data-theme="craft"] .craft-search > input {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  height: 100%; min-width: 0; padding: 0; color: var(--text);
}
html[data-theme="craft"] .craft-search > svg { flex-shrink: 0; }
/* 청록 판(메뉴) 위의 검색 상자(조직도): 상자 안은 크림 쪽지 글자색(아이콘이 흰색으로 사라지지 않게), 포커스는 흰 빛 — 청록 선·링은 판과 같은 색이라 안 보인다 */
html[data-theme="craft"] nav:not(#launcher) .craft-search { --text: #2a2622; --text-2: #5f5a52; --text-3: #746e5d; }
html[data-theme="craft"] nav:not(#launcher) .craft-search:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
html[data-theme="craft"] .craft-search:focus-within {
  border-color: var(--craft-teal); box-shadow: 0 0 0 3px rgba(62, 107, 120, .16);
}
/* 개인설정은 자체 회색 nav 배경이 공통 흰 글자와 충돌했다. 청록 판 + 크림 선택 면으로 통일.
   설정 본문도 불투명 종이로 두어 뒤쪽 대화/홈 글자가 비치지 않게 한다. */
html[data-theme="craft"] #prefModal nav { background: var(--craft-teal); border-right: 0; }
html[data-theme="craft"] #prefModal > .box { background: var(--card); }
@media print {
  .craft-paper-skin, .craft-menu-skin, .craft-nav-edge { display: none !important; }
  html[data-theme="craft"] :is(#wrap, #login, .screen) .craft-sheet { background: var(--craft-stock); box-shadow: none; }
  html[data-theme="craft"] nav:not(#launcher) { background-image: none; }
  html[data-theme="craft"] nav:not(#launcher) :is(button.box, button.new) { background: var(--craft-menu-stock); }
  html[data-theme="craft"] nav:not(#launcher) button.box::before,
  html[data-theme="craft"] nav:not(#launcher) button.box::after { display: none; }
}

/* ============================================================
   밤바다 테마 (midnight): 어둡게의 한 갈래. html[data-theme="dark"][data-skin="midnight"]
   · 어둡게의 규칙(입력칸·스크롤바·흰 종이 예외·화면별 어둡게 보정)을 그대로 물려받고 색만 남색 바탕 + 청록 강조로 바꾼다
   · 글꼴: 제목은 IBM Plex Sans KR (또렷한 기하학 고딕), 본문은 기본 글꼴 프리텐다드(2026-09-22) — 못 불러오면 시스템 고딕
   ============================================================ */
html[data-theme="dark"][data-skin="midnight"] {
  --bg: #0c1220; --window: #0c1220; --card: #121a2b; --sidebar: rgba(14, 20, 36, .94);
  --surface-2: #1a2338; --surface-3: #0f1626; --line: rgba(160, 190, 255, .10); --line-strong: #2a3650; --hover: rgba(160, 190, 255, .07);
  --text: #e8edf7; --text-2: #bcc6d8; --text-3: #8f9bb0; --accent: #22b8a8; --accent-2: #3ccfbf; --selected: #22b8a8; --on-accent: #06201c;
  --bubble-other: #273858; --bubble-other-text: #e8edf7; --bubble-other-line: rgba(160, 190, 255, .22); --bubble-other-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --glass: rgba(18, 26, 43, .94); --glass-soft: rgba(160, 190, 255, .04); --nav: rgba(160, 190, 255, .04); --input-bg: #0f1626; --shadow: 0 10px 40px rgba(0, 0, 0, .6); --shadow-c: rgba(0, 0, 0, .6); --paper: #fff;
  --read-bg: #d9e0ea; --read-text: #141c2b;
  --auto-text: color-mix(in srgb, #56e0cf 72%, var(--text));   /* 자동으로 채워진 값 — 밤바다의 청록 */
  --night-font: "IBM Plex Sans KR", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
/* 바다 밑처럼 아래로 갈수록 조금 더 깊은 남색, 위쪽에 은은한 청록 빛 */
html[data-theme="dark"][data-skin="midnight"] body {
  background-color: var(--bg);
  background-image: radial-gradient(900px 500px at 50% -10%, rgba(34, 184, 168, .10), transparent 60%), linear-gradient(180deg, #0e1526 0%, #0c1220 40%, #080d18 100%);
  background-attachment: fixed, fixed;
}
/* 표정: 바다 속 빛무리가 아주 천천히 흐르고(40초), 카드는 반투명 유리, 고른 항목은 청록 빛 테두리, 모서리는 더 둥글게.
   어둡게(무채색·평평함)는 시스템 다크 모드용으로 그대로 두고, 밤바다만 꾸민다 */
html[data-theme="dark"][data-skin="midnight"] body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 460px at 18% 22%, rgba(34, 184, 168, .30), transparent 62%),
    radial-gradient(760px 560px at 82% 78%, rgba(60, 110, 220, .30), transparent 62%),
    radial-gradient(460px 340px at 70% 12%, rgba(120, 90, 220, .18), transparent 60%);
  animation: midnight-drift 14s ease-in-out infinite alternate;
}
@keyframes midnight-drift { from { transform: translate(-6%, 4%) scale(1); opacity: .7; } to { transform: translate(8%, -7%) scale(1.18); opacity: 1; } }   /* 14초에 걸쳐 한쪽으로 흘렀다가 돌아오며 밝기도 숨 쉬듯 (macOS 접근성의 "동작 줄이기"가 켜져 있으면 멈춤) */
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"][data-skin="midnight"] body::before { animation: none; } }
/* (.box 는 숨겨진 창의 상자에도 쓰여서, 보이는 것 — 버튼 · 열린 창(.open) 안 — 만 유리로. 숨긴 상자에 backdrop-filter 가 걸리면 흐릿한 네모가 비친다) */
html[data-theme="dark"][data-skin="midnight"] .card, html[data-theme="dark"][data-skin="midnight"] button.box, html[data-theme="dark"][data-skin="midnight"] .open > .box {
  background: rgba(18, 26, 43, .62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(160, 190, 255, .14); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"][data-skin="midnight"] .card .card, html[data-theme="dark"][data-skin="midnight"] .card .box { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(160, 190, 255, .05); box-shadow: none; }   /* 유리 안의 유리는 겹치지 않게 */
html[data-theme="dark"][data-skin="midnight"] button.box.on, html[data-theme="dark"][data-skin="midnight"] .seg button.on {
  box-shadow: 0 0 0 1px rgba(34, 184, 168, .75), 0 0 18px rgba(34, 184, 168, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"][data-skin="midnight"] #rooms li { border-radius: 12px; }
html[data-theme="dark"][data-skin="midnight"] #main { background: transparent; }   /* 메신저 본문 창이 빛무리를 가리지 않게 */
html[data-theme="dark"][data-skin="midnight"] #sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(16, 23, 40, .985), rgba(12, 18, 32, .985)); }   /* 사이드바의 배경 흐림이 뒤에 숨은 요소를 희미하게 비추던 것 */
html[data-theme="dark"][data-skin="midnight"] #rooms li.active { background: rgba(34, 184, 168, .16); color: var(--text); box-shadow: inset 0 0 0 1px rgba(34, 184, 168, .6), 0 0 18px rgba(34, 184, 168, .22); }
html[data-theme="dark"][data-skin="midnight"] #rooms li.active .last, html[data-theme="dark"][data-skin="midnight"] #rooms li.active .name small, html[data-theme="dark"][data-skin="midnight"] #rooms li.active .time { color: var(--text-2); }
html[data-theme="dark"][data-skin="midnight"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"][data-skin="midnight"] textarea, html[data-theme="dark"][data-skin="midnight"] select { background: rgba(15, 22, 38, .7); }
html[data-theme="dark"][data-skin="midnight"] input:focus, html[data-theme="dark"][data-skin="midnight"] textarea:focus { box-shadow: 0 0 0 3px rgba(34, 184, 168, .22); border-color: var(--accent); }
html[data-theme="dark"][data-skin="midnight"] :is(h1, h2, h3, .t, .mh, .mh2) { font-family: var(--night-font); }   /* 제목만 IBM Plex, 본문은 프리텐다드 (2026-09-22) */
html[data-theme="dark"][data-skin="midnight"] ::-webkit-scrollbar-thumb { background: rgba(160, 190, 255, .2); }

/* 어두운 바탕의 밝은 글자는 맥에서 번져(굵고 흐리게) 보이므로 안티앨리어싱을 얇은 쪽으로 고정한다 */
html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* 레티나가 아닌 외부 모니터에서는 맥이 글자를 흑백으로만 다듬어, 어두운 바탕 위 가는 밝은 글씨의 획이 끊겨 얼룩덜룩해 보인다
   → 획에 같은 색의 아주 얇은 테두리를 덧입혀 획을 고르게 채운다 (레티나에서는 거의 티가 나지 않는다) */
html[data-theme="dark"] body { -webkit-text-stroke: .2px currentColor; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] button { -webkit-text-stroke: .2px currentColor; }
/* 어둡게에서 입력칸·선택 상자는 어두운 배경에 밝은 글자 (화면마다 따로 정하지 않은 것들) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--input-bg); color: var(--text); border-color: var(--line-strong); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-3); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
/* 어둡게에서도 밝은 종이로 남겨야 하는 곳 (결재 문서 종이 · 인쇄 미리보기): 순백 대신 --read-bg 의 옅은 회색 톤 (눈부심 줄임). 인쇄는 밝게로 바뀌므로 종이는 흰색 */
html[data-theme="dark"] .keep-light, html[data-theme="dark"] .paper {
  --bg: #d4d5da; --card: var(--read-bg); --surface-2: #d0d1d6; --surface-3: #e2e3e7; --line: rgba(0, 0, 0, .12); --line-strong: #b9bac0; --hover: rgba(0, 0, 0, .05);
  --text: var(--read-text); --text-2: #55555a; --text-3: #85858a; --glass: rgba(230, 231, 235, .92); --input-bg: #e8e9ed; --shadow-c: rgba(0, 0, 0, .18); color-scheme: light; color: var(--text);
}
html[data-theme="dark"][data-skin="midnight"] .keep-light, html[data-theme="dark"][data-skin="midnight"] .paper { --bg: #cfd7e3; --surface-2: #cdd5e1; --surface-3: #e1e7ef; --line: rgba(20, 40, 80, .14); --line-strong: #aeb9c9; --input-bg: #e4eaf2; --text-2: #4a5568; --text-3: #7b8799; }
html[data-theme="dark"] .keep-light input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .keep-light textarea, html[data-theme="dark"] .keep-light select, html[data-theme="dark"] .paper input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .paper textarea, html[data-theme="dark"] .paper select { background: #fff; color: #1d1d1f; border-color: #d1d1d6; }
/* 밤바다: 위의 밤바다 입력칸 규칙(속성 선택자가 하나 더라 우선순위가 높다)이 종이 위 입력칸까지 어둡게 칠하지 않게, 종이 안은 다시 밝은 칸으로 */
html[data-theme="dark"][data-skin="midnight"] .keep-light input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-skin="midnight"] .keep-light textarea, html[data-theme="dark"][data-skin="midnight"] .keep-light select,
html[data-theme="dark"][data-skin="midnight"] .paper input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-skin="midnight"] .paper textarea, html[data-theme="dark"][data-skin="midnight"] .paper select { background: #fff; color: #1d1d1f; border-color: #cfd6e2; }
/* 인쇄는 항상 밝게 (theme.js 가 인쇄 직전에 밝게로 바꾼다) */
@media print { html[data-theme="dark"] { color-scheme: light; } }


/* 메뉴 숫자 배지: 태그(i/b/span)나 메뉴 선택 여부에 따라 글자가 달라지지 않게 한다.
   알림 건수만 대상으로 하며 양식 디자이너의 치수 badge·조직도 인원 cnt는 제외한다. */
:root { --count-font: var(--font, sans-serif); }
/* 건수 숫자는 모든 테마에서 본문 글꼴(프리텐다드) — 2026-09-22 테마 본문 통일 */
html body :is(nav button.box .cnt, #launcher .badge, #rooms .badge, #adminSeg .cnt, #nline .nl-n),   /* #nline .nl-n: 알림 한 줄이 좁을 때의 종 숫자 (11-400) */
html[data-mobile] :is(.badge, .row .cnt, .ab-tabs button .n, .ex-chips .tchip b) {
  font-family: var(--count-font); font-size: 11px; font-style: normal; font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
  -webkit-text-stroke: 0; text-shadow: none;
}
/* PC 메뉴 옆 건수의 틀도 통일. display는 각 화면의 0건 숨김/show 규칙을 유지한다. */
html nav button.box .cnt {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  line-height: 20px; text-align: center; flex: 0 0 auto;
}
/* 선택 색이 처리할 건수의 강조색을 덮지 않도록 한다. 크래프트의 전용 배색은 별도 규칙 유지. */
html nav button.box.on .cnt.hot { background: var(--danger); color: #fff; }
/* PC 숫자 배지 5% 축소 (2026-10-12 사용자 "PC 버전 미처리 건수 숫자 배지만 5% 정도 줄여줘", 결정 11-433).
   zoom 하나로 글자 · 높이 · 최소 너비 · 안쪽 여백 · 둥글기 · 위치 간격을 함께 0.95 배 — 0건 숨김 · 색 규칙은 각 화면 그대로.
   대상 = 처리 · 확인할 건수 배지만: 모듈 왼쪽 메뉴 건수 · 런처 · 대화 목록(메신저 · 홈 최근 대화) · 예약 관리 '처리 대기' ·
   알림 한 줄(좁은 폭 종 숫자) · Cowork 새 소식 탭. 조직도 · 일정 고르기 인원 수, 메일 스레드 수, 양식 치수 배지는 건수 배지가 아니라 제외.
   폰(/m/)은 ui.css 의 자기 배지라 영향 없음. getComputedStyle 은 zoom 전 값(11px · 20px)을 돌려주고 그려지는 크기만 줄어든다. */
:root { --count-zoom: .95; }
html:not([data-mobile]) body :is(nav button.box .cnt, #launcher .badge, #rooms .badge, #adminSeg .cnt, #nline .nl-n, .cw-news-tabs .cw-btn i.cnt) { zoom: var(--count-zoom); }

/* 설문은 일반 새 글과 구분되는 시스템 게시판. 정렬은 각 목록 렌더러에서 마지막으로 고정. */
:root{--survey-nav-text:color-mix(in srgb,#087f82 70%,var(--text));}
html[data-theme="dark"]{--survey-nav-text:color-mix(in srgb,#53c9c5 80%,var(--text));}
html[data-theme="paper"],html[data-theme="craft"]{--survey-nav-text:color-mix(in srgb,#39766a 75%,var(--text));}
nav #boardList button.box[data-board="survey"],.ab-tabs button[data-key="survey"]{color:var(--survey-nav-text);}
nav #boardList button.box[data-board="survey"].on,.ab-tabs button[data-key="survey"].on{background:color-mix(in srgb,var(--survey-nav-text) 12%,var(--card));color:var(--survey-nav-text);}
/* 크래프트는 사각 배경을 덧칠하지 않고 기존 종이 쪽지의 색만 바꾼다. */
html[data-theme="craft"] nav:not(#launcher) #boardList button.box[data-board="survey"]{background:transparent;color:var(--survey-nav-text);}
html[data-theme="craft"] nav:not(#launcher) #boardList button.box[data-board="survey"].on{--craft-menu-stock:color-mix(in srgb,var(--survey-nav-text) 12%,var(--card));}

/* ---- @언급 (mention.js, 결정 11-274): 자동완성 목록과 본문 강조 — PC · 폰 공용 ---- */
.mention-pop{position:absolute;z-index:1200;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.10);padding:2px 0;max-height:220px;overflow:auto}
.mention-pop button{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;border:0;background:none;color:var(--text);padding:4px 10px;border-radius:0;font:inherit;font-size:13px;line-height:1.35;cursor:pointer}
.mention-pop button b{font-weight:600}
.mention-pop button small{color:var(--text-3);font-size:11.5px}
.mention-pop button.on{background:var(--accent,var(--brand,#25877e));color:#fff}   /* 고른 줄 — 진한 바탕에 흰 글씨로 분명하게 */
.mention-pop button.on small{color:rgba(255,255,255,.82)}
.mention-pop button:not(.on):hover{background:var(--hover,rgba(0,0,0,.05))}
.mention-pop.mobile button{padding:9px 12px;font-size:15px}
b.mention{font-weight:600;color:var(--brand-text,var(--accent))}
::highlight(ground-mention){color:var(--brand-text,var(--accent,#25877e));background-color:color-mix(in srgb,var(--accent,#25877e) 12%,transparent)}   /* 편집 중인 본문의 @이름 */
.mention-tags{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12.5px;margin:6px 0 2px;padding:0 4px}
.mention-tags:empty{display:none}
.mention-tags .lbl{color:var(--text-3)}
.mention-tags b.mention{background:color-mix(in srgb,var(--accent,#25877e) 12%,transparent);padding:1px 7px;border-radius:9px;font-weight:600}

/* ---- 첨부 파일 미리보기 (filepreview.js, 결정 11-276): 오른쪽 칸 · 크게 보기 공용 ---- */
.fpv-busy,.fpv-empty{padding:28px 12px;text-align:center;color:var(--text-3);font-size:13px;line-height:1.6}
.fpv-note{font-size:11.5px;color:var(--text-3);padding:6px 4px 2px;text-align:center}
.fpv-pages{display:flex;flex-direction:column;gap:10px;align-items:center}
.fpv-pager{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.fpv-pager button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px;line-height:1;cursor:pointer}.fpv-pager button:disabled{opacity:.35;cursor:default}
.fpv-pageWrap{position:relative;max-width:100%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);border-radius:3px;overflow:hidden}
.fpv-page{display:block;width:100%;height:100%}
.fpv-scroll{overflow:auto;max-width:100%}
.fpv-table{border-collapse:collapse;font-size:12px;background:var(--card);color:var(--text)}
.fpv-table th,.fpv-table td{border:1px solid var(--line);padding:3px 8px;white-space:pre-wrap;vertical-align:top;max-width:320px;text-align:left}
.fpv-table th{background:var(--surface-2);position:sticky;top:0;font-weight:600}
.fpv-sheets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.fpv-sheets button{padding:3px 10px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--text-2);font-size:12px;cursor:pointer}
.fpv-sheets button.on{background:var(--accent,var(--brand));color:#fff;border-color:transparent}
.fpv-doc{background:var(--card);color:var(--text);padding:16px 20px;border-radius:8px;font-size:13px;line-height:1.7;text-align:left;width:100%;box-sizing:border-box}
.fpv-doc h3{font-size:15px;margin:12px 0 6px}.fpv-doc p{margin:0 0 6px}.fpv-doc .fpv-table{margin:6px 0 10px;min-width:0}
.fpv-slides{display:flex;flex-direction:column;gap:10px;width:100%}
.fpv-slide{position:relative;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px 14px 12px 40px;font-size:13px;text-align:left}
.fpv-slide .n{position:absolute;left:12px;top:12px;font-size:11.5px;color:var(--text-3)}.fpv-slide b{display:block;font-size:14.5px;margin-bottom:6px}.fpv-slide p{margin:2px 0;color:var(--text-2)}.fpv-slide p.dim{color:var(--text-3)}
.fpv-text{background:var(--card);color:var(--text);padding:12px 14px;border-radius:8px;font:12.5px/1.55 Consolas,"D2Coding",monospace;white-space:pre-wrap;word-break:break-all;text-align:left;width:100%;box-sizing:border-box;margin:0}
.fpv-textpages{width:100%;display:flex;flex-direction:column;gap:6px}.fpv-pgh{font-size:11.5px;color:var(--text-3);padding:6px 4px 0}.fpv-textpages .fpv-text{font-family:inherit;font-size:13px;line-height:1.6}
.fpv-switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle;background:var(--surface-2,#f2f2f5)}
.fpv-switch button{padding:5px 12px;border:0;background:transparent;color:var(--text-3);font:inherit;font-size:12.5px;cursor:pointer}
.fpv-switch button.on{background:var(--accent,var(--brand,#0a84ff));color:#fff;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25)}   /* 켜진 쪽 = 모듈 색 · 흰 글씨, 꺼진 쪽 = 흐린 글씨 */
.fpv-switch button:not(.on):hover{color:var(--text)}
.fpv-bar .fpv-switch{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}.fpv-bar .fpv-switch button{color:rgba(255,255,255,.7)}.fpv-bar .fpv-switch button.on{background:#fff;color:#111}.fpv-bar .fpv-switch button:not(.on):hover{color:#fff}
.fpv-view{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.72);display:flex;flex-direction:column;align-items:stretch}
.fpv-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;color:#fff;font-size:13px;flex-shrink:0}
.fpv-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}.fpv-sp{flex:1}
.fpv-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:13px;border:0;cursor:pointer;font:inherit}
.fpv-btn:hover{background:rgba(255,255,255,.26)}.fpv-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fpv-body{flex:1;overflow:auto;padding:0 24px 24px;display:flex;flex-direction:column;align-items:center}
.fpv-body>*{width:min(1100px,100%)}.fpv-body .fpv-note{color:rgba(255,255,255,.7)}
.fpv-view .fpv-scroll{background:var(--card);padding:12px;border-radius:8px;box-sizing:border-box}.fpv-view .fpv-sheets button{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}.fpv-view .fpv-sheets button.on{background:#fff;color:#222}
/* 사진 크게 보기 (filepreview.js openImage, 결정 11-352) — 문서 크게 보기와 같은 덮개 · 머리줄, 몸통은 확대 · 축소 무대(휠 · 끌기 · 두 번 누르기).
   크기는 화면 코드가 width · height 로 정하고 자리는 translate 로 옮긴다. 손 모양 커서는 모든 화면 공통 --cur-grab / --cur-grabbing (11-253) */
.fpv-imgv{background:rgba(0,0,0,.86)}
.fpv-btn[hidden]{display:none}
.fpv-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.fpv-stage .fpv-im{position:absolute;left:0;top:0;max-width:none;max-height:none;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:zoom-in;-webkit-user-drag:none;user-select:none}
.fpv-stage.pan,.fpv-stage.pan .fpv-im{cursor:var(--cur-grab)}.fpv-stage.drag,.fpv-stage.drag .fpv-im{cursor:var(--cur-grabbing)}
.fpv-stage .fpv-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.fpv-zl{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums;pointer-events:none}
.fpv-zl[hidden]{display:none}
/* 자료실 문서 웹 편집 덮개 (docs-editor.js, 11-284) — 크게 보기(.fpv-view)와 같은 머리줄, 몸통은 문서 서버 편집기 iframe */
.docs-view{position:fixed;inset:0;z-index:96;background:var(--bg,#f4f4f6);display:flex;flex-direction:column;align-items:stretch}
.docs-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--card,#fff);border-bottom:1px solid var(--line,#e2e2e6);font-size:13px;flex-shrink:0;min-height:44px}
.docs-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}.docs-mode{color:var(--text-3,#8a8f99);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.docs-sp{flex:1}
.docs-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;background:var(--surface-2,#eef0f3);color:var(--text,#222);border:1px solid var(--line,#e2e2e6);cursor:pointer;font:inherit;font-size:13px}.docs-btn:hover{background:var(--hover,#e6e8ec)}.docs-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.docs-body{flex:1;min-height:0;position:relative}.docs-body #docsEditor,.docs-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.docs-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-3,#8a8f99);font-size:14px;pointer-events:none}
body.docs-open{overflow:hidden}

/* 공통 검색 강조: 기존 메신저처럼 테마 강조색으로 표시. */
mark.g-search-hit { background: var(--brand-soft, var(--hover)); color: var(--brand-text, var(--text)); font-weight: 700; border-radius: 3px; }