/* 흰형광 (2026-10-11 상협님 참고 사진: 어두운 화면 위 형광 라임 + 흰 글씨). ui-pro-max 기준 적용:
   라임(#c6f61b) 위 글자는 검정(대비 15:1), 흰 바탕 위 글자·선은 짙은 라임(#3f5c00 / #5f8700)을 써서 대비 4.5:1·3:1 확보.
   tone.css 바로 뒤에서 불러 색·배경·강조 방식만 바꿔요. 구조·스크립트는 그대로, 이 파일 link 한 줄을 지우면 원래대로 돌아가요. */
:root{ --neon:#c6f61b; --neon-2:#dcff5c; --ink:#0c0f06; --neon-deep:#3f5c00; --neon-line:#5f8700; }

/* ── 흰 화면(기본) ── */
:root[data-theme="light"][data-page]{
  --bg:#fff; --bg-alt:#f6f8ee; --panel:#fff; --panel-2:#f6f8ee; --tile:#fff; --tile-2:#f6f8ee;
  --text:#0c0f06; --text-2:#4a5142; --line:#d9dfc9; --line-soft:rgba(12,15,6,.10);
  --accent:#4f7300; --accent-hover:#3f5c00; --link:#3f5c00; --r-ok:#3f5c00; --ring-track:#e8edd8; --nav:rgba(255,255,255,.86);
  --inv-bg:#0c0f06; --inv-text:#fff; --inv-text-2:#b9c0ac; --inv-link:#c6f61b; --inv-tile:rgba(255,255,255,.06); --inv-line:rgba(255,255,255,.16);
  --feat-bg:#0c0f06; --feat-text:#fff; --feat-text-2:#b9c0ac; --feat-line:rgba(255,255,255,.16);
  --g-head:linear-gradient(#0c0f06,#0c0f06); --g-num:linear-gradient(#0c0f06,#0c0f06); --g-btn:linear-gradient(#c6f61b,#c6f61b);
  --t1:#c6f61b; --t2:#9bd100; --t3:#5f8700; --orb-a:0; --orb-b:0;
  --good:#2a6a00; --good-bg:rgba(95,135,0,.14);
}
/* ── 검정 화면 (참고 사진처럼): 검정 바탕 + 흰 글씨 + 라임 ── */
:root[data-theme="dark"][data-page]{
  --bg:#080a05; --bg-alt:rgba(255,255,255,.03); --panel:#10140a; --panel-2:#161b0e; --tile:#10140a; --tile-2:#161b0e;
  --text:#f4f6ee; --text-2:#a9b0a0; --line:#2b3120; --line-soft:rgba(220,255,92,.10);
  --accent:#c6f61b; --accent-hover:#d4ff3a; --link:#d4ff3a; --r-ok:#c6f61b; --ring-track:#222816; --nav:rgba(8,10,5,.78);
  --inv-bg:#10140a; --inv-text:#f4f6ee; --inv-text-2:#a9b0a0; --inv-link:#d4ff3a; --inv-tile:rgba(255,255,255,.05); --inv-line:rgba(255,255,255,.14);
  --feat-bg:linear-gradient(160deg,#161c08,#0c0f06); --feat-text:#f4f6ee; --feat-text-2:#a9b0a0; --feat-line:rgba(198,246,27,.28);
  --g-head:linear-gradient(#f4f6ee,#f4f6ee); --g-num:linear-gradient(#f4f6ee,#f4f6ee); --g-btn:linear-gradient(#c6f61b,#c6f61b);
  --t1:#c6f61b; --t2:#9bd100; --t3:#5f8700; --orb-a:0; --orb-b:0;
}

/* 배경: 별·유성·떠다니는 원 대신 아주 옅은 점 격자 + 위쪽 구석 라임 빛 하나(고정, 움직임 없음) */
html::before,html::after,body::before,body::after,.gt-meteors{ display:none !important; }
:root[data-theme][data-page] body{ background-color:var(--bg);
  background-image:radial-gradient(60vmax 38vmax at 88% -8%,rgba(198,246,27,.30),transparent 62%),radial-gradient(rgba(12,15,6,.085) 1px,transparent 1.2px);
  background-size:auto,24px 24px; background-attachment:fixed; }
:root[data-theme="dark"][data-page] body{ background-image:radial-gradient(60vmax 38vmax at 88% -8%,rgba(198,246,27,.20),transparent 62%),radial-gradient(rgba(220,255,92,.10) 1px,transparent 1.2px); }
.sec.alt{ background:var(--bg-alt); }
:root[data-theme="light"][data-page] .sec.alt{ background:rgba(246,248,238,.78); }

/* 상단 바: 평평한 흰 띠 + 가는 선 */
.top,.nav{ background:var(--nav) !important; border-bottom:1px solid var(--line-soft); }
:root[data-theme="light"] img[src="/brand/mark.svg"]{ filter:invert(1); }

/* 제목: 단색 잉크. 핵심 구절만 형광펜 띠(라임) */
html[data-page] .h-xl,html[data-page] .h-l,html[data-page] h1.t,html[data-page] .hero h1,html[data-page] .app-h,html[data-page] h1:not([class]),
html[data-page] .h-m,html[data-page] .blk-h,html[data-page] .card h2,html[data-page] .res-head h2{ background:none !important; color:var(--text) !important; -webkit-text-fill-color:currentColor !important; animation:none !important; }
html[data-page] .inv .h-xl,html[data-page] .inv .h-l,html[data-page] .inv .h-m{ color:var(--inv-text) !important; }
html[data-page] em.em{ background:linear-gradient(transparent 56%,var(--neon) 56%,var(--neon) 92%,transparent 92%) !important; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text) !important; -webkit-text-fill-color:currentColor !important; animation:none; padding:0 .08em; }
html[data-page] .inv em.em{ background:none !important; color:var(--neon) !important; }
:root[data-theme="dark"][data-page] em.em{ background:none !important; color:var(--neon) !important; }
html[data-page] mark.mk-hl{ background:linear-gradient(transparent 60%,var(--neon) 60%); color:var(--text); }
html[data-page] .inv mark.mk-hl,:root[data-theme="dark"][data-page] mark.mk-hl{ background:none; color:var(--neon); text-decoration:underline; text-decoration-color:var(--neon); text-decoration-thickness:2px; text-underline-offset:.26em; }
/* 숫자·가격: 단색 */
html[data-page] .svc-price,html[data-page] .offer-p,html[data-page] .ring-num b,html[data-page] .vz-v b,html[data-page] .vz-cnt b,html[data-page] .svc-tag .hl{ background:none !important; color:var(--text) !important; -webkit-text-fill-color:currentColor !important; }
html[data-page] .feat .svc-tag .hl,html[data-page] .feat .svc-price{ color:var(--neon) !important; }

/* 버튼: 라임 바탕 + 검정 글자(대비 15:1), 살짝 떠 있는 라임 빛. 누르면 내려감 */
html[data-page] .btn:not(.line):not(.danger):not(.soft):not(.ghost),html[data-page] .nav-cta,html[data-page] .q-bubble,html[data-page] .offer-tag,html[data-page] .vs-q,html[data-page] .tag,html[data-page] .tabs em,html[data-page] .a-miss a,
html[data-page] .vz-pri > li:first-child .vz-rk,html[data-page] .vz-road li:first-child .vz-node{ background:var(--neon); color:var(--ink) !important; -webkit-text-fill-color:currentColor; }
html[data-page] .btn:not(.line):not(.danger):not(.soft):not(.ghost){ font-weight:650; box-shadow:0 0 0 1px rgba(12,15,6,.10),0 10px 26px -10px rgba(168,224,0,.85); }
html[data-page] .btn:not(.line):not(.danger):not(.soft):not(.ghost):hover,html[data-page] .nav-cta:hover{ background:var(--neon-2); }
html[data-page] .btn:active{ transform:translateY(1px); }
html[data-page] .btn.line{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--text); }
html[data-page] .btn.line:hover{ background:var(--neon); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
:root[data-theme="dark"][data-page] .btn.line{ box-shadow:inset 0 0 0 1.5px rgba(244,246,238,.5); }
html[data-page] .btn.soft{ background:rgba(198,246,27,.28); color:var(--text); }
:root[data-theme="dark"][data-page] .btn.soft{ background:rgba(198,246,27,.14); color:var(--neon); }
html[data-page] .btn[disabled]{ box-shadow:none; opacity:.4; }
html[data-page] .sso.google{ background:#fff; color:#1f1f1f; }
:root[data-theme="dark"][data-page] .sso.google{ background:#131314; color:#e3e3e3; border-color:#8e918f; }

/* 키보드 포커스: 흰 화면에선 잉크 2px + 라임 번짐, 검정 화면에선 라임 */
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 5px rgba(198,246,27,.55); }
:root[data-theme="dark"] :focus-visible{ outline-color:var(--neon); box-shadow:none; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--text); box-shadow:0 0 0 3px rgba(198,246,27,.7); }
:root[data-theme="dark"] .field input:focus,:root[data-theme="dark"] .field textarea:focus{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(198,246,27,.25); }

/* 카드·타일: 흰 판 + 가는 선. 고른 상품 카드는 잉크 테두리 + 라임 링 */
.card,.panel,.prod,.vz-tile,.vz-pri > li,.vz-cnt div,.svc-tile,.offer,.score,.cats,.prob,.aiq,.lock,.ind,.opt{ border:1px solid var(--line); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
:root[data-theme="light"][data-page] .card,:root[data-theme="light"][data-page] .panel{ box-shadow:0 1px 0 rgba(12,15,6,.04),0 18px 40px -30px rgba(60,80,0,.35); }
html[data-page] .prod[aria-checked="true"],html[data-page] .seg button[aria-pressed="true"]{ border-color:var(--text); box-shadow:0 0 0 3px rgba(198,246,27,.75); background:var(--panel); }
:root[data-theme="dark"][data-page] .prod[aria-checked="true"],:root[data-theme="dark"][data-page] .seg button[aria-pressed="true"]{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(198,246,27,.2); }
html[data-page] .tabs button[aria-selected="true"]{ border-bottom-color:var(--text); box-shadow:0 3px 0 -1px var(--neon); }
.svc-tile.feat{ border-color:var(--ink); }
:root[data-theme="dark"] .svc-tile.feat{ border-color:rgba(198,246,27,.5); }
html[data-page][data-theme] .feat .svc-list svg,html[data-page] .feat .svc-list svg,html[data-page] .feat .more,html[data-page] .feat .tile-links .more{ color:var(--neon); }

/* 진행 막대·그래프·링: 흰 바탕에선 짙은 라임 선(3:1 이상), 면은 라임 */
html[data-page] .ln{ stroke:var(--ink); } :root[data-theme="dark"][data-page] .ln{ stroke:var(--neon); filter:drop-shadow(0 0 6px rgba(198,246,27,.55)); }
html[data-page] .ar{ fill:var(--neon); opacity:.45; } :root[data-theme="dark"][data-page] .ar{ opacity:.16; }
html[data-page] .vz-ring .vl{ stroke:var(--neon-line); } :root[data-theme="dark"][data-page] .vz-ring .vl{ stroke:var(--neon); }
html[data-page] .vz-bar i,html[data-page] .vz-rng i,html[data-page] .vz-waf i.on{ background:var(--neon-line); } :root[data-theme="dark"][data-page] .vz-bar i{ background:var(--neon); }
html[data-page] .vz-rng s{ background:var(--neon-line); }
html[data-page] .gets .n{ background:var(--neon); color:var(--ink); border-color:transparent; }
html[data-page] .stepper{ border-color:var(--line); }
a{ text-underline-offset:.2em; }
.foot a{ color:var(--text-2); }

@media (prefers-reduced-motion:reduce){ html[data-page] .btn{ transition:none; } }
