/* Pouchi escape page ("Pouchi 없이 옮기기"). Same product as the vault: colors, type, spacing and motion
   come only from tokens.css (copied at build from packages/pouchi-design/tokens.css), and the components
   below repeat apps/pouchi-vault/style.css values (auth frame, field, buttons, groups, inline error).
   Gutters: 20 px on phones, 48 px from 900 px. */
@import url("./tokens.css");

:root { --gutter: 20px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; font-family: var(--font); font-size: var(--fs-2); line-height: 1.5; font-weight: var(--fw-regular); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input { font: inherit; color: inherit; }
a { color: var(--primary); }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lockup { display: block; height: 26px; width: auto; color: var(--ink); }
.lockup .lk-sym { color: var(--primary); }
.sym { display: block; width: 100%; height: 100%; color: currentColor; }

/* Frame: one column on phones, brand panel and centered column from 900 px (vault auth screens) */
.scr { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.brandpanel { display: none; }
.pane { flex: 1; display: flex; flex-direction: column; }
.appbar { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: env(safe-area-inset-top); padding: 0 var(--gutter); }
.tools { display: flex; align-items: center; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-raised); color: var(--muted); font-size: var(--fs-1); font-weight: var(--fw-strong); white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.lang { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--surface-raised); }
.lang a { display: grid; place-items: center; min-width: 36px; height: 28px; padding: 0 var(--s-2); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-1); font-weight: var(--fw-strong); text-decoration: none; }
.lang a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.inner { flex: 1; display: flex; flex-direction: column; padding: 0 var(--gutter); }

/* Progress: back, one bar per step, "2/4" */
.progress-row { display: flex; align-items: center; gap: var(--s-3); height: 44px; margin-top: var(--s-1); }
.back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin-left: -12px; margin-right: -4px; border-radius: var(--r-pill); color: var(--ink); }
.back .ico { width: 24px; height: 24px; }
.progress { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-1); }
.progress i { height: 4px; border-radius: 2px; background: var(--line); transition: background-color var(--t-base) var(--ease-out); }
.progress i.done, .progress i.on { background: var(--primary); }
body.busy .progress i.on { animation: pulse 1s var(--ease-out) infinite alternate; }
@keyframes pulse { to { opacity: .35; } }
.step-count { min-width: 28px; text-align: right; font-size: var(--fs-1); color: var(--muted); font-weight: var(--fw-strong); }

/* Steps */
.step { flex: 1; display: flex; flex-direction: column; animation: push var(--t-slow) var(--ease-ios) both; }
@keyframes push { from { opacity: 0; transform: translateX(24px); } }
@keyframes pop { from { opacity: 0; transform: translateX(-24px); } }
body.nav-back .step { animation-name: pop; }
.grow { flex: 1; display: flex; flex-direction: column; }
.t { margin-top: var(--s-4); font-size: var(--fs-4); line-height: 1.28; font-weight: var(--fw-heavy); letter-spacing: -0.025em; text-wrap: balance; }
.t:focus { outline: none; box-shadow: none; }
.sub { margin-top: var(--s-3); color: var(--muted); text-wrap: pretty; }
.hint { margin-top: var(--s-2); font-size: var(--fs-1); color: var(--muted); text-wrap: pretty; }
.hint.with-ico { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.hint.with-ico .ico { width: 16px; height: 16px; margin-top: 1px; }
.sec { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-1); color: var(--muted); font-weight: var(--fw-strong); }

/* Field (vault .field) */
.field { display: flex; align-items: center; height: 56px; margin-top: var(--s-6); padding: 0 var(--s-4); border-radius: var(--r-md); background: var(--surface-raised); border: 1.5px solid var(--line-strong); transition: border-color var(--t-fast); }
.field:focus-within { border: 2px solid var(--primary); padding: 0 calc(var(--s-4) - 1px); }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-weight: var(--fw-regular); outline: none; box-shadow: none; caret-color: var(--primary); }
.field input::placeholder { color: var(--muted); font-weight: var(--fw-regular); }
.field .unit { margin-left: var(--s-2); color: var(--muted); font-weight: var(--fw-strong); }
.field-label { display: block; margin-top: var(--s-5); font-size: var(--fs-1); font-weight: var(--fw-strong); color: var(--muted); }
.field-label + .field { margin-top: var(--s-2); }
.step .sub + form > .field-label:first-child { margin-top: var(--s-6); }

/* Disclosure (고급, 보관한 키) */
.advanced { margin-top: var(--s-4); }
.advanced summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: var(--fs-1); font-weight: var(--fw-strong); cursor: pointer; list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: ""; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-fast); }
.advanced[open] summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.advanced[open] { padding-bottom: var(--s-2); }
.advanced .field-label { margin-top: var(--s-1); }
.advanced > .field { margin-top: var(--s-3); }
.advanced > .hint:first-of-type { margin-top: 0; }
.advanced .btn { margin-top: var(--s-3); }

/* Buttons (vault .btn) */
.btn { display: flex; width: 100%; height: 56px; align-items: center; justify-content: center; gap: var(--s-2); border-radius: 16px; font-weight: var(--fw-strong); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), opacity var(--t-fast); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.quiet { background: var(--surface-raised); color: var(--ink); }
.btn.link { height: 48px; color: var(--muted); font-weight: var(--fw-regular); }
.btn.small { white-space: nowrap; width: auto; height: 40px; padding: 0 var(--s-4); border-radius: var(--r-sm); }
.btn.small .ico { width: 16px; height: 16px; }
.iconbtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin-right: -10px; border-radius: var(--r-pill); color: var(--muted); }
body.busy .cta .btn { pointer-events: none; }
body.busy .cta .btn.primary { opacity: .7; }
.cta { display: grid; gap: var(--s-2); margin-top: auto; padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); }
.foot-note { margin-top: var(--s-2); text-align: center; font-size: var(--fs-1); color: var(--muted); text-wrap: pretty; }

