/* 홈 — 폭은 화면이 아니라 본문 폭(.hm)과 카드 폭(.hm-sec)에 맞춘다 (왼쪽 메뉴가 있든 없든 같게) */
.hm { container: hm / inline-size; display: grid; gap: 20px; }
.hm .c-뽑기 { --c: var(--violet); } .hm .c-클래스 { --c: var(--blue); } .hm .c-서버 { --c: var(--green); }
.hm .c-명절 { --c: var(--red); } .hm .c-이벤트, .hm .c-패키지 { --c: var(--accent); } .hm .c-점검, .hm .c-기타 { --c: var(--muted); }

/* 머리말 */
.hm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 6px 2px 2px; }
.hm-title { min-width: 0; }
.hm-title h1 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; }
.hm-title p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* 왼쪽 메뉴 아래 '오늘의 오딘'이 보이는 화면에서는 같은 내용이라 뺀다 (site.css .sb-pulse) */
@media (min-width: 1024px) and (min-height: 761px) { .hm-chips { display: none; } }
.hm-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 6px 13px 6px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted);
  font-size: 13px; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.hm-chip:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--muted); }
.hm-chip svg.lucide { width: 15px; height: 15px; color: var(--accent); }
.hm-chip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-chip em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 18px; padding: 0 7px; border-radius: 99px;
  color: var(--accent-strong); background: var(--accent-soft); }

/* 카드 공통 */
.hm-sec { container: sec / inline-size; min-width: 0; padding: 20px 22px; }
.hm-head { display: flex; align-items: flex-start; gap: 6px 12px; margin-bottom: 16px; }
.hm-head-t { flex: 1 1 auto; min-width: 0; }
.hm-head h2 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 16.5px; font-weight: 750; line-height: 24px; }
.hm-head h2 > svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.hm-head h2 .hm-badge { margin-left: 2px; letter-spacing: 0; }
.hm-head p { margin: 2px 0 0 26px; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.hm-more { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; margin: -6px -8px -6px 0; padding: 0 6px 0 10px;
  border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hm-more:hover { background: var(--surface-2); color: var(--accent); }
.hm-more svg.lucide { width: 15px; height: 15px; }
.hm-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 8px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 650; line-height: 18px; white-space: nowrap; }
.hm-badge svg.lucide { width: 12px; height: 12px; }
.hm-empty { margin: 0; padding: 22px 12px; text-align: center; font-size: 13.5px; color: var(--faint); list-style: none; }

/* 숫자 띠 */
.hm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 0; border-radius: var(--radius-sm); background: var(--surface-2); }
.hm-kpis > div { display: grid; gap: 1px; min-width: 0; padding: 9px 16px; }
.hm-kpis > div + div { box-shadow: inset 1px 0 0 var(--border); }
.hm-kpis .l { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpis b { font-size: 19px; font-weight: 750; line-height: 1.35; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpis b.masked { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); }
.hm-kpis b.masked svg.lucide { width: 15px; height: 15px; }
.hm-kpis .s { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 거래소: 신화 장비 · 회원 거래 */
.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 36px; margin-top: 20px; }
.hm-col { display: flex; flex-direction: column; min-width: 0; }
.hm-col-head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-height: 32px; margin-bottom: 4px; }
.hm-col-head h3 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.hm-col-head h3 svg.lucide { width: 16px; height: 16px; color: var(--accent); }
.hm-col-head small { font-size: 12px; color: var(--faint); }
.hm-col-head a { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hm-col-head a:hover { color: var(--accent); }
.hm-list { list-style: none; margin: 0 -8px; padding: 0; }
.hm-list li + li { border-top: 1px solid var(--border); }
.hm-list a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px; border-radius: var(--radius-sm); color: var(--text); }
.hm-list a:hover { background: var(--surface-2); color: var(--text); }
.hm-myth .ex-cat { width: 30px; height: 30px; }
.hm-myth .t { display: grid; flex: 1; min-width: 0; }
.hm-myth .t b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-myth .t small { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--faint); }
.hm-myth .xt-opt { margin: 0; padding: 0 6px; font-size: 11px; }
.hm-enh { font-style: normal; color: var(--accent); margin-right: 4px; }
.hm-myth .p { display: grid; justify-items: end; flex: none; }
.hm-myth .p b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-myth .p small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.hm-split .xt-list { margin: 0 -8px; }
.hm-split .xt-list.compact .xt-row { padding-left: 8px; padding-right: 8px; }
.hm-write { align-self: flex-start; min-height: 36px; margin-top: 12px; }

