/* 메인(도감형 목록). 색은 site.css 의 --clr-* 만 쓴다 — 라이트/다크가 그쪽에서 바뀐다. */

.hm [hidden] { display: none !important; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 상단 줄: 검색 · 커스텀 · 보기 · 시작하기 */
.hm-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hm-search {
    flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: .5rem;
    height: 42px; padding: 0 .85rem; margin: 0;
    background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px;
    color: var(--clr-muted); cursor: text;
}
.hm-search:focus-within { border-color: var(--clr-accent); }
.hm-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: var(--clr-text); font: inherit; font-size: .92rem;
}
.hm-btn, .hm-seg, .hm-start { height: 42px; border-radius: 10px; font: inherit; font-size: .85rem; }
.hm-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: 0 .9rem; cursor: pointer;
    background: var(--clr-surface); border: 1px solid var(--clr-border); color: var(--clr-muted); white-space: nowrap;
}
.hm-btn:hover { color: var(--clr-text); border-color: var(--clr-accent); }
.hm-btn[aria-pressed="true"] { color: var(--clr-text); border-color: var(--clr-accent); background: var(--clr-surface2); }
.hm-btn:disabled { opacity: .6; cursor: progress; }
.hm-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--clr-surface); border: 1px solid var(--clr-border); }
.hm-seg button {
    width: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--clr-muted); cursor: pointer;
}
.hm-seg button[aria-pressed="true"] { background: var(--clr-surface2); color: var(--clr-text); }
.hm-start {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 1.2rem; border: 0; cursor: pointer; white-space: nowrap; font-weight: 700; text-decoration: none;
    background: var(--clr-accent); color: #fff;
}
.hm-start:hover { background: var(--clr-accent-hover); color: #fff; }

@media (max-width: 600px) {
    .hm-search { flex-basis: 100%; }
    .hm-start { flex: 1; }
}

/* ── 필터 칩 (가로로 넘기기) */
.hm-chips {
    display: flex; gap: .4rem; margin-top: .55rem; overflow-x: auto; scrollbar-width: none;
    transition: opacity .15s;
}
.hm-chips::-webkit-scrollbar { display: none; }
.hm-chips.is-off { opacity: .35; pointer-events: none; }
.hm-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    height: 32px; padding: 0 .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: var(--clr-surface); border: 1px solid var(--clr-border); color: var(--clr-muted);
    font: inherit; font-size: .8rem;
}
.hm-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.hm-chip:hover { color: var(--clr-text); }
.hm-chip[aria-pressed="true"] {
    color: var(--clr-text); border-color: var(--tc, var(--clr-accent));
    background: color-mix(in srgb, var(--tc, var(--clr-accent)) 16%, var(--clr-surface));
}

.hm-empty { margin: 3rem 0; text-align: center; color: var(--clr-muted); }