/* 지갑·가디언 화면. 디자인 기준은 tokens.css 하나(본보기 Revolut, 형님 4848). 색·글꼴·크기·간격은 var(--...) 만 쓴다.
   토큰 밖은 둘: 주소·해시 대조용 고정폭 글꼴(--mono)과 입체 그림·원 단추의 크기(그림 자리라 px). */

:root {
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --field-h: var(--s-7);                       /* 입력칸·단추 높이 48px(터치 44px 이상) */
  --col: calc(var(--s-10) * 4);                /* 휴대폰 열 하나 512px */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--theme-page, var(--c-black)); }
body {
  color: var(--theme-text, var(--c-on-dark));
  font-family: var(--f-ui);
  font-size: var(--size-body, var(--t-body));
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;      /* Pretendard 합자가 주소 「0x9」를 「0×9」로 바꿔 보여서 끈다(no-contextual 로는 안 꺼짐, 실측) */
}
p { margin: 0; }
b, strong { font-weight: var(--w-head); }
a { color: var(--theme-text, var(--c-on-dark)); text-underline-offset: 3px; }

/* 머리줄 */
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: calc(var(--s-8) - var(--s-2)); padding: 0 var(--gutter-phone); border-bottom: 1px solid var(--theme-line, var(--c-line-dark)); }
.brand { font-size: var(--size-body, var(--t-body)); font-weight: var(--w-head); }
.where { font-size: var(--size-small, var(--t-small)); color: var(--theme-text-2, var(--c-on-dark-2)); text-align: right; }

.wrap { max-width: var(--col); margin: 0 auto; padding: var(--s-4) var(--gutter-phone) var(--s-9); }

/* 글 줄바꿈: 제목은 고르게, 본문은 마지막 줄 한 낱말 남지 않게 */
h1, h2, .summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* 화면 제목: 검정 위 큰 흰 글씨, 보통 굵기, 왼쪽 */
.intro { position: relative; padding: var(--s-6) 0 var(--s-5); }
.intro h1 { position: relative; font-size: var(--t-h1); font-weight: var(--w-display); line-height: var(--lh-head); letter-spacing: var(--ls-display); margin: 0 0 var(--s-3); }
.intro .lead { position: relative; color: var(--theme-text-2, var(--c-on-dark-2)); }
/* 만들기 화면: 입체 그림을 제목 위 띠로(글자와 겹치지 않게) */
#s-create .intro { padding-top: 0; }
.band { position: relative; height: 200px; margin: 0 calc(-1 * var(--gutter-phone)) var(--s-4); overflow: hidden; }
.band .glass { position: absolute; left: 50%; top: -110px; width: 420px; height: 420px; transform: translateX(-50%); pointer-events: none; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--theme-page, var(--c-black)) 100%); }

/* 카드: 그림자 없음, 모서리 20 */
.card { background: var(--theme-card, var(--c-card)); border-radius: var(--r-card); padding: var(--s-5); margin-bottom: var(--s-3); }
.card h1 { font-size: var(--t-h2); font-weight: var(--w-display); line-height: var(--lh-head); margin: 0 0 var(--s-2); }
.card h2 { font-size: var(--size-title, var(--t-h3)); font-weight: var(--w-head); line-height: var(--lh-head); margin: 0 0 var(--s-3); }
.card > p + p, .card > p + .hint { margin-top: var(--s-2); }
.card.quiet { background: transparent; border: 1px solid var(--theme-line, var(--c-line-dark)); }
.card.quiet h2 { font-size: var(--size-body, var(--t-body)); color: var(--theme-text-2, var(--c-on-dark-2)); }
.lead { color: var(--theme-text-2, var(--c-on-dark-2)); }
.hint { color: var(--theme-text-2, var(--c-on-dark-2)); font-size: var(--size-small, var(--t-small)); margin-top: var(--s-3); }
.hint:empty { display: none; }
.label { color: var(--theme-text-3, var(--c-on-dark-3)); font-size: var(--size-small, var(--t-small)); }
.mono { font-family: var(--mono); font-size: var(--size-small, var(--t-small)); font-variant-numeric: tabular-nums; }
dd.mono, .addr, .checks li.mono { text-wrap: balance; }   /* 42자 주소가 한 글자만 다음 줄로 넘어가지 않게 두 줄을 고르게 */
.chunks { word-break: normal; overflow-wrap: normal; }       /* 묶음 사이에서만 줄을 바꾼다 */
.chunks .ch { margin-right: 0.4em; white-space: nowrap; }
.chunks .ch:last-child { margin-right: 0; }
.addr { margin: var(--s-1) 0 0; padding: var(--s-3) var(--s-4); background: var(--theme-page, var(--c-black)); border-radius: var(--r-card); word-break: break-all; }
.fp { font-size: var(--t-h2); font-weight: var(--w-head); letter-spacing: 0.04em; margin: var(--s-1) 0; white-space: nowrap; }

