/* _common.css — KCA 오피스 공용 디자인 정본 (2026-06-14)
   표준 디자인 토큰. 페이지는 이 파일을 <link>로 참조한다.
   색·토큰 변경은 여기 한 곳에서 → 참조하는 모든 페이지에 즉시 반영.
   기준 팔레트: 노션풍 (글자 rgb(44,44,43), 강조 파랑 #2383e2). */
/* 스크롤바 위치 규칙 (2026-08-06) — 스크롤바는 본문 규격과 무관하게 항상 화면 오른쪽 끝.
   셸의 iframe(.content-frame)은 전폭이고, 1400px 본문 규격은 여기서 잡는다.
   iframe을 max-width로 가두면 스크롤바가 화면 안쪽에 떠서 규격마다 위치가 달라졌다. */
html{scrollbar-gutter:stable}
/* 본문 글꼴 기본 토큰 (2026-09-06) — 글꼴을 안 잡은 페이지가 브라우저 기본 세리프로 그려지는 것을 막는다.
   실측: goal-table v1·v2 가 body font-family 없이 나가 크롬에선 명조, 사파리에선 궁서체로 보였다
   (건우님 "가끔 궁서체로 보이더라고 특히 사파리로 열었을 때"). 사파리는 한글 기본 세리프가 궁서다.
   위 1400px 규격과 같은 :where() 구조 — 특이도 0 이라 페이지가 자기 body 글꼴을 쓰면 그 값이 항상 이긴다. */
:where(body){font-family:Inter,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}
/* 본문 규격 기본값 1400px — :where()로 감싸 특이도 0이라, 페이지가 자기 래퍼에
   max-width를 쓰면(1400px든 none이든 860px든) 그 값이 항상 이긴다.
   즉 이 줄은 규격을 안 잡은 페이지에만 적용되는 안전망이다. */
:where(body > .wrap, body > main, body > .page, body > .container){
  max-width:1400px; margin-left:auto; margin-right:auto;
}
:root{
  --text:rgb(44,44,43); --text-2:rgba(44,44,43,0.65); --text-3:rgba(44,44,43,0.45); --text-4:rgba(44,44,43,0.32);
  --border:rgba(0,0,0,0.08); --border-2:rgba(0,0,0,0.05); --subtle-bg:#fafaf9; --hover:rgba(0,0,0,0.035);
  --blue:#2383e2; --blue-soft:rgba(35,131,226,0.10); --blue-border:rgba(35,131,226,0.2);
  --green:#16a34a; --green-soft:rgba(22,163,74,0.10); --green-border:rgba(22,163,74,0.2);
  --orange:#d97706; --orange-soft:rgba(217,119,6,0.10); --orange-border:rgba(217,119,6,0.22);
  --red:#dc2626; --red-soft:rgba(220,38,38,0.07);
  --purple:#7c3aed; --purple-soft:rgba(124,58,237,0.09);
  /* 배경 토큰 (2026-08-06 신설) — 종전엔 없어서 페이지가 #fff를 직접 박았고,
     그게 다크 테마가 안 먹던 주된 이유였다. 새 페이지는 반드시 이 토큰을 쓴다. */
  --page-bg:#fff; --card-bg:#fff; --shadow:rgba(15,15,15,0.08);
}

/* ── 다크 테마 (2026-08-06) ──────────────────────────────────────────
   셸(shell_handler_v2.go)의 --sb-* 팔레트와 같은 값이다. 한쪽만 고치면 경계에서 색이 튄다.
   data-theme은 _common.js 테마 수신부가 <html>에 세팅한다. */
:root[data-theme="dark"]{
  --text:rgb(235,235,235); --text-2:rgba(235,235,235,0.62); --text-3:rgba(235,235,235,0.42); --text-4:rgba(235,235,235,0.3);
  --border:rgba(255,255,255,0.09); --border-2:rgba(255,255,255,0.06); --subtle-bg:rgb(32,32,32); --hover:rgba(255,255,255,0.055);
  --blue:#4a9eff; --blue-soft:rgba(74,158,255,0.14); --blue-border:rgba(74,158,255,0.3);
  --green:#22c55e; --green-soft:rgba(34,197,94,0.14); --green-border:rgba(34,197,94,0.3);
  --orange:#f0a02a; --orange-soft:rgba(240,160,42,0.14); --orange-border:rgba(240,160,42,0.3);
  --red:#f0564a; --red-soft:rgba(240,86,74,0.13);
  --purple:#a78bfa; --purple-soft:rgba(167,139,250,0.14);
  --page-bg:rgb(37,37,37); --card-bg:rgb(43,43,43); --shadow:rgba(0,0,0,0.4);
  color-scheme:dark;
}

