/* ── typeface 레이어 (static-derived-doc 블루프린트의 표면별 채택) ───────────
   pretendard 1.3.9 — 카탈로그의 한글 지원 타이포. 이 대시보드는 한국어 표면인데
   그동안 OS 기본 글꼴에 맡겨져 PC마다 다르게 렌더됐다(맥은 Apple SD Gothic Neo,
   윈도우는 맑은 고딕). 핀된 바이트를 실어 어디서 열든 같은 글꼴로 읽히게 한다.

   레코드 constraint 4·8 대로 woff2 하나만, 그것도 가변 폰트 하나로 전 웨이트를
   덮는다(static 여러 벌보다 작다). constraint 5: 선언 범위는 CSS 표준 100–900 이
   아니라 45–920 이므로 그대로 적는다 — 100–900 으로 적으면 바깥 값이 잘린다.
   업스트림 사전빌드 파일을 고치지 않고 그대로 서빙하므로 OFL clause 3 의
   Modified Version 이 아니다. LICENSE 는 vendor/pretendard/1.3.9/LICENSE.

   swap: 2MB 한글 폰트가 뜨기 전에는 대체 글꼴로 먼저 읽히게 한다(빈 화면 금지). */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../vendor/pretendard/1.3.9/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* confcal — styles derived from DESIGN.md (Linear design system + category accents) */
