/* np-tokens.css v1 (2026-10-12) — Noplatea 사이트 공용 디자인 토큰 · 부품
   기준: NP Studio v2 (web/v2/studio.css) 의 색·글꼴·모서리. 다크 기본 + 라이트(prefers-color-scheme).
   간격은 4/8px 격자(--s1..--s8), 강조색은 --accent 하나. 외부 글꼴·CDN 없음(CSP 'self').
   사이트마다 복사본을 둔다(account 는 style.css 맨 앞에 합쳐 넣음 — 서버가 정해진 파일만 내보냄).
   부품 이름은 모두 np- 로 시작한다(Starlight 등 다른 CSS 와 부딪히지 않게). */
:root {
  color-scheme: dark;
  --bg: #0f131c;
  --rail: #0b0f17;
  --surface: #161b27;
  --surface-2: #1b2131;
  --surface-3: #232a3c;
  --line: #283043;
  --line-soft: #1e2534;
  --text: #e6e9f0;
  --muted: #9aa3b5;      /* 본문 보조 글자 — 대비 6.3:1 이상(다크·라이트) */
  --faint: #6c7589;      /* 장식 전용(글자에 쓰지 않음) */
  --accent: #7aa2ff;
  --accent-hover: #93b4ff;
  --accent-ink: #0b1226;
  --accent-soft: rgba(122, 162, 255, .14);
  --accent-line: rgba(122, 162, 255, .45);
  --ok: #3cc779;   --ok-soft: rgba(60, 199, 121, .14);
  --warn: #e8ad3f; --warn-soft: rgba(232, 173, 63, .13);
  --err: #f27474;  --err-soft: rgba(242, 116, 116, .13);
  --code: #1f2638;
  --scrim: rgba(4, 7, 14, .62);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --font: "Pretendard Variable", Pretendard, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Hiragino Sans", "Yu Gothic UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "D2Coding", ui-monospace, monospace;
  --fs-xs: 12.5px; --fs-sm: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --r: 12px; --r-sm: 10px; --r-xs: 8px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --ctl-h: 40px;          /* 사이트 폼 단추·입력 높이(터치 44 에 가깝게, Studio 앱은 32) */
  --bar-h: 56px;
  --wrap: 720px;
  --t: 150ms;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f7f8fb; --rail: #eef1f6; --surface: #ffffff; --surface-2: #f3f5f9; --surface-3: #e9edf4;
    --line: #dde2ec; --line-soft: #eceff5; --text: #1d2330; --muted: #535c6c; --faint: #8a92a3;
    /* 라이트 강조색은 Studio(#3b6cf6)보다 한 단계 진하게: 밝은 바탕 위 글자 대비 4.8:1(AA) */
    --accent: #3463e8; --accent-hover: #2a55d4; --accent-ink: #ffffff; --accent-soft: rgba(59, 108, 246, .1); --accent-line: rgba(59, 108, 246, .4);
    --ok: #1a7f45; --ok-soft: rgba(28, 143, 77, .1); --warn: #8f5f06; --warn-soft: rgba(201, 138, 18, .12); --err: #c23434; --err-soft: rgba(207, 61, 61, .1);
    --code: #eef1f6; --scrim: rgba(20, 26, 40, .38);
    --shadow-pop: 0 12px 32px rgba(20, 30, 60, .16), 0 0 0 1px var(--line);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0ms; } }

/* ---------- 바탕 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.np { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: var(--fs-md)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
body.np :where(button, input, select, textarea) { font: inherit; color: inherit; }
body.np a { color: var(--accent); text-underline-offset: 2px; }
body.np a:hover { color: var(--accent-hover); }
body.np :where(input, select, textarea, h1, h2) { scroll-margin-top: 120px; }
body.np :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
body.np [hidden], .np-hide { display: none !important; }
.np-num { font-variant-numeric: tabular-nums; }
.np-muted { color: var(--muted); }
.np-sm { font-size: var(--fs-sm); }
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-skip { position: absolute; left: var(--s2); top: -48px; z-index: 50; background: var(--accent); color: var(--accent-ink) !important; padding: var(--s2) var(--s3); border-radius: var(--r-xs); font-weight: 600; text-decoration: none; }
.np-skip:focus { top: var(--s2); }
body.np code { background: var(--code); padding: 1px 6px; border-radius: 6px; font: 13px/1.4 var(--mono); }

/* ---------- 상단 공통 막대: 상표 · 사이트 이동 · 언어 ---------- */
.np-bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--rail) 92%, transparent); border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); }
.np-bar-in { max-width: calc(var(--wrap) + 2 * var(--s4)); margin: 0 auto; padding: 0 var(--s4); min-height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s4); }
.np-brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text) !important; text-decoration: none; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.np-brand img { width: 24px; height: 24px; border-radius: 6px; }
.np-brand small { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.np-sites { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.np-sites a { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s2); border-radius: var(--r-xs);
  color: var(--muted) !important; text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; transition: color var(--t), background var(--t); }
.np-sites a:hover { color: var(--text) !important; background: var(--surface-2); }
.np-sites a[aria-current="page"] { color: var(--text) !important; font-weight: 600; }
.np-sites a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: -12px; height: 2px; border-radius: 2px; background: var(--accent); }
.np-lang { position: relative; display: inline-flex; align-items: center; flex: none; }
.np-lang svg { position: absolute; left: 9px; pointer-events: none; color: var(--muted); }
.np-lang select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 28px 0 30px; border-radius: var(--r-xs); border: 1px solid var(--line);
  background-color: var(--surface); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 14px center, right 10px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.np-lang select:hover { border-color: var(--accent-line); }