/* Groups and rows (vault settings) */
.group { margin-top: var(--s-5); padding: 0 var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.sec + .group { margin-top: 0; }
.row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; }
.row + .row { border-top: 1px solid var(--line); }
.row.two { padding: var(--s-3) 0; }
.row-text { display: grid; gap: 2px; min-width: 0; }
.row-label { color: var(--muted); white-space: nowrap; }
.row.two .row-label { font-size: var(--fs-1); }
.row .val { min-width: 0; color: var(--ink); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-line { font-size: var(--fs-2); line-height: 1.5; color: var(--ink); white-space: nowrap; }
.keys-block:has(.keys-status:empty):has(.key-list:empty) { display: none; }
.keys-status { padding: var(--s-4) 0; color: var(--muted); }
.keys-status:empty { display: none; }
.key-list { margin: 0; padding: 0; list-style: none; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; }
.key-row + .key-row { border-top: 1px solid var(--line); }
.key-row code { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }

/* New owner key words */
.words-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); }
.words-head .sec { margin: 0; }
.word-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface-raised); user-select: all; }
.word { display: flex; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.wn { min-width: 16px; white-space: nowrap; text-align: right; font-size: var(--fs-1); color: var(--muted); user-select: none; }
.ww { font-size: 15px; font-weight: var(--fw-strong); white-space: nowrap; }
.check { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--primary-soft); font-weight: var(--fw-strong); cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--primary); }

/* Waiting card */
.wait-card { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); background: var(--primary-soft); }
.wc-label { font-size: var(--fs-1); font-weight: var(--fw-strong); color: var(--muted); }
.wc-time { margin-top: var(--s-1); font-size: var(--fs-4); line-height: 1.2; font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.wc-line { margin-top: var(--s-1); color: var(--muted); }
.warn { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); text-wrap: pretty; }

/* Status: success line or vault inline error, placed in the current step above its button */
.status { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-4); color: var(--ink); text-wrap: pretty; }
.status:empty { display: none; }
.status.ok::before { content: ""; flex: none; width: 11px; height: 6px; margin: 7px 4px 0 3px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.status.inline-error { color: var(--danger); }
.status.inline-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; line-height: 1; font-weight: var(--fw-heavy); }
.err-code { margin: var(--s-1) 0 0 26px; color: var(--muted); font-size: var(--fs-1); }
.err-code summary { cursor: pointer; width: max-content; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.err-code summary::-webkit-details-marker { display: none; }
.err-code code { display: block; margin-top: var(--s-1); font-family: var(--mono); }

/* Transactions */
.tx-panel .sec { margin-top: var(--s-5); }
.tx-list { margin: 0; list-style: none; }
.tx { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; }
.tx + .tx { border-top: 1px solid var(--line); }
.tx a { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-1); font-weight: var(--fw-strong); text-decoration: none; }
.tx a .ico { width: 16px; height: 16px; }
.tx-state { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }
.tx-state.failed { color: var(--danger); }

/* Desktop: brand panel and a 440 px column, as the vault sign-in */
@media (min-width: 900px) {
  :root { --gutter: 48px; }
  .auth { display: grid; grid-template-columns: 440px minmax(0, 1fr); }
  .brandpanel { display: block; background: var(--brand); color: #ffffff; }
  .panel-in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--s-7); }
  .panel-lockup .lockup, .panel-lockup .lockup .lk-sym { color: #ffffff; height: 30px; }
  .panel-body { display: grid; gap: var(--s-5); margin: auto 0; }
  .panel-mark { width: 64px; height: 64px; color: #f7f7f5; }
  .panel-line { font-size: var(--fs-4); font-weight: var(--fw-heavy); line-height: 1.3; letter-spacing: -0.02em; max-width: 340px; text-wrap: balance; }
  .panel-steps { display: grid; gap: var(--s-3); margin: var(--s-2) 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .6); }
  .panel-steps li { display: flex; align-items: center; gap: var(--s-3); }
  .ps-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .36); font-size: var(--fs-1); font-weight: var(--fw-strong); }
  .ps-mark .ico { width: 16px; height: 16px; stroke-width: 2.25; }
  .panel-steps li.done { color: rgba(255, 255, 255, .86); }
  .panel-steps li.done .ps-mark { background: rgba(255, 255, 255, .16); box-shadow: none; }
  .panel-steps li.on { color: #ffffff; font-weight: var(--fw-strong); }
  .panel-steps li.on .ps-mark { background: #ffffff; color: var(--brand); box-shadow: none; }
  .pane { position: relative; justify-content: center; min-height: 100vh; }
  .appbar { position: absolute; top: 0; left: 0; right: 0; height: 80px; margin: 0; padding: 0 var(--s-7); justify-content: flex-end; }
  .m-lockup { display: none; }
  .inner { flex: none; width: 100%; max-width: 440px; margin: 0 auto; padding: 104px 0 var(--s-7); }
  .step, .grow { flex: none; }
  .t { margin-top: var(--s-3); }
  .cta { margin-top: var(--s-6); padding: 0; }
}