/* 홈 '경기 일정·결과' — 날짜 띠·정렬·거르기·하루 경기 목록 (2026-10-21, templates/betscore/index.html).
   색은 design-system.css(Match clarity) 토큰만 쓴다. */
.home-featured-section { min-width: 0; }
.home-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.home-featured-card { min-width: 0; border: 1px solid var(--bs-border); border-radius: 12px; background: var(--bs-surface); }
.home-featured-header { padding: 16px 20px 0; }
.home-featured-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: var(--bs-secondary); font-size: 13px; line-height: 1.5; }
.home-featured-league { display: flex; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.home-featured-icon { flex: none; font-size: 16px; }
.home-featured-date { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.home-featured-time { color: var(--bs-text); font-weight: 600; }
.home-featured-content { padding: 16px 20px 4px; }
.home-featured-teams { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 16px; text-align: center; }
.home-featured-team { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-featured-name { color: var(--bs-text); font-size: 17px; font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.home-featured-side, .home-featured-vs { color: var(--bs-muted); font-size: 13px; }
.home-featured-preview { margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bs-elevated); }
.home-featured-lock { display: block; margin-bottom: 12px; text-align: center; color: var(--bs-blue); font-size: 13px; }
.home-featured-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--bs-border); }
.home-featured-quality { margin: 0; padding: 10px 0; color: var(--bs-muted); font-size: 13px; line-height: 1.5; }
.home-featured-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bs-blue); font-size: 13px; font-weight: 600; }
.home-featured-link:hover { color: var(--bs-text); }
#schedule {
  --sch-done: #26384a;
  --sch-proto-fg: #c9d3ff;
  --sch-proto-bg: #28306a;
  --sch-pick: #7dd3fc;
  --sch-pick-bg: #183347;
  --sch-time: 46px;
  --sch-st: 62px;
  --sch-pred: 116px;
  scroll-margin-top: 80px;
  min-width: 0;
}
#schedule[data-lang="en"] { --sch-time: 72px; --sch-st: 90px; }
#schedule[data-pred="open"] { --sch-pred: 236px; }
#schedule button { font: inherit; cursor: pointer; }
/* 클래스의 display 가 hidden 속성을 이기지 않게 (숨긴 칩·단추·접은 리그, 주요 경기 카드의 예측 칸) */
#schedule [hidden], [data-home-preview][hidden], [data-home-lock][hidden] { display: none !important; }
#schedule svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#schedule .sch-head { margin-bottom: 14px; }

#schedule .sch-controls {
  position: sticky; top: var(--nav-h, 68px); z-index: 30;
  background: var(--bs-surface); padding: 12px 16px 0; border: 1px solid var(--bs-border); border-radius: 12px;
}
#schedule .sch-datebar { display: flex; align-items: stretch; gap: 6px; }
#schedule .sch-arrow, #schedule .sch-cal-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 52px; padding: 0 10px;
  border: 1px solid var(--bs-border); border-radius: 10px; background: var(--bs-surface); color: var(--bs-secondary);
}
#schedule .sch-arrow:hover, #schedule .sch-cal-btn:hover { border-color: var(--bs-muted); color: var(--bs-text); }
#schedule .sch-cal-btn span { font-size: 14px; font-weight: 600; }
#schedule .sch-strip { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#schedule .sch-strip::-webkit-scrollbar { display: none; }
#schedule .sch-day {
  flex: 1 0 62px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--bs-border); border-radius: 10px; background: var(--bs-surface); color: var(--bs-text);
  line-height: 1.25; font-variant-numeric: tabular-nums; text-decoration: none;
}
#schedule[data-lang="en"] .sch-day { min-width: 82px; }
#schedule .sch-day:hover { border-color: var(--bs-muted); }
#schedule .sch-day .dw { font-size: 13px; color: var(--bs-secondary); }
#schedule .sch-day.sat .dw { color: var(--bs-blue); }
#schedule .sch-day.sun .dw { color: var(--bs-negative); }
#schedule .sch-day.today .dw { color: var(--bs-accent); font-weight: 700; }
#schedule .sch-day .dd { font-size: 15px; font-weight: 700; }
#schedule .sch-day .dn { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--bs-muted); }
#schedule .sch-day .dn svg { width: 11px; height: 11px; }
#schedule .sch-day.locked { background: transparent; border-style: dashed; }
#schedule .sch-day.locked .dd { color: var(--bs-secondary); }
#schedule .sch-day[aria-current="date"] { background: var(--bs-accent); border-color: var(--bs-accent); border-style: solid; }
#schedule .sch-day[aria-current="date"] :is(.dw, .dd, .dn) { color: var(--bs-on-accent); }