/* 지갑 첫 화면: 시안 2 앱 홈 그대로(잔고 큰 숫자 + 입체 그림 + 원 단추 넷) */
.home { position: relative; margin: 0 calc(-1 * var(--gutter-phone)) var(--s-3); padding: var(--s-2) 0 var(--s-5); text-align: center; overflow: hidden; }
.home .glass { position: absolute; left: 50%; top: 0; width: 480px; height: 480px; transform: translateX(-50%); pointer-events: none; }
.home::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--c-scrim) 62%, var(--theme-page, var(--c-black)) 90%); }
.bal-block { position: relative; z-index: 1; display: inline-block; padding: var(--s-5) var(--s-7); background: radial-gradient(closest-side, var(--c-scrim), transparent); }
.bal-block .lab { font-size: var(--size-small, var(--t-small)); color: var(--theme-text-2, var(--c-on-dark-2)); }
.balance { margin-top: var(--s-1); font-size: var(--t-num-xl); font-weight: var(--w-head); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.balance .unit { font-size: var(--t-h3); font-weight: var(--w-body); color: var(--theme-text-2, var(--c-on-dark-2)); letter-spacing: 0; }
.bal-block .sub { margin-top: var(--s-2); font-size: var(--size-small, var(--t-small)); color: var(--theme-text-2, var(--c-on-dark-2)); }
.acts { position: relative; z-index: 1; display: flex; justify-content: space-around; padding: 0 var(--s-5); margin-top: var(--s-8); }
.act { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: var(--field-h); font-size: var(--t-caption); color: var(--theme-text, var(--c-on-dark)); text-decoration: none; }
.act .ic { width: var(--icon-circle); height: var(--icon-circle); border-radius: var(--r-btn); background: var(--theme-button, var(--icon-circle-fill)); display: grid; place-items: center; }
.act svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* 입력 */
.field { margin-top: var(--s-4); }
.field:first-child, h2 + .field, .label + .field { margin-top: var(--s-3); }
.field label { display: block; font-size: var(--size-small, var(--t-small)); font-weight: var(--w-head); color: var(--theme-text-2, var(--c-on-dark-2)); margin-bottom: var(--s-2); }
input:not([type=checkbox]), select { width: 100%; min-height: var(--field-h); padding: 0 var(--s-4); border: 1px solid var(--theme-line, var(--c-line-dark)); border-radius: var(--r-card); background: var(--theme-page, var(--c-black)); color: var(--theme-text, var(--c-on-dark)); font: inherit; font-size: var(--size-body, var(--t-body)); }
input.mono { font-family: var(--mono); font-size: var(--size-small, var(--t-small)); }
/* 주소 입력칸: 42자가 한 줄에 안 들어가 끝 글자가 숨던 것(검수 2차) → 두 줄 칸 */
textarea.addr-in { display: block; width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--theme-line, var(--c-line-dark)); border-radius: var(--r-card); background: var(--theme-page, var(--c-black)); color: var(--theme-text, var(--c-on-dark)); font-family: var(--mono); font-size: var(--size-small, var(--t-small)); line-height: var(--lh-body); resize: none; word-break: break-all; }
textarea.addr-in::placeholder { color: var(--theme-text-3, var(--c-on-dark-3)); }
textarea:focus-visible { outline: 2px solid var(--theme-text, var(--c-on-dark)); outline-offset: 2px; }
input::placeholder { color: var(--theme-text-3, var(--c-on-dark-3)); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--theme-text-2, var(--c-on-dark-2)) 50%), linear-gradient(135deg, var(--theme-text-2, var(--c-on-dark-2)) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--s-7); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--theme-text, var(--c-on-dark)); outline-offset: 2px; }

