/* /assets/css/app.css */

/* =========================
   Theme
   ========================= */
:root{
  --bg:#f6f8ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#667085;

  --primary:#2b57ff;
  --primary-weak:rgba(43,87,255,.14);

  --line:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(15,23,42,.08);

  --r:16px;

  /* on-chain neon */
  --onchain:#00ff66;
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans KR",sans-serif
}
a{color:inherit;text-decoration:none}

/* =========================
   Layout
   ========================= */
.page{
  width:min(980px, calc(100% - 28px));
  margin:16px auto;
}

/* =========================
   Header (new)
   ========================= */
.top-header{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(10px);
}

.hdr-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.hdr-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.brand{
  display:inline-flex;
  align-items:center;
}
.brand-logo{
  height:34px;
  display:block;
}

.hdr-nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  color:var(--muted);
  min-width:0;
}
.hdr-nav a{
  padding:8px 10px;
  border-radius:12px;
  transition:all .18s ease;
}
.hdr-nav a:hover{
  background:rgba(15,23,42,.05);
  color:var(--text);
}

.hdr-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* wallet pill */
.wallet-pill{
  border:1px solid rgba(43,87,255,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 10px 24px rgba(43,87,255,.10);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wallet-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(43,87,255,.55);
  box-shadow:0 14px 34px rgba(43,87,255,.14);
}

/* hamburger */
.hdr-burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.burger-lines{
  display:inline-block;
  width:20px;
  height:16px;
  position:relative;
}
.burger-lines i{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:rgba(15,23,42,.82);
  border-radius:2px;
}
.burger-lines i:nth-child(1){ top:0; }
.burger-lines i:nth-child(2){ top:7px; }
.burger-lines i:nth-child(3){ top:14px; }

/* status row */
.hdr-status{
  margin-top:10px;
}
.hdr-status-text{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.84);
  color:rgba(15,23,42,.82);
  font-size:13px;
  line-height:1.25;
  width:100%;
}

/* mobile menu */
.hdr-mobile{
  display:none;
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.90);
  overflow:hidden;
}
.hdr-mobile a{
  display:block;
  padding:12px 12px;
  font-size:14px;
  color:rgba(15,23,42,.86);
}
.hdr-mobile a + a{
  border-top:1px solid rgba(15,23,42,.08);
}

/* KPI cards */
.top-cards{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}

.kpi-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:82px;
}
.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(15,23,42,.10);
}
.kpi-label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}
.kpi-value{
  margin-top:10px;
  font-size:16px;
  line-height:1.1;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Main block
   ========================= */
.main-wrap{
  margin-top:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:18px 14px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(10px);
}

.block-title{
  font-size:14px;
  margin:0 0 8px;
}
.block-text{
  font-size:13px;
  line-height:1.6;
  color:rgba(15,23,42,.86);
}

.hr{
  height:1px;
  background:rgba(15,23,42,.10);
  margin:14px 0;
}

/* =========================
   Big buttons (balance)
   ========================= */
.big-btn-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.big-btn{
  flex:1 1 160px;
  max-width:100%;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.92);
  padding:14px 14px;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(15,23,42,.08);

  text-align:center;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:keep-all;
  font-size:clamp(12px, 3.6vw, 16px);
}

/* =========================
   Swap page
   ========================= */
.swap-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:10px;
}
.swap-box{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.swap-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  outline:none;
  background:#fff;
}
.input:focus{
  border-color:rgba(43,87,255,.55);
  box-shadow:0 0 0 4px rgba(43,87,255,.12);
}

.swap-btn{
  margin-top:10px;
  width:140px;
  padding:10px 12px;
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg, rgba(43,87,255,1), rgba(43,87,255,.88));
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 14px 30px rgba(43,87,255,.18);
}
.swap-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(43,87,255,.22);
}
.swap-est{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

/*
  /assets/css/app.css
  2-step approve flow helper (approve -> action)
*/
.tx-flow{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(0,0,0,.02);
  font-size:12px;
  line-height:1.35;
}
.tx-flow__step{
  font-weight:700;
  color:var(--text);
}
.tx-flow__msg{
  margin-top:4px;
  color:var(--muted);
}
.tx-flow__hash{
  margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px;
  word-break:break-all;
  color:var(--muted);
}
.tx-flow__hash a{ color:inherit; text-decoration:underline; }
.status{
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.03);
  font-size:12px;
  color:rgba(15,23,42,.82);
}

