/* ═══════════════════════════════════════════════════════════════════════════
   nanumai.css — 나누마이 디자인 한 벌의 **단 하나의 진입 파일**(2026-11-01 대표님 「각각의 내부 디자인 컨셉도 다 동일한
   나누마이 컨셉으로 통일 … 디자인이 바뀌면 모두 다 한꺼번에」).

   포털의 모든 HTML 이 <head> 맨 끝에서 이 파일 하나를 싣는다(scripts/theme-inject.py 가 넣고, safe-deploy 가 --check 로 막는다).
   맨 끝에 실리므로 페이지 안 <style> 의 :root 보다 뒤에 와서 이긴다 — 여기 값을 바꾸면 300여 화면이 한꺼번에 바뀐다.

   구성 ① 글꼴(프리텐다드 한 벌) ② 공통 부품(n-ui.css?v=19) ③ 브랜드 토큰(값은 /brand/tokens.css 와 같아야 한다 — brand-tokens-gate 가 대조)
        ④ 옛 변수 이름 덮기 — 화면들이 제각각 적어 둔 --accent·--navy·--brand·--tool-blue·--gray-* … 를 전부 브랜드 값으로 되돌린다.
   규칙(BRAND.md): 강조색은 전기 파랑 하나, 글자는 잉크 남색, 신호색(ok·warn·err)만 따로. 보라·주황·청록 같은 둘째 강조색은 두지 않는다.
   예외: 교육방·입장(room/·s/)·무대(slides/play·follow)는 현장 속도·어두운 화면 때문에 이 파일을 싣지 않는다(theme-inject SKIP).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("/css/n-ui.css?v=19");

:root{
  /* ③ 브랜드 토큰 — /brand/tokens.css 의 밝은 값 그대로(어두운 값은 여기 두지 않는다: 강사·공개 화면은 밝음 고정) */
  --brand:#2E69FC; --brand-ink:#1E2340; --brand-soft:#E8EFFF; --link:#1F55D6; --accent:#2E69FC; --sage:#C9D0DC; --sky:#E8EFFF;
  --ink:#1E2340; --ink-soft:#5A6078; --paper:#FFFFFF; --surface:#F6F8FC; --line:#E6EAF2; --line-strong:#C9D0DC; --on-brand:#FFFFFF;
  /* 신호색 — 브랜드 색과 따로. portal.css 의 이름 그대로 */
  --ok:#1F7A45; --okbg:#DDEFE3; --warn:#9A5A00; --warnbg:#FFF1DC; --err:#B91C1C; --errbg:#F9DEDE;

  /* ④ 옛 이름 덮기 ─ portal.css(앱) */
  --navy:#1E2340; --blue:#2E69FC; --soft:#5A6078; --bg:#F4F6FA; --card:#FFFFFF; --wash:#EEF1F6; --bluebg:#E8EFFF; --indigo:#1F55D6;
  /* ─ common.css(B2BAI 포크, 도구 38화면) */
  --accent-light:#5B8CFF; --accent-bg:rgba(47,107,255,.07);
  --gray-50:#F6F8FC; --gray-100:#EEF1F6; --gray-200:#E6EAF2; --gray-300:#C9D0DC; --gray-400:#5A6078; --gray-500:#5A6078; --gray-600:#3B4466; --gray-700:#2A3150; --gray-800:#1E2340;
  /* ─ 도구 화면들이 제각각 적은 이름(AI 실습 도구 27화면·진단·예약·체험) */
  --sub:#5A6078; --mute:#5A6078; --border:#E6EAF2; --bg-main:#F4F6FA; --bg-white:#FFFFFF;
  --text-primary:#1E2340; --text-secondary:#5A6078; --text-light:#5A6078;   /* gray-400·text-light 은 도구 보조 글자로 쓰였다. 옛 값 #8E97B5 는 흰 바탕 2.9 라 글자가 안 읽혔다 */
  --brand2:#1F55D6; --primary:#2E69FC; --primary-light:#5B8CFF; --primary-dark:#1F55D6;
  --tool-blue:#2E69FC; --tool-light:#5B8CFF; --tool-dark:#1E2340;
  --purple:#1F55D6; --orange:#9A5A00; --amber:#9A5A00; --accent-orange:#9A5A00; --accent-green:#1F7A45;
  --success:#1F7A45; --success-light:#DDEFE3; --warning:#9A5A00; --warning-light:#FFF1DC; --danger:#B91C1C; --danger-light:#F9DEDE; --ng:#B91C1C; --ngbg:#F9DEDE;
  --competitor-gray:#8E97B5;
  /* 진단 세 도구(manners·hofstede·culturemap)의 악센트 옅은 색 */
  --tint:#E8EFFF; --edge:#C9D6FF;
  --shadow-sm:0 1px 3px rgba(30,35,64,.08); --shadow-md:0 4px 12px rgba(30,35,64,.10); --shadow-lg:0 8px 30px rgba(30,35,64,.12); --shadow:0 1px 3px rgba(30,35,64,.08);
  color-scheme:light;
}
/* ① 글꼴 — 프리텐다드 한 벌. 입력·단추까지(브라우저 기본 글꼴이 섞이지 않게). 코드 글꼴은 그대로 둔다. */
html,body,button,input,select,textarea{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
code,pre,kbd,samp{font-family:ui-monospace,Menlo,Consolas,monospace}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 공통 바탕·글자 색 — 페이지가 자기 변수로 칠한 곳은 위의 변수 덮기로, 아무것도 안 칠한 곳은 여기로 맞는다 */
body{color:var(--ink)}
a{color:var(--link)}
::selection{background:var(--brand-soft);color:var(--ink)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ⑤ 모양 한 벌(2026-11-01 대표님 「모든 도구의 디자인을 동일하게」 · 전 화면 실측: 단추 모서리 8·10·12·99·999px, 카드 12~24px 로 갈려 있었다).
   화면마다 고치지 않고 여기서 눌러 맞춘다. 단추·입력 = 살짝 둥글게 8px, 카드 = 10px, 알약 없음. 동그라미가 뜻인 것(점·라디오·체크·도움말 단추)은 뺀다. */
:root{--r-ctl:8px;--r-card:10px;--radius-sm:8px;--radius-md:10px;--radius-lg:10px;--radius:10px}
button:not(.hd-fab):not(.fx):not([class*="dot"]):not([class*="circle"]):not([class*="round"]),a.btn,.btn,.mini,.btn-primary,.btn-secondary,.btn-calculate,[class*="-btn"],[class^="btn-"],.st-go,.sbtn,.navbtn,
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:var(--r-ctl)!important}
.card,.tcard,.panel,.box,.mc,[class$="-card"],[class*="-card "],.calc-section,.calc-header,.modal,.dialog{border-radius:var(--r-card)!important}
/* ⑤-2 전 화면 실측으로 찾은 나머지(scripts/ui-audit.mjs). 폰 모양 그림(.frame.phone .pphone .lx-ph)은 실물이 둥글어 뺀다 */
.pbtn,.go,a.go,.am-work,.mrbtn,.navlink,.pmenu>a,.pnav a,nav>a,.nav-menu a,.out,a.out,.gchips a,.admbar a,.roombar a,.toast,#toast,#curveChips span{border-radius:var(--r-ctl)!important}
.eyebrow,.kit-kind,.n-badge,.pill,.pick,.tcnt,.tbd i,.fchips span,.fsteps span,.plive,.info-badge,.color-chip,.section-nav-counter,.status-badge,.ic-cat-subtotal,.chip .n,.st-chip span,.chips label span{border-radius:6px!important}
.pfig,.pfig img,.pdrop,.am-bell-p,.am-empty,.am-kpi,.am-t,.lv-stat,.kit-cover,.kit-gate,.kit-next,.kit-block,.kit-act,.kit-q,.kit-top,.beta-band,.fear,.fstep,.cardp,.frame.lap,.safe,.plan,.story,.formcard,.tool,.ask,.drop-zone,.weak,.fold,.hero,.admbar,.mempty,.ad-gate,.rp-paper,.why,.acard,.lx-stagebox,.lx-pile,.cjm-wrapper,.empathy-map-wrapper,.setup-box,.ic-analysis,.ic-results-panel,.ic-detail-panel{border-radius:var(--r-card)!important}
/* 작은 강조 글자는 전기 파랑이 아니라 진한 파랑(BRAND.md 대비표) — portal.css·공용 js 가 그린 곳이라 여기서 덮는다 */
.ptag{color:var(--ink-soft)!important}
/* 머리줄 소개 한 줄 — 작고 연하게(대표님 2026-11-02). 연해도 글자 대비 4.5 는 지킨다 */
.nav-tag{color:var(--soft)!important;opacity:.62;font-size:10.5px!important}   /* 소개 한 줄 — 2026-11-03 대표님 「더 작게, 연한 회색」(대비 기준 예외는 ui-audit ALLOW) */
.nav-menu .navlink.on,.nav-menu .navlink:hover,.nav-r .navlink:hover,.navlink.ghost,.mini:not(.main):not(.p),.pfoot a{color:var(--link)!important}
.pfoot .credit,.pubfoot .dim,.fcert .dim{opacity:1!important}
.pub .kit-gate .kit-tiny{color:var(--line-strong)!important}
/* 도구 제목 띠 — 어두운 옛 띠를 밝은 제목으로(js/tool-head.js 에서 옮겼다, 첫 그림부터 밝다) */
.nx-hero-compact{background:none!important;color:var(--ink)!important;padding:26px 20px 6px!important;box-sizing:border-box;max-width:1280px;margin:0 auto!important;border:0!important;box-shadow:none!important}
.nx-hero-compact h1,.nx-hero-compact p{color:var(--ink)!important;margin:0!important}
.nx-hero-compact h1{font-size:1.7rem!important;font-weight:800!important;letter-spacing:-.02em}
/* 공용 머리줄 — 로고 없는 도구 화면 맨 위(js/site-fx.js 가 넣는다) */
.n-brandbar{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:#F4F6FA;border-bottom:1px solid var(--line)}
.n-brandbar a{display:inline-flex;align-items:center}
.n-brandbar img{display:block;height:24px;width:auto}
@media print{.n-brandbar{display:none}}

/* ⑥ 부품 한 벌(2026-11-01 대표님 「동일한 디자인 컨셉과 UI, UX … 다 통일된 디자인으로 강제」 · 전 화면 실측: 단추 118가지, 입력칸 65가지, 표 머리 7가지, 첫 제목 20가지).
   값을 고칠 때는 여기만 고친다. 화면 안 <style> 보다 뒤에 실리고 !important 라 화면이 따로 못 바꾼다. ui-audit --cx 가 어긋나면 배포를 막는다.
   뺀 곳: 백오피스(.am-body, 대표님 지시로 나눔콘 모양) · 공개 페이지의 큰 제목·CTA(.pub) · 교육방·무대(이 파일을 안 싣는다) */
:root{--ctl-h:44px;--ctl-h-sm:32px;--ctl-input:40px}
/* 단추 — 주 단추 파랑 44, 보조 흰 바탕 44, 작은 단추 32. 글자 굵기는 700 하나 */
body:not(.am-body) button.btn,body:not(.am-body) button.pbtn,button.btn-calculate,button.st-go,button.sbtn,button.btn-sample,button.btn-example,button.btn-primary,button.btn-secondary,button.ic-btn,button.go{height:auto!important;min-height:var(--ctl-h)!important;padding-top:6px!important;padding-bottom:6px!important;font-size:15px!important;font-weight:700!important;line-height:1.3!important}
body:not(.am-body) button.btn.sm,body:not(.am-body) .btn.sm,button.st-mini-btn{min-height:var(--ctl-h-sm)!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:700!important}
.pub button.pbtn,.pub a.pbtn{min-height:48px!important;font-size:16px!important}
body:not(.am-body):not(.pub) button.btn:not(.sm):not(.ghost):not(.line):not(.sec):not(.danger):not(.amber),button.sbtn.pri,button.sbtn.show{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
body:not(.am-body) .btn.ghost,body:not(.am-body) .btn.line,body:not(.am-body) .btn.sec,button.btn-sample,button.btn-example,button.sbtn:not(.pri):not(.show),button.st-mini-btn{background:#fff!important;border:1px solid var(--line)!important;color:var(--ink)!important}
body:not(.am-body) .btn.ghost:hover,body:not(.am-body) .btn.line:hover,body:not(.am-body) .btn.sec:hover,button.btn-sample:hover,button.btn-example:hover,button.sbtn:not(.pri):not(.show):hover{border-color:var(--brand)!important;color:var(--link)!important}
/* 고른 칩·탭은 파랑 하나(검정·남색으로 갈려 있었다) */
body:not(.am-body):not(.pub) button.on:not([class*="star"]):not(.hd-fab){background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
/* 입력칸 — 흰 바탕 + 선 한 줄 + 높이 40. 코드 입력처럼 큰 글자는 그대로 둔다 */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=file]),select,textarea{background-color:#fff!important;border:1px solid var(--line)!important;box-shadow:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=file]),select{min-height:var(--ctl-input)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--brand)!important;outline:3px solid var(--brand-soft);outline-offset:0}
/* 카드 — 흰 바탕 + 선 한 줄 + 옅은 그림자 + 10px */
.card,.tcard{background-color:#fff!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
/* 표 머리 */
th{background-color:#F4F6FA!important;color:var(--ink-soft)!important;font-size:13px!important;font-weight:700!important}
th span{color:inherit!important;opacity:1!important}
body:not(.am-body):not(.pub) button.on em{color:#fff!important}
.chip[aria-pressed="true"]{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.chip[aria-pressed="true"] .n{background:var(--link)!important;color:#fff!important}
/* 제목 — 화면 제목 24, 카드 제목 18 */
body:not(.pub):not(.am-body) h1,.nx-hero-compact h1{font-size:24px!important;font-weight:800!important;color:var(--ink)!important}
body:not(.pub):not(.am-body) .card>h2,body:not(.pub):not(.am-body) .card h2:first-child,.toolsec>h2{font-size:18px!important;font-weight:800!important;color:var(--ink)!important}
@media(max-width:719px){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=file]),select,textarea{font-size:16px!important}}
/* 화면 폭 — 상단 메뉴가 있는 화면은 어디로 가도 폭이 같다(대표님 2026-11-02 「폭이 확 좁아지네」). 입력 카드는 읽기 좋게 그 안에서 가운데 선다 */
.wrap:has(>.topnav),.wrap:has(>.navskel){max-width:1280px!important}
/* 도구 카드 — 한 묶음 안의 줄 높이를 같게(대표님 2026-11-02 「세로 높이 동일하게」). 폰은 한 줄 한 칸이라 그대로 둔다 */
@media(min-width:720px){.toolcat{grid-auto-rows:1fr}}