/* XIUSoft shared UI (design: claude.ai/design "XIUSoft" project). Design tokens + components used by home, livessh
   and account. 각 쪽 head 가 사이트 site.css 보다 먼저 <link> 로 건다(build.sh 가 사이트 맨 위에 복사, 보송은 생성기가 복사).
   Theme: <html data-theme="light|dark"> is set by theme.js (system / light / dark preference, cookie on .xiu.kr).
   Without JS the system preference applies through prefers-color-scheme. */
/* 색 체계: 2026-10 리디자인(claude.ai/design "보송 사이트 리디자인 방향"). 라이트 = 하늘빛 바탕(#eef4ff)·코발트(#1f46a1)·노랑(#ffd36b),
   다크 = 깊은 남색(#0f1f4a). 이름(--xs-*)은 그대로 두고 값만 바꿔 모든 사이트가 같이 따라온다.
   새 변수: --xs-sky(밝은 하늘색 강조), --xs-cobalt2(코발트 hover), --xs-cobalt-deep(진한 코발트 원), --xs-wm1/--xs-wm2(바닥글 워터마크
   그라데이션), --xs-sun-ink(바탕 위 노랑 아이콘: 라이트에서는 대비를 위해 진한 황토색), --xs-shadow(떠 있는 메뉴 그림자). */
:root {
  --xs-bg: #0f1f4a; --xs-bg-deep: #0b1839; --xs-panel: #162960; --xs-soft: #1f3573;
  --xs-line: #26407f; --xs-line-strong: #3a56a0;
  --xs-text: #e8eefc; --xs-head: #fff; --xs-muted: #a9bbe6; --xs-body: #c6d3f2;
  --xs-hl: #ffd36b; --xs-hl2: #ffc24a; --xs-mark: transparent; --xs-link: #8fb8ff;
  --xs-glow: rgba(143, 184, 255, .35); --xs-navbg: #e8eefc; --xs-navfg: #0f1f4a; --xs-dots: #26407f; --xs-hdr: rgba(15, 31, 74, .86);
  --xs-accent: var(--xs-link); --xs-accent-hover: var(--xs-hl); --xs-on-accent: #0f1f4a; --xs-focus: #ffd36b;
  --xs-wm1: #8fb8ff; --xs-wm2: #fff; --xs-sun-ink: #ffd36b; --xs-shadow: rgba(3, 10, 30, .55);
  /* brand colors: the same in both themes */
  --xs-ink: #0b1a3f; --xs-cobalt: #1f46a1; --xs-cobalt2: #2b5bc4; --xs-cobalt-deep: #173a8a; --xs-sky: #8fb8ff; --xs-purple: #4021a5;
  --xs-sun: #ffd36b; --xs-sun2: #ffc24a; --xs-cream: #fbf6ea;
  --xs-ok: #1f9d55; --xs-bad: #d9534f;
  --xs-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", system-ui, sans-serif;
  --xs-font-display: var(--xs-font);
  --xs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --xs-max: 1200px; --xs-gutter: 24px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --xs-bg: #eef4ff; --xs-bg-deep: #e3ecff; --xs-panel: #fff; --xs-soft: #dbe7ff;
  --xs-line: #c9d8f5; --xs-line-strong: #a9c1ee;
  --xs-text: #0b1a3f; --xs-head: #0b1a3f; --xs-muted: #4a5d88; --xs-body: #3b4c74;
  --xs-hl: #1f46a1; --xs-hl2: #2b5bc4; --xs-mark: #ffd36b; --xs-link: #1f46a1;
  --xs-glow: rgba(31, 70, 161, .18); --xs-navbg: #0b1a3f; --xs-navfg: #fff; --xs-dots: #c9d8f5; --xs-hdr: rgba(238, 244, 255, .86);
  --xs-on-accent: #fff; --xs-focus: #1f46a1;
  --xs-wm1: #1f46a1; --xs-wm2: #8fb8ff; --xs-sun-ink: #a87600; --xs-shadow: rgba(11, 26, 63, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --xs-bg: #eef4ff; --xs-bg-deep: #e3ecff; --xs-panel: #fff; --xs-soft: #dbe7ff;
    --xs-line: #c9d8f5; --xs-line-strong: #a9c1ee;
    --xs-text: #0b1a3f; --xs-head: #0b1a3f; --xs-muted: #4a5d88; --xs-body: #3b4c74;
    --xs-hl: #1f46a1; --xs-hl2: #2b5bc4; --xs-mark: #ffd36b; --xs-link: #1f46a1;
    --xs-glow: rgba(31, 70, 161, .18); --xs-navbg: #0b1a3f; --xs-navfg: #fff; --xs-dots: #c9d8f5; --xs-hdr: rgba(238, 244, 255, .86);
    --xs-on-accent: #fff; --xs-focus: #1f46a1;
    --xs-wm1: #1f46a1; --xs-wm2: #8fb8ff; --xs-sun-ink: #a87600; --xs-shadow: rgba(11, 26, 63, .35);
    color-scheme: light;
  }
}

