/* ─────────────────────────────────────────────────────────────
     포인파이 — 포인파이와 같은 뼈대, 색만 밤색 계열로 다르게 (2026-09-05)

     ★ 색은 전부 아래 :root(야간) 와 html[data-theme="light"](주간) 토큰에 모여 있다.
       화면 규칙에는 색 숫자를 적지 말 것. 적으면 테마를 바꿔도 그 자리만 안 바뀐다.
     ★ 포인파이는 짙은 남색 + 청록. 포인파이는 짙은 밤색 + 구운 밤빛.
       PIT 금색·소각 빨강·추천인 보라는 뜻이 있는 색이라 두 지갑이 같다.

     고친 것
       1) 글자 크기. 원본이 8~9px 대라 실제 휴대폰에서 읽기 어려웠다.
          기본페이·포인파이의 눈금(본문 12.5 · 라벨 11.5 · 제목 19)으로 올렸다.
       2) 색. 기본페이 계열로 맞췄다 — 짙은 남색 바탕에 청록 강조.
          PIT 만 금색을 남겨 두 자산이 눈으로 구분되게 했다.
       3) 리워드 화면. 기본페이의 「비율 줄」 모양(라벨 · 슬라이더 · 퍼센트 칸)으로 바꾸고,
          설정과 실행을 구역으로 갈랐다.
       4) 여백. 카드마다 제각각이던 값을 하나로 통일했다.

     기능·id·동작은 원본 그대로다. 스크립트는 손대지 않았다.
     ───────────────────────────────────────────────────────────── */

  :root{
    color-scheme:dark;
    /* 밤색 팔레트 — 포인파이 (포인파이는 남색·청록) */
    --bg:#1C110B; --card:#2A1810; --card2:#221309; --line:#43291C;
    --txt:#F5EBE2; --sub:#AF9080; --dim:#977A6A;
    --key:#8C4A22; --key2:#6B3416; --on-key:#FDF3EC;
    --green:#22C55E; --gold:#C99A3A; --purple:#A494DC; --red:#EF6461; --blue:#C97F4A;

    /* ═══ 테마 토큰 (2026-09-03, 주간/야간) ═══
       ★ 아래 값은 그날까지 파일 곳곳에 **숫자로 박혀 있던 색**에 이름만 붙여 모은 것이다.
         값은 안 바꿨다 — 야간 화면은 전과 같아야 한다.
       ★ 화면 규칙에 색 숫자를 다시 적지 말 것. 숫자를 적으면 주간에서 그 자리만 안 바뀐다.
         (예외: .qr 의 흰 바탕·검은 글자 — QR 은 어느 테마에서도 희어야 읽힌다.)
       ★ 주간 값은 바로 아래 html[data-theme="light"] 에 있다. 이름을 새로 만들면 거기에도 짝을 넣을 것.
       ★ tint(얇은 바탕) 와 on-*-tint(그 위 글자) 는 짝이다. 바탕만 tint 로 바꾸고 글자를 --txt 로 두면
         야간엔 괜찮아 보여도 주간에서 안 읽힌다. */
    /* 바탕·틀 */
    --ground:#120A06;            /* html·body 맨 바닥 */
    --stage-glow:#3A2114;        /* 넓은 화면에서 앱 뒤에 비치는 빛 */
    --nav:#150C07;               /* 아래 탭바 */
    --deep:#1A0F09;              /* 막대 트랙·카메라 상자처럼 바탕보다 더 깊은 곳 */
    --ctrl:#4A3327;              /* 알약 단추·토글 몸통 */
    --toast:#3A2415;
    --dot-off:#6A5245;           /* 「연결 안 됨」 점 */
    --knob:#FFFFFF;              /* 토글 손잡이 — 두 테마 모두 흰색 */
    --qr-dark:#1A0F09;           /* QR 점 색 (pit-qr.js 기본값과 같다 — 참고용) */
    /* 덮개·그림자 */
    --scrim:rgba(18,10,6,.92);        /* 지갑 시작·서명 확인·카메라 덮개 */
    --scrim-soft:rgba(12,6,3,.88);    /* 모달 뒤 */
    --veil:rgba(18,10,6,.74);         /* 전송 중 덮개 — 뒤가 비쳐야 「멈춘 것」으로 안 보인다 */
    --shadow:rgba(0,0,0,.35);
    --shadow-45:rgba(0,0,0,.45); --shadow-50:rgba(0,0,0,.5);
    --shadow-55:rgba(0,0,0,.55); --shadow-60:rgba(0,0,0,.6);
    /* 살짝 밝게(fg-a) · 살짝 어둡게(sink) 깐 것 */
    --fg-a-03:rgba(255,255,255,.03); --fg-a-08:rgba(255,255,255,.08); --fg-a-80:rgba(255,255,255,.8);
    --sink:rgba(0,0,0,.25); --sink-soft:rgba(0,0,0,.14);
    --line-soft:rgba(67,41,28,.6);
    /* 색을 얇게 깐 바탕(tint) 과 그 위 글자(on-*-tint) */
    --tint-key:rgba(140,74,34,.20);      --on-key-tint:#F5C3A2;
    --tint-blue:rgba(201,127,74,.14);    --on-blue-tint:#F0BC96;
    --tint-red:rgba(239,100,97,.12);     --on-red-tint:#FFB3B1;
    --tint-gold:rgba(201,154,58,.12);    --on-gold-tint:#F0D9A6;
    --tint-purple:rgba(164,148,220,.12); --on-purple-tint:#C3B7E6;
    --tint-green:rgba(34,197,94,.12);    --on-green-tint:#7FDCA6;
    --tint-dim:rgba(175,144,128,.14);    /* 회색 딱지 (유동성 화면) */
    /* 색을 얇게 깐 테두리 */
    --edge-key:rgba(140,74,34,.55);
    --edge-blue:rgba(201,127,74,.32);   --edge-blue-hi:rgba(201,127,74,.48);
    --edge-red:rgba(239,100,97,.32);   --edge-red-hi:rgba(239,100,97,.45);
    --edge-gold:rgba(201,154,58,.4);
    --edge-purple:rgba(164,148,220,.4);
    --edge-green:rgba(34,197,94,.3);
    --glow-blue:rgba(229,147,106,.85);  /* QR 스캔선 빛 */
    /* 글자 */
    --key-txt:#E5936A;           /* 청록 강조 글자 */
    --acc:#E5936A;               /* 전송 중 덮개의 파랑 */
    --on-key-soft:#FDF3EC;       /* tint-key 바탕 위 글자 — 야간엔 --on-key 와 같고 주간엔 짙어진다 */
    --on-danger:#FFFFFF; --on-danger-off:rgba(255,255,255,.45);   /* 지갑 삭제 단추 글자 (켜짐·잠김) */
    --on-hero:#FDF3EC; --on-hero-sub:#DDB99B;   /* 잔액 카드 위 글자 — 카드는 주간에도 짙은 청록 */
    --sum-txt:#F0A87E;           /* 계산표 합계 */
    --pct-green-txt:#4ADE80;
    --coin-kaia-bg:#3A2414; --coin-kaia-txt:#DEB48C;
    --safebar-ok-txt:#04240f; --safebar-off-txt:#2a1c00;
    --burn-a:#FF8A87; --burn-b:#C2504E;   /* 소각 — 경고 빨강보다 한 톤 낮은 빨강 (글자·막대) */
    --gold-hi:#E0B45C;
    --bar-vault:#5A4436; --bar-lock:#7A6CC4;   /* 공시 발행량 막대 */
    /* 퍼센트 칸 테두리 */
    --pct-green:#2A6E45; --pct-purple:#4D4778; --pct-gold:#6A5628; --pct-red:#6B3230;
    /* 그라데이션·단색 상자 */
    --hero-a:#7A3E1C; --hero-b:#3A1C0C; --hero-line:#A85C2A;     /* 잔액 카드 */
    --sum-a:#2E1C11; --sum-b:#241408; --sum-line:#4A2F1F;        /* 계산표 */
    --inst-a:#38210F; --inst-b:#251508; --inst-line:#59371D;     /* 앱 설치 띠 */
    --lp-a:#3A2312; --lp-b:#221309;                              /* 유동성 총액 카드 */
    --danger-a:#E4514E; --danger-b:#C13B39;                      /* 지갑 삭제 단추 */
    --warn-a:#8A6E12; --warn-b:#6D5610; --warn-line:#B08C22;     /* 외부 출금 단추 */
    --purple-deep:#4A3F79; --purple-line:#66589C;                /* 추천인 단추 */
  }

  /* ═══ 주간 테마 (2026-09-03) ═══
     ★ pit-theme.js 가 <html data-theme="light"> 를 붙이면 이 값들이 위 야간 값을 덮는다.
       야간은 위 :root 그대로다 — 여기엔 야간 값이 하나도 없다.
     ★ 잔액 카드·지갑 삭제·외부 출금·추천인 단추는 주간에도 짙은 색을 지킨다.
       흰 글자가 그 위에 얹히므로 바탕을 밝히면 글자가 사라진다.
     ★ 글자색은 밝은 바탕에서 4.5:1 이상 나오게 골랐다 (on-*-tint 는 그 tint 위에서 잰 값). */
  html[data-theme="light"]{
    color-scheme:light;
    --bg:#FAF4EE; --card:#FFFFFF; --card2:#F3E9E0; --line:#E3D3C6;
    --txt:#2A1A11; --sub:#6B5142; --dim:#8E7263;
    --key:#8C4A22; --key2:#6B3416; --on-key:#FFFFFF;
    --green:#15803D; --gold:#9A6B12; --purple:#6B5BB3; --red:#C62828; --blue:#A0562A;
    --bid:#167A4B; --ask:#C0392B;                      /* 호가창 — 아래쪽 :root 것을 덮는다 */
    --bid-bg:rgba(22,122,75,.14); --ask-bg:rgba(192,57,43,.14);
    --ground:#F2E8DF; --stage-glow:#EBDCCF; --nav:#FFFFFF; --deep:#E8DACD;
    --ctrl:#E3D3C6; --toast:#FFFFFF; --dot-off:#C9B4A4; --knob:#FFFFFF; --qr-dark:#1A0F09;
    --scrim:rgba(242,232,223,.94); --scrim-soft:rgba(242,232,223,.88); --veil:rgba(242,232,223,.72);
    --shadow:rgba(70,40,20,.14);
    --shadow-45:rgba(70,40,20,.14); --shadow-50:rgba(70,40,20,.16);
    --shadow-55:rgba(70,40,20,.18); --shadow-60:rgba(70,40,20,.2);
    --fg-a-03:rgba(42,26,17,.04); --fg-a-08:rgba(42,26,17,.08); --fg-a-80:rgba(255,255,255,.92);
    --sink:rgba(42,26,17,.06); --sink-soft:rgba(42,26,17,.035);
    --line-soft:rgba(227,211,198,.8);
    --tint-key:rgba(140,74,34,.13);      --on-key-tint:#7A3E18;
    --tint-blue:rgba(160,86,42,.12);    --on-blue-tint:#82401A;
    --tint-red:rgba(198,40,40,.12);      --on-red-tint:#9B1C1C;
    --tint-gold:rgba(154,107,18,.12);    --on-gold-tint:#7A5A12;
    --tint-purple:rgba(107,91,179,.12);  --on-purple-tint:#4B3E99;
    --tint-green:rgba(21,128,61,.12);    --on-green-tint:#14532D;
    --tint-dim:rgba(107,81,66,.12);
    --edge-key:rgba(140,74,34,.45);
    --edge-blue:rgba(160,86,42,.3);   --edge-blue-hi:rgba(160,86,42,.45);
    --edge-red:rgba(198,40,40,.32);    --edge-red-hi:rgba(198,40,40,.45);
    --edge-gold:rgba(154,107,18,.4);
    --edge-purple:rgba(107,91,179,.4);
    --edge-green:rgba(21,128,61,.3);
    --glow-blue:rgba(160,86,42,.55);
    --key-txt:#8A4A1E; --acc:#A0562A;
    --on-key-soft:#7A3E18;
    --on-danger:#FFFFFF; --on-danger-off:rgba(155,28,28,.55);
    --on-hero:#FFFFFF; --on-hero-sub:#EAC8AC;
    --sum-txt:#7A3E18;
    --pct-green-txt:#15803D;
    --coin-kaia-bg:#F6E7D8; --coin-kaia-txt:#7A4A22;
    --safebar-ok-txt:#04240f; --safebar-off-txt:#2a1c00;
    --burn-a:#C0392B; --burn-b:#8E2B22;
    --gold-hi:#B8842A;
    --bar-vault:#B9A392; --bar-lock:#6B5BB3;
    --pct-green:#8FCFA9; --pct-purple:#B9AEE3; --pct-gold:#E0C98F; --pct-red:#EFA9A6;
    --hero-a:#7A3E1C; --hero-b:#3A1C0C; --hero-line:#A85C2A;
    --sum-a:#FFFFFF; --sum-b:#F3E9E0; --sum-line:#DFCDBE;
    --inst-a:#FFFFFF; --inst-b:#F3E9E0; --inst-line:#DFCDBE;
    --lp-a:#FFFFFF; --lp-b:#F3E9E0;
    --danger-a:#E4514E; --danger-b:#C13B39;
    --warn-a:#8A6E12; --warn-b:#6D5610; --warn-line:#B08C22;
    --purple-deep:#4A3F79; --purple-line:#66589C;
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:var(--ground);color:var(--txt);
    font:14px/1.6 Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-tap-highlight-color:transparent}
  button,input{font:inherit;color:inherit}
  button{cursor:pointer}
  .stage{min-height:100svh;display:grid;place-items:center;padding:22px;
    background:radial-gradient(circle at 50% 0,var(--stage-glow) 0,transparent 42%)}
  .app{width:min(460px,100%);height:min(940px,calc(100svh - 44px));min-height:690px;
    display:flex;flex-direction:column;overflow:hidden;position:relative;
    border:1px solid var(--line);border-radius:22px;background:var(--bg);
    box-shadow:0 28px 90px var(--shadow-55)}

  /* ── 상단 ── */
  header{height:58px;display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;
    gap:8px;padding:0 12px;border-bottom:1px solid var(--line)}
  header strong{text-align:center;font-size:17px;font-weight:900;letter-spacing:-.4px}
  header strong span{color:var(--blue)}
  .icon-btn{width:34px;height:34px;border:0;border-radius:10px;background:transparent;
    color:var(--sub);font-size:17px}
  .network{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:12px;font-weight:800}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--dot-off)}
  .dot.on{background:var(--green)}

  /* ── 화면 ── */
  .screen{flex:1;overflow-y:auto;scrollbar-width:none}
  .screen::-webkit-scrollbar{display:none}
  .page{display:none;padding:18px 16px 26px}
  .page.on{display:block}

  .title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:16px}
  .title small{display:block;color:var(--sub);font-size:12.5px;font-weight:800}
  .title h1{margin:3px 0 0;font-size:20px;font-weight:900;letter-spacing:-.5px}
  .chip{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    border:1px solid var(--line);border-radius:999px;background:var(--card);
    padding:7px 11px;color:var(--sub);font-size:12px;font-weight:800}
  .back-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .back-title button{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;
    background:var(--card);color:var(--txt);font-size:17px}
  .back-title h1{margin:0;font-size:20px;font-weight:900}
  .back-title b{margin-left:auto;color:var(--sub);font-size:12px;font-weight:800}

  /* ── 잔액 ── */
  /* ★ 이 카드는 주간에도 짙은 청록이다 (2026-09-03). 그래서 글자색을 몸(--txt)에서 물려받지 않고
     --on-hero 계열로 못박는다 — 야간 값은 --txt·--sub 와 같아 전과 똑같이 보인다. */
  .balance{border:1px solid var(--hero-line);border-radius:18px;padding:16px 16px 14px;
    background:linear-gradient(160deg,var(--hero-a),var(--hero-b));color:var(--on-hero)}
  .balance-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    color:var(--on-hero-sub);font-size:12.5px;font-weight:800}
  /* 윗줄은 네트워크·원화 환산(오른쪽), 아랫줄은 **USDT + 금액**을 한 줄로 오른쪽에.
     ★ 자릿수가 길어지면 카드를 밀고 나가므로 아래 .balance.d2/.d3 로 줄인다. */
  .balance-head p{margin:0 0 0 auto;color:var(--on-hero-sub);font-size:12.5px;font-weight:700;
    text-align:right;min-width:0}
  /* 금액 앞에 붙는 종목 이름 — 숫자보다 작지만 윗줄 글씨보다는 크게 */
  .balance strong .unit{font-style:normal;font-size:16px;font-weight:900;
    color:var(--fg-a-80);letter-spacing:0;flex:0 0 auto}
  /* 종목은 **왼쪽**, 금액은 **오른쪽** — 한 줄에서 양쪽으로 벌린다.
     ★ 자릿수가 길어지면 아래 .balance.d2/.d3 로 함께 줄여 한 줄을 지킨다. */
  .balance strong{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin:8px 0 14px;font-size:31px;font-weight:900;
    letter-spacing:-1px;background:transparent;border:0;color:inherit;
    padding:0;font-variant-numeric:tabular-nums;width:100%}
  /* 「$ 282.88」이 한 덩어리로 오른쪽에 붙게 감싼다 */
  .balance strong .amt{display:inline-flex;align-items:baseline;min-width:0}
  .balance strong small{font-size:14px;color:var(--on-hero-sub);font-weight:800;margin-left:3px}
  /* (환산 줄은 이제 .balance-head 안에 있다) */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .actions button{border:1px solid var(--line);border-radius:11px;background:var(--tint-key);
    color:var(--on-key);padding:12px;font-size:14px;font-weight:800}

  .primary{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
    border:0;border-radius:12px;padding:13px;font-size:15px;font-weight:800;
    background:linear-gradient(180deg,var(--key),var(--key2));color:var(--on-key);
    text-decoration:none}
  .primary:disabled{opacity:.45}
  .outline{width:100%;margin-top:9px;border:1px solid var(--line);border-radius:12px;
    background:transparent;color:var(--txt);padding:12px;font-size:14.5px;font-weight:800}

  /* ── 고지 ── */
  .custody{display:flex;align-items:flex-start;gap:10px;margin-top:10px;
    border:1px solid var(--edge-green);border-radius:13px;background:var(--tint-green);
    padding:12px;color:var(--on-green-tint)}
  .custody b{display:block;font-size:13px;font-weight:800}
  .custody span{display:block;margin-top:4px;color:var(--on-green-tint);font-size:12px;line-height:1.6}
  .shield{width:24px;height:24px;flex:0 0 auto;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;font-size:13px;font-style:normal}
  .warning{display:flex;gap:9px;align-items:flex-start;margin:12px 0;
    border:1px solid var(--line);border-radius:12px;background:var(--card2);
    padding:12px;color:var(--sub);font-size:12.5px;line-height:1.65}
  .warning.gold{border-color:var(--edge-gold);background:var(--tint-gold);color:var(--on-gold-tint)}

  /* ── 구역 제목 ── */
  .section-title{display:flex;align-items:center;justify-content:space-between;
    margin:20px 2px 9px;font-size:14px;font-weight:900}
  .section-title button{border:0;background:transparent;color:var(--sub);font-size:16px}

  /* ── 자산 ── */
  .assets{display:grid;gap:8px}
  .asset{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
    border-radius:14px;background:var(--card);padding:13px}
  .coin{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    font-weight:900;font-size:15px;font-style:normal;flex:0 0 auto}
  /* ★ 세 토큰 모두 **공식 심볼**을 쓴다 (2026-08-28).
     지갑·탐색기·시세판이 서로 다른 그림을 보여 주면 그것만으로 가짜처럼 보인다.
     예전에는 PIT 만 그림이고 KAIA·USDT 는 글자('K'·'₮')였다.
     ★ 그림이 안 뜨면 글자가 그대로 보이게 두었다 — 빈 동그라미보다 낫다. */
  .coin.kaia{background:var(--coin-kaia-bg);color:var(--coin-kaia-txt);
    background-image:url('./kaia-64.svg');background-size:cover;background-position:center;
    color:transparent;font-size:0}
  .coin.usdt{background:var(--tint-blue);color:var(--blue);
    background-image:url('./usdt-64.svg');background-size:cover;background-position:center;
    color:transparent;font-size:0}
  .coin.pit{background:transparent;color:transparent;font-size:0;
    background-image:url('./pit-64.png');background-size:cover;background-position:center}
  .asset div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .asset b{font-size:14.5px;font-weight:800}
  .asset small{color:var(--sub);font-size:12px;font-weight:700}
  .asset em{margin-left:auto;font-style:normal;display:flex;flex-direction:column;
    align-items:flex-end;gap:2px;min-width:0}
  .asset em b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
  .asset em small{color:var(--sub);font-size:12px;font-weight:700;
    font-variant-numeric:tabular-nums}

  /* ── 카드 ── */
  .card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:15px}
  .card + .card{margin-top:10px}
  .card h2{margin:0 0 12px;font-size:14px;font-weight:900}

  /* ── 받기 ── */
  .intro{margin:0 auto 14px;max-width:410px;color:var(--sub);font-size:13px;line-height:1.7}
  .intro b{color:var(--txt)}
  /* ★ QR 은 테마와 상관없이 흰 바탕·검은 글자여야 읽힌다 — 이 줄만 색 숫자를 그대로 둔다 (2026-09-03) */
  .qr{width:214px;height:214px;margin:0 auto;border-radius:14px;background:#fff;padding:11px;
    display:grid;place-items:center;color:#111;font-size:13px;font-weight:700}
  .qr canvas,.qr img{width:100%!important;height:100%!important}
  .round-actions{display:flex;justify-content:center;gap:30px;margin:14px 0 14px}
  .round-actions button{border:0;background:transparent;color:var(--sub);font-size:12px;font-weight:800}
  .round-actions button i{width:40px;height:40px;margin:0 auto 6px;border:1px solid var(--line);
    border-radius:50%;background:var(--card);color:var(--blue);
    display:grid;place-items:center;font-style:normal;font-size:16px}
  .address{border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:12px;
    text-align:center;word-break:break-all;color:var(--txt);
    font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6}

  /* ── DEX ── */
  .pair{padding:16px}
  .pair-head{display:flex;align-items:center;margin-bottom:12px}
  .pair-head .coin + .coin{margin-left:-10px}
  .pair-head div{margin-left:12px}
  .pair-head b{font-size:16px;font-weight:900}
  .pair-head small{display:block;margin-top:2px;color:var(--sub);font-size:12px;font-weight:700}
  .pair>p{margin:0;color:var(--sub);font-size:13px;line-height:1.7}
  .contract{margin-top:11px}
  .contract label{display:block;color:var(--sub);font-size:12px;font-weight:800;margin-bottom:5px}
  /* ★ 글자를 1px 키우면서(2026-09-04) 42자짜리 계약 주소가 상자를 비집고 나갔다.
     글자를 도로 줄이는 대신 **넘치면 접히게** 한다 — 주소는 붙여 쓰는 글자라
     그냥 두면 안 접힌다. */
  .contract button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
    border:1px solid var(--line);border-radius:11px;background:var(--card2);color:var(--txt);
    padding:11px;font-size:12.5px;font-family:ui-monospace,monospace;
    overflow-wrap:anywhere;word-break:break-all;text-align:left}
  .note{color:var(--dim);font-size:12px;line-height:1.65;margin:12px 2px 0}

  /* ── 리워드: 기본페이식 비율 줄 ── */
  .rate-setting + .rate-setting{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
  .rate-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
  .rate-label span:first-child{font-size:13.5px;font-weight:800}
  .rate-label span:last-child{color:var(--dim);font-size:12px;font-weight:700}
  /* ★ 폭은 92px 그대로 둔다 (2026-08-30).
     리워드 끝이 34.65 가 되면서 「34.6!」로 잘리길래 두 번 넓혀 봤는데,
     두 번 다 격자가 무너져 손잡이가 점으로 줄었다 — 남의 규칙이 얽힌 자리다.
     대신 **끝을 소수점 한 자리로 내림**해 34.6 으로 만들었다(syncRewardCap).
     체인 한계보다 낮은 쪽이라 안전하고, 0.05% 는 10만원에 50원이다. */
  .rate-control{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:11px}
  .rate-control input[type=range]{width:100%;accent-color:var(--green);cursor:pointer;margin:0}
  .rate-control input.purple{accent-color:var(--purple)}
  .percent-input{display:flex;align-items:center;border:1px solid var(--pct-green);border-radius:10px;
    background:var(--card2);padding:0 9px}
  .percent-input input{width:100%;min-width:0;border:0;outline:0;background:transparent;
    padding:9px 0;text-align:right;font-size:14px;font-weight:900;color:var(--pct-green-txt);
    font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
  /* ★ 위아래 화살표를 없앤다. 좁은 칸에서 숫자를 밀어내 글자가 잘렸다. */
  .percent-input input::-webkit-outer-spin-button,
  .percent-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .percent-input b{margin-left:4px;color:var(--sub);font-size:12px;font-weight:800}
  .percent-input.purple{border-color:var(--pct-purple)}
  .percent-input.purple input{color:var(--purple)}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
  .field-label{display:block;color:var(--sub);font-size:12px;font-weight:800;margin-bottom:5px}
  .field{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;
    background:var(--card2);padding:0 11px}
  .field input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:11px 0;
    font-size:14px;font-variant-numeric:tabular-nums}
  .field b{color:var(--sub);font-size:12.5px;font-weight:800;white-space:nowrap}
  /* 누를 수 있는 단위 표시 — 글자만 있으면 눌러도 되는 줄 모른다. 테두리로 알린다. */
  .unitpick{flex:0 0 auto;border:1px solid var(--line);border-radius:8px;background:var(--card2);
    color:var(--txt);font-size:12.5px;font-weight:800;padding:5px 10px;white-space:nowrap}
  .unitpick:active{background:var(--card)}

  .reference{display:flex;gap:9px;align-items:flex-start;margin-top:12px;
    border:1px solid var(--edge-blue);border-radius:11px;background:var(--tint-blue);
    color:var(--on-blue-tint);padding:11px;font-size:12px;line-height:1.6}
  .budget{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
    padding:13px;border-radius:12px;background:var(--card2);color:var(--sub);
    font-size:13px;font-weight:800}
  .budget b{color:var(--gold);font-size:15px;font-variant-numeric:tabular-nums}

  .execute-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
  .execute-head h2{margin:0}
  .execute-head span{color:var(--dim);font-size:12px;font-weight:700}
  .reward-kind{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  .reward-kind button{border:1px solid var(--line);border-radius:10px;background:var(--card2);
    color:var(--sub);padding:11px;font-size:13.5px;font-weight:800}
  .reward-kind button.on{border-color:var(--key);background:var(--tint-key);color:var(--on-key-soft)}
  .reward-entry{display:grid;grid-template-columns:1fr 96px;gap:8px}
  .reward-entry input{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;
    background:var(--card2);outline:0;padding:11px;font-size:13px;font-family:ui-monospace,monospace}
  .reward-entry button{border:1px solid var(--line);border-radius:10px;background:var(--tint-key);
    color:var(--on-key-soft);font-size:12.5px;font-weight:800}
  .reward-execute .field{margin-bottom:0}
  .reward-execute > .primary{margin-top:14px}
  .stack{margin-top:12px}

  .ref-box{margin-top:12px;border:1px solid var(--edge-purple);border-radius:12px;
    background:var(--tint-purple);padding:12px}
  .ref-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;
    color:var(--on-purple-tint);font-size:13px;font-weight:800}
  .ref-head em{font-style:normal;font-size:12px;color:var(--sub)}
  .ref-row{display:grid;grid-template-columns:1fr 62px;gap:7px}
  .ref-row input{width:100%;min-width:0;border:1px solid var(--pct-purple);border-radius:10px;
    background:var(--card2);outline:0;padding:10px;font-size:12.5px;font-family:ui-monospace,monospace}
  .ref-row button{border:1px solid var(--purple-line);border-radius:10px;background:var(--purple-deep);
    color:var(--on-key);font-size:13px;font-weight:800}

  .dex-link{width:100%;display:flex;align-items:center;gap:11px;margin-top:10px;
    border:1px solid var(--edge-gold);border-radius:14px;background:var(--tint-gold);
    color:var(--gold);padding:14px;text-align:left}
  .dex-link span:first-child{font-size:17px}
  .dex-link span.txt{display:flex;flex:1;flex-direction:column;gap:2px}
  .dex-link b{font-size:14px;font-weight:800}
  .dex-link small{color:var(--on-gold-tint);font-size:12px;font-weight:700}

  /* ── 설정 목록 ── */
  .policy p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:11px 0;
    border-bottom:1px solid var(--line);color:var(--sub);font-size:13px;font-weight:700}
  .policy p:last-of-type{border-bottom:0}
  .policy p b{color:var(--txt);font-weight:800}

  /* ── 하단 탭 ── */
  /* ★ 2026-09-05 포인파이는 탭이 **셋**이다 (지갑·스왑·시세).
       리워드·지도·쇼핑을 뺐다. 숫자를 안 맞추면 단추가 여섯 칸 폭으로 벌어진다. */
  nav{height:64px;display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);background:var(--nav);
    padding-bottom:env(safe-area-inset-bottom)}
  nav button{border:0;background:transparent;color:var(--sub);font-size:11.5px;font-weight:800}
  nav button i{display:block;margin-bottom:4px;font-style:normal;font-size:18px}
  nav button.on{color:var(--blue)}

  /* ── 모달 ── */
  .modal-wrap{position:fixed;inset:0;z-index:50;display:none;place-items:center;
    background:var(--scrim-soft);backdrop-filter:blur(8px);padding:18px}
  .modal-wrap.on{display:grid}
  .modal{width:min(420px,100%);max-height:88vh;overflow-y:auto;position:relative;
    border:1px solid var(--line);border-radius:20px;background:var(--card);padding:22px}
  .close{position:absolute;right:13px;top:13px;width:33px;height:33px;border:0;border-radius:10px;
    background:var(--card2);color:var(--sub);font-size:17px}
  .modal>small{display:block;text-align:center;color:var(--sub);font-size:12.5px;font-weight:800}
  .modal h2{text-align:center;margin:5px 0 16px;font-size:19px;font-weight:900}
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
  .tabs button{border:1px solid var(--line);border-radius:10px;background:var(--card2);
    color:var(--sub);padding:10px;font-size:13.5px;font-weight:800}
  .tabs button.on{border-color:var(--key);background:var(--tint-key);color:var(--on-key-soft)}
  .modal label{display:block;color:var(--sub);font-size:12.5px;font-weight:800;margin:12px 0 6px}
  .modal>input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card2);
    outline:0;padding:12px;color:var(--txt);font-size:13px;font-family:ui-monospace,monospace}
  .modal .primary{margin-top:16px}
  .modal>p{text-align:center;margin:12px 0 0;color:var(--dim);font-size:12px;line-height:1.6}

  /* ── 카메라 ── */
  .camera{position:fixed;inset:0;z-index:70;display:none;place-items:center;
    background:var(--scrim);padding:18px}
  .camera.on{display:grid}
  .camera-card{width:min(390px,100%);position:relative;border:1px solid var(--line);
    border-radius:20px;background:var(--card);padding:18px;text-align:center}
  .camera-card h3{margin:0 0 12px;font-size:15px;font-weight:800}
  .camera video{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--key);
    border-radius:15px;background:var(--deep)}
  .camera button{position:absolute;right:12px;top:12px;width:33px;height:33px;border:0;
    border-radius:10px;background:var(--card2);color:var(--sub);font-size:17px}
  .camera p{margin:12px 0 0;color:var(--sub);font-size:12.5px}

  .toast{position:fixed;z-index:90;left:50%;bottom:22px;transform:translateX(-50%);display:none;
    max-width:min(90vw,450px);border:1px solid var(--line);border-radius:12px;background:var(--toast);
    color:var(--txt);padding:12px 15px;font-size:13.5px;font-weight:700;
    box-shadow:0 15px 50px var(--shadow-50)}
  .toast.on{display:block}

  @media(max-width:560px){
    .stage{display:block;padding:0;background:none}
    .app{width:100%;height:100svh;min-height:0;border:0;border-radius:0;box-shadow:none}
    .page{padding:16px 15px 24px}
    .toast{bottom:76px}
  }

