/* 유리 질감 (Glassy Navbar·Dashboard·Checkout·Login 참고 사진) × 흰형광. neon.css 바로 뒤에서 불러요.
   구조·스크립트는 그대로, 겉모습만. 이 파일 link 한 줄을 지우면 neon.css 상태로 돌아가요. */
:root{ --gl-blur:saturate(150%) blur(18px); --gl-ease:cubic-bezier(.22,.8,.24,1); }
:root[data-theme="dark"]{
  --gl-bg:radial-gradient(130% 80% at 0% 0%,rgba(198,246,27,.09),transparent 58%),linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.04) 100%);
  --gl-bg-2:rgba(255,255,255,.04); --gl-line:rgba(255,255,255,.11); --gl-hi:inset 0 1px 0 rgba(255,255,255,.09); --gl-shadow:0 26px 60px -32px rgba(0,0,0,.95);
}
:root[data-theme="light"]{
  --gl-bg:radial-gradient(130% 80% at 0% 0%,rgba(198,246,27,.22),transparent 58%),linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  --gl-bg-2:rgba(255,255,255,.7); --gl-line:rgba(12,15,6,.12); --gl-hi:inset 0 1px 0 #fff; --gl-shadow:0 22px 44px -30px rgba(60,80,0,.4);
}

/* ① 네비: 화면 끝까지 붙은 띠 대신 둥글게 떠 있는 유리 막대. 전체 높이 64px 유지 */
html[data-page] .top,html[data-page] .nav{ background:transparent !important; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:8px 12px 0; }
html[data-page] .top .top-in,html[data-page] .nav .nav-in{ height:56px; max-width:1100px; border-radius:18px; padding:0 14px 0 18px;
  background:var(--nav); border:1px solid var(--gl-line); box-shadow:var(--gl-hi),var(--gl-shadow); backdrop-filter:var(--gl-blur); -webkit-backdrop-filter:var(--gl-blur); }
html[data-page] .nav .nav-in{ padding:0 14px 0 20px; }
@media (max-width:520px){ html[data-page] .top,html[data-page] .nav{ padding:6px 8px 0; } html[data-page] .top .top-in,html[data-page] .nav .nav-in{ height:52px; border-radius:16px; padding:0 8px 0 12px; gap:12px; } }
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--neon); transform:scaleX(0); transition:transform .25s var(--gl-ease); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); }

/* ② 카드·패널: 반투명 유리판 + 위쪽 빛 한 줄 + 왼쪽 위 라임 반사 */
html[data-page] .card,html[data-page] .panel,html[data-page] .prod,html[data-page] .vz-tile,html[data-page] .vz-pri > li,html[data-page] .vz-cnt div,
html[data-page] .svc-tile:not(.feat),html[data-page] .offer,html[data-page] .score,html[data-page] .cats,html[data-page] .prob,html[data-page] .aiq,html[data-page] .demo,html[data-page] .app{
  background:var(--gl-bg); border:1px solid var(--gl-line); box-shadow:var(--gl-hi),var(--gl-shadow); backdrop-filter:var(--gl-blur); -webkit-backdrop-filter:var(--gl-blur); }
html[data-page] .stat,html[data-page] .md,html[data-page] .fixed,html[data-page] .bankbox,html[data-page] .vz-say{ background:var(--gl-bg-2); border:1px solid var(--gl-line); box-shadow:var(--gl-hi); }
:root[data-theme="light"][data-page] .card,:root[data-theme="light"][data-page] .panel{ box-shadow:var(--gl-hi),var(--gl-shadow); }
/* 사진의 whileHover y:-5 처럼 작은 타일만 살짝 떠오름 */
html[data-page] .vz-tile,html[data-page] .svc-tile,html[data-page] .prod,html[data-page] .stat,html[data-page] .vz-pri > li{ transition:transform .22s var(--gl-ease),box-shadow .22s var(--gl-ease),border-color .22s; }
@media (hover:hover){ html[data-page] .vz-tile:hover,html[data-page] .svc-tile:hover,html[data-page] .prod:hover,html[data-page] .stat:hover,html[data-page] .vz-pri > li:hover{ transform:translateY(-4px); border-color:rgba(198,246,27,.55); } }

/* ③ 입력칸: 어두운 유리, 누르면 라임 테두리 + 번짐 */
html[data-page] .field input,html[data-page] .field textarea,html[data-page] .field select,html[data-page] .codebox input{ background:var(--gl-bg-2); border:1px solid var(--gl-line); box-shadow:var(--gl-hi); transition:border-color .2s,box-shadow .2s; }
:root[data-theme="dark"][data-page] .field input:focus,:root[data-theme="dark"][data-page] .field textarea:focus,:root[data-theme="dark"][data-page] .field select:focus{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(198,246,27,.2),0 0 26px -6px rgba(198,246,27,.5); }