@media (max-width: 760px) {
  .np-bar-in { flex-wrap: wrap; row-gap: 0; padding-top: var(--s2); }
  .np-brand { flex: 1; }
  .np-sites { order: 3; width: calc(100% + 2 * var(--s4)); margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s3); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-soft); min-height: 44px; }
  .np-sites::-webkit-scrollbar { display: none; }
  .np-sites a[aria-current="page"]::after { bottom: -6px; }
}

/* ---------- 본문 틀 ---------- */
.np-main { flex: 1; width: 100%; max-width: calc(var(--wrap) + 2 * var(--s4)); margin: 0 auto; padding: var(--s8) var(--s4) var(--s12); }
.np-head { margin: 0 0 var(--s6); }
.np-head h1 { font-size: var(--fs-2xl); line-height: 1.25; letter-spacing: -.4px; margin: 0 0 var(--s2); font-weight: 700; }
.np-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.np-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s6); margin: 0 0 var(--s4); }
.np-card > h2, .np-card-h { font-size: var(--fs-lg); line-height: 1.35; margin: 0 0 var(--s3); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.np-card-h svg { color: var(--muted); flex: none; }
.np-card p { margin: 0 0 var(--s3); }
.np-card > :last-child { margin-bottom: 0; }
.np-hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
@media (max-width: 480px) { .np-main { padding-top: var(--s6); } .np-card { padding: var(--s4); } .np-head h1 { font-size: var(--fs-xl); } }

/* ---------- 단추 ---------- */
.np-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--ctl-h); padding: 0 var(--s4); border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text) !important; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.np-btn:hover { border-color: var(--accent-line); }
.np-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important; font-weight: 650; }
.np-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.np-btn.ghost { background: transparent; border-color: transparent; color: var(--muted) !important; }
.np-btn.ghost:hover { background: var(--surface-2); color: var(--text) !important; }
.np-btn.danger { color: var(--err) !important; border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.np-btn.sm { min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.np-btn.block { width: 100%; }
.np-btn:disabled, .np-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.np-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: np-spin .8s linear infinite; }
.np-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.np-link:hover { color: var(--accent-hover); }
.np-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
@keyframes np-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-btn[aria-busy="true"]::before { animation-duration: 2.4s; } }

/* ---------- 입력 ---------- */
.np-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s4); min-width: 0; }
.np-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.np-tag { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--s2); line-height: 18px; }
.np-input, body.np .np-field :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%; min-height: var(--ctl-h); padding: var(--s2) var(--s3); border-radius: var(--r-xs); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.4; transition: border-color var(--t), box-shadow var(--t); }
body.np :where(.np-input, .np-field input, .np-field select, .np-field textarea):hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
body.np :where(.np-input, .np-field input, .np-field select, .np-field textarea):focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--r-xs); }
body.np :where(.np-input, .np-field input, .np-field select, .np-field textarea)[aria-invalid="true"] { border-color: var(--err); }
body.np .np-field textarea { resize: vertical; min-height: 88px; }
body.np select.np-input, body.np .np-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-repeat: no-repeat; background-position: right 17px center, right 13px center; background-size: 4px 4px, 4px 4px; }  /* 화살표는 그라디언트(데이터 그림은 account CSP img-src 'self' 에 막힘) */
.np-err { font-size: var(--fs-sm); color: var(--err); margin: 0; }
.np-inline { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: stretch; }
.np-inline > .np-input, .np-inline > input { flex: 1 1 220px; min-width: 0; }
.np-check { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s3) 0; cursor: pointer; font-size: var(--fs-md); }
.np-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }

/* ---------- 알림 · 상태 ---------- */
.np-msg:empty { min-height: 0; margin: 0; }
.np-msg { min-height: 1.5em; margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.np-msg.ok { color: var(--ok); }
.np-msg.bad { color: var(--err); }
.np-note { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); margin: 0 0 var(--s4); font-size: var(--fs-sm); }
.np-note.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.np-note.bad { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.np-note.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.np-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s3); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.np-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.np-badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.np-badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.np-badge.bad { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.np-badge.mute { color: var(--muted); border-color: var(--line); background: var(--surface-2); }
.np-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s8) var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.np-state svg { color: var(--faint); }
.np-skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: np-sh 1.4s ease-in-out infinite; }
@keyframes np-sh { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .np-skel { animation: none; } }