/* No sideways scroll on phones: iOS Safari ignores overflow-x on <html> alone, so the body clips too (decorative
   glows and mascots that reach past the edge are still drawn up to the edge). */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-x: clip; }

/* Korean breaks between words (keep-all); Japanese and Chinese must keep breaking between characters. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

/* ---- page container: the one content width for every XIUSoft site ---- */
.xs-wrap { width: 100%; max-width: var(--xs-max); margin: 0 auto; padding: 0 var(--xs-gutter); box-sizing: border-box; }
@media (max-width: 560px) { :root { --xs-gutter: 18px; } }

/* ---- buttons, chips, eyebrow, dotted background: shared by every page ---- */
.xs-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 800 16px/1.2 var(--xs-font); text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s, border-color .2s; }
.xs-btn:hover { transform: translateY(-2px); }
.xs-btn-sun { background: var(--xs-sun); color: var(--xs-ink); }
.xs-btn-sun:hover { background: var(--xs-sun2); color: var(--xs-ink); }
.xs-btn-line { border-color: var(--xs-line-strong); color: var(--xs-text); font-weight: 700; }
.xs-btn-line:hover { border-color: var(--xs-hl); color: var(--xs-text); }
.xs-chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--xs-line-strong); border-radius: 999px; padding: 5px 11px;
  font-size: 13px; font-weight: 700; line-height: 1.3; }
.xs-eyebrow { font-size: 14px; font-weight: 700; color: var(--xs-link); }
.xs-dots { position: relative; }
.xs-dots::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--xs-dots) 1.2px, transparent 1.2px); background-size: 28px 28px; }
.xs-dots > * { position: relative; }

@keyframes xs-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes xs-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes xs-blink { 50% { opacity: 0; } }
@keyframes xs-rise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes xs-pop { 0% { opacity: 0; transform: translateY(-18px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes xs-fadein { 0% { opacity: 0; transform: scale(.98); } 100% { opacity: 1; transform: none; } }
.xs-bob { animation: xs-bob 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .xs-bob, .xs-btn, [class*="xs-"] { animation: none !important; transition: none !important; }
  .xs-btn:hover { transform: none; }
}

/* ---- global header: identical on every XIUSoft site (tools/chrome.py, account js/views.js) ----
   2026-10 리디자인: 로고 | 홈·문의·제품 ▼(드롭다운) | 파란 계정 버튼·언어·테마(둥근 아이콘)·햄버거(좁은 화면).
   드롭다운: hover(마우스) 또는 버튼 클릭/Enter(aria-expanded, shared/js/theme.js)로 열린다. */
.xs-top { position: sticky; top: 0; z-index: 30; background: var(--xs-hdr); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--xs-line); font-family: var(--xs-font); transition: background-color .4s, border-color .4s; }
.xs-top a, .xs-foot a { text-decoration: none; }
.xs-bar { display: flex; align-items: center; gap: 12px 24px; flex-wrap: nowrap; padding-block: 12px; }
.xs-brand { display: flex; align-items: center; gap: 10px; color: var(--xs-head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; flex: none; }
.xs-brand:hover { color: var(--xs-head); }
.xs-brand img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; display: block; }
.xs-sites > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.xs-sites > ul > li > a, .xs-prod-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 999px; background: none;
  color: var(--xs-muted); font: 700 15px/1.3 var(--xs-font); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
.xs-prod-btn { padding-inline-end: 14px; }
.xs-sites > ul > li > a:hover, .xs-prod-btn:hover, .xs-prod-btn[aria-expanded="true"] { color: var(--xs-text); background: var(--xs-soft); }
.xs-sites > ul > li > a:hover { transform: translateY(-1px); }
.xs-sites > ul > li > a[aria-current], .xs-prod-btn.is-current { background: var(--xs-navbg); color: var(--xs-navfg); }
.xs-sites > ul > li > a[aria-current]:hover { transform: none; }
.xs-prod { position: relative; }
.xs-prod-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none;
  display: none; flex-direction: column; min-width: 220px; background: var(--xs-panel); border: 1px solid var(--xs-line); border-radius: 16px;
  box-shadow: 0 20px 40px -12px var(--xs-shadow); animation: xs-rise .18s ease-out; }
/* 마우스를 버튼에서 메뉴로 옮기는 동안 닫히지 않게 위쪽 6px 틈을 덮는다 */
.xs-prod-menu::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }
.xs-prod-btn[aria-expanded="true"] + .xs-prod-menu { display: flex; }
@media (hover: hover) { .xs-prod:hover > .xs-prod-menu { display: flex; } }
.xs-prod-menu a, .xs-mnav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--xs-text);
  font-size: 15px; font-weight: 600; line-height: 1.3; }
