/* Sovasta Auth — Sovasta 디자인 시스템 토큰을 그대로 쓴다.
   헤더 구조(.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}
}

/* sove-qa: mobile overflow fix (F-platform-003) — 기존 규칙을 덮지 않고 좁게 겹쳐 쓴다.
   왜: 390px 폭에서 가로 스크롤이 생겨 오른쪽 글자가 잘렸다. 측정한 범인은
   (1) .navActions 가 줄바꿈하지 않는 것, (2) 히어로 글자가 컨테이너를 넘는 것.
   overflow-x:hidden 으로 가리지 않는다 — 잘린 글자는 그대로 잘린다. */
@media (max-width: 620px) {
  /* 버튼이 한 줄에 안 들어가면 다음 줄로 내려간다 */
  .navActions { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 긴 낱말과 자간이 겹쳐 폭을 넘기는 것을 막는다.
     낱말 중간을 끊지 않도록 break-word 를 쓴다 — break-all 은 읽기 어려워진다. */
  .eyebrow, .lead, h1, h2 { max-width: 100%; overflow-wrap: break-word; }

  /* 자간이 큰 라벨은 마지막 글자 뒤 여백이 그대로 폭에 더해진다 */
  .eyebrow { letter-spacing: .22em; }

  /* 탭 띠는 **자기 안에서** 가로로 스크롤한다.
     측정해 보니 .mobileBar 는 폭이 366px 로 멀쩡한데 그 안의 탭이 521px 까지
     뻗어 문서 전체를 밀고 있었다. 탭을 줄이거나 숨기는 대신 띠 안에서 밀리게
     한다 — 탭 바의 표준 동작이고, 항목이 사라지지 않는다.
     스크롤 막대는 숨긴다: 모바일에서는 손가락으로 미는 것이 자연스럽다. */
  .mobileBar, .tabs, .tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobileBar::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar { display: none; }

  /* 상단 우측 영역은 스크롤보다 줄바꿈이 낫다 — 로그인 버튼이 숨으면 안 된다 */
  .topbar-right, .navRight, .headerRight { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 그리드·플렉스 항목의 기본 min-width:auto 를 푼다.
     이것이 agora/vcf/shield 의 진짜 원인이었다. .hero 는 모바일에서
     grid-template-columns:1fr 로 바뀌는데, 항목의 최소 폭이 '내용의 최소 폭'
     이라서 안의 버튼 줄이 열을 뷰포트 폭까지 밀어 올렸다 — 부모가 16px 패딩
     안에 있는데도 390px 를 차지해 오른쪽으로 16px 삐져나갔다.
     min-width:0 은 이 상황의 표준 해법이고, 내용을 자르지 않는다. */
  .hero > *, .workspace > *, .grid > * { min-width: 0; }

  /* 버튼 줄도 접히게 한다. 접히지 않으면 위의 min-width:0 이 글자를 짓눌러
     가로 스크롤 대신 레이아웃이 깨진 것처럼 보인다. */
  .actions { flex-wrap: wrap; row-gap: 8px; }
}