/* 단추: 알약 모양, 주된 일 하나만 강조색 */
.row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
button { font: inherit; font-size: var(--size-body, var(--t-body)); font-weight: var(--w-head); border-radius: var(--r-btn); padding: 0 var(--s-5); border: 0; background: var(--theme-button, var(--icon-circle-fill)); color: var(--theme-text, var(--c-on-dark)); cursor: pointer; min-height: var(--field-h); }
button.primary { background: var(--c-accent); color: var(--c-on-accent); }
button.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--theme-line, var(--c-line-dark)); }
button.danger { background: transparent; box-shadow: inset 0 0 0 1px var(--theme-warn-border, var(--c-down)); color: var(--theme-warn-text, var(--c-down)); }
button.small { font-size: var(--size-small, var(--t-small)); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.card > button { margin-top: var(--s-4); }

.err { color: var(--theme-warn-text, var(--c-down)); font-size: var(--size-small, var(--t-small)); margin-top: var(--s-3); }
.err:empty { display: none; }

/* 표: 체인별 상태 */
table.chains { width: 100%; border-collapse: collapse; font-size: var(--size-small, var(--t-small)); font-variant-numeric: tabular-nums; }
/* 체인별 상태: 표 머리줄 없이 목록 줄로(이름·잔고 한 줄, 상태 아래 줄). 머리줄은 화면 읽기용으로만 남김 */
table.chains thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.chains tbody, table.chains tr, table.chains td { display: block; }
table.chains tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--theme-line, var(--c-line-dark)); }
table.chains tr:last-child { border-bottom: 0; }
table.chains td:first-child { grid-column: 1; grid-row: 1; font-size: var(--size-body, var(--t-body)); font-weight: var(--w-head); }
table.chains td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--theme-text-2, var(--c-on-dark-2)); }
table.chains td:last-child { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-size: var(--size-body, var(--t-body)); }
table.chains tr.blocked td:nth-child(2) { color: var(--theme-warn-text, var(--c-down)); }

