/* =========================================================
   Link House – Clean CSS (최종판 · Super Round Title + Zero-Gap Tiles)
   ========================================================= */

/* Web fonts (영문: Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

/* ===== Super-Rounded Korean Title Fonts ===== */
@font-face{
  font-family:'BMJua';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/BMJUA.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TmoneyRound';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindRegular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TmoneyRound';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'GmarketSansBold';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.0/GmarketSansBold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cafe24SsurroundAir';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ===== Design Tokens ===== */
:root{
  /* Base */
  --bg:#efeff1; --ink:#1e1f23; --panel:#ffffff; --border:#dee0e6;
  --radius:14px;
  --shadow:0 1px 0 rgba(0,0,0,.2);
  --soft-shadow:0 6px 18px rgba(0,0,0,.05);

  /* Bars / Accents */
  --header-light:#f5f7fc; --header-border:#e8ebf7;
  --tabbar:#0f0f12;
  --accent:#ff5c9a;

  /* Brand (deep purple) */
  --brand-grad-start:#7b84ff;
  --brand-grad-end:#5645ff;
  --brand-en:#6d76ff;
  --brand-sub:#aeb3c0;

  /* Tile tune */
  --tile-corner:14px;          /* 타일 윗모서리 둥근 정도 */
  --label-h:36px;              /* 아래 라벨 높이 */
  --logo-scale:62%;            /* 아이콘 이미지 비율 */
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard, ui-sans-serif, -apple-system, Segoe UI, Roboto,
    "Apple SD Gothic Neo", Malgun Gothic, Helvetica, Arial, sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}            /* 이미지-텍스트 사이 여백 제거 */

/* ===== Containers ===== */
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===== Header (라이트 보라 스킨) ===== */
.site-top{
  background:var(--header-light);
  color:var(--ink);
  border-bottom:1px solid var(--header-border);
}
.top-inner{max-width:1180px;margin:0 auto;padding:28px 16px;text-align:center}
.brand{margin:0;text-align:center;line-height:1}

/* SUPER-ROUND KOREAN TITLE */
.brand-ko{
  display:block;
  font-family:'BMJua','TmoneyRound','GmarketSansBold','Cafe24SsurroundAir',
               'Jua', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto,
               'Apple SD Gothic Neo','Malgun Gothic', sans-serif;
  font-size:64px; font-weight:400; letter-spacing:-0.035em; line-height:1.02;
  background:linear-gradient(180deg,var(--brand-grad-start) 0%, var(--brand-grad-end) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:saturate(1.18) contrast(1.06);
  -webkit-text-stroke:0.8px rgba(86,69,255,.20);
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 12px 26px rgba(86,69,255,.28),
    0 3px 8px rgba(86,69,255,.22);
}
.brand-en{
  display:block; font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:700; font-size:18px; letter-spacing:.35em;
  color:var(--brand-en); margin-top:8px; text-transform:capitalize;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.brand-sub{margin:10px 0 0; font-size:13px; color:var(--brand-sub); line-height:1.5}

/* ===== Mega Tabs / Upper Nav ===== */
.mega-tabs{background:var(--tabbar);border-bottom:1px solid #222}
.mega-row{display:flex;gap:12px;justify-content:center;padding:14px 0}
.mega-btn{display:inline-block;padding:12px 18px;border-radius:10px;background:#1b1b1f;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.mega-btn.active{background:var(--accent)}

.main-tabs{display:flex;gap:22px;justify-content:center;padding:10px 0 18px}
.main-tabs .tab{color:#dcdcea;font-weight:800;padding:8px 10px;border-radius:8px}
.main-tabs .tab:hover{background:#1b1b1f}
.main-tabs .tab.active{background:var(--accent);color:#fff}

/* ===== Category Grid (6열) ===== */
.cat-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1200px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){ .cat-grid{grid-template-columns:repeat(2,1fr)}}

/* 카테고리 컬럼 */
.cat-col{
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--soft-shadow);
  /* Flex-box for vertical alignment */
  display: flex;
  flex-direction: column;
}
.cat-head{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  padding:10px 12px;
}
.cat-title{
  margin:0;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.2px;
}
.top10{
  display:none;
}

/* 카테고리 아이템 리스트 */
.cat-items{
  list-style:none;
  margin:0;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  /* Grow to fill column */
  flex-grow: 1;
  /* Create 5 equal-height rows */
  grid-template-rows: repeat(5, 1fr);
}
/* 포털사이트만 2열 */
.items-2col {
  grid-template-columns: repeat(2, 1fr);
}

.item{
  position:relative;
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 12px 8px;
  /* 아이템 자체에 그림자 효과 추가 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* 동일 높이 및 내부 컨텐츠 중앙 정렬 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rank{
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:bold;
  z-index: 1;
}

.tile{
  display:block;
}

.tile img {
  width: 80%;
  max-width: 64px;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 12px;
}

.name{
  padding-top: 10px;
  font-size: 9px; /* Font size decreased */
  font-weight: bold;
  color: #333;
}

/* ===== 작은 화면 보정 ===== */
@media (max-width:720px){
  .brand-ko{font-size:48px; letter-spacing:-.03em}
  .brand-en{font-size:16px; letter-spacing:.28em}
}
/* ===========================
   LINK HOUSE · Purple overrides
   =========================== */

/* 1) 보라 팔레트 토큰 추가/교체 */
:root{
  --accent: #7c4dff;           /* 메인 보라 */
  --accent-dark: #5b3fe0;      /* 진보라(그라데이션/보더) */
  --accent-deep: #33265f;      /* 어두운 보라(딥톤 버튼) */
  --accent-soft: #ece7ff;      /* 연보라(보조 텍스트) */
}

/* 2) 상단 대버튼(4개) 전부 보라색 */
.mega-btn{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color:#fff;
  border:1px solid var(--accent-dark);
  box-shadow: 0 8px 22px rgba(124,77,255,.28);
}
.mega-btn:hover{ filter: brightness(1.06) saturate(1.04); }
.mega-btn.active{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.mega-btn.dark{
  background: var(--accent-deep);
  border-color: var(--accent-dark);
  color: var(--accent-soft);
}

/* 3) 상단 탭의 활성/호버를 보라색으로 */
.main-tabs .tab.active{
  background: var(--accent);
  color:#fff;
}
.main-tabs .tab:hover{
  background: var(--accent-dark);
  color:#fff;
}

/* 4) 카테고리 헤더(분홍 라벨) → 보라색 */
.cat-head{
  background: var(--accent);
  color:#fff;
}

/* 5) 순위 동그라미 배지 → 보라색 */
.item .rank{
  background: var(--accent);
  border:1px solid var(--accent-dark);
  color:#fff;
}
/* 랭크 배지 제거 */
.item .rank { display: none !important; }

/* 카테고리 타일 – 세로 간격만 0으로 */
.cat-items{ row-gap:0 !important; }

/* === COMPACT: 가로/세로 전부 간격 축소 (로고·텍스트 크기 유지) === */

/* 컬럼들 사이 간격(가로/세로) */
.cat-grid{
  gap: 10px !important;                 /* 기존 18px → 10px */
}

/* 카테고리 안 타일 간격(가로+세로) & 리스트 좌우 여백 축소 */
.cat-items{
  gap: 4px !important;                   /* 기존 12px → 4px */
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 타일 내부 여백만 살짝 줄이기(로고/글씨 크기는 그대로) */
.item{
  padding: 8px 6px !important;           /* 세로 8, 가로 6 */
}

/* 로고/텍스트 크기는 유지, 위쪽 간격만 살짝 축소 */
.tile img{ width:80%; max-width:64px; }  /* ← 기존과 동일 (크기 그대로) */
.name{ padding-top: 6px !important; }    /* 기존 10px → 6px */


/* 버튼 글씨 둥글게 (Jua 적용) */
button,
.btn,
.chips .chip,
.cta a {
  font-family: 'Jua', sans-serif;
  font-weight: 400;
  letter-spacing: -0.2px; /* 살짝 뭉툭하게 보이도록 */
}