#schedule .sch-cal-wrap { position: relative; flex: none; display: flex; }
#schedule .sch-cal {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 308px;
  padding: 12px; border: 1px solid var(--bs-border); border-radius: 12px; background: var(--bs-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
#schedule .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; }
#schedule .cal-head button { width: 40px; height: 40px; border-radius: 8px; color: var(--bs-secondary); display: inline-flex; align-items: center; justify-content: center; }
#schedule .cal-head button:hover { background: var(--bs-elevated); }
#schedule .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-variant-numeric: tabular-nums; }
#schedule .cal-grid .wd { font-size: 13px; color: var(--bs-muted); padding: 2px 0 4px; }
#schedule .cal-grid .wd.sun { color: var(--bs-negative); }
#schedule .cal-grid .wd.sat { color: var(--bs-blue); }
#schedule .cal-day { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 8px; color: var(--bs-text); font-size: 14px; text-decoration: none; }
#schedule .cal-day:hover { background: var(--bs-elevated); }
#schedule .cal-day.locked { color: var(--bs-secondary); }
#schedule .cal-day.locked::after { content: ""; position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 2px; background: var(--bs-warning); opacity: .8; }
#schedule .cal-day.today { box-shadow: inset 0 0 0 1px var(--bs-accent); }
#schedule .cal-day[aria-current="date"] { background: var(--bs-accent); color: var(--bs-on-accent); font-weight: 700; }
#schedule .cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--bs-muted); }
#schedule .cal-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--bs-warning); margin-right: 4px; vertical-align: 1px; }

#schedule .sch-tools {
  display: grid; gap: 0; margin-top: 12px;
}
#schedule .sch-sort-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--bs-border); }
#schedule .sch-seg { display: inline-flex; flex: none; border: 1px solid var(--bs-border); border-radius: 10px; overflow: hidden; background: var(--bs-surface); }
#schedule .sch-seg button { min-height: 44px; padding: 0 16px; color: var(--bs-secondary); font-size: 14px; font-weight: 600; }
#schedule .sch-seg button + button { border-left: 1px solid var(--bs-border); }
#schedule .sch-seg button[aria-pressed="true"] { background: var(--bs-elevated); color: var(--bs-text); }
#schedule .sch-switch {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  border: 1px solid transparent; border-radius: 10px; background: var(--bs-surface); color: var(--bs-secondary);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
#schedule .sch-switch:hover { border-color: var(--bs-muted); color: var(--bs-text); }
#schedule .sch-switch .sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: #3a4b5d; transition: background .15s; }
#schedule .sch-switch .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bs-text); transition: transform .15s; }
#schedule .sch-switch[aria-checked="true"] { color: var(--bs-text); }
#schedule .sch-switch[aria-checked="true"] .sw { background: #387b69; }
#schedule .sch-switch[aria-checked="true"] .sw::after { transform: translateX(12px); background: var(--bs-text); }
#schedule .sch-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--bs-border); }
#schedule .sch-chips:empty { display: none; }
#schedule .chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 13px;
  border: 1px solid transparent; border-radius: 8px; background: var(--bs-surface); color: var(--bs-secondary);
  font-size: 13px; white-space: nowrap; text-decoration: none;
}
#schedule .chip:hover { border-color: var(--bs-muted); color: var(--bs-text); }
#schedule .chip b { font-weight: 600; color: var(--bs-muted); font-variant-numeric: tabular-nums; }
#schedule .chip[aria-pressed="true"] { background: var(--bs-accent-surface); border-color: #2f6558; color: var(--bs-accent); font-weight: 700; }
#schedule .chip[aria-pressed="true"] b { color: inherit; }
#schedule #sch-status .chip[aria-pressed="true"] { background: var(--bs-elevated); border-color: var(--bs-border); color: var(--bs-text); }
#schedule .chip.away { border-color: var(--bs-border); border-style: dashed; }
#schedule .chip.away b { color: var(--bs-secondary); }