/* ── 미드나잇 테마 (2026-08-06) — 랜딩페이지(backend/pages.go) 팔레트 계승 ── */
:root[data-theme="midnight"]{
  --text:#f2f4f8; --text-2:#98a0ae; --text-3:#6b7484; --text-4:rgba(242,244,248,0.28);
  --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.05); --subtle-bg:#0f1219; --hover:rgba(255,255,255,0.05);
  --blue:#6366f1; --blue-soft:rgba(99,102,241,0.16); --blue-border:rgba(99,102,241,0.32);
  --green:#22c55e; --green-soft:rgba(34,197,94,0.14); --green-border:rgba(34,197,94,0.3);
  --orange:#f0a02a; --orange-soft:rgba(240,160,42,0.14); --orange-border:rgba(240,160,42,0.3);
  --red:#f0564a; --red-soft:rgba(240,86,74,0.13);
  --purple:#8b5cf6; --purple-soft:rgba(139,92,246,0.16);
  --page-bg:#0b0d14; --card-bg:#141824; --shadow:rgba(0,0,0,0.55);
  color-scheme:dark;
}

/* 다크 계열에서 페이지 바탕을 토큰으로 강제한다.
   :where()로 특이도 0 — 페이지가 자기 배경을 명시하면 그쪽이 이긴다(안전망 성격). */
:root[data-theme="dark"] :where(body),
:root[data-theme="midnight"] :where(body){ background:var(--page-bg); color:var(--text); }

/* 위 :where() 규칙은 특이도 0이라 페이지가 body{background:#fff}로 직접 박으면 진다.
   실측 2026-08-19: www/pages 실사용 56개 중 16개가 그랬고, 다크에서 흰 배경이 그대로 남았다.
   html[data-theme=...] body 로 특이도 (0,1,1)을 만들어 페이지 body 규칙(0,0,1)을 이기게 한다.
   페이지가 의도적으로 다른 배경을 쓰려면 자기 규칙의 특이도를 올리면 된다(예: body.custom). */
html[data-theme="dark"] body,
html[data-theme="midnight"] body{ background:var(--page-bg); color:var(--text); }

/* ── 페이지 자체 :root 무력화 (2026-08-06) ────────────────────────────
   실사용 218개 중 135개가 자기 <style> 안에서 :root{}를 재정의하고,
   그중 64개가 --text를 어두운 값(rgb(55,53,47) 등)으로 덮는다.
   페이지 <style>이 이 파일보다 뒤에 로드되므로 같은 특이도면 페이지가 이겨서,
   배경만 다크로 바뀌고 글자는 어두운 채 남는다 = 검은 배경에 검은 글자.

   해법: html[data-theme=...]:root 로 특이도를 한 단계 올려 공통이 이기게 한다.
   (0,2,1) vs 페이지 :root (0,1,0) — 로드 순서와 무관하게 항상 이긴다.
   페이지를 64개 고치는 대신 여기 한 곳에서 처리한다. 값은 위 블록과 반드시 같게 유지할 것. */
