/* BASIC css start */
/* ============================================================
   카테고리 맵 페이지  (모든 클래스는 tmcm- 접두어: 메이크샵 공통 CSS와 충돌 방지)
   ============================================================ */
.tmcm {
    --tm-primary: #1a5cff; --tm-text: #1a1a2e; --tm-sub: #6b7280; --tm-border: #e5e7eb;
    max-width: 1400px; /* 사이트 헤더와 같은 콘텐츠 너비 */
    margin: 0 auto;
    padding: 24px 16px 48px;
    color: var(--tm-text);
    line-height: 1.5;
}
.tmcm *, .tmcm *::before, .tmcm *::after { box-sizing: border-box; }
/* 초기화 규칙은 :where() 로 우선순위 0 → 아래 개별 스타일이 항상 이김 */
.tmcm :where(ul, li) { margin: 0; padding: 0; list-style: none; }
.tmcm :where(a) { color: inherit; text-decoration: none; }
.tmcm a:focus-visible { outline: 2px solid var(--tm-primary); outline-offset: 2px; }

/* --- 상단 히어로 --- */
.tmcm-hero {
    padding: 40px 32px 32px;
    margin-bottom: 28px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #1a5cff 0%, #0a3fc0 100%);
    border-radius: 20px;
}
.tmcm-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .18em; opacity: .75; }
.tmcm-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.25; color: #fff; }
.tmcm-sub { margin: 10px 0 0; font-size: 15px; opacity: .9; }
.tmcm-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.tmcm-jump a {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.tmcm-jump a:hover { color: var(--tm-primary); background: #fff; }

/* --- 대분류 섹션 (--c: 강조색, --bg: 연한 배경색 은 섹션마다 지정) --- */
.tmcm-sec {
    margin-bottom: 28px;
    padding: 24px;
    background: var(--bg);
    border-radius: 20px;
    scroll-margin-top: 16px; /* 바로가기 버튼으로 이동했을 때 위쪽 여백 */
}
.tmcm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tmcm-sec-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; font-weight: 800; color: var(--tm-text); }
.tmcm-no {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 8px;
    font-size: 15px; font-weight: 800; color: #fff;
    background: var(--c); border-radius: 12px;
}
.tmcm-all {
    flex: 0 0 auto;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c);
    background: #fff;
    border: 1.5px solid var(--c);
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.tmcm-all:hover { color: #fff; background: var(--c); }

/* --- 대분류 설명 (특징 태그 + 한 줄 설명) --- */
.tmcm-sec-desc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: -6px 0 18px; font-size: 14px; line-height: 1.6; color: #374151; }
.tmcm-tag {
    flex: 0 0 auto;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: var(--c);
    border-radius: 999px;
}

/* --- 중분류 카드 + 소분류 칩 --- */
.tmcm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tmcm-card {
    padding: 16px 16px 18px;
    background: #fff;
    border: 1px solid var(--tm-border);
    border-top: 3px solid var(--c);
    border-radius: 14px;
    transition: box-shadow .15s, transform .15s;
}
.tmcm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.tmcm-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 800; color: var(--tm-text); }
.tmcm-mid::after { content: "\203A"; font-size: 20px; font-weight: 400; color: var(--c); }
.tmcm-mid:hover { color: var(--c); }
.tmcm-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tmcm-subs a {
    display: block;
    padding: 5px 12px;
    font-size: 13px;
    color: #374151;
    background: #f5f6fa;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.tmcm-subs a:hover { color: #fff; background: var(--c); }

/* --- 소분류가 없는 섹션: 타일형 --- */
.tmcm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tmcm-tiles a {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
    min-height: 54px; padding: 10px 14px;
    font-size: 15px; font-weight: 700; text-align: center;
    color: var(--tm-text);
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    transition: color .15s, border-color .15s, box-shadow .15s;
}
.tmcm-tiles a:hover { color: var(--c); border-color: var(--c); box-shadow: 0 4px 12px rgba(0,0,0,.06); }

.tmcm-note {
    font-style: normal; font-size: 11px; font-weight: 700;
    padding: 2px 8px; color: var(--c); background: var(--bg);
    border: 1px solid var(--c); border-radius: 999px;
}

/* --- 주요 키워드 섹션 --- */
.tmcm-count { font-size: 13px; font-weight: 700; color: var(--c); }
.tmcm-kw-desc { margin: -6px 0 18px; font-size: 14px; color: var(--tm-sub); }

.tmcm-hot { margin-bottom: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--tm-border); border-radius: 14px; }
.tmcm-hot-label { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--c); letter-spacing: .04em; }
.tmcm-hot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tmcm-hot-list a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 8px 8px;
    font-size: 15px; font-weight: 700; color: var(--tm-text);
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.tmcm-hot-list b {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    font-size: 12px; font-weight: 800; color: #fff;
    background: var(--c); border-radius: 999px;
}
.tmcm-hot-list a:hover { color: #fff; background: var(--c); }
.tmcm-hot-list a:hover b { color: var(--c); background: #fff; }

.tmcm-kwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tmcm-kwgroup { padding: 16px 16px 18px; background: #fff; border: 1px solid var(--tm-border); border-radius: 14px; }
.tmcm-kwtitle { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--tm-text); }
.tmcm-kwlist { display: flex; flex-wrap: wrap; gap: 6px; }
.tmcm-kwlist a {
    display: block;
    padding: 5px 12px;
    font-size: 13px;
    color: #374151;
    background: #f5f6fa;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.tmcm-kwlist a::before { content: "#"; margin-right: 1px; color: var(--c); font-weight: 700; }
.tmcm-kwlist a:hover { color: #fff; background: var(--c); }
.tmcm-kwlist a:hover::before { color: #fff; }

/* --- 반응형 --- */
@media (max-width: 960px) {
    .tmcm-title { font-size: 28px; }
}
@media (max-width: 680px) {
    .tmcm { padding: 12px 10px 32px; }
    .tmcm-hero { padding: 28px 16px 22px; border-radius: 16px; }
    .tmcm-title { font-size: 24px; }
    .tmcm-sub { font-size: 13px; }
    .tmcm-sec { padding: 16px 12px; border-radius: 16px; }
    .tmcm-sec-title { font-size: 19px; gap: 8px; }
    .tmcm-no { min-width: 32px; height: 32px; font-size: 13px; }
    .tmcm-grid { grid-template-columns: 1fr; }
    .tmcm-tiles { grid-template-columns: repeat(2, 1fr); }
    .tmcm-kwgrid { grid-template-columns: 1fr; }
    .tmcm-hot { padding: 14px 12px; }
    .tmcm-hot-list a { font-size: 14px; padding: 6px 13px 6px 6px; }
}

/* BASIC css end */