#schedule .sch-cap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 8px; color: var(--bs-secondary); font-size: 14px; }
#schedule .sch-cap strong { color: var(--bs-text); font-size: 16px; }
#schedule .sch-jump { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bs-border); border-radius: 8px; color: var(--bs-blue); font-size: 13px; font-weight: 600; }
#schedule .sch-jump svg { width: 15px; height: 15px; }
#schedule .sch-note { margin: -2px 0 8px; color: var(--bs-muted); font-size: 13px; }

/* 목록 */
#schedule .sch-list { border: 1px solid var(--bs-border); border-radius: 12px; overflow: hidden; background: var(--bs-surface); }
#schedule .sr {
  display: grid; align-items: center; column-gap: 10px;
  grid-template-columns: var(--sch-time) var(--sch-st) minmax(100px, 150px) minmax(0, 1fr) 68px minmax(0, 1fr) 48px var(--sch-pred) 14px;
  grid-template-areas: "time st lg home score away tags pred chev";
  min-height: 60px; padding: 10px 14px; border-top: 1px solid var(--bs-border);
  color: var(--bs-text); text-decoration: none; font-size: 15px; line-height: 1.5;
}
#schedule .sch-list > .sr:first-child, #schedule .lg-rows > .sr:first-child { border-top: 0; }
#schedule .sr:hover { background: var(--bs-elevated); }
#schedule .sr:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: -2px; }
#schedule[data-sort="league"] .sr {
  grid-template-columns: var(--sch-time) var(--sch-st) minmax(0, 1fr) 68px minmax(0, 1fr) 48px var(--sch-pred) 14px;
  grid-template-areas: "time st home score away tags pred chev";
}
#schedule[data-sort="league"] .sr-lg { display: none; }
#schedule .sr.open { padding-block: 10px; }
#schedule .sr-meta { display: contents; }
#schedule .sr-time { grid-area: time; color: var(--bs-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#schedule .sr-st { grid-area: st; }
#schedule .sr-lg { grid-area: lg; min-width: 0; color: var(--bs-muted); font-size: 13px; word-break: keep-all; overflow-wrap: anywhere; }
#schedule .sr-lg i { font-style: normal; color: #8ea1b5; margin-left: 4px; }
#schedule .sr-home { grid-area: home; justify-self: end; text-align: right; }
#schedule .sr-away { grid-area: away; justify-self: start; }
#schedule .sr-team { min-width: 0; display: inline-flex; align-items: center; gap: 5px; word-break: keep-all; overflow-wrap: anywhere; }
#schedule .sr-team.win { font-weight: 700; }
#schedule .sr-team.lose { color: var(--bs-muted); }
#schedule .sr-team.pick .nm { color: var(--sch-pick); }
#schedule .sr-score { grid-area: score; justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 56px; height: 26px; padding: 0 6px; border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
#schedule .sr-score.has { background: var(--sch-done); }
#schedule .sr-score.vs { color: var(--bs-muted); font-size: 12px; font-weight: 500; }
#schedule .sr-hs, #schedule .sr-as { display: none; }
#schedule .sr-tags { grid-area: tags; justify-self: center; }
#schedule .tag-proto { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--sch-proto-bg); color: var(--sch-proto-fg); font-size: 13px; font-weight: 600; line-height: 22px; }
#schedule .sr-pred { grid-area: pred; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
#schedule .pr-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--sch-pick); }
#schedule .pr-lock svg { width: 14px; height: 14px; }
#schedule .sr.open .sr-pred { flex-direction: column; align-items: flex-end; gap: 1px; white-space: normal; text-align: right; }
#schedule .pv1 { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 6px; }
#schedule .pv-kind { color: var(--bs-muted); }
#schedule .pv-pick { color: var(--bs-text); font-weight: 700; font-size: 13px; }
#schedule .pv2 { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px; color: var(--sch-pick); font-variant-numeric: tabular-nums; }
#schedule .pv2 i { font-style: normal; color: var(--bs-muted); }
#schedule .pr-hit, #schedule .pr-miss { padding: 0 5px; border-radius: 4px; font-weight: 700; line-height: 18px; }
#schedule .pr-hit { background: var(--bs-accent-surface); color: var(--bs-accent); }
#schedule .pr-miss { background: #3a2329; color: var(--bs-negative); }
#schedule .sr-chev { grid-area: chev; color: var(--bs-muted); }
#schedule .sr-chev svg { width: 14px; height: 14px; }