/* ─── 리워드 실행: 주소 입력 / QR 스캔 세그먼트 (포인파이 방식) ─── */
.segt{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:4px}
.segt button{border:0;border-radius:9px;background:transparent;color:var(--sub);
  padding:10px;font-size:13.5px;font-weight:800}
.segt button.on{background:linear-gradient(180deg,var(--key),var(--key2));color:var(--on-key)}

.scanbox{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--deep);
  aspect-ratio:1;overflow:hidden;display:grid;place-items:center;margin-bottom:10px}
.scanbox video{width:100%;height:100%;object-fit:cover}
.scanbox .scanhint{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  color:var(--sub);font-size:12.5px;font-weight:700;pointer-events:none}
.scanbox::before{content:'';position:absolute;inset:14%;border:2px solid var(--key);
  border-radius:12px;pointer-events:none}

.refline{margin-top:12px;padding:11px;border-radius:10px;background:var(--card2);
  border:1px solid var(--line)}
.refline span:last-child{font-family:ui-monospace,monospace;font-size:12.5px}
/* 추천인이 아직 없거나 못 찾았을 때 — 손댈 곳이 아니라는 뜻으로 흐리게 둔다 */
.refline.off{opacity:.5}
.refline.off span:last-child{color:var(--dim)}

.field-label em{font-style:normal;color:var(--dim);font-weight:700;margin-left:4px}
.payout{display:flex;justify-content:space-between;align-items:center;margin-top:11px;
  padding:12px;border-radius:11px;background:var(--tint-purple);
  border:1px solid var(--edge-purple);color:var(--on-purple-tint);font-size:13px;font-weight:800}