/* 서명 전 확인: 다른 카드와 같은 면(테두리 없이), 큰 요약 문장으로 구별 */
.summary { font-size: var(--t-h2); font-weight: var(--w-display); line-height: var(--lh-head); margin: 0 0 var(--s-5); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--s-4); margin: 0; }
dt, dd { padding: var(--s-3) 0; border-top: 1px solid var(--theme-line, var(--c-line-dark)); }
dt { color: var(--theme-text-3, var(--c-on-dark-3)); font-size: var(--size-small, var(--t-small)); }
dd { margin: 0; word-break: break-all; font-size: var(--size-small, var(--t-small)); }
.check { position: relative; margin-top: var(--s-4); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--s-6)); border-radius: var(--r-card); font-size: var(--size-small, var(--t-small)); }
.check::before { content: ""; position: absolute; left: var(--s-4); top: var(--s-3); width: var(--s-5); height: var(--s-5); border-radius: var(--r-btn); }
.check::after { content: ""; position: absolute; left: var(--s-4); top: var(--s-3); width: var(--s-5); height: var(--s-5); background: var(--c-on-accent); -webkit-mask: var(--i-check) center / 16px no-repeat; mask: var(--i-check) center / 16px no-repeat; }
.check.good { background: var(--theme-page, var(--c-black)); color: var(--theme-text, var(--c-on-dark)); }
.check.good::before { background: var(--c-accent); }
.check.bad { box-shadow: inset 0 0 0 1px var(--theme-warn-border, var(--c-down)); color: var(--theme-warn-text, var(--c-down)); }
.check.bad::before { box-shadow: inset 0 0 0 1.75px var(--theme-warn-border, var(--c-down)); }
.check.bad::after { background: var(--theme-warn-border, var(--c-down)); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.check:empty { display: none; }

/* 알림 카드: 경고는 내림 색 테두리, 결과는 강조색 원 안 체크. 잔고보다 크게 차지하지 않게 글은 작게 */
.card.alert, .card.bad { box-shadow: inset 0 0 0 1px var(--theme-warn-border, var(--c-down)); padding: var(--s-4); }
.card.alert h2 { font-size: var(--size-body, var(--t-body)); margin-bottom: var(--s-2); }
.card.alert p, .card.alert .warnlist { font-size: var(--size-small, var(--t-small)); }
.card.alert > button { margin-top: var(--s-3); }
.card.alert h2, .card.bad h2 { color: var(--theme-warn-text, var(--c-down)); }
.card.alert p, .card.bad p { color: var(--theme-text-2, var(--c-on-dark-2)); }
.card.ok h2, .card.alert h2, .card.bad h2 { position: relative; padding-left: calc(var(--s-5) + var(--s-3)); }
.card.ok h2::before, .card.alert h2::before, .card.bad h2::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--s-5); height: var(--s-5); margin-top: calc(var(--s-5) / -2); border-radius: var(--r-btn); }
.card.ok h2::after, .card.alert h2::after, .card.bad h2::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--s-5); height: var(--s-5); margin-top: calc(var(--s-5) / -2); -webkit-mask: var(--i-check) center / 16px no-repeat; mask: var(--i-check) center / 16px no-repeat; background: var(--c-on-accent); }
.card.ok h2::before { background: var(--c-accent); }
.card.alert h2::before, .card.bad h2::before { box-shadow: inset 0 0 0 1.75px var(--theme-warn-border, var(--c-down)); }
.card.alert h2::after, .card.bad h2::after { background: var(--theme-warn-border, var(--c-down)); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.card.ok p { color: var(--theme-text-2, var(--c-on-dark-2)); }

.callout { background: var(--theme-page, var(--c-black)); border-radius: var(--r-card); padding: var(--s-4); margin: var(--s-4) 0; color: var(--theme-text-2, var(--c-on-dark-2)); font-size: var(--size-small, var(--t-small)); }
.callout b { color: var(--theme-text, var(--c-on-dark)); }
.confirm { display: flex; gap: var(--s-3); align-items: center; margin: var(--s-4) 0; min-height: var(--field-h); font-weight: var(--w-head); }
.confirm input { appearance: none; -webkit-appearance: none; flex: none; width: var(--s-5); height: var(--s-5); margin: 0; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1.75px var(--theme-text-3, var(--c-on-dark-3)); cursor: pointer; }
.confirm input:checked { box-shadow: none; background: var(--c-accent) var(--i-check-white) center / 16px no-repeat; }
.status { font-size: var(--size-small, var(--t-small)); font-weight: var(--w-head); margin-top: var(--s-3); }
.status:empty { display: none; }
.confirm.dim { opacity: 0.55; }
[data-beginner-hide] { display: none !important; }
.site + .site { margin-top: var(--s-5); padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--theme-line, var(--c-line-dark)); }
.site h3 { margin: 0; }
.confirm input:disabled { cursor: not-allowed; }
.status.bad-text { color: var(--theme-warn-text, var(--c-down)); }
.warnlist { margin: 0 0 var(--s-2); padding-left: var(--s-5); color: var(--theme-text-2, var(--c-on-dark-2)); }
.warnlist li { margin-bottom: var(--s-2); }
.closed { position: relative; margin: var(--s-1) 0 0; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--s-6)); border-radius: var(--r-card); background: var(--theme-page, var(--c-black)); color: var(--theme-text, var(--c-on-dark)); font-size: var(--size-small, var(--t-small)); }
.closed::before { content: ""; position: absolute; left: var(--s-4); top: var(--s-3); width: var(--s-5); height: var(--s-5); background: var(--theme-warn-border, var(--c-down)); -webkit-mask: var(--i-alert-circle) center / contain no-repeat; mask: var(--i-alert-circle) center / contain no-repeat; }

.links { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.links li { border-top: 1px solid var(--theme-line, var(--c-line-dark)); }
.links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--field-h); font-size: var(--size-body, var(--t-body)); text-decoration: none; }
.links a::after { content: ""; flex: none; width: var(--s-2); height: var(--s-2); border-right: 1.75px solid var(--theme-text-3, var(--c-on-dark-3)); border-top: 1.75px solid var(--theme-text-3, var(--c-on-dark-3)); transform: rotate(45deg); }

