/*
 * auto-content-core 본문 스타일
 * =============================================================================
 *  본문 HTML 에는 인라인 style 을 넣을 수 없다. 살균기가 제거한다.
 *  (style 속성은 클릭재킹과 광고 가리기에 쓰일 수 있어 허용 목록에서 뺐다)
 *  따라서 표현은 전부 여기 있는 acc- 클래스로 처리한다.
 *
 *  테마와 충돌하지 않도록 모든 선택자를 .acc- 로 시작한다.
 *  색상은 CSS 변수로 두어 사이트별 테마에서 덮어쓸 수 있게 한다.
 * =============================================================================
 */

/* ⚠ 밝고 어두움은 **테마가 정한다**. 사용자 OS 설정이 아니다.
   전에는 @media (prefers-color-scheme: dark) 로 갈랐는데, 그 질의는 기기
   설정만 볼 뿐 이 표가 놓인 페이지 배경과 아무 상관이 없다. 워드프레스
   테마가 밝은 화면 하나뿐이면, OS 를 어둡게 쓰는 사람에게는 흰 글 한가운데
   시커먼 카드가 떠서 고장 난 것처럼 보였다.
   light-dark() 는 color-scheme 속성, 즉 테마의 선언을 따른다. 선언이 없으면
   밝은 쪽으로 풀리고, 그것이 이 테마들의 실제 모습이다. */
/* ⚠ 변수를 `.acc-schedule-wrap` 에만 두면 **사이트 3 밖에서는 색이 통째로
   사라진다**. 사이트 2 의 버전 표에는 그 래퍼가 없어서, `.acc-badge` 규칙은
   있는데 `--acc-open-bg` 가 미정의라 배지가 투명하게 나갔다.
   래퍼를 쓰지 않는 최상위 블록에도 변수를 함께 건다. */