html[data-theme="dark"]:root{
  --text:rgb(235,235,235); --text-2:rgba(235,235,235,0.62); --text-3:rgba(235,235,235,0.42); --text-4:rgba(235,235,235,0.3);
  --border:rgba(255,255,255,0.09); --border-2:rgba(255,255,255,0.06); --subtle-bg:rgb(32,32,32); --hover:rgba(255,255,255,0.055);
  --blue:#4a9eff; --blue-soft:rgba(74,158,255,0.14); --blue-border:rgba(74,158,255,0.3);
  --green:#22c55e; --green-soft:rgba(34,197,94,0.14); --green-border:rgba(34,197,94,0.3);
  --orange:#f0a02a; --orange-soft:rgba(240,160,42,0.14); --orange-border:rgba(240,160,42,0.3);
  --red:#f0564a; --red-soft:rgba(240,86,74,0.13);
  --purple:#a78bfa; --purple-soft:rgba(167,139,250,0.14);
  --page-bg:rgb(37,37,37); --card-bg:rgb(43,43,43); --shadow:rgba(0,0,0,0.4);
  /* 페이지 전용 변수 — 공통엔 없지만 여러 페이지가 쓴다(실측 --accent 76·--navy 58·--subtle 55·--text3 55). */
  --accent:#4a9eff; --navy:rgb(235,235,235); --subtle:rgb(32,32,32); --text3:rgba(235,235,235,0.42);
  --bg:rgb(37,37,37); --amber:#f0a02a; --red-border:rgba(240,86,74,0.3);
  /* 페이지 로컬 팔레트 잔여분(2026-08-06 카드·패널 토큰화 때 실측).
     노션 추출 토큰(--n-*) 2개 파일, 그 외 --bd/--mut/--bg-soft/--gray/--text2 등 소수 파일이 쓴다.
     페이지 :root가 밝은 값으로 정의하므로 여기서 같은 방식으로 되잡는다. */
  --n-bac-pri:rgb(43,43,43); --n-bac-sec:rgb(32,32,32); --n-bac-int:rgba(255,255,255,0.055); --n-bor-pri:rgba(255,255,255,0.09);
  --n-tex-pri:rgb(235,235,235); --n-tex-sec:rgba(235,235,235,0.62); --n-tex-ter:rgba(235,235,235,0.42);
  --n-ico-pri:rgb(235,235,235); --n-ico-sec:rgba(235,235,235,0.62); --n-ico-ter:rgba(235,235,235,0.42); --n-grid:rgba(255,255,255,0.07);
  --n-blu:#4a9eff; --n-sha-md:0 8px 12px rgba(0,0,0,0.4); --n-sha-lg:0 20px 24px rgba(0,0,0,0.45);
  --bd:rgba(255,255,255,0.09); --mut:rgba(235,235,235,0.62); --gray:rgba(235,235,235,0.62);
  --bg-soft:rgb(32,32,32); --text2:rgba(235,235,235,0.62); --gray-soft:rgba(255,255,255,0.055);
  --accent-soft:rgba(74,158,255,0.14); --accent-border:rgba(74,158,255,0.3);
  --amber-soft:rgba(240,160,42,0.14); --yellow:#f0a02a; --yellow-soft:rgba(240,160,42,0.14);
  --purple-border:rgba(167,139,250,0.3);
  /* 페이지 로컬 이름 2차 보강 (2026-08-19 실측) — www/pages 실사용 56개가 쓰는 이름들.
     _common.css에 없던 탓에 페이지가 정의한 라이트값이 그대로 남아 다크에서 튀었다.
     --line 12·--muted 12·--warn 10·--ink 7·--bg2 6·--ac 6·--ok 6 파일(실측). */
  --ink:rgb(235,235,235); --line:rgba(255,255,255,0.09); --muted:rgba(235,235,235,0.62);
  --fg:rgb(235,235,235); --bg2:rgb(32,32,32); --panel:rgb(43,43,43); --bar:rgba(255,255,255,0.055);
  --ac:#4a9eff; --ok:#22c55e; --warn:#f0a02a;
  --accent-bg:rgba(74,158,255,0.14); --warn-bg:rgba(240,160,42,0.14);
  --surface:rgb(43,43,43); --surface-2:rgb(32,32,32); --border-light:rgba(255,255,255,0.06);
  --accent-light:rgba(74,158,255,0.14); --green-light:rgba(34,197,94,0.14);
  --red-light:rgba(240,86,74,0.13); --orange-light:rgba(240,160,42,0.14);
  --purple-light:rgba(167,139,250,0.14); --cyan:#22d3ee; --cyan-light:rgba(34,211,238,0.14);
}
/* 입력 요소 — 배경을 명시하지 않으면 브라우저 기본 흰색이 나와 다크에서 튄다.
   :where()로 특이도 0이라, 페이지가 자기 스타일을 주면 그쪽이 항상 이긴다(안전망).
   실측 2026-08-06: 실사용 218개 중 25개가 입력요소에 배경을 안 줬다. */
:root[data-theme="dark"] :where(input, select, textarea),
:root[data-theme="midnight"] :where(input, select, textarea){
  background:var(--card-bg); color:var(--text); border-color:var(--border);
}
:root[data-theme="dark"] :where(input, textarea)::placeholder,
:root[data-theme="midnight"] :where(input, textarea)::placeholder{ color:var(--text-3); }

