/* =========================================================
   BlockStay — Travel Trust design system
   Palette: warm cream + clay (brand/CTA) + green (trust/safe)
   Type: Noto Serif KR (display), Noto Sans KR (UI), IBM Plex Mono (chain)
   ========================================================= */

:root{
  /* surfaces — cool paper */
  --bg:        oklch(0.986 0.004 250);
  --bg-deep:   oklch(0.963 0.006 250);
  --surface:   oklch(0.999 0.001 250);
  --surface-2: oklch(0.973 0.005 250);
  --surface-3: oklch(0.951 0.007 252);

  /* ink — cool slate */
  --ink:   oklch(0.26 0.018 264);
  --ink-2: oklch(0.42 0.020 263);
  --muted: oklch(0.57 0.018 262);
  --faint: oklch(0.70 0.015 260);

  /* lines */
  --line:   oklch(0.912 0.008 256);
  --line-2: oklch(0.862 0.012 256);

  /* brand: deep indigo-blue */
  --clay:      oklch(0.525 0.145 264);
  --clay-deep: oklch(0.445 0.140 265);
  --clay-ink:  oklch(0.420 0.125 265);
  --clay-soft: oklch(0.952 0.030 264);
  --clay-tint: oklch(0.918 0.050 264);

  /* trust: green */
  --green:      oklch(0.585 0.115 156);
  --green-deep: oklch(0.46 0.10 156);
  --green-soft: oklch(0.95 0.04 156);

  /* info / states */
  --blue:      oklch(0.58 0.115 232);
  --blue-soft: oklch(0.95 0.04 232);
  --amber:     oklch(0.74 0.13 74);
  --amber-deep:oklch(0.56 0.12 66);
  --amber-soft:oklch(0.955 0.05 80);
  --red:       oklch(0.585 0.16 28);
  --red-soft:  oklch(0.955 0.04 30);

  /* radius */
  --r-xs: 7px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  /* shadow (cool) */
  --sh-sm: 0 1px 2px oklch(0.40 0.04 264 / .07), 0 2px 6px oklch(0.40 0.04 264 / .05);
  --sh:    0 2px 4px oklch(0.40 0.04 264 / .06), 0 8px 24px oklch(0.40 0.04 264 / .09);
  --sh-lg: 0 10px 30px oklch(0.38 0.04 264 / .13), 0 30px 70px oklch(0.38 0.04 264 / .15);
  --sh-clay: 0 6px 18px oklch(0.525 0.145 264 / .30);

  --maxw: 1180px;
  --header-h: 70px;
}

*{ box-sizing:border-box; word-break:keep-all; overflow-wrap:break-word; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Gothic A1", system-ui, sans-serif;
  font-size:15px;
  line-height:1.6;
  zoom:1.2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;
  line-break:strict;
  text-wrap:pretty;
}
#root{ min-height:100vh; display:flex; flex-direction:column; }

::selection{ background:var(--clay-tint); }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

.serif{ font-family:"Gothic A1", sans-serif; font-weight:800; letter-spacing:-.02em; }
.mono{ font-family:"IBM Plex Mono", monospace; font-feature-settings:"tnum"; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wrap-wide{ max-width:1340px; }
.page{ flex:1; }
.section{ padding:64px 0; }
.row{ display:flex; align-items:center; }
.between{ justify-content:space-between; }
.gap-4{ gap:4px;} .gap-6{ gap:6px;} .gap-8{ gap:8px;} .gap-10{gap:10px;} .gap-12{ gap:12px;}
.gap-16{ gap:16px;} .gap-20{ gap:20px;} .gap-24{ gap:24px;} .gap-32{gap:32px;}
.col{ display:flex; flex-direction:column; }
.wrap-row{ flex-wrap:wrap; }
.grow{ flex:1; }
.center{ align-items:center; justify-content:center; }

/* ---------- type ---------- */
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay-ink); white-space:nowrap;
}
.display{ font-family:"Gothic A1", sans-serif; font-weight:800; line-height:1.16; letter-spacing:-.025em; color:var(--ink); }
.d1{ font-size:54px; } .d2{ font-size:40px; } .d3{ font-size:30px; }
.h-lg{ font-size:22px; font-weight:700; letter-spacing:-.01em; }
.h-md{ font-size:18px; font-weight:700; }
.lead{ font-size:18px; color:var(--ink-2); line-height:1.7; }
.muted{ color:var(--muted); }
.ink2{ color:var(--ink-2); }
.small{ font-size:13px; }
.xs{ font-size:11.5px; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--r-sm);
  padding:11px 18px; font-size:14.5px; font-weight:600; line-height:1;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:15px 26px; font-size:16px; border-radius:var(--r); }
