:root{
  /* ===== Palette (바꾸고 싶으면 여기 숫자만 조정) ===== */
  --bg: #f5f7fb;
  --paper: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;

  /* Brand / Accent */
  --primary: #6d5efc;        /* 인디고 */
  --primary-2: #a896ff;       /* 인디고 라이트 */
  --accent: #14b8a6;          /* 민트 */
  --chip: #efe9ff;            /* 칩 바탕 */
  --border: #e5e7eb;

  /* Surfaces */
  --card-bg: #ffffffcc;       /* 유리 느낌 */
  --card-border: #eef0f6;
  --shadow-sm: 0 1px 0 rgba(17, 24, 39, .03);
  --shadow-lg: 0 10px 30px rgba(17, 24, 39, .08);

  /* Table */
  --row: #f8fbff;             /* 기본 행 */
  --row-alt: #f2f7ff;         /* 지브라 */
  --row-hover: #eaf2ff;       /* 호버 */
  --rank-1-from:#ff5a66; --rank-1-to:#ff8a8f;  /* 1위 */
  --rank-2-from:#4ea5ff; --rank-2-to:#7cc2ff;  /* 2위 */
  --rank-3-from:#ffd24d; --rank-3-to:#ffe27a;  /* 3위 */
}

/* ========== Global ========== */
*{box-sizing:border-box}
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,Helvetica,Arial,sans-serif
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1260px;margin:0 auto;padding:18px 18px 28px}