html[data-theme="midnight"]:root{
  --text:#f2f4f8; --text-2:#98a0ae; --text-3:#6b7484; --text-4:rgba(242,244,248,0.28);
  --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.05); --subtle-bg:#0f1219; --hover:rgba(255,255,255,0.05);
  --blue:#6366f1; --blue-soft:rgba(99,102,241,0.16); --blue-border:rgba(99,102,241,0.32);
  --green:#22c55e; --green-soft:rgba(34,197,94,0.14); --green-border:rgba(34,197,94,0.3);
  --orange:#f0a02a; --orange-soft:rgba(240,160,42,0.14); --orange-border:rgba(240,160,42,0.3);
  --red:#f0564a; --red-soft:rgba(240,86,74,0.13);
  --purple:#8b5cf6; --purple-soft:rgba(139,92,246,0.16);
  --page-bg:#0b0d14; --card-bg:#141824; --shadow:rgba(0,0,0,0.55);
  --accent:#6366f1; --navy:#f2f4f8; --subtle:#0f1219; --text3:#6b7484;
  --bg:#0b0d14; --amber:#f0a02a; --red-border:rgba(240,86,74,0.3);
  /* 페이지 로컬 팔레트 잔여분 — dark 블록과 같은 목록, 미드나잇 값으로. */
  --n-bac-pri:#141824; --n-bac-sec:#0f1219; --n-bac-int:rgba(255,255,255,0.05); --n-bor-pri:rgba(255,255,255,0.08);
  --n-tex-pri:#f2f4f8; --n-tex-sec:#98a0ae; --n-tex-ter:#6b7484;
  --n-ico-pri:#f2f4f8; --n-ico-sec:#98a0ae; --n-ico-ter:#6b7484; --n-grid:rgba(255,255,255,0.06);
  --n-blu:#6366f1; --n-sha-md:0 8px 12px rgba(0,0,0,0.55); --n-sha-lg:0 20px 24px rgba(0,0,0,0.6);
  --bd:rgba(255,255,255,0.08); --mut:#98a0ae; --gray:#98a0ae;
  --bg-soft:#0f1219; --text2:#98a0ae; --gray-soft:rgba(255,255,255,0.05);
  --accent-soft:rgba(99,102,241,0.16); --accent-border:rgba(99,102,241,0.32);
  --amber-soft:rgba(240,160,42,0.14); --yellow:#f0a02a; --yellow-soft:rgba(240,160,42,0.14);
  --purple-border:rgba(139,92,246,0.32);
  /* 페이지 로컬 이름 2차 보강 — dark 블록과 같은 목록, 미드나잇 값으로. */
  --ink:#f2f4f8; --line:rgba(255,255,255,0.08); --muted:#98a0ae;
  --fg:#f2f4f8; --bg2:#0f1219; --panel:#141824; --bar:rgba(255,255,255,0.05);
  --ac:#6366f1; --ok:#22c55e; --warn:#f0a02a;
  --accent-bg:rgba(99,102,241,0.16); --warn-bg:rgba(240,160,42,0.14);
  --surface:#141824; --surface-2:#0f1219; --border-light:rgba(255,255,255,0.05);
  --accent-light:rgba(99,102,241,0.16); --green-light:rgba(34,197,94,0.14);
  --red-light:rgba(240,86,74,0.13); --orange-light:rgba(240,160,42,0.14);
  --purple-light:rgba(139,92,246,0.16); --cyan:#22d3ee; --cyan-light:rgba(34,211,238,0.14);
}

/* ── 목록형 페이지 좌측 기준선 (2026-08-19) ─────────────────────────────
   업무지원 메뉴로 열리는 목록 페이지(TODO·보고문서·작업문서·PROJECT·사진첩 등)는
   제목·툴바·표가 모두 같은 세로선에서 시작해야 한다. 그 값이 46px다.

   왜 여기 있나 — 종전엔 이 46px를 템플릿마다 각자 CSS에 복붙했고, 그래서
   project-table 하나가 통째로 빠져 제목만 왼쪽으로 튀어나와 있었다(2026-08-19 발견).
   새 목록형 템플릿을 만들 때 값을 옮겨 적지 말고, <body class="listpage"> 만 붙인다.

   문서형(기획서·분석·보고서 본문)은 이 클래스를 붙이지 않는다 — 들여쓰기 없는 게 맞다. */