/* ---------- 목록 ---------- */
.np-list { list-style: none; margin: 0; padding: 0; }
.np-list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); min-height: 52px; }
.np-list > li:first-child { border-top: 0; }
.np-list > li.empty { justify-content: center; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 바닥 ---------- */
.np-foot { border-top: 1px solid var(--line-soft); background: var(--rail); color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }
.np-foot-in { max-width: calc(var(--wrap) + 2 * var(--s4)); margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }
.np-foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); font-size: var(--fs-sm); }
.np-foot a { color: var(--muted) !important; }
.np-foot a:hover { color: var(--text) !important; }
.np-foot p { margin: 2px 0; }
.np-site-footer { margin-top: var(--s2); }
.np-site-footer p { margin: 2px 0; }

/* ===== account.noplatea.com 전용 (np-tokens.css 뒤) ===== */
:root { --wrap: 880px; }
.hide { display: none !important; }
.acc h1 { font-size: var(--fs-2xl); line-height: 1.25; letter-spacing: -.4px; margin: 0 0 var(--s2); }
.acc-loading { display: grid; gap: var(--s3); padding: var(--s8) var(--s6); max-width: 420px; margin: var(--s8) auto; }
.acc-loading .w40 { width: 40%; height: 22px; } .acc-loading .w70 { width: 70%; } .acc-loading .w55 { width: 55%; }

/* 로그인 — 가운데 좁은 칸 */
.acc-login { max-width: 420px; margin: var(--s8) auto 0; padding: var(--s8) var(--s6) var(--s6); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); }
.acc-login-mark { color: var(--accent); margin: 0 0 var(--s4); }
.acc-login h1 { font-size: var(--fs-xl); }
.acc-login > .np-hint { margin: 0 0 var(--s6); }
.acc-login .np-field { margin-bottom: var(--s3); }
.acc-login .np-inline .np-btn { flex: none; }
.msg.bad { color: var(--err); }
@media (max-width: 480px) { .acc-login { margin-top: var(--s4); padding: var(--s6) var(--s4) var(--s4); } .acc-login .np-inline .np-btn { flex: 1 1 100%; } }

/* 로그인 뒤 */
.acc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s6); }
.acc-head h1 { margin: 0; }
.who { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.who b { color: var(--text); font-weight: 600; }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.acc-col > .np-card { margin: 0; }
@media (max-width: 760px) { .acc-grid { grid-template-columns: minmax(0, 1fr); } }
.acc-sub { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: var(--s5) 0 var(--s1); }
.acc-gap { margin-top: var(--s3) !important; }

/* 크레딧 — 이 화면의 중심: 큰 숫자 + 이번 지급분 막대 */
.credit { margin: var(--s1) 0 var(--s3); display: flex; align-items: baseline; gap: var(--s2); }
.credit b { font-size: 44px; line-height: 1; font-weight: 750; letter-spacing: -1.2px; }
.neg { color: var(--err) !important; }
.acc-meter { margin: 0 0 var(--s3); }
.acc-meter-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 0 0 6px; }
.acc-meter-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .5s ease; }
.acc-meter.low .acc-meter-bar i { background: var(--warn); }
.acc-ledger > li { min-height: 44px; padding: var(--s2) 0; font-size: var(--fs-sm); }
.acc-ledger > li > span { color: var(--muted); }
.acc-ledger > li > b { font-variant-numeric: tabular-nums; font-weight: 650; }
.acc-ledger > li > b.plus { color: var(--ok); }
.acc-more { margin-top: var(--s4); border-top: 1px solid var(--line-soft); padding-top: var(--s3); }
.acc-more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent); width: fit-content; border-radius: var(--r-xs); }
.acc-more[open] summary { margin-bottom: var(--s2); }

/* 등급 */
.acc-tier-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2) !important; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.feats li { position: relative; padding-left: 24px; font-size: var(--fs-sm); }
.feats li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.feats li.none { padding-left: 0; color: var(--muted); }
.feats li.none::before { display: none; }

/* 기기 */
.devs > li > span { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.devs > li > button { flex: none; min-height: 32px; padding: 0 var(--s3); border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); cursor: pointer; }
.devs > li > button:hover { border-color: color-mix(in srgb, var(--err) 55%, transparent); color: var(--err); }
.devs > li > button:disabled { opacity: .5; cursor: default; }
.devs > li.muted { justify-content: center; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* 바닥 */
.legal { margin: 0 0 var(--s2); }
/* 사업자 정보 아래 링크 줄은 위 언어별 링크와 겹쳐 숨김 */
.np-foot .np-site-footer p:nth-of-type(2):has(a[href*="privacy"]) { display: none; }