/* 나누마이 공통 부품 한 벌(디자인 한 벌 A, 2026-11-01) — 공개 페이지(.pub)와 강사 화면(portal.css?v=171)이 같이 쓴다.
   색은 토큰 이름만 쓴다. 두 사이트의 토큰 이름이 달라(공개 --ink-soft·--surface·--brand-soft / 앱 --soft·--card·--bluebg)
   var(공개, var(앱)) 꼴로 둘 다 받는다. 맨 글자 색은 scripts/brand-tokens-gate.mjs 가 허용 목록과 대조한다.
   접두어 n- 는 portal.css?v=171 의 짧은 전역 클래스(.btn .card .tabs .ds .mg …)와 겹치지 않기 위한 것이다.
   규칙(BRAND.md·NANUMAI-COMMERCIAL-IDEAS §7): 누름 칸 44px 이상 · 본문 16px 이상 · 모션 150~250ms 페이드만 · 강조색은 전기 파랑 하나. */
:root{
  --n-brand:var(--brand,#2E69FC); --n-ink:var(--ink,#1E2340); --n-soft:var(--ink-soft,var(--soft,#5A6078));
  --n-line:var(--line,#E6EAF2); --n-line-strong:var(--line-strong,#C9D0DC); --n-card:var(--surface,var(--card,#F6F8FC));
  --n-tint:var(--brand-soft,var(--bluebg,#E8EFFF)); --n-link:var(--link,#1F55D6); --n-on:var(--on-brand,#FFFFFF);
  --n-ok:var(--ok,#1F7A45); --n-okbg:var(--okbg,#DDEFE3); --n-warn:var(--warn,#9A5A00); --n-warnbg:var(--warnbg,#FFF1DC);
  --n-err:var(--err,#B91C1C); --n-errbg:var(--errbg,#F9DEDE);
  --n-r:12px; --n-dur:200ms; --n-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
/* 글꼴 정책(A-4): 공개 페이지와 강사 화면은 프리텐다드, 교육생 입장·교육방은 시스템 글꼴(첫 그림 속도). 강사 화면 <html> 에 n-work 를 단다. */
html.n-work body{font-family:var(--n-font)}
/* 레이아웃 3모드(A-5): 공개 1040 · 강사 작업 1200 · 교육생 한 손 폭 560. body[data-mode] 로 가른다(기존 .wrap 폭은 건드리지 않는다). */
body[data-mode="pub"] .n-wrap{max-width:1040px}
body[data-mode="work"] .n-wrap{max-width:1200px}
body[data-mode="learn"] .n-wrap{max-width:560px}
.n-wrap{margin:0 auto;padding:0 18px}
/* ① 단추 3단계 — 주(채움)·보조(테두리)·조용(글자만). 44px 이상. */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--n-r);
  background:var(--n-brand);color:var(--n-on);font:inherit;font-weight:800;font-size:1rem;line-height:1.2;text-decoration:none;border:0;cursor:pointer;
  transition:filter var(--n-dur),background var(--n-dur),border-color var(--n-dur);white-space:nowrap}
.n-btn:hover{filter:brightness(1.08);text-decoration:none}
.n-btn:focus-visible{outline:3px solid var(--n-brand);outline-offset:2px}
.n-btn.sec{background:transparent;color:var(--n-ink);border:1.5px solid var(--n-line-strong)}
.n-btn.sec:hover{background:var(--n-tint);filter:none}
.n-btn.quiet{background:transparent;color:var(--n-link);padding:10px 12px}
.n-btn.quiet:hover{background:var(--n-tint);filter:none}
.n-btn.sm{min-height:36px;padding:6px 12px;font-size:.9rem;border-radius:10px}
.n-btn.lg{min-height:52px;padding:12px 22px;font-size:1.05rem}
.n-btn.block{width:100%}
.n-btn:disabled,.n-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.n-btn .ni{width:1.15em;height:1.15em;flex:none}
/* ② 카드 */
.n-card{background:var(--n-card);border:1px solid var(--n-line);border-radius:14px;padding:18px}
.n-card.flat{background:transparent}
a.n-card{display:block;color:inherit;text-decoration:none;transition:border-color var(--n-dur)}
a.n-card:hover{border-color:var(--n-brand);text-decoration:none}
/* ③ 입력 */
.n-in,.n-sel,.n-ta{width:100%;min-height:44px;font:inherit;font-size:1rem;padding:10px 14px;border:1.5px solid var(--n-line);border-radius:var(--n-r);background:var(--n-card);color:var(--n-ink);box-sizing:border-box}
.n-ta{min-height:96px;resize:vertical}
.n-in:focus,.n-sel:focus,.n-ta:focus{outline:none;border-color:var(--n-brand)}
.n-in[aria-invalid="true"],.n-ta[aria-invalid="true"]{border-color:var(--n-err)}
.n-lab{display:block;font-weight:800;font-size:.92rem;color:var(--n-ink);margin:14px 0 6px}
.n-help{font-size:.88rem;color:var(--n-soft);margin-top:4px}
.n-err{font-size:.92rem;color:var(--n-err);margin-top:6px}
/* ④ 배지 — 플랜·상태·준비 중. 글자는 굵게(작은 글자 대비 보정). */
.n-badge{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:800;line-height:1;padding:4px 9px;border-radius:99px;background:var(--n-tint);color:var(--n-link);white-space:nowrap;vertical-align:middle}
.n-badge.ok{background:var(--n-okbg);color:var(--n-ok)}
.n-badge.warn{background:var(--n-warnbg);color:var(--n-warn)}
.n-badge.err{background:var(--n-errbg);color:var(--n-err)}
.n-badge.soon{background:var(--n-line);color:var(--n-soft)}
.n-badge.plan{background:var(--n-ink);color:var(--n-on)}
.n-badge .ni{width:.95em;height:.95em}
/* ⑤ 탭 */
.n-tabs{display:flex;gap:4px;border-bottom:1px solid var(--n-line);overflow-x:auto;scrollbar-width:none}
.n-tabs::-webkit-scrollbar{display:none}
.n-tabs>button,.n-tabs>a{flex:none;min-height:44px;padding:10px 14px;border:0;background:none;font:inherit;font-weight:700;font-size:.98rem;color:var(--n-soft);cursor:pointer;position:relative;text-decoration:none}
.n-tabs>[aria-selected="true"],.n-tabs>.on{color:var(--n-ink)}
.n-tabs>[aria-selected="true"]::after,.n-tabs>.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--n-brand)}
/* ⑥ 모달 */
.n-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:rgba(30,35,64,.45);padding:0;animation:n-fade var(--n-dur) ease-out}
.n-modal>.n-sheet{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--n-card);border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
@media(min-width:720px){.n-modal{align-items:center;padding:24px}.n-modal>.n-sheet{border-radius:18px;padding:24px}}
.n-sheet h2{margin:0 0 10px;font-size:1.2rem}
.n-sheet .n-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
/* ⑦ 토스트 — 한 줄, 아래 가운데, 저절로 사라진다(JS 는 화면마다 있는 것을 쓴다). */
.n-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1100;max-width:min(92vw,520px);background:var(--n-ink);color:var(--n-on);font-weight:700;font-size:.95rem;padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(30,35,64,.25);animation:n-up var(--n-dur) ease-out}
.n-toast.ok{background:var(--n-ok)}.n-toast.err{background:var(--n-err)}
/* ⑧ 빈 상태 — 그림 한 장 + 한 문장 + 단추 하나(§7-97). */
.n-empty{text-align:center;padding:36px 18px;color:var(--n-soft);border:1.5px dashed var(--n-line-strong);border-radius:14px}
.n-empty .ni{width:40px;height:40px;color:var(--n-brand);margin-bottom:10px}
.n-empty img{width:160px;max-width:60%;height:auto;margin:0 auto 12px;display:block}
.n-empty b{display:block;color:var(--n-ink);font-size:1.05rem;margin-bottom:6px}
.n-empty .n-btn{margin-top:14px}
/* ⑨ 스켈레톤 */
.n-skel{display:block;background:linear-gradient(90deg,var(--n-line) 25%,var(--n-tint) 50%,var(--n-line) 75%);background-size:200% 100%;border-radius:8px;min-height:1em;animation:n-shimmer 1.4s linear infinite;color:transparent}
/* ⑩ 표 */
.n-table{width:100%;border-collapse:collapse;font-size:.95rem}
.n-table th,.n-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--n-line);vertical-align:top}
.n-table th{font-weight:800;color:var(--n-ink);background:var(--n-tint)}
.n-table .num{text-align:right;font-variant-numeric:tabular-nums}
/* ⑪ 안내 상자 — 기본·주의·오류. 문장은 「무엇을·왜·어떻게」(§7-99). */
.n-note{background:var(--n-tint);color:var(--n-ink);border-radius:var(--n-r);padding:14px 16px;font-size:.95rem;line-height:1.6}
.n-note.warn{background:var(--n-warnbg)}.n-note.err{background:var(--n-errbg)}.n-note.ok{background:var(--n-okbg)}
/* 아이콘 — n-icons.js 의 svg. 타일(.n-ic)은 이모지 자리였던 네모 칸. 칸 색은 --gc(그룹 색)가 있으면 그것. */
.ni{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.n-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--n-tint);color:var(--n-brand);flex:none}
.n-ic .ni{width:22px;height:22px}
.n-ic.sm{width:32px;height:32px;border-radius:9px}.n-ic.sm .ni{width:17px;height:17px}
.n-ic.lg{width:52px;height:52px;border-radius:14px}.n-ic.lg .ni{width:26px;height:26px}
.n-ic[style*="--gc"]{background:color-mix(in srgb,var(--gc) 12%,#fff);color:var(--gc)}
@supports not (background:color-mix(in srgb,red 10%,#fff)){.n-ic[style*="--gc"]{background:var(--n-tint)}}
/* 모션(§7-104): 150~250ms 페이드만. 현장 화면은 모션 0. */
@keyframes n-fade{from{opacity:0}to{opacity:1}}
@keyframes n-up{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes n-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.n-modal,.n-toast,.n-skel{animation:none}.n-btn,a.n-card{transition:none}}
body[data-mode="learn"] .n-modal,body[data-mode="learn"] .n-toast{animation:none}
/* 접근성(§7-100): 키보드 초점은 어디서나 보인다. */
.n-btn:focus-visible,.n-tabs>*:focus-visible,a.n-card:focus-visible{outline:3px solid var(--n-brand);outline-offset:2px}
.n-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}