/* 크라우니텔 스타일팩 v1 — html[data-crowny-pack="tele"] 스코프 전용
중앙 크라우니디자인.css는 절대 수정하지 않는다. 이 파일은 그 뒤에 로드되어
:root 변수를 재선언(오버라이드)만 한다.
정본: /Users/ef/crowny-fonts/스타일팩/크라우니텔-스타일팩-명세.md
원본 발췌: /Users/ef/crowny-tele/신크라우니텔/web/theme/nt.css
로드 순서:
*/
/* ── 1. 라이트 토큰 — bare :root(스코프 하위)에 전량 최초 정의 ── */
html[data-crowny-pack="tele"]{
/* --- nt-* 정본 (크림 아이보리 x 초콜릿 x 골드) --- */
--nt-bg:#F7F1E4;
--nt-surface:#FFFFFF;
--nt-ink:#3A2A1C;
--nt-ink-strong:#4A2C1A; /* 초콜릿 */
--nt-muted:#6F6250; /* 0930 셸v2: nt.css 와 동일(스타일팩이 더 구체적이라 여기 값이 이긴다) */
--nt-line:#E7DCC7;
--nt-accent:#C9A227; /* 골드 — 채움·테두리 배경 전용 */
--nt-accent-text:#7F611A; /* 0930 셸v2: 금색 글자 */
--nt-on-accent:#2B2018; /* 0930 셸v2: 금색 채움 위 글자 6.56:1 */
--nt-track:#EFE7D6;
--nt-track-alt:#F1EADB;
--nt-danger:#B4462F;
--gold:var(--nt-accent-text); /* 아이콘 스프라이트 호환 별칭 + 물빛 브랜드/링크 글자(0930 셸v2: 글자 대비) */
/* W6: 화면 꾸미기 사용자 토큰 — 기본값은 nt.css와 동일, prefs.js가 인라인 오버라이드 */
--nt-font:'크라우니고딕',system-ui,-apple-system,sans-serif;
--nt-font-size:14px;
--nt-chat-bg:var(--nt-bg);
--nt-bubble-me:#F4E3B2;
--nt-bubble-me-ink:#2B2018;
--nt-bubble-peer:#FFFFFF;
--nt-bubble-peer-ink:#2B2018;
/* --- 상태 배지 4색(현행 nt.css 하드코딩 → 변수화) --- */
--nt-run-bg:#E8F0D8; --nt-run-fg:#5E7A1E;
--nt-done-bg:#E7EFE0; --nt-done-fg:#3E7A3E;
/* --- 스크림 / 그림자 --- */
--nt-scrim:rgba(0,0,0,.42);
--nt-shadow-card:0 1px 3px rgba(58,42,28,.06);
/* --- 라운드 --- */
--nt-r-12:12px; --nt-r-16:16px; --nt-r-20:20px;
--nt-r-pill:999px;
/* --- 높이 --- */
--nt-h-tabbar:60px;
--nt-h-topbar:52px;
--nt-h-input:44px;
--nt-h-field:52px;
--nt-h-cta:54px;
--nt-safe-bottom:env(safe-area-inset-bottom,0px);
/* --- 폰트 크기 스케일 --- */
--nt-fs-11:11px; --nt-fs-12:12px; --nt-fs-13:13px; --nt-fs-14:14px;
--nt-fs-15:15px; --nt-fs-17:17px; --nt-fs-19:19px; --nt-fs-23:23px;
/* --- 간격 스텝 --- */
--nt-sp-1:4px; --nt-sp-2:6px; --nt-sp-3:8px; --nt-sp-4:10px;
--nt-sp-5:12px; --nt-sp-6:16px; --nt-sp-7:22px;
/* --- z-index --- */
--nt-z-tab:40; --nt-z-overlay:40; --nt-z-splash:100; --nt-z-sheet:200;
/* ── 2. 중앙 --crowny-* 재바인딩 (중앙 파일 자체는 무수정, 여기서만 덮음) ── */
--crowny-cream: var(--nt-bg);
--crowny-card: var(--nt-surface);
--crowny-ink: var(--nt-ink);
--crowny-terracotta-deep: var(--nt-ink-strong);
--crowny-mut: var(--nt-muted);
--crowny-line: var(--nt-line);
--crowny-gold: var(--nt-accent);
--crowny-terracotta: var(--nt-danger);
--crowny-radius: var(--nt-r-16);
--crowny-on-accent: var(--nt-on-accent);
--crowny-track: var(--nt-track);
/* ── 3. 타이포 — 크라우니고딕 한글명 우선 + 중앙 영문 패밀리명 폴백 병기 ── */
/* 2026-09-08 화면 꾸미기 글꼴 토큰 소비: 사용자 선택(--nt-font)이 body 글꼴에 실제 반영되도록 파생. (사장님 "폰트 반영 안 됨" 근본=소비처 부재) */
--crowny-sans: var(--nt-font, '크라우니고딕','Crowny Gothic',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif);
}
html[data-crowny-pack="tele"] body{
font-family:var(--crowny-sans);
}
/* ── 4. 다크 재정의 — 어떤 색도 다크 블록 안에서만 최초 정의되지 않는다 ── */
html[data-crowny-pack="tele"][data-theme="dark"]{
--nt-bg:#1E1710;
--nt-surface:#2A2018;
--nt-ink:#EDE2CF;
--nt-ink-strong:#F4E3B2; /* 다크: 초콜릿→샴페인 골드로 역전 */
--nt-muted:#B3A48F; /* 0930 셸v2 */
--nt-line:#3A2E22;
--nt-accent:#D8B84A;
--nt-accent-text:#D8B84A; /* 0930 셸v2 */
--nt-on-accent:#2A2018;
--nt-track:#241C14;
--nt-track-alt:#2E241A;
--nt-danger:#E0705A; /* 대비비 4.5:1 확정(어두운 배경 #1E1710 대비 실측) */
--nt-run-bg:#33421C; --nt-run-fg:#B7D98A; /* 대비 4.5:1+ */
--nt-done-bg:#23402A; --nt-done-fg:#8FCB9B; /* 대비 4.5:1+ */
--nt-scrim:rgba(0,0,0,.55);
--nt-shadow-card:0 1px 3px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
html[data-crowny-pack="tele"]:not([data-theme="light"]){
--nt-bg:#1E1710;
--nt-surface:#2A2018;
--nt-ink:#EDE2CF;
--nt-ink-strong:#F4E3B2;
--nt-muted:#B3A48F;
--nt-line:#3A2E22;
--nt-accent:#D8B84A;
--nt-accent-text:#D8B84A;
--nt-on-accent:#2A2018;
--nt-track:#241C14;
--nt-track-alt:#2E241A;
--nt-danger:#E0705A;
--nt-run-bg:#33421C; --nt-run-fg:#B7D98A;
--nt-done-bg:#23402A; --nt-done-fg:#8FCB9B;
--nt-scrim:rgba(0,0,0,.55);
--nt-shadow-card:0 1px 3px rgba(0,0,0,.35);
}
}
/* ── 5. 굵기 보정 — font-weight 0건. 요소 레벨 font-variation-settings만 사용 ──
중앙 CSS가 body 500 / h1~h6·b·strong·button 800을 이미 깔아둔다.
여기선 600/700이 필요한 클래스만 선언한다(명세 §1.3). */
html[data-crowny-pack="tele"] .nt-topbar,
html[data-crowny-pack="tele"] .nt-card-title,
html[data-crowny-pack="tele"] .nt-clist-name,
html[data-crowny-pack="tele"] .nt-set-field label,
html[data-crowny-pack="tele"] .nt-lv-t,
html[data-crowny-pack="tele"] .nt-submit,
html[data-crowny-pack="tele"] .nt-set-save,
html[data-crowny-pack="tele"] .nt-auth-brand .nt-title,
html[data-crowny-pack="tele"] .nt-msg-sender,
html[data-crowny-pack="tele"] .nt-clist-ava,
html[data-crowny-pack="tele"] .nt-taskpanel-head,
html[data-crowny-pack="tele"] .nt-chip-special,
html[data-crowny-pack="tele"] .nt-confirm-yes,
html[data-crowny-pack="tele"] .nt-task-st,
html[data-crowny-pack="tele"] .nt-collab-friend-name,
html[data-crowny-pack="tele"] .nt-retry,
html[data-crowny-pack="tele"] .nt-set-logout,
html[data-crowny-pack="tele"] .nt-filecard-name{
font-variation-settings:'wght' 600;
}
html[data-crowny-pack="tele"] .nt-wal-asset-bal,
html[data-crowny-pack="tele"] .nt-wal-send-title,
html[data-crowny-pack="tele"] .nt-wal-hist-title,
html[data-crowny-pack="tele"] .nt-sheet-title,
html[data-crowny-pack="tele"] .nt-txcard-amt,
html[data-crowny-pack="tele"] .nt-wal-tx-amt,
html[data-crowny-pack="tele"] .nt-wal-tx-peer{
font-variation-settings:'wght' 700;
}
/* ── 6. 상태 배지 — 하드코딩색 → 변수 치환(명세 §1.1 갭 해소) ── */
html[data-crowny-pack="tele"] .nt-task-run{
background:var(--nt-run-bg); color:var(--nt-run-fg);
}
html[data-crowny-pack="tele"] .nt-task-done{
background:var(--nt-done-bg); color:var(--nt-done-fg);
}
/* ── 7. 스크림 / 그림자 / pill 라운드 — 하드코딩 → 변수 치환 ── */
html[data-crowny-pack="tele"] .nt-sheet-mask{
background:var(--nt-scrim);
}
html[data-crowny-pack="tele"] .nt-card{
box-shadow:var(--nt-shadow-card);
}
html[data-crowny-pack="tele"] .nt-composer input,
html[data-crowny-pack="tele"] .nt-composer button,
html[data-crowny-pack="tele"] .nt-chip,
html[data-crowny-pack="tele"] .nt-tp-refresh,
html[data-crowny-pack="tele"] .nt-tp-new{
border-radius:var(--nt-r-pill);
}