.btn-sm{ padding:8px 13px; font-size:13px; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--clay); color:#fff; box-shadow:var(--sh-clay); }
.btn-primary:hover{ background:var(--clay-deep); box-shadow:0 8px 22px oklch(0.635 0.135 47 / .36); }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ background:oklch(0.20 0.014 56); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ border-color:var(--clay); color:var(--clay-ink); }
.btn-soft{ background:var(--clay-soft); color:var(--clay-ink); }
.btn-soft:hover{ background:var(--clay-tint); }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 6px 16px oklch(0.585 0.115 156 / .28); }
.btn-green:hover{ background:var(--green-deep); }
.btn-danger{ background:var(--surface); color:var(--red); border-color:oklch(0.585 0.16 28 / .35); }
.btn-danger:hover{ background:var(--red-soft); }
.btn-line{ background:transparent; color:var(--ink-2); border-color:var(--line-2); }
.btn-line:hover{ color:var(--ink); border-color:var(--ink-2); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.card-pad{ padding:24px; }
.panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }
.divider{ border-top:1px dashed var(--line-2); margin:0; }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--pill);
  font-size:12px; font-weight:700; line-height:1;
}
.badge svg{ width:13px; height:13px; }
.badge, .tier, .net-pill, .wallet-chip{ white-space:nowrap; }
.badge-green{ background:var(--green-soft); color:var(--green-deep); }
.badge-clay{ background:var(--clay-soft); color:var(--clay-ink); }
.badge-blue{ background:var(--blue-soft); color:oklch(0.42 0.10 248); }
.badge-amber{ background:var(--amber-soft); color:var(--amber-deep); }
.badge-red{ background:var(--red-soft); color:oklch(0.46 0.14 28); }
.badge-gray{ background:var(--surface-3); color:var(--muted); }
.badge-ink{ background:var(--ink); color:var(--bg); }
.badge-line{ background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2); }

/* trust tier chips */
.tier{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 9px; border-radius:var(--pill);
  font-size:12.5px; font-weight:700; line-height:1;
}
.tier .dot{ width:8px; height:8px; border-radius:50%; }
.tier-3{ background:linear-gradient(100deg, oklch(0.95 0.04 156), oklch(0.93 0.05 168)); color:var(--green-deep); box-shadow:inset 0 0 0 1px oklch(0.585 0.115 156 / .3); }
.tier-3 .dot{ background:var(--green); }
.tier-2{ background:var(--green-soft); color:var(--green-deep); }
.tier-2 .dot{ background:var(--green); }
.tier-1{ background:var(--clay-soft); color:var(--clay-ink); }
.tier-1 .dot{ background:var(--clay); }
.tier-0{ background:var(--surface-3); color:var(--muted); }
.tier-0 .dot{ background:var(--faint); }

/* ---------- inputs ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-2); }
.input, .select{
  width:100%; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:14.5px; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px oklch(0.635 0.135 47 / .14); }
.seg{
  display:flex; gap:4px; padding:4px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--pill);
}
.seg button{
  flex:1; border:0; background:transparent; border-radius:var(--pill);
  padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted);
  transition:all .15s ease;
}
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); }

/* ---------- photo ---------- */
.photo{
  position:relative; overflow:hidden; background:var(--surface-3);
  background-size:cover; background-position:center;
}
.photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(0.30 0.05 264 / 0) 38%, oklch(0.24 0.05 266 / .42) 100%);
  mix-blend-mode:multiply;
}
.photo-fallback{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(150deg, oklch(0.72 0.07 248), oklch(0.55 0.09 258) 55%, oklch(0.42 0.10 266));
}
.photo > *{ position:relative; z-index:2; }
.photo::after{ z-index:1; }

