/* 2026-10 리디자인: 검정 바탕 + 체인 강조색 하나, 01 자산 → 02 받는 사람 → 03 확인 흐름 */
:root{
  --bg:#0A0B0F;
  --surface:#12141A;
  --surface-2:#1A1C22;
  --inset:#0E1015;
  --line:#1E2129;
  --line-2:#2A2E39;
  --text:#F2F3F5;
  --text-2:#C9CDD6;
  --muted:#9AA0AE;
  --faint:#6B7180;
  --accent:#F0B90B;
  --accent-hover:#FFD447;
  --on-accent:#0A0B0F;
  --ok:#3DD68C;
  --danger:#FF8A8A;
  --border:var(--line);
  --primary:var(--accent);
  --font: "IBM Plex Sans KR", system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --display: "Space Grotesk", "IBM Plex Sans KR", system-ui, sans-serif;
  --monof: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body[data-chain="evm"]{ --accent:#7B8CFF; --accent-hover:#9AA6FF; }
body[data-chain="solana"]{ --accent:#14F195; --accent-hover:#5CF7B8; }

html,body[data-chain]{ height:auto; }
body[data-chain]{
  margin:0;
  background:var(--bg) !important;
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
}
body[data-chain]::before,body[data-chain]::after{ display:none !important; }
body[data-chain] a{ color:var(--accent); }
body[data-chain] a:hover{ color:var(--accent-hover); text-decoration:none; }
body[data-chain] .mono{ font-family:var(--monof); }
body[data-chain] .muted{ color:var(--muted); }

body[data-chain] .app{ max-width:none; padding:0; margin:0; }

/* 상단 */
body[data-chain] .top{
  display:block; margin:0; padding:0;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
body[data-chain] .topIn{
  max-width:1240px; margin:0 auto; padding:16px 32px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
}
body[data-chain] .brand{ display:flex; align-items:center; gap:12px; min-width:0; color:var(--text); }
body[data-chain] .brand:hover{ color:var(--text); }
body[data-chain] .brand img{ width:36px; height:36px; border-radius:10px; display:block; }
body[data-chain] .title{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; line-height:1.2; }

body[data-chain] .pageTabs{
  display:flex; gap:4px; padding:4px; margin:0;
  border-radius:12px; background:var(--surface); border:1px solid var(--line);
  box-shadow:none;
}
body[data-chain] .pageTab{
  padding:8px 16px; border-radius:9px; border:0;
  color:var(--muted); font-weight:500; font-size:14px; background:transparent;
  box-shadow:none; white-space:nowrap;
}
body[data-chain] .pageTab:hover{ color:var(--text); background:transparent; text-decoration:none; }
body[data-chain] .pageTab.active{ background:#1F232D; color:var(--text); font-weight:600; box-shadow:none; border:0; }

body[data-chain] .walletBox{
  flex:1 1 auto; width:auto; padding:0; margin:0;
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px;
  border:0; background:transparent; box-shadow:none;
}
body[data-chain] .pill{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--line); background:transparent;
  color:var(--text-2); font-size:13px; max-width:260px;
}
body[data-chain] #pillNet::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
body[data-chain] #pillAcc{ font-family:var(--monof); font-size:12px; }

/* 입력·버튼 공통 */
body[data-chain] .inp,body[data-chain] .ta,body[data-chain] select.inp,body[data-chain] #selChain,body[data-chain] #selToken,body[data-chain] #selAsset{
  height:44px; padding:0 14px;
  border-radius:12px; border:1px solid var(--line-2);
  background:var(--inset) !important; color:var(--text) !important;
  font:inherit; font-size:14px; box-shadow:none;
  width:100%;
}
body[data-chain] .ta,body[data-chain] textarea.inp{ height:auto; min-height:180px; padding:12px 14px; font-family:var(--monof); font-size:13px; resize:vertical; }
body[data-chain] .inp:focus,body[data-chain] .ta:focus,body[data-chain] #selChain:focus,body[data-chain] #selToken:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
body[data-chain] #selChain{ width:auto; min-width:180px; height:40px; }
body[data-chain] label{ color:var(--muted); font-size:13px; font-weight:500; }

body[data-chain] .btn{
  height:40px; padding:0 16px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:none; transform:none; transition:background .15s, border-color .15s, color .15s;
}
body[data-chain] .btn:hover{ background:var(--surface-2); border-color:#3A3F4D; filter:none; transform:none; }
body[data-chain] .btn:active{ transform:none; }
body[data-chain] .btn[disabled]{ opacity:.45; cursor:not-allowed; }
body[data-chain] .btnGhost{ background:transparent; }
body[data-chain] #btnConnect,body[data-chain] .btnPrimary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
body[data-chain] #btnConnect:hover,body[data-chain] .btnPrimary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
body[data-chain] .btnIcon{ width:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
body[data-chain] .btnSend,body[data-chain] #btnApproveSendDiff,body[data-chain] #btnApproveSendSame,body[data-chain] #btnSendDiff,body[data-chain] #btnSendSame{
  width:100%; height:56px; border-radius:14px;
  background:var(--accent); border:0; color:var(--on-accent);
  font-size:17px; font-weight:700;
}
body[data-chain] #btnApproveSendDiff:hover,body[data-chain] #btnApproveSendSame:hover,body[data-chain] #btnSendDiff:hover,body[data-chain] #btnSendSame:hover{ background:var(--accent-hover); color:var(--on-accent); }
body[data-chain] .btnDanger{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
body[data-chain] .btnDanger:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }

/* 본문 배치 */
body[data-chain] .layout{
  max-width:1240px; margin:0 auto; padding:40px 32px 64px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
}
body[data-chain] .colMain{ flex:999 1 640px; min-width:0; display:flex; flex-direction:column; gap:20px; }
body[data-chain] .colSide{ flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:20px; }
body[data-chain] .pageHead{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:40px; letter-spacing:-.03em; line-height:1.1;
}

body[data-chain] .card{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:20px; padding:24px; box-shadow:none !important;
  display:flex; flex-direction:column; gap:18px;
}
body[data-chain] .card::before,body[data-chain] .card::after{ display:none !important; }
body[data-chain] .stepHead{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
body[data-chain] .stepHead h2{ margin:0; font-size:18px; font-weight:600; color:var(--text); }
body[data-chain] .stepNo{
  font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--on-accent); background:var(--accent); border-radius:8px; padding:3px 9px;
}
body[data-chain] .stepHead .spacer{ flex:1 1 auto; }

body[data-chain] .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0; }
body[data-chain] .row.tight{ gap:10px; }
body[data-chain] .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
body[data-chain] .field.grow{ flex:1 1 240px; }

/* 받는 사람 탭 */
body[data-chain] .seg{ display:flex; gap:4px; padding:4px; border-radius:10px; background:var(--inset); border:1px solid var(--line); }
body[data-chain] .seg button{
  height:36px; padding:0 14px; border-radius:7px; border:0;
  background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer;
}
body[data-chain] .seg button[aria-selected="true"]{ background:#1F232D; color:var(--text); font-weight:600; }
body[data-chain] .tabPanel{ display:flex; flex-direction:column; gap:16px; }
body[data-chain] .tabPanel[hidden]{ display:none; }

body[data-chain] .drop{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  border-radius:14px; border:1.5px dashed #343949; cursor:pointer; color:var(--text);
}
body[data-chain] .drop:hover{ border-color:var(--accent); }
body[data-chain] .drop .dropIcon{
  width:44px; height:44px; border-radius:12px; background:var(--surface-2); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
body[data-chain] .drop .dropText{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
body[data-chain] .drop .dropName{ font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-chain] .drop .dropSub{ font-size:13px; color:var(--muted); }
body[data-chain] .drop input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
body[data-chain] .drop{ position:relative; }

body[data-chain] .summary{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:0; }
body[data-chain] .sumItem{
  padding:14px 16px; border-radius:12px; background:var(--inset) !important;
  border:1px solid var(--line) !important; box-shadow:none !important;
  display:flex; flex-direction:column; gap:2px;
}
body[data-chain] .sumItem .muted{ font-size:13px; }
body[data-chain] .sumItem .mono{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--text); overflow-wrap:anywhere; }
body[data-chain] #sumBad{ color:var(--danger); }

body[data-chain] .tableWrap{ border:1px solid var(--line); border-radius:14px; overflow:auto; background:transparent; max-height:420px; }
body[data-chain] .table,body[data-chain] .tableWrap table{ width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
body[data-chain] .table th,body[data-chain] .table td,body[data-chain] .tableWrap th,body[data-chain] .tableWrap td{ padding:11px 16px; border:0; border-top:1px solid var(--line); text-align:left; background:transparent; }
body[data-chain] .table thead th,body[data-chain] .tableWrap thead th{ border-top:0; color:var(--muted); font-weight:500; position:sticky; top:0; background:var(--surface); }
body[data-chain] .table td,body[data-chain] .tableWrap td{ font-family:var(--monof); color:var(--text); }
body[data-chain] .badgeOk{ color:var(--ok) !important; background:transparent !important; border:0 !important; font-family:var(--font); padding:0 !important; }
body[data-chain] .badgeFail{ color:var(--danger) !important; background:transparent !important; border:0 !important; font-family:var(--font); padding:0 !important; }

body[data-chain] details.fold{ border:1px solid var(--line); border-radius:14px; }
body[data-chain] details.fold > summary{ cursor:pointer; padding:12px 16px; color:var(--text-2); font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; }
body[data-chain] details.fold > summary::-webkit-details-marker{ display:none; }
body[data-chain] details.fold > summary::before{ content:"›"; color:var(--muted); transition:transform .15s; display:inline-block; }
body[data-chain] details.fold[open] > summary::before{ transform:rotate(90deg); }
body[data-chain] details.fold .tableWrap{ border:0; border-top:1px solid var(--line); border-radius:0 0 14px 14px; }

body[data-chain] .sameGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
body[data-chain] .box{
  min-height:44px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--inset) !important; color:var(--text);
  font-size:14px; overflow-wrap:anywhere; box-shadow:none;
}

/* 오른쪽 확인 */
body[data-chain] .kv{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 16px;
  margin:0; padding:0; border:0; background:transparent; font-size:14px;
}
body[data-chain] .kv .k{ color:var(--muted); }
body[data-chain] .kv .v{ text-align:right; color:var(--text); font-weight:600; overflow-wrap:anywhere; font-family:var(--font); }
body[data-chain] .kv .v.mono,body[data-chain] .kv .v a{ font-family:var(--monof); font-size:12px; font-weight:500; }
body[data-chain] .opts{ display:flex; flex-direction:column; gap:4px; padding:10px 14px; border-radius:12px; background:var(--inset); border:1px solid var(--line); }
body[data-chain] .chk{ display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; color:var(--text); cursor:pointer; padding:0; border:0; background:transparent; }
body[data-chain] .chk input{ width:18px; height:18px; accent-color:var(--accent); margin:0; }
body[data-chain] .note{
  margin:0; padding:12px 14px; border-radius:12px;
  background:var(--inset) !important; border:1px solid var(--line) !important;
  color:var(--text-2); font-size:13px; line-height:1.6; box-shadow:none !important;
}
body[data-chain] .note b{ color:var(--text); }
body[data-chain] .btnRow{ display:flex; gap:8px; }
body[data-chain] .btnRow .btn{ flex:1 1 0; }

body[data-chain] .log{
  min-height:160px; max-height:320px; overflow:auto; margin:0;
  padding:12px 14px; border-radius:12px; background:var(--inset) !important; border:1px solid var(--line) !important;
  font-family:var(--monof); font-size:12px; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ui-upgrade.js 가 만드는 자산 카드 */
body[data-chain] .ms-hero,body[data-chain] .ms-inlineWarn,body[data-chain] .ms-assetChooser__head{ display:none !important; }
body[data-chain] .ms-assetChooser{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
body[data-chain] .ms-assetGrid{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:12px !important; }
body[data-chain] .ms-assetCard{
  text-align:left; padding:16px !important; min-height:0 !important;
  border-radius:14px !important; border:1px solid var(--line-2) !important;
  background:var(--surface) !important; color:var(--text) !important;
  box-shadow:none !important; transform:none !important;
  display:flex !important; flex-direction:column; gap:8px !important; cursor:pointer;
}
body[data-chain] .ms-assetCard::before,body[data-chain] .ms-assetCard::after{ display:none !important; }
body[data-chain] .ms-assetCard:hover{ border-color:#3A3F4D !important; }
body[data-chain] .ms-assetCard.is-active{ border:1.5px solid var(--accent) !important; background:var(--surface-2) !important; }
body[data-chain] .ms-assetCard__meta{ display:flex; gap:6px; }
body[data-chain] .ms-assetCard__kind{ font-size:12px; color:var(--muted); background:transparent !important; border:0 !important; padding:0 !important; }
body[data-chain] .ms-assetCard .ms-pillMini,body[data-chain] .ms-assetCard__sub{ display:none !important; }
body[data-chain] .ms-assetCard__label{ font-family:var(--display) !important; font-weight:700 !important; font-size:20px !important; letter-spacing:-.01em; color:var(--text) !important; }
body[data-chain] .ms-assetCard[data-value="CUSTOM"]{ border-style:dashed !important; }
body[data-chain] .ms-hiddenField{ display:none !important; }
body[data-chain] .ms-assetSettingsRow{ gap:12px; }

/* 확인 창 */
body[data-chain] .modal{ background:rgba(5,6,9,.72) !important; backdrop-filter:blur(6px); }
body[data-chain] .modalCard{
  background:var(--surface) !important; border:1px solid var(--line-2) !important;
  border-radius:20px !important; box-shadow:0 24px 64px rgba(0,0,0,.5) !important; color:var(--text);
}
body[data-chain] .modalHead{ border-bottom:1px solid var(--line) !important; }
body[data-chain] .modalTitle{ font-family:var(--display); font-weight:700; font-size:18px; }
body[data-chain] .modalClose{ width:40px; height:40px; border-radius:10px; background:transparent !important; border:1px solid var(--line-2) !important; color:var(--text) !important; }
body[data-chain] .modalActions{ gap:8px; }
body[data-chain] .ms-guard__hero{ background:var(--inset) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
body[data-chain] .ms-guard__eyebrow{ display:none !important; }
body[data-chain] .ms-guard__symbol{ font-family:var(--display); color:var(--accent) !important; }
body[data-chain] .ms-guard__row{ border-color:var(--line) !important; }
body[data-chain] .ms-guard__warn{ background:transparent !important; border:1px solid var(--line-2) !important; color:var(--text-2) !important; }

/* 하단 */
body[data-chain] .footer{
  margin:0; padding:0; border-top:1px solid var(--line); background:transparent;
  color:var(--faint); font-size:13px; text-align:left;
}
body[data-chain] .footerIn{ max-width:1240px; margin:0 auto; padding:20px 32px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
body[data-chain] .footerIn .grow{ flex:1 1 auto; }
body[data-chain] .footer a{ color:var(--muted); }
body[data-chain] .footer a:hover{ color:var(--text); }
body[data-chain] .footer .mono{ font-size:12px; }

body[data-chain] .srOnly{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width: 900px){
  body[data-chain] .topIn{ padding:12px 16px; }
  body[data-chain] .pageTabs{ order:3; width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  body[data-chain] .pageTab{ text-align:center; }
  body[data-chain] .walletBox{ justify-content:flex-start; }
  body[data-chain] .layout{ padding:20px 16px 40px; gap:16px; }
  body[data-chain] .pageHead{ font-size:28px; }
  body[data-chain] .card{ padding:18px; border-radius:18px; }
  body[data-chain] .summary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body[data-chain] .ms-assetGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  body[data-chain] .sameGrid{ grid-template-columns:1fr; }
  body[data-chain] .footerIn{ padding:16px; }
}

body[data-chain] .btnIcon svg{ width:18px; height:18px; flex:0 0 auto; }
body[data-chain] .table thead th,body[data-chain] .tableWrap thead th{ background:var(--surface) !important; }
body[data-chain] .brand,body[data-chain] .walletBox,body[data-chain] .pageTabs{ box-shadow:none !important; backdrop-filter:none !important; }
body[data-chain] .brand,body[data-chain] .walletBox{ background:transparent !important; border:0 !important; padding:0 !important; }

body[data-chain] h1.title{ margin:0; }