#schedule .st { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 24px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
#schedule .st-sched { color: var(--bs-secondary); box-shadow: inset 0 0 0 1px var(--bs-border); }
#schedule .st-done { color: var(--bs-text); background: var(--sch-done); }
#schedule .st-check { color: var(--bs-warning); box-shadow: inset 0 0 0 1px rgba(243, 205, 136, .55); }
#schedule .st-live { color: #ffd1d5; background: #5b1f2a; }
#schedule .st-off { color: var(--bs-muted); box-shadow: inset 0 0 0 1px var(--bs-border); text-decoration: line-through; }

#schedule .sr-now {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  border-top: 1px solid var(--bs-border); background: var(--bs-elevated); color: var(--bs-secondary);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#schedule .sr-now::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }

#schedule .lg-group + .lg-group { border-top: 1px solid var(--bs-border); }
#schedule .lg-head { display: flex; align-items: center; gap: 2px; padding: 0 12px 0 4px; background: var(--bs-elevated); }
#schedule .lg-fav { flex: none; width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-muted); }
#schedule .lg-fav[aria-pressed="true"] { color: var(--bs-warning); }
#schedule .lg-fav[aria-pressed="true"] svg { fill: currentColor; }
#schedule .lg-toggle { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; text-align: left; color: var(--bs-text); }
#schedule .lg-toggle .chev { transition: transform .15s; }
#schedule .lg-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
#schedule .lg-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#schedule .lg-ctry { flex: none; color: var(--bs-muted); font-size: 13px; }
#schedule .lg-count { margin-left: auto; flex: none; color: var(--bs-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
#schedule .lg-rows { border-top: 1px solid var(--bs-border); }

#schedule .sch-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-top: 1px solid var(--bs-border); color: var(--bs-secondary); font-size: 14px; font-weight: 600; }
#schedule .sch-more:hover { background: var(--bs-elevated); }
#schedule .sch-empty, #schedule .sch-locked { padding: 40px 20px; text-align: center; color: var(--bs-secondary); }
#schedule .sch-locked svg { width: 32px; height: 32px; color: var(--bs-warning); margin: 0 auto 8px; }
#schedule .sch-locked h3 { color: var(--bs-text); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
#schedule .sch-locked p { max-width: 46ch; margin: 0 auto 16px; font-size: 14px; }
#schedule .sch-locked .acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
#schedule .sch-locked .acts a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 14px; }
#schedule .sch-locked .acts .go { background: var(--bs-accent); color: var(--bs-on-accent); }
#schedule .sch-locked .acts .sub { border: 1px solid var(--bs-border); color: var(--bs-text); }
#schedule .sch-empty button { margin-top: 10px; min-height: 40px; padding: 0 14px; border: 1px solid var(--bs-border); border-radius: 8px; color: var(--bs-text); }