.xs-prod-menu a:hover, .xs-mnav a:hover { background: var(--xs-soft); color: var(--xs-text); }
.xs-prod-menu a[aria-current], .xs-mnav a[aria-current] { background: var(--xs-soft); font-weight: 800; }
.xs-prod-menu img, .xs-mnav img { width: 24px; height: 24px; border-radius: 7px; flex: none; }
.xs-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* pill control: account button, language summary, theme button */
.xs-pill, details.lang > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--xs-line-strong); border-radius: 999px; background: transparent; color: var(--xs-text); list-style: none;
  font-family: var(--xs-font); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
details.lang > summary::-webkit-details-marker { display: none; }
.xs-pill:hover, details.lang > summary:hover, details.lang[open] > summary { background: var(--xs-soft); color: var(--xs-text); transform: translateY(-1px); }
/* 계정: 코발트로 채운 버튼(두 테마 같음, 흰 글자 대비 9:1) */
.xs-acct { padding: 0 16px 0 12px; border-color: var(--xs-cobalt); background: var(--xs-cobalt); color: #fff; font-weight: 800;
  box-shadow: 0 6px 16px rgba(31, 70, 161, .28); }
.xs-acct:hover, .xs-acct[aria-current]:hover { background: var(--xs-cobalt2); border-color: var(--xs-cobalt2); color: #fff; box-shadow: 0 10px 22px rgba(31, 70, 161, .35); }
.xs-acct[aria-current] { background: var(--xs-cobalt); border-color: var(--xs-cobalt); color: #fff; }
.xs-acct svg, .xs-mnav-acct svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xs-lang-mark { font-size: 12px; font-weight: 800; color: var(--xs-muted); }
.xs-caret::before { content: "▼"; font-size: 10px; color: var(--xs-muted); }
.xs-prod-btn.is-current .xs-caret::before { color: currentColor; }
/* 테마: 40×40 둥근 아이콘 버튼. 이름은 aria-label/title(theme.js)로 알린다. */
.xs-theme { width: 40px; padding: 0; justify-content: center; color: var(--xs-sun-ink); }
.xs-theme:hover { color: var(--xs-sun-ink); transform: translateY(-1px) rotate(15deg); }
.xs-theme-mode { display: none; align-items: center; }
.xs-theme-mode > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.xs-theme svg, details.lang > summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme-pref]) .xs-theme-mode[data-mode="system"], :root[data-theme-pref="system"] .xs-theme-mode[data-mode="system"],
:root[data-theme-pref="light"] .xs-theme-mode[data-mode="light"], :root[data-theme-pref="dark"] .xs-theme-mode[data-mode="dark"] { display: inline-flex; }
/* 햄버거: 좁은 화면에서만 */
.xs-burger { display: none; width: 40px; padding: 0; flex-direction: column; justify-content: center; gap: 5px; }
.xs-burger > span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.xs-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.xs-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.xs-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.xs-pill:focus-visible, details.lang > summary:focus-visible, .xs-top a:focus-visible, .xs-foot a:focus-visible, .xs-btn:focus-visible,
.xs-prod-btn:focus-visible, .xs-badge:focus-visible { outline: 3px solid var(--xs-focus); outline-offset: 2px; }
.xs-prod-menu a:focus-visible, .xs-mnav a:focus-visible { outline-offset: -2px; }

