:root{
  /* Brand */
  --primary:#3D40A7;
  --accent:#11AA38;

  /* Base */
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --text:#111827;
  --muted:#6B7280;

  /* Lines */
  --line:#B7C3D6;
  --lineStrong:#93A3BA;

  /* Depth */
  --shadow1: 0 10px 26px rgba(17,24,39,.07);
  --shadow2: 0 2px 10px rgba(17,24,39,.05);
  --shadowSoft: 0 3px 10px rgba(17,24,39,.06);

  --radius:16px;

  /* Tints */
  --tintP: rgba(61,64,167,.06);
  --tintP2: rgba(61,64,167,.035);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: 360ms;

  /* Mobile bottom nav */
  --bottomNavH: 74px;
  --bottomNavBg: #0B0F15;
  --bottomNavLine: rgba(255,255,255,.10);

  /* ✅ Mobile Safe Bottom (공통 하단 안전 영역) */
  --safeBottom: 0px;  
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x: clip;
}

/* ✅ 배경은 별도 레이어로 고정 */
.bgFx{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(61,64,167,.06), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(17,170,56,.05), transparent 60%),
    var(--bg);

  /* 모바일 브라우저 페인팅 안정화 */
  transform: translateZ(0);
  will-change: transform;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  min-width:0;
}

/* =========================
   Top Nav
   ========================= */
.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(248,250,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbarInner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:2px 0;
}
.brand{
  display:flex; align-items:center; gap:0px;
  min-width:210px;
}

.topLogo{
  height: 60px;
}

.logoDot{
  width:34px; height:34px; border-radius:10px;
  background: radial-gradient(circle at 30% 25%, rgba(17,170,56,.22), rgba(61,64,167,.22));
  border:1px solid rgba(61,64,167,.12);
  box-shadow: var(--shadowSoft);
  flex: 0 0 auto;
}
.brandText{ display:flex; flex-direction:column; gap:0px; }
.brandTitle{ font-weight:950; letter-spacing:-.2px; }
.brandSub{ font-size:12px; color:var(--muted); font-weight:800; }

