/* xn-ui.css — 도구 사이트 공용 디자인 키트 (opt-in)

   쓰는 법: <link rel="stylesheet" href="/static/shared/xn-ui.css?v=3"> 를 넣고
   <body class="xn-app">(어두운 바탕, 포털 계열) 또는 <body class="xn-app xn-app-light">(밝은 바탕).
   모든 규칙이 .xn-app / .xn-app-light 아래에만 걸리므로 이 파일을 링크만 하고 클래스를 안 붙인
   사이트는 아무것도 바뀌지 않는다. 컴포넌트 선택자는 :where() 로 감싸 특이도가 0 이다 —
   사이트 <style> 의 아무 규칙이나 이긴다.

   사이트 개성은 --accent / --accent-2 / --grad 세 개만 덮어쓴다(필요하면 H1 에만 쓸 --font-display).
   공용 조각(_site_guide·_related·_site_foot·_channel)이 읽는 --text·--muted·--border·--card·--accent·--accent2
   를 여기서 정하므로, 밝은 테마에서도 설명·FAQ·관련 도구 글자가 바탕에 묻히지 않는다.
   폰트(Pretendard)는 _site_theme.html 이 이미 불러온다. Tailwind 클래스는 쓰지 않는다. */

/* ── 1. 토큰 ───────────────────────────────────────────── */
:where(.xn-app, .xn-app-light) {
  --bg: #0b0d17; --surface: #11141f; --surface-2: #171b29; --card: var(--surface);
  --border: #242a3d; --border-strong: #343c55;
  --text: #eef0f6; --text-sub: #c3c8d6; --muted: #8f96ab; --faint: #848ba1;
  --accent: #6366f1; --accent-2: #a855f7; --accent2: var(--accent-2); --accent-3: #38bdf8;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --on-accent: #fff;
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --up: #f04452; --down: #3182f6;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --fs-cap: 12px; --fs-sm: 13px; --fs-body: 15px; --fs-lg: 17px; --fs-h2: 20px;
  --fs-h1: clamp(24px, 5.2vw, 32px); --fs-num: clamp(28px, 7vw, 44px);
  --font: "Pretendard", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Pretendard", ui-monospace, "SF Mono", monospace;
  --font-display: var(--font);
  --tap: 44px; --ring: 0 0 0 3px rgba(99, 102, 241, .35);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aab0c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :where(.xn-app, .xn-app-light) { --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); }
}
.xn-app-light {
  --bg: #f6f7fb; --surface: #fff; --surface-2: #f1f3f8; --card: var(--surface);
  --border: #e2e6ef; --border-strong: #cfd5e2;
  --text: #111827; --text-sub: #374151; --muted: #5b6474; --faint: #6b7280;
  --shadow: 0 8px 24px -14px rgba(15, 23, 42, .28);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23525b6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ── 2. 바탕 ─────────────────────────────────────────────
   wrapper(보통 body) 자체에 바탕·글자·글꼴을 준다. */
:where(.xn-app, .xn-app-light) {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
:where(.xn-app, .xn-app-light) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.xn-app, .xn-app-light) :where(h1, h2, h3) { letter-spacing: -.02em; line-height: 1.3; }
:where(.xn-app, .xn-app-light) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.xn-app, .xn-app-light) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--ring); }

/* 본문 폭. 한 칸 도구 = .xn-wrap, 두 칸 = .xn-wrap.xn-wrap--wide + .xn-layout */
:where(.xn-app, .xn-app-light) :where(.xn-wrap) { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); }
:where(.xn-app, .xn-app-light) :where(.xn-wrap--wide) { max-width: 1080px; }

/* ── 3. 히어로 ─────────────────────────────────────────── */
:where(.xn-app, .xn-app-light) :where(.xn-hero) { text-align: center; margin: var(--sp-2) 0 var(--sp-5); }
:where(.xn-app, .xn-app-light) :where(.xn-hero__icon) {
  width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1;
  background: var(--grad); color: var(--on-accent); box-shadow: 0 10px 24px -10px var(--accent);
}
:where(.xn-app, .xn-app-light) :where(.xn-hero__title, .xn-hero h1) {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; margin: 0; color: var(--text);
}
:where(.xn-app, .xn-app-light) :where(.xn-hero__sub) { margin: var(--sp-2) auto 0; max-width: 34em; font-size: 14px; color: var(--text-sub); }
:where(.xn-app, .xn-app-light) :where(.xn-hero__badge) {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); padding: 5px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-cap); font-weight: 700; color: var(--text-sub);
}

/* ── 4. 카드 ───────────────────────────────────────────── */
:where(.xn-app, .xn-app-light) :where(.xn-card) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--shadow);
}
:where(.xn-app, .xn-app-light) :where(.xn-card + .xn-card) { margin-top: var(--sp-4); }
:where(.xn-app, .xn-app-light) :where(.xn-card--inset) { background: var(--surface-2); box-shadow: none; }
:where(.xn-app, .xn-app-light) :where(.xn-card__title) { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 var(--sp-3); color: var(--text); }
@media (min-width: 600px) { :where(.xn-app, .xn-app-light) :where(.xn-card) { padding: 20px; } }