/* 확인 목록: 통과는 강조색 원 안 체크, 확인 필요는 내림 색 원 안 느낌표(색과 모양 둘 다) */
.checks { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.checks li { position: relative; padding: var(--s-2) 0 var(--s-2) calc(var(--s-5) + var(--s-3)); font-size: var(--size-small, var(--t-small)); }
.checks li + li { border-top: 1px solid var(--theme-line, var(--c-line-dark)); }
.checks li::before, .checks li::after { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + 1px); width: var(--s-5); height: var(--s-5); border-radius: var(--r-btn); }
.checks li.pass::before { background: var(--c-accent); }
.checks li.pass::after { background: var(--c-on-accent); -webkit-mask: var(--i-check) center / 16px no-repeat; mask: var(--i-check) center / 16px no-repeat; }
.checks li.fail::before { box-shadow: inset 0 0 0 1.75px var(--theme-warn-border, var(--c-down)); }
.checks li.fail::after { background: var(--theme-warn-border, var(--c-down)); -webkit-mask: var(--i-alert) center / 16px no-repeat; mask: var(--i-alert) center / 16px no-repeat; }
.checks li.info { color: var(--theme-text-2, var(--c-on-dark-2)); padding-left: 0; }
.checks li .sub { display: block; font-family: var(--f-ui); font-size: var(--t-caption); color: var(--theme-text-3, var(--c-on-dark-3)); }
.checks li.info::before, .checks li.info::after { display: none; }
.checks li button { margin-top: var(--s-2); }
details.card summary { cursor: pointer; font-weight: var(--w-head); min-height: var(--s-6); display: flex; align-items: center; }
details.card summary::marker { color: var(--theme-text-3, var(--c-on-dark-3)); }

/* 선 아이콘(흰 선 한 벌, 선 1.75). 가면으로 써서 색은 토큰이 정한다 */
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E");
  --i-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
  --i-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
  .card { padding: var(--s-4) var(--s-4) var(--s-5); }
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: 0; }
  dd { border-top: 0; padding-top: var(--s-1); }
  .row button { flex: 1 1 100%; }
  .fp { font-size: var(--t-h3); letter-spacing: 0; }
}

/* E16 테마(별 시안 「네」): 값은 달 applyAppearance 가 이미 있는 토큰을 가리키게 넣는다(새 색 0). 홈의 입체 그림 띠는 어느 테마에서도 어두운 면 그대로. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.home, .band { --theme-page: var(--c-black); --theme-text: var(--c-on-dark); --theme-text-2: var(--c-on-dark-2); --theme-text-3: var(--c-on-dark-3); --theme-button: var(--icon-circle-fill); color: var(--theme-text); }
/* 조건 ③ Light 경고: 검정 글자 + 빨강 테두리·느낌표(밝은 바탕에서 빨강 글자는 3.71:1 이라 글자에 쓰지 않음). */
:root[data-theme="light"] .err:not(:empty) { position: relative; color: var(--theme-warn-text, var(--c-ink)); border: 1px solid var(--theme-warn-border, var(--c-down)); border-radius: var(--r-card); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--s-6)); }
:root[data-theme="light"] .err:not(:empty)::before { content: ""; position: absolute; left: var(--s-4); top: var(--s-3); width: var(--s-5); height: var(--s-5); background: var(--theme-warn-border, var(--c-down)); -webkit-mask: var(--i-alert-circle) center / contain no-repeat; mask: var(--i-alert-circle) center / contain no-repeat; }
/* 카드 안 Details 아래 빈 칸 없애기(별 조건 4, 달 시안 캡처). */
.card details.card { padding: 0; margin-bottom: 0; background: transparent; }
:root[data-theme="light"] .status.bad-text:not(:empty), :root[data-theme="light"] table.chains tr.blocked td:nth-child(2) { position: relative; box-shadow: inset 0 0 0 1px var(--theme-warn-border, var(--c-down)); border-radius: var(--r-card); padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + var(--s-5) + var(--s-1)); }
:root[data-theme="light"] .status.bad-text:not(:empty)::before, :root[data-theme="light"] table.chains tr.blocked td:nth-child(2)::before { content: ""; position: absolute; left: var(--s-3); top: var(--s-2); width: var(--s-5); height: var(--s-5); background: var(--theme-warn-border, var(--c-down)); -webkit-mask: var(--i-alert-circle) center / contain no-repeat; mask: var(--i-alert-circle) center / contain no-repeat; }
/* E19 도움말·피드백(시안 보조 CSS 둘 + 미리보기). */
textarea:not(.addr-in) { display: block; width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--theme-line, var(--c-line-dark)); border-radius: var(--r-card); background: var(--theme-page, var(--c-black)); color: var(--theme-text, var(--c-on-dark)); font: inherit; font-size: var(--size-body, var(--t-body)); line-height: var(--lh-body); resize: vertical; }
ol.steps { margin: var(--s-3) 0; padding-left: 1.3em; color: var(--theme-text-2, var(--c-on-dark-2)); }
ol.steps li.done { color: var(--theme-text-3, var(--c-on-dark-3)); text-decoration: line-through; }
pre.preview { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; margin: var(--s-2) 0 0; font-size: var(--size-small, var(--t-small)); }
.code-line { word-break: break-all; }
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
/* E09 Guardian 키 QR(그림 안에 흰 조용한 띠를 함께 그림)과 주인 기기 카메라 미리보기 */
.qr { display: block; width: auto; max-width: 100%; height: auto; margin-top: var(--s-3); image-rendering: pixelated; border-radius: 0; } /* 모서리를 둥글리면 QR 찾기 무늬가 잘려 못 읽음. 캔버스 크기 그대로(칸마다 4픽셀) 그려 늘이지 않음 */