/* 좁은 화면 세로 메뉴: <nav class="xs-mnav" hidden> (theme.js 가 hidden 을 켜고 끈다) */
.xs-mnav { border-top: 1px solid var(--xs-line); background: var(--xs-panel); animation: xs-rise .2s ease-out; }
.xs-mnav[hidden] { display: none; }
.xs-mnav ul { list-style: none; margin: 0 auto; max-width: var(--xs-max); padding: 8px 16px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; }
.xs-mnav a { padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.xs-mnav a.xs-mnav-acct { color: var(--xs-link); font-weight: 800; }
.xs-mnav-head { padding: 14px 12px 6px; font-size: 12px; font-weight: 800; color: var(--xs-link); letter-spacing: .04em; }
.xs-mnav-head ~ li a { padding-block: 10px; font-weight: 600; }

/* language menu: <details class="lang"><summary>…</summary><ul><li><a|button>…</li></ul></details> */
details.lang { position: relative; }
details.lang > ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; margin: 0; padding: 6px; list-style: none;
  display: flex; flex-direction: column; min-width: 200px; background: var(--xs-panel); border: 1px solid var(--xs-line); border-radius: 16px;
  box-shadow: 0 20px 40px -12px var(--xs-shadow); font-family: var(--xs-font); font-size: 15px; line-height: 1.4; }
details.lang > ul li { margin: 0; padding: 0; }
details.lang > ul a, details.lang > ul button { display: flex; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box;
  text-align: start; padding: 9px 14px; border: 0; border-radius: 10px; background: none; color: var(--xs-text); font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer; }
details.lang > ul a:hover, details.lang > ul button:hover { background: var(--xs-soft); color: var(--xs-text); }
details.lang > ul [aria-current] { background: var(--xs-soft); font-weight: 700; }
details.lang > ul [aria-current]::after { content: "✓"; color: var(--xs-hl); }
details.lang > ul a:focus-visible, details.lang > ul button:focus-visible { outline: 2px solid var(--xs-focus); outline-offset: -2px; }

/* product sub menu (second header row on livessh, bosong and tapcaster pages) */
.xs-sub { border-top: 1px solid var(--xs-line); }
.xs-sub .xs-wrap { display: flex; align-items: center; gap: 4px 18px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.xs-sub-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--xs-head); white-space: nowrap; }
.xs-sub-title img { width: 24px; height: 24px; border-radius: 7px; }
.xs-sub ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.xs-sub a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--xs-muted); font-size: 14px; white-space: nowrap; }
.xs-sub a:hover, .xs-sub a[aria-current] { background: var(--xs-soft); color: var(--xs-text); }
.xs-sub-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }  /* bosong: the page's own controls (sound) */
@media (max-width: 720px) {
  .xs-sites, .xs-acct { display: none; }
  .xs-burger { display: inline-flex; }
  /* 언어 버튼은 "A文 ▼"만 */
  .xs-tools details.lang > summary > span:not(.xs-lang-mark):not(.xs-caret) { display: none; }
  .xs-tools details.lang > summary { padding: 0 12px; }
}
/* 320px 같은 아주 좁은 폭: 로고와 도구 버튼 셋이 한 줄에 들어가도록 사이를 좁힌다(안 하면 햄버거가 오른쪽 끝에 붙어 잘림) */
@media (max-width: 360px) {
  .xs-bar { column-gap: 8px; }
  .xs-tools { gap: 4px; }
  .xs-tools details.lang > summary { padding: 0 8px; }
}
@media (min-width: 721px) { .xs-mnav { display: none; } }

