/* 생성 파일 — migrate/pack-fragments.py 가 시안 tools/i18n/ko/index/head.html 에서 만든다. 홈·분류 페이지 전용 */
/* ============================================================
   홈 전용
   ============================================================ */
.hm-hero{padding:18px 0 26px;border-bottom:3px double var(--soft);margin-bottom:22px}
.hm-hero h1{font-family:var(--serif);font-weight:950;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.045em;margin:0 0 14px}
.hm-hero > p{margin:0 0 18px;max-width:640px;font-size:14.5px;color:var(--muted);line-height:1.75}
.rb-home-search{
  display:flex;align-items:center;gap:10px;height:46px;max-width:620px;padding:0 10px 0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.rb-home-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash);color:var(--ink)}
.rb-home-search input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:15px;color:var(--ink)}
.rb-home-search input::placeholder{color:var(--muted);opacity:.7}
.rb-home-search kbd{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--soft);border-radius:var(--radius);padding:2px 5px;line-height:1.2}
.rb-home-search .n{font-family:var(--mono);font-size:11px;color:var(--accent);white-space:nowrap}
.hm-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.hm-stats b{font-family:var(--sans);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 섹션 머리 */
.hm-sec{margin:26px 0 0}
.hm-sec__head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--soft)}
.hm-sec__head h2{margin:0;font-family:var(--serif);font-size:18px;font-weight:900;letter-spacing:-.03em}
.hm-sec__head .cnt{font-family:var(--mono);font-size:11px;color:var(--accent)}
.hm-sec__head p{margin:0;font-size:12.5px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-sec__head .more{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.hm-sec__head .more:hover{color:var(--ink)}
.hm-empty{margin:0;padding:12px 14px;border:1px dashed var(--soft);border-radius:var(--radius);font-size:12.5px;color:var(--muted)}

/* 카드 그리드 (설명 포함) */
.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hm-card{position:relative;display:block;padding:12px 14px 11px;border:1px solid var(--soft);background:var(--card);border-radius:var(--radius);transition:border-color var(--ease),background var(--ease)}
.hm-card:hover{border-color:var(--line);background:var(--paper)}
.hm-card b{display:block;font-size:14px;font-weight:750;letter-spacing:-.01em;line-height:1.35;padding-right:22px}
.hm-card p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-card small{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.hm-card .rb-fav{top:7px;right:7px;transform:none}
.hm-card:hover .rb-fav{opacity:1}

/* 분류 블록 */
.hm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 2px}
.hm-bar h2{margin:0;font-family:var(--serif);font-size:18px;font-weight:900;letter-spacing:-.03em}
.hm-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.hm-seg button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);transition:background var(--ease),color var(--ease)}
.hm-seg button + button{border-left:1px solid var(--line)}
.hm-seg button:hover{background:var(--btn);color:var(--ink)}
.hm-seg button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.hm-seg .i{width:13px;height:13px}
.hm-cat{margin-top:22px}
.hm-cat__head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.hm-cat__head .ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border:1px solid var(--soft);background:var(--wash);border-radius:var(--radius);color:var(--ink)}
.hm-cat__head h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.hm-cat__head .cnt{font-family:var(--mono);font-size:11px;color:var(--accent)}
.hm-cat__head p{margin:0;flex:1;min-width:0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-cat__head .more{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.hm-cat__head .more:hover{color:var(--ink)}
/* 타일 보기: 이름만, 4열 */
html[data-view="tile"] .hm-cat .hm-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html[data-view="tile"] .hm-cat .hm-card{padding:9px 28px 9px 12px;display:flex;align-items:center;min-height:40px}
html[data-view="tile"] .hm-cat .hm-card p,html[data-view="tile"] .hm-cat .hm-card small{display:none}
html[data-view="tile"] .hm-cat .hm-card b{font-size:13px;font-weight:650;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-view="tile"] .hm-cat .hm-card .rb-fav{top:50%;transform:translateY(-50%)}
.hm-card.is-hidden,.hm-cat.is-hidden,.hm-sec.is-hidden{display:none}

@media (max-width:900px){
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-view="tile"] .hm-cat .hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-cat__head p{display:none}
}
@media (max-width:560px){
  .hm-grid{grid-template-columns:minmax(0,1fr)}
  html[data-view="tile"] .hm-cat .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-sec__head p{display:none}
}