/* brieFAI — 소프트 헤일로(부드러운 그림자 입체) 화면.
   입체는 세 가지만: 카드(오목) · 패널·버튼(볼록) · 칩(평평). 글자는 12/15 · 14/18 · 16/20 · 20/25 네 단계이며 .hint는 13/17을 쓴다(줄높이 = ceil(크기×1.25)).
   일정은 카드(오목) → 스테이지(볼록·밝은 회색) → 항목(오목·--card)의 세 단계를 쓰고, 스테이지 안 화살표는 --card 색 볼록 버튼이다.
   색은 자유와혁신의 주색·보조색 표(2026-10-11 사용자가 나무위키 표를 확인해 알려 줌)를 그대로 쓴다.
     주색: RED #A50034 · NAVY #051C4C · BLACK #000000 · WHITE #fffff3
     보조색: DARK RED #700024 · CHARCOAL GRAY #374151 · BLUE #416CD9 · SOFT PINK #FDF2F4 · LIGHT GRAY #F9FAFB
   역할: 강조=RED · 글자=NAVY · 보조 글자=CHARCOAL GRAY · 바탕·패널·버튼=LIGHT GRAY · 칩=SOFT PINK 바탕에 DARK RED 글자 · 그래프 선=CSS의 series 역할 변수.
   WHITE #fffff3은 면에 쓰지 않는다: 회색 카드 위 패널로 칠해 보니 노란 크림색으로 도드라져서 LIGHT GRAY로 바꿨다(그림자의 흰 하이라이트만 흰색).
   표에 없는 값은 입체감을 내려고 표의 색을 섞은 것뿐이다: 카드 #e5e8ed = LIGHT GRAY에 NAVY 8%, 칩 테두리 #ebc2ce = SOFT PINK에 RED 20%, 그림자 = NAVY를 옅게.
   글자 대비(WCAG, 계산값): NAVY 본문은 카드 13.4:1·패널 15.7:1, CHARCOAL 보조 글자는 카드 8.4:1·패널 9.9:1, RED 글자는 카드 6.5:1·패널 7.6:1, 칩 글자는 11.2:1이다.
   BLUE는 패널·툴팁 위에서만 글자로 쓴다(4.60:1). 툴팁은 뒤의 선이 비치면 4.2:1까지 떨어지므로 불투명하게 칠한다. 카드 바탕 위에서는 3.9:1이라 글자로 쓰지 않는다. 그래프 선·점·범례·툴팁은 같은 series 변수를 참조한다. */
/* 색은 여기서 정의하고 각 요소는 역할 변수를 참조한다. */
:root {
  color-scheme: light;
  --red: #A50034;
  --navy: #051C4C;
  --black: #000000;
  --white: #fffff3;
  --dark-red: #700024;
  --charcoal: #374151;
  --blue: #416CD9;
  --soft-pink: #FDF2F4;
  --light-gray: #F9FAFB;
  --highlight-base: #ffffff;
  --bg: var(--light-gray);
  --card: #e5e8ed;
  --panel: var(--light-gray);
  --button: var(--light-gray);
  --chip: var(--soft-pink);
  --chip-line: #ebc2ce;
  --chip-ink: var(--dark-red);
  --ink: var(--navy);
  --ink-soft: var(--charcoal);
  --line: color-mix(in srgb, var(--navy) 10%, transparent);
  --accent: var(--red);
  --shadow-dark: 5, 28, 76;
  --shadow-panel: 5, 28, 76;
  --surface-highlight-anchor: var(--highlight-base);
  --shadow-pressed-subtle: rgba(var(--shadow-dark), .2);
  --shadow-inset-wide: rgba(var(--shadow-dark), .30);
  --shadow-inset-edge: rgba(var(--shadow-dark), .18);
  --shadow-inset-strong: rgba(var(--shadow-dark), .45);
  --shadow-inset-short: rgba(var(--shadow-dark), .25);
  --shadow-label: rgba(var(--shadow-dark), .4);
  --shadow-raised: rgba(var(--shadow-panel), .10);
  --shadow-hover: rgba(var(--shadow-panel), .22);
  --shadow-tooltip: rgba(var(--shadow-panel), .16);
  --shadow-hover-strong: rgba(var(--shadow-panel), .31);
  --highlight-pressed: color-mix(in srgb, var(--highlight-base) 90%, transparent);
  --highlight-panel: color-mix(in srgb, var(--highlight-base) 62%, transparent);
  --highlight-button: color-mix(in srgb, var(--highlight-base) 58%, transparent);
  --highlight-hover: color-mix(in srgb, var(--highlight-base) 67%, transparent);
  --highlight-label: color-mix(in srgb, var(--highlight-base) 85%, transparent);
  --chart-grid: color-mix(in srgb, var(--navy) 8%, transparent);
  --chart-cursor: color-mix(in srgb, var(--navy) 30%, transparent);
  --series-0: var(--red);
  --series-1: var(--blue);
  --series-2: var(--navy);
  --series-3: var(--charcoal);
  --series-4: var(--black);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23051C4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --select-chevron-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A50034' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --logo-ink: var(--white);
  --logo-filter: none;
  --browser-chrome: var(--bg);
  --radius-card: 24px;
  --radius-panel: 22px;
  --radius-button: 12px;
  --radius-chip: 7px;
}
/* 공식 BI의 BLACK과 CHARCOAL 혼합으로 면을 구분하고 새 색상 계열은 더하지 않는다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--black);
  --card: color-mix(in srgb, var(--charcoal) 45%, var(--black));
  --panel: color-mix(in srgb, var(--charcoal) 72%, var(--black));
  --button: var(--charcoal);
  --chip: var(--dark-red);
  --chip-line: color-mix(in srgb, var(--red) 60%, var(--soft-pink));
  --chip-ink: var(--soft-pink);
  --ink: var(--white);
  --ink-soft: color-mix(in srgb, var(--light-gray) 78%, var(--charcoal));
  --line: color-mix(in srgb, var(--light-gray) 20%, var(--charcoal));
  --accent: var(--soft-pink);
  --shadow-dark: 0, 0, 0;
  --shadow-panel: 0, 0, 0;
  --surface-highlight-anchor: color-mix(in srgb, var(--card) 85%, var(--light-gray));
  --shadow-inset-wide: rgba(var(--shadow-dark), .5);
  --shadow-inset-edge: rgba(var(--shadow-dark), .28);
  --shadow-inset-strong: rgba(var(--shadow-dark), .5);
  --shadow-raised: rgba(var(--shadow-panel), .3);
  --shadow-hover: rgba(var(--shadow-panel), .45);
  --shadow-tooltip: rgba(var(--shadow-panel), .45);
  --shadow-hover-strong: rgba(var(--shadow-panel), .45);
  --highlight-pressed: color-mix(in srgb, var(--light-gray) 6%, transparent);
  --highlight-panel: color-mix(in srgb, var(--light-gray) 7%, transparent);
  --highlight-button: color-mix(in srgb, var(--light-gray) 6.5%, transparent);
  --highlight-hover: color-mix(in srgb, var(--light-gray) 8%, transparent);
  --highlight-label: color-mix(in srgb, var(--light-gray) 10%, transparent);
  --chart-grid: color-mix(in srgb, var(--light-gray) 10%, transparent);
  --chart-cursor: var(--ink-soft);
  --series-0: color-mix(in srgb, var(--red) 35%, var(--soft-pink));
  --series-1: color-mix(in srgb, var(--blue) 40%, var(--light-gray));
  --series-2: var(--white);
  --series-3: color-mix(in srgb, var(--light-gray) 60%, var(--charcoal));
  --series-4: var(--soft-pink);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23fffff3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --select-chevron-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23FDF2F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --logo-filter: url(#brand-white);
}


/* 스크롤 조작은 유지하고 모든 스크롤 영역의 막대만 감춘다. */
* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
/* .card 같은 클래스의 display가 hidden 속성(UA 기본 display:none)을 이기므로 hidden은 항상 숨김으로 고정한다. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 20px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 하단 padding을 72px에서 줄인 만큼은 맨 위로 버튼(과 grid gap 20px)이 그 자리를 차지해 전체 여백감은 비슷하게 유지된다. */
.page { max-width: 880px; margin: 0 auto; padding: 32px 16px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 0 8px; }
/* 공식 심볼과 brieFAI를 같은 행에 두고 원본 색·비율을 유지한다. */
.party-logo { display: block; flex: none; width: 24px; height: 24px; }