/* 좁은 화면: 팀을 두 줄로, 점수를 오른쪽에. 거르기는 기능별 줄 안에서 줄바꿈한다. */
@media (max-width: 1099px) {
  #schedule .sr, #schedule[data-sort="league"] .sr {
    grid-template-columns: minmax(0, 1fr) 34px auto;
    grid-template-areas: "meta meta meta" "home hs pred" "away as pred";
    row-gap: 4px; padding: 12px;
  }
  #schedule .sr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; grid-area: meta; min-width: 0; font-size: 13px; margin-bottom: 4px; }
  #schedule .sr-time { font-size: 13px; }
  #schedule .sr-lg { font-size: 13px; flex: 1 1 130px; }
  #schedule .sr-tags { margin-left: auto; }
  #schedule .sr-score, #schedule .sr-chev { display: none; }
  #schedule .sr-hs, #schedule .sr-as { display: block; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  #schedule .sr-hs { grid-area: hs; }
  #schedule .sr-as { grid-area: as; }
  #schedule .sr-hs.lose, #schedule .sr-as.lose { color: var(--bs-muted); font-weight: 500; }
  #schedule .sr-hs.vs, #schedule .sr-as.vs { color: var(--bs-muted); font-weight: 400; }
  #schedule .sr-home { justify-self: start; text-align: left; }
  #schedule .sr-pred { grid-area: pred; align-self: center; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 6px; min-width: 52px; }
  #schedule .pr-lock { flex-direction: column; gap: 2px; font-size: 13px; }
  #schedule .pr-lock svg { width: 16px; height: 16px; }
  #schedule .sr.open, #schedule[data-sort="league"] .sr.open {
    grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "meta meta" "home hs" "away as" "pred pred"; padding-block: 12px;
  }
  #schedule .sr.open .sr-pred {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; justify-self: stretch; gap: 2px 10px;
    margin-top: 6px; padding: 6px 9px; min-width: 0; border-radius: 8px; background: var(--sch-pick-bg); text-align: left;
  }
  #schedule .sr.open .pv1, #schedule .sr.open .pv2 { justify-content: flex-start; }
  #schedule .st { min-width: 0; font-size: 13px; }
}
@media (max-width: 640px) {
  .home-featured-header { padding: 14px 16px 0; }
  .home-featured-content { padding: 14px 16px 4px; }
  .home-featured-teams { gap: 8px; }
  .home-featured-name { font-size: 16px; }
  #schedule .sch-arrow { display: none; }
  #schedule .sch-cal-btn { min-width: 52px; padding: 0 8px; }
  #schedule .sch-cal-btn span { display: none; }
  #schedule .sch-day { flex: 0 0 56px; }
  #schedule .sch-controls { position: relative; top: auto; padding: 10px 12px 0; }
  #schedule .sch-tools { margin-top: 8px; }
  #schedule .sch-seg button { padding: 0 12px; }
  #schedule .chip { padding: 0 10px; }
  #schedule .sch-datebar { position: relative; }
  #schedule .sch-cal-wrap { position: static; }
  #schedule .sch-cal { position: absolute; left: 0; right: 0; top: calc(100% + 6px); width: auto; }
  #schedule .lg-toggle { flex-wrap: wrap; gap: 3px 6px; padding-block: 8px; }
  #schedule .lg-name { flex: 1 1 80px; white-space: normal; overflow-wrap: anywhere; }
  #schedule .lg-ctry { flex: 0 1 auto; overflow-wrap: anywhere; }
  #schedule .lg-count .ex { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #schedule .lg-toggle .chev, #schedule .sch-switch .sw, #schedule .sch-switch .sw::after { transition: none; }
}