.payout b{color:var(--purple);font-size:14.5px;font-variant-numeric:tabular-nums}
#paneScan .outline{margin-top:8px}

/* ─────────── 하이브리드 입금 ───────────
   USDT 로 결제받은 건을 정산하는 화면.
   CSP 가 style-src 'self' 라 인라인 style 은 먹지 않는다 — 감추기는 .hidden 클래스로. */

.hidden{display:none !important}
.intro.tight{margin:0 0 12px;max-width:none}

/* 두 칸 줄. 기존 .refline 이 .kv 를 함께 달고 있어 여기서 같이 정리된다. */
/* ★ 값이 긴 주소일 때 넘치지 않게 (2026-09-04, 글자 1px 키우면서) */
.kv>b,.kv>span{min-width:0;overflow-wrap:anywhere}
select{max-width:100%}
.kv{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:700;color:var(--sub)}
.kv b{color:var(--txt);font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
  /* ★ 숫자는 접히면 안 되니 nowrap 은 그대로. 다만 **줄어들 수 있게** 하고
     그래도 넘치면 「…」으로 자른다 (2026-09-04, 글자 1px 키우면서).
     안 그러면 42자짜리 주소가 상자를 비집고 나간다. */
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kv em{font-style:normal;color:var(--dim);font-weight:700;margin-left:4px;font-size:12px}

/* 입금 목록 */
.deposits{margin-top:10px}
.deposits:empty{display:none}
.dep{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-top:8px;color:var(--txt)}
.dep.on{border-color:var(--key);background:var(--tint-key)}
.dep .who{flex:1;min-width:0}
.dep .who b{display:block;font-size:13.5px;font-weight:800}
.dep .who small{display:block;color:var(--dim);font-size:11.5px;font-weight:700;
  font-family:ui-monospace,monospace;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dep .amt{color:var(--green);font-size:14px;font-weight:900;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dep.done{opacity:.5}
.dep.done .amt{color:var(--dim)}
.deps-empty{color:var(--dim);font-size:12.5px;text-align:center;padding:16px 0;line-height:1.7}

/* 계산 표 */
.hy-sum{margin-top:12px;padding:12px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line)}
.hy-sum .kv{padding:5px 0}
.hy-sum .kv.buy b{color:var(--gold)}
.hy-sum .kv.sum{margin-top:7px;padding-top:10px;border-top:1px solid var(--line)}
.hy-sum .kv.sum span{color:var(--txt);font-weight:800}
.hy-sum .kv.sum b{color:var(--key-txt);font-size:15px}

/* 확인란 — 판매점이 눈으로 보고 누르는 자리다. 기본값으로 켜 두지 말 것. */
.chk{display:flex;align-items:flex-start;gap:9px;margin-top:10px;
  font-size:12.5px;line-height:1.6;color:var(--sub);cursor:pointer}
.chk input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--key);cursor:pointer}
.chk span{flex:1}

/* 금색 슬라이더 (하이브리드) */
.rate-control input.gold{accent-color:var(--gold)}
.percent-input.gold{border-color:var(--pct-gold)}
.percent-input.gold input{color:var(--gold)}
.rate-label em{font-style:normal;color:var(--dim);font-weight:700;margin-left:5px;font-size:11.5px}

/* ─────────── 연결 상태 알림 ───────────
   연결이 안 되는 원인을 사용자가 알 수 있어야 한다.
   예전에는 지갑이 던진 영어 원문이 그대로 토스트로 나가서 아무도 원인을 몰랐다. */
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;
  font-size:12.5px;line-height:1.6;font-weight:700;
  background:var(--card2);border-bottom:1px solid var(--line);color:var(--sub)}
.banner b{color:var(--txt)}
.banner button,.banner a{flex:0 0 auto;border:1px solid var(--line);background:transparent;
  color:var(--blue);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:800;
  text-decoration:none;white-space:nowrap;cursor:pointer}
.banner.warn{background:var(--tint-gold);border-bottom-color:var(--edge-gold);color:var(--on-gold-tint)}
.banner.warn b{color:var(--on-gold-tint)}
.banner.warn button{border-color:var(--edge-gold);color:var(--on-gold-tint)}
.dot.warn{background:var(--gold)}

/* ─────────── 눌림 피드백 ───────────
   기본페이가 겪은 것과 같은 문제였다 — 눌러도 화면이 그대로라
   안 눌린 줄 알고 몇 번씩 더 누르게 된다. 특히 서명이 걸린 버튼에서 위험하다.
   기본페이와 같은 값(scale .975 · brightness .86)으로 맞췄다. */
button, .dep, .venue, a.primary{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .08s ease, filter .08s ease, opacity .08s ease}
button:active, .dep:active, .venue:active, a.primary:active{
  transform:scale(.975); filter:brightness(.86)}
button:disabled:active{transform:none; filter:none}
input[type=range]:active{transform:none; filter:none}

/* ─────────── 비율 줄 — 기본페이 .pctrow 결 ───────────
   색이 곧 이름표다. 줄마다 트랙 색과 퍼센트 칸 색을 맞춰 둔다.
     하이브리드 청록 · 소비자 초록 · 추천인 보라 */
.rate-setting + .rate-setting{margin-top:13px}
.rate-label{display:flex;justify-content:space-between;align-items:baseline}
.rate-control{display:flex;align-items:center;gap:10px;margin-top:7px}
.percent-input{flex:0 0 auto;display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:9px;background:var(--card2);padding:5px 8px}
.percent-input input{width:34px;border:0;outline:0;background:transparent;text-align:right;
  font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--green)}
.percent-input b{font-size:12px;font-weight:800;color:var(--sub)}
.percent-input:focus-within{border-color:var(--key)}

/* ─────────── 하이브리드 계산표를 잔액 카드 결로 ─────────── */
.hy-sum{background:linear-gradient(160deg,var(--sum-a),var(--sum-b));border-color:var(--sum-line)}
.hy-sum .kv.sum b{font-size:16px;letter-spacing:-.4px;color:var(--sum-txt)}
.dep .amt{letter-spacing:-.3px}

/* 큰 숫자는 기본페이 눈금대로 900 굵기에 자간을 조인다 */
.balance strong{font-size:32px;letter-spacing:-1px}
/* 길어지면 줄인다 — 카드 밖으로 나가면 종목 이름이 밀린다 */
.balance.d2 strong{font-size:24px}
.balance.d3 strong{font-size:19px}
.balance.d2 strong .cs{font-size:20px}
.balance.d3 strong .cs{font-size:16px}
.balance.d2 strong .unit{font-size:14px}
.balance.d3 strong .unit{font-size:12px}

/* ─────────── 지갑 시작하기 (만들기·복구·잠금해제) ───────────
   전체를 덮는 오버레이. 지갑이 준비되기 전에는 뒤 화면을 만지지 못하게 한다. */
.setup{position:fixed;inset:0;z-index:80;display:none;overflow-y:auto;
  background:var(--scrim);backdrop-filter:blur(6px);
  padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.setup.on{display:block}
body.setup-open{overflow:hidden}
.setup-box{width:min(430px,100%);margin:0 auto;background:var(--bg);
  border:1px solid var(--line);border-radius:20px;padding:20px 18px 18px;
  box-shadow:0 28px 90px var(--shadow-60)}

.setup-head{margin-bottom:16px}
.setup-head b{display:block;font-size:20px;font-weight:900;letter-spacing:-.5px}
.setup-head span{display:block;margin-top:6px;color:var(--sub);font-size:13px;line-height:1.7}
/* ★★ 설명줄 안의 <b> 는 **줄 안에서** 굵게만 (2026-08-30).
   위 .setup-head b 가 제목용(19px·900·block)이라, 설명 안에 <b>영구적으로</b> 를
   쓰면 그 낱말만 큰 글씨로 줄이 갈려 나갔다. 「영구적으로」가 제목처럼 떠 있었다.
   ★ 바로 아래 .mono 주석도 같은 일을 한 번 겪었다고 적어 두었다 —
     이번에는 낱말 강조까지 함께 막는다. */
.setup-head span b, .setup-head span strong{
  display:inline;font-size:inherit;font-weight:800;letter-spacing:0;color:var(--txt)}
.setup-head span.mono{font-family:ui-monospace,monospace;font-size:12.5px}
/* ★ 설명줄 안의 주소. 예전엔 .setup-head b (제목용 19px·900) 를 물려받아
   42글자가 한 줄로 나가 판을 뚫고 창에 가로 스크롤을 만들었다.
   b 든 span 이든 걸리게 하고 반드시 줄을 바꾸게 한다. */
.setup-head .mono{display:block;margin-top:5px;
  font-family:ui-monospace,monospace;font-size:12.5px;font-weight:700;
  letter-spacing:0;line-height:1.55;color:var(--txt);
  word-break:break-all;overflow-wrap:anywhere}
/* 판 자체가 가로로 넘치지 않게 — 긴 글자가 또 들어와도 창이 안 밀린다 */
.setup{max-width:100%;overflow-x:hidden}

/* 갈림길 */
.pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 13px;color:var(--txt)}
.pick i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:16px;background:var(--tint-key);color:var(--blue)}
.pick b{flex:1;min-width:0;font-size:15px;font-weight:900}
.pick small{display:block;margin-top:4px;color:var(--sub);font-size:12px;font-weight:700;line-height:1.65}
.pick>span{color:var(--dim);font-size:19px}

.ghostline{display:block;width:100%;margin-top:9px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:transparent;color:var(--sub);font-size:13.5px;font-weight:800}

/* 단어 수 고르기 */
.wordpick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.wp{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:13px 11px;
  text-align:left;color:var(--txt)}
.wp.on{border-color:var(--key);background:var(--tint-key)}
.wp b{display:block;font-size:15px;font-weight:900}
.wp small{display:block;margin-top:4px;color:var(--sub);font-size:11.5px;font-weight:700;line-height:1.6}

/* 12단어 보여 주기 */
.words{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px;
  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px 10px}
.words .w{display:flex;align-items:baseline;gap:5px;font-size:13.5px;font-weight:800;
  font-family:ui-monospace,monospace;color:var(--txt)}
.words .w i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--dim);
  min-width:13px;text-align:right}
@media (max-width:380px){ .words{grid-template-columns:repeat(2,1fr)} }

.setup-warn{display:flex;gap:9px;align-items:flex-start;padding:12px;border-radius:12px;
  font-size:12.5px;line-height:1.7;margin-bottom:12px;
  background:var(--tint-red);border:1px solid var(--edge-red);color:var(--on-red-tint)}
.setup-warn b{color:var(--on-red-tint)}
.setup-warn i{font-style:normal;flex:0 0 auto;font-weight:900}
.setup-warn.soft{background:var(--tint-blue);border-color:var(--edge-blue);color:var(--on-blue-tint)}
.setup-warn.soft b{color:var(--on-key-tint)}
/* 가스가 없을 때 - 채울 주소를 그 자리에 적는다. 딴 화면으로 보내면 못 돌아온다. */
.setup-warn .addr{display:block;margin:8px 0 2px;padding:8px 9px;border-radius:8px;
  font-size:12px;line-height:1.5;word-break:break-all;
  background:var(--sink);border:1px solid var(--edge-red);color:var(--on-red-tint)}
.setup-warn .two{display:flex;gap:7px}
.setup-warn .two .ghostline{margin-top:6px;border-color:var(--edge-red-hi);color:var(--on-red-tint)}
/* 「어디에 적히나」 아래 붙는 실제 주소 - 작게, 곁들이는 말로 */
.setup .hy-sum .kv b.sub{margin-top:4px;font-size:11.5px;color:var(--dim);font-weight:600}
/* 「KAIA 없이 등록하기」 — 곁길이라 눈에 덜 띄게, 그러나 읽히게 */
/* 시작 화면의 「앱으로 설치하기」 — 주인공이 아니므로 조용하게 */
.setup .pick.soft{border-style:dashed;border-color:var(--edge-blue);background:transparent}
.setup .pick.soft i{color:var(--key-txt)}
.setup .pick.soft b{font-weight:800}
.setup .pick.hidden{display:none}

/* ═══ 앱 설치 권유 띠 ═══
   ★ 아래쪽 네비게이션 위에 앉는다. 화면을 가리지 않고, 한 번에 읽힌다. */
.instbar{position:absolute;left:12px;right:12px;bottom:78px;
  z-index:60;display:flex;align-items:center;gap:11px;
  padding:12px 13px;border-radius:15px;
  background:linear-gradient(160deg,var(--inst-a),var(--inst-b));border:1px solid var(--inst-line);
  box-shadow:0 10px 30px var(--shadow-45);animation:ibIn .25s ease-out}
