/* =============================================================================
   site-chrome — 공용 네비게이션바 · 사이드메뉴 · 푸터 (chrome.ts 와 짝)
   Next 화면은 이 파일을 import 하고, 서비스 페이지는 같은 파일의 사본 /shell/v1/shell.css 를 읽는다
   (scripts/build-shell.mjs). 네비게이션바·푸터 값은 루트(출시 전 화면)의 머리·꼬리 그대로,
   사이드메뉴는 오피스 사이드바(틸 테마) 그대로 옮겼다.
   ============================================================================= */
.x9c-nav, .x9c-foot, .x9c-side {
  --x9c-line: rgba(179,238,238,.18); --x9c-muted: #a9c7ce; --x9c-text: #edfafb;
  box-sizing: border-box; color: var(--x9c-text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  font-synthesis: none; -webkit-font-smoothing: antialiased; line-height: normal;
}
/* 중국어 화면·언어 선택 항목의 한자 글꼴(오피스 design/black-workspace/shell.css와 같은 목록, xel9-office #1899) */
html[lang="zh-Hans"] :is(.x9c-nav, .x9c-foot, .x9c-side), .x9c-lang-option[lang="zh-Hans"] { font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; }
html[lang="zh-Hant"] :is(.x9c-nav, .x9c-foot, .x9c-side), .x9c-lang-option[lang="zh-Hant"] { font-family: "PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif; }
.x9c-nav *, .x9c-foot *, .x9c-side * { box-sizing: border-box; }

/* ---------- 네비게이션바 — 페이지 가로 폭 전체, 로고 왼쪽 끝·문제 신고/언어 오른쪽 끝 ---------- */
.x9c-nav { height: 60px; border-bottom: 1px solid var(--x9c-line); display: flex; align-items: center; gap: 12px; padding-inline: 24px; background: rgba(5,29,39,.38); font-size: 14px; }
.x9c-bi { width: 108px; flex: none; color: #b8bec4; line-height: 0; }
.x9c-report-btn { margin-left: auto; }/* 로고가 있든 없든(서비스 화면) 문제 신고·언어 선택은 오른쪽 끝 */
.x9c-bi svg { display: block; width: 100%; height: auto; }
.x9c-lang { position: relative; z-index: 10; color: #a9c7ce; font-size: 12px; }
.x9c-lang svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.x9c-lang-trigger, .x9c-lang-option { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 9px; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.x9c-lang-trigger { width: 132px; min-height: 36px; padding: 8px 11px; border: 1px solid rgba(179,238,238,.22); border-radius: 7px; background: #0b303c; text-align: left; }
.x9c-lang-trigger:hover, .x9c-lang-trigger[aria-expanded="true"] { background: #174550; border-color: #52908e; color: #edfafb; }
.x9c-chevron { margin-left: auto; }
.x9c-lang-trigger[aria-expanded="true"] .x9c-chevron { transform: rotate(180deg); }
.x9c-lang-trigger:focus-visible { outline: 2px solid #99f1df; outline-offset: 3px; }
.x9c-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 100%; padding: 4px; border: 1px solid rgba(179,238,238,.22); border-radius: 8px; background: #103642; box-shadow: 0 10px 28px #0006; }
.x9c-lang-menu[hidden] { display: none; }
.x9c-lang-option { justify-content: space-between; width: 100%; min-height: 38px; padding: 9px 8px; border: 0; border-radius: 4px; background: transparent; text-align: left; }
.x9c-lang-option:hover, .x9c-lang-option:focus-visible { outline: none; background: #21525c; color: #fff; }
.x9c-lang-option[aria-checked="true"] { color: #edfafb; }
.x9c-lang-option[aria-checked="false"] .x9c-check { visibility: hidden; }
.x9c-menu { display: none; }

/* ---------- 푸터 — 페이지 가로 폭 전체, 왼쪽 저작권·오른쪽 약관 단추, 낮은 높이 ---------- */
.x9c-foot { padding: 0 24px; border-top: 1px solid var(--x9c-line); font-size: 10px; color: var(--x9c-muted); }
.x9c-foot-in { padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.x9c-foot-links { display: flex; gap: 8px; }
.x9c-foot-links a { padding: 4px 10px; border: 1px solid rgba(179,238,238,.22); border-radius: 6px; color: var(--x9c-muted); text-decoration: none; font-size: 11px; }
.x9c-foot-links a:hover { color: var(--x9c-text); background: #174550; border-color: #52908e; }
.x9c-foot-links a:focus-visible { outline: 2px solid #99f1df; outline-offset: 2px; }

/* ---------- 사이드메뉴 (오피스 사이드바 · 틸 테마) — 서비스 페이지만 ---------- */
.x9c-side { --x9c-hover: rgba(1,252,252,.07); --x9c-active: rgba(1,228,226,.14); --x9c-sline: rgba(137,238,238,.15); --x9c-tree: rgba(137,238,238,.32);
  display: flex; flex-direction: column; padding: 0 10px 16px; background: #04323d linear-gradient(165deg,rgba(4,105,116,.95),rgba(3,49,62,.98) 48%,rgba(4,56,68,.98)); border-right: 1px solid var(--x9c-line); font-size: 13px; overflow-y: auto; }
.x9c-ico { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x9c-ico.x9c-app { width: 22px; height: 22px; fill: currentColor; fill-rule: evenodd; stroke: none; } /* #39·#47 앱 아이콘 상징 그림(한 색). #49 선 아이콘보다 칸을 꽉 채우지 않아 조금 크게 */
.x9c-side-head { flex: none; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 12px; margin-bottom: 8px; }
.x9c-head-sep { display: none; }/* 접었을 때만 — 「9」·단추와 오피스 그룹 사이(#15) */
.x9c-side > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }/* 메뉴만 스크롤 — 로고·접기 단추는 위아래에 고정 */
/* #11: 사이드메뉴 하단 — 문제 신고·언어 선택(서비스 화면엔 네비게이션바가 없다) */
.x9c-side-tools { flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 2px 0; border-top: 1px solid var(--x9c-sline); }
.x9c-side-tools .x9c-report-btn { margin-left: 0; width: 100%; justify-content: flex-start; padding-inline: 12px; }
.x9c-side-tools .x9c-lang, .x9c-side-tools .x9c-lang-trigger { width: 100%; }
.x9c-side-tools .x9c-lang-trigger { padding-inline: 12px; }
.x9c-side-tools .x9c-lang-menu { top: auto; bottom: calc(100% + 6px); }/* 아래쪽이라 위로 연다 */
.x9c-side-logo { line-height: 0; color: #b8bec4; }
.x9c-side-logo svg { display: block; height: auto; }
.x9c-logo-full svg { width: 96px; }
.x9c-side .x9c-side-logo svg path { fill: currentColor; stroke: none; }/* 앱의 전역 svg 규칙(fill:none 등)에 덮이지 않게 — 「9」는 청록 */
.x9c-side .x9c-side-logo svg path[fill="#29b8b6"] { fill: #29b8b6; }
.x9c-bi svg path { stroke: none; }
.x9c-logo-nine { display: none; }
.x9c-logo-nine svg { width: 22px; }
.x9c-fold { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 3px; background: transparent; color: #a2c1c8; cursor: pointer; }
.x9c-fold:hover { color: var(--x9c-text); background: var(--x9c-hover); }
.x9c-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; color: #b9dce1; text-decoration: none; line-height: 1.5; }
a.x9c-link:hover { background: var(--x9c-hover); color: #edffff; }
.x9c-link.is-active { background: var(--x9c-active); border-color: rgba(1,238,232,.4); color: #f0ffff; box-shadow: inset 0 0 20px rgba(1,222,218,.04); }
.x9c-link.is-active .x9c-ico { color: #38eeee; }
.x9c-link:focus-visible, .x9c-fold:focus-visible { outline: 2px solid #99f1df; outline-offset: -2px; }
.x9c-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x9c-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 10px; padding-left: 6px; }
.x9c-sub .x9c-link { min-height: 38px; padding-block: 7px; padding-left: 5px; font-size: 13.5px; }
/* #41·#43: 그룹 아래 하위 툴은 펼치든 접든 같은 가지 선(트리) — 아이콘 자리는 두 상태가 같다 */
.x9c-sub > .x9c-link { position: relative; }
.x9c-sub > .x9c-link::before { content: ""; position: absolute; left: -7px; top: -2px; bottom: -2px; border-left: 1.5px solid var(--x9c-tree); }
.x9c-sub > .x9c-link:first-child::before { top: -4px; }
.x9c-sub > .x9c-link:last-child::before { bottom: 50%; }
.x9c-sub > .x9c-link::after { content: ""; position: absolute; left: -7px; top: 50%; width: 8px; border-top: 1.5px solid var(--x9c-tree); }
.x9c-sub .x9c-ico { width: 17px; height: 17px; }
.x9c-sub .x9c-ico.x9c-app { width: 20px; height: 20px; }
.x9c-link.is-soon { color: rgba(185,220,225,.55); cursor: default; }
.x9c-link.is-heading { cursor: default; }
.x9c-soon { margin-left: auto; padding: 1px 7px; border: 1px solid rgba(179,238,238,.22); border-radius: 999px; font-size: 11px; font-style: normal; color: #8fb3ba; white-space: nowrap; }
.x9c-sep { height: 1px; margin: 8px 12px; background: var(--x9c-sline); }

/* ---------- 서비스 페이지 배치 (shell.js 가 html 에 .x9c-page) ----------
   #11: 페이지는 화면에 고정(스크롤 없음) — 사이드메뉴(왼쪽, 위아래 끝까지)·본문 칸(안에서만 스크롤)·푸터(아래, 낮게).
   네비게이션바 없음. 앱의 화면 높이 --x9-vh = 화면 − 푸터. */
html.x9c-page { --x9c-foot-h: 40px; --x9c-side-w: 250px; --x9-vh: calc(100svh - var(--x9c-foot-h)); height: 100svh; overflow: hidden; background: #06232e; }
html.x9c-page.x9c-folded { --x9c-side-w: 64px; }
html.x9c-page body { margin: 0; height: 100svh; overflow: hidden; padding-left: var(--x9c-side-w); display: flex; flex-direction: column; box-sizing: border-box; }
html.x9c-page .x9c-side { position: fixed; z-index: 41; top: 0; bottom: 0; left: 0; width: var(--x9c-side-w); overflow: hidden; }
html.x9c-page .x9c-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* office#1409: 스크롤바 자리를 늘 비워 둠 — 본문 스크롤바가 생기고 사라지며 폭이 바뀌면 툴 메인 양식함(카드 줄 수로 높이를 잼)과 되먹임해 특정 창 크기에서 화면이 떨렸음. 앱 편집 화면은 본문이 스크롤하지 않아 빈 줄이 생기므로 제외 */
html.x9c-page:not(.x9-app-editing) .x9c-main { scrollbar-gutter: stable; }
html.x9c-page .x9c-foot { flex: none; height: var(--x9c-foot-h); display: flex; align-items: center; overflow: hidden; }
html.x9c-page .x9c-foot-in { flex: 1; padding-block: 0; }
/* #18: 앱 편집 화면(앱이 html 에 .x9-app-editing) — 푸터를 숨기고 그 높이를 앱에 돌려줌(--x9-vh = 화면 높이). 루트·크리에이티브·AI 검출·툴 메인은 그대로 */
html.x9c-page.x9-app-editing { --x9c-foot-h: 0px; }
html.x9c-page.x9-app-editing .x9c-foot { display: none; }
/* #61 데스크톱 외(태블릿·휴대폰, shell.ts FOOT_FLOW_MQ): 푸터는 본문 칸(.x9c-main) 끝에 이어 붙어 함께 스크롤 — 화면 높이를 차지하지 않음(--x9-vh = 화면 높이).
   클래스 둘이라 아래 760px 규칙(--x9c-foot-h 60px)보다 앞선다 */
html.x9c-page.x9c-foot-flow { --x9c-foot-h: 0px; }
html.x9c-page.x9c-foot-flow .x9c-main > .x9c-foot { height: auto; overflow: visible; }
html.x9c-page.x9c-foot-flow .x9c-main > .x9c-foot .x9c-foot-in { padding-block: 10px; }
/* #13: 인쇄 — 화면 고정 배치(높이 100svh·숨김 스크롤·사이드메뉴 폭 여백)를 풀어 문서 전체가 흐르게, 셸 요소는 인쇄하지 않음 */
@media print {
  html.x9c-page, html.x9c-page body { height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; display: block !important; background: #fff !important; }
  html.x9c-page .x9c-main { overflow: visible !important; min-height: 0 !important; }
  html.x9c-page :is(.x9c-side, .x9c-menu, .x9c-foot, .x9c-report) { display: none !important; }
}
/* #43: 접어도 머리 높이(60+8px)·메뉴 왼쪽 여백·아이콘 자리는 펼친 상태와 같다 — 이름만 가려진다.
   머리는 「9」 위·접기 단추 아래로 60px 안에, 구분선은 자리를 차지하지 않게(음수 여백) */
/* #49: 접어도 「9」는 펼친 로고와 같은 높이(60px 가운데, 로고 높이 26.8px) — 펼치기 단추는 「9」 위에 겹치고, 가리키거나 초점이 오면 아이콘이 「9」 자리에 보인다 */
html.x9c-folded .x9c-side-head { position: relative; justify-content: center; padding: 0 0 0 2px; }
html.x9c-folded .x9c-head-sep { display: block; margin: -4px 0 3px; }
html.x9c-folded .x9c-logo-nine svg { width: 18.5px; }
html.x9c-folded .x9c-fold { position: absolute; inset: 11px 0 11px 2px; width: auto; height: auto; }
html.x9c-folded .x9c-fold svg { opacity: 0; }
html.x9c-folded .x9c-side-head:is(:hover, :focus-within) .x9c-logo-nine { opacity: 0; }
html.x9c-folded .x9c-side-head:is(:hover, :focus-within) .x9c-fold svg { opacity: 1; }
html.x9c-folded .x9c-logo-full { display: none; }
html.x9c-folded .x9c-logo-nine { display: block; }
html.x9c-folded .x9c-label, html.x9c-folded .x9c-soon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* #41 접힌 사이드바: 그룹(오피스 O) 아래 하위 툴을 가지 선으로 이어 트리로 — 휴대폰 서랍(760px 이하)은 펼친 모양이라 제외 */
html.x9c-folded .x9c-sep { margin-inline: 6px; }
/* #47·#49: 가지 선(트리)은 펼쳤을 때만. 접으면 하위 툴을 오피스(O) 아래 옅은 바탕 묶음으로 붙여 구분하고, 아이콘은 모두 하단 도구 아이콘과 같은 세로줄(왼쪽 2px은 도구 단추 아이콘 중심 32.5px에 맞춤) */
@media (min-width: 761px) {
  html.x9c-folded .x9c-group { justify-content: center; padding-inline: 2px 0; }
  html.x9c-folded .x9c-sub { margin: 3px 0 0; padding: 3px 0; gap: 0; border-radius: 4px; background: rgba(137,238,238,.07); }
  html.x9c-folded .x9c-sub > .x9c-link { justify-content: center; padding-inline: 2px 0; }
  html.x9c-folded .x9c-sub > .x9c-link::before, html.x9c-folded .x9c-sub > .x9c-link::after { display: none; }
}
html.x9c-folded .x9c-side-tools .x9c-report-btn span, html.x9c-folded .x9c-side-tools .x9c-lang-trigger span, html.x9c-folded .x9c-side-tools .x9c-chevron { display: none; }
html.x9c-folded .x9c-side-tools .x9c-lang { width: auto; }
html.x9c-folded .x9c-side-tools .x9c-lang-menu { left: 0; right: auto; width: 132px; }
html.x9c-page.x9c-folded .x9c-side { overflow: visible; }/* #15: 64px 레일 밖으로 펼친 언어 메뉴가 잘려 본문에 가려지지 않게(메뉴는 nav가 스크롤) */

@media (max-width: 760px) {
  .x9c-nav { gap: 10px; padding-inline: 16px; }
  .x9c-bi { width: 96px; }
  .x9c-foot { padding-inline: 16px; }
  html.x9c-page body { padding-left: 0; }
  /* #17: 좁은 폭에서 푸터가 두 줄로 접히므로 40px 고정 높이에 잘리지 않게 높이를 늘리고 아래 안전 영역을 더한다.
     왼쪽 64px 은 서랍 단추 자리 — 단추가 본문·푸터 글자를 가리지 않는다 */
  html.x9c-page { --x9c-foot-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html.x9c-page .x9c-foot { padding: 0 16px env(safe-area-inset-bottom, 0px) 64px; }
  html.x9c-page .x9c-foot-in { gap: 4px 12px; }
  /* 휴대폰: 서랍을 여는 둥근 단추(왼쪽 아래 푸터 자리). 서랍이 열리면 서랍 오른쪽 바깥으로 옮겨 '문제 신고' 단추와 겹치지 않게(#17) */
  html.x9c-page .x9c-menu { display: grid; place-items: center; position: fixed; z-index: 42; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transition: left .2s ease; width: 44px; height: 44px; border: 1px solid rgba(179,238,238,.3); border-radius: 50%; background: #0b303c; color: #cfe7ea; box-shadow: 0 6px 18px #0008; }
  html.x9c-page .x9c-menu .x9c-ico { width: 20px; height: 20px; }
  html.x9c-page .x9c-side { width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  html.x9c-drawer .x9c-side { transform: none; }
  html.x9c-page.x9c-drawer .x9c-menu { left: 272px; }
  html.x9c-page .x9c-fold { display: none; }
  html.x9c-page.x9c-folded .x9c-side { overflow: hidden; }
  html.x9c-folded .x9c-side-head { flex-direction: row; justify-content: space-between; gap: 8px; padding: 0 0 0 12px; }
  html.x9c-folded .x9c-head-sep { display: none; }
  html.x9c-folded .x9c-logo-full { display: block; }
  html.x9c-folded .x9c-logo-nine { display: none; }
  html.x9c-folded .x9c-label, html.x9c-folded .x9c-soon { position: static; width: auto; height: auto; clip: auto; }
  html.x9c-folded .x9c-side-tools .x9c-report-btn span, html.x9c-folded .x9c-side-tools .x9c-lang-trigger span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { html.x9c-page :is(.x9c-side, .x9c-menu) { transition: none; } }

.x9c-slot { display: contents; }
/* 서비스 앱의 전역 main 규칙(최대 폭·여백)이 셸의 본문 칸에 붙지 않게 */
html.x9c-page main.x9c-main { max-width: none; margin: 0; padding: 0; }

/* ---------- 문제 신고(네비게이션바 단추 · 모달) — xel9-office #50 ---------- */
.x9c-report-btn { appearance: none; display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid rgba(179,238,238,.22); border-radius: 7px; background: transparent; color: #a9c7ce; font: inherit; font-size: 12px; cursor: pointer; }
.x9c-report-btn:hover { background: #174550; border-color: #52908e; color: #edfafb; }
.x9c-report-btn:focus-visible { outline: 2px solid #99f1df; outline-offset: 3px; }
.x9c-report-btn .x9c-ico { width: 15px; height: 15px; stroke-width: 1.6; }
.x9c-report { position: fixed; inset: 0; margin: auto; height: fit-content; overflow: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 1px solid rgba(179,238,238,.24); border-radius: 12px; background: #0b303c; color: #edfafb; box-shadow: 0 24px 60px #000a;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo",sans-serif; font-size: 14px; line-height: 1.5; }
.x9c-report::backdrop { background: rgba(2,14,19,.62); }
.x9c-report *, .x9c-report *::before { box-sizing: border-box; }
.x9c-report .x9c-report-form { display: grid; gap: 14px; margin: 0; padding: 22px 24px; }
.x9c-report h2 { margin: 0; font-size: 18px; font-weight: 650; color: #edfafb; }
.x9c-report .x9c-report-lead { margin: -6px 0 0; color: #a9c7ce; font-size: 13px; }
.x9c-report .x9c-f { display: grid; gap: 6px; margin: 0; }
.x9c-report .x9c-f > span { display: flex; gap: 8px; align-items: baseline; color: #cfe7ea; font-size: 13px; font-weight: 600; }
.x9c-report .x9c-f small { color: #8fb3ba; font-weight: 400; font-size: 12px; }
.x9c-report input, .x9c-report select, .x9c-report textarea { width: 100%; margin: 0; padding: 9px 11px; border: 1px solid rgba(179,238,238,.24); border-radius: 7px; background: #06232e; color: #edfafb; font: inherit; font-size: 14px; }
.x9c-report textarea { resize: vertical; min-height: 64px; }
.x9c-report input:focus, .x9c-report select:focus, .x9c-report textarea:focus { outline: 2px solid #55dcd7; outline-offset: 0; border-color: transparent; }
.x9c-report ::placeholder { color: #6f939a; }
.x9c-report .x9c-diag { font-size: 12px; color: #a9c7ce; }
.x9c-report .x9c-diag summary { cursor: pointer; }
.x9c-report .x9c-diag p { margin: 8px 0; }
.x9c-report .x9c-diag pre { max-height: 140px; overflow: auto; margin: 0; padding: 10px; border-radius: 7px; background: #06232e; color: #bad9dd; font-size: 11px; white-space: pre-wrap; word-break: break-all; }
.x9c-report .x9c-report-msg { margin: 0; font-size: 13px; color: #a9c7ce; }
.x9c-report .x9c-report-msg:empty { display: none; }
.x9c-report .x9c-report-msg.ok { color: #9ce8bf; }
.x9c-report .x9c-report-msg.warn { color: #f5d38a; }
.x9c-report .x9c-report-msg.fail { color: #ffb3a8; }
.x9c-report .x9c-report-actions { display: flex; justify-content: flex-end; gap: 8px; }
.x9c-report .x9c-btn { min-height: 36px; padding: 8px 16px; border: 1px solid rgba(179,238,238,.24); border-radius: 7px; background: transparent; color: #cfe7ea; font: inherit; font-size: 13px; cursor: pointer; }
.x9c-report .x9c-btn:hover { background: #174550; }
.x9c-report .x9c-btn.primary { background: #0f8f8a; border-color: #29b8b6; color: #fff; font-weight: 600; }
.x9c-report .x9c-btn.primary:hover { background: #12a29c; }
.x9c-report .x9c-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 760px) { .x9c-nav .x9c-report-btn span { display: none; } }

/* ---------- #51 언어 변경 중 모달 — 「9」 둘레를 도는 청록 고리. 서비스 앱의 전역 svg 규칙(크기·선)에 덮이지 않게 크기·선을 직접 ---------- */
.x9c-langswitch { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: #041a21; animation: x9c-ls-in .08s ease both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* #55 불투명 — 페이지가 바뀌는 동안 뒤가 비치지 않게(반투명이면 새 페이지 첫 프레임의 빈 화면이 비쳐 튐) */
.x9c-langswitch.is-resume { animation: none; }
.x9c-langswitch.is-out { opacity: 0; transition: opacity .15s ease; }
.x9c-ls-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 200px; padding: 28px 32px 24px; border: 1px solid rgba(137,238,238,.22); border-radius: 12px; background: #08313c; box-shadow: 0 18px 48px rgba(0,0,0,.55); color: #d9f3f5; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; }
.x9c-ls-mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; }
.x9c-ls-ring { position: absolute; inset: 0; width: 64px; height: 64px; fill: none; stroke-width: 3; }
.x9c-ls-ring circle { stroke: rgba(137,238,238,.16); }
.x9c-ls-ring .x9c-ls-arc { stroke: #29b8b6; stroke-linecap: round; stroke-dasharray: 44 132; transform-origin: 32px 32px; animation: x9c-ls-spin 1s linear infinite; animation-delay: var(--x9c-ls-t, 0s); }
.x9c-ls-nine { width: 20px; height: 29px; stroke: none; animation: x9c-ls-pulse 1.6s ease-in-out infinite; animation-delay: var(--x9c-ls-t, 0s); }
.x9c-ls-card strong { color: #fff; font-size: 18px; font-weight: 700; }
.x9c-ls-card span { color: #a9c7ce; font-size: 13px; }
@keyframes x9c-ls-in { from { opacity: 0; } }
@keyframes x9c-ls-spin { to { transform: rotate(360deg); } }
@keyframes x9c-ls-pulse { 50% { opacity: .55; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .x9c-langswitch, .x9c-ls-ring .x9c-ls-arc, .x9c-ls-nine { animation: none; } }
@media print { .x9c-langswitch { display: none !important; } }