/* =========================
   Family buttons
   ========================= */
.family-title{
  margin-top:18px;
  font-size:14px;
}
.family-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  margin-top:10px;
}
.family-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.family-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(15,23,42,.10);
}
.family-btn img{width:28px;height:28px;flex:0 0 auto;}
.family-btn span{
  min-width:0;
  font-size:13px;
  color:rgba(15,23,42,.86);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.family-btn.coingecko-btn img{
  width:42px;
  height:42px;
  object-fit:contain;
}

/* =========================
   Footer
   ========================= */
.footer-wrap{
  margin-top:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:18px 14px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(10px);
}
.footer-inner{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.footer-title{font-size:14px}
.footer-sub{font-size:12px;color:var(--muted);margin-top:4px}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.footer-links a{font-size:13px;color:rgba(15,23,42,.82)}
.footer-copy{width:100%;font-size:12px;color:var(--muted);margin-top:10px}

/* =========================
   Table (swap list)
   ========================= */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.table th,.table td{
  border-bottom:1px solid rgba(15,23,42,.10);
  padding:10px 8px;
  font-size:13px;
  text-align:left;
}
.logo{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#d4af37,#a67c00);
  display:inline-grid;place-items:center;
  margin-right:10px;
  font-size:12px;color:#fff;
}
.row-flex{display:flex;align-items:center}
.link{color:rgba(15,23,42,.86);text-decoration:underline}

/* =========================
   Token detail
   ========================= */
.chart-box{
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.chart-box img,.chart-box iframe{width:100%;height:320px;display:block}

.info-split{
  border:1px solid rgba(43,87,255,.18);
  border-radius:16px;
  padding:12px;
  margin-top:10px;
  background:rgba(255,255,255,.92);
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}
.inf{
  border:1px solid rgba(43,87,255,.16);
  border-radius:14px;
  padding:10px;
  font-size:12px;
  background:rgba(255,255,255,.92);
}
.inf .k{color:var(--muted);font-size:12px}
.inf .v{margin-top:6px;font-size:13px}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:10px;
}
.form-box{
  border:1px solid rgba(43,87,255,.16);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.92);
}
.form-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}

.smallbtn{
  padding:9px 10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.92);
  cursor:pointer;
}
.primarybtn{
  padding:9px 10px;
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg, rgba(43,87,255,1), rgba(43,87,255,.88));
  color:#fff;
  cursor:pointer;
}

/* Token Detail Button */
.token-detail-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  font-size:13px;
  color:var(--primary);
  border:1px solid rgba(43,87,255,.35);
  border-radius:999px;
  background:rgba(43,87,255,.08);
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.token-detail-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(43,87,255,.18);
}
.token-detail-btn span{font-size:18px}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .top-cards{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 860px){
  .swap-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  #topNavDesktop{display:none}
  .hdr-burger{display:inline-flex;align-items:center;justify-content:center;}
}
@media (max-width: 360px){
  .big-btn{padding:12px 10px}
  .family-btn{padding:10px 10px;gap:8px}
}

/* =========================
   On-chain neon (값만 야광)
   ========================= */
/* 거의 번짐 없이 칼같은 강조 */
.onchain{
  /* 더 진하고 가독성 높은 골드 색상으로 변경 */
  color:#b36b00;
  text-shadow:
    0 0 0.7px rgba(0,0,0,.85),
    0 0 2px rgba(179,107,0,.9);
}
.onchain-soft{
  /* 약간 더 어두운 보조 강조 색상 */
  color:#a64d00;
  text-shadow:
    0 0 0.7px rgba(0,0,0,.75),
    0 0 2px rgba(166,77,0,.7);
}