/* ④ 결제·로그인: 모서리를 비스듬히 자른 유리 패널 (사진의 위 왼쪽·아래 오른쪽) + 금속 물결 배경 */
:root{ --cut:26px; }
html[data-page="login"] main .card:not(.me),html[data-page="checkout"] .card.sum,html[data-page="order"] .card,html[data-page="success"] .card{
  position:relative; border-radius:0; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; padding-top:34px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); box-shadow:none;
  background:var(--gl-bg),linear-gradient(var(--gl-line),var(--gl-line)); }
html[data-page="login"] main .card:not(.me)::before,html[data-page="checkout"] .card.sum::before,html[data-page="order"] .card::before,html[data-page="success"] .card::before{
  content:""; position:absolute; inset:1px; z-index:-1; pointer-events:none;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); background:var(--gl-bg),var(--bg); }
html[data-page="login"] main .card:not(.me)::after,html[data-page="checkout"] .card.sum::after,html[data-page="order"] .card::after,html[data-page="success"] .card::after{
  content:""; position:absolute; right:0; bottom:0; width:calc(var(--cut) + 4px); height:calc(var(--cut) + 4px); pointer-events:none;
  background:linear-gradient(135deg,transparent 48%,var(--neon) 50%,transparent 53%); opacity:.9; }
html[data-page="login"] main .card:not(.me){ isolation:isolate; filter:drop-shadow(0 28px 40px rgba(0,0,0,.45)); }
html[data-page="checkout"] .card.sum{ position:sticky; isolation:isolate; }
@media (max-width:920px){ html[data-page="checkout"] .card.sum{ position:relative !important; } }
/* 사진 배경의 금속 물결: 비스듬한 빛줄기를 겹쳐 라임 톤으로 */
:root[data-theme="dark"][data-page="login"] body,:root[data-theme="dark"][data-page="checkout"] body,:root[data-theme="dark"][data-page="order"] body,:root[data-theme="dark"][data-page="success"] body{
  background-image:
    linear-gradient(118deg,transparent 18%,rgba(198,246,27,.16) 26%,transparent 31%),
    linear-gradient(118deg,transparent 33%,rgba(255,255,255,.07) 38%,transparent 42%),
    linear-gradient(118deg,transparent 52%,rgba(198,246,27,.12) 60%,transparent 66%),
    radial-gradient(90vmax 50vmax at 100% 0%,rgba(198,246,27,.22),transparent 60%),
    radial-gradient(70vmax 40vmax at 0% 100%,rgba(198,246,27,.10),transparent 60%),
    radial-gradient(rgba(220,255,92,.10) 1px,transparent 1.2px);
  background-size:auto,auto,auto,auto,auto,24px 24px; }

/* ⑤ 대시보드 그래프: 선 아래가 색으로 번지듯 사라지고, 7일 평균선은 흰색 */
html[data-page] .ar{ -webkit-mask-image:linear-gradient(#000,transparent 95%); mask-image:linear-gradient(#000,transparent 95%); opacity:.55; }
:root[data-theme="dark"][data-page] .ar{ opacity:.5; }
:root[data-theme="dark"][data-page] .avg{ stroke:#f4f6ee; opacity:.7; }
html[data-page] .ln{ stroke-width:3; }
html[data-page] .pt{ fill:var(--bg); stroke:var(--neon); stroke-width:2.5; }
:root[data-theme="light"][data-page] .pt{ stroke:var(--ink); }
html[data-page] .gl{ stroke:var(--gl-line); }

/* ⑥ 결제 버튼: 라임 위쪽 빛 + 아래 번짐 */
html[data-page] .btn:not(.line):not(.danger):not(.soft):not(.ghost){ background:linear-gradient(180deg,var(--neon-2),var(--neon)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(12,15,6,.1),0 12px 30px -10px rgba(198,246,27,.7); }
html[data-page] .btn:not(.line):not(.danger):not(.soft):not(.ghost):hover{ background:linear-gradient(180deg,#e8ff8a,var(--neon-2)); }
:root[data-theme="dark"][data-page] .btn.line{ background:var(--gl-bg-2); box-shadow:inset 0 0 0 1px var(--gl-line),var(--gl-hi); color:var(--text); }

@media (prefers-reduced-motion:reduce){ html[data-page] .vz-tile,html[data-page] .svc-tile,html[data-page] .prod,html[data-page] .stat,html[data-page] .vz-pri > li,.nav-links a::after{ transition:none; } }