.nav{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto;
  justify-content:center;
  min-width:420px;
}
.nav a{
  text-decoration:none;
  color: rgba(31,41,55,.72);
  font-weight:850;
  font-size:17px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a.active{
  color: var(--primary);
  background: rgba(61,64,167,.10);
  border-color: rgba(61,64,167,.18);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.nav a:hover{
  background: rgba(17,170,56,.06);
  border-color: rgba(17,170,56,.12);
  color: var(--text);
}

.utils{
  display:flex; align-items:center; gap:10px;
  min-width:210px;
  justify-content:flex-end;
}

/* a태그가 btn을 쓸 때만 버튼과 동일한 타이포/렌더링으로 맞춤 */
a.btn{
  font-weight:950;
  line-height: normal;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  -webkit-appearance: none;
  appearance: none;
  width:100%;justify-content:center;
}
a.btn.btnPrimary{ color:#fff; }
a.btn.btnGhost{ color: var(--primary); }
a.btn.btnNeutral{ color: var(--text); }

/* Buttons */
.btn{
  border:none; cursor:pointer;
  border-radius:14px;
  padding:10px 12px;
  font-weight:950;
  letter-spacing:-.2px;
  display:inline-flex; align-items:center; gap:8px;
  user-select:none;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
  box-shadow: 0 10px 18px rgba(17,24,39,.06);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(1px); }

.btnPrimary{
  background: var(--primary);
  color:#fff;
  box-shadow: 0 14px 26px rgba(61,64,167,.22);
}
.btnPrimary:hover{ box-shadow: 0 18px 30px rgba(61,64,167,.26); }

.btnGhost{
  background:#fff;
  color: var(--primary);
  border:1px solid rgba(61,64,167,.22);
  box-shadow: var(--shadowSoft);
}
.btnNeutral{
  background:#fff;
  color: var(--text);
  border:1px solid var(--lineStrong);
  box-shadow: var(--shadowSoft);
}
.iconBtn{
  width:40px; height:40px; border-radius:14px;
  border:1px solid var(--lineStrong);
  background:#fff;
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  font-weight:950;
  color: var(--primary);
}

/* Language Select */
.langWrap{ position:relative; display:inline-flex; align-items:center; }
.langBtn{
  height:40px;
  border-radius:14px;
  padding:0 12px;
  border:1px solid var(--lineStrong);
  background:#fff;
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  font-weight:950;
  color: var(--text);
  letter-spacing:-.2px;
  display:inline-flex; align-items:center; gap:8px;
  user-select:none;
}
.langBtn .code{ color: var(--primary); font-weight:950; }
.langBtn .chev{ color: var(--muted); font-weight:950; font-size:12px; transform: translateY(-1px); }
.langMenu{
  position:absolute;
  right:0;
  top:46px;
  min-width:160px;
  background:#fff;
  border:1px solid var(--lineStrong);
  border-radius:14px;
  box-shadow: 0 12px 26px rgba(17,24,39,.10);
  padding:6px 0;
  margin:0;
  list-style:none;
  display:none;
  z-index:50;
}
.langMenu li{
  padding:10px 12px;
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--text);
}
.langMenu li:hover{ background: rgba(61,64,167,.06); }
.langMenu .muted{ color: var(--muted); font-weight:900; font-size:12px; }

/* =========================
   Layout
   ========================= */
main{
  padding: 16px 0 18px;
  min-width:0;
}

.hero{
  background: var(--card);
  border:1px solid var(--lineStrong);
  border-radius: var(--radius);
  box-shadow: var(--shadow1), var(--shadow2);
  padding:16px 16px 14px;
  margin-top:10px;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.heroRow{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  position:relative;
  min-width:0;
}
.heroTitle{
  margin:0;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.4px;
}
.heroSub{
  margin:8px 0 0;
  color: rgba(107,114,128,.90);
  line-height:1.55;
  font-size:14px;
  font-weight:750;
}

/* ✅ 중앙 마스코트: PC에서만 ‘빈 공간’에 떠 있게 */
.heroCenterMascot{
  position:absolute;
  left: 60%;                 /* ← 여기 숫자가 ‘딱 그 빨간 영역’ */
  top: 65%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 22px;
  border: 1px solid rgba(183,195,214,.85);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 30px rgba(17,24,39,.10);
  display: grid;
  place-items: center;
  pointer-events:none;        /* 버튼 클릭 방해 X */
  z-index: 1;
}

.heroCenterMascot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ✅ 1180 이하에서 heroRow가 줄바꿈/겹침 가능성 커지므로 숨김 or 축소 */
@media (max-width: 1040px){
  /* .heroCenterMascot{
    display:none;
  } */
}

.badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.badge{
  font-size:12px; font-weight:950;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(61,64,167,.18);
  background: var(--tintP2);
  color: var(--primary);
}
.badge.green{
  border-color: rgba(17,170,56,.20);
  background: rgba(17,170,56,.06);
  color: var(--accent);
}
.badge.warn{
  border-color: rgba(242,169,59,.25);
  background: rgba(242,169,59,.12);
  color:#8A5A00;
}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap:14px;
  align-items:start;
  min-width:0;
}
.asideCol{ width:100%; min-width:0; }
.asideCol > .card{ width:100%; }

.card{
  background:#fff;
  border:1px solid var(--lineStrong);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow1), var(--shadow2);
  position:relative;
  min-width:0;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.cardHeader{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:
    linear-gradient(180deg, rgba(61,64,167,.06), rgba(61,64,167,0) 70%),
    linear-gradient(90deg, rgba(17,170,56,.05), rgba(61,64,167,.05));
  position:relative;
  min-width:0;
}
.cardHeader h3{
  margin:0;
  font-size:14px;
  letter-spacing:-.2px;
  font-weight:950;
}
.hint{ color: rgba(107,114,128,.90); font-size:12px; font-weight:850; }
.cardBody{ padding:14px 16px; line-height:1.55; min-width:0; }

/* KPI strip */
.strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-bottom:12px;
}
.miniKpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  min-width:0;
}
.miniKpi .label{ font-size:11px; color: rgba(107,114,128,.90); font-weight:950; }
.miniKpi .value{
  font-size:16px;
  font-weight:950;
  margin-top:6px;
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
}
.miniKpi .value.primary{ color: var(--primary); }
.miniKpi .value.green{ color: var(--accent); }

/* =========================
   Tables (common)
   ========================= */
.tableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width: 100%;
}
thead th{
  text-align:left;
  font-size:12px;
  color: rgba(107,114,128,.92);
  font-weight:950;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF, #FBFCFF);
  position:sticky; top:0;
  z-index:1;
}
tbody td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  vertical-align:middle;
  white-space:nowrap;
  transition: background var(--dur) var(--ease);
}
tbody tr:hover td{ background: rgba(61,64,167,.03); }

.num{ text-align:right; font-weight:950; font-variant-numeric: tabular-nums; letter-spacing:.2px; }
.center{ text-align:center; }

