/* 노션 페이지의 시각 언어를 그대로 옮긴 것 — 게임 계열색 카드 + 앱 아이콘 + 16:9 이미지. */

:root {
  --bg: #ffffff;
  --fg: #37352f;
  --fg-dim: #787774;
  --rule: #e9e9e7;
  --link: #2563eb;

  --card-yellow: #fbf3db;
  --card-blue: #e7f3f8;
  --card-orange: #faebdd;
  --card-red: #fbe4e4;
  --card-gray: #f1f1ef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919;
    --fg: #e6e6e4;
    --fg-dim: #9b9b98;
    --rule: #2f2f2f;
    --link: #7aa2f7;

    --card-yellow: #372e20;
    --card-blue: #1f282d;
    --card-orange: #36291d;
    --card-red: #382a2a;
    --card-gray: #2f2f2f;
  }
}

* { box-sizing: border-box; }

/* display 를 지정한 요소에도 hidden 이 먹게 한다 (필터가 이걸로 거른다) */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 20px 16px 64px;
  max-width: 720px;
  margin-inline: auto;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
        "Noto Sans KR", "Malgun Gothic", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }

.subhead { color: var(--fg-dim); font-size: 0.875rem; margin: 0 0 20px; }

/* ── 상단 내비 (노션 탭바 대체) ───────────────────────────── */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 12px 14px;
  margin-bottom: 24px;
  border-radius: 8px;
  background: var(--card-blue);
  font-size: 0.9375rem;
}
nav .here { font-weight: 700; }