:root {
  /* Linear surfaces */
  --canvas: #010102;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #18191a;
  --hairline: #23252a;
  --hairline-strong: #34343a;
  /* Linear ink */
  --ink: #f7f8f8;
  --ink-muted: #d0d6e0;
  --ink-subtle: #8a8f98;
  --ink-tertiary: #62666d;
  /* Linear primary (UI accent only) */
  --primary: #5e6ad2;
  --primary-hover: #828fff;
  --primary-focus: #5e69d1;

  /* aliases (legacy names used across rules) */
  --bg: var(--canvas);
  --panel: var(--surface-1);
  --panel2: var(--surface-2);
  --fg: var(--ink);
  --muted: var(--ink-subtle);
  --accent: var(--primary);
  --accent2: var(--primary-hover);
  --line: var(--hairline);
  --line-strong: var(--hairline-strong);

  /* ── 의미 색: open-color 1.9.1 토큰에서 파생 ────────────────────
     표면·잉크 램프(Linear)는 이 대시보드의 정체성이라 그대로 두고,
     범주를 구분하는 색만 팔레트 위로 옮겼다. 값은 vendor/open-color 가
     :root 에 선언한 --oc-* 를 참조하므로 여기에 hex 를 복사해 두지 않는다
     (static-derived-doc 블루프린트의 palette 레이어). 그림(chart-js)도
     assets/palette.js 를 통해 같은 토큰을 읽어, 화면과 figure 의 색이
     어긋날 자리가 없다. */
  /* status */
  --up: var(--oc-green-4);      /* 예정 */
  --now: var(--oc-yellow-5);    /* 진행중 */
  --past: var(--oc-gray-6);     /* 종료 */
  --tbd: var(--oc-violet-4);    /* 미정 */
  /* category accent */
  --c-introbot: var(--oc-blue-4);
  --c-inthaptic: var(--oc-grape-4);
  --c-kr: var(--oc-teal-4);
  --c-rec: var(--oc-orange-4);

  /* type scale (Linear) */
  --fs-display: 2.25rem; --fs-headline: 1.75rem; --fs-card: 1.375rem;
  --fs-subhead: 1.125rem; --fs-body: 1rem; --fs-sm: .875rem;
  --fs-caption: .75rem; --fs-eyebrow: .8125rem;
  /* radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
}
.cat-introbot  { --c: var(--c-introbot); }
.cat-inthaptic { --c: var(--c-inthaptic); }
.cat-kr        { --c: var(--c-kr); }
.cat-rec       { --c: var(--c-rec); }

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--canvas);
  font: var(--fs-body)/1.5 "Pretendard Variable", "SF Pro Display", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--primary) 45%, transparent); }
a { color: var(--primary); }

/* ── Header ─────────────────────────────────────────────── */
/* 헤더는 데이터가 아니다. 예전에는 제목·태그라인·컨트롤·필터 두 줄이 화면 위쪽 265px 을
   먹어 1080p 에서 표가 접힌 아래에서 시작했다. 제목과 태그라인을 한 줄로 눕히고 여백을
   조여 그만큼을 표에 돌려준다. */
.site-header { max-width: 1320px; margin: 0 auto; padding: 22px 32px 14px; border-bottom: 1px solid var(--hairline); }
.site-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.site-header h1 {
  margin: 0; font-size: var(--fs-display); font-weight: 600; line-height: 1.12; letter-spacing: -.025em;
  display: inline-flex; align-items: center; gap: 8px;
}
.tagline { margin: 0; color: var(--ink-subtle); font-size: var(--fs-sm); }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.controls input[type=search], .controls select {
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 8px 12px; font-size: var(--fs-sm); font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.controls input[type=search]::placeholder { color: var(--ink-tertiary); }
.controls input[type=search]:focus, .controls select:focus {
  outline: none; border-color: var(--hairline-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-focus) 50%, transparent);
}
.controls input[type=search] { flex: 1 1 18rem; }
.controls select:disabled { opacity: .4; cursor: not-allowed; }
.chk { color: var(--ink-subtle); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.chk input { accent-color: var(--primary); }

.filter-row { margin-top: 9px; }
.tag-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-btn {
  background: var(--surface-1); color: var(--ink-subtle);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: var(--fs-eyebrow); font-family: inherit; cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.tag-btn .n { color: var(--primary-hover); font-weight: 600; margin-left: 4px; }
.tag-filters.small .tag-btn { font-size: var(--fs-caption); padding: 4px 10px; }
.tag-btn:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface-2); }
.tag-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 500; }
.tag-btn.on .n { color: #fff; }

/* 빈 상태 — 카드 그리드 시절의 grid-column 잔재를 걷어냈다(이제 표 컨테이너 안이다) */
.empty { color: var(--ink-subtle); padding: 48px 16px; text-align: center; }

/* ── 상세 모달 ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(1,1,2,.7); animation: fade .16s ease; }
.modal-panel {
  position: relative; z-index: 1; width: min(720px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-xl); padding: 24px;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,.8); animation: pop .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal-x {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 0;
  background: var(--surface-1); color: var(--ink-subtle); border: 1px solid var(--hairline);
  width: 32px; height: 32px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.modal-x:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface-3); }

.m-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.m-top h2 { margin: 0; font-size: var(--fs-headline); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.m-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.m-full { margin: 8px 0 20px; color: var(--ink-subtle); font-size: var(--fs-body); }
.m-fields { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; }
.m-fields dt { color: var(--ink-subtle); font-size: var(--fs-eyebrow); white-space: nowrap; }
.m-fields dd { margin: 0; font-size: var(--fs-body); }
.m-fields dd.when { font-weight: 600; }

.m-sec { margin: 20px 0 0; border-top: 1px solid var(--hairline); padding-top: 16px; }
.m-sec h3 { margin: 0 0 12px; font-size: var(--fs-subhead); font-weight: 600; letter-spacing: -.01em; border-left: 3px solid var(--c, var(--primary)); padding-left: 10px; }
.dim-note { color: var(--ink-subtle); font-size: var(--fs-sm); margin: 0; }

.kn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kn-list li { background: var(--surface-1); border: 1px solid var(--hairline); border-left: 2px solid var(--c, var(--primary)); border-radius: var(--r-md); padding: 10px 12px; transition: background .15s ease; }
.kn-list li:hover { background: var(--surface-3); }
.kn-name { font-weight: 600; font-size: var(--fs-body); }
.kn-aff { display: block; color: var(--ink-subtle); font-size: var(--fs-eyebrow); margin-top: 2px; }
.kn-topic { display: block; color: color-mix(in srgb, var(--c, var(--primary)) 78%, #fff); font-size: var(--fs-eyebrow); margin-top: 4px; }

.prog-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.prog-list li::marker { color: var(--primary-hover); }
.pp-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: var(--fs-sm); }
.pp-list li { padding-left: 3px; }
.pp-list li::marker { color: var(--primary-hover); font-weight: 700; }

/* 향후 개최(future) — 연도·장소·기간 한 줄 카드 */
.fut-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fut-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; background: var(--surface-1); border: 1px solid var(--hairline); border-left: 2px solid var(--c, var(--primary)); border-radius: var(--r-md); padding: 9px 12px; }
.fut-year { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3em; }
.fut-loc { color: var(--ink-muted); font-size: var(--fs-sm); }
.fut-dates { color: var(--ink-subtle); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.fut-tent { font-size: var(--fs-caption); font-weight: 600; color: var(--now); border: 1px solid color-mix(in srgb, var(--now) 45%, transparent); border-radius: var(--r-xs); padding: 0 5px; }
.fut-src { margin-left: auto; color: var(--ink-tertiary); text-decoration: none; font-weight: 700; padding: 0 4px; }
.fut-src:hover { color: var(--primary-hover); }

.m-foot { margin-top: 20px; border-top: 1px solid var(--hairline); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.m-foot .site { margin-left: 0; }
.src { width: 100%; margin: 0; color: var(--ink-tertiary); font-size: var(--fs-caption); }
.src a { color: var(--ink-subtle); }
.src a:hover { color: var(--primary-hover); }


/* ── 상단 스트립 (다음 개최 · 마감 임박) ─────────────────────
   페이지 맨 위에서 "지금 무엇이 급한가"에 답하는 띠. 왼쪽은 폭이 고정된 다음 개최 카드,
   오른쪽은 남는 폭을 다 쓰는 마감 임박이다. 마감이 많으면 세로로 길어지는 대신
   **가로로 스크롤**한다 — 이 띠가 높아지면 아래 표가 화면 밖으로 밀린다. */
.topstrip {
  max-width: 1320px; margin: 0 auto; padding: 4px 32px 0;
  /* 카드 하나뿐이지만 래퍼는 남긴다 — 페이지 여백(1320/32px)을 다른 구역과 같은 규칙으로
     주려면 카드 자신이 아니라 바깥이 그것을 맡아야 한다(카드는 자기 안쪽 패딩만 안다). */
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.deadlines {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px;
  padding: 10px 16px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.rail-card { display: contents; }          /* JS 가 감싸는 래퍼는 그리드에 투명하게 */
.rail-h { display: flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-subtle); }
.rail-n { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-subtle);
  background: var(--surface-3); border-radius: var(--r-pill); padding: 0 7px; }
.dl-list {
  display: flex; gap: 8px; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px;
}
/* 마감 항목 — **한 줄**이고, 다음 개최 카드와 같은 언어다.
   예전에는 약칭과 날짜를 세로로 쌓아 항목 하나가 두 줄이었다: 띠가 그만큼 높아져 아래 표를
   밀어냈고, 가로로 흐르는 목록에서 두 줄짜리 덩어리는 훑기도 어려웠다.
   이제 baseline 하나 위에 D-day → 약칭 → 날짜가 이어진다(다음 개최의 배열 그대로). */
.dl-item {
  display: flex; align-items: baseline; gap: 8px; flex: none; cursor: pointer; font-family: inherit;
  text-align: left; background: var(--surface-2); border: 1px solid var(--hairline);
  border-left: 3px solid var(--c, var(--primary)); border-radius: var(--r-md); padding: 5px 11px;
  transition: background .15s ease, border-color .15s ease;
}
.dl-item:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.dl-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 1px; }
/* D-day 는 다음 개최처럼 **맨 앞의 색 있는 글자**다 — 칩 배경을 두르지 않는다.
   예외는 '오늘'뿐: 그때만 배경을 채워 한 항목이 목록에서 튀어나오게 한다. */
.dl-dday { flex: none; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--up); }
.dl-dday.today { color: var(--canvas); background: var(--now); border-radius: var(--r-sm); padding: 1px 6px; }
.dl-acr { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.dl-meta { font-size: var(--fs-caption); color: var(--ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-empty { grid-column: 2; margin: 0; font-size: var(--fs-sm); color: var(--ink-subtle); }
.rail-empty span, .rail-empty br { display: none; }   /* 띠에서는 부연을 접는다 */
.rail-note { display: none; }                          /* 각주는 상세 패널이 갖는다 */

/* ── Agenda 표 (월 그룹 · 열 정렬) ─────────────────────────
   카드에서 표로. 열이 고정되면 같은 값이 늘 같은 x 좌표에 서므로 행끼리 비교가 공짜가
   된다 — 학회 목록에서 눈이 실제로 하는 일이 그것이다. 표는 넓으므로 자기 컨테이너
   안에서 가로 스크롤한다(페이지 본문이 가로로 밀리지 않게).
   --thead-h 는 표 머리 높이 하나를 두 sticky 층(표 머리 / 월 머리)이 나눠 쓰는 값이다. */
/* 표는 이제 전체 폭이다 — 8열 표에서는 폭이 곧 가독성이고, 맥락 카드는 상단으로 올라갔다.
   --thead-h 는 표 머리 높이 하나를 두 sticky 층(표 머리 / 월 머리)이 나눠 쓰는 값이다. */
.agenda {
  --thead-h: 34px;
  max-width: 1320px; margin: 0 auto; padding: 8px 32px 48px; min-width: 0;
}
.ag-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
/* 가로 스크롤이 두 곳(표·마감 띠)이라 스크롤바가 눈에 띄면 화면이 어수선해진다.
   있다는 건 보이되 조용하게 — 호버할 때만 또렷해진다. */
.ag-scroll, .dl-list { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
.ag-scroll:hover, .dl-list:hover { scrollbar-color: var(--hairline-strong) transparent; }
.ag-scroll::-webkit-scrollbar, .dl-list::-webkit-scrollbar { height: 8px; }
.ag-scroll::-webkit-scrollbar-track, .dl-list::-webkit-scrollbar-track { background: transparent; }
.ag-scroll::-webkit-scrollbar-thumb, .dl-list::-webkit-scrollbar-thumb {
  background: var(--hairline); border-radius: var(--r-pill);
}
.ag-scroll:hover::-webkit-scrollbar-thumb, .dl-list:hover::-webkit-scrollbar-thumb { background: var(--hairline-strong); }
.ag-table {
  width: 100%; min-width: 960px;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sm);
}

/* 표 머리 — 스크롤 중 고정 */
.ag-table thead th {
  position: sticky; top: 0; z-index: 6;
  height: var(--thead-h);
  padding: 0 12px;
  text-align: left; vertical-align: middle; white-space: nowrap;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-tertiary);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-strong);
}

/* 월 · TODAY 그룹 행 — 표 머리 바로 아래에 고정 */
.ag-group th {
  position: sticky; top: var(--thead-h); z-index: 5;
  padding: 18px 12px 7px;
  text-align: left; font-weight: 600; letter-spacing: .01em;
  font-size: var(--fs-subhead); color: var(--ink);
  background: linear-gradient(var(--canvas) 76%, transparent);
  backdrop-filter: blur(2px);
}
.ag-group.ag-tbd th { color: var(--tbd); font-size: var(--fs-sm); }
.ag-group.ag-today th {
  padding: 10px 12px; font-size: var(--fs-caption); background: var(--canvas);
}
.ag-group.ag-today span {
  display: inline-block; font-weight: 700; letter-spacing: .04em;
  color: var(--canvas); background: var(--now);
  padding: 2px 10px; border-radius: var(--r-pill);
}

/* 데이터 행 — 좌측 3px 이 분류 색 */
.ag-row { cursor: pointer; transition: background .13s ease; }
.ag-row > td {
  padding: 10px 12px; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
}
.ag-row > td:first-child { border-left: 3px solid var(--c, var(--primary)); }
.ag-row:hover > td { background: var(--surface-2); }
.ag-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: -2px; }
.ag-row.s-past { opacity: .58; }
.ag-row.s-past:hover { opacity: .92; }
.ag-row.s-ongoing > td:first-child { border-left-color: var(--now); }
.ag-row.s-tbd > td:first-child { border-left-style: dashed; }