/* 다이아 시세 · 다가오는 일정 */
.hm-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.hm-row.hm-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-chart { position: relative; height: 192px; margin-top: 16px; }
.hm-chart .chart-empty { border-color: var(--border); }
.hm-events { list-style: none; margin: -8px 0 -6px; padding: 0; }
.hm-events li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 0; }
.hm-events li + li { border-top: 1px solid var(--border); }
.hm-eico { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); }
.hm-eico svg.lucide { width: 16px; height: 16px; }
.hm-events .t { display: grid; flex: 1; min-width: 0; }
.hm-events .t b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-events .t > span { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-events .d { display: grid; justify-items: end; flex: none; }
.hm-events .d b { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hm-events .d em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.hm-ok { color: var(--green); font-weight: 650; }

/* 오늘의 운세 (도구 위 한 줄) */
.hm-fortune { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text);
  border-color: color-mix(in srgb, #b07cff 30%, var(--border));
  background: linear-gradient(100deg, color-mix(in srgb, #7b4fd0 12%, var(--surface)), var(--surface) 55%, color-mix(in srgb, #e0a93a 10%, var(--surface))); }
.hm-fortune:hover { border-color: color-mix(in srgb, #b07cff 55%, var(--border)); color: var(--text); }
.hm-fortune-orb { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 38% 32%, #fff3cf, #f0b852 30%, #9a4a2a 65%, #3a1d2c); box-shadow: 0 0 18px rgba(240, 184, 82, .45); }
.hm-fortune-orb svg.lucide { width: 20px; height: 20px; }
.hm-fortune-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hm-fortune-t > b { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; font-size: 15px; font-weight: 800; }
.hm-fortune-t > span { font-size: 12.5px; color: var(--muted); }
.hm-fortune-r { display: grid; justify-items: end; gap: 3px; flex: none; text-align: right; }
.hm-fortune-r small { font-size: 12px; color: var(--faint); white-space: nowrap; }
.hm-luck { font-style: normal; font-size: 22px; font-weight: 900; line-height: 1.1; color: #c48918; }
[data-theme="dark"] .hm-luck { color: #f0be4f; }

/* 도구 */
.hm-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hm-tool { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; color: var(--text); transition: border-color .15s, background-color .15s; }
.hm-tool:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.hm-tool-ico { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent); }
.hm-tool-ico svg.lucide { width: 18px; height: 18px; }
.hm-tool-t { display: grid; gap: 2px; min-width: 0; }
.hm-tool-t > b { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.hm-tool-t > span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.hm-tool-t > small { margin-top: 3px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 공지 · 이번 주 · 커뮤니티 */
.hm-posts { list-style: none; margin: -6px -8px -4px; padding: 0; }
.hm-posts a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); }
.hm-posts a:hover { background: var(--surface-2); color: var(--text); }
.hm-posts .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-posts .cmt { flex: none; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.hm-posts .meta { flex: none; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.hm-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; }
.hm-week h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; color: var(--faint); }
.hm-week ul { margin: 0; padding-left: 17px; display: grid; gap: 4px; font-size: 13.5px; }
.hm-week li::marker { color: var(--faint); }
.hm-week .hm-empty { grid-column: 1 / -1; }
.hm-boards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.hm-boards .tile { min-width: 0; padding: 12px 14px; }
.hm-boards .tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 비회원 가입 안내 */
.hm-join { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; padding: 18px 22px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.hm-join-ico { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); }
.hm-join-ico svg.lucide { width: 20px; height: 20px; }
.hm-join-t { flex: 1 1 280px; min-width: 0; }
.hm-join-t b { font-size: 15px; font-weight: 700; }
.hm-join-t p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.hm-join-actions { display: flex; gap: 8px; flex: none; }
.hm-join-actions .btn { min-height: 38px; }

@container hm (max-width: 960px) {
  .hm-row, .hm-row.hm-even { grid-template-columns: minmax(0, 1fr); }
  .hm-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container hm (max-width: 560px) {
  .hm-title h1 { font-size: 22px; }
  .hm-title p { font-size: 14px; }
  .hm-sec { padding: 16px; }
  .hm-head p { margin-left: 0; }
  .hm-tools { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-tool { padding: 14px; }
  .hm-tool:last-child:nth-child(odd) { grid-column: auto; }
  .hm-fortune { flex-wrap: wrap; padding: 14px; }
  .hm-fortune-r { justify-items: start; text-align: left; }
  .hm-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-join { padding: 16px; }
  .hm-join-ico { display: none; }
  .hm-join-actions { flex: 1 1 100%; }
  .hm-join-actions .btn { flex: 1; }
}
@container sec (max-width: 700px) {
  .hm-split { grid-template-columns: minmax(0, 1fr); }
}
@container sec (max-width: 520px) {
  .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-kpis > div + div { box-shadow: none; }
  .hm-kpis > div { padding: 8px 12px; }
  .hm-kpis b { font-size: 17px; }
}
@media (max-width: 600px) {
  .hm { gap: 14px; }
}
/* 컨테이너 쿼리를 모르는 옛 브라우저: 좁은 화면만 한 줄로 */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .hm-row, .hm-row.hm-even, .hm-split { grid-template-columns: minmax(0, 1fr); }
    .hm-tools, .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-kpis > div + div { box-shadow: none; }
  }
}