h1 { margin: 4px 0 0; font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -.01em; }
.top > div:first-child { width: 100%; }
.brand-heading { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 28px; line-height: 36px; }
.brand-trigger { display: block; flex: none; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.brand-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.brand-word { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* 글자가 나타나는 구간에만 클립을 쓴다. 버튼·카드의 그림자는 자르지 않는다. */
.brand-tail { display: inline-block; flex: none; width: 0; overflow: hidden; vertical-align: bottom; font-weight: 500; transition: width .5s cubic-bezier(.22, 1, .36, 1), margin-inline-end .5s cubic-bezier(.22, 1, .36, 1); }
.brand-tail:not(:last-child) { margin-inline-end: .08em; }
.brand-tail > span { display: block; width: max-content; white-space: pre; opacity: 0; transform: translateX(-10px); transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); }
.brand-heading[data-expanded="true"] .brand-tail { width: var(--tail-width, 12em); margin-inline-end: 0; }
.brand-heading[data-expanded="true"] .brand-tail > span { opacity: 1; transform: translateX(0); }
@media (max-width: 759px) {
  .brand-heading { font-size: 16px; line-height: 20px; }
}
.lead { margin: 2px 0 0; font-size: 16px; line-height: 20px; color: var(--ink-soft); }
.updated { margin: 0; font-size: 12px; line-height: 15px; color: var(--ink-soft); }
.content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.refresh { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; }
.refresh:active { box-shadow: inset 2px 2px 6px var(--shadow-pressed-subtle); }
.refresh:disabled { cursor: wait; opacity: .65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.state-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 260px; padding: 24px 12px; }
.state-body p { margin: 0; max-width: 36ch; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
#state-icon { display: flex; flex: none; line-height: 0; }
.state-icon { display: block; color: var(--ink-soft); }
.state-icon-back { fill: var(--chip); }
.state-icon-front { fill: var(--card); }
.state-icon-alert { color: var(--accent); }
.loading-dots { display: flex; align-items: center; gap: 6px; height: 20px; }
.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: loading-bounce 1.4s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes loading-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .loading-dots span { animation: none; }
  .brand-trigger, .brand-tail, .brand-tail > span { transition: none !important; }
}

/* 카드 · 오목 */
.card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow:
    inset 5px 5px 18px var(--shadow-inset-wide),
    inset 1px 1px 4px var(--shadow-inset-edge),
    inset -4px -4px 10px var(--highlight-pressed);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.card-head { display: flex; align-items: center; gap: 8px 12px; padding: 0; }
.card-head > h2 { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head > .meta { line-height: 24px; flex: 1 1 140px; min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* 일자별 요약의 갱신 시각이 비면 빈 칸이 자리를 차지하지 않도록 숨긴다. */
#briefs-meta:empty { display: none; }
.card-head > .toggle { margin-inline-start: auto; }
/* 오늘 브리핑 옆 설명은 한 줄로 두고 넘치면 말줄임한다(전체 글은 title로 확인). */
#home-brief-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; }
.meta { font-size: 12px; line-height: 15px; color: var(--ink-soft); }

/* 패널 · 볼록 */
.panel {
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding: 16px;
  box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel);
}

/* 버튼 · 볼록, 눌림 · 오목 */
.toggle { display: flex; gap: 8px; }
.btn, .info-btn {
  font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink);
  background: var(--button); border: 0; border-radius: var(--radius-button); padding: 8px 14px; cursor: pointer;
  box-shadow: 1px 2px 6px var(--shadow-raised), -2px -2px 5px var(--highlight-button);
}
.btn:hover, .info-btn:hover { box-shadow: 5px 8px 14px var(--shadow-hover), -3px -3px 8px var(--highlight-hover); }
/* 선택·눌림은 트렌디브 Tab처럼 음각 그림자와 RED 글자로 나타낸다(밑줄은 쓰지 않는다). 그림자가 안 그려지는 환경에서도 글자 색이 바뀌고, 필터는 "선택: …" 문구로도 상태를 전한다. */
.btn[aria-pressed="true"], .btn[aria-current="page"], .calendar-label[data-selected="true"], .info-btn:active, .info-btn[aria-expanded="true"] {
  background-color: var(--button); color: var(--accent);
  box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset 1px 1px 2px var(--shadow-inset-edge), inset -2px -2px 5px var(--highlight-pressed);
}
a.btn { display: inline-block; text-decoration: none; }
.btn:focus-visible, .info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 언급량 */
.summary { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.summary li { display: grid; gap: 2px; }
.summary .name { font-size: 14px; line-height: 18px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.summary .value { font-size: 20px; line-height: 25px; font-weight: 700; }
.summary .delta { font-size: 12px; line-height: 15px; color: var(--ink-soft); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

.chart-wrap { position: relative; }
.volume-chart { width: 100%; height: 240px; display: block; touch-action: pan-y; }
.volume-chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.volume-chart .axis { fill: var(--ink-soft); font-size: 12px; }
.volume-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.volume-chart .partial { stroke-dasharray: 4 4; }
.volume-chart .cursor { stroke: var(--chart-cursor); stroke-width: 1; }
.tip {
  position: absolute; top: 4px; pointer-events: none; background: var(--panel); border-radius: 12px;
  padding: 8px 10px; font-size: 12px; line-height: 15px; box-shadow: 2px 4px 10px var(--shadow-tooltip);
  /* 좁은 차트에서도 긴 날짜와 단어가 툴팁 폭을 밀어내지 않게 한다. */
  white-space: normal; overflow-wrap: anywhere; max-width: min(280px, 100%); box-sizing: border-box;
}
.tip strong { display: block; margin-bottom: 2px; font-size: 12px; }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; line-height: 18px; }
.legend li { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
/* 이름과 버튼은 같은 flex 줄을 유지하고 긴 이름·표기만 좁은 화면에서 줄바꿈한다. */
.legend-name { min-width: 0; margin-block: 4px; overflow-wrap: anywhere; }
.legend .info-btn { margin: 0; }
.legend .info-popup { text-align: left; overflow-wrap: anywhere; }
.hint { margin: 8px 0 0; color: var(--ink-soft); }
.hint, .brief-section .hint { font-size: 13px; line-height: 17px; }

/* 이슈 */
.issues { display: grid; gap: 12px; }
.slot h3 { margin: 0 0 10px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ink-soft); }
.slot .group + .group { margin-top: 12px; }
.chip {
  display: inline-block; font-size: 12px; line-height: 15px; font-weight: 600; background: var(--chip); color: var(--chip-ink);
  border: 1px solid var(--chip-line); border-radius: var(--radius-chip); padding: 2px 8px; margin: 0;
}
/* 미확인 일정 칩은 확정 일정(.chip)과 또렷이 구분되게 속을 비우고 점선·흐린 글자색만 쓴다. 역할 변수만 참조해 다크 모드도 함께 바뀐다. */
.chip-unofficial { background: transparent; border-style: dashed; border-color: var(--line); color: var(--ink-soft); }
.terms { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.terms li { font-size: 16px; line-height: 20px; padding-left: 14px; position: relative; }
.terms li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.more { justify-self: center; }
/* 접힌 목록 아래: 카드 배경색으로 서서히 덮는 그라데이션 위에 버튼을 가운데 둔다. 펼치면 그라데이션 없이 버튼만 남는다. */
.fold-bar { display: flex; justify-content: center; position: relative; padding-top: 8px; }
/* 접힌 목록의 마지막 한 건은 윗부분만 보이게 잘라 '아래에 더 있다'는 것만 알린다(그라데이션이 그 위를 덮는다). */
.news[data-collapsed="true"] > li:nth-child(7) { max-height: 24px; overflow: hidden; }
.fold-bar > .btn { pointer-events: auto; }
.fold-bar[data-collapsed="true"] { pointer-events: none; margin-top: -56px; padding-top: 32px; background: linear-gradient(to bottom, transparent, var(--card) 70%); }

/* 기사 */
.news { list-style: none; margin: 0; display: grid; gap: 12px; }
.news a { color: var(--ink); text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 600; }
.news a:hover { text-decoration: underline; }
.news .meta { display: block; margin-top: 2px; }

/* 화면 전환 */
.tabs { display: flex; gap: 8px; padding: 0 8px; }

/* 일자별 요약 */
.briefs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#home-brief-body { overflow-wrap: anywhere; }
.brief-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.brief-row { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.brief-row > .meta { justify-self: end; margin-top: 8px; text-align: right; }
#briefs-meta { flex-basis: 100%; margin-top: 8px; text-align: right; }
#briefs-meta:empty { display: none; }
.brief-row:hover { box-shadow: 5px 8px 14px var(--shadow-hover), -3px -3px 8px var(--highlight-hover); }
.brief-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-row .when { font-size: 16px; line-height: 20px; font-weight: 700; }
.brief-row .peek { font-size: 14px; line-height: 18px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brief-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.brief-day { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; }
.brief-section h3 { margin: 0 0 12px; font-size: 16px; line-height: 20px; font-weight: 700; padding-left: 0; }
.brief-section p { margin: 0 0 10px; font-size: 16px; line-height: 24px; }
/* 이슈 제목이 섹션 제목에 붙지 않도록 추가 여백을 둔다. */
.brief-section h3 + p.brief-issue-title { margin-top: 8px; }
.brief-section p:last-child, .brief-section .table-wrap:last-child { margin-bottom: 0; }
.brief-section ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }

/* 제목과 본문은 한 묶음으로 두고 다음 제목이 시작될 때만 구분한다. */
#briefs-body .brief-section > .brief-issue-title ~ .brief-issue-title { position: relative; margin-top: 16px; padding-top: 18px; }
#briefs-body .brief-section > .brief-issue-title ~ .brief-issue-title::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--card); box-shadow: 1px 1px 2px var(--shadow-raised), -1px -1px 2px var(--highlight-panel); }

.brief-section li { font-size: 16px; line-height: 24px; padding-left: 14px; position: relative; }
.brief-section li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.brief-section .home-issues { margin: 0; gap: 0; }
.home-issues > li { min-width: 0; padding-left: 0; }
.home-issues > li::before { content: none; }
.home-issue { --issue-motion: 320ms cubic-bezier(.4, 0, .2, 1); min-width: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.home-issues > li:first-child > .home-issue { padding-top: 0; }
.home-issue > summary { position: relative; list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--radius-button); background: var(--panel); box-shadow: inset 0 0 0 var(--shadow-inset-wide), inset 0 0 0 var(--highlight-pressed); transition: box-shadow var(--issue-motion), background-color var(--issue-motion), border-radius var(--issue-motion); }
.home-issue > summary::-webkit-details-marker { display: none; }
.home-issue > summary::marker { content: ""; }
/* 전체 제목이 클릭 영역이며 원형 면은 펼침 상태만 나타낸다. */
.home-issue > summary::before { content: ""; grid-area: 1 / 2; align-self: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); opacity: 0; box-shadow: 0 0 0 var(--shadow-raised), 0 0 0 var(--highlight-panel); transition: opacity var(--issue-motion), box-shadow var(--issue-motion); pointer-events: none; }
.home-issue > summary::after { content: ""; grid-area: 1 / 2; align-self: center; justify-self: center; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--issue-motion); pointer-events: none; }
.home-issue[open] > summary::before { opacity: 1; box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); }
.home-issue[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.home-issue > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.home-issue > summary > strong { display: block; grid-area: 1 / 1; align-self: center; padding: 4px 0; }
.home-issue > summary > .issue-peek { grid-area: 2 / 1; }
.issue-peek { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.issue-peek > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 0; overflow: hidden; }
.home-issue[open] .issue-peek { display: none; }
.home-issues > li:last-child > .home-issue { border-bottom: 0; }
.home-issue[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--card); box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset -2px -2px 5px var(--highlight-pressed); }
.issue-reveal > ul { margin: 0; padding: 16px; gap: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); background: var(--panel); box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); }
/* 관련 영상은 보조 정보 크기로 표시하고 테마 역할색을 공유한다. 기존 이슈 목록의 점은 물려받지 않는다. */
.related-videos { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--ink-soft); overflow-wrap: anywhere; }
.related-videos ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.related-videos li { padding: 0; font-size: inherit; line-height: inherit; }
.related-videos li::before { content: none; }
/* 받아쓰기 기반 요약은 링크 아래 보조 글로 표시하고 다크 모드 역할색을 함께 쓴다. */
.related-videos .video-summary { color: var(--ink-soft); font-size: 13px; }
/* 펼친 이슈 안에서는 위 목록 카드와 같은 좌우 여백(16px)에 맞춰 카드 가장자리에 붙지 않게 한다. */
.issue-reveal > .related-videos { margin: 0; padding: 12px 16px 4px; }
/* 기사 목록과 같은 글자색 링크로 맞춰 다크 모드에서 브라우저 기본 파랑·보라가 나오지 않게 한다. */
.related-videos a { color: var(--ink); text-decoration: none; font-weight: 600; }
.related-videos a:hover { text-decoration: underline; }
/* 미리보기와 본문이 같은 속도로 높이를 교환해야 클릭 순간 40px가 튀지 않는다. */
@supports selector(::details-content) {
  .issue-peek { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--issue-motion), opacity var(--issue-motion); }
  .home-issue[open] .issue-peek { display: grid; grid-template-rows: 0fr; opacity: 0; }
  .home-issue::details-content { display: grid; grid-template-rows: 0fr; content-visibility: hidden; transition: grid-template-rows var(--issue-motion), content-visibility 320ms allow-discrete; }
  .home-issue[open]::details-content { grid-template-rows: 1fr; content-visibility: visible; }
  .issue-reveal { min-height: 0; overflow: clip; overflow-clip-margin: 12px; opacity: 0; transition: opacity var(--issue-motion); }
  .home-issue[open] > .issue-reveal { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-issue > summary, .home-issue > summary::before, .home-issue > summary::after,
  .home-issue .issue-peek, .home-issue .issue-reveal, .home-issue::details-content { transition: none; }
}
.table-wrap { overflow-x: auto; margin: 0 0 10px; }
.brief-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 18px; }
.brief-table th, .brief-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
.brief-table thead th { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.brief-table th:first-child, .brief-table td:first-child { text-align: left; min-width: 150px; }
.brief-table td:not(:first-child) { white-space: nowrap; }

.foot { padding: 0 8px; font-size: 12px; line-height: 15px; color: var(--ink-soft); }
.foot p { margin: 0 0 4px; }
.empty { margin: 0; font-size: 14px; line-height: 18px; color: var(--ink-soft); }

@media (max-width: 520px) {
  .page { padding: 20px 12px 24px; gap: 16px; }
  .content { gap: 16px; }
  .panel { padding: 14px; }
  .volume-chart { height: 200px; }
}

h2[tabindex="-1"]:focus { outline: none; }

/* 요약 아래의 기사 목록은 기존 기사 링크 스타일을 공유한다. */
.brief-news { padding: 0; }
.brief-section .brief-news li { padding-left: 0; }
.brief-section .brief-news li::before { content: none; }

/* 화면 탭도 제목과 같은 패널 면을 쓴다. */
.tabs .btn { --button: var(--panel); }
/* 선택 상태의 음각은 공통 기본 양각과 구분한다. */
.calendar-controls { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tabs .btn,
.calendar-controls > .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 44px; padding: 12px 16px;
  border-radius: var(--radius-button); font-size: 14px; line-height: 18px; font-weight: 600;
  color: var(--ink); background-color: var(--button); box-shadow: none; text-shadow: none; text-decoration: none;
}
.tabs .btn:not(:disabled):not([aria-disabled="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not(:active):hover,
.calendar-controls > .btn:not(:disabled):not([aria-pressed="true"]):not([data-selected="true"]):not(:active):hover {
  background-color: var(--button);
  box-shadow: 5px 8px 14px var(--shadow-hover-strong), -3px -3px 8px var(--highlight-hover);
}
.tabs .btn[aria-current="page"],
.tabs .btn[aria-pressed="true"],
.tabs .btn:not(:disabled):not([aria-disabled="true"]):active,
.calendar-controls > .btn[aria-pressed="true"],
.calendar-controls > .calendar-label[data-selected="true"],
.calendar-controls > .btn:not(:disabled):active {
  color: var(--accent); background-color: var(--button); text-decoration: none;
  box-shadow: inset 4px 4px 9px var(--shadow-inset-strong), inset 1px 1px 2px var(--shadow-inset-short), inset -2px -2px 5px var(--highlight-pressed);
  text-shadow: -.5px -.5px .5px var(--highlight-label), .5px 1px .75px var(--shadow-label);
}
.tabs .btn:focus-visible,
.calendar-controls > .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tabs .btn:disabled,
.tabs .btn[aria-disabled="true"],
.calendar-controls > .btn:disabled { box-shadow: none; text-shadow: none; color: var(--ink); opacity: .5; cursor: default; }
/* 네이티브 선택 조작은 유지하고 화살표가 글자를 가리지 않도록 여백을 둔다. */
.calendar-controls > .calendar-label {
  max-width: 100%; width: auto; flex: 0 1 auto; field-sizing: content;
  appearance: none; -webkit-appearance: none; padding-right: 32px; text-align: center; text-align-last: center;
  background-image: var(--select-chevron);
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.calendar-controls > .calendar-label[data-selected="true"],
.calendar-controls > .calendar-label:not(:disabled):active { background-image: var(--select-chevron-selected); }
.calendar-label option { background: var(--button); color: var(--ink); text-shadow: none; }
/* 스크롤은 내부 스테이지에서 잘라 제목 팝업은 카드 밖에서도 보이게 한다. */
#calendar-card { overflow: visible; }
/* 스테이지 안의 버튼만 --card 색 볼록 면으로 한 단계 깊게 보이게 하고 바깥 컨트롤에는 영향을 주지 않는다. */
.calendar-stage {
  /* 부모의 실제 표면과 SVG 앞면이 같은 값을 써야 뒤 카드 윤곽을 가릴 수 있다. */
  --calendar-empty-bg: var(--panel);
  background-color: var(--calendar-empty-bg);
  --local-bg: var(--card);
  --local-dark: color-mix(in srgb, var(--local-bg) 25%, rgb(var(--shadow-panel)));
  --local-inset: color-mix(in srgb, var(--local-bg) 25%, rgb(var(--shadow-dark)));
  --local-light: color-mix(in srgb, var(--local-bg) 20%, var(--surface-highlight-anchor));
  --local-pressed-bg: color-mix(in srgb, var(--local-bg) 92%, var(--highlight-base));
  min-width: 0;
  overflow: hidden;
}
.calendar-stage .btn {
  background: var(--local-bg);
  box-shadow: 1px 2px 6px color-mix(in srgb, var(--local-dark) 12%, transparent), -2px -2px 5px color-mix(in srgb, var(--local-light) 58%, transparent);
}
.calendar-stage .btn:not(:disabled):hover {
  box-shadow: 5px 8px 14px color-mix(in srgb, var(--local-dark) 31%, transparent), -3px -3px 8px color-mix(in srgb, var(--local-light) 67%, transparent);
}
.calendar-stage .btn:not(:disabled):active,
.calendar-stage .btn:not(:disabled)[aria-pressed="true"],
.calendar-stage .btn:not(:disabled)[aria-current="page"] {
  background: var(--local-pressed-bg);
  box-shadow: inset 4px 4px 9px color-mix(in srgb, var(--local-inset) 45%, transparent), inset 1px 1px 2px color-mix(in srgb, var(--local-inset) 25%, transparent), inset -2px -2px 5px color-mix(in srgb, var(--local-light) 90%, transparent);
}
.calendar-stage .btn:disabled { background: var(--local-bg); box-shadow: none; }
/* 이동 조작을 한곳에서 찾도록 버튼을 스크롤 아래 가운데에 모은다. */
.calendar-navigation { display: flex; justify-content: center; gap: 12px; }
.calendar-arrow { min-width: 44px; min-height: 44px; margin-top: 12px; padding: 0; border-radius: 50%; font-size: 24px; }
.calendar-arrow:disabled { opacity: .4; cursor: default; }
.calendar-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 스테이지 안쪽 여백(16px)만큼 음수 마진으로 넓혀 카드가 여백에서 잘리지 않고 흰 면 가장자리까지 스크롤되게 하고, 목록 패딩·scroll-padding으로 첫 카드 정렬을 맞춘다. */
.calendar-scroll { overflow-x: auto; min-width: 0; margin-inline: -16px; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.calendar-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 가로 스크롤 안의 flex 목록은 오른쪽 padding이 스크롤 범위에 들어가지 않아 마지막 카드가 끝에 붙는다.
   목록 너비를 내용에 맞춰 padding까지 목록 상자에 포함시킨다. */
.calendar-list { list-style: none; padding: 16px; margin: 0; display: flex; gap: 12px; width: max-content; min-width: 100%; }
/* 스테이지 overflow에 잘리지 않도록 바깥 카드에 가림막을 두고 상자 바깥 띠만 덮는다.
   바깥 카드의 오목 그림자와 단색 사각형이 맞붙지 않게 가로·세로 끝을 모두 흐린다. */
#calendar-card::before, #calendar-card::after {
  content: ""; display: none; position: absolute; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor 8px, currentColor calc(100% - 8px), transparent);
  mask-image: linear-gradient(to bottom, transparent, currentColor 8px, currentColor calc(100% - 8px), transparent);
}
#calendar-card.calendar-mask-left::before {
  display: block; left: calc(var(--calendar-left-edge) - 10px); width: 10px;
  top: var(--calendar-left-top); height: var(--calendar-left-height);
  background: linear-gradient(to right, transparent, var(--card) 85%);
  opacity: var(--calendar-left-opacity, 1);
}
#calendar-card.calendar-mask-right::after {
  display: block; left: var(--calendar-right-edge); width: 14px;
  top: var(--calendar-right-top); height: var(--calendar-right-height);
  background: linear-gradient(to left, transparent, var(--card) 85%);
  opacity: var(--calendar-right-opacity, 1);
}
.calendar-event { position: relative; isolation: isolate; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 150px; max-width: 260px; overflow-wrap: anywhere; overflow: hidden;
  border-top-left-radius: var(--clip-left-radius, var(--radius-panel)); border-bottom-left-radius: var(--clip-left-radius, var(--radius-panel));
  border-top-right-radius: var(--clip-right-radius, var(--radius-panel)); border-bottom-right-radius: var(--clip-right-radius, var(--radius-panel)); }
/* 밝은 스테이지 위의 일정 항목은 공통 카드와 같은 오목 면이라 스테이지보다 한 단계 깊다. */
.calendar-stage .calendar-event { background: var(--card); box-shadow: inset 5px 5px 18px var(--shadow-inset-wide), inset 1px 1px 4px var(--shadow-inset-edge), inset -4px -4px 10px var(--highlight-pressed); }
/* 잘린 자리의 위쪽 오목 그림자만 부드럽게 지우고 글자는 가림막보다 위에 둔다. */
/* 위쪽 오목 그림자와 아래쪽 하이라이트를 한 가림막으로 함께 가린다: 세로 마스크로 위 20px·아래 14px 띠만 남기고 가운데는 비운다. */
.calendar-event.clip-left::before, .calendar-event.clip-right::after {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, currentColor, currentColor 5px, transparent 20px, transparent calc(100% - 14px), currentColor calc(100% - 4px), currentColor);
  mask-image: linear-gradient(to bottom, currentColor, currentColor 5px, transparent 20px, transparent calc(100% - 14px), currentColor calc(100% - 4px), currentColor);
}
.calendar-event.clip-left::before {
  left: var(--clip-left-offset); width: min(56px, calc(100% - var(--clip-left-offset)));
  background: linear-gradient(to right, var(--card), transparent);
  opacity: var(--clip-left-opacity, 1);
}
.calendar-event.clip-right::after {
  right: var(--clip-right-offset); width: min(56px, calc(100% - var(--clip-right-offset)));
  background: linear-gradient(to left, var(--card), transparent);
  opacity: var(--clip-right-opacity, 1);
}
.calendar-event > * { position: relative; z-index: 1; }
.calendar-event > .meta, .calendar-event > strong { min-width: 0; max-width: 100%; }
/* 카드 높이가 같아지므로 라벨 chip은 항상 맨 아래에 붙인다(미확인 칩도 chip 클래스를 함께 쓰므로 그대로 적용된다). */
.calendar-event .calendar-foot { margin: auto 0 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.calendar-event .chip { margin: 0; }
.calendar-source { color: var(--ink-soft); text-decoration: underline; }
.calendar-source:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 원본 실루엣에 공식 화이트 버전만 적용해 로고 색과 형태를 보존한다. */
.party-logo image { filter: var(--logo-filter); }
.brand-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.brand-tools .lead { min-width: 0; margin: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; min-height: 44px; padding: 8px 10px; }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }

/* 충분한 내부 여백과 SVG overflow로 떠오르는 카드의 가장자리를 보존한다. */
.calendar-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0; color: var(--ink-soft); text-align: center; }
.calendar-empty p { margin: 8px 0 0; font-size: 14px; line-height: 18px; }
.calendar-empty-icon { flex-shrink: 0; overflow: visible; }
.calendar-empty-back { fill: var(--ink-soft); fill-opacity: .16; stroke: var(--ink-soft); stroke-opacity: .55; transform-origin: 64px 60px; transform: rotate(-8deg); animation: calendar-float-back 3s ease-in-out infinite; }
.calendar-empty-front { transform-origin: 56px 64px; animation: calendar-float-front 3s ease-in-out infinite .3s; }
.calendar-empty-front rect { fill: var(--calendar-empty-bg); stroke: var(--ink-soft); }
@keyframes calendar-float-back {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-3px, -8px) rotate(-10deg); }
}
@keyframes calendar-float-front {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(0, -10px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-empty-back, .calendar-empty-front { animation: none; }
}


#calendar-card, #volume-card { position: relative; }
.info-head { position: relative; }
.card-title { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: var(--panel); box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); overflow-wrap: anywhere; }
/* 카드 제목 면의 기본 높이를 44px로 맞춘다(세로 패딩 8px×2 + 제목 줄 높이 28px). */
.card-title, .card-title h2 { line-height: 28px; }
.info-title { gap: 0; }
.info-title h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 13px; border-radius: 50%; margin: -8px -8px -8px -7px; box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel), inset 0 0 0 var(--shadow-inset-wide), inset 0 0 0 var(--highlight-pressed); }
.info-btn.info-btn--compact { width: 24px; height: 24px; padding: 4px; margin: 0; }
/* 제목 안 인포는 아이콘만 보이게 배경·그림자를 모든 상태에서 없앤다(키보드 포커스 윤곽선은 유지). */
.info-title .info-btn, .info-title .info-btn:hover, .info-title .info-btn:active, .info-title .info-btn[aria-expanded="true"] { background: transparent; box-shadow: none; }
.info-popup {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1;
  width: 280px; max-width: min(280px, calc(100vw - 32px)); padding: 8px;
  /* 긴 안내도 좁은 화면에서 내부 스크롤로 끝까지 읽을 수 있게 한다. */
  max-height: 80vh; overflow-y: auto;
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 2px 4px 10px color-mix(in srgb, rgb(var(--shadow-panel)) 20%, transparent);
  animation: info-appear 120ms ease-out;
}
/* 버튼의 기존 링과 같은 역할색으로 열린 설명의 키보드 초점을 표시한다. */
.info-popup:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-surface { background: var(--panel); color: var(--ink-soft); border-radius: var(--radius-button); padding: 12px; font-size: 14px; line-height: 20px; }
.info-surface p { margin: 0; }
.info-surface p + p { margin-top: 8px; }
.info-surface.keyword-guide { display: grid; gap: 12px; background: transparent; padding: 12px 8px; color: var(--ink); }
/* 뒤쪽 범례·기사 글자가 키워드와 겹쳐 읽히지 않도록 글래스 면의 농도를 높인다. */
.info-popup:has(.keyword-guide) { background: color-mix(in srgb, var(--panel) 94%, transparent); }
.keyword-guide-title { margin-block: 4px; font-size: 16px; line-height: 20px; }
.keyword-section { display: grid; gap: 8px; }
.keyword-section > strong { margin-block: 2px; font-size: 14px; line-height: 18px; }
/* 부모 grid 행이 min-height로 늘어나도 칩 줄이 같이 늘어나지 않도록 위쪽에 붙이고 칩 높이는 내용대로 둔다. */
.keyword-list { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 6px; }
.keyword-list .chip { background: var(--panel); margin: 0; }
.keyword-list[data-concealed="true"] { filter: blur(4px); user-select: none; pointer-events: none; }
.keyword-private { position: relative; display: grid; gap: 8px; align-content: start; min-height: 44px; }
.keyword-reveal { justify-self: start; font: inherit; color: var(--accent); background: var(--panel); border: 0; border-radius: var(--radius-button); padding: 6px 10px; cursor: pointer; }
.keyword-private[data-revealed="false"] > .keyword-reveal { position: absolute; inset: 0; width: 100%; background: transparent; text-shadow: 0 1px 4px var(--panel); }
.keyword-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.keyword-guide .keyword-note { margin: 4px 0; font-size: 12px; line-height: 15px; color: var(--ink-soft); }
@keyframes info-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .info-popup { animation: none; } }
/* 바깥·안쪽 그림자의 순서를 같게 유지해야 눌림 깊이가 부드럽게 보간된다. */
.tabs .btn, .theme-toggle { --button: var(--panel); border-radius: 12px; box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel), inset 0 0 0 var(--shadow-inset-wide), inset 0 0 0 var(--highlight-pressed); }
.tabs .btn:hover { box-shadow: 5px 8px 14px var(--shadow-hover), -3px -3px 8px var(--highlight-hover), inset 0 0 0 var(--shadow-inset-wide), inset 0 0 0 var(--highlight-pressed); }
.tabs .btn[aria-current="page"], .tabs .btn:active { box-shadow: 0 0 0 var(--shadow-raised), 0 0 0 var(--highlight-button), inset 4px 4px 9px var(--shadow-inset-wide), inset -2px -2px 5px var(--highlight-pressed); }
.tabs .btn, .calendar-controls .btn, .calendar-label { transition: background-color 260ms ease, color 260ms ease, box-shadow 260ms ease, text-shadow 260ms ease; }