/* 열 폭 — 좁은 열은 고정, 이름·장소가 남는 폭을 나눈다 */
.col-when  { width: 9.5em; white-space: nowrap; }
.col-state { width: 5.5em; }
.col-loc   { width: 20%; }
.col-reg   { width: 16%; }
/* 사전등록 문구는 40자까지 온다 — 두 줄에서 자른다(전문은 title·상세 패널).
   클램프는 **셀 안쪽 span** 에 건다. td 자체의 display 를 바꾸면 그 칸이 테이블 셀이기를
   그만두고 열 정렬이 무너진다. */
.reg-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.col-cat   { width: 8.5em; white-space: nowrap; }
.col-tags  { width: 15%; }

.ag-dates { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-dim { color: var(--ink-tertiary); }

.ag-status { display: inline-block; font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.ag-status.s-upcoming { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.ag-status.s-ongoing  { color: var(--canvas); background: var(--now); }
.ag-status.s-past     { color: var(--ink-tertiary); background: color-mix(in srgb, var(--ink-tertiary) 18%, transparent); }
.ag-status.s-tbd      { color: var(--tbd); background: color-mix(in srgb, var(--tbd) 14%, transparent); }

/* 학회 칸 — 약칭 줄 + 전체명 줄 */
.ag-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ag-acr { font-size: var(--fs-body); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ag-head .krflag { font-size: var(--fs-caption); }
/* 전체명은 최대 75자까지 온다. 한 줄로 묶어 행 높이를 일정하게 유지하고, 전문은 title 과
   상세 패널이 갖는다 — 표에서 행 높이가 들쭉날쭉하면 세로로 훑을 때 눈이 걸린다. */
.ag-full {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-subtle); line-height: 1.4;
}

.ag-loc { color: var(--ink-muted); text-decoration: none; }
a.ag-loc:hover { color: var(--primary-hover); }

.ag-mark { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-caption); font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-pill); cursor: help; }
.ag-mark.kn   { color: var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); }
.ag-mark.fut  { color: var(--primary-hover); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.ag-mark.note { color: var(--ink-tertiary); background: color-mix(in srgb, var(--ink-tertiary) 16%, transparent); }
.ag-site { color: var(--ink-tertiary); text-decoration: none; display: inline-flex; }
.ag-site:hover { color: var(--primary-hover); }

/* 향후 개최판 행 — future[] 에서 편 행이다. 추적 중인 현재 판과 구분되어야 하지만
   *덜 중요한* 것은 아니다(2029년 5월에 무엇이 있는지가 이 표의 값어치다). 그래서 흐리게
   죽이지 않고, 학회 칸에 판 연도 배지를 달고 표면 한 단계만 낮춰 결을 다르게 한다. */
.ag-row.is-edition > td { background: var(--canvas); }
.ag-row.is-edition:hover > td { background: var(--surface-1); }
.ag-ed {
  flex: none; font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--primary-hover); background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: var(--r-sm); padding: 0 6px; cursor: help;
}
.ag-ed.tent { border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.ag-ed.tent::after { content: "?"; opacity: .7; }

.ag-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-tag { font-size: var(--fs-caption); color: var(--ink-subtle); background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 0 8px; white-space: nowrap; }

/* 좁은 화면: 레일을 본문 아래로 스택 */

@media (max-width: 720px) {
  .topstrip { padding: 4px 16px 0; }
  .agenda { padding: 8px 16px 40px; }
  /* 표는 좁은 화면에서 열을 접지 않고 자기 컨테이너 안에서 가로로 스크롤한다 —
     열을 접으면 표의 유일한 장점(같은 값이 같은 x 좌표에 서는 것)이 사라진다.
     대신 스크롤이 가능하다는 걸 보이도록 오른쪽 끝을 페이드로 표시한다. */
  .ag-table { font-size: var(--fs-caption); }
  .ag-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  max-width: 1320px; margin: 0 auto;
  padding: 16px 32px 40px; color: var(--ink-subtle);
  border-top: 1px solid var(--hairline); font-size: var(--fs-caption);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.site-footer code { background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-xs); }
.legend { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.dot.s-upcoming { background: var(--up); }
.dot.s-ongoing  { background: var(--now); }
.dot.s-past     { background: var(--past); }
.dot.s-tbd      { background: var(--tbd); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 채택 레이어 컴포넌트 (static-derived-doc 블루프린트) ───────────────
   기존 Linear 표면·잉크 램프를 그대로 쓰고, 새로 생긴 두 요소만 그 언어로 얹는다.
   ① 검색 모드 배지 — 지금 어느 검색 엔진이 도는지 화면이 말한다(file:// 강등 가시화)
   ② 월별 분포 figure — chart-js 캔버스를 담는 패널 */

.search-mode {
  align-self: center; flex: 0 0 auto;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--ink-tertiary); font-size: var(--fs-caption); letter-spacing: .01em;
  white-space: nowrap; cursor: help;
}
.search-mode.minisearch { color: var(--ink-subtle); border-color: var(--hairline-strong); }
/* 강등은 고장이 아니라 선언된 경로다 — 경고색을 쓰지 않고 담담히 표시한다. */
.search-mode.substring { color: var(--ink-tertiary); }

.figure {
  max-width: 1320px; margin: 0 auto; padding: 20px 32px 4px;
}
.figure[hidden] { display: none; }
.figure-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.figure-head h2 {
  margin: 0; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-subtle);
}
.figure-note { margin: 0; color: var(--ink-tertiary); font-size: var(--fs-caption); }
.figure-canvas {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 12px 14px 6px; height: 168px;
}
.figure-canvas canvas { cursor: pointer; }

@media (max-width: 720px) {
  .figure { padding: 16px 16px 0; }
  .figure-canvas { height: 148px; }
}

/* ── icon 레이어 (lucide-static 1.31.0) ────────────────────────────────
   이모지를 대체한다. 이모지는 플랫폼마다 다른 그림이 나오고(같은 📍가 애플·윈도우·
   안드로이드에서 제각각), 색을 CSS 로 줄 수 없어 다크 표면에서 혼자 튄다. lucide 는
   전부 stroke="currentColor" 라 주변 글자색을 그대로 물려받는다 — 상태색(예정/진행중/
   종료)이 이미 의미를 나르는 이 화면에서는 그게 정확한 동작이다.
   글자 옆에 서므로 크기는 em 으로 묶어 폰트 크기를 따라가게 한다. */
.i {
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  flex: none;
  stroke-width: 2;
}
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark .i { width: .78em; height: .78em; vertical-align: baseline; }
.modal-x { display: inline-flex; align-items: center; justify-content: center; }
.modal-x .i { width: 1.05em; height: 1.05em; vertical-align: baseline; }
.ag-mark .i, .ag-loc .i, .rail-h .i, .m-sec h3 .i { opacity: .85; }
.ag-site .i { width: .95em; height: .95em; }

/* ── 모션 배려 ──────────────────────────────────────────────
   이 화면의 움직임은 전부 장식이다(호버 색 전환, 모달 등장, 앵커 스크롤).
   줄여 달라고 선언한 사용자에게는 전부 끈다 — 정보는 하나도 잃지 않는다.
   chart-js 는 이미 animation:false 로 그린다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 한글은 기본 줄바꿈 규칙상 **단어 중간에서 갈라진다** — "웨어러블 햅/틱", "소프트-로보/틱스"
   처럼. 어절 단위로만 끊고(keep-all), 대신 끊을 데 없는 긴 라틴 문자열·URL 은 넘치기
   전에 깨지게 남겨 둔다(break-word). 페이지 루트 한 곳에 두면 전 요소가 상속한다. */
:where(body) { word-break: keep-all; overflow-wrap: break-word; }