/* ---- 공식 스토어 배지 (shared/brand/badges/README.md) ----
   <div class="xs-badges"><a class="xs-badge xs-badge-apple" href="…"><img src="/assets/badges/apple/ko.svg" …></a>…</div>
   보이는 배지 높이는 모두 40px(가이드 최소 크기 이상). Google PNG 는 위아래 투명 여백(23%)이 있어 52px 로 그리고 여백만큼 겹친다. */
.xs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }  /* Apple: 둘레 여백 ≥ 배지 높이의 1/4 (40px → 10px) */
.xs-badge { display: inline-flex; border-radius: 8px; line-height: 0; transition: transform .15s; }
.xs-badge:hover { transform: translateY(-1px); }
.xs-badge img { display: block; height: 40px; width: auto; }
.xs-badge-google img { height: 52px; margin: -6px -2px; }

/* ---- global footer (2026-10 리디자인): 로고+소개 | 사이트 | 제품 | 정책 | 회사 정보, 아래 줄 ©·워터마크·마스코트 ---- */
.xs-foot { position: relative; overflow: hidden; margin-top: auto; background: var(--xs-bg-deep); border-top: 1px solid var(--xs-line);
  color: var(--xs-muted); font-family: var(--xs-font); font-size: 14px; line-height: 1.75; transition: background-color .4s; }