/* ── 필터 막대 ────────────────────────────────────────────── */
.filters { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.filters .q {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-dim);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--fg-dim); }
.chip.on { background: var(--link); border-color: var(--link); color: #fff; }
.filter-status { font-size: 0.8125rem; color: var(--fg-dim); min-height: 1.2em; }
.filter-status .reset {
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0 0 0 6px;
  text-decoration: underline;
}

/* ── 캘린더 달 이동 ───────────────────────────────────────── */
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cal-nav button {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  border-radius: 8px;
  padding: 5px 12px;
  font: inherit;
  cursor: pointer;
}
.cal-nav button:disabled { opacity: 0.35; cursor: default; }
.cal-nav .cal-current { font-weight: 600; min-width: 7.5em; text-align: center; }
.cal-nav [data-cal="today"] { margin-left: auto; font-size: 0.875rem; }

/* ── 오늘 챙길 것 (푸시 알림 대체) ────────────────────────── */
.today-box {
  border: 1px solid var(--link);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.today-head { font-weight: 700; margin-bottom: 6px; }
.today-box ul { margin: 0; padding-left: 20px; }
.today-box li { margin: 3px 0; font-size: 0.9375rem; }

/* ── 소식 카드 ────────────────────────────────────────────── */
/* 좁은 화면에서는 한 열, 넓은 화면에서는 아래 미디어 쿼리가 여러 열로 깐다. */
.cards { display: grid; gap: 14px; }
.cards > .card { margin-bottom: 0; }

.card {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.card.yellow { background: var(--card-yellow); }
.card.blue   { background: var(--card-blue); }
.card.orange { background: var(--card-orange); }
.card.red    { background: var(--card-red); }
.card.gray   { background: var(--card-gray); }

.card-head { display: flex; align-items: center; gap: 8px; }
.card-head img { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.card-head .game { font-weight: 700; }
.card-head .when { margin-left: auto; color: var(--fg-dim); font-size: 0.875rem; white-space: nowrap; }

.card .title { font-weight: 600; margin-top: 8px; }
.card .subtitle { margin-top: 2px; }

.card figure { margin: 12px 0 0; }
/* 16:9 로 강제 크롭하지 않는다. 대부분의 이미지는 이미 가로형이라 카드가 알아서 균일해지고,
   세로 포스터(4299×6083 같은 것)는 강제로 자르면 높이의 절반 이상이 날아간다.
   가로는 카드 폭에, 세로는 높이 상한에 맞춰 줄이고 가운데 정렬한다. 잘리는 부분이 없다. */
.card img.shot {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-inline: auto;
  border-radius: 6px;
  background: var(--card-gray);
}
.card figcaption { color: var(--fg-dim); font-size: 0.8125rem; margin-top: 4px; }

.card ul { margin: 12px 0 0; padding-left: 20px; }
.card li { margin: 3px 0; }

.card .note { margin-top: 10px; font-size: 0.875rem; color: var(--fg-dim); }

.card .source {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(128, 128, 128, 0.22);
  font-size: 0.875rem;
  color: var(--fg-dim);
}

.empty { color: var(--fg-dim); }

/* 소식 없는 게임 카드 (허브 하단) */
.card.none { padding: 10px 16px; }
.card.none .card-head .game { font-weight: 700; }
.card.none .card-head .when { font-weight: 400; }

/* ── 지난 소식 월별 접기 ──────────────────────────────────── */
details { border-top: 1px solid var(--rule); }
details > summary {
  cursor: pointer;
  padding: 14px 2px;
  font-size: 1.05rem;
  font-weight: 600;
  list-style-position: inside;
}
details > summary::marker { color: var(--fg-dim); }
details[open] > summary { padding-bottom: 8px; }

/* ── 캘린더 ───────────────────────────────────────────────── */
.cal { margin-bottom: 32px; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 0.75rem;
}
.cal-dow { text-align: center; color: var(--fg-dim); padding: 4px 0; }
.cal-day {
  min-height: 44px;
  padding: 3px 4px;
  border-radius: 4px;
  background: var(--card-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cal-day.blank { background: transparent; }
.cal-day.today { outline: 2px solid var(--link); }
.cal-day[data-date] { cursor: pointer; }
.cal-day.sel { background: var(--link); color: #fff; }
.cal-day b { font-weight: 500; }
.cal-day .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.cal-day em { font-size: 0.625rem; font-style: normal; color: var(--fg-dim); }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.dot.yellow { background: #d9b64e; }
.dot.blue   { background: #5b9bc4; }
.dot.orange { background: #d78b4d; }
.dot.red    { background: #cd6b6b; }
.dot.gray   { background: #9b9b98; }

/* 그 달 항목 목록 — 제목이 잘리지 않는 자리 */
.cal-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.875rem; }
.cal-list li { display: flex; align-items: baseline; gap: 6px; margin: 5px 0; }
.cal-list .when { color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 타임라인 ─────────────────────────────────────────────── */
.tl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-bottom: 10px;
  color: inherit;
  text-decoration: none;
}
.tl-row:hover { text-decoration: none; }
.tl-row:hover .tl-label { text-decoration: underline; }
.tl-label { font-size: 0.8125rem; }
.tl-track { position: relative; height: 14px; border-radius: 7px; background: var(--card-gray); }
.tl-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  left: var(--left);
  width: var(--width);
  min-width: 6px;
}
.tl-fill.yellow { background: #d9b64e; }
.tl-fill.blue   { background: #5b9bc4; }
.tl-fill.orange { background: #d78b4d; }
.tl-fill.red    { background: #cd6b6b; }
.tl-fill.gray   { background: #9b9b98; }

footer { margin-top: 40px; color: var(--fg-dim); font-size: 0.8125rem; }

/* ── 넓은 화면 ────────────────────────────────────────────── */
/* 모바일 레이아웃을 그대로 확대해 두면 1440px 화면에서 절반이 빈다.
   폭이 생기면 카드를 여러 열로 깔고, 캘린더는 격자와 목록을 나란히 놓는다. */
@media (min-width: 1000px) {
  body { max-width: 1180px; padding: 28px 24px 72px; }

  .cards {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    align-items: start;
  }

  /* 게임마다 소식이 1~2건뿐이라 카드만 여러 열로 깔아서는 세로가 거의 안 줄어든다.
     게임 묶음 자체를 두 단으로 흘린다. */
  .board { columns: 2; column-gap: 26px; }
  .board > section.game {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 26px;
  }
  .board > section.game h2 { margin-top: 0; }

  .filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .filters .q { width: 240px; }
  .filter-status { margin-left: auto; }

  .cal {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    column-gap: 28px;
    align-items: start;
  }
  .cal > h2 { grid-column: 1 / -1; }
  .cal-list { margin-top: 0; }
  .cal-day { min-height: 56px; }

  .today-box { padding: 14px 18px; }
}