@keyframes ibIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.instbar.hidden{display:none}
.instbar > i{flex:0 0 auto;font-style:normal;font-size:20px;color:var(--key-txt)}
.instbar > b{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--txt);line-height:1.35}
.instbar > b small{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--sub)}
.instbar .ib-btns{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
.instbar .ib-btns button{margin:0;padding:7px 13px;font-size:13px;border-radius:9px;width:auto;display:block}
.instbar .ib-btns .ghostline{border-color:var(--line);color:var(--sub)}

/* ═══ 계정 목록 (관리자) ═══ */
.acct-head{display:flex;justify-content:space-between;align-items:baseline;
  margin:14px 0 7px;padding-top:12px;border-top:1px solid var(--line)}
.acct-head small{color:var(--sub);font-size:12.5px}
.acct-head b{color:var(--dim);font-size:12px;font-weight:700}
.acct-list{display:flex;flex-direction:column;gap:6px;margin-bottom:9px;
  max-height:44vh;overflow-y:auto}
.acct-row{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;
  border-radius:11px;border:1px solid var(--line);background:var(--card2);
  color:var(--txt);text-align:left;cursor:pointer;font:inherit}
.acct-row:hover{border-color:var(--edge-blue-hi)}
.acct-row.on{border-color:var(--key);background:var(--tint-blue)}
.acct-row .nm{flex:1;min-width:0}
.acct-row .nm b{display:block;font-size:13.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-row .nm small{display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  padding:2px 6px;border-radius:6px;font-size:11.5px;color:var(--dim);
  font-family:ui-monospace,monospace;border:1px solid transparent}
/* 주소 줄은 따로 누르는 자리다 — 누를 수 있어 보이게 테두리를 준다 */
.acct-row .acct-addr{cursor:pointer;border-color:var(--line);background:var(--fg-a-03)}
.acct-row .acct-addr:hover{border-color:var(--edge-blue-hi);color:var(--sub)}
.acct-row .acct-addr .cp{font-style:normal;font-size:11px;opacity:.6}
.acct-row .acct-addr.copied{border-color:var(--key);color:var(--key-txt);
  background:var(--tint-blue)}
.acct-row .acct-addr.copied .cp{opacity:1}
.acct-row .kd{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:6px;
  background:var(--fg-a-08);color:var(--sub)}
.acct-row .kd.key{background:var(--tint-gold);color:var(--gold)}
.acct-row .kd.sell{background:var(--tint-blue);color:var(--key-txt)}
.acct-row .kd.off{opacity:.5}
.acct-row .go{flex:0 0 auto;color:var(--dim);font-size:16px}
.acct-row.on .go{color:var(--key)}
.acct-edit{flex:0 0 auto;padding:3px 7px;border-radius:7px;border:1px solid var(--line);
  background:transparent;color:var(--dim);font-size:11.5px;cursor:pointer}
.outline.tight{padding:9px 11px;font-size:13px;margin-top:6px}
.note.bad{color:var(--on-red-tint)}
.note b.mono.wrap{display:block;margin:6px 0;padding:8px 9px;border-radius:8px;
  font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;word-break:break-all;
  background:var(--sink);border:1px solid var(--line);color:var(--txt)}
.setup .field-label em{font-style:normal;color:var(--dim);font-weight:600;margin-left:5px;font-size:11.5px}

#tmFree small{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--dim)}
#tmFree{border-color:var(--edge-blue-hi);color:var(--on-key-tint);line-height:1.45}
#gasList .card .kv b.mono{font-family:ui-monospace,monospace;font-size:12px;word-break:break-all}

/* ═══ 「이미 카이아 월렛을 쓰고 계신가요?」 — 첫 화면 맨 위 (2026-08-24) ═══
   전에는 「새로 시작하기」가 맨 위라, 이미 지갑이 있는 분도 그걸 눌러
   두 번째 12단어를 만들었다. 주소가 둘로 갈려 헷갈리는 원인이었다.
   눈에 띄되 「새로 시작하기」보다 무겁지 않게 — 소비자의 30초 가입이 주인공이다. */
.askfirst{padding:13px;border-radius:14px;margin-bottom:4px;
  background:var(--tint-blue);border:1px solid var(--edge-blue)}
.askfirst>b{display:block;font-size:14px;font-weight:900;color:var(--on-key-tint)}
.askfirst>span{display:block;margin-top:5px;font-size:12.5px;line-height:1.7;
  color:var(--on-blue-tint);font-weight:700}
.askfirst>span b{color:var(--txt)}
.askfirst .ghostline{margin-top:8px;border-color:var(--edge-blue-hi);color:var(--on-key-tint);
  background:var(--sink-soft)}
.ghostline.tight{padding:9px 11px;font-size:13px}

/* ═══════════════ 금액 숫자판 (2026-08-24, 포인파이와 같은 결) ═══════════════
   폰 키보드를 띄우면 화면 아래 절반이 덮여 「다음」이 가린다.
   앱 안에 숫자판을 두면 금액과 단추가 언제나 한 화면에 같이 보인다. */
.amtbig{display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin:12px 0 5px;min-height:44px;padding:0 8px}
.amtbig b{font-size:39px;font-weight:900;letter-spacing:-.02em;color:var(--txt);
  line-height:1.15;font-variant-numeric:tabular-nums;word-break:break-all}
.amtbig i{font-style:normal;font-size:16px;font-weight:800;color:var(--sub);flex:0 0 auto}
/* 자릿수가 길어지면 글자를 줄인다 — PIT 는 금방 열 자리를 넘는다 */
.amtbig.d2 b{font-size:29px}
.amtbig.d3 b{font-size:22px}
/* 환산 줄 = 단위 바꾸기 단추. 글자만 있는 단추라 눌러도 되는지 보이게 밑줄 힌트를 붙인다. */
.amtkrw{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  text-align:center;color:var(--dim);font-size:12.5px;font-weight:700;margin:0 0 10px;
  padding:5px 0;background:transparent;border:0;-webkit-tap-highlight-color:transparent}
.amtkrw i{font-style:normal;color:var(--blue);font-size:11.5px;font-weight:800;
  border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.amtkrw:active i{background:var(--card2)}
/* 원화로 넣는 중에는 큰 숫자를 파랗게 — 지금 무엇을 치고 있는지 한눈에 */
.amtbig.krw b{color:var(--blue)}

.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:10px}
.numpad button{padding:12px 0;background:transparent;border:0;border-radius:12px;
  color:var(--txt);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;
  min-height:48px;-webkit-tap-highlight-color:transparent}
.numpad button:active{background:var(--card2)}
/* ★ 키는 48px 아래로 내려가지 않게 한다 — 그보다 작으면 옆 숫자를 누른다.
   반대로 무작정 키우면 「다음」이 아래 바에 가려 스크롤해야 한다.
   375x812 폰에서 가스비 줄과 「다음」까지 한 화면에 들어오는 값으로 맞췄다. */
@media (min-height:880px){ .numpad button{padding:17px 0} }

/* ★★ 짧은 폰에서는 묶음을 **줄인다** (2026-08-29).
   묶음(.padstick)은 sticky bottom:0 이라 화면보다 크면 위로 끌려 올라와
   자산 탭과 받는 곳을 덮는다. 재 보니 이렇다 —
       812px 폰 다 보임 · 730px 겨우 · 698px 30px 가림 · 640px 88px 가림
   ★ 「사용 가능한 금액」은 이미 묶음 안으로 옮겼으니 어떤 폰에서도 보인다.
     여기서 더 줄이는 것은 **자산 탭까지** 안 가리게 하려는 것이다.
   ★ 키는 48px(min-height) 아래로 안 내려간다 — 그보다 작으면 옆 숫자를 누른다.
     여기서 줄이는 것은 padding 이라 실제 누르는 크기는 그대로다. */
/* ★★ 800px 까지 올렸다 (2026-08-29, 반박 검토).
   예전에는 760px 이었는데, 요약줄이 생기면서 761~791px 구간에서
   묶음이 화면보다 커져 뒤로가기 「‹」와 제목을 덮었다.
   그 구간에는 아무 규칙도 안 걸려 있었다. */
@media (max-height:800px){
  .numpad{gap:1px;margin-bottom:6px}
  .numpad button{padding:6px 0}
  .availline{margin-bottom:6px}
  .padstick .row-link{padding-top:8px;padding-bottom:8px}
  .padstick .row-link small{display:none}
  .padstick .gasline{margin-bottom:6px}
  .padstick .amtbig{margin-bottom:2px}
  .padstick .amtkrw{padding-top:2px;padding-bottom:2px}
  .padstick{padding-top:4px}

  /* 묶음 **위**도 같이 줄인다. 아래만 줄여서는 못 채운다 —
     667px 폰에서는 위아래 합이 화면보다 크다. */
  #sendAmt .dest{margin-bottom:7px;padding:7px 11px}
  #sendAmt .tabs.seg{margin-bottom:7px}
  #sendAmt .back-title{margin-bottom:7px}
}

/* ★★ 짧은 폰 (700px 아래). 여기서는 위의 조정으로도 안 들어간다.
   ★★ 묶음이 화면(.screen)보다 커지면 sticky 가 **위로 당겨져 뒤로가기 「‹」를 덮는다.**
     실제로 그랬다 — 667px 폰에서 32px 덮여 뒤로 갈 길이 사라졌다.
     그래서 묶음은 **언제나 화면보다 작아야 한다.** 그것이 이 단계의 목적이다.
   ★ 이 화면의 「대신 잠가서 보내기」만 접는다 — 없어지는 길이 아니다.
     같은 문이 **앞 화면(보내기 ①)과 홈**에도 있다. 여기 것은 덤이다.
   ★ 키의 누르는 크기는 44px 아래로 안 내린다. 그보다 작으면 옆 숫자를 누르고,
     보내는 화면에서 옆 숫자를 누르는 것은 돈이 틀리는 일이다. */
@media (max-height:700px){
  .padstick .row-link{display:none}
  .numpad button{min-height:44px;padding:2px 0;font-size:20px}
  .padstick .amtbig{margin-bottom:0}
  .padstick .amtbig b{font-size:33px}
  #sendAmt .tabs.seg{margin-bottom:5px}
  #sendAmt .dest{margin-bottom:5px}
}

/* ── 금액 묶음을 화면 아래에 붙인다. 위 정보줄만 스크롤된다. ── */
/* 아래쪽은 홈 인디케이터(아이폰 막대)에 안 물리게 여백을 준다 */
.padstick{position:sticky;bottom:0;z-index:2;background:var(--bg);padding-top:8px;
  padding-bottom:max(10px,env(safe-area-inset-bottom))}
.padstick::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}

/* 보내기 흐름에서는 아래 탭바를 숨긴다.
   ★ 세 걸음짜리 흐름 한가운데에서 다른 탭으로 샐 일은 없고,
     그 64px 이 있어야 작은 폰에서 「다음」이 가리지 않는다. 위쪽 ‹ 로 돌아간다. */
body.flow nav{display:none}

/* 풀 상태 딱지 — 색으로 한눈에 (관리자 유동성 탭) */
.lphealth.ok{color:var(--green)}
.lphealth.warn{color:var(--gold)}
.lphealth.bad{color:var(--burn-a)}

/* 지갑 화면의 「리워드 결제」 문 — 눈에 띄되 요란하지 않게 */
.row-link.hy{border-color:var(--edge-key);background:var(--tint-key)}
.row-link.hy > i{color:var(--on-key-soft)}

/* 80/20 나눔 — **고를 수 없는 값**이라 슬라이더가 아니라 보여 주기만 한다 */
.splitbox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 4px}
.splitbox .sp{position:relative;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);padding:11px 12px 10px}
.splitbox .sp i{display:block;height:3px;border-radius:99px;margin-bottom:7px}
.splitbox .sp i.a{background:var(--green)}
.splitbox .sp i.b{background:var(--purple)}
.splitbox .sp b{display:block;font-size:18px;font-weight:900;color:var(--txt)}
.splitbox .sp small{display:block;margin-top:2px;color:var(--sub);font-size:11.5px;font-weight:700}
.splitbox p{grid-column:1 / -1;margin:2px 0 0;color:var(--dim);
  font-size:11.5px;font-weight:700;line-height:1.7}
.splitbox p b{color:var(--sub)}

/* ★ 금액을 담는 변형 (2026-09-02) — 「80%」보다 훨씬 길다.
   글자를 줄이고 자간을 조여 한 줄에 넣는다. 넘치면 줄바꿈보다 줄이는 편이 낫다 —
   두 상자의 높이가 달라지면 나란히 놓은 뜻이 없어진다. */
.splitbox.amt{margin:8px 0 4px}
.splitbox.amt .sp{padding:10px 11px 9px}
.splitbox.amt .sp b{font-size:15px;letter-spacing:-.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.splitbox.amt .sp small{font-size:11px;line-height:1.45}
.splitbox.amt .sp small em{font-style:normal;color:var(--dim)}

/* ★ 비밀번호 칸을 CSS 로 가리지 않는다 (2026-08-24 되돌림).
   한때 type=text + -webkit-text-security:disc 로 크롬 비밀번호 관리자를 떼려 했는데,
   어떤 크롬에서는 **점이 서너 개만 그려지고 더 쳐도 늘지 않았다.**
   값은 멀쩡히 들어가는데 화면만 그러니, 쓰는 사람은 비밀번호가 안 쳐진 줄 안다.
   지갑을 여는 칸에서 그건 어떤 이득과도 바꿀 수 없다. type=password 로 되돌렸다. */

/* 입력 줄 */
.qz{display:block;margin-bottom:11px}
.qz b{display:block;font-size:12.5px;font-weight:800;color:var(--sub);margin-bottom:5px}
.qz input{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:12px;font-size:15px;color:var(--txt);font-family:inherit}
.qz input:focus{outline:0;border-color:var(--key)}
.mnbox{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:12px;font-size:14px;line-height:1.8;color:var(--txt);resize:vertical;
  font-family:ui-monospace,monospace}
.mnbox:focus{outline:0;border-color:var(--key)}

.pwhint{min-height:16px;font-size:12px;font-weight:800;margin:-4px 2px 10px;color:var(--dim)}
.pwhint.good{color:var(--green)}
.pwhint.bad{color:var(--red)}
.pwhint.warn{color:var(--gold)}

.orline{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--dim);font-size:12px;font-weight:800}
.orline::before,.orline::after{content:'';flex:1;height:1px;background:var(--line)}

.setup-note{margin:14px 2px 0;color:var(--dim);font-size:11.5px;line-height:1.75}
.outline.danger{border-color:var(--edge-red-hi);color:var(--on-red-tint)}
/* 되돌릴 수 없는 일을 하는 단추 — 지갑 삭제 (2026-08-30).
   ★ 다른 primary 와 **색으로** 갈라 놓는다. 같은 파랑으로 두면
     늘 누르던 단추와 구별이 안 돼 손이 먼저 나간다.
   ★ 잠겼을 때는 눌러도 되는 것처럼 보이면 안 된다 — 흐리게 한다. */
.primary.danger{background:linear-gradient(180deg,var(--danger-a),var(--danger-b));
  border-color:var(--edge-red-hi);color:var(--on-danger)}
.primary.danger:disabled{background:var(--tint-red);
  border-color:var(--edge-red);color:var(--on-danger-off)}

/* ─────────── 받기 화면 — 보내기 전 확인 ───────────
   네트워크를 잘못 고르면 자산이 사라진다. 그래서 한 줄씩 크게 세운다. */
.checkrow{padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.checkrow:last-of-type{border-bottom:0}
.checkrow span:first-child{flex:1;color:var(--txt);font-weight:700;font-size:13px;line-height:1.7}
.checkrow span:first-child b{display:block;color:var(--sub);font-size:11.5px;font-weight:800;
  margin-bottom:2px}
.checkrow span:first-child b + b{display:inline;color:var(--gold);font-size:13px;margin:0}
.checkrow em{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:800;color:var(--red);
  background:var(--tint-red);border-radius:5px;padding:2px 6px}
.checkrow em:empty{display:none}
#usdtFull{font-family:ui-monospace,monospace;font-size:11.5px;word-break:break-all;text-align:left}

/* ─────────── 소각 ───────────
   ★ 소각은 결제금액의 %가 아니라 **매수 결과**의 % 다.
     화면에서 이 구분이 흐려지면 판매점이 비용을 잘못 계산한다. */
.hy-sum.burnbox{margin-top:8px;background:var(--tint-red);border-color:var(--edge-red)}
.hy-sum.burnbox .kv b{color:var(--on-red-tint)}
.hy-sum.burnbox .kv:first-child b{color:var(--green)}
.tiny{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--dim)}
.tiny b{color:var(--sub)}
.rate-control input.red{accent-color:var(--red)}
.percent-input.red{border-color:var(--pct-red)}
.percent-input.red input{color:var(--red)}
.chk em{font-style:normal;color:var(--dim);font-weight:700}

/* ─────────── 가스 ───────────
   판매점이 내는 돈이므로 정산표에 보인다. 대납하지 않기로 했다(2026-08-23). */
.gasline{margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line)}
.gasline b{color:var(--sub);font-size:12.5px;font-weight:800}

/* ─────────── 서명 확인 ───────────
   내장 지갑에는 지갑 앱의 서명창이 없다. 이 화면이 그 자리다.
   금액을 크게 세우는 것이 핵심 — 「확인하시겠습니까?」만 있으면 사람은 그냥 누른다. */
.setup .hy-sum .kv b.big{font-size:20px;font-weight:900;letter-spacing:-.5px;color:var(--txt)}
.setup .hy-sum .kv b.mono{font-family:ui-monospace,monospace;font-size:12px;
  word-break:break-all;text-align:right;line-height:1.6}
.setup .hy-sum .kv{align-items:flex-start;padding:8px 0}
.setup .hy-sum .kv + .kv{border-top:1px solid var(--line)}

/* 진단 줄 */
#diag .kv{padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
#diag .kv:last-child{border-bottom:0}
#diag .kv span:first-child{font-family:ui-monospace,monospace;color:var(--sub)}
#setupWarn span{white-space:pre-line}

/* ─────────── 설정 줄 (첨부하신 보안 화면 구조) ───────────
   카드 안에 문단을 쌓지 않고 「한 줄에 하나」로 둔다.
   기본페이·원화페이가 쓰는 방식이고, 훑어보기가 훨씬 쉽다. */
.secrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 14px;margin-bottom:9px;color:var(--txt);font-size:14.5px;font-weight:800}
.secrow.tight{padding:12px 13px;margin-bottom:7px;font-size:13.5px}
.secrow > span{flex:1;min-width:0}
.secrow > span small{display:block;margin-top:3px;color:var(--sub);font-size:12px;font-weight:700}
.secrow em{font-style:normal;color:var(--sub);font-size:13.5px;font-weight:700}
.secrow em.hi{color:var(--blue);font-weight:800}
.secrow > b{color:var(--dim);font-size:18px;font-weight:400}
.secrow.as-btn{cursor:pointer}
.secrow.danger > span{color:var(--red)}

.pill{flex:0 0 auto;border:0;border-radius:9px;background:var(--ctrl);color:var(--txt);
  padding:8px 15px;font-size:13px;font-weight:800}

/* 토글 */
.tgl{flex:0 0 auto;width:50px;height:28px;border:0;border-radius:999px;
  background:var(--ctrl);padding:0;position:relative;transition:background .16s}
.tgl i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--knob);transition:transform .16s;display:block}
.tgl.on{background:var(--gold)}
.tgl.on i{transform:translateX(22px)}
.tgl:disabled{opacity:.4}

/* 목록형 이동 줄 */
.row-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 13px;margin-bottom:10px;color:var(--txt)}
.row-link i{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:15px;background:var(--tint-key);color:var(--blue)}
.row-link b{flex:1;min-width:0;font-size:14.5px;font-weight:800}
.row-link small{display:block;margin-top:3px;color:var(--sub);font-size:12px;font-weight:700;
  word-break:break-all}
.row-link > span{flex:0 0 auto;color:var(--dim);font-size:13px;font-weight:800}

/* ═══════════════ 원화페이 결로 맞춘 새 조각들 (2026-08-23) ═══════════════
   하이브리드를 걷어내고 화면을 넷으로 나누면서 필요해진 것들이다.
   기본페이·원화페이와 같은 눈금(본문 12.5 · 라벨 11.5 · 제목 19)을 지킨다. */

/* 주소 한 줄 — 잔액 카드 위 */
.acc{display:flex;justify-content:center;margin-bottom:12px}
.addrchip{border:1px solid var(--line);border-radius:999px;background:var(--card2);
  color:var(--sub);padding:7px 14px;font-size:12.5px;font-weight:800;
  font-family:ui-monospace,monospace}
.addrchip:active{background:var(--card)}

/* 자산 / 전송 내역 */
.wtabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px 0 12px;
  border-bottom:1px solid var(--line)}
.wtabs button{border:0;background:transparent;color:var(--sub);
  padding:10px 0 11px;font-size:14px;font-weight:800;border-bottom:2px solid transparent}
.wtabs button.on{color:var(--txt);border-bottom-color:var(--blue)}

/* 목록 — 최근 보낸 곳 · 전송 내역 */
/* 「한눈에」 카드 — 정보 화면 맨 위 (2026-08-29).
   ★ 누적 소각은 **빨강**이다 (사장님 요청). 「줄어든 양」이라 색이 맞는다.
     다만 경고 빨강보다 한 톤 낮춘다 — 소각은 사고가 아니라 정상 동작이다. */
.glance .kv b.burn{color:var(--burn-a);font-variant-numeric:tabular-nums}
.glance .kv b{font-variant-numeric:tabular-nums}
.glance .kv.sum{margin-top:6px;padding-top:9px;border-top:1px solid var(--line)}
.glance .outline{width:100%;margin-top:10px}
/* 소각 막대 — 같은 빨강 계열로. 「줄어든 양」이라 색이 맞는다 (2026-08-29). */
.glance .rvbar.burnbar i{background:linear-gradient(90deg,var(--burn-a),var(--burn-b))}
.glance .rvnote{text-align:left}

/* ─────────── 쇼핑몰 (2026-08-30) ───────────
   ★ 그림이 없어도 자리가 무너지지 않게 회색 칸을 남긴다.
     상품 사진은 나중에 넣는다 — 없다고 화면이 깨지면 안 된다. */
.shoplist{display:flex;flex-direction:column;gap:9px;margin:12px 0 14px}
.shopcard{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:14px;background:var(--card2);
  padding:11px 12px;color:var(--txt)}
.shopcard .shopthumb{flex:0 0 auto;width:54px;height:54px;border-radius:11px;
  background:var(--bg) center/cover no-repeat;border:1px solid var(--line)}
.shopcard > b{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:800}
.shopcard > b small{display:block;margin-top:3px;color:var(--sub);
  font-size:12px;font-weight:700}
.shopcard > span{flex:0 0 auto;text-align:right;font-size:14px;font-weight:900;
  color:var(--key-txt);font-variant-numeric:tabular-nums}
.shopcard > span em{display:block;margin-top:3px;font-style:normal;
  color:var(--sub);font-size:11.5px;font-weight:700}
.shopimg{height:170px;border-radius:14px;border:1px solid var(--line);
  background:var(--card2) center/cover no-repeat;margin-bottom:12px}
.amtbig.tight{margin:8px 0 2px}
#shopTier{font-size:12.5px;font-weight:800;color:var(--key-txt)}

/* 주소록 줄 — 고르기 / 이름 고치기 / 지우기 (2026-08-29) */
.bkrow{display:flex;align-items:stretch;gap:6px}
.bkrow .bkpick{flex:1 1 auto;min-width:0;text-align:left}
.bkrow .pill{flex:0 0 auto;align-self:center}
.bkrow .bkedit{min-width:38px}
.bkrow .bkdel{min-width:38px;color:var(--burn-a);border-color:var(--edge-red-hi)}
.bkrow .bkcopy{min-width:38px}
/* 「최근 보낸 곳 | 주소록」 두 칸 (2026-08-29).
   ★ .segt.sub 는 이미 3칸짜리(자산 화면 전체/보냄/받음)로 쓰이고 있다.
     그것을 그대로 쓰면 두 칸인데 셋으로 나뉘어 오른쪽이 빈다. 따로 잡는다. */
#toSeg{margin-top:14px;grid-template-columns:repeat(2,1fr)}

.feed{display:flex;flex-direction:column;gap:8px}
/* ★★ 2026-09-04 사장님 지시 — 문장 한 덩어리에서 **두 칸**으로.
   「한 줄로 왼쪽에 제목 오른쪽에 숫자 넣어서 일목요연하게」
   왼쪽: 무슨 일인가 + 누구와   오른쪽: 얼마 + 곁들일 숫자 하나
   ★ 줄이 <a> 가 아니라 <button> 이다. 단추 기본 모양을 지워야 글꼴이 안 튄다. */
.feeditem{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  width:100%;text-align:left;text-decoration:none;font:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--card2);
  padding:11px 13px;color:var(--txt)}
.feeditem .fi-l{min-width:0;flex:1 1 auto}
.feeditem .fi-r{flex:0 0 auto;text-align:right;max-width:62%}
.feeditem b{display:block;font-size:13.5px;font-weight:800;line-height:1.35}
.feeditem small{display:block;margin-top:3px;color:var(--sub);font-size:12px;
  font-weight:700;line-height:1.4}
/* 왼쪽 아래는 주소다 — 길면 말줄임으로 자른다. 접히면 두 칸이 어긋난다. */
.feeditem .fi-l small{font-family:ui-monospace,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 숫자는 자리를 맞춘다 — 세로로 눈이 따라가야 한눈에 읽힌다 */
.feeditem .fi-r b,.feeditem .fi-r small{font-variant-numeric:tabular-nums}
.feeditem .fi-r b{white-space:nowrap}
.feed .note{margin:6px 2px}

/* 전체 화면의 아이콘 격자 — 원화페이와 같은 모양 */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;margin-bottom:16px}
/* ★ 칸 자체는 투명하다 — 테두리 친 카드 열두 개는 화면을 시끄럽게 만든다.
   ★ 누르는 자리는 칩이 아니라 **칸 전체**다. 작은 칩만 누르게 하면 잘 안 눌린다. */
.mgrid .hi{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;border:0;background:transparent;padding:10px 2px;color:var(--txt);
  border-radius:12px}
/* 아이콘 칩 — 둥근 네모 안에 글자 하나 */
.mgrid .hi b{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  border:1px solid var(--line);background:var(--card2);
  font-size:20px;font-weight:400;color:var(--blue);line-height:1}
.mgrid .hi span{font-size:11.5px;font-weight:700;text-align:center;color:var(--sub);
  line-height:1.35;word-break:keep-all}
.mgrid .hi:active b{background:var(--card);border-color:var(--blue)}
.mgrid .hi:active span{color:var(--txt)}

/* 보내기 — 받는 곳 · 보낼 수 있는 금액 줄 */
.dest{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:11px 13px}
.dest > span{flex:0 0 auto;color:var(--sub);font-size:12.5px;font-weight:800}
.dest > b{flex:1 1 auto;text-align:right;font-size:13.5px;font-weight:800;
  font-family:ui-monospace,monospace;word-break:break-all}
.dest .pill{flex:0 0 auto}
.toname{margin:6px 2px 0;color:var(--sub);font-size:12.5px;font-weight:700;min-height:17px}

/* 사용 가능한 금액 — 숫자를 치는 곳 **바로 위**에 한 줄로 (2026-08-29).
   ★ 카드(.dest)로 감싸지 않는다. 여기는 숫자판 묶음 안이라 세로 한 칸이 아깝다.
     테두리와 안쪽 여백만 빼도 59px 이 30px 이 된다.
   ★ 숫자는 tabular-nums 로 — 자릿수가 바뀌어도 「최대」가 안 흔들린다. */
.availline{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.availline > span{flex:0 0 auto;color:var(--sub);font-size:12.5px;font-weight:800}
.availline > b{flex:1 1 auto;text-align:right;font-size:14px;font-weight:900;
  color:var(--txt);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.availline .pill{flex:0 0 auto}

/* 나뉘는 것 한 줄 요약 — 금액 바로 아래 (2026-08-29).
   「이대로 보낼까요」를 뺀 자리를 이것이 메운다. 자세한 것은 서명판에 있다.

   ★★ **자리를 늘 비워 둔다.** 이 줄이 생겼다 없어졌다 하면 안 된다 —
     묶음(.padstick)은 바닥에 붙어 있어서, 줄이 하나 생기면 아래가 늘어나는 게
     아니라 **위쪽 전부가 올라간다.** 숫자판이 손가락 밑에서 최대 35px 튀고,
     돈을 치는 화면에서 그건 옆 숫자를 누르게 만든다.
   ★ 그래서 숨길 때도 display 가 아니라 visibility 로 숨긴다. 높이는 그대로 남는다.
   ★ 두 줄짜리 문구(외부 출금)도 있으므로 min-height 를 두 줄로 잡는다. */
.splitline{margin:0 2px 7px;padding:6px 9px;border-radius:9px;
  background:var(--tint-key);border:1px solid var(--edge-key);
  color:var(--key-txt);font-size:12px;font-weight:800;line-height:1.5;
  text-align:center;min-height:33px;box-sizing:border-box}
/* ★ .hidden 은 display:none !important 라 못 이긴다 (2026-08-29).
   그래서 이 줄만은 다른 이름으로 숨긴다 — 자리는 남고 글자만 사라진다. */
.splitline.blank{visibility:hidden}

/* 서명판의 여분 줄 — 본문보다 한 칸 낮게 */
.hy-sum.extra{margin-top:8px}
.setup-warn.soft{opacity:.92}

/* 큰 금액 입력칸 */
.field.big input{font-size:27px;font-weight:900;letter-spacing:-.8px;padding:14px 12px}
.field.big b{font-size:15px}

/* 세 칸·다섯 칸짜리 구분 탭 */
.segt.sub{grid-template-columns:repeat(3,1fr)}
/* ★ 탭이 다섯이다 (2026-09-03, 「지급」을 걷어냄). 한 줄에 다섯.
   예전 4+span2 는 일곱 탭용이라 리워드가 둘째 줄 반 폭에 혼자 섰다. */
.segt.adtabs{grid-template-columns:repeat(5,1fr)}

/* ── 계정마다 리워드 ──
   ★ .acct-list 는 max-height 44vh 라 손잡이가 달린 열 줄이 안에서 또 스크롤된다.
     폰에서 그게 고장으로 읽힌다. 여기는 높이를 안 자른다. */
.rwacct-list{margin-top:12px}
.rwacct{border:1px solid var(--line);border-radius:12px;background:var(--card2);
  padding:11px 12px}
.rwacct + .rwacct{margin-top:8px}
.rwacct-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rwacct-top b{font-size:13.5px;font-weight:800}
.rwacct-top small{color:var(--dim);font-size:11.5px;font-weight:700;
  font-family:ui-monospace,monospace}
.rwacct.me{border-color:var(--key);background:var(--tint-key)}
.rwacct-chain{display:block;margin-top:7px;color:var(--dim);font-size:11.5px;
  font-weight:700;line-height:1.5}
.rwacct-chain.warn{color:var(--gold)}
.segt.adtabs button{padding:9px 2px;font-size:12.5px}

/* 관리자 탭 내용 */
.adpane{display:block}
.adpane.hidden{display:none}

/* 검사 결과 색 */
.okTxt{color:var(--green);font-weight:800}
.failTxt{color:var(--red);font-weight:800}
.warnTxt{color:var(--gold);font-weight:800}

/* 여러 줄 입력 (관리자 목록 · 공시문) */
textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card2);
  outline:0;padding:12px;color:var(--txt);font-size:13px;line-height:1.7;
  font-family:ui-monospace,monospace;resize:vertical;margin-bottom:10px}
textarea:focus{border-color:var(--key)}
textarea[readonly]{color:var(--sub)}

/* 관리자 화면의 주소는 통째로 보여 준다 — 축약하면 바꿔치기를 눈으로 못 잡는다 */
#tPit,#tRef{margin-bottom:12px}

/* ═══════════════ 포인파이 지갑과 같은 결로 (2026-08-23) ═══════════════
   맨 위 카드는 USDT, 지갑 연결은 오른쪽 위 한 자리, 자산 아래에 비중 막대. */

/* 오른쪽 위 연결 단추 — 연결되면 주소 조각으로 바뀐다 */
.wbtn{border:1px solid var(--line);border-radius:999px;background:var(--card2);
  color:var(--txt);padding:6px 12px;font-size:12px;font-weight:800;white-space:nowrap}
.wbtn.on{border-color:var(--key);background:var(--tint-key);color:var(--on-key-soft);
  font-family:ui-monospace,monospace}
.wbtn:active{background:var(--card)}
/* 어느 지갑으로 들어와 있는지 — 주소 조각 앞에 붙이는 작은 딱지.
   포인파이 금고와 카이아 월렛을 함께 쓰는 판매점이 헷갈리지 않게 한다. */
.wbtn .wtag{display:inline-block;margin-right:5px;padding:1px 5px;border-radius:999px;
  background:var(--fg-a-08);font-size:10px;font-weight:900;font-family:inherit;
  letter-spacing:.02em;vertical-align:1px}

/* 주소 한 줄 — 왼쪽 정렬 + 복사 */
.acc{display:flex;align-items:center;gap:7px;margin-bottom:12px;justify-content:flex-start}
.addrtxt{color:var(--txt);font-size:14px;font-weight:800;font-family:ui-monospace,monospace}
.cpy{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;
  background:var(--card2);color:var(--sub);font-size:13px;display:grid;place-items:center}
.cpy:active{background:var(--card)}

/* 잔액 카드의 달러 기호 — 포인파이처럼 숫자에 가깝게 크게 */
.balance strong .cs{font-style:normal;font-size:26px;font-weight:900;
  color:var(--fg-a-80);margin-right:5px}

/* 총 자산 요약 — 비중 막대 */
.sumcard{border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:14px 15px;margin-bottom:14px}
.s-top{display:flex;align-items:center;justify-content:space-between}
.s-top > span{color:var(--sub);font-size:12.5px;font-weight:800}
.s-top > b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.s-top .cs{font-style:normal;color:var(--sub);margin-right:3px}
.s-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--card2);
  margin:11px 0 9px}