/* ── 5. 입력 ───────────────────────────────────────────── */
:where(.xn-app, .xn-app-light) :where(.xn-field) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(.xn-app, .xn-app-light) :where(.xn-field + .xn-field) { margin-top: var(--sp-3); }
:where(.xn-app, .xn-app-light) :where(.xn-field > label, .xn-label) { font-size: var(--fs-cap); font-weight: 700; color: var(--muted); }
:where(.xn-app, .xn-app-light) :where(.xn-hint) { font-size: var(--fs-cap); color: var(--muted); }
:where(.xn-app, .xn-app-light) :where(.xn-fields) { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
:where(.xn-app, .xn-app-light) :where(.xn-fields) > :where(.xn-field + .xn-field) { margin-top: 0; }

:where(.xn-app, .xn-app-light) :where(.xn-input, .xn-select, .xn-textarea) {
  width: 100%; min-height: var(--tap); padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font); font-size: 16px; /* 16px 미만이면 iOS 가 확대한다 */
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.xn-app, .xn-app-light) :where(.xn-input, .xn-select, .xn-textarea)::placeholder { color: var(--faint); }
:where(.xn-app, .xn-app-light) :where(.xn-input, .xn-select, .xn-textarea):hover { border-color: var(--border-strong); }
:where(.xn-app, .xn-app-light) :where(.xn-input, .xn-select, .xn-textarea):focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
:where(.xn-app, .xn-app-light) :where(.xn-textarea) { min-height: 120px; resize: vertical; line-height: 1.55; }
:where(.xn-app, .xn-app-light) :where(.xn-select) {
  -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center;
}
:where(.xn-app, .xn-app-light) :where(input[type=date].xn-input, input[type=time].xn-input) { -webkit-appearance: none; appearance: none; }
/* 단위 붙은 입력: <div class="xn-input-wrap"><input class="xn-input"><span class="xn-unit">원</span></div> */
:where(.xn-app, .xn-app-light) :where(.xn-input-wrap) { position: relative; }
:where(.xn-app, .xn-app-light) :where(.xn-input-wrap > .xn-input) { padding-right: 48px; }
:where(.xn-app, .xn-app-light) :where(.xn-unit) {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 600; color: var(--muted); pointer-events: none;
}

/* ── 6. 버튼 ─────────────────────────────────────────────
   한 화면에 주 버튼(.xn-btn) 하나. 나머지는 --ghost. */
:where(.xn-app, .xn-app-light) :where(.xn-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--r-md);
  background: var(--grad); color: var(--on-accent); font-size: var(--fs-body); font-weight: 700;
  text-decoration: none; cursor: pointer; user-select: none;
  box-shadow: 0 10px 22px -12px var(--accent); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