/* ========== Brand / Header strip ========== */
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.brand .ko{
  margin:0;font-family:'Jua',sans-serif;font-weight:900;letter-spacing:-1px;
  background: linear-gradient(90deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-size:44px
}
.brand .en{margin:0;font-family:'Jua',sans-serif;color:#9ba3ff;font-weight:800;letter-spacing:6px}
.brand .sub{font-size:12px;color:#9aa1ab}

.strip{
  margin-top:14px; background:#0f172a; color:#fff; border-radius:14px 14px 0 0;
  padding:10px 14px; display:flex; align-items:center; gap:10px
}
.strip .label{font-weight:900;letter-spacing:2px}

/* ========== AD GRID (배너) ========== */
.ad-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  background:#0f172a; border-radius:0 0 14px 14px; padding:10px;
}
.ad{
  position:relative; overflow:hidden; background:#0c0f1a; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  aspect-ratio: 3.2 / 1; box-shadow: var(--shadow-sm);
}
.ad::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(109,94,252,.08), rgba(20,184,166,.08));
}
.ad img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.03)}
.ad:hover{transform:translateY(-2px);transition:.18s ease;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ad.wide{ grid-column: span 2; }
@media (max-width:1260px){ .ad-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:980px){  .ad-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:680px){  .ad-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ========== HERO ========== */
.hero-tile{ grid-column:1 / -1; width:100%; height:80px; border-radius:14px; overflow:hidden; display:block; }
.hero-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:980px){ .hero-tile{ height:75px } }
@media (max-width:680px){ .hero-tile{ height:65px } }

/* ========== Category chips ========== */
.chips{
  display:flex; gap:10px; margin:16px 0; padding:0 4px 6px;
  overflow-x:auto; white-space:nowrap; scrollbar-width:thin
}
.chips::-webkit-scrollbar{height:6px}
.chips::-webkit-scrollbar-thumb{background:#d8d1ff;border-radius:999px}
.chip{
  flex:0 0 auto; background:#f5f2ff; color:#2b22a3; border:1px solid #e4ddff;
  padding:10px 14px; border-radius:999px; text-align:center; font-weight:900;
  box-shadow: 0 2px 6px rgba(109,94,252,.08);
}
.chip:hover{background:#efeaff;border-color:#d9d1ff}
.chip.active{ background:#e9e5ff; border-color:#cfc5ff; color:#2b22a3; }

/* ========== Sections & Cards ========== */
.sections{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px; margin-top:14px;
}
.card{
  background:var(--card-bg); border-radius:14px;
  border:1px solid var(--card-border); overflow:hidden;
  box-shadow:var(--shadow-sm); backdrop-filter:saturate(1.2) blur(2px);
}
.card header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border); background:#fff;
}
.card h2{ margin:0; font-size:15px; font-weight:800 }
/* (교체) “전체보기”만 더 진하고 크게 */
.card .more{
  font-size:13px;        /* 살짝 키움 */
  font-weight:900;       /* 두껍게 */
  color:#ef4444;
  font-variation-settings: 'wght' 900; /* 가변폰트 사용 시 두께 보강 */
  /* 선택: 더 또렷하게 보이게 하고 싶으면 아래 두 줄 추가 */
  /* -webkit-text-stroke: 0.3px rgba(0,0,0,.15);
     text-shadow: 0 .3px 0 rgba(0,0,0,.12), -.3px 0 0 rgba(0,0,0,.12), .3px 0 0 rgba(0,0,0,.12); */
}

.card:hover{ box-shadow:var(--shadow-lg); transform: translateY(-2px); transition:.2s ease }

/* ========== Tables ========== */
table{ width:100%; border-collapse:collapse }
th,td{
  padding:8px 12px; border-bottom:1px solid var(--border);
  font-size:13px; line-height:1.15
}
th{ color:var(--muted); font-weight:700; background:#fafafa }
.rank{ width:28px; text-align:center; color:#6b7280; font-weight:700 }
.metric{ width:92px; text-align:right; color:#7787a0; white-space:nowrap }
table[role="grid"] td{ font-weight:600 }

/* 지브라 + 하늘톤 호버 */
table[role="grid"] tbody tr td{ background:var(--row) }
table[role="grid"] tbody tr:nth-child(even) td{ background:var(--row-alt) }
table[role="grid"] tbody tr:hover td{ background:var(--row-hover) }

/* 1~3위 뱃지 그라데이션 강조 (가독성 보정) */
table[role="grid"] tbody tr:nth-child(1) td{
  background: linear-gradient(90deg, var(--rank-1-from), var(--rank-1-to)); color:#fff;
}
table[role="grid"] tbody tr:nth-child(2) td{
  background: linear-gradient(90deg, var(--rank-2-from), var(--rank-2-to)); color:#fff;
}
table[role="grid"] tbody tr:nth-child(3) td{
  background: linear-gradient(90deg, var(--rank-3-from), var(--rank-3-to)); color:#2a2a2a;
}
table[role="grid"] tbody tr:nth-child(-n+3) .metric{ color:#111 !important; font-weight:800 }
table[role="grid"] tbody tr:nth-child(-n+3):hover td{ filter: brightness(1.02) }

/* ========== Footer ========== */
footer{ margin:28px 0 10px; color:var(--muted); font-size:12px; text-align:center }

/* ========== Responsive tweaks ========== */
@media (max-width:640px){
  .metric{ display:none }
  .brand .ko{ font-size:36px }
}

/* ====== Subpage head ====== */
.subpage-head{ margin: 8px 6px 12px; }
.subpage-head h2{ margin: 0 0 4px; font-size: 20px; font-weight:800 }
.subpage-head .muted{ color:var(--muted); font-size:12px; margin:0 }

/* ====== Tile Grid (성인링크 타일) ====== */
.tile-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;
}
@media (max-width:1260px){ .tile-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width:1024px){ .tile-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:768px){  .tile-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:520px){  .tile-grid{ grid-template-columns: repeat(2, 1fr); } }

.tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0f172a; color:#fff; border:1px solid #20283a; border-radius:12px; min-height:120px;
  overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1200px 300px at -10% -20%, rgba(109,94,252,.18), transparent 60%),
              radial-gradient(900px 300px at 110% 120%, rgba(20,184,166,.18), transparent 60%);
}
.tile:hover{ transform:translateY(-2px); transition:.18s ease; box-shadow:0 12px 28px rgba(0,0,0,.25); }
.tile-rank{ position:absolute; top:6px; left:8px; font-weight:900; font-size:14px; color:#ffdcdc; }
.tile img{ width:100%; height:70px; object-fit:contain; display:block; padding:8px 10px 0; filter:saturate(1.06) }
.tile-fallback{ width:100%; height:70px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#dbe4ff; padding:0 8px; text-align:center }
.tile-name{ margin-top:6px; font-weight:800; font-size:13px; text-align:center; color:#eaf1ff; padding:0 8px; }
.tile-metric{ position:absolute; bottom:6px; right:8px; font-size:12px; color:#b7c5e0; font-weight:700; }

/* ===== 사용 팁 =====
1) 1~3위 강조가 너무 튀면 아래 3줄을 주석처리:
   table[role="grid"] tbody tr:nth-child(1) td { background:var(--row) !important; color:inherit; }
   table[role="grid"] tbody tr:nth-child(2) td { background:var(--row) !important; color:inherit; }
   table[role="grid"] tbody tr:nth-child(3) td { background:var(--row) !important; color:inherit; }

2) “모두 하늘색 통일”로 되돌리기:
   table[role="grid"] tbody tr td{ background:#e0f2fe !important; color:#111 !important; }
   table[role="grid"] tbody tr:nth-child(even) td{ background:#e0f2fe !important; }
   table[role="grid"] tbody tr:hover td{ background:#e0f2fe !important; }
*/
/* === compact tile (안전 덮어쓰기) ======================= */
/* 타일 간격 살짝 ↓ */
.tile-grid{ gap:8px; }  /* 기존 10px → 8px */

/* 타일 세로 높이 살짝 ↓ */
.tile{ min-height:110px; } /* 기존 120px → 110px */

/* 로고(이미지) 영역 살짝 ↓ */
.tile img{ height:64px; }  /* 기존 70px → 64px */

/* 텍스트 크기 아주 조금 ↓ */
.tile-name{  font-size:12px; }  /* 기존 13px */
.tile-metric{ font-size:11px; } /* 기존 12px */
.tile-rank{  font-size:13px; }  /* 기존 14px */

/* 필요 시 우선순위 충돌나면 아래처럼 !important를 잠깐 추가해도 됩니다.
.tile{ min-height:110px !important; }
.tile img{ height:64px !important; }
*/

/* 표 행 전체 클릭용 */
table[role="grid"] tbody tr.row-link { cursor: pointer; }
table[role="grid"] tbody tr.row-link:hover { background: rgba(255,255,255,.06); }