.s-bar i{display:block;height:100%;transition:width .25s}
.s-bar .bu{background:var(--green)}
.s-bar .bp{background:var(--gold)}
.s-bar .bk{background:var(--blue)}
.s-leg{display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--sub);font-size:11.5px;font-weight:800;flex-wrap:wrap}
.s-leg .lg{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.s-leg em{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 auto}
.s-leg .du{background:var(--green)} .s-leg .dp{background:var(--gold)} .s-leg .dk{background:var(--blue)}
.s-leg b{color:var(--txt);font-weight:900;font-variant-numeric:tabular-nums}

/* 자산 / 전송 내역 — 포인파이처럼 둥근 칸 */
.wtabs{grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);
  border-radius:12px;background:var(--card2);padding:4px;margin:14px 0 12px}
.wtabs button{border-radius:9px;padding:9px 0;border-bottom:0}
.wtabs button.on{background:var(--card);color:var(--txt);border-bottom:0}

/* ═══════════ 자산 상세 · 스캔선 (2026-08-23) ═══════════ */

/* 보유 자산 줄을 눌러 들어갈 수 있게 */
.asset{width:100%;text-align:left;border:1px solid var(--line);background:var(--card)}
.asset:active{background:var(--card2)}
.asset .go{flex:0 0 auto;margin-left:9px;color:var(--dim);font-size:16px;font-weight:800}

/* 자산 하나 화면 */
.actions.tk{margin-bottom:16px}
/* ★ 이 단추들은 잔액 카드 밖(맑은 바탕)에 있다 — 주간엔 글자를 짙게 (2026-09-03).
   잔액 카드 안의 같은 단추는 카드가 주간에도 짙은 청록이라 --on-key(흰색) 그대로 둔다. */
.actions.tk button{color:var(--on-key-soft)}
.tkbal{text-align:center;margin-bottom:20px}
.tkbal strong{display:block;font-size:28px;font-weight:900;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.tkbal strong small{font-size:14px;color:var(--sub);font-weight:800;margin-left:4px}
.tkbal p{margin:6px 0 0;color:var(--sub);font-size:12.5px;font-weight:700}

/* ★ QR 스캔선 — 위아래로 오간다.
   카메라가 켜졌는지 눈으로 알 수 있어야 한다. 멈춰 있으면 고장인 줄 안다. */
.scanbox .scanline{position:absolute;left:14%;right:14%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  box-shadow:0 0 12px var(--glow-blue);
  animation:scanmove 2.4s ease-in-out infinite;pointer-events:none}
@keyframes scanmove{
  0%   {top:15%;opacity:.25}
  10%  {opacity:1}
  50%  {top:83%;opacity:1}
  60%  {opacity:1}
  100% {top:15%;opacity:.25}
}
/* ★ 「동작 줄이기」를 켠 기기에서도 이 선만은 움직여야 한다.
   장식이 아니라 **카메라가 살아 있다는 신호**다 — 멈춰 있으면 고장인 줄 안다.
   (윈도우 설정 > 접근성 > 시각 효과 > 애니메이션 효과 를 끄면 이 상태가 된다.)
   대신 느리게 움직여 흔들림을 줄인다. */
@media (prefers-reduced-motion:reduce){
  .scanbox .scanline{animation-duration:4.2s}
}

/* USDT 줄은 누르는 것이 아니다 — 눌리는 것처럼 보이지 않게 한다 */
.asset.flat{cursor:default}
.asset.flat:active{background:var(--card)}

/* ★ 빨간 경고 — 자산을 잃을 수 있는 자리에만 쓴다. 남발하면 아무도 안 본다. */
.warning.red{border-color:var(--edge-red-hi);background:var(--tint-red);color:var(--on-red-tint)}
.warning.red .shield{background:var(--tint-red);color:var(--red)}

/* 「이건 받는 주소가 아니다」를 눈으로도 구분되게 */
.row-link.danger{border-color:var(--edge-red)}
.row-link.danger > i{background:var(--tint-red);color:var(--red)}
.row-link.danger em{font-style:normal;color:var(--red);font-weight:800;font-size:11.5px;
  display:block;margin-top:2px}

/* ═══════════ 잠금 해제 숫자판 (2026-08-23) ═══════════
   ★ 긴 비밀번호를 매번 치게 하면 결국 아무도 잠그지 않는다. 편해야 잠근다. */

.padhead{text-align:center;margin-bottom:22px}
.padhead b{display:block;font-size:20px;font-weight:900;letter-spacing:-.4px}
.padhead .mono{display:block;margin-top:6px;color:var(--sub);font-size:12.5px;font-weight:800;
  font-family:ui-monospace,monospace}

.paddots{display:flex;justify-content:center;gap:13px;margin-bottom:12px}
.paddots i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line);
  background:transparent;transition:background .12s,border-color .12s}
.paddots i.on{background:var(--blue);border-color:var(--blue)}

.padmsg{text-align:center;color:var(--sub);font-size:12.5px;font-weight:800;
  min-height:17px;margin-bottom:26px}
.padmsg.bad{color:var(--red)}

.padkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;
  max-width:300px;margin:0 auto 22px}
.padkeys .k{border:0;background:transparent;color:var(--txt);
  font-size:26px;font-weight:800;padding:13px 0;border-radius:14px;
  font-variant-numeric:tabular-nums}
.padkeys .k:active{background:var(--tint-blue)}
.padkeys .k.ico{font-size:20px;color:var(--sub)}
.padkeys .k.blank{pointer-events:none}

.padkeys.shake{animation:padshake .38s}
@keyframes padshake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)} 40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}
}

/* ★ 왼쪽 위 점 아홉 개 — 포인파이와 같은 모양 */
.icon-btn.dots9{display:grid;grid-template-columns:repeat(3,3px);grid-template-rows:repeat(3,3px);
  gap:3px;place-content:center;font-size:0}
.icon-btn.dots9 i{display:block;width:3px;height:3px;border-radius:50%;background:var(--sub)}
.icon-btn.dots9:active i{background:var(--blue)}

/* ═══════════ 시세 — 호가창 (2026-08-24, poinfi.org 에서 옮겨 옴) ═══════════
   ★ 이 화면은 「읽기」다. 여기에 스왑·승인 단추를 붙이면
     그 순간 우리가 교환을 운영하는 것이 된다. 링크만 준다. */

:root{ --bid:#2AA76B; --ask:#D96058;
       --bid-bg:rgba(42,167,107,.16); --ask-bg:rgba(217,96,88,.16); }

.mkbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mkbar select{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:11px;
  background:var(--card2);color:var(--txt);padding:10px 11px;font-size:13.5px;font-weight:800}
.mkbar .pill{flex:0 0 auto}

.lastbox{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.lastbox b{font-size:26px;font-weight:900;letter-spacing:-.7px;
  font-family:ui-monospace,monospace}
.lastbox small{color:var(--sub);font-size:13px;font-weight:800}
.krwref{margin-left:auto;font-size:12.5px;color:var(--dim);font-weight:700}

.section-title em{font-style:normal;color:var(--dim);font-size:11.5px;font-weight:700;margin-left:6px}

.bookhead,.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
  font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bookhead{color:var(--dim);font-weight:800;padding:0 8px 7px;
  border-bottom:1px solid var(--line);font-family:inherit;font-size:12px}
.bookhead span:nth-child(2),.bookhead span:nth-child(3){text-align:right}
.rows{display:flex;flex-direction:column}
/* ★ 매도호가는 아래에서 위로 쌓인다. 가운뎃값에 가까운 것이 아래다. */
.rows.asks{flex-direction:column-reverse}
.row{position:relative;padding:6px 8px;align-items:center;z-index:0}
.row .bar{position:absolute;top:2px;bottom:2px;right:0;border-radius:4px;z-index:-1}
.row.ask .bar{background:var(--ask-bg)} .row.bid .bar{background:var(--bid-bg)}
.row .px{font-weight:800} .row.ask .px{color:var(--ask)} .row.bid .px{color:var(--bid)}
.row .sz,.row .tt{text-align:right;color:var(--txt)}
.row .tt{color:var(--dim)}
.rows .empty{color:var(--dim);display:block;text-align:center;
  padding:26px 0;font-family:inherit;font-size:13px}

.mid{display:flex;align-items:center;gap:10px;padding:11px 8px;margin:6px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--card2)}
.mid b{font-size:18px;font-weight:900;font-family:ui-monospace,monospace}
.mid span{font-size:12px;color:var(--dim);font-weight:700}
.mid .krw{margin-left:auto}

/* 지도 틀 — 딴 페이지를 끼운다 (2026-09-04) */
.mapframe{position:relative;height:230px;margin-bottom:9px;border:1px solid var(--line);
  border-radius:13px;overflow:hidden;background:var(--card)}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── 지도 화면 줄 세우기·업종 — 2026-09-04 */
.mapsort{display:flex;gap:6px;margin-bottom:8px}
.mapsort .pill{flex:1 1 0;text-align:center}
.mapsort .pill.on{border-color:var(--key);background:var(--tint-key);color:var(--on-key-soft)}
.kchips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.kchip{border:1px solid var(--line);border-radius:999px;background:var(--card2);
  color:var(--sub);font-size:11.5px;font-weight:800;padding:5px 10px;cursor:pointer}
.kchip.on{border-color:var(--key);background:var(--tint-key);color:var(--on-key-soft)}

/* 우리 가게 넣기 */
.sasel{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card2);
  color:var(--txt);font:inherit;font-size:14px;padding:11px 12px;margin-bottom:9px}
.saxy{display:grid;grid-template-columns:1fr 1fr;gap:7px}

/* ── 받는 가게 (지도 화면) — 2026-09-04.
      ★ 색·둥근모서리는 전부 이미 있는 토큰을 쓴다. 새 색을 만들지 않는다. */
.shoplist{display:flex;flex-direction:column;gap:8px}
.shoprow{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.shoprow.empty{text-align:center;padding:22px 13px;color:var(--sub)}
.shoprow.empty b{display:block;margin-bottom:5px;color:var(--txt);font-size:14px}
.shoptop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.shoptop b{font-size:14.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shopbadge{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.shopbadge.ok{color:var(--green);border-color:var(--green)}
/* ★ 리워드를 크게 (2026-09-04, 사장님 지시).
   손님이 가게를 고르는 이유가 이 숫자다 — 작은 딱지에 묻어 두면 안 보인다. */
.shoprw{flex:0 0 auto;text-align:right;line-height:1.15}
.shoprw b{display:block;font-size:18px;font-weight:800;color:var(--green)}
.shoprw em{display:block;font-style:normal;font-size:10.5px;font-weight:800;color:var(--sub)}
/* 0% 는 초록으로 적지 않는다 — 초록은 「좋다」는 뜻이다 */
.shoprw.zero b{color:var(--sub)}
.shopmeta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.shopkind{font-size:11.5px;font-weight:800;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.shopfar{font-size:11.5px;font-weight:800;color:var(--blue)}
/* ★ 아직 올라가지 않은 가게 — 있는 척하지 않는다 (2026-09-04) */
.shopmine{font-size:11px;font-weight:800;color:var(--gold);
  border:1px solid var(--gold);border-radius:999px;padding:2px 7px}
/* 재단이 내린 가게 — 관리자 화면에만 나온다. 붉은 기가 도는 회색으로 구분한다 */
.shopgone{font-size:11px;font-weight:800;color:var(--red);
  border:1px solid var(--red);border-radius:999px;padding:2px 7px}
/* 내려 둔 줄은 통째로 흐리게 — :has() 를 안 쓴다.
   카이아 월렛 안 브라우저처럼 오래된 곳에서 안 먹으면 표시가 통째로 사라진다. */
.shoprow.gone{opacity:.6}
/* 임시휴업 — 목록에서 빼지 않고 그렇다고 적는다 */
.shoprest{font-size:11px;font-weight:800;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px;background:var(--card2)}
.shopwhere{margin-top:6px;font-size:12.5px;color:var(--sub);line-height:1.5}
.shopnote{margin-top:3px;font-size:12px;color:var(--sub);line-height:1.5}
.shopacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.shopacts .pill{text-decoration:none}
/* ★ 「우리 가게 등록」은 오른쪽 끝으로 (2026-09-04 사장님 지시: 「우측 정렬로」).
   앞의 알약들과 성격이 다르다 — 앞의 것은 「이 가게를 본다」이고 이것은 「내가 올린다」다.
   ★ 줄이 넘쳐 두 줄이 되어도 margin-left:auto 가 그 줄 안에서 오른쪽으로 민다. */
.shopacts .pill.reg{margin-left:auto}

.venues{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.venue{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:12px 13px;
  text-align:left;text-decoration:none;color:var(--txt);cursor:pointer}
.venue b{font-size:13.5px;font-weight:800}
.venue small{display:block;font-size:11.5px;color:var(--sub);font-weight:700}
.venue .go{margin-left:auto;color:var(--blue);font-size:13px;font-weight:800}
.venue:active{background:var(--card2)}

.trade{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;padding:6px 8px;
  font-size:12.5px;font-family:ui-monospace,monospace;
  border-bottom:1px solid var(--line-soft)}
.trade:last-child{border-bottom:0}
.trade .px{font-weight:800}
.trade.buy .px{color:var(--bid)} .trade.sell .px{color:var(--ask)}
.trade .sz{text-align:right}
.trade a{color:var(--dim);text-decoration:none;font-size:11.5px}
.trade a:hover{color:var(--blue)}
#trades .empty{color:var(--dim);text-align:center;padding:22px 0;font-size:13px}
/* 「읽는 중」 표시 */
.spin{display:inline-block;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--blue);
  animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─────────── 보존 채굴 현황 ───────────
   ★ 관리자와 지갑(공개)에서 **같은 모양**으로 쓴다.
     따로 그리면 언젠가 한쪽만 고쳐져 두 화면이 다른 말을 하게 된다. */
.rvbox{margin-top:12px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card2)}
.rvrow{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:4px 0;font-size:13px;color:var(--sub)}
.rvrow b{color:var(--txt);font-weight:800;font-variant-numeric:tabular-nums}
.rvbar{margin-top:9px;height:7px;border-radius:999px;background:var(--bg);
  border:1px solid var(--line);overflow:hidden}
.rvbar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--key),var(--blue));transition:width .35s ease}
.rvnote{margin-top:7px;font-size:11.5px;color:var(--dim);font-weight:700;text-align:right}

/* ─────────── 물량 분배 ───────────
   ★ 주소를 안 적은 갈래도 그대로 보인다. 비어 있는 것을 숨기면 공시가 아니다. */
.allist{margin-top:4px}
.alrow{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.alrow:last-child{border-bottom:0}
.altop{display:flex;align-items:baseline;gap:8px}
.altop b{font-size:14px;font-weight:800;color:var(--txt)}
.altop .pct{margin-left:auto;font-size:13px;font-weight:800;color:var(--blue);
  font-variant-numeric:tabular-nums}
.albar{margin-top:7px;height:5px;border-radius:999px;background:var(--bg);
  border:1px solid var(--line);overflow:hidden}
.albar i{display:block;height:100%;width:0;border-radius:999px;background:var(--key)}
.alnum{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.alnum b{color:var(--txt);font-weight:800}
.alwho{margin-top:5px;font-size:11.5px;color:var(--dim);font-weight:700;
  font-family:ui-monospace,monospace;word-break:break-all}
.alnote{margin-top:5px;font-size:11.5px;color:var(--dim);line-height:1.6}
.allock{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  font-size:10.5px;font-weight:800;border:1px solid var(--line);color:var(--sub)}
.allock.hard{color:var(--green);border-color:var(--edge-green)}
.allock.soft{color:var(--gold);border-color:var(--edge-gold)}
.alrow.unset .altop b{color:var(--dim)}

/* ─────────── 하이브리드 나눔 막대 ───────────
   ★ 숫자만 보면 「50:50」이 얼마나 큰 변화인지 감이 안 온다.
     막대로 보여 주면 손잡이를 끌면서 바로 알 수 있다. */
.hybar{display:flex;margin-top:11px;height:12px;border-radius:999px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg)}
.hybar i{display:block;height:100%;transition:width .18s ease}
.hybar i.u{background:linear-gradient(90deg,var(--key),var(--blue));width:99%}
.hybar i.p{background:linear-gradient(90deg,var(--gold),var(--gold-hi));width:1%}
.hylegend{display:flex;gap:14px;margin-top:7px;font-size:12px;color:var(--sub);font-weight:700}
.hylegend span{display:flex;align-items:center;gap:5px}
.hylegend i{width:9px;height:9px;border-radius:3px}
.hylegend i.u{background:var(--key)} .hylegend i.p{background:var(--gold)}
.hylegend b{color:var(--txt);font-variant-numeric:tabular-nums}


/* ─────────── 받기 — 포인파이 모양 ───────────
   ★ 「고급 설정」 접기를 없앴다. 접어 두니 오히려 더 헷갈렸다.
     만질 것이 둘뿐이면 그냥 둘 다 보이는 편이 낫다.
   ★ 설명 문단을 걷어내고 칸마다 한 줄만 남긴다. 읽을 것이 많으면 안 읽는다. */
.rcvlead{margin:0 2px 12px;color:var(--sub);font-size:12.5px;line-height:1.6;text-align:center}

.ratehead{display:flex;align-items:baseline;justify-content:space-between;
  margin:20px 2px 8px;font-size:13.5px;font-weight:800;color:var(--txt)}
.ratehead b{color:var(--gold);font-size:13.5px;font-variant-numeric:tabular-nums}

.ratebox{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px}
.ratebox .rate-control{margin-top:11px}
.ratebox .hybar{margin-top:0}
.ratenote{margin:11px 0 0;color:var(--dim);font-size:11.5px;line-height:1.65}
.ratenote b{color:var(--sub)}

.ratestate{margin:9px 2px 0;font-size:12px;font-weight:700;color:var(--dim);
  line-height:1.6;text-align:center}
.ratestate.ok{color:var(--green)}
.ratestate.warn{color:var(--gold)}

/* 막대 오른쪽 값을 오른끝에 붙인다 */
.hylegend .r{margin-left:auto}
.hylegend{justify-content:flex-start}

/* 총 자산 한 줄만 남긴 모양 */
.sumcard.flat{padding:13px 15px}
.sumcard.flat .s-top{margin:0}

/* ─────────── 스왑 ─────────── */
.swflip{display:flex;justify-content:center;margin:-6px 0 -2px;position:relative;z-index:1}
.swflip button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card2);color:var(--blue);font-size:17px;font-weight:800}
.swflip button:active{background:var(--card)}
.field.ro{background:var(--bg)}
.field.ro input{color:var(--txt);font-weight:800}
.ratehead em{font-style:normal;color:var(--dim);font-size:11.5px;font-weight:700;margin-left:5px}