body.listpage .page-header,
body.listpage .toolbar,
body.listpage .newtask-bar,
body.listpage .filter-bar,
body.listpage .todo-table,
body.listpage .hint-bar,
body.listpage .logsec,
body.listpage .grid{margin-left:var(--list-gutter,46px)}
body.listpage #listWrap{padding-left:0;margin-left:0}

/* 좁은 화면에선 거터를 없앤다 — 46px 들여쓰기는 표·사진격자를 화면 밖으로 밀어낸다. */
@media(max-width:640px){
  body.listpage{--list-gutter:0px}
}

/* ── 콘텐츠 원고 공통 표시 규격 ────────────────────────────────────────
   원고마다 CSS를 복사하지 않는다. content-production.js가 문장 단위 <br>와
   사진 앞 .beforeph만 만들고, 정렬·간격은 이 공통 스타일 한 곳이 맡는다. */
.draft.blog p,.draft.blog h3{text-align:center}
.draft.blog ul,.draft.blog ol,.draft.blog table{text-align:left}
.draft.blog p{margin-bottom:27px}
.draft.blog p.beforeph{margin-bottom:54px}
.draft.blog .phrow{margin-top:0}

/* ── 원고 모바일보기 «깜빡임 없는» 선적용 (2026-08-28) ─────────────────
   PC/모바일 보기는 localStorage(cp.view)에 남고, 서버가 <head> 에 심는 부트
   스크립트(backend/page_view_inject.go)가 페인트 전에 html.view-mobile 을 건다.
   그래서 저장값이 '모바일'이면 첫 페인트부터 모바일 폭으로 그려진다 — 종전처럼
   PC 로 한 번 그렸다가 바뀌지 않는다.

   🔴 아래 규칙은 원고 페이지 인라인 CSS 의 .draft.blog.mobile-view 블록과 «같은 값»이다.
   원고 HTML 을 재발행하지 않고 선적용하기 위해 셀렉터만 바꿔 여기에 둔다.
   수치를 고칠 때는 두 곳을 함께 고친다(네이버 모바일 앱 m.blog.naver.com 실측값). */
html.view-mobile .draft.blog{max-width:390px;margin-left:auto;margin-right:auto;
            border:1px solid var(--bd,#e5e7eb);border-radius:0;padding:0 20px}
html.view-mobile .draft.blog .blog-title{font-size:26px;line-height:37px;font-weight:400;margin:16px 0 16px}
html.view-mobile .draft.blog .blog-profile{font-size:14px;padding-bottom:14px;margin-bottom:16px}
html.view-mobile .draft.blog .blog-profile .bp-name{font-size:14px;font-weight:400}
html.view-mobile .draft.blog .blog-profile .bp-date{font-size:12px;color:rgb(140,140,140)}
html.view-mobile .draft.blog h3{font-size:18px;line-height:27px;margin:24px 0 0}
html.view-mobile .draft.blog p{font-size:16px;line-height:28.8px;color:rgb(0,0,0);margin:0 0 27px}
html.view-mobile .draft.blog p.beforeph{margin-bottom:54px}
html.view-mobile .draft.blog .phrow{margin:0 -20px}
html.view-mobile .draft.blog .ph figcaption{font-size:13px;padding:8px 20px 0}
html.view-mobile .draft.blog .hero{margin:20px -20px}
html.view-mobile .draft.blog .tag{font-size:12px}

/* ─── title-dot — 제목 옆 열람범위(권한) 표시 ────────────────────────────
   발행 규정 §0-8 이 정본이다. 모든 페이지에 <span class="title-dot {role}"> 를
   강제하고(bot_routes.go 가 없으면 경고), 권한이 바뀌면
   pagemodel.go:syncTitleDotLocked 가 클래스를 갱신한다. 그런데 «보이게 할 CSS»
   가 여기 없어서 발행 페이지의 점이 통째로 안 그려지고 있었다
   (2026-08-29 발견 — icca blog-status 는 admin 인데 화면에 점이 없었다).
   🔴 색은 곧 권한이다. 아래 4색 밖의 색을 쓰지 않는다(§0-8).
   색을 고칠 때는 규정 §0-8 을 먼저 고치고 여기를 맞춘다. */
.title-dot{display:inline-block;width:10px;height:10px;border-radius:99px;
           margin-left:12px;vertical-align:middle;position:relative;top:-2px}
.title-dot.member  {background:#16a34a}
.title-dot.admin   {background:#e03e3e}
.title-dot.owner   {background:#9065b0}
.title-dot.personal{background:#d9730d}