/* SoveAuth — Sove 디자인 시스템 토큰을 그대로 쓴다.
   헤더 구조(.top/.nav/.brand/.links/.actions)도 다른 40개와 같게 맞춰서
   상단 배너와 통합 로그인 UI가 추가 작업 없이 얹힌다. */
:root{
  color-scheme:light;
  --paper:#F8FAFC;
  --panel:#FFFFFF;
  --panel2:#F1F5F9;
  --ink:#101828;
  --muted:#5B6678;
  --line:#D9E2EC;
  --mint:#2ECC9A;
  --mint2:#E7FAF3;
  --amber:#FFB020;
  --blue:#2563EB;
  --danger:#DC2626;
  --danger2:#FEF2F2;
  --radius:28px;
  --shadow:0 22px 55px rgba(15,23,42,.08);
  --sans:Inter,"Noto Sans KR",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.shell{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- 헤더 */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{height:86px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;font-weight:950;font-size:20px;letter-spacing:-.04em}
.brand img{width:38px;height:38px}
.links{display:flex;align-items:center;gap:7px;margin-left:20px;flex-wrap:wrap}
.links a{padding:10px 14px;border-radius:999px;color:#465365;font-weight:800;font-size:14px;cursor:pointer}
.links a.active,.links a:hover{background:var(--mint);color:#062318}
.actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------------------------------------------------------------- 버튼/입력 */
.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 18px;font-weight:900;color:#192436;cursor:pointer}
.btn:hover{border-color:var(--mint)}
.btn.primary{background:var(--mint);border-color:var(--mint);color:#062318}
.btn.dark{background:#101828;color:#fff;border-color:#101828}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:7px 13px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.select{border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 10px;font-weight:900;text-align:center;text-align-last:center}
.field{display:block;margin:0 0 16px}
.field span{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 15px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:3px solid var(--mint2);border-color:var(--mint)}
.field textarea{min-height:92px;resize:vertical}
.mono{font-family:var(--mono)}

/* ---------------------------------------------------------------- 레이아웃 */
main{min-height:64vh;padding:34px 0 72px}
.page-head{margin:0 0 26px}
.page-head h1{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.035em;margin:0 0 10px}
.page-head p{color:var(--muted);margin:0;max-width:66ch}
.eyebrow{color:#0b7a5c;font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:13px}
.hint{color:var(--muted);font-size:13px;margin:8px 0 0}

/* ---------------------------------------------------------------- 금고 목록 */
.vault-list{display:grid;gap:10px;margin-top:18px}
.vault-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.vault-item:hover{border-color:var(--mint)}
.vault-item .ico{width:38px;height:38px;border-radius:12px;background:var(--mint2);display:grid;place-items:center;font-weight:900;color:#0b7a5c;flex:none}
.vault-item .meta{min-width:0;flex:1}
.vault-item .meta b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vault-item .meta span{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:inline-block;background:var(--panel2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;color:var(--muted)}
.tag.warn{background:#FFF7E6;color:#8A5A00}
.tag.bad{background:var(--danger2);color:#991B1B}
.tag.good{background:var(--mint2);color:#0b7a5c}

/* ---------------------------------------------------------------- TOTP */
.totp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:18px}
.totp-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.totp-card .issuer{font-weight:900;font-size:15px}
.totp-card .account{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.totp-code{font-family:var(--mono);font-size:32px;font-weight:800;letter-spacing:.12em;margin:10px 0 6px;cursor:pointer;user-select:all}
.totp-bar{height:4px;background:var(--panel2);border-radius:4px;overflow:hidden}
.totp-bar i{display:block;height:100%;background:var(--mint);transition:width 1s linear}
.totp-bar.low i{background:var(--amber)}

/* ---------------------------------------------------------------- Sentinel 승인 */
.sentinel-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;padding:18px}
.sentinel{background:#fff;border-radius:22px;max-width:520px;width:100%;padding:26px;box-shadow:0 40px 110px rgba(15,23,42,.3)}
.sentinel h2{margin:0 0 6px;font-size:20px}
.sentinel .tier{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.1em;border-radius:999px;padding:4px 12px;margin-bottom:14px}
.sentinel .tier.t2{background:var(--mint2);color:#0b7a5c}
.sentinel .tier.t3{background:var(--danger2);color:#991B1B}
.sentinel dl{margin:16px 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.sentinel dt{color:var(--muted);font-weight:800}
.sentinel dd{margin:0}
.sentinel .acts{display:flex;gap:10px;margin-top:20px}
.sentinel .acts .btn{flex:1}
.hold{position:relative;overflow:hidden}
.hold i{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.35);width:0}

/* ---------------------------------------------------------------- 공개 노출 */
.reveal{display:flex;align-items:center;gap:10px;background:var(--panel2);border-radius:14px;padding:12px 15px;font-family:var(--mono);word-break:break-all}
.reveal .countdown{margin-left:auto;font-family:var(--sans);font-weight:900;color:var(--muted);font-size:13px;flex:none}

/* ---------------------------------------------------------------- 알림 */
.notice{border-radius:14px;padding:13px 16px;margin:0 0 16px;font-size:14px;font-weight:600}
.notice.info{background:var(--mint2);color:#0b5c46}
.notice.warn{background:#FFF7E6;color:#8A5A00}
.notice.bad{background:var(--danger2);color:#991B1B}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#101828;color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;z-index:200;box-shadow:0 18px 40px rgba(15,23,42,.3)}

/* ---------------------------------------------------------------- 잠금 화면 */
.lock{max-width:460px;margin:46px auto;text-align:center}
.lock .ico{width:64px;height:64px;border-radius:20px;background:var(--mint2);display:grid;place-items:center;margin:0 auto 18px;font-size:28px}
.lock .card{text-align:left}

/* ---------------------------------------------------------------- 푸터 */
.footer{border-top:1px solid var(--line);background:#fff;padding:40px 0 60px;color:var(--muted);font-size:14px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}

@media (max-width:720px){
  .nav{height:auto;padding:12px 0;gap:12px}
  .links{margin-left:0;width:100%;order:3}
  .actions{margin-left:auto}
  .footer-grid{grid-template-columns:1fr}
  .totp-code{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}