/* 내역 갈래별 색 — 무슨 일이 있었는지 눈으로 먼저 알게 */
/* ★ 색은 **제목이 아니라 숫자**에 준다 (2026-09-04).
   제목까지 물들이면 화면이 시끄럽고, 정작 「얼마」가 안 도드라진다. */
.feeditem .fi-r b.pos{color:var(--green)}
.feeditem .fi-r b.neg{color:var(--txt)}
.feeditem.burn .fi-r b{color:var(--burn-a)}
.feeditem:hover{border-color:var(--blue)}

/* ─────────── 서명 확인 판업 ───────────
   ★ .kv 는 「딱지 — 값」을 한 줄에 놓고 값을 안 접는다(white-space:nowrap).
     짧은 숫자에는 맞지만 「이 지갑의 USDT 을 대신 쓸 수 있게 됩니다」 같은 문장이 오면
     값이 넘쳐 나가고 딱지가 세로로 한 글자씩 쪼개진다. 실제로 그랬다.
   ★ 이 판업에서만 위아래로 쌓고 접히게 한다. 폰 화면이 좁아서 그게 맞다. */
.setup .hy-sum .kv{display:block;padding:8px 0}
.setup .hy-sum .kv + .kv{border-top:1px solid var(--line-soft)}
.setup .hy-sum .kv span{display:block;margin-bottom:4px;color:var(--sub);font-size:12.5px}
.setup .hy-sum .kv b{display:block;white-space:normal;word-break:break-word;
  text-align:left;line-height:1.45}
.setup .hy-sum .kv b.big{font-size:17px;font-weight:900;letter-spacing:-.3px;line-height:1.4}
.setup .hy-sum .kv b.mono{word-break:break-all;font-size:12.5px;line-height:1.5}

/* ─────────── 동의 약관 ───────────
   ★ 길지만 읽을 수 있어야 한다. 폰에서 스스로 스크롤되게 두고,
     제목과 본문 크기를 벌려 눈이 쉬게 한다. */
.terms{max-height:46vh;overflow-y:auto;margin-top:12px;padding:12px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--card2);
  -webkit-overflow-scrolling:touch}
.terms h3{margin:14px 0 6px;font-size:13.5px;font-weight:800;color:var(--txt)}
.terms h3:first-child{margin-top:0}
.terms p{margin:0 0 8px;font-size:12.5px;line-height:1.7;color:var(--sub)}
.terms ul{margin:0 0 8px;padding-left:16px}
.terms li{font-size:12.5px;line-height:1.7;color:var(--sub);margin-bottom:4px}
.terms b{color:var(--txt);font-weight:800}
.setup-box.wide{max-width:520px}

/* 외부 출금 — 다른 일이라는 것이 눈에 먼저 들어오게 */
.ratehead b.ext{color:var(--gold)}
.primary.warnbtn{background:linear-gradient(180deg,var(--warn-a),var(--warn-b));border-color:var(--warn-line)}

/* 설치 안내 — 번호를 붙여 순서를 눈으로 따라가게 */
.howto{margin:14px 0 0;padding:0;list-style:none;counter-reset:none}
.howto li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  font-size:13px;line-height:1.65;color:var(--sub);
  border-bottom:1px solid var(--line-soft)}
.howto li:last-child{border-bottom:0}
.howto li b{color:var(--txt);font-weight:800}
.howto .n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--key);color:var(--on-key);font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.row-link.off{opacity:.55}

/* 주소 42자를 줄이지 않고 그대로 보이게 — 줄이면 오타를 못 잡는다 */
.field.wide{padding:10px 11px}
.field.wide input{font-family:ui-monospace,monospace;font-size:12.5px;letter-spacing:0}

/* 찾을 수 있는 잠금이 있으면 눈에 띄게 */
.asset em small.ready{color:var(--key);font-weight:800}
#pitLockRow i.coin{font-size:16px}

/* 잠금 증서 — 그대로 옮겨 적을 수 있게 고정폭으로 */
pre.cert{white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,monospace;
  font-size:12px;line-height:1.65;color:var(--txt);background:var(--fg-a-03);
  border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0 10px}

/* 지문 단추 — 숫자 사이에 있어도 눌러야 할 것으로 보이게 (2026-08-28) */
.padkeys .k.bio{display:flex;align-items:center;justify-content:center;color:var(--key)}
.padkeys .k.bio svg{display:block}
.padkeys .k.bio:active{background:var(--tint-blue)}

/* 안심 문구 막대 (2026-08-28 보안 검증)
   잠금 해제 화면과 서명 확인창 맨 위에 늘 뜬다.
   이 자리에 내 문구가 안 보이면 가짜 화면이다. */
.safebar{display:flex; gap:9px; align-items:flex-start;
  margin:0 0 13px; padding:10px 12px; border-radius:12px;
  background:var(--tint-green); border:1px solid var(--edge-green)}
.safebar > i{flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:900; font-style:normal;
  background:var(--green); color:var(--safebar-ok-txt); margin-top:1px}
.safebar > span{min-width:0; font-size:14px; font-weight:800; color:var(--txt); line-height:1.45}
.safebar em{display:block; margin-top:3px; font-style:normal;
  font-size:11.5px; font-weight:700; color:var(--sub); line-height:1.5}
.safebar.off{background:var(--tint-gold); border-color:var(--edge-gold)}
.safebar.off > i{background:var(--gold); color:var(--safebar-off-txt)}

/* 전송 중 덮개 (2026-08-28)
   ★ 1.5초가 「멈춘 것」으로 보이지 않게 한다. 돌아가는 것이 보여야 기다린다.
   ★ 덮여 있으니 두 번 눌릴 길이 없다 — 이게 진짜 목적이다. */
/* ★ z-index 45 — **서명 창보다 아래**여야 한다 (2026-08-28).
   확인창(.setup 80)·모달(50)·카메라(70)·토스트(90)가 이 위에 떠야 한다.
   900 으로 뒀더니 서명 화면을 통째로 가려 아무것도 못 하게 됐다.
   덮개의 목적은 **그 아래 화면을 못 누르게** 하는 것이지 위를 가리는 게 아니다. */
.busyveil{position:fixed; inset:0; z-index:45; display:grid; place-items:center;
  background:var(--veil); backdrop-filter:blur(3px);
  animation:bvIn .12s ease-out}
@keyframes bvIn{from{opacity:0}to{opacity:1}}
.busybox{width:min(88vw,320px); padding:26px 22px 20px; border-radius:18px;
  background:var(--card); border:1px solid var(--fg-a-08);
  box-shadow:0 18px 50px var(--shadow-55); text-align:center}
.busyring{width:38px; height:38px; margin:0 auto 14px; border-radius:50%;
  border:3px solid var(--fg-a-08); border-top-color:var(--acc);
  animation:spin .8s linear infinite}
.busybox b{display:block; font-size:17px; font-weight:900; color:var(--txt); margin-bottom:5px}
.busybox span{display:block; font-size:13.5px; font-weight:700; color:var(--sub); line-height:1.55}
.busybox em{display:block; margin-top:13px; font-style:normal;
  font-size:11.5px; font-weight:700; color:var(--sub); opacity:.75}
/* ── 끝났을 때 (2026-08-29) ──
   ★ 도는 고리를 ✓ 로 바꾸고 「확인」을 띄운다.
     확인을 누르기 전에는 덮개가 안 사라지므로 두 번 눌릴 길이 없다.
   ★ 색은 초록으로 — 「됐다」는 한눈에 읽혀야 한다. */
.busycheck{display:none; width:38px; height:38px; margin:0 auto 14px;
  border-radius:50%; background:var(--tint-green);
  border:2px solid var(--green); color:var(--green);
  font-size:22px; font-weight:900; line-height:34px}
.busyok{display:none; width:100%; margin-top:15px}
.busyveil.done .busyring{display:none}
.busyveil.done .busycheck{display:block}
.busyveil.done .busyok{display:block}
.busyveil.done .busybox > b{color:var(--green)}

.busytx{display:block; margin-top:11px; padding:7px 9px; border-radius:9px;
  background:var(--fg-a-08); color:var(--acc);
  font-size:11.5px; font-weight:800; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .busyring{animation-duration:2.4s}
  .busyveil{animation:none}
}


/* ═══ 비밀번호 칸의 「보기」 눈 (2026-09-02, 사장님 지시) ═══
   ★ -webkit-text-security 를 쓰지 않는다. 2026-08-24 에 그것으로
     점이 서너 개만 그려지는 크롬 버그를 만났다. type 을 직접 바꾸는 방식이다. */
.pweye{position:relative;display:block}
.pweye>input{padding-right:44px}
.pweye .eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;margin:0;border:0;border-radius:9px;background:transparent;
  color:var(--dim);cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none}
.pweye .eye svg{display:block;pointer-events:none}
.pweye .eye:hover{color:var(--txt);background:var(--card)}
.pweye .eye.on{color:var(--blue)}
.pweye .eye:focus-visible{outline:2px solid var(--key);outline-offset:-2px}


/* ═══ 유동성 화면 (2026-09-03) ═══
   ★ .kv b 는 white-space:nowrap 이라 값이 길면 왼쪽 이름표가 한 글자씩 접혔다.
     이 화면은 값이 「1,194.82 USDT + 115,994 PIT」처럼 길어서 값 쪽을 접게 한다. */
#liq .kv{align-items:center}
#liq .kv > span{flex:0 0 auto;max-width:40%;line-height:1.35}
#liq .kv b{white-space:normal;text-align:right;word-break:keep-all;max-width:60%;line-height:1.45}


/* ═══ 리워드 80:20 막대 하나 (2026-09-03, 사장님 지시) — 상자 둘을 합쳤다 ═══ */
.splitone{margin:10px 0 4px;padding:11px 12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.splitone .bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--deep)}
.splitone .bar .a{flex:0 0 80%;background:var(--green)}
.splitone .bar .b{flex:1 1 auto;background:var(--purple)}
/* ★ 셋으로 갈리는 막대 (2026-09-04, 8 : 1 : 1).
   .three 를 붙인 것만 셋이 된다 — 옛 두 갈래 막대는 그대로 둔다. */
.splitone.three .bar .a{flex:0 0 80%}
.splitone.three .bar .b{flex:0 0 10%;background:var(--purple)}
.splitone.three .bar .c{flex:1 1 auto;background:var(--gold)}
.splitone .legs{display:flex;justify-content:space-between;gap:12px;margin-top:9px}
.splitone .legs > span{display:block;min-width:0}
.splitone .legs .r{text-align:right}
/* 셋일 때는 가운데를 가운데로 — 좁은 화면에서 글자가 겹치지 않게 조금 작게 */
.splitone.three .legs{gap:8px}
.splitone.three .legs .m{text-align:center}
.splitone.three .legs small{font-size:10.5px}
.splitone .legs b{display:block;font-size:15px;font-weight:900;color:var(--txt);letter-spacing:-.3px;white-space:nowrap}
.splitone .legs small{display:block;margin-top:2px;color:var(--sub);font-size:11px;font-weight:700;line-height:1.45}
.splitone .legs small em{font-style:normal;color:var(--dim)}

/* ═══════════════ 대시보드 (2026-09-03) ═══════════════
   ★ 「받은 것 전부」 큰 숫자 하나 + 갈래별 줄 + 내역. 색은 토큰만 — 새 토큰이 없으면 옛 토큰으로 물러선다. */
.dash-total{margin:4px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--tint-gold,var(--card2))}
.dash-total strong{display:block;font-size:27px;font-weight:900;letter-spacing:-.6px;line-height:1.2;
  color:var(--gold);font-variant-numeric:tabular-nums;word-break:break-all}
.dash-total strong .unit{font-style:normal;font-size:14px;font-weight:800;color:var(--sub);
  margin-left:6px;letter-spacing:0}
.dash-total small{display:block;margin-top:5px;color:var(--sub);font-size:12px;font-weight:700;line-height:1.5}
.dash-total small b{color:var(--green)}
.segt.dash-tabs{grid-template-columns:repeat(5,1fr)}
.segt.dash-tabs button{padding:9px 1px;font-size:12px;letter-spacing:-.4px;white-space:nowrap}
.dash-kind{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;font-style:normal;
  font-size:11px;font-weight:800;vertical-align:1px;background:var(--fg-a-08,var(--card));color:var(--sub)}
.feeditem.dash-pay b{color:var(--gold)}
.feeditem.dash-pay .dash-kind{background:var(--tint-gold,var(--card));color:var(--on-gold-tint,var(--gold))}
.feeditem.dash-ref b{color:var(--purple)}
.feeditem.dash-ref .dash-kind{background:var(--tint-purple,var(--card));color:var(--on-purple-tint,var(--purple))}
.feeditem.dash-hand b{color:var(--blue)}
.feeditem.dash-hand .dash-kind{background:var(--tint-blue,var(--card));color:var(--on-blue-tint,var(--blue))}
.feeditem.dash-mer b{color:var(--green)}
.feeditem.dash-mer .dash-kind{background:var(--tint-green,var(--card));color:var(--on-green-tint,var(--green))}
.feeditem.dash-given{opacity:.72}
.feeditem.dash-given b{color:var(--sub)}
#dashMore{margin-top:10px}


/* ═══ TXID 조회 (2026-09-03) ═══
   ★ .kv b 는 nowrap 이라 「되돌려짐 — 자산은 …」 같은 긴 값이 이름표를 접었다.
     유동성 화면처럼 값 쪽을 접게 한다. */