.xs-foot > .xs-wrap { display: flex; flex-direction: column; gap: 40px; padding-top: 56px; }
.xs-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.xs-foot-grid b { display: block; color: var(--xs-link); font-size: 13px; margin-bottom: 6px; }
.xs-foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.xs-foot-grid a { color: var(--xs-text); }
.xs-foot-grid a:hover { color: var(--xs-link); }
.xs-foot-brand { display: flex; flex-direction: column; gap: 12px; }
.xs-foot-brand .xs-brand { font-size: 19px; }
.xs-foot-brand .xs-brand img { width: 34px; height: 34px; border-radius: 10px; }
.xs-foot-brand p { margin: 0; max-width: 24ch; }
.xs-foot-company { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.xs-foot-bottom { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 150px;
  border-top: 1px solid var(--xs-line); padding-top: 16px; }
.xs-foot-bottom > span:not(.xs-wordmark) { position: relative; align-self: flex-start; }
.xs-wordmark { position: absolute; left: -6px; bottom: -34px; font-size: clamp(90px, 17vw, 210px); font-weight: 900; letter-spacing: -.06em; line-height: 1;
  background: linear-gradient(90deg, var(--xs-wm1), var(--xs-wm2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .22; user-select: none; pointer-events: none; }
.xs-foot-mascot { position: relative; width: 180px; height: auto; margin: 0 -10px -40px 0; }
@media (max-width: 560px) { .xs-foot-mascot { width: 130px; } .xs-foot-bottom { min-height: 120px; } }
@media print { .xs-top, .xs-foot-mascot, .xs-wordmark { display: none; } }

/* ---- language hint bar (shared/js/lang-hint.js) ---- */
/* 언어 안내는 화면 아래에 떠 있는 알림으로 띄운다: 문서 흐름에 끼어들면 첫 방문자 화면 전체가 아래로 밀린다(CLS). */
.xs-langhint { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--xs-gutter, 16px)); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 8px 8px 16px; font-family: var(--xs-font);
  background: var(--xs-soft); color: var(--xs-text); border: 1px solid var(--xs-line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 31, 74, .18); font-size: .92rem; line-height: 1.4; }
.xs-langhint a { color: var(--xs-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.xs-langhint a:hover { color: var(--xs-hl); }
.xs-langhint-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--xs-muted); cursor: pointer; flex: none; }
.xs-langhint-x:hover { background: var(--xs-panel); color: var(--xs-text); }
.xs-langhint a:focus-visible, .xs-langhint-x:focus-visible { outline: 3px solid var(--xs-focus); outline-offset: 2px; }
@media print { .xs-langhint { display: none; } }

/* ---- 법률·문서 쪽 (사이트 생성기 통일 6단계, 2026-10-15): 모든 사이트가 같은 마크업 ----
   <article class="wrap narrow doc legal"> 안에 h1·.lead·.muted.small(시행일)·.note(안내 상자)·h2.plain#summary + .tbl.summary·
   nav.toc·section#sN(h2·h3·p·ul·.tbl·.faq). 마크업 설명은 tools/xsite/legal.py 맨 위. xiu.kr·LiveSSH(HTML 조각)와
   보송·TapCaster(섹션 JSON)가 같은 마크업을 내고 모양은 여기 한 벌이다.
   색은 --lg-* 로만 쓴다. 기본값은 공용 --xs-*(코발트·노랑, 라이트·다크 자동). 자기 색 체계가 있는 사이트(보송·TapCaster)는
   자기 site.css 에서 .doc.legal { --lg-…: … } 만 바꾼다. 글꼴은 사이트 것을 그대로 물려받는다. */
.doc.legal {
  --lg-head: var(--xs-head); --lg-body: var(--xs-body); --lg-muted: var(--xs-muted); --lg-link: var(--xs-link);
  --lg-panel: var(--xs-panel); --lg-soft: var(--xs-soft); --lg-line: var(--xs-line); --lg-mark: var(--xs-hl); --lg-focus: var(--xs-focus);
  --lg-draft-bg: rgba(255, 211, 107, .18); --lg-draft-mark: var(--xs-sun2);
  box-sizing: border-box; width: 100%; max-width: 880px; margin: 0 auto; padding: 64px var(--xs-gutter) 104px;
  color: var(--lg-body); font-size: 16px; line-height: 1.75; }
.doc.legal h1 { margin: 0 0 18px; color: var(--lg-head); font-size: clamp(32px, 5vw, 50px); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.doc.legal h2 { margin: 0 0 14px; padding-top: 28px; border-top: 1px solid var(--lg-line); color: var(--lg-head);
  font-size: clamp(21px, 2.6vw, 25px); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; }
.doc.legal h2.plain { margin-top: 40px; padding-top: 0; border-top: 0; }
.doc.legal h3 { margin: 26px 0 8px; color: var(--lg-head); font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.doc.legal h1, .doc.legal h2, .doc.legal h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.doc.legal section { margin: 44px 0 0; padding: 0; }
.doc.legal p, .doc.legal li { color: var(--lg-body); font-size: 16px; line-height: 1.75; }
.doc.legal p { margin: 0 0 14px; }
.doc.legal ul, .doc.legal ol { margin: 0 0 14px; padding-inline-start: 1.3em; }
.doc.legal li { margin: 0; }
.doc.legal li + li { margin-top: 6px; }
.doc.legal b, .doc.legal strong { color: var(--lg-head); }
.doc.legal a { color: var(--lg-link); text-decoration: underline; text-underline-offset: 3px; }
.doc.legal a:hover { text-decoration-thickness: 2px; }
.doc.legal a:focus-visible, .doc.legal summary:focus-visible { outline: 3px solid var(--lg-focus); outline-offset: 2px; border-radius: 4px; }
.doc.legal code { font-family: var(--xs-mono); font-size: .9em; background: var(--lg-soft); color: var(--lg-head); padding: 1px 6px; border-radius: 6px; }
.doc.legal .lead { max-width: none; margin: 0 0 18px; color: var(--lg-body); font-size: 18px; line-height: 1.7; }
.doc.legal .muted { color: var(--lg-muted); }
.doc.legal p.small { margin-bottom: 8px; font-size: 14px; line-height: 1.6; }
/* 안내 상자: 시행 안내, 옛 버전 안내("이전 버전입니다 …"), 원본 언어. 초안 표시는 .note.draft */
.doc.legal .note { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--lg-line); border-inline-start: 4px solid var(--lg-mark);
  border-radius: 12px; background: var(--lg-panel); font-size: 15px; line-height: 1.65; }
.doc.legal .note.draft { border-color: var(--lg-draft-mark); background: var(--lg-draft-bg); }
/* 목차 */
.doc.legal .toc { margin: 28px 0 8px; padding: 18px 22px; border: 1px solid var(--lg-line); border-radius: 16px; background: var(--lg-panel); }
.doc.legal .toc strong { display: block; color: var(--lg-head); font-size: 15px; }
.doc.legal .toc ol { margin: 8px 0 0; padding-inline-start: 1.5em; columns: 2; column-gap: 36px; }
.doc.legal .toc li { margin: 0 0 4px; font-size: 15px; line-height: 1.5; break-inside: avoid; }
.doc.legal .toc li + li { margin-top: 0; }
.doc.legal .toc a { text-decoration: none; }
.doc.legal .toc a:hover { text-decoration: underline; }
/* 표: 넓은 화면은 표, 좁은 화면(700px 이하)은 줄마다 카드(칸 이름은 data-label) */
.doc.legal .tbl { margin: 16px 0 20px; overflow-x: auto; border: 1px solid var(--lg-line); border-radius: 16px; background: var(--lg-panel); }
.doc.legal .tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.doc.legal .tbl th, .doc.legal .tbl td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--lg-line); color: var(--lg-body);
  text-align: start; vertical-align: top; font-size: 15px; line-height: 1.6; }
