/* ================================================================
   theme.css v2 — 자동 라이트/다크 + Liquid Glass + Toss(TDS) 스타일
   (style.css 뒤에 로드되어 기존 디자인을 덮어씁니다. 기능 코드와 무관)
================================================================ */
:root{
  /* Toss 팔레트 */
  --blue:#3182f6; --bdark:#1b64da; --blight:#e8f3ff;
  --bg:#f2f4f6; --white:#fff; --black:#191f28;
  --g1:#4e5968; --g2:#8b95a1; --g3:#d1d6db; --g4:#e5e8eb;
  --r1:12px; --r2:20px; --r3:28px;
  /* Liquid Glass */
  --glass:rgba(255,255,255,.58);
  --glass-hi:rgba(255,255,255,.9);
  --glass-edge:rgba(255,255,255,.65);
  --glass-shadow:0 10px 34px rgba(30,60,120,.10);
  --soft:rgba(139,149,161,.10);
  --blob1:rgba(49,130,246,.30); --blob2:rgba(150,110,255,.22); --blob3:rgba(45,212,170,.20);
  --tr:all .25s cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --blue:#4593fc; --bdark:#3182f6; --blight:rgba(69,147,252,.16);
    --bg:#0b0c0f; --white:#1a1c21; --black:#f2f4f6;
    --g1:#c3c8cf; --g2:#8b95a1; --g3:#3a3d44; --g4:#2a2c32;
    --glass:rgba(32,34,40,.55); --glass-hi:rgba(255,255,255,.16); --glass-edge:rgba(255,255,255,.12);
    --glass-shadow:0 12px 36px rgba(0,0,0,.5); --soft:rgba(255,255,255,.06);
    --blob1:rgba(49,130,246,.26); --blob2:rgba(130,90,255,.20); --blob3:rgba(20,184,166,.14);
    --sh1:0 2px 8px rgba(0,0,0,.4); --sh2:0 8px 32px rgba(0,0,0,.5);
  }
  #page-loader{background:var(--bg)}
  input,select,textarea{color-scheme:dark}
}

/* ── 글꼴: Pretendard (토스와 가장 가까운 한글 폰트) ── */
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,sans-serif;background:var(--bg);color:var(--black);transition:background .3s,color .3s}
h1,h2,h3,.n-logo{letter-spacing:-.02em}

/* ── Liquid Glass 1: 뒤에서 비치는 은은한 색 배경 ── */
body::before{content:'';position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 36% at 12% 8%,var(--blob1),transparent 70%),
             radial-gradient(36% 36% at 88% 18%,var(--blob2),transparent 70%),
             radial-gradient(42% 42% at 68% 92%,var(--blob3),transparent 70%);
  filter:blur(24px)}
.hero,.sec-full{background:transparent!important}

