/* ===== 태블릿 ===== */
@media (min-width: 768px) {
  .container { max-width: 640px; padding: 30px 24px 50px; }
  .header h1 { font-size: 32px; }
  .tab-btn { font-size: 13px; padding: 14px 8px; }
  .tab-btn .tab-icon { font-size: 20px; }
  .saju-pillars-wrap { gap: 16px; }
  .pillar-hanja { font-size: 32px; }
  .gunghap-category { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .reading-card { padding: 32px 28px; }
  .fortune-category-content { padding: 0 28px 28px; }
  .share-btns { gap: 12px; }
}

/* ===== 데스크탑 ===== */
@media (min-width: 1024px) {
  .container { max-width: 720px; padding: 40px 32px 60px; }
  .header h1 { font-size: 36px; }
  .trust-banner { gap: 40px; }
  .trust-item .num { font-size: 24px; }
  .radar-wrap { width: 260px; height: 260px; }
  .saju-pillars-wrap { gap: 20px; }
  .pillar-hanja { font-size: 36px; }
  .giwa-roof { height: 34px; }
}

/* ===== 작은 모바일 ===== */
@media (max-width: 360px) {
  .container { padding: 16px 12px 32px; }
  .card, .reading-card { padding: 22px 16px; }
  .header h1 { font-size: 22px; }
  .tab-btn { font-size: 10px; padding: 10px 2px; }
  .tab-btn .tab-icon { font-size: 14px; }
  .pillar-hanja { font-size: 22px; }
  .fortune-category-content { padding: 0 16px 20px; }
  .radar-wrap { width: 180px; height: 180px; }
  .share-btns { gap: 6px; }
  .share-btn { padding: 8px 12px; font-size: 12px; }
  .giwa-roof { height: 22px; }
}

/* ===== 중간 모바일 ===== */
@media (max-width: 420px) and (min-width: 361px) {
  .tab-btn { font-size: 11px; padding: 11px 3px; }
}

/* ===== 아이콘 카테고리 반응형 ===== */
@media (max-width: 360px) {
  .icon-category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 2px;
    padding: 14px 0 10px;
  }
  .icon-cat-circle { width: 44px; height: 44px; font-size: 20px; }
  .icon-cat-label { font-size: 10.5px; }
  .text-menu-item { font-size: 13px; padding: 6px 10px; }
}

@media (min-width: 361px) and (max-width: 480px) {
  .icon-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .icon-category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 768px) {
  .icon-category-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px 8px;
    padding: 20px 8px 16px;
  }
  .icon-cat-circle { width: 60px; height: 60px; font-size: 28px; }
  .icon-cat-label { font-size: 13px; }
  .text-menu-item { font-size: 15px; padding: 8px 18px; }
  .top-nav-wrap { padding: 0 24px; margin: 0 -24px; }
}

@media (min-width: 1024px) {
  .icon-cat-circle { width: 64px; height: 64px; font-size: 30px; }
  .text-menu-item { font-size: 16px; padding: 8px 22px; }
}