#txid .kv{align-items:flex-start;padding:4px 0}
#txid .kv > span{flex:0 0 auto;max-width:34%;line-height:1.35}
#txid .kv b{white-space:normal;text-align:right;word-break:break-word;max-width:66%;line-height:1.45}
#txid .kv b.ok{color:var(--green)}
#txid .kv b.bad{color:var(--red)}
#txid .kv b.wait{color:var(--gold)}
#txid .card > .primary{margin-top:12px}
.txid-sub{margin:14px 0 8px;font-size:14px}
.txid-events{display:grid;gap:8px}
/* ★★ 2026-09-04 사장님 지시 — 「글씨를 조금 얇게, 컬러를 보기 좋게」.
   전에는 본문이 굵기 700 에 주소마다 파란색이라, 주소 셋 든 줄이 파랑·흰색으로 뒤엉켰다.
   · 본문은 얇게(500) 한 가지 색으로 — 눈이 줄을 따라가게
   · 주소는 색이 아니라 **고정폭 글꼴**로 구별한다. 파랑을 뺀다
   · 줄 간격을 늘려 숨 쉴 자리를 준다 */
.txid-ev{border:1px solid var(--line-soft,var(--line));border-radius:11px;background:var(--card2);
  padding:11px 12px}
/* 제목은 「무슨 사건인가」 하는 작은 딱지다 — 크게 외치지 않는다 */
.txid-ev b{display:block;color:var(--sub);font-size:11.5px;font-weight:800;
  letter-spacing:.2px;margin-bottom:5px}
/* ★ 더 얇게·더 작게 (2026-09-04 사장님 재지시).
   크기는 앱 전체를 1px 키우기 **전**으로 되돌렸다 — 이 칸은 한 줄에 주소가
   둘씩 들어가는 촘촘한 자리라 여기만 예외로 둔다. */
.txid-ev small{display:block;color:var(--txt);font-size:11.5px;line-height:1.8;
  font-weight:400;word-break:break-word;opacity:.8}
.txid-ev.pay{background:var(--tint-key,var(--card2));border-color:var(--key)}
.txid-ev.pay b{color:var(--on-key-tint,var(--sub))}
.txid-ev.burn b{color:var(--red)}
.txid-ev.other{opacity:.7}
/* ★★ 딱지-값 표 (2026-09-04, 사장님 지시 — 「분류를 제대로. 금액 주소 숫자 등」).
   왼쪽에 무엇인지, 오른쪽에 값. 금액과 주소를 한 줄에 섞지 않는다. */
.txid-rows{display:grid;gap:4px}
.txid-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.txid-row>span{flex:0 0 auto;color:var(--dim);font-size:10.5px;font-weight:600;
  letter-spacing:.2px;white-space:nowrap}
.txid-row>i{font-style:normal;min-width:0;text-align:right;color:var(--txt);
  font-size:11.5px;font-weight:400;line-height:1.6;opacity:.9;
  word-break:break-word;font-variant-numeric:tabular-nums}
.txid-none{color:var(--dim);font-weight:400}
/* 주소 — 파랑을 빼고 고정폭으로만 구별한다. 한 줄에 셋씩 들어가도 안 시끄럽다 */
/* ★ 주소도 함께 얇게 (2026-09-04). 줄의 절반이 주소라, 여기가 굵으면
   본문만 얇게 해도 줄 전체가 굵어 보인다. */
.txid-a{font-family:ui-monospace,monospace;color:var(--txt);font-weight:400;
  opacity:.92;cursor:help}
.txid-scan{display:block;text-align:center;text-decoration:none;margin-top:12px}
.txid-empty{margin:4px 2px;color:var(--dim);font-size:12.5px;font-weight:700;line-height:1.55}

/* ═══════════════ 통화 화면 (2026-09-03) ═══════════════
   참고 환산가의 표시 통화를 고르는 목록 (pit-ccy.js). 색은 전부 토큰만 쓴다. */
.ccy-search input{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);outline:0;padding:11px 13px;font-size:14px;color:var(--txt);margin-bottom:10px}
.ccy-search input::placeholder{color:var(--dim)}
.ccy-search input:focus{border-color:var(--key)}
.ccy-status{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;
  color:var(--sub);font-size:12.5px;font-weight:800}
.ccy-list{display:flex;flex-direction:column;gap:8px}
.ccy-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:12px 13px;color:var(--txt)}
.ccy-row i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--dim);
  position:relative;display:block}
.ccy-row b{flex:1;min-width:0;font-size:14.5px;font-weight:900;letter-spacing:.2px}
.ccy-row b small{display:block;margin-top:2px;color:var(--sub);font-size:12px;font-weight:700}
.ccy-row > span{flex:0 0 auto;color:var(--sub);font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums;text-align:right}
.ccy-row.on{border-color:var(--key);background:var(--tint-key,var(--card2))}
.ccy-row.on i{border-color:var(--key)}
.ccy-row.on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--key)}
.ccy-row.on > span{color:var(--on-key-tint,var(--on-key))}
.ccy-empty{margin:0;padding:18px 0;text-align:center;color:var(--dim);font-size:13px;font-weight:700}


/* ═══ 정보 — 자주 묻는 질문 (2026-09-03, 사장님 지시) ═══
   ★ 묶음(.faq-g) → 질문(.faq-q) → 답(.faq-a). 펼침은 .open 클래스, 감춤은 .hidden 클래스.
     화살표(›)는 묶음이 열리면 90° 돌아 아래를 본다.
   ★ 백서 장을 그대로 실어 오므로 paper.css 의 모양을 .faq-a 아래에만 다시 적었다.
     paper.css 를 index.html 에 얹으면 안 된다 — 그 파일은 header 격자를 바꿔 버린다.
   ★ 색은 토큰만 쓴다. 새 토큰(--line-soft·--ctrl·--tint-*·--on-*-tint)은
     아직 없을 때를 대비해 옛 토큰으로 받친다. */
.faq h2{margin-bottom:4px}
.faq-g{border-top:1px solid var(--line-soft,var(--line))}
.faq-g:first-child{border-top:0}
.faq-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:transparent;padding:13px 2px;color:var(--txt);font-size:14px;font-weight:900}
.faq-h > b{flex:1;min-width:0;word-break:keep-all}
.faq-h > i{flex:0 0 auto;display:inline-block;font-style:normal;color:var(--dim);font-size:19px;
  line-height:1;transition:transform .16s}
.faq-g.open > .faq-h > i{transform:rotate(90deg);color:var(--blue)}
.faq-b{padding:0 0 6px}
.faq-q{border-top:1px solid var(--line-soft,var(--line))}
.faq-qh{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:transparent;padding:10px 2px 10px 12px;color:var(--sub);font-size:13.5px;
  font-weight:700;line-height:1.5}
.faq-qh > span{flex:1;min-width:0;word-break:keep-all}
.faq-qh > em{flex:0 0 auto;font-style:normal;color:var(--blue);font-size:12px;font-weight:800;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--ctrl,var(--card2))}
.faq-q.open > .faq-qh{color:var(--txt)}
.faq-q.open > .faq-qh > em{color:var(--on-key);border-color:transparent;
  background:linear-gradient(180deg,var(--key),var(--key2))}
.faq-qh.faq-win > span{color:var(--blue);font-weight:800}

/* 답 상자 — 내가 쓴 답(p 만)과 백서 장(카드 속 그대로) 둘 다 여기 들어온다 */
.faq-a{margin:0 2px 12px 12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);color:var(--txt);font-size:13.5px;line-height:1.72;word-break:keep-all;
  overflow-wrap:anywhere}
.faq-a > p{margin:0}
.faq-a > p + p{margin-top:8px}
.faq-a > p.lead{margin:9px 0 0;color:var(--txt)}
.faq-a > p.lead:first-child{margin-top:0}
.faq-a .note{margin:10px 0 0;color:var(--dim);font-size:12px;line-height:1.65}
.faq-a a{color:var(--blue)}
.faq-a code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;word-break:break-all}
.faq-a h3.sub{margin:15px 0 7px;font-size:12.5px;font-weight:900;color:var(--blue);letter-spacing:.2px}
.faq-a .kv{align-items:flex-start;padding:7px 0;border-top:1px solid var(--line-soft,var(--line))}
.faq-a .kv:first-child,.faq-a h3.sub + .kv,.faq-a p + .kv{border-top:0}
.faq-a .kv > span{flex:1 1 auto;min-width:0;line-height:1.45}
.faq-a .kv b{white-space:normal;text-align:right;max-width:60%;line-height:1.45}
.faq-a .kv b.good{color:var(--green)}
.faq-a .pillrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.faq-a .pillrow .pill{background:var(--card);border:1px solid var(--line);color:var(--blue);
  font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:99px}
.faq-a ol.steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:st}
.faq-a ol.steps li{counter-increment:st;position:relative;padding:8px 0 8px 28px;
  border-top:1px solid var(--line-soft,var(--line));font-size:13.5px;line-height:1.65;color:var(--txt)}
.faq-a ol.steps li:first-child{border-top:0}
.faq-a ol.steps li::before{content:counter(st);position:absolute;left:0;top:8px;width:19px;height:19px;
  border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--blue);
  font-size:11px;font-weight:900;display:grid;place-items:center}
.faq-a ol.steps small{color:var(--sub);font-size:12px}
.faq-a .tag{display:inline-block;background:var(--card);border:1px solid var(--line);color:var(--sub);
  font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:7px;margin:2px 3px 0 0;white-space:nowrap}
.faq-a .fnlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.faq-a .fn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  background:var(--card);border:1px solid var(--line);color:var(--green);padding:4px 9px;border-radius:8px}
.faq-a .fn.none{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--red)}
.faq-a .atable{margin-top:12px}
.faq-a .arow{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:start;padding:10px 0;
  border-top:1px solid var(--line-soft,var(--line))}
.faq-a .arow.head{border-top:0;padding-bottom:6px;color:var(--sub);font-size:11.5px;font-weight:800}
.faq-a .arow.head b{color:var(--sub);font-size:11.5px;font-weight:800}
.faq-a .arow.head > em{display:none}
.faq-a .arow > span{min-width:0}
.faq-a .arow > span > b{display:block;font-size:13.5px;font-weight:800;color:var(--txt);line-height:1.4}
.faq-a .arow > span > small{display:block;margin-top:3px;color:var(--sub);font-size:11.5px;font-weight:600;line-height:1.55}
.faq-a .arow > span > code{display:block;margin-top:5px;font-size:11px;color:var(--dim);line-height:1.4}
.faq-a .arow > b{font-size:14px;font-weight:900;color:var(--txt);white-space:nowrap;font-variant-numeric:tabular-nums}
.faq-a .arow > em{grid-column:1 / -1;justify-self:start;font-style:normal;font-size:11px;font-weight:800;
  color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:3px 7px;line-height:1.35}
.faq-a .arow > em.hard{color:var(--green)}
.faq-a .warnbox{margin-top:14px;padding:12px 13px;border-radius:12px;
  background:var(--tint-gold,var(--card));border:1px solid var(--line)}
.faq-a .warnbox > b{display:block;color:var(--gold);font-size:13px;font-weight:900;margin-bottom:6px}
.faq-a .warnbox p{margin:7px 0 0;color:var(--on-gold-tint,var(--sub));font-size:12.5px;line-height:1.7}
.faq-a .warnbox p:first-of-type{margin-top:0}
.faq-a .warnbox a{color:var(--gold)}
.faq-a .warnbox.danger{background:var(--tint-red,var(--card))}
.faq-a .warnbox.danger > b{color:var(--red)}
.faq-a .warnbox.danger p{color:var(--on-red-tint,var(--sub))}
.faq-a .risk{padding:11px 0;border-top:1px solid var(--line-soft,var(--line))}
.faq-a .risk:first-of-type{border-top:0;padding-top:2px}
.faq-a .risk > b{display:block;color:var(--txt);font-size:13.5px;font-weight:800;margin-bottom:5px}
.faq-a .risk p{margin:0;color:var(--sub);font-size:12.5px;line-height:1.72}
.faq-a ul.nolist{margin:10px 0 0;padding:0;list-style:none}
.faq-a ul.nolist li{position:relative;padding:8px 0 8px 20px;border-top:1px solid var(--line-soft,var(--line));
  font-size:13.5px;line-height:1.6;color:var(--txt)}
.faq-a ul.nolist li:first-child{border-top:0}
.faq-a ul.nolist li::before{content:'×';position:absolute;left:2px;top:8px;color:var(--red);font-weight:900;font-size:14px}
.faq-a .clist{margin-top:10px}
.faq-a .crow{padding:9px 0;border-top:1px solid var(--line-soft,var(--line))}
.faq-a .crow:first-child{border-top:0}
.faq-a .crow > span{display:block;font-size:12.5px;font-weight:700;color:var(--sub)}
.faq-a .crow > span > b{color:var(--txt);font-weight:800}
.faq-a .crow > span > em{font-style:normal;color:var(--dim);font-size:11.5px;margin-left:4px}
.faq-a .crow > code{display:block;margin-top:4px;color:var(--blue);line-height:1.45}
.faq-a .crow > em{font-style:normal;font-size:11px;font-weight:700;color:var(--dim)}
.faq-a .outline.tight{margin-top:8px}

/* ═══ 추천인 — 초대하기 (pit-refer.js, 2026-09-03) ═══
   색은 토큰만 쓴다. QR 바탕은 .qr 이 이미 흰색이다 — 스캔이 되려면 흰 바탕이어야 한다.
   노란 안내 상자는 기존 .warning.gold 를 그대로 쓴다. */
.inv-lead{margin:-6px 2px 14px;text-align:center;color:var(--sub);font-size:13.5px;font-weight:700}
.qr.big{width:250px;height:250px;margin:0 auto 14px}
.inv-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.inv-actions .primary,.inv-actions .outline{margin-top:0}
.inv-scanrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.inv-scanrow .outline{margin-top:0}
#refPaneScan{margin-top:10px}
#refPaneScan .outline{margin-top:0}
.inv-pending{color:var(--gold);font-weight:800}
.inv-done{margin-top:12px;padding:10px 12px;border:1px solid var(--green);border-radius:10px;
  background:var(--tint-green);color:var(--on-green-tint);font-size:13.5px;font-weight:800;text-align:center}
.inv-done b{font-family:ui-monospace,monospace}
#refer .kv + .kv{margin-top:8px}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.share-grid button{border:0;background:transparent;color:var(--sub);font-size:12px;font-weight:800;padding:4px 0}
.share-grid button i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 6px;
  border:1px solid var(--line);border-radius:50%;background:var(--card2);color:var(--blue);
  font-style:normal;font-size:16px;font-weight:900}
.share-grid button:active i{border-color:var(--key)}

/* ── 시세: 호가 줄을 눌러 수량 넣어 보기 (2026-09-03) ──
   줄이 <div> 에서 <button> 이 됐다. 단추 기본 꾸밈을 지워 보이던 그대로 둔다. */
/* ★ font 를 통째로 물려받게 하면 안 된다 — 위 .bookhead,.row 의 고정폭 글꼴과
   11.5px 이 지워져 호가 숫자 줄이 어긋난다. 단추 기본 꾸밈만 지운다. */
.rows .row{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  width:100%;text-align:inherit;color:inherit;cursor:pointer;letter-spacing:inherit}
.rows .row:hover .px{text-decoration:underline}
.rows .row:active{opacity:.75}
#bkPick .kv b{white-space:normal;text-align:right}
#bkPickGuard{margin-top:8px}

/* ── 매도 계획표 (2026-09-03) ── */
.planlist{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
/* ★ 세 칸이다 — 넷으로 두면 좁은 폰에서 「지움」이 아래로 밀린다 (2026-09-03) */
.planrow{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.planrow .pv{font-size:14.5px;font-weight:900;color:var(--sub);white-space:nowrap}
.planrow .ps{display:block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:800;
  color:var(--dim)}
.planrow .pq{font-size:13px;font-weight:800;color:var(--txt);min-width:0}
.planrow .pe{display:block;margin-top:2px;color:var(--dim);font-size:11.5px;font-weight:700;
  font-style:normal}
.planrow .pb{display:flex;gap:5px;flex:0 0 auto}
.planrow.on{border-color:var(--green);background:var(--tint-green)}
.planrow.on .pv,.planrow.on .ps{color:var(--green)}
.planrow .pill{padding:5px 9px;font-size:12px;white-space:nowrap}
.planrow .pill.del{color:var(--red)}
.planlist .empty{color:var(--dim);text-align:center;padding:14px 0;font-size:12.5px;font-weight:700}