:where(.xn-app, .xn-app-light) :where(.xn-btn):hover { filter: brightness(1.06); box-shadow: 0 14px 26px -12px var(--accent); }
:where(.xn-app, .xn-app-light) :where(.xn-btn):active { transform: translateY(1px); }
:where(.xn-app, .xn-app-light) :where(.xn-btn):disabled, :where(.xn-app, .xn-app-light) :where(.xn-btn[aria-disabled=true]) { opacity: .5; cursor: not-allowed; box-shadow: none; }
:where(.xn-app, .xn-app-light) :where(.xn-btn--block) { display: flex; width: 100%; }
:where(.xn-app, .xn-app-light) :where(.xn-btn--ghost) { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
:where(.xn-app, .xn-app-light) :where(.xn-btn--ghost):hover { border-color: var(--accent); filter: none; box-shadow: none; }
:where(.xn-app, .xn-app-light) :where(.xn-btn--sm) { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: var(--r-sm); }
:where(.xn-app, .xn-app-light) :where(.xn-btns) { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
:where(.xn-app, .xn-app-light) :where(.xn-btns > .xn-btn) { flex: 1 1 140px; }

/* ── 7. 세그먼트(탭·단위 고르기) ─────────────────────────
   <div class="xn-seg" role="group"><button aria-pressed="true">월</button><button>년</button></div>
   켜진 칸: aria-pressed="true" | aria-selected="true" | .is-active. 넘치면 가로로 밀린다. */
:where(.xn-app, .xn-app-light) :where(.xn-seg) {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
:where(.xn-app, .xn-app-light) :where(.xn-seg)::-webkit-scrollbar { display: none; }
:where(.xn-app, .xn-app-light) :where(.xn-seg > button, .xn-seg > a, .xn-seg > label) {
  flex: 1 0 auto; min-height: calc(var(--tap) - 8px); padding: 6px 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-sub); font-size: 14px; font-weight: 700; white-space: nowrap;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
:where(.xn-app, .xn-app-light) :where(.xn-seg > :hover) { color: var(--text); }
:where(.xn-app, .xn-app-light) :where(.xn-seg > [aria-pressed=true], .xn-seg > [aria-selected=true], .xn-seg > .is-active) {
  background: var(--accent); color: var(--on-accent);
}

/* ── 8. 숫자 타일 ─────────────────────────────────────────
   <div class="xn-stats"><div class="xn-stat"><span class="xn-stat__label">월 실수령</span>
   <b class="xn-stat__value">2,840,000</b><span class="xn-stat__delta up">+3.2%</span></div></div> */
:where(.xn-app, .xn-app-light) :where(.xn-stats) { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
:where(.xn-app, .xn-app-light) :where(.xn-stat) {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
:where(.xn-app, .xn-app-light) :where(.xn-stat__label) { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }
:where(.xn-app, .xn-app-light) :where(.xn-stat__value) {
  font-family: var(--font-num); font-size: clamp(22px, 5vw, 28px); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere;
}
:where(.xn-app, .xn-app-light) :where(.xn-stat__delta) {
  align-self: flex-start; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-cap); font-weight: 700;
  background: var(--surface); color: var(--muted); font-variant-numeric: tabular-nums;
}
:where(.xn-app, .xn-app-light) :where(.xn-stat__delta.up, .xn-up) { color: var(--up); }
:where(.xn-app, .xn-app-light) :where(.xn-stat__delta.down, .xn-down) { color: var(--down); }

/* ── 9. 결과 패널(계산기의 답) ───────────────────────────
   <div class="xn-result" aria-live="polite"><div class="xn-result__label">실수령액</div>
   <div class="xn-result__value">2,840,000<small>원</small></div><div class="xn-result__sub">…</div></div> */
:where(.xn-app, .xn-app-light) :where(.xn-result) {
  position: relative; overflow: hidden; padding: 18px 18px 18px 21px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
:where(.xn-app, .xn-app-light) :where(.xn-result)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
:where(.xn-app, .xn-app-light) :where(.xn-result__label) { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
:where(.xn-app, .xn-app-light) :where(.xn-result__value) {
  margin-top: 4px; font-family: var(--font-num); font-size: var(--fs-num); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere;
}
:where(.xn-app, .xn-app-light) :where(.xn-result__value small) { margin-left: 4px; font-size: .45em; font-weight: 700; color: var(--text-sub); }
:where(.xn-app, .xn-app-light) :where(.xn-result__sub) { margin-top: 8px; font-size: 14px; color: var(--text-sub); }
:where(.xn-app, .xn-app-light) :where(.xn-result + .xn-stats, .xn-result + .xn-card) { margin-top: var(--sp-3); }

/* ── 10. 두 칸 배치 ───────────────────────────────────────
   960px 이상에서 입력(왼쪽, 320~420px) | 결과·그림(오른쪽). 그 아래는 한 칸.
   <main class="xn-wrap xn-wrap--wide"><div class="xn-layout"><section>입력</section><section>결과</section></div></main> */
:where(.xn-app, .xn-app-light) :where(.xn-layout) { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  :where(.xn-app, .xn-app-light) :where(.xn-layout) { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  :where(.xn-app, .xn-app-light) :where(.xn-layout > .xn-sticky) { position: sticky; top: 72px; }
}
:where(.xn-app, .xn-app-light) :where(.xn-layout > *) { min-width: 0; }

/* ── 11. 칩(프리셋·태그) ───────────────────────────────── */
:where(.xn-app, .xn-app-light) :where(.xn-chips) { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
:where(.xn-app, .xn-app-light) :where(.xn-chips--scroll) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
:where(.xn-app, .xn-app-light) :where(.xn-chips--scroll)::-webkit-scrollbar { display: none; }
:where(.xn-app, .xn-app-light) :where(.xn-chip) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-sub); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
:where(.xn-app, .xn-app-light) :where(.xn-chip):hover { border-color: var(--accent); color: var(--text); }
:where(.xn-app, .xn-app-light) :where(.xn-chip[aria-pressed=true], .xn-chip.is-active) { background: var(--accent); border-color: transparent; color: var(--on-accent); }

/* ── 12. 글·보조 ───────────────────────────────────────── */
:where(.xn-app, .xn-app-light) :where(.xn-h2) { font-size: var(--fs-h2); font-weight: 800; margin: var(--sp-5) 0 var(--sp-3); color: var(--text); }
:where(.xn-app, .xn-app-light) :where(.xn-muted) { color: var(--muted); }
:where(.xn-app, .xn-app-light) :where(.xn-note) { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-top: var(--sp-3); }
:where(.xn-app, .xn-app-light) :where(.xn-divider) { height: 1px; border: 0; background: var(--border); margin: var(--sp-4) 0; }
:where(.xn-app, .xn-app-light) :where(.xn-row) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
:where(.xn-app, .xn-app-light) :where(.xn-num) { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :where(.xn-app, .xn-app-light) :where(.xn-btn, .xn-chip, .xn-seg > *, .xn-input, .xn-select, .xn-textarea) { transition: none; }
}