/* ---------- trust meter (radial) ---------- */
.meter{ position:relative; display:inline-grid; place-items:center; }
.meter svg{ transform:rotate(-90deg); display:block; }
.meter .meter-c{ transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.meter-label{ position:absolute; text-align:center; }

/* deposit viz bars */
.dbar{ height:14px; border-radius:var(--pill); background:var(--surface-3); overflow:hidden; }
.dbar > span{ display:block; height:100%; border-radius:var(--pill); }

/* escrow vault visual */
.vault{
  position:relative; border-radius:var(--r-lg); padding:22px;
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
}
.coin-stack{ display:flex; flex-direction:column-reverse; gap:3px; }
.coin{ height:10px; border-radius:var(--pill); }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:oklch(0.981 0.009 78 / .82); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.hdr-inner{ height:100%; display:flex; align-items:center; gap:28px; }
.logo{ display:flex; align-items:center; gap:9px; font-family:"Gothic A1",sans-serif; font-weight:800; font-size:19px; letter-spacing:-.02em; white-space:nowrap; }
.logo-mark{ width:30px; height:30px; border-radius:9px; background:var(--clay); display:grid; place-items:center; box-shadow:var(--sh-clay); }
.nav{ display:flex; gap:6px; }
.nav a{ padding:8px 13px; border-radius:var(--r-sm); font-size:14px; font-weight:600; color:var(--ink-2); transition:all .15s ease; white-space:nowrap; }
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.nav a.active{ background:var(--clay-soft); color:var(--clay-ink); }

.net-pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--pill);
  font-size:12.5px; font-weight:600; border:1px solid var(--line-2); background:var(--surface);
}
.net-pill .dot{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 3px oklch(0.585 0.115 156 / .18); }
.net-ok .dot{ background:var(--green); }
.net-bad{ border-color:oklch(0.585 0.16 28 / .4); color:oklch(0.46 0.14 28); }
.net-bad .dot{ background:var(--red); box-shadow:0 0 0 3px oklch(0.585 0.16 28 / .18); }

.wallet-chip{
  display:inline-flex; align-items:center; gap:9px; padding:6px 8px 6px 12px; border-radius:var(--pill);
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sh-sm); font-weight:600; font-size:13px;
}
.avatar{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--clay),var(--blue)); }

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:oklch(0.28 0.04 50 / .42); backdrop-filter:blur(6px);
}
.modal{
  width:min(460px, 92vw); background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); border:1px solid var(--line); overflow:hidden;
  animation:pop .26s cubic-bezier(.2,.9,.25,1);
}
.modal-lg{ width:min(560px,94vw); }
@keyframes pop{ from{ transform:translateY(14px) scale(.97);} }

/* tx stepper */
.txstep{ display:flex; align-items:center; gap:13px; padding:13px 0; }
.txdot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface-3); color:var(--muted); border:1px solid var(--line-2); font-weight:700; font-size:13px; }
.txstep.done .txdot{ background:var(--green); border-color:var(--green); color:#fff; }
.txstep.active .txdot{ background:var(--clay); border-color:var(--clay); color:#fff; box-shadow:0 0 0 5px oklch(0.635 0.135 47 / .16); }
.txline{ width:1px; height:18px; background:var(--line-2); margin-left:14.5px; }
.txline.done{ background:var(--green); }

/* spinner */
.spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid oklch(0.635 0.135 47 / .25); border-top-color:var(--clay); animation:rot .7s linear infinite; }
.spin-lg{ width:48px; height:48px; border-width:4px; }
@keyframes rot{ to{ transform:rotate(360deg);} }

/* pulse used for live countdown */
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
.live-dot{ width:7px;height:7px;border-radius:50%; background:var(--clay); animation:pulse 1.4s ease infinite; }

/* misc */
.tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-xs); background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); font-weight:500; }
.kvs{ display:flex; flex-direction:column; }
.kv{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:0; }
.kv .k{ color:var(--muted); font-size:13.5px; white-space:nowrap; flex:none; }
b.row{ white-space:nowrap; }
.kv .v{ font-weight:600; text-align:right; white-space:nowrap; }
.kv .v.allow-wrap{ white-space:normal; }
.star{ color:var(--amber); }
.link-clay{ color:var(--clay-ink); font-weight:600; }
.link-clay:hover{ text-decoration:underline; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.stat{ display:flex; flex-direction:column; gap:3px; }
.stat .n{ font-family:"Gothic A1",sans-serif; font-weight:800; }

.fade-in{ animation:fadeUp .4s ease both; }
@keyframes fadeUp{ from{ transform:translateY(9px);} }

.scrim-top{ position:relative; }
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px; }
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:300;
  background:var(--ink); color:var(--bg); padding:13px 20px; border-radius:var(--pill);
  box-shadow:var(--sh-lg); font-size:14px; font-weight:600; display:flex; gap:10px; align-items:center;
}
.foot{ background:var(--bg-deep); border-top:1px solid var(--line); padding:40px 0; margin-top:40px; color:var(--muted); font-size:13px; }