/* ── Liquid Glass 2: 유리 표면 (블러 + 채도 + 가장자리 하이라이트) ── */
#main-nav,.sidebar,.mb,.auth-box,.cy-dlg-box,.ev-popup,
.sc:not(.blue),.adm-card,.cal-wrap,.supv-toolbar,.tbl-wrap,.vote-card,.mc-card,.sm-sec,
.feat-card,.notice-list,.h-stat,.pg-card,.cl-item,.cg-item,.week-sel,.supv-mini-stat,footer{
  background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),var(--glass)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.10)!important;
}
@media (prefers-color-scheme: dark){
  #main-nav,.sidebar,.mb,.auth-box,.cy-dlg-box,.ev-popup,.sc:not(.blue),.adm-card,.cal-wrap,.supv-toolbar,.tbl-wrap,.vote-card,.mc-card,.sm-sec,
  .feat-card,.notice-list,.h-stat,.pg-card,.cl-item,.cg-item,.week-sel,.supv-mini-stat,footer{
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%),var(--glass)!important}
}
#main-nav{border-width:0 0 1px;border-radius:0}
.sidebar{border-width:0 1px 0 0}
footer{border-width:1px 0 0;box-shadow:none!important}
.adm-card{border-top:3px solid var(--blue)}
.mc-card{border-left:4px solid var(--blue)}
.mo{background:rgba(10,20,40,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* 글래스 위에서 읽히도록 보조 요소는 반투명 처리 */
.si:hover{background:var(--soft)} .si.act,.si.active{background:var(--blight)!important;color:var(--blue)}

/* ── Toss 1: 버튼·입력·칩 ── */
.btn{border-radius:12px;font-weight:600;padding:9px 16px;transition:var(--tr)}
.btn-sm{padding:8px 14px}.btn-xs{padding:5px 10px;border-radius:9px}
.btn:active,.cy-b:active,.dtab:active,.reason-btn:active{transform:scale(.96)}
.btn-p{background:var(--blue);color:#fff}
.btn-s{background:var(--blight);color:var(--blue);border:none}
.btn-g{background:var(--soft);color:var(--g1);border:none}
.dtab,.reason-btn{border-color:transparent;background:var(--soft)}
.dtab.act{background:var(--blue);border-color:var(--blue)}
.fi{border-radius:12px;background:var(--soft);border:1.5px solid transparent;transition:var(--tr)}
.fi:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px var(--blight);outline:none}
.supv-row{border:1px solid transparent;background:var(--soft);box-shadow:none}
.supv-row:has(.supv-chk:checked),.supv-row--checked{border-color:rgba(240,68,82,.5);background:rgba(240,68,82,.08)}
.supv-row--saved{border-color:rgba(52,199,89,.5);background:rgba(52,199,89,.10)}
.pd-file-row,.srch,.cloud-path-btn{background:var(--soft);border-color:transparent;box-shadow:none}

/* ── Toss 2: 스낵바 · 바텀시트 ── */
.toast{background:rgba(25,31,40,.94)!important;color:#fff!important;border:none!important;border-radius:16px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 28px rgba(0,0,0,.28)!important;font-weight:600}
.toast.ok{border-left:0;box-shadow:0 8px 28px rgba(0,0,0,.28),inset 3px 0 0 var(--green)!important}
.toast.err{border-left:0;box-shadow:0 8px 28px rgba(0,0,0,.28),inset 3px 0 0 var(--red)!important}
@media (max-width:640px){
  .mo{align-items:flex-end;padding:0}
  .mb{max-width:100%!important;width:100%;border-radius:28px 28px 0 0!important;max-height:92vh;
      padding:14px 20px calc(22px + env(safe-area-inset-bottom))!important;transform:translateY(60px)!important;transition:transform .32s cubic-bezier(.32,.72,0,1)}
  .mo.show .mb{transform:none!important}
  .mb::before{content:'';display:block;width:38px;height:5px;border-radius:3px;background:var(--g3);margin:0 auto 16px}
}

/* ── 페이지 내 팝업(confirm/alert) ── */
.cy-dlg{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,20,40,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:cyF .18s}
.cy-dlg.out{opacity:0;transition:opacity .18s}
.cy-dlg-box{width:min(340px,100%);padding:26px 22px 18px;border-radius:var(--r3);animation:cyP .28s cubic-bezier(.32,1.4,.5,1)}
.cy-dlg-box p{white-space:pre-line;font-size:15px;line-height:1.6;font-weight:600;text-align:center;color:var(--black)}
.cy-dlg-act{display:flex;gap:8px;margin-top:20px}
.cy-b{flex:1;padding:14px;border:0;border-radius:14px;font:700 15px 'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;cursor:pointer;transition:var(--tr)}
.cy-b-p{background:var(--blue);color:#fff}.cy-b-d{background:var(--red);color:#fff}.cy-b-s{background:var(--soft);color:var(--g1)}

/* ── 로그인 성공 애니메이션 ── */
.cy-login{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:cyF .2s}
.cy-login.out{opacity:0;transition:opacity .3s}
.cy-login-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 38px;border-radius:var(--r3);background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);animation:cyP .4s cubic-bezier(.32,1.4,.5,1)}
.cy-login-card svg{width:64px;height:64px;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.cy-login-card circle{stroke:var(--green);stroke-dasharray:145;stroke-dashoffset:145;animation:cyD .6s .1s forwards}
.cy-login-card path{stroke:var(--green);stroke-dasharray:40;stroke-dashoffset:40;animation:cyD .35s .6s forwards}
.cy-login-card b{font-size:18px;color:var(--black)}.cy-login-card span{font-size:13px;color:var(--g2)}
@keyframes cyF{from{opacity:0}}@keyframes cyP{from{opacity:0;transform:scale(.9) translateY(10px)}}@keyframes cyD{to{stroke-dashoffset:0}}

/* ── 다크모드 보정 ── */
@media (prefers-color-scheme: dark){
  #export-menu{background:var(--glass)!important;border:1px solid var(--glass-edge)}
  .export-menu-item{color:var(--black)}
  .ai-box{background:var(--blight)}
  div[style*="background:#fff3e0"]{background:rgba(255,149,0,.15)!important;color:#ffb257!important}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* backdrop-filter 미지원 브라우저: 불투명도를 높여 가독성 유지 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.94)}
  @media (prefers-color-scheme: dark){:root{--glass:rgba(32,34,40,.96)}}
}