/* ============================================================
   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, 개인 설정으로 서버 동기화)
   ============================================================ */
: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;
}
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: #3a3a3c; --bubble-other-text: #f5f5f7;
  --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, var(--accent)) 62%, #fff); }
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): 모듈 색 바탕 + 흰 그림, 파스텔: 옅은 바탕 + 색 그림
   · 크기 · 둥근 모서리 · 그림 크기는 각 화면의 규칙 그대로(여기서는 면 · 그림자 · 그림 색만)
   ============================================================ */
.mbox { --mb: var(--brand, var(--accent)); position: relative; overflow: hidden; border: 0; }
html:is([data-icons="solid"], [data-icons="gloss"], [data-icons="float"]) .mbox { color: #fff; }
html:is([data-icons="solid"], [data-icons="gloss"], [data-icons="float"]) .mbox svg { position: relative; z-index: 1; stroke: #fff; 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% 의 옅은 바탕 · 같은 색 얇은 테두리 · 색 그림 (어두운 테마에서도 같은 옅은 칩) */
html[data-icons="pastel"] .mbox { background: color-mix(in srgb, var(--mb) 14%, #fff); color: var(--mb); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mb) 28%, #fff), 0 1px 2px rgba(0,0,0,.08); }
html[data-icons="pastel"] .mbox svg { position: relative; z-index: 1; stroke: var(--mb); 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: #9a8b74; --accent: #8a5a2b; --accent-2: #a56f3b; --selected: #8a5a2b; --on-accent: #fff;
  --bubble-other: #efe6d3; --bubble-other-text: #2b2318;
  --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: #968f83; --accent: #c9784a; --accent-2: #b5683c; --selected: #c9784a; --on-accent: #fff;
  --bubble-me: #3e6b78; --bubble-me-text: #fff; --bubble-other: #faf7f0; --bubble-other-text: #2a2622;   /* 내 말풍선은 청록 종이, 상대는 크림 종이 */
  --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: #968f83; --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"] .card[data-card="ai"] { background: var(--craft-teal); color: #fff; --text: #fff; --text-2: rgba(255, 255, 255, .85); --text-3: rgba(255, 255, 255, .7); --line: rgba(255, 255, 255, .2); --surface-2: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 var(--craft-teal-2), 0 8px 18px -6px rgba(0, 20, 30, .45); }
html[data-theme="craft"] .card[data-card="ai"] > h2 { color: #fff; } html[data-theme="craft"] .card[data-card="ai"] > h2::after { background: var(--craft-mark); } html[data-theme="craft"] .card[data-card="ai"] > h2 small { color: rgba(255, 255, 255, .75); }
html[data-theme="craft"] .card[data-card="ai"] .askbox { background: var(--card); border: 0; --text: #2a2622; --text-2: #5f5a52; --text-3: #968f83; color: #2a2622; box-shadow: 0 2px 0 var(--craft-edge); }
html[data-theme="craft"] .card[data-card="ai"] .askbox:focus-within { box-shadow: 0 2px 0 var(--craft-edge), 0 0 0 3px rgba(255, 255, 255, .4); }   /* 포커스는 바깥 상자에 (결정 11-199) */
html[data-theme="craft"] .card[data-card="ai"] .askbox input { color: #2a2622; } html[data-theme="craft"] .card[data-card="ai"] .askbox input::placeholder { color: #968f83; }
html[data-theme="craft"] .card[data-card="ai"] .askbox button { background: var(--accent); border-radius: 8px; }
html[data-theme="craft"] .card[data-card="ai"] .chip { background: var(--card); color: var(--craft-teal-2); box-shadow: 0 2px 0 var(--craft-edge); border-radius: 6px; } html[data-theme="craft"] .card[data-card="ai"] .chip:hover { background: var(--craft-mark); color: #2a2622; }
html[data-theme="craft"] .card[data-card="ai"] .aians { background: var(--card); --text: #2a2622; --text-2: #5f5a52; --text-3: #968f83; color: #2a2622; border-radius: 8px; padding: 12px; border-top: 0; }
/* 조직도: 왼쪽 판의 검색·트리는 크림 쪽지 한 장에 담는다 (다른 모듈의 슬랩 메뉴와 같은 인상) */
html[data-theme="craft"] nav:not(#launcher) #tree { background: var(--card); --text: #2a2622; --text-2: #5f5a52; --text-3: #968f83; --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), html[data-theme="craft"] #wrap .card[data-card="ai"] { --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: #968f83; }
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: #1a2338; --bubble-other-text: #e8edf7;
  --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),
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; }

/* 설문은 일반 새 글과 구분되는 시스템 게시판. 정렬은 각 목록 렌더러에서 마지막으로 고정. */
: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));}