.doc.legal .tbl tr:last-child > * { border-bottom: 0; }
.doc.legal .tbl thead th { background: var(--lg-soft); color: var(--lg-head); font-size: 14px; font-weight: 700; }
.doc.legal .tbl tbody th, .doc.legal .tbl.summary td:first-child { width: 28%; color: var(--lg-head); font-weight: 700; }
@media (max-width: 700px) {
  .doc.legal .tbl { overflow: visible; border: 0; border-radius: 0; background: none; }
  .doc.legal .tbl table, .doc.legal .tbl tbody, .doc.legal .tbl tr, .doc.legal .tbl th, .doc.legal .tbl td { display: block; width: auto; }
  .doc.legal .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc.legal .tbl tr { margin: 0 0 12px; border: 1px solid var(--lg-line); border-radius: 14px; background: var(--lg-panel); }
  .doc.legal .tbl tr:last-child > * { border-bottom: 1px solid var(--lg-line); }
  .doc.legal .tbl tr > :last-child, .doc.legal .tbl tr:last-child > :last-child { border-bottom: 0; }
  .doc.legal .tbl th, .doc.legal .tbl td { padding: 10px 16px; }
  .doc.legal .tbl tbody th, .doc.legal .tbl.summary td:first-child { width: auto; }
  .doc.legal .tbl td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--lg-muted); font-size: 12.5px; font-weight: 700; }
}
@media (max-width: 640px) {
  .doc.legal { padding-top: 40px; padding-bottom: 72px; }
  .doc.legal .toc ol { columns: 1; }
  .doc.legal .lead { font-size: 17px; }
}
/* 자주 묻는 질문(지원 쪽) */
.doc.legal .faq { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.doc.legal .faq details { border: 1px solid var(--lg-line); border-radius: 14px; background: var(--lg-panel); }
.doc.legal .faq summary { display: flex; align-items: center; gap: 16px; padding: 14px 18px; list-style: none; cursor: pointer;
  color: var(--lg-head); font-weight: 700; line-height: 1.5; }
.doc.legal .faq summary::-webkit-details-marker { display: none; }
.doc.legal .faq summary::after { content: "+"; flex: none; margin-inline-start: auto; color: var(--lg-link); font-size: 20px; line-height: 1; }
.doc.legal .faq details[open] summary::after { content: "\2212"; }
.doc.legal .faq details p { margin: 0; padding: 0 18px 16px; }
@media print { .doc.legal { padding: 0; } .doc.legal .toc { break-inside: avoid; } }

/* 404 의 시우 그림(공용 본문 tools/xsite/notfound.py, xiu.kr·LiveSSH·TapCaster; 보송은 자기 시우 얼굴). 2026-10-15 6단계 404·head 통일 */
.nf-art{display:block;width:180px;height:180px;border-radius:44px;background:var(--xs-soft);object-fit:cover;object-position:right bottom;margin:0 0 28px}