.tagPremium{
  display:inline-flex; align-items:center;
  font-weight:950; font-size:12px;
  color: #D64545;
  background: rgba(214,69,69,.06);
  border:1px solid rgba(214,69,69,.16);
  padding:6px 10px;
  border-radius:999px;
}
.typeCode{ color: #D64545; font-weight:950; }
.typeCode2{ font-weight:950; }
.divider{ height:12px; }

/* Right card - balls */
.balls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ball{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:950; color:#fff;
  border:1px solid rgba(203,213,225,.75);
  background:#fff;
  box-shadow: 0 2px 8px rgba(17,24,39,.06);
}

.clr0 { background: #ffffff; color: black; }
.clr1 { background: #e4a816 }
.clr2 { background: #1994da }
.clr3 { background: #e86352 }
.clr4 { background: #8f8f8f }
.clr5 { background: #5bb544 }

.plus{ font-weight:950; color: rgba(107,114,128,.90); padding:0 2px; }
.resultRow{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:12px;
}
.moneyBox{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  min-width:240px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.moneyBox .k{ font-size:11px; color: rgba(107,114,128,.90); font-weight:950; }
.moneyBox .v{ margin-top:6px; font-size:16px; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.moneyBox .sub{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:rgba(107,114,128,.9);
  line-height:1.3;
}


/* =========================
   Verify Card (collapse)
   ========================= */
.verifyMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(61,64,167,.18);
  background: rgba(61,64,167,.06);
  color: var(--primary);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
  position: relative;
}
.chip.green{
  border-color: rgba(17,170,56,.20);
  background: rgba(17,170,56,.06);
  color: var(--accent);
}
.chip.neutral{
  border-color: rgba(203,213,225,.95);
  background:#fff;
  color: rgba(17,24,39,.75);
  font-weight:950;
}

/* ✅ chip이 링크(a)로 쓰일 때만 "버튼 느낌" 추가 */
a .chip{
  cursor:pointer;
  display:inline-flex;              /* 클릭 영역 안정화 */
  text-decoration:none;             /* 밑줄 방지 */
  user-select:none;
  transform: translateZ(0);
  transition:
    transform .08s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

a:hover .chip{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(17,24,39,.10);
  border-color: rgba(61,64,167,.26);
  background: rgba(61,64,167,.10);
}

a:active .chip{
  transform: translateY(1px);
  box-shadow: 0 6px 12px rgba(17,24,39,.08);
}

/* 키보드 접근성(탭 이동) */
a:focus-visible .chip{
  outline: 2px solid rgba(61,64,167,.35);
  outline-offset: 2px;
}

/* 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce){
  a .chip{ transition:none; }
  a:hover .chip, a:active .chip{ transform:none; }
}



.evidenceHint{
  font-size:12px;
  color: rgba(107,114,128,.90);
  font-weight:850;
  line-height:1.55;
  margin-bottom:10px;
}
.evidenceBox{
  border:1px solid var(--lineStrong);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  position:relative;
  box-shadow: 0 2px 10px rgba(17,24,39,.04);
  min-width:0;
}
.evidenceScroll{
  overflow-x:auto;
  overflow-y:hidden;
  max-height:none;
  -webkit-overflow-scrolling: touch;
  max-width:100%;
}
.evidenceBox.is-collapsed .evidenceScroll{ overflow:hidden; }
.fadeMask{
  position:absolute;
  left:0; right:0; bottom:0;
  height:56px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  pointer-events:none;
  opacity:0;
  transition: opacity var(--dur) var(--ease);
}
.evidenceBox.is-collapsed .fadeMask{ opacity:1; }
.evidenceBox.animating{
  will-change: height;
  transition: height var(--dur) var(--ease);
}
.btnRow{ margin-top:10px; }
.collapseBtn{ width:100%; justify-content:center; gap:8px; }
.chevIcon{
  display:inline-block;
  transition: transform var(--dur) var(--ease);
  transform: translateY(1px) rotate(0deg);
}
.evidenceBox.is-open ~ .btnRow .chevIcon{ transform: translateY(1px) rotate(180deg); }

/* =========================
   Verify Table (전용)
   ========================= */
.verifyTable{
  width: 100%;
  table-layout: fixed;
}
.verifyTable th:nth-child(1){ width:22%; }
.verifyTable th:nth-child(2){ width:14%; }
.verifyTable th:nth-child(3){ width:14%; }
.verifyTable th:nth-child(4){ width:16%; }
.verifyTable th:nth-child(5){ width:14%; }
.verifyTable th:nth-child(6){ width:20%; }

.vType .k{
  font-size:12px;
  color: rgba(17,24,39,.72);
  font-weight:950;
  display:block;
}
.vType .sub{
  display:block;
  font-size:12px;
  color: #D64545;
  font-weight:950;
  margin-top:4px;
}

.verifyTable td.count,
.verifyTable td.money{
  text-align:right;
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
  font-weight:950;
}
.verifyTable td.rate{
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-weight:900;
  color: rgba(17,24,39,.72);
}

.verifyTable tbody tr.blockTop td{
  border-top: 1px solid rgba(61,64,167,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* Rank badge */
.rankBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:13px;
  letter-spacing:-.2px;
  border:1px solid rgba(203,213,225,.95);
  background:#fff;
  color: rgba(17,24,39,.85);
  position:relative;
  overflow:hidden;
  box-shadow: 0 8px 18px rgba(17,24,39,.06);
}
.rankBadge::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 18%, rgba(255,255,255,0) 36%);
  transform: translateX(-120%);
  opacity:.75;
}

@keyframes shineSweep{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(140%);} }
@keyframes rankPulse1{ 0%,100%{ transform: translateY(0) scale(1); filter: brightness(1);} 50%{ transform: translateY(-1px) scale(1.03); filter: brightness(1.06);} }
@keyframes rankPulse2{ 0%,100%{ transform: translateY(0) scale(1); filter: brightness(1);} 50%{ transform: translateY(-1px) scale(1.02); filter: brightness(1.04);} }
@keyframes rankPulse3{ 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-1px) scale(1.015);} }

.rankBadge.r1{
  border-color: rgba(242,169,59,.85);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(255,245,214,.95) 35%, rgba(255,255,255,.92));
  color:#6A3D00;
  box-shadow: 0 12px 22px rgba(242,169,59,.20), 0 0 0 4px rgba(242,169,59,.10);
  animation: rankPulse1 1.6s ease-in-out infinite;
}
.rankBadge.r1::before{ animation: shineSweep 1.9s ease-in-out infinite; }

.rankBadge.r2{
  border-color: rgba(148,163,184,.85);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(241,245,249,.95) 40%, rgba(255,255,255,.92));
  color:#1F2937;
  box-shadow: 0 10px 18px rgba(148,163,184,.18), 0 0 0 3px rgba(148,163,184,.10);
  animation: rankPulse2 2.1s ease-in-out infinite;
}
.rankBadge.r2::before{ animation: shineSweep 2.4s ease-in-out infinite; opacity:.6; }

.rankBadge.r3{
  border-color: rgba(191,128,88,.88);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(255,241,232,.95) 40%, rgba(255,255,255,.92));
  color:#5A2E15;
  box-shadow: 0 9px 16px rgba(191,128,88,.16), 0 0 0 3px rgba(191,128,88,.09);
  animation: rankPulse3 2.6s ease-in-out infinite;
}
.rankBadge.r3::before{ animation: shineSweep 3.0s ease-in-out infinite; opacity:.5; }

.rankBadge.r4{
  border-color: rgba(17,170,56,.30);
  background: rgba(17,170,56,.06);
  color: rgba(12,120,38,.95);
}
.rankBadge.r5{
  border-color: rgba(61,64,167,.18);
  background: rgba(61,64,167,.05);
  color: rgba(61,64,167,.85);
}

/* 1~3등 row */
.rankRow.r1 td.count, .rankRow.r1 td.money{ font-size:16px; font-weight:1000; }
.rankRow.r2 td.count, .rankRow.r2 td.money{ font-size:15.5px; font-weight:1000; }
.rankRow.r3 td.count, .rankRow.r3 td.money{ font-size:15px; font-weight:1000; }
.rankRow.r1 td.rate{ font-size:16px; font-weight:1000; }
.rankRow.r2 td.rate{ font-size:15.5px; font-weight:1000; }
.rankRow.r3 td.rate{ font-size:15px; font-weight:1000; }
.rankRow.r1 td,.rankRow.r2 td,.rankRow.r3 td{ background: transparent !important; }
.rankRow.r1{ background: linear-gradient(90deg, rgba(242,169,59,.2), rgba(255,255,255,0) 70%); }
.rankRow.r2{ background: linear-gradient(90deg, rgba(148,163,184,.2), rgba(255,255,255,0) 70%); }
.rankRow.r3{ background: linear-gradient(90deg, rgba(191,128,88,.2), rgba(255,255,255,0) 70%); }

/* Footer */
footer{
  margin-top:14px;
  border-top:1px solid var(--lineStrong);
  padding:14px 0 22px;
  color: rgba(107,114,128,.90);
  font-size:12px;
  line-height:1.6;
}
footer a{ color:var(--primary); text-decoration:none; font-weight:950; }
.footRow{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  align-items:flex-start;
}

/* =========================
   Bottom Nav (Mobile)
   목표: 본체 60px + safe-area는 padding으로만 추가
   ========================= */

/* 권장: bottomNav 전용 높이 변수 고정 */
:root{
  --bottomNavH: 60px;
}

.bottomNav{
  position: fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  /* ✅ 본체 높이 */
  height: var(--bottomNavH) !important;
  min-height: var(--bottomNavH) !important;

  /* ✅ safe-area는 높이에 합치지 말고 padding으로만 */
  padding-bottom: env(safe-area-inset-bottom, 0) !important;

  background: var(--bottomNavBg) !important;
  border-top: 2px solid var(--bottomNavLine) !important;

  z-index: 99999 !important;
  display:none;

  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  overflow:hidden;

  /* ✅ safe-area 때문에 내부가 잘리지 않게 */
  box-sizing: border-box;
}

.bottomNavInner{
  /* ✅ inner는 safe-area 제외한 '본체 높이'에 맞춤 */
  height: var(--bottomNavH);
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items:center;

  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding: 0 8px;   /* 10px -> 8px 살짝 절약 */
  min-width:0;
}

/* 메뉴 아이템 */
.bottomNav a{
  min-width:0;
  text-decoration:none;
  color: rgba(255,255,255,.72);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* 🔽 위로 당김 */

  gap: 2px;                  /* 3px -> 2px */
  padding: 2px 2px 4px;      /* 🔽 상단 여백 축소 */

  font-weight: 900;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}


/* 아이콘 */
.bottomNav a .ico{
  width: 30px;               /* 🔼 26 -> 30 */
  height: 30px;              /* 🔼 26 -> 30 */
  border-radius: 11px;       /* 10 -> 11 (비율 보정) */

  display:grid;
  place-items:center;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 6px 12px rgba(0,0,0,.18);

  font-size: 18px;           /* 🔼 이모지도 같이 확대 */
  line-height: 1;
}

/* 라벨 */
.bottomNav a .lab{
  font-size: 10.5px;
  line-height: 1.05;
  letter-spacing: -.2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bottomNav a.active{ color:#fff; }
.bottomNav a.active .ico{
  background: rgba(61,64,167,.35);
  border-color: rgba(61,64,167,.55);
}

/* =========================
   Horizontal Scroll Hint (Mobile)
   ========================= */
.tableWrap.scrollHint{
  position:relative;
  overflow:visible;
}
.tableWrap.scrollHint > .scrollArea{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  max-width:100%;
}

/* 좌/우 오버레이 컨테이너 */
.tableWrap.scrollHint .scrollEdge{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition: opacity .25s ease;
  z-index:10;
}

.tableWrap.scrollHint .scrollBtn{
  pointer-events:auto;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--lineStrong);
  background:#fff;
  box-shadow: var(--shadow1), var(--shadow2);
  cursor:pointer;
  user-select:none;
  font-size:20px;
  font-weight:950;
  color: var(--primary);
}

.tableWrap.scrollHint.canLeft  .scrollEdge.left,
.tableWrap.scrollHint.canRight .scrollEdge.right{
  opacity:1;
}

@keyframes border-glow {
  0% { border-image-source: linear-gradient(90deg, orange, yellow, green, blue); border-image-slice: 1; }
  50% { border-image-source: linear-gradient(270deg, orange, yellow, green, blue); border-image-slice: 1; }
  100% { border-image-source: linear-gradient(90deg, orange, yellow, green, blue); border-image-slice: 1; }
}
.bottom-menu-bar-ani { animation: border-glow 4s linear infinite; }

/* 1) 애니메이션용 커스텀 길이 변수 */
@property --g {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* 2) 파동 유틸 */
.pulse{
  position: relative;
  overflow: visible;
  box-sizing: border-box;

  --pulse-color: currentColor;
  --pulse-stroke: 3px;
  --pulse-duration: 2s;
  --pulse-interval: 1s;
  --pulse-start: 0s;
  --pulse-max: 24px;
}

.pulse::before,
.pulse::after {
  content: "";
  position: absolute;
  top: calc(0px - var(--g));
  left: calc(0px - var(--g));
  right: calc(0px - var(--g));
  bottom: calc(0px - var(--g));
  border-radius: inherit;
  border: var(--pulse-stroke) solid var(--pulse-color);
  pointer-events: none;
  animation: pulse-grow var(--pulse-duration) linear infinite;
}
.pulse::after{
  animation-delay: calc(var(--pulse-start) + var(--pulse-interval));
  opacity: .4;
}
@keyframes pulse-grow {
  0%   { --g: 0px; opacity: .6; }
  80%  { --g: var(--pulse-max, 24px); opacity: 0; }
  100% { --g: var(--pulse-max, 24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pulse::before, .pulse::after{ animation: none; opacity: 0; }
}
.pulse.win   { --pulse-color: #FFD700; }
.pulse.lucky { --pulse-color: #50C878; }

/* 말풍선 */
.speech-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #fefefe;
  color: #2c3e50;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
  z-index: 999999999990 !important;
  animation: bubble-pop 0.4s ease-out;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #fefefe transparent transparent transparent;
}
@keyframes bubble-pop {
  0% { transform: translateX(-50%) scale(0.8); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* =========================
   Sub Page Layout
   ========================= */
.sectionLayout{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap:14px;
  margin-top:14px;
  padding-bottom: 12px;
  align-items:start;
  min-width:0;
}
.sideNav{
  position: sticky;
  top: 72px;
  align-self:start;
  min-width:0;
}
.sideCard{
  background:#fff;
  border:1px solid var(--lineStrong);
  border-radius:16px;
  box-shadow: var(--shadow1), var(--shadow2);
  padding:12px;
  margin-bottom:14px;
}
.sideTitle{
  font-weight: 950;
  font-size: 14px;
  color: var(--text);
  margin-bottom:10px;
}
.sideTitleSm{
  font-weight: 950;
  font-size: 13px;
  color: rgba(17,24,39,.80);
  margin-bottom:10px;
}
.sideHint{
  margin-top:10px;
  font-size:12px;
  color: rgba(107,114,128,.90);
  line-height:1.55;
  font-weight:750;
}
.sideMenu{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sideMenu a{
  text-decoration:none;
  color: rgba(31,41,55,.80);
  font-weight: 900;
  font-size: 13px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: rgba(61,64,167,.03);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sideMenu a:hover{
  background: rgba(17,170,56,.06);
  border-color: rgba(17,170,56,.12);
  color: var(--text);
}
.sideMenu a.active{
  background: rgba(61,64,167,.12);
  border-color: rgba(61,64,167,.22);
  color: var(--primary);
}

/* Hover (PC) */
@media (hover:hover) {
  .sideMenu a:hover {
    background: #f4f6ff;
  }
}

.sectionMain{ min-width:0; }
.sectionHead{
  background:#fff;
  border:1px solid var(--lineStrong);
  border-radius:16px;
  box-shadow: var(--shadow1), var(--shadow2);
  padding:14px 16px;
  margin-bottom:14px;
}
.sectionH1{
  margin:0;
  font-size:18px;
  font-weight: 950;
  letter-spacing:-.3px;
}
.sectionDesc{
  margin:8px 0 0;
  font-size:13px;
  color: rgba(107,114,128,.92);
  font-weight: 750;
  line-height:1.55;
}

/* =========================
   Mobile Drawer
   ========================= */
.drawerOverlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 99998;
}
.drawer{
  position: fixed;
  top:0;
  right:0;
  height:100vh;
  width: min(360px, 86vw);
  background:#fff;
  border-left:1px solid var(--lineStrong);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  z-index: 99999;

  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  will-change: transform;
  display:flex;
  flex-direction:column;
}
.drawer.is-open{ transform: translateX(0); }
.drawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(61,64,167,.06), rgba(61,64,167,0) 70%);
}
.drawerTitle{
  font-weight: 950;
  font-size: 14px;
}
.drawerBody{
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.drawerSectionTitle{
  font-weight: 950;
  font-size: 13px;
  margin-bottom:10px;
  color: rgba(17,24,39,.85);
}
.drawerMenu{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.drawerMenu a{
  text-decoration:none;
  color: rgba(31,41,55,.80);
  font-weight: 900;
  font-size: 13px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: rgba(61,64,167,.03);
}
.drawerMenu a.active{
  background: rgba(61,64,167,.12);
  border-color: rgba(61,64,167,.22);
  color: var(--primary);
}

@media (max-width: 1040px){
  .sectionLayout{ grid-template-columns: 1fr; }
  .sideNav{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; }
}

.noticeItem{ display:block; text-decoration:none; }
.noticeTop{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.noticeTitle{
  flex:1;
  font-weight:900;
  color:var(--text);
  line-height:1.25;
  white-space:normal;     /* ✅ 제목 전체 노출 */
  word-break:keep-all;    /* 한글 가독성 */
}
.noticeDate{
  flex:0 0 auto;
  font-size:12px;
  font-weight:750;
  color:rgba(107,114,128,.90);
  line-height:1.2;
  margin-top:2px;
}

.cardSubInfo{
  margin: 10px 16px 0px;   /* bottom을 10px → 4px로 축소 */  
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(55,65,81,.9);
  background: rgba(61,64,167,.04);
  border: 1px solid rgba(61,64,167,.15);
  border-radius: 12px;
  display:none;
}


/* ✅ 당첨금 박스: 오른쪽 빈 공간 제거 (해당 카드에서만) */
.cardWinning .resultRow{
  flex-direction: column;
  flex-wrap: nowrap;
}

.cardWinning .moneyBox{
  width: 100%;
  min-width: 0;          /* 핵심 */
}

.mobileOnly{ display:none; }


/* =========================
   Notice List (sub page)
   ========================= */
.noticeTools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.noticeSearch{
  flex:1 1 240px;
  min-width:0;
  display:flex;
  gap:8px;
  align-items:center;
}
.input{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--lineStrong);
  background:#fff;
  box-shadow: var(--shadowSoft);
  font-weight:850;
  letter-spacing:-.2px;
}
.input:focus{
  outline:2px solid rgba(61,64,167,.22);
  outline-offset:2px;
}

.noticeList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.noticeLink{
  text-decoration:none;
  color:inherit;
}
.noticeCard{
  border:1px solid var(--lineStrong);
  border-radius:16px;
  background:#fff;
  box-shadow: var(--shadow1), var(--shadow2);
  padding:12px 14px;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}
.noticeCard:hover{
  transform: translateY(-1px);
  border-color: rgba(61,64,167,.22);
  box-shadow: 0 16px 30px rgba(17,24,39,.10);
}
.noticeCard:active{ transform: translateY(1px); }

.noticeRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}
.noticeMeta{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:2px;
}
.noticeDateSm{
  font-size:12px;
  font-weight:850;
  color: rgba(107,114,128,.92);
  white-space:nowrap;
}
.noticeMain{
  flex:1 1 auto;
  min-width:0;
}
.noticeTitleLine{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.noticeTitleTxt{
  font-weight:950;
  letter-spacing:-.2px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.noticeArrow{
  flex:0 0 auto;
  color: rgba(107,114,128,.75);
  font-weight:950;
  transform: translateY(1px);
}
.noticeExcerpt{
  margin-top:8px;
  color: rgba(107,114,128,.92);
  font-size:13px;
  font-weight:750;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.noticeChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(61,64,167,.18);
  background: rgba(61,64,167,.06);
  color: var(--primary);
  white-space:nowrap;
}
.noticeChip.pin{
  border-color: rgba(242,169,59,.30);
  background: rgba(242,169,59,.14);
  color:#8A5A00;
}

.pager{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.pager .btn{ width:100%; }

/* PC에서 카드 밀도 살짝 업 */
@media (min-width: 1024px){
  .noticeCard{ padding:14px 16px; }
  .noticeExcerpt{ -webkit-line-clamp:2; }
}

/* =========================
   ScrollHint: Floating Controls (sticky, multi-position)
   ========================= */
.tableWrap.scrollHint{
  position: relative;
  padding-right: 0 !important;
}

/* 공통 컨트롤 박스 */
/* 삭제 확인 용 주석 .tableWrap.scrollHint .scrollHintCtrl{
  position: sticky;
  right: 10px;
  z-index: 30;
  width: 38px;
  pointer-events: none; /* 박스는 클릭 막고 버튼만 클릭 */
/*} 
*/


/* 삭제 확인용 .tableWrap.scrollHint .scrollHintBtn{
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--lineStrong);
  background: #fff;
  box-shadow: var(--shadow1), var(--shadow2);
  cursor: pointer;
  user-select:none;
  margin-bottom: 10px;
  font-weight: 950;
  color: rgba(17,24,39,.85);
} */

.tableWrap.scrollHint .scrollHintBtn:active{
  transform: scale(.98);
}

/* 가로 스크롤이 거의 없으면 숨김(토글용 클래스) */
/* 삭제 확인용 .tableWrap.scrollHint .scrollHintCtrl.isHidden{ display:none; } */



/* scrollArea가 실제 스크롤 대상 */
.tableWrap.scrollHint .scrollArea{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* 버튼 클릭 공간만 확보 (테이블 폭 자체는 줄이지 않음) */
  padding-left: 54px;
  padding-right: 54px;
}

/* 테이블 폭 안정화: 내용이 길면 자연스럽게 가로로 늘어남 */
.tableWrap.scrollHint table{
  width: max-content;
  min-width: 100%;
}


.tableWrap.scrollHint .scrollEdge.left{ left:8px; }
.tableWrap.scrollHint .scrollEdge.right{ right:8px; }


/* 기존 canLeft/canRight 로직 유지 (보여주기/숨기기) */
.tableWrap.scrollHint:not(.canLeft)  .scrollEdge.left  { display:none; }
.tableWrap.scrollHint:not(.canRight) .scrollEdge.right { display:none; }


/* =========================
   Responsive
   ========================= */

/* [PC 기본값] 860px 초과에서는 항상 전체 노출 + 접기/펼치기 UI 숨김 */
.btnRow{ display:none; }                 /* 버튼 줄 숨김 (PC) */
#evidenceBox{ height:auto; }             /* 높이 제한 없음 (PC) */
#evidenceBox.is-collapsed{ height:auto; }/* 혹시 클래스가 남아도 PC에선 무시 */
#evidenceBox .fadeMask{ display:none; }  /* 페이드 숨김 (PC) */
#evidenceBox .evidenceScroll{ overflow:visible; } /* PC는 스크롤 제한 없이 전체 노출 */

@media (max-width: 1040px){
  .nav{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .strip{ grid-template-columns: repeat(2, 1fr); }
  table{ min-width: 640px; }
  .verifyTable{ min-width: 860px; }

  .heroCenterMascot{
    display:block;
    position:static;
    margin: 10px auto 0;
    width:80px;
    height:80px;
    transform:none;
  }  

  .mobileOnly{ display:block; }  
}
@media (min-width: 1024px){
  tbody td{ padding:12px 10px; font-size:13.5px; }
  .heroCopy{ padding-right: 110px; }  /* 필요할 때만 */
  .tableWrap.scrollHint .scrollBtn{
    width: 32px;
    height: 32px;
    font-size: 18px;
  }  
  .tableWrap.scrollHint .scrollArea{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }  
}

@media (max-width: 860px){
  :root{
    --safeBottom: calc(
      var(--bottomNavH)
      + env(safe-area-inset-bottom)
      + 18px
    );
  }

  .bottomNav{ display:block; }
  main.container{
    padding-bottom: var(--safeBottom);
  }
  footer{
    padding-bottom: calc(var(--bottomNavH) + env(safe-area-inset-bottom) + 22px);
  }

  /* [모바일만] 접기/펼치기 UI 활성화 */
  .btnRow{ display:flex; }                 /* 모바일에선 버튼 표시 */
  #evidenceBox .fadeMask{ display:block; } /* 페이드 표시 */
  #evidenceBox .evidenceScroll{ overflow:auto; } /* 모바일에선 내부 스크롤 */
  /* 높이(접힘/펼침)는 JS가 setHeight로 제어하므로 여기선 건드리지 않음 */
  .noticeTop{ flex-direction:column; gap:6px; }
  .noticeDate{ margin-top:0; }  
  .noticeList .noticeItem:nth-child(n+4){
    display:none;
  }  

  .cardSubInfo{display: block}
}

@media (max-width: 640px){
  body{ font-size: 16px; }
  .container{ padding: 0 14px; }
  .topbarInner{ padding: 2px 0; gap: 10px; }
  .brand{ min-width: 0; }
  .logoDot{ width:30px; height:30px; border-radius:10px; }
  .brandTitle{ font-size: 15px; }
  .brandSub{ font-size: 11px; font-weight: 850; }

  .utils{ min-width: 0; gap: 8px; }
  /* .utils .btn.btnNeutral, */
  .utils .btn.btnPrimary{ display:none; }
  .langBtn{ height: 38px; border-radius: 12px; padding: 0 10px; }
  .iconBtn{ width:38px; height:38px; border-radius:12px; }

  .hero{ padding:14px 14px 12px; border-radius: 14px; }
  .heroTitle{ font-size: 20px; }
  .heroSub{ font-size: 14px; }
  .cardHeader{ padding: 12px 14px; }
  .cardBody{ padding: 12px 14px; }

  .miniKpi .value{ font-size: 17px; }

  table{ min-width: 520px; }
  tbody td{ padding:10px 8px; font-size:13px; }

  .verifyTable{ min-width: 720px; }

  .balls{
    flex-wrap: nowrap;         /* ✅ 줄바꿈 금지 */
    overflow-x: auto;          /* ✅ 폭이 부족하면 스크롤 */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;       /* 스크롤바 공간 살짝 */
  }
  .ball, .plus{ flex: 0 0 auto; }  /* ✅ 크기 고정, 밀림 방지 */  

  .topLogo{
    height:40px;
  }
}

@media (prefers-reduced-motion: reduce){
  .rankBadge.r1,.rankBadge.r2,.rankBadge.r3{ animation:none; }
  .rankBadge::before{ animation:none; }
  .btn{ transition:none; }
}