.acc-schedule-wrap,
.acc-table,
.acc-note,
.acc-ai,
.acc-rumor-claim,
.acc-news-list {
    --acc-line:       light-dark(#e2e5e9, #343a42);
    --acc-head-bg:    light-dark(#f6f7f9, #22262c);
    --acc-text:       light-dark(#1f2328, #e6e8ea);
    --acc-dim:        light-dark(#6b7280, #9aa2ad);
    --acc-open:       light-dark(#0a7d32, #4ade80);
    --acc-open-bg:    light-dark(#e7f6ec, #16301f);
    --acc-soon:       light-dark(#9a5b00, #fbbf24);
    --acc-soon-bg:    light-dark(#fdf3e3, #33280e);
    --acc-closed:     light-dark(#6b7280, #9aa2ad);
    --acc-closed-bg:  light-dark(#f1f2f4, #2a2f36);
    --acc-unknown:    light-dark(#6b7280, #9aa2ad);
    --acc-accent:     light-dark(#1d4ed8, #7aa2ff);
    --acc-card-bg:    light-dark(#ffffff, #1b1f24);
    --acc-today:      light-dark(#b91c1c, #f87171);
    /* 표의 짝수 줄. 배경색과 거의 같아야 한다 — 대비가 세면 줄무늬가
       내용보다 먼저 보인다. */
    --acc-zebra:      light-dark(#fafbfc, #20252b);
}

.acc-schedule-wrap {
    margin: 1.5em 0;
}

/* 모바일에서 표가 화면을 밀어내지 않도록 표만 가로 스크롤시킨다.
   본문 전체가 좌우로 움직이면 읽기가 매우 불편해진다. */
.acc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 회차 카드 ─────────────────────────────────────────────────────────── */
.acc-round {
    border: 1px solid var(--acc-line);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 1.25em;
    background: var(--acc-card-bg);
}

.acc-round-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em .75em;
    padding: .75em 1em;
    background: var(--acc-head-bg);
    border-bottom: 1px solid var(--acc-line);
}

/* h3 에는 class 를 붙이지 않는다. 살균기 허용 속성을 늘리지 않기 위해
   자손 선택자로 처리한다. */
.acc-round-head h3 {
    font-weight: 700;
    font-size: 1.02em;
    margin: 0;
    color: var(--acc-text);
}

/* 지금 무엇을 해야 하는지 한 줄로. 표를 읽기 전에 이것만 봐도 되게 한다. */
.acc-round-next {
    margin-left: auto;
    font-size: .92em;
    color: var(--acc-dim);
}

.acc-round-next strong {
    color: var(--acc-accent);
}

.acc-round-finished .acc-round-head {
    opacity: .72;
}

/* ── 버전 표 (사이트 2) ─────────────────────────────────────────────────────
   ⚠ `.acc-table` 과 `.acc-sub` 는 렌더러가 계속 내보내고 있었는데 여기에
   규칙이 **하나도 없었다**. 그래서 표는 테두리 없이 가운데 몰린 채 나왔고,
   `.acc-sub` 는 inline 인 span 이라 이름과 설명이 "AdGuard HomeDNS 광고 차단"
   처럼 붙어서 보였다. 클래스만 붙이고 CSS 를 안 만들면 오류 없이 이렇게
   나간다 — `.acc-note` 때와 같은 사고다. */
/* ⚠ 가로선만 있으면 표로 보이지 않는다.
   테두리를 아래쪽에만 두었더니 숫자 열이 서로 붙어, 어느 값이 어느 칸인지
   눈으로 짚기 어려웠다. 전기요금 기준표(5열 6행)에서 실제로 그랬다.
   **세로 구분선·머리글 배경·줄무늬** 셋이 있어야 표를 표로 읽는다. */
.acc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
    margin: 1.25em 0;
    border: 1px solid var(--acc-line);
}

.acc-table th,
.acc-table td {
    padding: .6em .7em;
    border-bottom: 1px solid var(--acc-line);
    text-align: left;
    vertical-align: top;
}

/* 세로 구분선. 첫 칸 왼쪽에는 넣지 않는다 — 바깥 테두리와 겹쳐 두 줄이 된다.
   ⚠ `td + td` 로 쓰면 안 된다. 사이트 2 의 표는 이름 칸이 `<th scope="row">`
     라서, 그 다음 칸이 '첫 번째 td' 가 되어 선이 빠진다. 실제로 1·2열 사이만
     구분선이 없었다. 칸의 종류가 아니라 **자리**로 판단한다. */
.acc-table tr > *:not(:first-child) {
    border-left: 1px solid var(--acc-line);
}

.acc-table thead th {
    background: var(--acc-head-bg);
    font-size: .82em;
    font-weight: 600;
    color: var(--acc-dim);
    white-space: nowrap;
    border-bottom: 1px solid var(--acc-line);
}

/* 줄무늬. 행이 많은 기준표에서 가로로 눈을 옮길 때 줄을 놓치지 않게 한다. */
.acc-table tbody tr:nth-child(even) > * {
    background: var(--acc-zebra);
}

.acc-table tbody tr:last-child th,
.acc-table tbody tr:last-child td {
    border-bottom: 0;
}

/* 첫 열은 이름이라 넓게, 나머지는 숫자·날짜라 줄바꿈하지 않는다. */
.acc-table tbody td:first-child {
    font-weight: 600;
    color: var(--acc-text);
}

.acc-table td + td {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 숫자만 있는 표는 오른쪽 정렬한다. 자릿수가 다른 금액이 왼쪽 정렬이면
   3,240 과 122,640 의 자리를 눈으로 맞출 수 없다.
   ⚠ `.acc-table` 은 세 렌더러가 함께 쓴다. 사이트 2 의 버전 표에는 링크와
     <code> 가 든 칸이 있어 오른쪽 정렬이 어색하다. 그래서 **그런 칸이 하나도
     없는 표에만** 적용한다. 머리글과 본문을 함께 옮겨야 열이 어긋나지 않는다. */
.acc-table:not(:has(td a)):not(:has(td code)) tr > *:not(:first-child) {
    text-align: right;
}

/* 이름 밑에 붙는 한 줄 설명. block 이 아니면 이름과 들러붙는다. */
.acc-sub {
    display: block;
    margin-top: .15em;
    font-size: .82em;
    font-weight: 400;
    color: var(--acc-dim);
}

/* 좁은 화면에서 표가 본문을 밀어내지 않게 표만 가로로 스크롤시킨다.
   렌더러가 .acc-table-scroll 래퍼를 감싸 주지 않으므로 표 자신이 스크롤
   상자가 된다. */
@media (max-width: 40rem) {
    .acc-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 일정 표 ───────────────────────────────────────────────────────────── */
table.acc-schedule {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
    margin: 0;
}

table.acc-schedule th,
table.acc-schedule td {
    padding: .6em .9em;
    border-bottom: 1px solid var(--acc-line);
    text-align: left;
    vertical-align: middle;
}

/* 세로 구분선. `.acc-table` 과 같은 이유다 — 가로선만 있으면 표로 읽히지 않는다.
   바깥 테두리는 넣지 않는다. 이 표는 이미 `.acc-round` 카드 안에 있어서
   테두리가 두 줄이 된다. */
table.acc-schedule tr > *:not(:first-child) {
    border-left: 1px solid var(--acc-line);
}

table.acc-schedule thead th {
    font-size: .82em;
    font-weight: 600;
    color: var(--acc-dim);
    text-transform: none;
    letter-spacing: 0;
    background: var(--acc-head-bg);
    border-bottom: 1px solid var(--acc-line);
    white-space: nowrap;
}

/* 줄무늬는 넣지 않는다.
   이 표에는 `tr.acc-group`(필기/실기 구분 머리)이 중간에 끼어 있어, 짝수 줄로
   칠하면 줄무늬 간격이 들쭉날쭉해진다. 구분이 더 어려워진다. */

table.acc-schedule tbody tr:last-child th,
table.acc-schedule tbody tr:last-child td {
    border-bottom: 0;
}

/* 구분 열: 좁게 고정해 날짜 열이 넓게 쓰이도록 */
table.acc-schedule th[scope="row"] {
    font-weight: 600;
    color: var(--acc-text);
    white-space: nowrap;
    width: 1%;
}

/* 필기 / 실기 구분 머리 */
tr.acc-group th {
    background: var(--acc-head-bg);
    font-size: .84em;
    font-weight: 700;
    color: var(--acc-dim);
    padding-top: .5em;
    padding-bottom: .5em;
}

/* 날짜는 숫자 폭을 맞춰 세로로 정렬되게 한다. 표에서 이게 가독성 차이를 만든다. */
td.acc-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--acc-text);
}

td.acc-state {
    white-space: nowrap;
    width: 1%;
}

/* ── 상태 배지 ─────────────────────────────────────────────────────────── */
.acc-badge {
    display: inline-block;
    padding: .18em .6em;
    border-radius: 999px;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.acc-badge-open    { color: var(--acc-open);    background: var(--acc-open-bg); }
.acc-badge-upcoming{ color: var(--acc-soon);    background: var(--acc-soon-bg); }
.acc-badge-closed  { color: var(--acc-closed);  background: var(--acc-closed-bg); }
.acc-badge-unknown { color: var(--acc-unknown); background: var(--acc-closed-bg); }

/* D-day */
.acc-dday {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--acc-accent);
}

.acc-dday-today {
    color: var(--acc-today);
}

/* 지난 일정은 흐리게. 지운 것과 지난 것은 다르므로 남기되 눈에 덜 띄게 한다. */
.acc-past,
.acc-unknown-text {
    color: var(--acc-dim);
    font-size: .92em;
}

/* ── 마감 임박 표 ──────────────────────────────────────────────────────── */
table.acc-deadlines {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
    border: 1px solid var(--acc-line);
}

table.acc-deadlines th,
table.acc-deadlines td {
    padding: .6em .9em;
    border-bottom: 1px solid var(--acc-line);
    text-align: left;
}

/* 이 표는 카드 안이 아니라 홀로 서 있으므로 바깥 테두리까지 넣는다. */
table.acc-deadlines tr > *:not(:first-child) {
    border-left: 1px solid var(--acc-line);
}

table.acc-deadlines thead th {
    background: var(--acc-head-bg);
    font-size: .82em;
    font-weight: 600;
    color: var(--acc-dim);
    white-space: nowrap;
}

table.acc-deadlines tbody tr:nth-child(even) > * {
    background: var(--acc-zebra);
}

table.acc-deadlines tbody tr:last-child > * {
    border-bottom: 0;
}

table.acc-deadlines td.acc-date,
table.acc-deadlines td.acc-state {
    white-space: nowrap;
}

.acc-empty {
    padding: 1em;
    border: 1px dashed var(--acc-line);
    border-radius: 8px;
    color: var(--acc-dim);
    text-align: center;
}

/* ── 출처 ──────────────────────────────────────────────────────────────── */
.acc-source {
    margin-top: 2em;
    padding: .9em 1.1em;
    border-left: 3px solid var(--acc-line);
    background: var(--acc-head-bg);
    border-radius: 0 8px 8px 0;
    font-size: .9em;
    color: var(--acc-dim);
}

.acc-source ul {
    margin: .4em 0 0;
    padding-left: 1.2em;
}

.acc-source li { margin: .25em 0; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .acc-round-head { gap: .35em; }
    .acc-round-next { margin-left: 0; width: 100%; }

    table.acc-schedule,
    table.acc-deadlines { font-size: .9em; }

    table.acc-schedule th,
    table.acc-schedule td,
    table.acc-deadlines th,
    table.acc-deadlines td { padding: .5em .6em; }
}

/* 다크 모드용 값은 위 변수 블록의 light-dark() 두 번째 인자에 있다.
   @media (prefers-color-scheme: dark) 로 가르지 않는 이유도 거기 적어 두었다. */

/* ── 안내 문단 ─────────────────────────────────────────────────────────────
   파이프라인이 본문에 붙이는 보충 설명. "이 표를 어떻게 읽어야 하는가",
   "무엇을 가져오지 못했는가" 처럼 본문과 성격이 다른 문장이라 본문 흐름에서
   한 단계 물러나 보여야 한다.

   본문에는 인라인 style 을 넣을 수 없으므로(살균기가 제거한다) 표현은 전부
   여기서 한다. 클래스 이름만 붙이고 CSS 를 만들지 않으면 화면에는 그냥
   문단으로 나온다 — 실제로 한동안 그렇게 나가고 있었다. */
.acc-note {
    margin: 1rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid rgba(127, 127, 127, 0.45);
    background: rgba(127, 127, 127, 0.07);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    line-height: 1.65;
}

.acc-note strong { font-weight: 700; }
/* .acc-note 는 회색 반투명이라 밝은 배경에서도 어두운 배경에서도 그대로
   통한다. 다크용 고정색을 따로 두지 않는다. */

/* ── AI 가 쓴 설명 ─────────────────────────────────────────────────────────
   숫자는 코드가 만들고 AI 는 설명문만 쓴다(ADR-006). 그 경계를 화면에서도
   보이게 한다. 숨기면 독자가 무엇을 어디까지 믿을지 판단할 근거를 잃는다.

   본문 문단과 비슷하되 왼쪽에 표시를 두어 "이 문단만 성격이 다르다" 를
   알린다. 배경을 진하게 깔지 않는다 — 광고가 아니라 본문의 일부다. */
.acc-ai {
    margin: 1rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--acc-line);
    background: rgba(127, 127, 127, 0.04);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    line-height: 1.65;
}

.acc-ai-mark {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.05em 0.45em;
    border: 1px solid var(--acc-line);
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--acc-dim);
    white-space: nowrap;
    vertical-align: 0.05em;
}

/* 회차 비교표. 필기·실기를 따로 그린다.
   ⚠ 예전에는 회차마다 표를 따로 그려 8개가 세로로 쌓였다(비교 불가).
      그 다음에는 필기·실기를 한 표에 몰아 여덟 열로 만들었는데, **편집기에는
      이 CSS 가 적재되지 않아** 열이 눌려 글자가 한 자씩 세로로 쏟아졌다.
      표는 스타일 없이도 읽혀야 한다. 네 열로 줄이고 둘로 나눴다.
   ⚠ 변수 이름을 지어내지 말 것. 이 파일이 정의하는 것은 --acc-line,
      --acc-head-bg, --acc-card-bg, --acc-dim ... 이다. */
table.acc-rounds {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
	font-variant-numeric: tabular-nums;
}
table.acc-rounds th,
table.acc-rounds td {
	padding: .5em .6em;
	border-bottom: 1px solid var(--acc-line);
	text-align: left;
	vertical-align: top;
}
table.acc-rounds thead th {
	background: var(--acc-head-bg);
	font-weight: 600;
	white-space: nowrap;
}
table.acc-rounds th[scope="row"] { font-weight: 600; }
table.acc-rounds td { white-space: nowrap; }
/* 상태 배지·D-day 는 날짜 아래로. 옆에 붙이면 칸이 그만큼 넓어진다. */
table.acc-rounds .acc-cell-state { display: block; margin-top: .15em; }
/* 끝난 회차는 지우지 않고 옅게 둔다 — 지난 일정을 확인하려는 수요가 있다. */
table.acc-rounds tr.acc-round-finished th,
table.acc-rounds tr.acc-round-finished td { opacity: .6; }

@media (max-width: 40rem) {
	/* 좁은 화면에서는 회차 이름을 접는다. 날짜 칸은 그대로 둔다. */
	table.acc-rounds th[scope="row"] { white-space: normal; }
	table.acc-rounds th, table.acc-rounds td { padding: .4em .4em; font-size: .95em; }
}
/* ─────────────────────────────────────────────────────────────────────────
   명령 블록 (안내 글)
   ⚠ `pre` / `code` 는 살균기가 통과시키지만 CSS 는 없었다. 브라우저 기본
     스타일 덕에 '깨져 보이지는' 않아서 더 알아채기 어려운 자리다.
     클래스를 붙여 두면 tests/css-class-coverage.test.js 가 지켜 준다.
   ⚠ 변수는 위에 정의된 것만 쓴다. 없는 이름을 쓰면 조용히 무시된다.
   ───────────────────────────────────────────────────────────────────────── */
.acc-code {
	background: var(--acc-head-bg);
	border: 1px solid var(--acc-line);
	border-radius: 3px;
	padding: .7em .8em;
	margin: .6em 0;
	overflow-x: auto;          /* 긴 명령이 본문을 옆으로 밀지 않게 */
	font-size: .9em;
	line-height: 1.6;
	white-space: pre;
	color: var(--acc-text);
}
.acc-code-title {
	display: block;
	font-weight: 600;
	margin: 1em 0 .2em;
	color: var(--acc-text);
}
/* 문장 안에 섞인 짧은 명령. 배경만 살짝 준다. */
.acc-inline-code {
	background: var(--acc-head-bg);
	border: 1px solid var(--acc-line);
	border-radius: 2px;
	padding: 0 .3em;
	font-size: .92em;
}
/* ─────────────────────────────────────────────────────────────────────────
   사이트 4 주간 정리 (render/camera_page.py)
   ⚠ 이 클래스들이 CSS 없이 배포돼 있었다. 화면은 그려지고 콘솔은 조용하고
     HTTP 는 200 이라 눈으로 보기 전에는 모른다 —
     tests/css-class-coverage.test.js 가 잡아 준 것이다.
   ⚠ 최소한의 구조만 준다. 색과 여백을 손보실 분은 여기를 고치면 된다.
   ⚠ 변수는 위에 정의된 것만 쓴다. 없는 이름은 조용히 무시된다.
   ───────────────────────────────────────────────────────────────────────── */
.acc-lead {
	font-size: 1.05em;
	color: var(--acc-text);
	margin: 0 0 1em;
}
/* 소문 개별 글의 핵심 문장. 본문에서 소문 내용이 한눈에 구분되게 한다.
   색은 '임박(주의)' 계열 변수를 그대로 쓴다 — 새 변수를 만들지 않는다. */
.acc-rumor-claim {
	font-size: 1.05em;
	padding: 0.7em 1em;
	border-left: 3px solid var(--acc-soon);
	background: var(--acc-soon-bg);
	margin: 0 0 1em;
}
.acc-news-list {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid var(--acc-line);
}
.acc-news-item {
	padding: .7em 0;
	border-bottom: 1px solid var(--acc-line);
}
.acc-news-meta {
	font-size: .85em;
	color: var(--acc-dim);
}
.acc-news-date {
	font-size: .85em;
	color: var(--acc-dim);
	white-space: nowrap;
}
/* 번역된 항목 아래의 원문 병기 줄. 주 내용(한국어)보다 낮게 보여야 한다. */
.acc-news-orig {
	font-size: .85em;
	color: var(--acc-dim);
	margin-top: .15em;
}
.acc-news-title {
	margin-top: .2em;
	line-height: 1.5;
}
.acc-source-link { color: var(--acc-accent); }
/* 표 안의 기종 이름. 줄바꿈되면 목록이 읽기 어려워진다. */
.acc-model {
	font-weight: 600;
	white-space: nowrap;
}
.acc-notice {
	background: var(--acc-head-bg);
	border: 1px solid var(--acc-line);
	border-radius: 3px;
	padding: .8em 1em;
	margin: 1em 0;
	color: var(--acc-text);
}
/* 주의를 끌어야 하는 안내. 색만으로 구분하지 않도록 왼쪽 띠를 함께 준다. */
.acc-notice-warn {
	border-left: 4px solid var(--acc-soon);
	background: var(--acc-soon-bg);
}