.theme-toggle { transition: background-color 260ms ease, color 260ms ease, box-shadow 260ms ease; }
.theme-toggle:active { box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset -2px -2px 5px var(--highlight-pressed); }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .tabs .btn, .calendar-controls .btn, .calendar-label { transition: none; } }

/* 제목과 모든 일반 버튼의 기본 높이를 같은 패널 그림자로 맞춘다.
   상태 조건은 :where()로 감싸 우선순위를 .btn 하나로 낮춘다 — 그래야 앞에 있는 .btn:hover·.tabs .btn:hover와
   일정 스테이지의 전용 버튼 색(.calendar-stage .btn)이 이 기본값에 덮이지 않는다. */
.card-title,
.btn:where(:not(:disabled):not([aria-disabled="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([data-selected="true"]):not(:active)) {
  --button: var(--panel);
  background-color: var(--panel);
  box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel), inset 0 0 0 var(--shadow-inset-wide), inset 0 0 0 var(--highlight-pressed);
}


/* 모달은 카드의 위치·클리핑과 무관하게 화면 가운데 놓고, 설명 팝업과 같은 이중 면을 쓴다. */
.picker-trigger, .picker-control {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-button);
  font: inherit; font-size: 22px; color: var(--ink); background: var(--button); cursor: pointer;
}
/* 캘린더 아이콘 버튼도 공통 버튼과 같은 패널 면·패널 양각을 쓰고, 호버는 떠오름·누름은 음각으로 맞춘다. */
.picker-trigger { background: var(--panel); box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); transition: box-shadow 260ms ease; }
.picker-trigger:hover { box-shadow: 5px 8px 14px var(--shadow-hover), -3px -3px 8px var(--highlight-hover); }
.picker-trigger:active { box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset -2px -2px 5px var(--highlight-pressed); }
@media (prefers-reduced-motion: reduce) { .picker-trigger { transition: none; } }
.picker-control { width: 40px; height: 40px; }
.picker-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--shadow-inset-strong);
}
.picker-modal {
  width: min(360px, calc(100vw - 32px)); padding: 8px; max-height: calc(100dvh - 32px); overflow: auto;
  border-radius: var(--radius-panel); background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 2px 4px 10px var(--shadow-tooltip); animation: info-appear 120ms ease-out;
}
/* 좁은 화면에서는 1fr 칸이 줄어 넘침을 막고, 높이는 최소 36px로 누를 여유를 남긴다. */
.picker-surface { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-button); background: var(--panel); color: var(--ink); }
.picker-title, .picker-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; }
.picker-title { font-size: 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
/* 요일도 같은 격자에 있어 행 간격 4px에 8px을 더해 구역 사이 12px을 맞춘다. */
.picker-weekday { text-align: center; padding: 0; margin-bottom: 8px; font-size: 12px; color: var(--ink-soft); }
.picker-day {
  width: 100%; min-width: 0; aspect-ratio: 1; min-height: 36px; border: 0; border-radius: var(--radius-chip); padding: 0;
  font: inherit; font-size: 14px; color: var(--ink); background: transparent; cursor: pointer;
}
.picker-day:where(:enabled:hover) { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.picker-day.is-in-range { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.picker-day.is-selected { background: var(--accent); color: var(--bg); }
/* 오늘의 점은 선택 면 위에서도 전경색을 따라가므로 선택 상태와 독립적으로 구분된다. */
.picker-day.is-today { position: relative; }
.picker-day.is-today::after { content: ""; position: absolute; bottom: 3px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.picker-day:disabled, .picker-control:disabled { opacity: .4; cursor: default; }
.picker-trigger:focus-visible, .picker-control:focus-visible, .picker-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-day.is-selected:focus-visible { outline-color: var(--bg); }
.picker-hint { margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .picker-modal { animation: none; } }

/* 추가 카드도 기존 차트 역할색·버튼 반경을 공유한다. 빈 컨테이너는 화면 간격을 차지하지 않는다. */
.volume-comparisons { display: grid; gap: 16px; }
.volume-comparisons:empty { display: none; }
.volume-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.volume-actions .btn { min-height: 44px; }
.volume-remove { min-width: 44px; }
/* 추가 버튼은 공통 버튼 크기 그대로 쓰고 볼록 면 가운데에 둔다. */
.volume-add-control { display: grid; justify-items: center; gap: 8px; }
#volume-add:disabled { box-shadow: none; color: var(--ink-soft); opacity: .5; cursor: default; }
#volume-add-hint { margin: 0; text-align: center; }
#volume-add-hint:empty { display: none; }
/* 390px에서는 토글 묶음이 다음 줄로 이동하며, 더 좁으면 버튼 단위로 자연스럽게 줄바꿈한다. */
/* 기간 select: 달력 라벨 select와 같은 화살표·여백을 쓴다. */
.volume-range {
  appearance: none; -webkit-appearance: none; field-sizing: content; max-width: 100%;
  min-height: 44px; padding: 12px 32px 12px 16px; text-align: center; text-align-last: center;
  background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.volume-range option { background: var(--button); color: var(--ink); text-shadow: none; }
/* 기본·추가 카드의 기간은 이름과 별도로 항상 눈에 띄게 둔다.
   ⓘ 설명이 열려도 이 줄의 버튼/select를 가리거나 가려지지 않도록, 설명의 세로 위치는
   app.js의 setupInfoPopups()가 이 줄이 보이는지 보고 그 아래로 띄운다(z-index로 한쪽을
   덮는 방식은 설명 글이나 버튼이 서로 겹쳐 보여 택하지 않았다). */
.volume-period-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.volume-period-row .btn { min-height: 44px; }
/* 일자별 요약 목록도 기간(날짜 선택) 버튼을 제목 아래 한 줄에 둬 X 언급량 카드와 배치를 맞춘다.
   버튼이 숨겨지는 경우(고를 날짜가 없을 때)는 줄 자체도 격자 간격을 차지하지 않게 접는다. */
.briefs-period-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.briefs-period-row:has(> #briefs-date-picker[hidden]) { display: none; }
.volume-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 12px; }
.volume-rename { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
.volume-name-input { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; font: inherit; color: var(--ink); background: var(--panel); }
.volume-share-url { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-soft); border-radius: var(--radius-button); font: inherit; color: var(--ink); background: var(--panel); }
.volume-name-input:focus-visible, .volume-share-url:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.volume-share-status { margin: 0; }
.volume-share-status:empty { display: none; }
.volume-shared-badge { font-size: 14px; font-weight: 600; color: var(--accent); }
.volume-actions .btn:disabled { color: var(--ink-soft); opacity: .5; cursor: default; }
/* 범례·집계 기준은 그래프 우하단에 오른쪽 정렬로 모은다. 좁으면 줄바꿈해도 오른쪽 끝을 지킨다. */
.chart-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px; margin-top: 8px; text-align: right; }
.chart-foot .legend, .chart-foot .hint { margin: 0; }
.chart-foot .legend { justify-content: flex-end; min-width: 0; max-width: 100%; margin-block: 6px; }
/* 추가 그래프는 카드 래퍼 없이 공통 카드 내부와 같은 세로 간격만 쓴다. */
.volume-comparison { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
/* 추가 그래프의 이름 상자·이름 입력도 기본 카드 제목·버튼과 같은 44px 높이와 16px 굵은 글자로 맞춘다. */
.volume-comparison .card-title, .volume-name-input { box-sizing: border-box; min-height: 44px; font-size: 16px; line-height: 20px; font-weight: 700; }
/* 추가 그래프가 있을 때만 기존 그래프와의 사이에 2px 흰색 양각 기준선을 하나 긋는다(비면 묶음 전체가 숨는다). */
.volume-comparisons::before { content: ""; height: 2px; margin: 16px 0; border-radius: 1px; background: var(--highlight-base); box-shadow: 1px 1px 2px var(--shadow-raised), -1px -1px 2px var(--highlight-panel); }
/* 다크에서는 흰색이 튀므로 공통 버튼과 같은 패널 색을 쓴다. */
:root[data-theme="dark"] .volume-comparisons::before { background: var(--panel); }

/* 일정 카드 옆 설명은 한 줄로 두고 넘치면 말줄임한다(전체 글은 title로 확인). */
#calendar-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* 순위는 수집된 후보의 기존 조회수를 사용하며 좁은 화면에서도 제목을 줄바꿈한다. */
.tabs { flex-wrap: wrap; }
.youtube-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.youtube-rank-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.youtube-rank { font-size: 20px; line-height: 25px; font-weight: 700; color: var(--accent); }
.youtube-rank-body { display: grid; gap: 4px; min-width: 0; }
.youtube-rank-body a { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.youtube-views { font-size: 14px; line-height: 18px; color: var(--ink-soft); }

.youtube-video-link { display: grid; gap: 10px; text-decoration: none; }
.youtube-rank-content { display: grid; align-content: start; gap: 4px; min-width: 0; }
.youtube-rank-content .meta { font-weight: 400; }
.youtube-rank-content .chip { justify-self: start; width: auto; max-width: 100%; }
/* 국가명·국기는 고정하고 남은 폭에서 분류 칩만 줄여 모바일에서도 한 줄을 유지한다. */
.youtube-chips { display: flex; align-items: center; gap: 4px; min-width: 0; }
.youtube-chips > .chip { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.youtube-chips > .youtube-region-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; font-size: 12px; line-height: 15px; font-weight: 600; color: var(--ink-soft); }
.country-flag { display: block; flex: 0 0 auto; width: 20px; height: 15px; border-radius: 2px; object-fit: contain; }
.youtube-video-title { text-decoration: none; }
.youtube-summary { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
/* 영상 카드 안에서 반응을 한 번 더 음각으로 묶어 본문 요약과 구분한다. */
.youtube-chat-summary { display: grid; gap: 8px; min-width: 0; margin-top: 8px; padding: 12px; border-radius: var(--radius-button); background: var(--card); box-shadow: inset 2px 2px 5px var(--shadow-inset-wide), inset -1px -1px 3px var(--highlight-pressed); }
.youtube-chat-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.youtube-chat-title { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ink); }
.youtube-chat-participants { font-size: 12px; line-height: 15px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.youtube-chat-summary .youtube-chat-text { margin: 0; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--ink-soft); overflow-wrap: anywhere; }
.youtube-video-link:hover .youtube-video-title { text-decoration: underline; }
.youtube-thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-button); background: var(--card); }
.youtube-thumbnail[hidden] + .youtube-rank-content { grid-column: 1 / -1; }
@media (min-width: 600px) { .youtube-video-link { grid-template-columns: 160px minmax(0, 1fr); align-items: start; } }

.youtube-controls { display: flex; gap: 8px; flex-wrap: wrap; }
#youtube-country-note:empty, #youtube-criteria:empty { display: none; }

.youtube-summary-row { display: flex; align-items: center; gap: 8px; min-width: 0; }


/* 선택 줄은 한 줄만 차지하고 목록 자체의 터치·트랙패드·키보드 스크롤을 쓴다. */
.youtube-country-strip { position: relative; min-width: 0; background: var(--panel); border-radius: var(--radius-panel); box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); }
#youtube-countries { flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px; scroll-padding-inline: 76px; overscroll-behavior-x: contain; border-radius: inherit; }
#youtube-countries > .btn { --button: var(--card); flex: none; min-height: 44px; white-space: nowrap; background-color: var(--card); }
#youtube-countries:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 스크롤 버튼은 같은 줄의 끝에 겹쳐 놓아 별도 높이를 쓰지 않는다. */
.youtube-scroll-edge { position: absolute; top: 0; bottom: 0; z-index: 2; width: 76px; display: flex; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms; }
.youtube-scroll-edge.left { left: 0; padding-left: 4px; border-radius: var(--radius-panel) 0 0 var(--radius-panel); background: linear-gradient(to right, var(--panel) 44px, transparent 100%); transform-origin: left center; }
.youtube-scroll-edge.right { right: 0; padding-right: 4px; justify-content: flex-end; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; background: linear-gradient(to left, var(--panel) 44px, transparent 100%); transform-origin: right center; }
.youtube-scroll-edge.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.youtube-country-strip .youtube-scroll-arrow { --button: var(--card); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
/* 보이는 원은36px로 줄이되 눌러 조작하는 영역은44px로 유지한다. */
.youtube-scroll-arrow::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel); }
.youtube-scroll-arrow:active::before { box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset -2px -2px 5px var(--highlight-pressed); }
.youtube-scroll-arrow svg { position: relative; width: 16px; height: 16px; }
.youtube-scroll-edge.is-visible { pointer-events: none; }
.youtube-scroll-edge.is-visible > .youtube-scroll-arrow { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .youtube-scroll-edge { transition: none; } }

/* 면은 고정하고 원형 버튼만 작아졌다 커지게 해 흰 가림막의 형태가 흔들리지 않게 한다. */
.youtube-scroll-edge > .youtube-scroll-arrow { transform: scale(.8); transition: transform 180ms ease; }
.youtube-scroll-edge.is-visible > .youtube-scroll-arrow { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .youtube-scroll-edge > .youtube-scroll-arrow { transition: none; } }

.youtube-summary-row { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 36px; flex: 1 1 0; margin-left: auto; }
#youtube-observed { margin: 0; min-width: 0; flex: 0 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.youtube-summary-row > .info-btn { margin: 0; width: 36px; height: 36px; padding: 9px; border-radius: var(--radius-button); }
.youtube-period-line { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 280px; }
#youtube-periods { flex: none; flex-wrap: nowrap; }
#youtube-time-note:empty { display: none; }

.youtube-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }

.youtube-ranking-controls { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.youtube-video-meta { display: flex; align-items: center; min-width: 0; }
.youtube-video-meta > .youtube-channel { min-width: 0; max-width: 50%; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.youtube-video-meta > .youtube-views, .youtube-video-meta > .youtube-age { display: inline-flex; align-items: center; flex: none; white-space: nowrap; font: inherit; color: inherit; }
/* 구분선도 메타 글자색을 따라 양쪽 테마에서 선명하게 보이게 한다. */
.youtube-video-meta > :not(:first-child)::before { content: ""; width: 1px; height: 10px; margin-inline: 8px; border-radius: 1px; background: currentColor; box-shadow: 1px 1px 2px var(--shadow-raised), -1px -1px 2px var(--highlight-panel); flex: none; }
/* 맨 위로 버튼: 색은 .btn이 이미 CSS 변수로만 칠하므로 여기서는 새 색을 더하지 않는다.
   grid(.page)의 기본 폭 늘림을 justify-self로 깨고 가운데 한 덩어리로만 둔다. */
.back-to-top { justify-self: center; margin-inline: auto; display: inline-grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; --ease-spring: linear(0, .009, .035, .078, .141, .223, .32, .432, .55, .67, .78, .88, .96, 1.02, 1.06, 1.08, 1.08, 1.06, 1.04, 1.02, 1.01, 1); }
.back-to-top svg { display: block; width: 24px; height: 24px; }
/* 올라가는 느낌: 마우스를 올리거나 초점이 있으면 두 화살표가 스프링 이징으로 위로 살짝 올라가 머문다(아래 화살표가 조금 늦게). 동작 줄이기 설정에서는 움직이지 않는다. */
@media (prefers-reduced-motion: no-preference) {
  .back-to-top .chev { transition: transform .6s var(--ease-spring); }
  .back-to-top .chev-2 { transition-delay: .06s; }
  .back-to-top:hover .chev, .back-to-top:focus-visible .chev { transform: translateY(-3px); }
}

#youtube-region-filters { gap: 8px; margin-bottom: 12px; }
#youtube-global-digest { margin-bottom: 16px; overflow-wrap: anywhere; }
#youtube-global-digest p { white-space: pre-line; margin: 0 0 12px; }