/* walletdev1 A2: 잠금 화면(S-KEY-08)은 만들기 화면과 같은 틀(입체 그림 띠 + 제목), 비상 탈출 키트(S-REC-04) 미리보기와 인쇄 */
#s-lock .intro { padding-top: 0; }
.kit-chain { border-top: 1px solid var(--theme-line, var(--c-line-dark)); padding-top: var(--s-3); margin-top: var(--s-4); }
.kit-chain h3 { margin: 0 0 var(--s-2); font-size: var(--size-body, var(--t-body)); font-weight: var(--w-head); }
.kit-chain .label { margin-top: var(--s-3); }
#c-kit .fp { white-space: normal; }
#c-kit .warnlist { margin-top: var(--s-2); }
@media print {
  /* 인쇄는 키트 한 장만: 머리줄과 다른 카드·단추를 감추고, 종이에 맞게 흰 바탕·검정 글자(토큰 --c-paper·--c-ink) */
  body.printing-kit { background: var(--c-paper); color: var(--c-ink); }
  body.printing-kit .top, body.printing-kit #c-install, body.printing-kit #s-lock, body.printing-kit #s-create, body.printing-kit #s-recover,
  body.printing-kit #s-wallet > :not(#c-kit), body.printing-kit .kit-actions { display: none !important; }
  body.printing-kit .wrap { max-width: none; padding: 0; }
  body.printing-kit #c-kit { background: var(--c-paper); color: var(--c-ink); padding: 0; }
  body.printing-kit #c-kit .addr { background: var(--c-paper); color: var(--c-ink); padding: 0; }
  body.printing-kit #c-kit .label, body.printing-kit #c-kit .hint, body.printing-kit #c-kit .warnlist { color: var(--c-ink-2); }
  body.printing-kit .kit-chain { border-top-color: var(--c-line-light); }
}
#c-kit > .label { margin-top: var(--s-5); }
#c-kit > .label:first-of-type { margin-top: 0; }
#lock-recover { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--theme-line, var(--c-line-dark)); }
/* 개발 설정(손님 화면 밖): 시험 도우미는 개발 설정이 켜졌을 때만 보인다. 켜지면 common.js applyDevFlag 가 html 에 class dev 를 달고,
   꺼져 있으면 같은 함수가 [data-dev] 요소를 DOM 에서 지운다. 이 줄은 묶음이 돌기 전 한순간 단추가 비치지 않게 막는다(walletmerge 11/03). */
html:not(.dev) [data-dev] { display: none !important; }
.acts { flex-wrap: wrap; row-gap: var(--s-4); }