/* ─────────────────────────────────────────────────────────────────────
   ranktipster 게시판 — 경기분석 웹진형 (rev250)

   이 파일은 **웹진형에서만 불린다**(`_webzine.html` 첫 줄). 리스트형
   게시판(Forum)에는 한 바이트도 내려가지 않는다 — 그래서 이 파일을 어떻게
   고쳐도 기존 목록 화면은 달라지지 않는다.

   ─────────────────────────────────────────────────────────────────────
   색을 새로 만들지 않는다
   ─────────────────────────────────────────────────────────────────────
   `rtboard.css` 와 **같은 사이트 토큰**만 읽는다(`--rt-*`). 레이아웃
   (`layouts/portal_ever/css/userCSS/userCSS.html`)이 `:root` 와
   `html[data-theme="dark"]` 에 두 벌을 정의하므로, 여기서 테마별 색을
   따로 적을 필요가 없다 — 라이트/다크 전환이 그대로 따라온다(JS 없음).
   토큰이 없는 곳에서도 무너지지 않도록 `var(--x, 라이트 기본값)` 로 적는다.

   단추·알약의 규격(높이 33 · 라운드 6 · 테두리 #dfe3e8 · 글자 #5a6b80,
   활성은 초록 채움 + 흰 글자)은 `rtboard.css` 머리글이 적어 둔 랭킹 화면
   규격 그대로다. 새 규격을 만들지 않는다.

   ─────────────────────────────────────────────────────────────────────
   전부 `.rtw` 안으로 한정한다
   ─────────────────────────────────────────────────────────────────────
   이 파일의 모든 규칙은 `.rtw` 로 시작한다. 게시판 리스트형(`.rtb-*`)·
   레이아웃·다른 모듈로 새어 나갈 자리가 없다.
   ───────────────────────────────────────────────────────────────────── */

.rtw {
	--rtw-radius: 10px;
	--rtw-ctl-h: 33px;
	--rtw-line-idle: #dfe3e8;
	--rtw-ink-idle: #5a6b80;

	/* ── 픽 상자의 초록 (지시서 §4·§6) ─────────────────────
	   값은 지시서 색상 가이드에 적힌 그대로다. 사이트 토큰(`--rt-*`)으로는
	   이 다섯 단계(바탕 · 테두리 · 포인트 · 보조 · 구분선)를 낼 수 없고,
	   그렇다고 레이아웃의 `:root` 토큰 정의를 건드리지 않는다 — 거기에
	   손대면 게시판 밖 모든 화면이 함께 움직인다. 그래서 **이 스킨 안에서만**
	   쓰는 이름으로 여기에 둔다(`--rtw-*` 는 이 파일이 이미 쓰는 지역 이름).

	   라벨과 가운뎃점은 보조 글자색, 고른 값만 포인트 색이다 (지시서 §6).

	   ⚠ 라이트 포인트를 예전 `#17a058` 에서 내렸다. 그 값은 이 바탕에서 대비가
	     3.02:1 이라 13px 굵은 글씨 기준(4.5:1)에 못 미쳤다. 지시서 §8 이 WCAG
	     대비 확인을 요구하므로 사이트가 이미 쓰는 초록 `#0f7a35`(4.86:1)로
	     맞춘다. 다크는 예전 값이 이미 기준을 넘어 그대로다. */
	--rtw-pick-bg: #e8f5ee;
	--rtw-pick-border: #b7e1c1;
	--rtw-pick-label: #55685f;   /* 보조 · 5.30:1 */
	--rtw-pick-value: #0f7a35;   /* 포인트 · 4.86:1 */
	/* 카드에 손이 얹혔을 때만 쓰는 한 단계.
	   바탕은 밝아지고 테두리는 또렷해진다 — 글자색은 건드리지 않는다. */
	--rtw-pick-bg-hover: #f2faf6;
	--rtw-pick-border-hover: #a3d9bd;
	/* 구분선 — 종목 알약과 리그 사이의 짧은 세로선. 카드에는 알약이 없어
	   쓰이지 않고, 글 읽기 화면의 경기 머리에서만 나온다. */
	--rtw-divider: #e1e9e5;

	/* ── 카드 리그 이름의 금색 (지시서 §2·§4) ──────────────
	   글자와 그림은 같은 값(`ink`)을 쓴다 — 그림이 `currentColor` 라 저절로
	   따라온다. 줄과 점은 그 색을 절반만 쓴 장식이다(지시서가 정한 40~60%).

	   ⚠ 라이트 글자값이 지시서 권장값(`#b8861b`)과 다르다. 그 값은 흰 카드
	     위에서 대비가 3.25:1 이라 13px 글자 기준(4.5:1)에 못 미친다 —
	     지시서 §8 이 WCAG 대비 확인을 요구하므로 같은 금색을 한 단계 내린
	     `#946c15`(4.76:1)를 쓴다. 줄·점은 글자가 아니라 장식이라 권장값
	     그대로 둔다. 다크 `#d6b35a` 는 권장값 그대로다(8.09:1). */
	--rtw-lg-ink: #946c15;
	--rtw-lg-line: rgba(184, 134, 27, .5);

	display: block;
}
/* 다크 — 초록 다섯 단계는 사이트 토큰에서 나오지 않으므로 두 벌을 손으로
   적는다. 바꾸는 것은 위 여섯 값뿐이고, 규칙(`.rtw-pick`)은 한 벌 그대로다. */
html[data-theme="dark"] .rtw {
	--rtw-pick-bg: #0e2a1f;
	--rtw-pick-border: #1f5f3e;
	--rtw-pick-label: #9fb5aa;   /* 보조 · 7.06:1 */
	--rtw-pick-value: #21c06a;   /* 포인트 · 6.43:1 */
	--rtw-pick-bg-hover: #143b2b;
	--rtw-pick-border-hover: #2c7d53;
	--rtw-divider: #1a2420;
	--rtw-lg-ink: #d6b35a;
	--rtw-lg-line: rgba(214, 179, 90, .5);
}

/* Rank 공통 다크 토큰 연결. 현재 레이아웃은 data-theme 속성 없이 :root에
   다크 토큰을 제공하므로, 웹진 스킨의 이전 별칭을 실제 토큰에 연결한다. */
.rtb {
	--rt-surface: var(--rt-surface-1, #141922);
	--rt-text-3: var(--rt-muted, #6f7b8d);
	--rt-green: #0f7a35;
	--rt-green-text: var(--rt-positive, #2fbf85);
	--rt-danger: var(--rt-negative, #e0576b);
	--rt-danger-bg: color-mix(in srgb, var(--rt-negative, #e0576b) 12%, var(--rt-surface-2, #1a2029));
	--rt-danger-line: color-mix(in srgb, var(--rt-negative, #e0576b) 40%, var(--rt-border, #222a36));
	--rtb-line-idle: var(--rt-border, #222a36);
	--rtb-ink-idle: var(--rt-text-2, #7f8b9e);
}
.rtw {
	--rtw-line-idle: var(--rt-border, #222a36);
	--rtw-ink-idle: var(--rt-text-2, #7f8b9e);
	--rtw-pick-bg: var(--rt-surface-2, #1a2029);
	--rtw-pick-border: color-mix(in srgb, var(--rt-positive, #2fbf85) 45%, var(--rt-border, #222a36));
	--rtw-pick-label: var(--rt-text-2, #7f8b9e);
	--rtw-pick-value: var(--rt-positive, #2fbf85);
	--rtw-pick-bg-hover: var(--rt-surface-3, #202836);
	--rtw-pick-border-hover: var(--rt-positive, #2fbf85);
	--rtw-divider: var(--rt-border-soft, #1c2430);
	--rtw-lg-ink: var(--rt-warning, #f0a63c);
	--rtw-lg-line: color-mix(in srgb, var(--rt-warning, #f0a63c) 50%, transparent);
}

/* 관리자 화면은 `.rtb-panel is-manage` 두 이름을 함께 갖는다(스크립트가
   그 이름으로 판을 찾는다). 그 판의 옷만 여기서 되돌린다 — 특히
   `overflow:hidden` 을 풀지 않으면 달력이 판 밖에서 잘린다.
   이름 셋이라 `.rtb-panel` 한 줄보다 세다. */
.rtb .rtw.rtb-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/* Analysis 컨트롤은 공통 다크 입력 표면을 사용한다. 크기와 배치는 유지한다. */
.rtw .rtb-input,
.rtw .rtb-select,
.rtw .rtb-btn:not(.rtb-btn-primary):not(.rtb-btn-danger),
.rtw-write .rtb-input,
.rtw-write .rtb-select,
.rtw-write .rtb-btn:not(.rtb-btn-primary):not(.rtb-btn-danger),
.rtb-doc .rtb-input,
.rtb-doc .rtb-select,
.rtb-doc .rtb-btn:not(.rtb-btn-primary):not(.rtb-btn-danger) {
	background: var(--rt-input-bg, var(--rt-surface-2, #1a2029));
	border-color: var(--rt-border, #222a36);
	color: var(--rt-text, #e9edf3);
}
.rtw .rtb-input:hover,
.rtw .rtb-select:hover,
.rtw-write .rtb-input:hover,
.rtw-write .rtb-select:hover,
.rtb-doc .rtb-input:hover,
.rtb-doc .rtb-select:hover { border-color: var(--rt-border-strong, #38445a); }
.rtw .rtb-btn-primary,
.rtw-write .rtb-btn-primary,
.rtb-doc .rtb-btn-primary {
	background: var(--rt-green, #0f7a35);
	border-color: var(--rt-green, #0f7a35);
	color: #ffffff;
}
.rtb-doc .rtb-btn-delete { color: var(--rt-negative, #e0576b); }
.rtb-doc .rtb-btn-delete:hover {
	background: var(--rt-danger-bg);
	border-color: var(--rt-negative, #e0576b);
	color: var(--rt-negative, #e0576b);
}

/* 전체 선택 — 머리 오른쪽에 작게 선다. */
.rtw-selall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--rt-text-2, #7b8794);
	cursor: pointer;
	white-space: nowrap;
}
.rtw-selall input { width: 15px; height: 15px; margin: 0; accent-color: var(--rt-green, #0f7a35); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   머리 — 게시판 이름 · 팀 검색 · 관리 단추
   ═══════════════════════════════════════════════════════════════════ */
.rtw-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 0 14px;
}
.rtw-head-txt { min-width: 0; }
.rtw-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rt-text, #2b3440);
}
.rtw-sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--rt-text-2, #7b8794);
}
.rtw-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 팀 검색 — 리스트형 검색폼과 같은 부품(`.rtb-input` · `.rtb-search-btn`)을
   그대로 쓴다. 게시판 전용 입력 디자인을 하나 더 만들지 않는다. */
.rtw-search { display: flex; align-items: center; gap: 6px; margin: 0; }
.rtw-search .rtb-input { width: 200px; max-width: 46vw; }

/* 모바일 전용 자리(종목 필터 다음) — `_webzine.html` 이 이 클래스를 함께
   붙여 준다. 머리글 안에서는 `.rtw-head` 의 아래 여백(14px)이 다음 줄과의
   간격을 만들어 줬지만, 여기서는 `.rtw-search` 가 직계 형제라 스스로
   여백을 가져야 한다 — 아래(광고·결과)와의 간격을 필터 줄과 같은 14px로
   맞춘다(지시서 §13 "가로 overflow 없음" 검증 대상은 아니다, 세로 여백만). */
.rtw-search-below-filters { margin: 0 0 14px; }

/* ═══════════════════════════════════════════════════════════════════
   필터 줄 — 날짜 · 종목
   ═══════════════════════════════════════════════════════════════════ */
.rtw-filters { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px; }
/* 두 줄이 모두 조건에 걸려 빠질 수 있다(분류가 없고 경기일시 확장변수도
   없는 게시판). 그때 빈 상자가 아래 여백만 남기지 않게 한다. */
.rtw-filters:empty { display: none; }
.rtw-filter-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

/* 알약 하나. 링크와 `<summary>` 가 같은 옷을 입는다. */
.rtw-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--rtw-ctl-h);
	padding: 0 13px;
	border: 1px solid var(--rtw-line-idle);
	border-radius: var(--rtw-radius);
	background: var(--rt-surface, #ffffff);
	color: var(--rtw-ink-idle);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.rtw-pill:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }
.rtw-pill:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; }
.rtw-pill.is-on {
	background: var(--rt-green, #0f7a35);
	border-color: var(--rt-green, #0f7a35);
	color: #ffffff;
}
.rtw-pill.is-on:hover { color: #ffffff; }
/*
  종목 알약 아이콘 (작업지시서: /analysis 종목 카테고리 아이콘 — Prediction과
  동일한 컬러 아이콘으로 교체).

  Prediction `.pd-chip-icon`/`.pd-chip-icon-img`(prediction.css)과 같은
  크기값을 그대로 맞춘다 — 시각 크기가 다르면 "완전히 같다"고 할 수 없다.
  둘 다 고정 색(SVG 는 파일 자체 색, 이모지는 글꼴 색)이라 `.rtw-pill` 의
  `color`(평소/hover/`is-on`)에 영향받지 않는다 — 색 규칙을 따로 안 둔다.
  `flex:0 0 auto` 로 좁은 글자(예: `All`)가 있어도 아이콘이 눌리지 않게
  한다. "All"·종목이 아닌 분류는 아이콘 자체가 없어(위 `icon_src`/
  `icon_emoji` 둘 다 `''`) 이 규칙의 영향을 받지 않는다.
*/
.rtw-pill-icon-img { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.rtw-pill-icon-emoji { font-size: 14px; line-height: 1; flex: 0 0 auto; }

/* 관리자에게만 보이는 설정 안내 (확장변수가 없을 때) */
.rtw-hint {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--rt-danger-line, #f3c6c6);
	border-radius: 8px;
	background: var(--rt-danger-bg, #fdf3f3);
	color: var(--rt-danger, #b42318);
	font-size: 12px;
	line-height: 1.6;
}
.rtw-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* ── 달력 — `<details>` 하나로 연다(JS 없음) ─────────────── */
.rtw-cal { position: relative; }
.rtw-cal > summary { list-style: none; }
.rtw-cal > summary::-webkit-details-marker { display: none; }
.rtw-cal-panel {
	position: absolute;
	z-index: 30;
	top: calc(var(--rtw-ctl-h) + 6px);
	left: 0;
	width: 268px;
	padding: 12px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtw-radius);
	background: var(--rt-surface, #ffffff);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}
.rtw-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 8px;
}
.rtw-cal-title { font-size: 13px; font-weight: 700; color: var(--rt-text, #2b3440); }
.rtw-cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--rtw-line-idle);
	border-radius: 6px;
	background: var(--rt-surface, #ffffff);
	color: var(--rtw-ink-idle);
	font-size: 14px;
	line-height: 1;
}
.rtw-cal-nav:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }
.rtw-cal-wd, .rtw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rtw-cal-wd { padding-bottom: 4px; }
.rtw-cal-wd span {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--rt-text-3, #a3adb8);
}
.rtw-cal-wd span.is-sun { color: var(--rt-danger, #b42318); }
.rtw-cal-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--rt-text, #2b3440);
}
a.rtw-cal-cell:hover { background: var(--rt-surface-2, #f4f6f8); color: var(--rt-green-text, #0f7a35); }
.rtw-cal-cell.is-sun { color: var(--rt-danger, #b42318); }
.rtw-cal-cell.is-today { border: 1px solid var(--rt-green, #0f7a35); }
.rtw-cal-cell.is-on {
	background: var(--rt-green, #0f7a35);
	color: #ffffff;
	border-color: var(--rt-green, #0f7a35);
}
.rtw-cal-close {
	display: block;
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	color: var(--rt-text-2, #7b8794);
}
.rtw-cal-close:hover { color: var(--rt-green-text, #0f7a35); }

/* ═══════════════════════════════════════════════════════════════════
   공지 — 경기가 아니므로 카드로 만들지 않고 한 줄씩 위에 세운다
   ═══════════════════════════════════════════════════════════════════ */
.rtw-notices { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; }
.rtw-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-left: 3px solid var(--rt-green, #0f7a35);
	border-radius: 8px;
	background: var(--rt-surface-2, #f4f6f8);
}
.rtw-notice-link {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--rt-text, #2b3440);
}
.rtw-notice-link:hover { color: var(--rt-green-text, #0f7a35); }

/* ═══════════════════════════════════════════════════════════════════
   카드 격자 — PC 3열 · 중간 2열 · 좁은 화면 1열 (지시서 §22·§23)
   ═══════════════════════════════════════════════════════════════════ */
.rtw-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* 날짜별 섹션 머리("TODAY — SEP 06", 경기 일정 중심 정리 작업지시서).
   격자 안에 있지만 카드가 아니다 — `grid-column` 을 명시하지 않으면
   격자가 이 칸도 카드처럼 1/3 폭으로 접어 버린다. 새 색을 만들지 않고
   `.rtw-title`(진한 글자) · `.rtw-sub`(보조 글자) 이 이미 쓰는 토큰만
   그대로 가져다 쓴다. */
.rtw-date-heading {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--rt-border, #e2e6ea);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rt-text-2, #7b8794);
}
.rtw-date-heading:first-child { margin-top: 0; }

/* 카드 안은 세 덩어리다 — 첫 줄(종목·리그) · 대진 · 픽.
   덩어리 사이는 `gap` 하나로만 벌린다(마진을 섞지 않는다). 로고를 키운
   만큼(34→44) 위아래 여백을 조금 줄여, 카드가 실제로 높아지는 폭을
   최소로 잡는다 (지시서 §2). */
.rtw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
	padding: 13px 14px 12px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtw-radius);
	background: var(--rt-surface, #ffffff);
}
.rtw-card:hover { border-color: var(--rt-green, #0f7a35); }
.rtw-card:focus-within { border-color: var(--rt-green, #0f7a35); }

/* 카드 전체가 글로 가는 링크다. 카드에 링크는 이것 하나뿐이라 읽어 주는
   기계에도 "링크 하나"로 들린다(이름은 마크업의 `aria-label` — 글 제목).
   카드에 제목 글자를 내지 않으므로 이 링크는 자리를 차지하지 않는
   덮개다 — 빈 줄도, 빈 간격도 남기지 않는다. onclick 으로 이동시키지
   않는다. */
.rtw-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--rtw-radius); }
.rtw-link:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: -2px; }
/* 체크상자는 그 덮개보다 위에 있어야 눌린다.
   예전에는 종목 알약도 여기 함께 적혀 있었다. 카드가 알약을 그리지 않게
   되면서(지시서 §3) 이 카드 안에는 그 이름을 가진 것이 없어 규칙이 헛돌았다.
   ⚠ `.rtw-sport` 규칙 자체는 아래에 그대로 둔다 — 글 읽기 화면의 경기 머리가
     여전히 알약을 그린다 (지시서 §12: 확실히 카드 전용인 것만 지운다). */
.rtw-check { position: relative; z-index: 2; }

/* ── 첫 줄 — 종목 · 리그 · 배지 ───────────────────────
     종목·리그는 카드 **전체 폭**의 한가운데 선다. 바로 아래 대진(홈 · VS ·
     원정)과 픽이 이미 카드 한가운데를 축으로 서 있으므로, 이 줄만 왼쪽에
     붙어 있으면 카드의 중심축이 위아래로 어긋난다.

     ⚠ 가운데를 세는 기준은 "체크상자를 뺀 나머지"가 아니라 **카드 그
       자체**다. 그래서 체크상자를 줄의 흐름에서 빼내고(아래), 관리 모드에서는
       그 자리를 **양쪽에 똑같이** 비워 둔다. 왼쪽만 비우면 가운데가 그 절반
       만큼 오른쪽으로 밀려 결국 지금과 같은 문제가 남는다. */
.rtw-top { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; }
/* 리그 이름 좌우의 얇은 금색 줄과 점 (지시서 §2).
   마크업이 아니라 여기서 그린다 — 장식이라 읽어 주는 기계에 들리면 안 된다.

   줄 하나가 두 그림으로 되어 있다: 가로 1px 선과 지름 5px 짜리 점. 점은
   **안쪽 끝**(리그 이름 쪽)에 붙는다. 그래서 왼쪽 줄은 점이 오른쪽에,
   오른쪽 줄은 점이 왼쪽에 온다 — 두 줄이 서로의 거울이다.

   `flex: 1 1 0` 이라 남는 폭을 양쪽이 **똑같이** 나눠 가진다. 그래서 리그
   이름은 언제나 카드 한가운데에 선다. 이름이 길어지면 줄이 먼저 줄고,
   더 길면 줄이 사라진 뒤 이름이 말줄임된다 (지시서 §2·§6). */
.rtw-top::before,
.rtw-top::after {
	content: '';
	flex: 1 1 0;
	min-width: 0;
	height: 5px;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--rtw-lg-line), var(--rtw-lg-line)),
		radial-gradient(circle closest-side, var(--rtw-lg-line) 100%, transparent 100%);
	background-size: calc(100% - 7px) 1px, 5px 5px;
}
.rtw-top::before { background-position: left center, right center; }
.rtw-top::after { background-position: right center, left center; }
.rtw-check { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; accent-color: var(--rt-green, #0f7a35); cursor: pointer; }
/* 체크상자는 보이는 자리도 크기도 그대로다 — 카드 안쪽 왼쪽 위, 15px.
   흐름에서만 빠지므로 종목·리그의 가운데 계산에 끼지 않는다. `left:0` 은
   `.rtw-top` 의 안쪽 상자 왼쪽이라, 아래 여백 규칙이 붙어도 자리가 밀리지
   않는다. 누르기·전체 선택·Manage Posts 는 마크업이 그대로라 그대로 된다. */
.rtw-top .rtw-check { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
/* 체크상자 폭(15) + 사이 간격(8). 체크상자는 관리자에게만 보이므로
   (`$grant->manager` → 판에 `is-manage`), 그 화면에서만 양쪽을 비운다.
   일반 회원 카드는 종목·리그가 카드 폭을 온전히 다 쓴다. */
.is-manage .rtw-top { padding: 0 23px; }
/* 종목 알약 — 그림 + 이름 (지시서 §3).
   높이를 20 → 22 로 두 픽셀 키웠다. 지시서가 정한 그림 크기가 16px 이라
   20px 안에서는 위아래 여백이 2px 밖에 남지 않아 그림이 알약을 꽉 채운
   것처럼 보인다. 22px 이면 3px 씩 남아 이름과 그림이 한 줄로 앉는다.
   `gap` 6px 은 지시서 §7 의 "아이콘 + 텍스트 간격 6~8px" 안이다. */
.rtw-sport {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--rt-surface-3, #eef1f5);
	color: var(--rt-text, #2b3440);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	/* 자리가 모자라면 **리그가 줄고 종목은 남는다** (지시서 §7). `flex:0 0 auto`
	   라 종목은 flex 로 눌리지 않고, 이 값만이 유일한 한계다. 40% 로는 좁은
	   화면에서 긴 종목 이름(`アメリカンフットボール` · `Hockey sobre hielo`)이
	   먼저 잘렸다 — 잘려야 할 쪽은 리그다. */
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 그림은 줄어들지 않는다 — 좁아지면 이름 쪽이 줄어든다 (지시서 §7).
   색을 정하지 않는다: SVG 가 `currentColor` 라 알약 글자색을 그대로 따른다.
   그래서 종목마다 다른 알약 바탕 위에서도 그림과 이름의 색이 늘 같다. */
.rtw-sport-ico { flex: 0 0 auto; width: 16px; height: 16px; }
/* 자를 대상. 알약 자체는 `inline-flex` 라 `text-overflow` 가 걸리지 않는다 —
   이름을 이 상자에 담아야 말줄임이 실제로 나온다. */
.rtw-sport-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtw-sport.is-soccer { background: #17683f; color: #ffffff; }
.rtw-sport.is-basketball { background: #a4501a; color: #ffffff; }
.rtw-sport.is-baseball { background: #1d4ed8; color: #ffffff; }
.rtw-sport.is-ice_hockey { background: #0e6b7a; color: #ffffff; }
.rtw-sport.is-tennis { background: #6b7a0e; color: #ffffff; }
.rtw-sport.is-volleyball { background: #4c3a91; color: #ffffff; }
.rtw-sport.is-american_football { background: #7a2e0e; color: #ffffff; }
.rtw-sport.is-esports { background: #3d3f8f; color: #ffffff; }
.rtw-sport.is-mma { background: #8f1c13; color: #ffffff; }

/* 리그명이 아무리 길어도 카드 폭을 늘리지 않는다 (지시서 §25).
   길면 이 글자만 말줄임으로 잘린다 — 카드도, 종목 알약도 그대로다.

   ⚠ `flex-grow` 를 0 으로 둔다. 1 이면 리그가 남는 폭을 전부 삼켜 줄에
     빈자리가 없어지고, 그러면 `justify-content:center` 가 옮길 것이 없어
     종목이 다시 왼쪽 끝에 붙는다 — 가운데 정렬이 무너지는 자리가 여기다.

   글자는 종목보다는 조용하고 팀 이름보다는 약해야 한다 (지시서 §4·§10).
   그래서 본문색을 보조색에 조금 섞는다. 두 값 모두 사이트 토큰이라
   라이트에서는 또렷해지고 다크에서는 밝아진다 — 테마별 규칙을 따로 두지
   않는다. 앞줄에 토큰 한 벌을 먼저 적어 두었으므로 `color-mix` 를 모르는
   브라우저는 예전 색으로 남는다(글자가 사라지지 않는다). */
.rtw-league {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	/* 이 줄에 남은 것은 리그 이름 하나다. 알약이 사라졌으니 그 옆에서 버티려고
	   세게 쓸 이유도 함께 사라졌다.

	   지시서 §7 이 정한 차례에서 리그는 **맨 끝**이다(로고 > 팀명 > 픽 >
	   VS·경기시각 > 리그). 그래서 경기시각과 **같은 색**을 쓰되 굵기만 한
	   단계 낮춘다(600 → 500). 같은 12px 이라 굵기 차이가 그대로 세기 차이가
	   된다 — 리그가 경기시각보다 조용해진다.

	   색은 사이트 토큰 하나뿐이다. 흰색에 가깝게 끌어올리던 `color-mix` 는
	   걷어냈다 (지시서 §5 "지나치게 밝은 흰색 금지" · §9 "새 하드코딩 색상
	   최소화"). 라이트·다크 모두 토큰이 알아서 따라온다. */
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--rt-text-2, #7b8794);
}
/* ── 카드의 리그 이름 — 금색 강조 (지시서 §2) ──────────
     `.rtw-top` 은 카드에만 있다. 글 읽기 화면의 경기 머리는 `.rtw-mh-top` 이라
     이 규칙에 걸리지 않는다 — 그쪽은 종목 알약과 함께 예전 모습 그대로다.

     배경도 테두리도 두지 않는다. 알약으로 만들지 않는 것이 지시서의 요구다
     ("배경 없음, 텍스트 중심 디자인 유지"). 강조는 색과 굵기로만 준다. */
.rtw-top .rtw-league {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 위 `.rtw-league` 의 말줄임 세 줄은 이제 안쪽 상자가 맡는다. flex 판에
	   직접 놓인 글자에는 `text-overflow` 가 걸리지 않기 때문이다. */
	overflow: visible;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--rtw-lg-ink);
}
/* 그림은 줄어들지 않는다 — 좁아지면 이름 쪽이 줄어든다.
   색을 정하지 않는다: SVG 가 `currentColor` 라 위 금색을 그대로 따른다. */
.rtw-top .rtw-sport-ico { width: 16px; height: 16px; }
.rtw-league-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 알약과 리그 사이의 짧은 세로선 (지시서 §2·§5 그림).
   알약이 없는 분류(종목 표에 없는 이름)에서는 선도 없다 — `+` 가 그 조건을
   그대로 나타낸다. 리그 글자보다 짧게 세워 두 덩어리를 가르되 끊지 않는다. */
.rtw-sport + .rtw-league::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	/* 줄의 `gap`(8px)과 같은 값이라 선 좌우가 대칭이다: 알약 —8— │ —8— 리그. */
	margin-right: 8px;
	vertical-align: -1px;
	background: var(--rtw-divider);
}

/* ── 대진 — 홈 · VS/시각 · 원정 ──────────────────────
     세 칸이 한 축을 이룬다. 로고 · 홈/원정 · 팀명이 같은 순서로 쌓이고,
     가운데 칸(VS · 경기시각)이 그 사이에 선다. 눈이 가는 차례는

         팀명(가장 진하게) → 로고 → 경기시각 → 홈/원정(가장 옅게)

     이다. 홈/원정은 어느 쪽인지 알려 주는 꼬리표라 팀명보다 세면 안 된다
     (지시서 §6). VS 는 중앙축이지 강조가 아니므로 초록을 쓰지 않는다. */
.rtw-match {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	gap: 8px;
}
.rtw-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; width: 100%; }

/* 로고가 없는 팀 — 첫 글자 동그라미. 로고 칸(44)보다 두 픽셀 작게 잡는다.
   꽉 찬 원은 여백을 품은 엠블럼보다 커 보이므로, 같은 44 로 맞추면 오히려
   동그라미 쪽이 커 보인다 (지시서 §5). */
.rtw-mono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	/* 위아래 1px 씩 — 흐름에서 차지하는 높이를 로고 칸(44)과 같게 맞춘다. */
	margin: 1px 0;
	border-radius: 50%;
	background: var(--rt-surface-2, #f4f6f8);
	border: 1px solid var(--rt-border-soft, #eef0f3);
	color: var(--rt-text-2, #7b8794);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}
/* 팀 로고 — 카드에서 가장 먼저 보여야 할 경기 정보다. 첫 글자 동그라미와
   **같은 자리·같은 줄 높이**라 로고가 있는 카드와 없는 카드가 한 줄에
   나란히 서도 어긋나지 않는다. 엠블럼 모양은 그대로 둔다 — 동그랗게
   자르지도, 배경을 깔지도 않는다(투명 PNG 가 그대로 보인다 · 지시서 §4).
   가로가 세로보다 넉넉한 것은 가로로 긴 워드마크 로고를 위해서다.
   `contain` 이라 어떤 비율이든 찌그러지지 않는다. */
.rtw-logo {
	flex: 0 0 auto;
	width: 52px;
	height: 44px;
	object-fit: contain;
	max-width: 100%;
}
.rtw-side {
	display: inline-flex;
	align-items: center;
	height: 17px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--rt-surface-2, #f4f6f8);
	color: var(--rt-text-2, #7b8794);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* 긴 팀명은 두 줄까지 보이고 그 다음은 잘린다 (지시서 §24).
   `min-width:0` 이 있는 격자 칸 안이라 이름이 길어도 카드가 넓어지지 않는다. */
.rtw-team-name {
	width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rt-text, #2b3440);
}
/* 가운데 칸 — VS 와 경기시각은 **한 덩어리**다 (지시서 §8).
   `padding-top` 은 VS 알약을 로고 높이(44)의 한가운데에 세우는 값이다:
   (44 − 24) / 2 = 10. 로고 크기를 바꾸면 이 값도 같이 본다. */
.rtw-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; padding-top: 10px; }
.rtw-vs-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 24px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--rt-surface-3, #eef1f5);
	color: var(--rt-text-2, #7b8794);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
/* 경기시각 — 한 줄로 둔다. 두 줄로 나누면 카드만 높아진다 (지시서 §8).
   숫자 폭을 고정해(`tabular-nums`) 카드마다 자릿수가 흔들리지 않는다. */
.rtw-time {
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--rt-text-2, #7b8794);
	white-space: nowrap;
}

/* 잠금 표시 — 카드에서는 첫 줄(종목·리그) 끝에, 공지에서는 제목 앞에 붙는다. */
.rtw-lock { flex: 0 0 auto; font-size: 12px; }
.rtw-notice-link .rtw-lock { margin-right: 4px; }

/* ── 픽 ────────────────────────────────────────────────
     `PICK · gwangju` 한 줄을 카드 한가운데 세운다. 가운데 정렬은
     `text-align` 이 아니라 flex 로 한다 — 이 줄은 글자 두 덩어리가 나란히
     선 flex 판이라 `justify-content` 가 실제로 덩어리를 옮긴다 (지시서 §9).

     색은 **초록 한 벌**이다 (지시서 §4). 상자를 초록으로 칠하는 것이 아니라,
     아주 옅은(다크에서는 아주 어두운) 초록 바탕에 초록 글자를 얹는다.

     높이는 40~44px 로 둔다 (지시서 §6). 값 글자가 13px 이라 줄 높이가 약
     20px 이고, 위아래 10px 씩과 테두리 2px 을 더해 약 42px 이 된다.
     모서리는 카드와 같은 값(`--rtw-radius`)을 쓴다 — 예전의 8px 은 카드
     모서리보다 작아 상자가 카드 안에서 따로 놀았다. */
.rtw-pick {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	/* 한 줄에 선 카드들은 격자가 같은 높이로 늘려 준다. 픽 상자를 카드
	   아래쪽에 붙여 두면, 팀 이름이 두 줄인 카드가 섞여도 픽 줄이 옆
	   카드와 같은 높이에서 만난다. 카드가 높아지지는 않는다. */
	margin-top: auto;
	padding: 10px 12px;
	border: 1px solid var(--rtw-pick-border);
	border-radius: var(--rtw-radius);
	background: var(--rtw-pick-bg);
	font-size: 12px;
	color: var(--rtw-pick-label);
	/* 색 두 가지만, 짧게. 움직임(transform)도 그림자도 흐림도 없다 —
	   지시서 §8 이 성능에 영향 주는 과한 효과를 금한다. 색 전환은 합성
	   단계에서 끝나고 배치를 다시 계산하지 않는다. */
	transition: background-color .12s linear, border-color .12s linear;
}
/* 손이 얹혔을 때 한 단계 밝아진다 (지시서 §3).
   ⚠ 대상은 `.rtw-pick:hover` 가 아니라 **카드**다. 픽 상자는 그 자체로 누르는
     자리가 아니고, 카드 전체가 글로 가는 링크 하나(`.rtw-link`)이기 때문이다 —
     카드 어디에 손을 얹든 같은 반응이 나와야 한 덩어리로 읽힌다.
     `:focus-within` 을 함께 적는 것은 키보드로 옮겨 다닐 때도 같은 표시를
     주기 위해서다(카드 테두리가 이미 쓰는 방식과 같다).
   상세 화면의 픽(`.is-detail`)은 카드 안이 아니라서 이 규칙에 걸리지 않는다 —
   누를 수 없는 자리가 손짓에 반응하지 않는 것이 맞다. */
.rtw-card:hover .rtw-pick,
.rtw-card:focus-within .rtw-pick {
	background: var(--rtw-pick-bg-hover);
	border-color: var(--rtw-pick-border-hover);
}
/* 라벨은 꼬리표다 — 작고 옅게. 가운뎃점은 두 글자 덩어리를 잇는 장식이라
   마크업이 아니라 여기서 붙인다(번역할 글자가 아니다). */
.rtw-pick-label {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
/* 가운뎃점은 라벨과 값을 잇는 장식이라 마크업이 아니라 여기서 붙인다
   (번역할 글자가 아니다). 색은 라벨의 회색이 아니라 **초록**이다
   (지시서 §5 "구분자(·): 초록") — 옅게 깔던 `opacity` 도 함께 걷는다. */
.rtw-pick-label::after { content: '·'; margin-left: 5px; color: var(--rtw-pick-value); }
.rtw-pick-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	/* 실제로 고른 팀 — 이 줄에서 가장 세게 읽혀야 할 한 덩어리다.
	   라벨보다 진한(다크에서는 더 선명한) 파랑에 굵기·크기가 함께 붙는다. */
	color: var(--rtw-pick-value);
}

.rtw-empty {
	margin: 0;
	padding: 56px 20px;
	text-align: center;
	color: var(--rt-text-2, #7b8794);
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtw-radius);
	background: var(--rt-surface, #ffffff);
}

/* ── 아래 줄 — 쪽 넘김(가운데) · 관리/글쓰기(오른쪽) ──
     쪽 넘김은 리스트형 Forum 과 **같은 부품**(`.rtb-page` · `.rtb-pg`)이다.
     웹진 전용 쪽 넘김 디자인은 만들지 않는다 (지시서 §18). */
.rtw-foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: 'left page right';
	align-items: center;
	gap: 10px;
	padding: 18px 0 0;
}
.rtw-foot .rtb-page { grid-area: page; margin: 0; }
.rtw-foot-right { grid-area: right; display: flex; align-items: center; gap: 8px; justify-self: end; }

/* ═══════════════════════════════════════════════════════════════════
   다크 — 토큰이 못 덮는 곳만 손댄다
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .rtw-pill,
html[data-theme="dark"] .rtw-cal-nav {
	border-color: var(--rt-border, #33414f);
	background: var(--rt-surface-2, #212c39);
	color: var(--rt-text-2, #9aa7b6);
}
html[data-theme="dark"] .rtw-pill.is-on {
	background: var(--rt-green, #0f7a35);
	border-color: var(--rt-green, #0f7a35);
	color: #ffffff;
}
html[data-theme="dark"] .rtw-cal-panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
/* 픽 상자는 여기에 없다 — 파일 첫머리 `html[data-theme="dark"] .rtw` 에서
   값 네 개(`--rtw-pick-*`)만 갈아 끼운다. 규칙을 다크용으로 다시 적으면
   두 벌이 언젠가 서로 어긋난다. 바꿀 것은 색뿐이므로 색만 바꾼다. */
html[data-theme="dark"] .rtw-search .rtb-input { color: var(--rt-text, #e4e8ee); }

/* ═══════════════════════════════════════════════════════════════════
   좁은 화면 — 카드 1열. 가로 스크롤을 만들지 않는다 (지시서 §22)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.rtw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 태블릿 — 카드 배치는 그대로 두고 안쪽만 조인다 (지시서 §7).
   "카드 내부 패딩 축소 · 폰트 크기 1~2px 축소" 그대로다. 열 수를 정하는
   지점(1100px)은 건드리지 않는다 — 지시서 §7 이 PC 레이아웃 유지를 먼저
   요구하고, §1 도 기존 반응형을 유지하라고 한다.
   이 규칙은 폭이 더 좁아져도 계속 걸린다(아래 700px 규칙이 그 위에 얹힌다). */
@media (max-width: 1023px) {
	.rtw-card { gap: 10px; padding: 11px 12px 10px; }
	.rtw-team-name { font-size: 13px; }
	.rtw-time { font-size: 11.5px; }
	.rtw-league { font-size: 11.5px; }
	/* 픽 상자는 폭을 100% 로 유지한 채(카드 안쪽을 다 쓴다) 높이만 조금
	   낮춘다 — 지시서 §6 이 정한 40~44px 아래로 내려가지 않게 10 → 9. */
	.rtw-pick { padding: 9px 10px; }
}
/* 모바일 — 종목 그림만 두 픽셀 줄인다 (지시서 §4 "16px(PC) · 14px(Mobile)").
   리그 이름의 크기·중앙 정렬·말줄임은 그대로다. 열 수를 정하는 지점
   (700px)은 건드리지 않는다 — 여기서 옮기면 카드 배치가 함께 움직인다. */
@media (max-width: 767px) {
	.rtw-top .rtw-sport-ico { width: 14px; height: 14px; }
}
@media (max-width: 700px) {
	.rtw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	/* 좁은 화면에서는 로고를 네 픽셀 줄인다 — 320px 에서도 홈·VS·원정 세
	   칸이 서로 밀지 않는다 (지시서 §17). 마크업은 그대로다: PC 와 같은
	   카드를 폭 규칙만으로 다르게 세운다. 세 값(로고 높이 · 동그라미 ·
	   VS 윗여백)은 함께 움직인다 — (40 − 24) / 2 = 8. */
	.rtw-logo { width: 46px; height: 40px; }
	.rtw-mono { width: 38px; height: 38px; margin: 1px 0; }
	.rtw-vs { padding-top: 8px; }

	.rtw-head { padding-bottom: 12px; }
	.rtw-title { font-size: 18px; }
	.rtw-head-acts { width: 100%; }
	.rtw-search { width: 100%; }
	.rtw-search .rtb-input { flex: 1 1 auto; width: auto; max-width: none; }

	/* 필터는 한 줄로 두고 넘치면 옆으로 민다 — 줄바꿈으로 쌓으면
	   종목 아홉 개가 화면 절반을 먹는다. 세로 스크롤이 아니라
	   **이 줄만** 가로로 밀린다(문서 폭은 그대로다). */
	.rtw-filter-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.rtw-filter-row::-webkit-scrollbar { display: none; }
	.rtw-pill { flex: 0 0 auto; height: 31px; padding: 0 11px; font-size: 12px; gap: 5px; }
	.rtw-pill-icon-img { width: 14px; height: 14px; }
	.rtw-pill-icon-emoji { font-size: 13px; }

	/* 날짜 행은 달력을 자르지 않게 하고, 패널은 행 왼쪽을 기준으로 연다. */
	.rtw-filter-row:has(> .rtw-cal) {
		position: relative;
		flex-wrap: wrap;
		overflow: visible;
	}
	.rtw-cal { position: static; }
	.rtw-cal-panel { width: min(268px, 84vw); }

	.rtw-foot {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'page' 'right';
		gap: 12px;
	}
	.rtw-foot-right { justify-self: stretch; }
	.rtw-foot-right .rtb-btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   빈 목록일 때 좌우 세로광고를 Footer 가 가리지 않게 (2026-08-25,
   2026-09-04 개정 — 고정 1680px → 실측 가용공간 판정 연동)

   좌우 세로광고(`.aa-insert-ad-side`, addons/aa_insert_ad)는
   `position:fixed; top:90px;`, 이미지 규격 160×600 이라 뷰포트 기준
   90px~690px 를 차지한다. 예전에는 같은 파일의 고정
   `@media (min-width:1680px)` 를 그대로 재사용했지만, 지금 좌우
   광고는 `addons/aa_insert_ad/tpl/side_ad_fit.js` 가 본문 wrapper
   실측 가용공간으로 좌/우 독립 판정한다(작업지시서: 가용공간 기반
   반응형 개선). 그래서 이 규칙도 고정 폭이 아니라 그 스크립트가
   광고를 하나라도 켰을 때 `<html>` 에 붙이는 `rt-side-ad-active`
   클래스를 그대로 따라간다 — 새 breakpoint 를 만들지 않는다.

   Footer(`layouts/portal_ever/inc/footer_area/copyright.html`)는 보통
   문서 흐름이라, 분석 글이 하나도 없으면 `.rtw` 가 머리글+거르기+빈
   안내(`.rtw-empty`, 56px×2 안팎)만으로 끝나 버려 문서 높이가 690px에
   못 미치고, Footer 가 광고 중간에서 겹쳐 그려진다(Footer 쪽 z-index
   가 광고보다 높다).

   헤더(`.rt-hd-in` min-height 74px + 테두리 1px)와 `.contents_area_wrap0`
   위 여백(5px)을 더하면 `.rtw` 상단은 문서 기준 약 80px 지점에서
   시작한다. 광고 하단(690px) 뒤에 여유(약 40px)를 두려면 `.rtb` 의
   아래 여백(28px)을 뺀 `.rtw` 자체 최소 높이가 약 622px 이상이어야
   한다 — 여기에 계산 오차 여유를 더해 640px 로 둔다.

   `.rtw` 는 이 파일(웹진형)에서만 쓰는 이름이라 목록형 게시판이 쓰는
   `.rtb-panel` 에는 닿지 않는다 — `/support` 같은 다른 게시판 화면은
   전혀 움직이지 않는다. 글이 쌓여 실제 높이가 이 값을 넘으면
   `min-height` 라 그대로 자연스럽게 늘어난다(고정 height 아님).

   ⚠ 글 읽기 화면의 경기 머리(`.rtw-mh`, 아래 §)도 디자인 토큰을
   물려받으려고 `.rtw` 클래스를 함께 쓴다. 이 규칙을 그대로 두면 그
   머리글(실제 높이 약 250px)까지 640px로 늘어나 PICK 상자 밑에 큰
   빈 여백이 생긴다 — 이 규칙의 목적(빈 목록판 높이 보정)과 무관하므로
   `:not(.rtw-mh)`로 제외한다. */
html.rt-side-ad-active .rtw:not(.rtw-mh) { min-height: 640px; }

/* ═══════════════════════════════════════════════════════════════════
   글 읽기 — 경기 머리 (rev254)

   `_match_header.html` 한 조각의 옷이다. 그 조각은 **웹진형 글읽기에서만**
   불리므로(`_read.html` 의 `$rtr_webzine`), 리스트형 Forum 상세 화면에는
   이 아래 규칙이 닿을 자리가 없다 (지시서 §30).

   ─────────────────────────────────────────────────────────────────
   카드 규칙을 고치지 않는다 — 크기만 덧쓴다 (지시서 §23·§31)
   ─────────────────────────────────────────────────────────────────
   대진·로고·첫 글자 동그라미·VS·경기시각·팀명·홈원정·예측은 목록 카드가
   쓰던 부품 그대로다. 여기서는 `.is-detail` 이 **붙은 것만** 골라 크기와
   폭을 키운다. 이름이 둘(`.rtw-match.is-detail .rtw-logo`)이라 카드용 한
   줄보다 세고, 카드에는 `.is-detail` 이 없으므로 목록 화면은 이 파일을
   고치기 전과 한 픽셀도 다르지 않다.

   색은 한 값도 새로 만들지 않는다 — 전부 카드가 쓰던 `--rt-*` 토큰이라
   라이트·다크가 저절로 따라온다(테마별 규칙 없음 · 지시서 §29).
   ═══════════════════════════════════════════════════════════════════ */

/* 판 안쪽 여백은 글 머리(`.rtb-doc-head`)가 쓰던 값 그대로라 본문과
   왼쪽 시작점이 같다. 아래 선 하나가 경기 머리와 분석 본문을 가른다 —
   `MATCH ANALYSIS` 같은 띠는 두지 않는다 (지시서 §17). */
.rtw-mh {
	/* 넓은 화면에서 홈과 원정이 서로 멀어지지 않게 가운데로 모은다.
	   판은 넓어도 경기 정보는 한 덩어리로 읽힌다. */
	--rtw-mh-w: 820px;
	/* 리그 좌우 줄·점의 색 — **목록 카드와 같은 금색**이다 (rev262).
	   예전에는 초록이었는데, 카드를 눌러 이 화면이 열리므로 같은 자리에
	   같은 색이 이어져야 한 화면으로 읽힌다. 값을 새로 만들지 않고 카드가
	   쓰는 토큰(`--rtw-lg-line`)을 그대로 가져온다 — 라이트·다크가 함께
	   따라오고, 나중에 금색을 바꿔도 두 화면이 같이 움직인다. */
	--rtw-mh-line: var(--rtw-lg-line);
	padding: 22px var(--rtb-pad, 20px) 20px;
	border-bottom: 1px solid var(--rt-border, #e2e6ea);
}

/* 첫 줄 — 리그 하나. 아래 대진·픽과 **같은 중앙축**에 세운다 (지시서 §2·§3).
   종목 알약은 그리지 않으므로 이 줄에 남는 것은 리그 이름뿐이다. */
.rtw-mh-top {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: var(--rtw-mh-w);
	margin: 0 auto 18px;
}
/* 리그 좌우의 얇은 초록 줄과 점. 목록 카드가 쓰는 방법과 같되 색만 다르다
   — 카드는 금색, 이 화면은 사이트의 초록이다 (지시서 §27 이 상세 화면에서
   금색 계열을 쓰지 못하게 한다).

   줄 하나가 두 그림이다: 가로 1px 선과 지름 5px 점. 점은 **안쪽 끝**(리그
   쪽)에 붙어 두 줄이 서로의 거울이 된다. `flex: 1 1 0` 이라 남는 폭을
   양쪽이 똑같이 나눠 가지므로 리그는 언제나 정중앙에 선다.

   색은 사이트 토큰 하나에서 나온다. 앞줄에 토큰을 그대로 적어 두어
   `color-mix` 를 모르는 브라우저에서도 줄이 사라지지 않는다. */
.rtw-mh-top::before,
.rtw-mh-top::after {
	content: '';
	flex: 1 1 0;
	min-width: 0;
	max-width: 120px;
	height: 5px;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--rt-green-text, #0f7a35), var(--rt-green-text, #0f7a35)),
		radial-gradient(circle closest-side, var(--rt-green-text, #0f7a35) 100%, transparent 100%);
	background-image:
		linear-gradient(var(--rtw-mh-line), var(--rtw-mh-line)),
		radial-gradient(circle closest-side, var(--rtw-mh-line) 100%, transparent 100%);
	background-size: calc(100% - 7px) 1px, 5px 5px;
}
.rtw-mh-top::before { background-position: left center, right center; }
.rtw-mh-top::after { background-position: right center, left center; }
/* 리그 이름 — 보조 정보지만 이 줄의 주인공이다 (지시서 §3).
   알약도 배경도 테두리도 두지 않는다. 강조는 색과 자간으로만 준다.
   색은 사이트가 이미 쓰는 초록 글자 토큰이라 라이트/다크가 함께 따라온다.
   ⚠ 팀 이름(18px 굵은 본문색)보다 작고 가벼워야 한다 — 경기가 주인공이고
     리그는 그것을 거드는 자리다. */
.rtw-mh .rtw-league {
	flex: 0 1 auto;
	/* 그림과 이름을 한 줄에 나란히 (rev263) — 목록 카드와 같은 짜임이다.
	   말줄임은 안쪽 상자(`.rtw-league-txt`)가 맡으므로 여기서는 넘침을 풀어
	   둔다. 그림은 이름보다 조금 크게(17px) 잡아 15px 글자와 균형이 맞는다. */
	display: inline-flex;
	align-items: center;
	gap: 7px;
	overflow: visible;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	/* 글자도 카드와 같은 금색이다 (rev262). 카드 쪽 값(`--rtw-lg-ink`)을
	   그대로 쓰므로 대비도 이미 확인된 값이다 — 라이트 4.76:1 · 다크 8.09:1.
	   이 화면만의 초록을 따로 두지 않는다. */
	color: var(--rtw-lg-ink);
}
/* 종목 그림 — 줄어들지 않는다. 색을 정하지 않으므로 위 금색을 그대로 따른다
   (SVG 가 `currentColor` 다). 카드(16px)보다 한 픽셀 크다 — 이 화면의 리그
   글자가 15px 로 카드(13px)보다 크기 때문이다. */
.rtw-mh .rtw-sport-ico { flex: 0 0 auto; width: 17px; height: 17px; }

/* ── 대진 — 홈 · VS/경기시각 · 원정 ──────────────────
     가운데 칸을 사이에 둔 세 칸이라 홈과 원정 자리가 정확히 같다
     (지시서 §10). 그 축을 화면 한가운데에 세운다. */
.rtw-match.is-detail {
	max-width: var(--rtw-mh-w);
	margin: 0 auto;
	gap: 12px;
	/* 이 칸이 이제 h1 이다(Analysis SEO 핵심 문제 3건 수정 작업지시서 §3) —
	   브라우저 기본 h1 여백/글자크기/굵기가 grid 배치 위에 끼어들지 않도록
	   지운다. 자식(`.rtw-team-name` 등)은 각자 이미 font-size 를 정하므로
	   여기서 지워도 글자 크기는 그대로다. */
	font: inherit;
}
/* 상세 화면의 주인공은 로고다 (지시서 §8). 카드(52×44)의 비율을 그대로
   키운 값이라 가로로 긴 워드마크도 찌그러지지 않는다 — `contain` 이므로
   원본 비율이 유지되고, 동그랗게 자르지 않아 투명 PNG 가 그대로 보인다. */
.rtw-match.is-detail .rtw-logo { width: 76px; height: 64px; }
/* 로고가 없는 팀의 첫 글자 동그라미도 함께 키운다. 카드와 같은 이유로
   로고 칸보다 두 픽셀 작고, 위아래 1px 로 줄 높이를 로고와 맞춘다. */
.rtw-match.is-detail .rtw-mono { width: 62px; height: 62px; margin: 1px 0; font-size: 24px; }
.rtw-match.is-detail .rtw-team { gap: 8px; }
/* 팀 이름이 홈/원정 꼬리표보다 세게 읽혀야 한다 (지시서 §13).
   두 줄까지 보이고 그 다음은 잘린다 — 긴 팀명에도 칸이 넓어지지 않는다. */
.rtw-match.is-detail .rtw-team-name { font-size: 18px; line-height: 1.35; }
.rtw-match.is-detail .rtw-side { height: 19px; padding: 0 8px; font-size: 10.5px; }
/* VS 알약을 로고 높이(64)의 한가운데에 세운다: (64 − 30) / 2 = 17.
   로고 크기를 바꾸면 이 값도 같이 본다. 초록도, 번짐도, 그러데이션도
   쓰지 않는다 — 중앙축이지 강조가 아니다 (지시서 §11). */
.rtw-match.is-detail .rtw-vs { gap: 8px; padding-top: 17px; }
.rtw-match.is-detail .rtw-vs-tag { min-width: 42px; height: 30px; padding: 0 10px; font-size: 14px; }
.rtw-match.is-detail .rtw-time { font-size: 13.5px; }

/* ── 예측 ────────────────────────────────────────────
     대진 아래 한가운데. 판 폭만큼 긴 상자를 만들지 않는다 — 글자 길이만큼
     늘어나되(`fit-content`) 한 줄을 넘지 않는 폭에서 멈춘다 (지시서 §15).
     카드와 같은 표현이라 초록 덩어리가 되지 않는다 (지시서 §16). */
.rtw-pick.is-detail {
	width: fit-content;
	/* 지시서 §6 이 정한 280~400px. 짧은 값(`-` · `Draw`)에서도 상자가 쪼그라들지
	   않도록 아래를 280 으로 받치고, 긴 팀 이름은 400 에서 멈추고 말줄임한다.
	   좁은 화면에서는 `min()` 이 100% 를 골라 저절로 줄어든다. */
	min-width: min(280px, 100%);
	max-width: min(400px, 100%);
	margin: 20px auto 0;
	padding: 9px 16px;
	border-radius: 9px;
}
.rtw-pick.is-detail .rtw-pick-label { font-size: 12px; }
.rtw-pick.is-detail .rtw-pick-value { font-size: 15px; }

/* 좁은 화면 — 홈·VS·원정 세 칸을 **그대로 둔다**. 세로로 쌓지 않고 크기만
   줄인다 (지시서 §25). 320px 에서도 가로 스크롤이 생기지 않는다.
   세 값(로고 높이 · 동그라미 · VS 윗여백)은 함께 움직인다: (48 − 26) / 2 = 11. */
@media (max-width: 700px) {
	.rtw-mh { padding: 16px var(--rtb-pad, 20px); }
	.rtw-mh-top { margin-bottom: 14px; }
	.rtw-match.is-detail { gap: 8px; }
	.rtw-match.is-detail .rtw-logo { width: 56px; height: 48px; }
	.rtw-match.is-detail .rtw-mono { width: 46px; height: 46px; font-size: 19px; }
	.rtw-match.is-detail .rtw-team { gap: 6px; }
	.rtw-match.is-detail .rtw-team-name { font-size: 14.5px; }
	.rtw-match.is-detail .rtw-vs { gap: 6px; padding-top: 11px; }
	.rtw-match.is-detail .rtw-vs-tag { min-width: 34px; height: 26px; padding: 0 8px; font-size: 12px; }
	.rtw-match.is-detail .rtw-time { font-size: 12px; }
	/* ⚠ 여기서 `min-width: 0` 을 주면 안 된다. 위의 `min(280px, 100%)` 이
	     꺼지면서 좁은 화면일수록 상자가 글자 길이만큼(약 130px) 쪼그라들어,
	     화면 한가운데 조각처럼 남는다. 실제 브라우저로 320~430px 를 찍어
	     보고 잡은 자리다 (지시서 §18·§24). 아래 값은 그대로 물려받는다. */
	.rtw-pick.is-detail { margin-top: 16px; padding: 8px 14px; }
	.rtw-pick.is-detail .rtw-pick-value { font-size: 14px; }
}
/* 가장 좁은 화면(320px)에서 한 번 더 줄인다 — 경기시각이 가운데 칸을
   넓히지 않도록 숫자를 먼저 줄이고, 그 다음이 로고다. */
@media (max-width: 360px) {
	.rtw-match.is-detail .rtw-logo { width: 48px; height: 42px; }
	.rtw-match.is-detail .rtw-mono { width: 40px; height: 40px; font-size: 17px; }
	.rtw-match.is-detail .rtw-vs { padding-top: 8px; }
	.rtw-match.is-detail .rtw-time { font-size: 11px; }
	.rtw-match.is-detail .rtw-team-name { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   글 읽기 — 분석 본문 (rev256)

   ─────────────────────────────────────────────────────────────────
   두 겹으로 가둔다 (지시서 §21)
   ─────────────────────────────────────────────────────────────────
   ① 이 파일은 웹진형에서만 내려간다.
   ② 그 안에서도 `.rtb-doc-body.is-webzine` 아래만 고른다 —
      그 이름은 `_read.html` 이 웹진형일 때만 붙인다.

   그래서 `h3 { }` 처럼 태그만으로 고르는 규칙이 하나도 없고, 리스트형
   Forum 의 글읽기·댓글·다른 모듈 본문에는 한 줄도 닿지 않는다.

   본문 HTML 은 회원이 편집기로 쓴 그대로다. 여기서 하는 일은 **보기 좋게
   놓는 것뿐**이다 — 글을 뜯어 고치지도, 새 상자로 나누지도 않는다
   (지시서 §9·§13).
   ═══════════════════════════════════════════════════════════════════ */

/* 읽기 폭. 판은 1280px 를 다 쓰지만 영어 장문이 그 폭으로 흐르면 한 줄이
   너무 길어 눈이 다음 줄 첫머리를 놓친다. 1060px 는 1440·1280 에서 한 줄이
   대략 95~100자에 들어오는 값이고, 1024 화면에서는 판 자체가 그보다 좁아
   이 값이 걸리지 않는다(줄어들 뿐 잘리지 않는다). 좌우 여백은 바깥
   `.rtb-doc-body` 의 안쪽 여백이 맡는다 (지시서 §8). */
.rtb-doc-body.is-webzine .rtb-doc-content {
	max-width: 1060px;
	margin: 0 auto;
	line-height: 1.75;
}
/* ⚠ 글자 크기를 여기서 한 번 더 못 박는다.
     코어는 글 내용을 `div.rhymix_content.xe_content` 로 한 겹 더 감싸는데,
     그 이름에 사이트 전역 규칙(`.xe_content, .rhymix_content { font-size:13px }`)
     이 걸려 있다. 바깥 상자를 15px 로 정해도 **안쪽 겹이 13px 로 되돌려**
     문단이 전부 13px 로 나왔다 — 실제 화면을 재 보고 잡은 자리다.

     그래서 그 안쪽 겹까지 함께 고른다. 이름이 넷이라 전역 한 줄보다 세고,
     `.is-webzine` 안이라 리스트형 Forum 글·댓글·다른 모듈 본문에는 닿지
     않는다.

     줄 높이도 같이 적어 상자 기준을 1.75 로 맞춘다. 다만 문단(`p`) 에는
     전역 규칙이 1.6 을 직접 걸어 두어 문단은 15px × 1.6 = 24px 로 선다 —
     이 화면이 목표로 한 1.6~1.75 범위 안이라 그대로 둔다. */
.rtb-doc-body.is-webzine .rtb-doc-content,
.rtb-doc-body.is-webzine .rtb-doc-content .rhymix_content,
.rtb-doc-body.is-webzine .rtb-doc-content .xe_content {
	font-size: 15px;
	line-height: 1.75;
}
/* 문단 사이. 줄간격(1.75)보다 조금 더 벌려 문단 경계가 눈에 잡히게 한다.
   글자 크기는 건드리지 않는다 — 크게 만드는 것이 목적이 아니다 (지시서 §11). */
.rtb-doc-body.is-webzine .rtb-doc-content p { margin: 0 0 15px; }
.rtb-doc-body.is-webzine .rtb-doc-content p:last-child { margin-bottom: 0; }

/* ── 분석 제목 (지시서 §10·§12) ────────────────────────
     이 글의 제목은 전부 `h3` 다(다섯 개). 다른 글이 `h2`·`h4` 를 쓸 수도
     있어 셋을 함께 받는다 — 어느 쪽이든 같은 모양으로 선다.

     왼쪽의 짧은 초록 막대는 실제 글자가 아니라 테두리다. 크기는 키우지
     않고(16px) 굵기·자간·대문자로 본문과 가른다. 위 여백을 아래보다 크게
     두어 제목이 **다음 문단에 붙고 앞 문단과 떨어진다** — 섹션 사이가
     선 없이도 갈린다 (지시서 §12 "우선 margin/padding 으로"). */
.rtb-doc-body.is-webzine .rtb-doc-content h2,
.rtb-doc-body.is-webzine .rtb-doc-content h3,
.rtb-doc-body.is-webzine .rtb-doc-content h4 {
	margin: 38px 0 14px;
	/* ⚠ 여기에 초록 세로바를 두지 않는다. 예전에는 `border-left` 로 제목마다
	     막대를 자동으로 붙였지만, 그러면 **글쓴이가 강조 위치를 고를 수 없다**.
	     막대는 이제 인용문(`blockquote`)이 맡는다 — 편집기의 인용 단추를 누른
	     자리에만 나온다(아래 규칙). 제목은 크기·굵기·자간·대문자·여백으로만
	     본문과 갈린다. 막대를 위해 두었던 왼쪽 여백도 함께 걷었다. */
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rt-text, #2b3440);
	overflow-wrap: anywhere;
}
/* 첫 제목은 위 여백을 지운다 — 경기 머리와 본문 사이는 이미 판이 벌려 준다
   (지시서 §10). 본문은 감싸개가 여러 겹이다: 코어가 두르는 `div` 안에
   편집기가 남긴 `blockquote` 가 있고 그 안에 첫 제목이 있다. 그래서 "본문의
   직계 첫 자식"으로 고르면 빗나간다 — 실제 브라우저로 재 보고 잡은 자리다.
   감싸개가 몇 겹이든 **제 부모의 첫 자식인 제목**이면 맨 앞줄이다. */
.rtb-doc-body.is-webzine .rtb-doc-content h2:first-child,
.rtb-doc-body.is-webzine .rtb-doc-content h3:first-child,
.rtb-doc-body.is-webzine .rtb-doc-content h4:first-child { margin-top: 0; }

/* ── 인용문 = 초록 세로바 ──────────────────────────────
     막대를 어디에 둘지는 **글쓴이가 정한다**. 편집기의 인용 단추를 누른
     자리에만 이 규칙이 걸린다 — 제목이든 문장이든 상관없다. 그래서 판단
     기준은 "제목인가"가 아니라 "인용문인가"다.

     글자를 뒤지지 않는다. `blockquote` 라는 **요소**만 보므로 다섯 언어
     어디서나 같게 동작하고, 본문 글이 바뀌어도 흔들리지 않는다.

     리스트형 Forum 의 인용문은 `rtboard.css` 의 회색 막대 그대로다. 이
     규칙은 이름이 셋(`.rtb-doc-body.is-webzine .rtb-doc-content`)이라 그
     한 벌보다 세고, 그 이름은 웹진형 글읽기에만 붙는다.

     꾸밈은 최소로 둔다 — 따옴표를 만들지 않고, 기울이지 않고, 바탕도
     깔지 않는다. 왼쪽 막대와 그만큼의 여백뿐이다.
     ⚠ 글자색을 되돌리는(`inherit`) 것이 중요하다. 공용 규칙이 인용문을
       옅은 보조색으로 낮춰 두는데, 그대로 두면 강조하려고 감싼 문장이
       오히려 흐려진다. */
/* ── 인용문 1 — 가벼운 강조 (편집기의 기본 인용 단추) ──
     왼쪽 초록 선 하나뿐이다. 바탕도 사방 테두리도 두지 않는다.
     `:not(...)` 로 강조 상자를 빼 두었으므로 두 벌이 겹치지 않는다. */
.rtb-doc-body.is-webzine .rtb-doc-content blockquote:not(.rt-analysis-highlight):not(.t3-analysis-highlight) {
	margin: 24px 0;
	padding: 2px 0 2px 14px;
	border: 0;
	border-left: 3px solid var(--rt-green-text, #0f7a35);
	border-radius: 0;
	background: none;
	color: inherit;
	font-style: normal;
}

/* ── 인용문 2 — 강한 강조 (편집기의 강조 인용 단추) ────
     ⚠ 글자를 뒤지지 않는다. `rt-analysis-highlight` 라는 **class 하나**만
       본다 — 그래서 다섯 언어 어디서나, 어떤 문구에서나 똑같이 동작하고
       `Overall Analysis` 같은 특정 제목에 묶이지 않는다 (지시서 §14). */
.rtb-doc-body.is-webzine .rtb-doc-content blockquote.rt-analysis-highlight,
.rtb-doc-body.is-webzine .rtb-doc-content blockquote.t3-analysis-highlight {
	margin: 26px 0;
	padding: 18px 20px;
	/* 테두리는 두 겹이다. 사방은 아주 옅은 선이고, 왼쪽만 초록 굵은 선이다.
	   `border` → `border-color` → `border-left` 차례라 마지막 줄이 왼쪽만
	   덮어쓴다. `color-mix` 를 모르는 브라우저는 가운데 줄을 버리고 평범한
	   토큰 테두리로 남는다 — 상자가 사라지지 않는다. */
	border: 1px solid var(--rt-border, #e2e6ea);
	border-color: color-mix(in srgb, var(--rt-green-text, #0f7a35) 18%, var(--rt-border, #e2e6ea));
	border-left: 4px solid var(--rt-green-text, #0f7a35);
	border-radius: 8px;
	/* 바탕 — **초록 상자가 아니다**. 본문 판(`--rt-surface`)과 한 단계 다른
	   보조 표면에 초록을 6% 만 섞는다. 눈에 먼저 들어와야 하는 것은 왼쪽
	   초록 선이고 바탕은 "여기가 한 덩어리"라는 것만 알려 주면 된다.
	   픽 상자보다 훨씬 옅어야 한다 — 픽은 고른 값이고 이쪽은 본문 강조다. */
	background: var(--rt-surface-2, #f4f6f8);
	background: color-mix(in srgb, var(--rt-green-text, #0f7a35) 6%, var(--rt-surface-2, #f4f6f8));
	/* 공용 규칙이 인용문을 옅은 보조색·기울임으로 낮추는 것을 되돌린다 —
	   강조하려고 감싼 글이 오히려 흐려지면 안 된다. */
	color: inherit;
	font-style: normal;
}
/* 인용문 안의 첫·마지막 요소가 제 여백을 그대로 들고 오면 상자가 위아래로
   부푼다 (지시서 §6 "margin 폭증 금지"). 제목이 들어와도 마찬가지다. */
.rtb-doc-body.is-webzine .rtb-doc-content blockquote > *:first-child { margin-top: 0; }
.rtb-doc-body.is-webzine .rtb-doc-content blockquote > *:last-child { margin-bottom: 0; }
/* 본문 맨 앞에 인용문이 오면 위 여백을 지운다 — 경기 머리와의 간격은
   판이 이미 벌려 준다. 감싸개가 몇 겹이든 "제 부모의 첫 자식"이면 맨 앞이다. */
.rtb-doc-body.is-webzine .rtb-doc-content blockquote:first-child { margin-top: 0; }

/* 좁은 화면 — 폭 제한은 저절로 풀리고, 제목 사이만 조금 좁힌다. */
@media (max-width: 767px) {
	.rtb-doc-body.is-webzine .rtb-doc-content h2,
	.rtb-doc-body.is-webzine .rtb-doc-content h3,
	.rtb-doc-body.is-webzine .rtb-doc-content h4 {
		margin: 30px 0 12px;
		font-size: 15px;
		letter-spacing: .04em;
	}
	/* 강조 상자의 안쪽 여백을 줄인다. 320px 에서 좌우 20px 씩이면 본문이
	   쓸 폭을 40px 넘게 먹는다 — 읽을 자리를 지키는 쪽이 먼저다. */
	.rtb-doc-body.is-webzine .rtb-doc-content blockquote {
		margin: 20px 0;
		padding: 14px 15px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   글 읽기 — HOME/AWAY/OVERALL 카드 (Analysis 상세페이지 UI/UX 리뉴얼)

   ─────────────────────────────────────────────────────────────────
   범위 (지시서 §23)
   ─────────────────────────────────────────────────────────────────
   전부 `.rtb-doc-body.is-webzine .rtb-doc-content.rt-analysis-split`
   아래로 가둔다. 그 이름 쌍은 `_read.html` 이 본문을 안전하게 갈랐을
   때만 붙인다(`_analysis_sections.php`) — 못 가른 글, 리스트형 Forum,
   다른 모듈에는 이 규칙이 한 줄도 닿지 않는다.

   카드 안 문단·제목·인용문 글꼴은 **새로 정의하지 않는다.** 위에서 이미
   `.rtb-doc-content` 아래 전부(`p`·`h2~4`·`blockquote`)에 규칙이 걸려
   있고, 카드 본문은 그 후손이라 그대로 물려받는다 — 두 벌을 만들지
   않는다(지시서 §8).
   ═══════════════════════════════════════════════════════════════════ */

.rtb-doc-body.is-webzine .rtb-doc-content.rt-analysis-split {
	/* 카드 사이 간격은 여기 한 곳에서 정한다. */
	--rtas-gap: 16px;
}

/* ── HOME / AWAY — PC 2열 ───────────────────────────────── */
.analysis-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rtas-gap);
	margin: 0 0 28px;
}
.analysis-team-card {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: 8px;
	/* 본문 판(`--rt-surface`)보다 한 단계만 밝은 표면 — 새 밝은 배경을
	   만들지 않는다(지시서 §6). 카드 크기·2열 구조는 그대로다(카드 헤더
	   / OUR PICK 디자인 개선 작업지시서 §3) — 안쪽 머리만 새로 짠다. */
	background: var(--rt-surface-2, #f4f6f8);
}

/*
 * 카드 accent — HOME 은 사이트가 이미 쓰는 blue(`.rtw-sport.is-baseball`
 * 등과 같은 계열, `#1d4ed8`), AWAY 는 새 teal 하나만 더한다. 변수 하나로
 * 로고 자리(첫 글자 동그라미)·구분선이 같은 색을 쓴다(값을 두 곳에
 * 따로 적지 않는다). HOME/AWAY 배지는 넣었다가 뺐다(줄이 두 줄로
 * 늘어나 삭제 — 사용자 피드백) — 지워진 배지가 쓰던
 * `--rtas-accent-bg`·`--rtas-accent-line` 도 함께 걷어냈다(죽은 CSS
 * 를 남기지 않는다).
 */
.analysis-team-home { --rtas-accent: #1d4ed8; }
.analysis-team-away { --rtas-accent: #0f766e; }

/* 팀명 줄 — 로고(있으면 실제 그림, 없으면 첫 글자 동그라미) + 팀명.
   로고 자리는 Match Header 의 `.rtw-logo`/`.rtw-mono` 와 같은 데이터
   (`rtwMatchInfo()`)에서 온다 — 새 출력 경로를 만들지 않는다(§1). */
.analysis-team-title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.analysis-team-logo {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: contain;
}
.analysis-team-mono {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rt-surface-3, #eef1f4);
	color: var(--rtas-accent);
	font-size: 14px;
	font-weight: 700;
}
.analysis-team-heading {
	margin: 0;
	min-width: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--rt-text, #2b3440);
	overflow-wrap: anywhere;
}
/*
 * 로고·팀명 수직 중앙 정렬 (Analysis 상세 — 팀 로고와 팀명 수직 중앙
 * 정렬 작업지시서).
 *
 * ─────────────────────────────────────────────────────────────────────
 * 확인된 원인 — PNG 여백이 아니라 CSS 명시도 충돌
 * ─────────────────────────────────────────────────────────────────────
 * 실제 로고 PNG 두 장(VfB Stuttgart·1. FC Köln)을 픽셀 단위로 검사한
 * 결과 투명 여백은 이미 상하 대칭이었다(캔버스 100×100 안에서 실제
 * 그림의 세로 중심이 캔버스 중심과 0~0.5px 차이 — 무시할 수준). 이미지
 * 자체는 원인이 아니다.
 *
 * 진짜 원인은 위 `.analysis-team-heading` 이 `<h2>` 태그이면서
 * `.rtb-doc-content` 의 자손이기도 하다는 점이다. 그래서 본문 제목 공용
 * 규칙(`.rtb-doc-body.is-webzine .rtb-doc-content h2, h3, h4` — 이
 * 파일 위쪽, 지시서 §10·§12)이 **의도치 않게 이 요소에도 함께 걸린다**.
 * 그 규칙은 명시도(0,3,1)로 이 규칙(0,1,0)보다 세서 `margin: 38px 0
 * 14px` 를 얹어 버린다 — 위 38px·아래 14px, 24px 나 차이 나는 비대칭
 * 여백이다. `.analysis-team-title` 이 `align-items:center` 로 상자
 * 자체는 이미 맞게 정렬하고 있었지만, 정렬되는 그 "상자"가 이 비대칭
 * 여백까지 포함해 위로 훨씬 크게 부풀어 있었으니 로고와 팀명의 실제
 * 눈에 보이는 중심이 어긋난 것이다.
 *
 * ─────────────────────────────────────────────────────────────────────
 * 고치는 범위 — margin · line-height 둘만
 * ─────────────────────────────────────────────────────────────────────
 * 셀렉터 명시도를 그 공용 규칙과 같은 서열(`.rtb-doc-body.is-webzine
 * .rtb-doc-content` 접두사 유지, 태그 대신 이 class 를 얹어 4개 class 로
 * 3개 class + 태그 하나를 앞선다)로 올려 `margin`·`line-height` 두
 * 가지만 되돌린다. 글자 크기·굵기·자간·대문자 표기는 같은 공용 규칙이
 * 계속 정하도록 그대로 둔다 — 이번 작업은 정렬만 고치는 범위다(작업
 * 지시서 "다른 Analysis UI 영향 없음"). 특정 팀 로고에 개별 `top`
 * 보정을 넣지 않는다 — 팀마다 로고 PNG 비율이 달라도 이 한 규칙이
 * 모든 팀에 똑같이 적용된다.
 */
.rtb-doc-body.is-webzine .rtb-doc-content .analysis-team-heading {
	margin: 0;
	line-height: 1.1;
}
/* 팀명 아래 accent 구분선 — 가운데 작은 마름모 하나. 장식이라
   `aria-hidden` 이고, 읽는 순서에는 영향이 없다. */
.analysis-team-rule {
	position: relative;
	margin: 14px 0 16px;
	height: 1px;
	background: var(--rtas-accent);
	opacity: .5;
}
.analysis-team-rule::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--rtas-accent);
	transform: translate(-50%, -50%) rotate(45deg);
}
/* 카드 안 첫 문단·제목의 위 여백을 지운다 — 제목과 바로 붙는다. */
.analysis-team-body > *:first-child { margin-top: 0; }
.analysis-team-body > *:last-child { margin-bottom: 0; }

/* ── Recent Form·Key Points 등 — 기존 게시글 호환(지시서 §10·§11·§21) ──
   HOME/AWAY/OVERALL 이 아닌 section 이 있으면 지우지 않고, 카드로
   특별 취급도 하지 않은 채 일반 문단 자리로 그대로 이어 보여준다. */
.analysis-extra-section {
	margin: 0 0 28px;
}
.analysis-extra-heading {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rt-text, #2b3440);
}

/* ── OVERALL ANALYSIS — Team 카드보다 한 단계 강하게(지시서 §12) ────
   카드 크기·왼쪽 초록 강조선·바탕은 그대로다(카드 헤더 / OUR PICK
   디자인 개선 작업지시서 §3) — 안은 세로 두 단(머리 줄 + 본문)으로
   바꿔 OUR PICK 을 머리 줄 오른쪽 compact chip 으로 옮긴다. */
.analysis-overall {
	padding: 22px 24px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-color: color-mix(in srgb, var(--rt-green-text, #0f7a35) 20%, var(--rt-border, #e2e6ea));
	border-left: 4px solid var(--rt-green-text, #0f7a35);
	border-radius: 8px;
	background: color-mix(in srgb, var(--rt-green-text, #0f7a35) 5%, var(--rt-surface-2, #f4f6f8));
}
/* 제목만 — OUR PICK 은 더 이상 이 줄에 없다(OUR PICK 하단 결론형 배치
   작업지시서 §1). 헤더 중간에 채움줄로 끼워 두던 모양을 걷어내고,
   Team 카드 제목과 같은 평범한 `<h2>` 하나로 되돌렸다. */
.analysis-overall-heading {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--rt-text, #2b3440);
	overflow-wrap: anywhere;
}
.analysis-overall-body > *:first-child { margin-top: 0; }
.analysis-overall-body > *:last-child { margin-bottom: 0; }

/*
 * OUR PICK — 결론 영역. 실측 피드백으로 두 줄(라벨 줄 + 팀명 줄)을
 * 한 줄로 합쳤다 — 손가락 아이콘 · 라벨(`Pick:`) · 팀명이 한 줄에
 * 나란히 흐른다. 박스·배지 없이 위 구분선 하나로만 "결론"의 무게를
 * 준다.
 *
 *   구분선 — 단색 1px 대신 왼쪽은 초록이 살짝 배어 있다가 오른쪽으로
 *            흐려지는 그러데이션(`::before`). 카드 왼쪽의 굵은 초록
 *            강조선(`.analysis-overall`)과 같은 색을 다시 쓰면서도
 *            선 자체는 얇게 남긴다.
 *   손가락 아이콘 — 글자 하나(☞)로 낸다. 새 SVG 를 그리지 않는다.
 *   팀명 — 배경·테두리 없이 **금색** 글자만으로 강조한다(실측 피드백,
 *          두 차례 — 처음엔 초록이 카드 배경과 겹쳐 흐려졌고, 이번엔
 *          박스 자체를 걷어냈다). 새 금색을 만들지 않고 목록 카드·경기
 *          머리의 리그 이름이 이미 쓰는, WCAG 대비를 확인해 둔 값을
 *          그대로 가져온다(`--rtw-lg-ink`, 라이트 4.76:1 · 다크
 *          8.09:1). 그 변수는 `.rtw` 안에서만 선언돼 있어(경기 머리
 *          전용) 카드 밖인 이 자리까지 내려오지 않으므로, 같은 값을
 *          여기서 다시 선언한다(이 파일의 다른 곳들도 `--rt-green-text`
 *          를 그렇게 반복해서 쓴다 — 같은 관례).
 */
.analysis-pick-final {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 22px;
	padding-top: 18px;
}
.analysis-pick-final::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--rt-green-text, #0f7a35) 45%, transparent),
		var(--rt-border-soft, #eef0f3) 55%
	);
}
.analysis-pick-final-icon {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	color: var(--rt-green-text, #0f7a35);
}
.analysis-pick-final-label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rt-text, #2b3440);
}
.analysis-pick-final-team {
	--rtas-pick-gold: #7DD3FC;
	min-width: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--rtas-pick-gold);
	overflow-wrap: anywhere;
}

/* ═══ 좁은 화면 — 세로로 쌓는다(지시서 §16·§17, OUR PICK 하단 결론형
   배치 작업지시서 §6) ═══
   로고·팀명 줄은 이미 flex 라 폭이 좁아지면 저절로 줄어든다 — 팀명이
   길어도 `overflow-wrap: anywhere` 가 깨지지 않게 받는다. 결론 영역은
   본문 아래 세로로 흐르는 블록이라 이미 겹치지 않는다 — 글자 크기만
   좁힌다. */
@media (max-width: 767px) {
	.analysis-team-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
	.analysis-team-card { padding: 16px; }
	.analysis-team-heading { font-size: 16px; }
	.analysis-team-logo { width: 26px; height: 26px; }
	.analysis-team-rule { margin: 10px 0 12px; }

	.analysis-extra-section { margin-bottom: 22px; }

	.analysis-overall { padding: 16px; }
	.analysis-overall-heading { font-size: 16px; margin-bottom: 12px; }
	.analysis-pick-final { margin-top: 18px; padding-top: 14px; }
	.analysis-pick-final-team { font-size: 15px; }
}

/* ═══ 다크 — 토큰이 못 덮는 곳만 ═══ */
html[data-theme="dark"] .analysis-team-card { background: var(--rt-surface-2, #212c39); border-color: var(--rt-border, #33414f); }
html[data-theme="dark"] .analysis-team-home { --rtas-accent: #5b9bff; }
html[data-theme="dark"] .analysis-team-away { --rtas-accent: #2dd4bf; }
html[data-theme="dark"] .analysis-team-mono { background: var(--rt-surface-3, #283544); }
html[data-theme="dark"] .analysis-pick-final-team { --rtas-pick-gold: #7DD3FC; }
/* 종합 분석 하단 — 보조 예측 값은 옅은 아이스 블루(골드 제거). */
.analysis-pick-final-team ~ .analysis-pick-final-label ~ .analysis-pick-final-team { --rtas-pick-gold: #B8CADB; }

/* ═══════════════════════════════════════════════════════════════════
   글쓰기 — 경기정보 + 분석글 (rev252)

   전부 `.rtw-write` 안으로 한정한다. 그 이름은 웹진형 게시판의 글쓰기
   화면에만 붙으므로(`write_form.html`), 리스트형 게시판 글쓰기에는 이
   아래 규칙이 한 줄도 닿지 않는다 (지시서 §22).

   입력칸·단추 높이를 값 하나로 모은다. 이 화면만의 값이라 목록·검색·
   쪽 넘김이 쓰는 `--rtb-ctl-h`(33px) 는 건드리지 않는다.
   ═══════════════════════════════════════════════════════════════════ */
.rtw-write {
	--rtw-fh: 40px;      /* 입력칸·선택칸·제목칸·단추 — 전부 이 높이다 */
	--rtw-gap-x: 16px;   /* 두 칸 사이 */
	--rtw-gap-y: 14px;   /* 줄 사이 */
	--rtw-block: 16px;   /* 덩어리(경기정보 · 제목 · 에디터 · 단추) 사이 */
}

/* ── 경기정보 상자 — 두 칸 세 줄 ─────────────────────
     Sport | League / Home Team | Away Team / Match Time | Pick
     칸 여섯이 모두 같은 크기라 순서만으로 짝이 맞는다. */
.rtw-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rtw-gap-y) var(--rtw-gap-x);
	margin: 0 0 var(--rtw-block);
	padding: 16px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtw-radius);
	background: var(--rt-surface-2, #f4f6f8);
}
.rtw-form-head {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--rt-border-soft, #eef0f3);
	margin-bottom: 2px;
}
.rtw-form-legend {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rt-text, #2b3440);
}
/* 설명 한 줄 — 눈이 먼저 가면 안 되므로 작고 흐리게. */
.rtw-form-desc {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--rt-text-3, #a3adb8);
}

.rtw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rtw-field label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rt-text-2, #7b8794);
	/* 스페인어처럼 긴 이름도 칸을 넓히지 않는다 — 접히기만 한다. */
	overflow-wrap: anywhere;
}
/* 두 칸의 입력 폭이 **정확히 같아야 한다.** 격자 칸이 `minmax(0,1fr)` 이고
   입력이 100% 라 팀 이름이 길어도 한쪽만 넓어지지 않는다 (지시서 §9). */
.rtw-write .rtw-field .rtb-input,
.rtw-write .rtw-field .rtb-select {
	width: 100%;
	height: var(--rtw-fh);
	font-size: 13.5px;
	font-weight: 500;
}
/* 종목·예측 선택칸도 글자칸과 같은 옷을 입는다 — `.rtb-select` 는 원래
   초록 hover 를 갖고 있어 옆 칸과 달라 보였다. 이 화면에서만 맞춘다. */
.rtw-write .rtw-field .rtb-select { color: var(--rt-text, #2b3440); }
.rtw-write .rtw-field .rtb-select:hover { border-color: #c9d1da; color: var(--rt-text, #2b3440); }
.rtw-write .rtw-field .rtb-select:focus { border-color: var(--rt-green, #0f7a35); }

/* ── 분석글 영역의 머리 ──────────────────────────────
     글자 하나와 얇은 선뿐이다. 상자를 하나 더 만들지 않는다. */
.rtw-section {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rt-border-soft, #eef0f3);
	font-size: 14px;
	font-weight: 700;
	color: var(--rt-text, #2b3440);
}

/* ── 제목 · 에디터 · 첨부 · 단추의 간격을 한 벌로 모은다 ──
     제목칸이 따로 뜬 카드처럼 보이지 않게 위 입력칸들과 같은 높이·
     같은 테두리를 쓰고, 글자만 조금 크다. */
.rtw-write .rtb-write-title {
	height: var(--rtw-fh);
	margin-bottom: var(--rtw-block);
	font-size: 14.5px;
}
.rtw-write .rtb-editor { margin-bottom: 0; }
.rtw-write .rtb-write-extra,
.rtw-write .rtb-write-fields,
.rtw-write .rtb-write-captcha { margin-top: var(--rtw-block); }
.rtw-write .rtb-write-acts { margin-top: var(--rtw-block); gap: 10px; }
.rtw-write .rtb-write-acts .rtb-btn {
	height: var(--rtw-fh);
	min-width: 104px;
	justify-content: center;
	font-size: 13.5px;
}

/* ═══ 다크 — 토큰이 못 덮는 곳만 ═══ */
html[data-theme="dark"] .rtw-write .rtw-field .rtb-select,
html[data-theme="dark"] .rtw-write .rtw-field .rtb-select:hover { color: var(--rt-text, #e4e8ee); }
html[data-theme="dark"] .rtw-form { background: var(--rt-surface-2, #212c39); border-color: var(--rt-border, #33414f); }
html[data-theme="dark"] .rtw-form-head,
html[data-theme="dark"] .rtw-section { border-bottom-color: var(--rt-border, #33414f); }

/* ═══ 좁은 화면 — 한 칸으로 접는다 (지시서 §19) ═══ */
@media (max-width: 700px) {
	.rtw-write { --rtw-gap-y: 12px; --rtw-block: 14px; }
	.rtw-form { grid-template-columns: minmax(0, 1fr); padding: 14px; }
	/* 단추 두 개가 한 줄을 나눠 갖는다 — 터치 폭을 확보하고 넘치지 않는다. */
	.rtw-write .rtb-write-acts { flex-wrap: nowrap; }
	.rtw-write .rtb-write-acts .rtb-btn { flex: 1 1 0; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   글쓰기 — Analysis 구조화 입력 (Analysis 전용 구조화 write_form 작업지시서)

   `.rtw-write` 안에서만 쓴다 — 위 글쓰기 절과 같은 이유로 리스트형
   게시판 글쓰기에는 이 아래 규칙이 한 줄도 닿지 않는다. `.rtw-field` ·
   `.rtb-input` 은 위 경기정보 상자가 이미 쓰던 것을 그대로 재사용한다
   (새 이름을 늘리지 않는다) — 여기서는 두 가지만 더한다.
     · 세 칸을 두 칸 격자로 놓는 `.rtas-structured`
     · 한 줄짜리 `.rtb-input` 높이 대신 여러 줄을 받는 `.rtas-textarea`
   ═══════════════════════════════════════════════════════════════════ */
.rtas-structured {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rtw-gap-y) var(--rtw-gap-x);
	margin: 0 0 var(--rtw-block);
}
.rtas-field-wide { grid-column: 1 / -1; }
.rtw-write .rtas-textarea {
	height: auto;
	min-height: 160px;
	padding: 10px 11px;
	line-height: 1.5;
	font-size: 13.5px;
	font-weight: 400;
	resize: vertical;
}
.rtas-field-wide .rtas-textarea { min-height: 110px; }

/*
 * 편집기를 화면 밖으로만 민다 — `display:none` 이 아니다.
 *
 * CKEditor 는 만들어지는 순간 자기 상자의 크기를 재는데, 그 순간 상자가
 * `display:none` 이면 실측상 크기를 0으로 잘못 재는 경우가 있다. 그래서
 * 레이아웃에는 그대로 남기고 화면 밖(`left:-9999px`)으로 밀어내기만
 * 한다 — `js/rtas_structured_form.js` 는 이 상자 안 인스턴스를 그대로
 * 찾아 쓴다(숨겨져 있어도 CKEditor API 는 그대로 동작한다).
 */
.rtw-write .rtas-editor-offscreen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	left: -9999px;
	top: -9999px;
}

@media (max-width: 700px) {
	.rtas-structured { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   댓글 — 작성폼 기본 접힘 (Analysis 상세페이지 UI/UX 리뉴얼 작업지시서 §19)

   `.rtb-cmt-toggle`·`.rtb-cmt-empty-hint` 는 이 스킨에서 새로 쓰는
   이름이라 다른 화면과 겹치지 않는다. 이 파일은 웹진형(Analysis)에만
   실리므로(`_match_header.html`·`_webzine.html`·`write_form.html` 이 이미
   그렇게 부른다) 리스트형 Forum 댓글에는 이 규칙이 내려가지도 않는다 —
   `_comment.html` 쪽의 `cond` 가 마크업 자체를 웹진형에서만 만든다.
   ═══════════════════════════════════════════════════════════════════ */
.rtb-cmt-empty-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--rt-text-3, #a3adb8);
}
.rtb-cmt-toggle {
	margin: 0 0 18px;
	height: 36px;
	padding: 0 16px;
}

.rtw-admin-meta{padding:16px;overflow-wrap:anywhere}.rtw-admin-meta span{margin:8px}.rtw-write input,.rtw-write textarea,.rtw-write select{max-width:100%;box-sizing:border-box}@media(max-width:640px){.rtw-head,.rtw-head-acts{flex-wrap:wrap}.rtw-search{max-width:100%;width:100%}.rtw-admin-meta span{display:block}}

.rtw-write [hidden]{display:none!important}

/* ═══ 운영자 경기 분석 목록 리뉴얼 ═════════════════════════════════
   피드 머리 카드(.pd-feed-head)와 같은 모양의 머리 카드 + 필터 카드 + 빈 목록 카드.
   마크업 순서만 옮겼고 폼·링크·동작은 그대로다. */
.rtw-head {
	display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap;
	min-height: 70px; margin: 0 0 12px; padding: 13px 18px;
	border: 1px solid var(--rt-border, #222a36); border-radius: 10px; background: var(--rt-surface-1, #0B1826);
}
.rtw-hero-icon {
	display: inline-flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px;
	border: 1px solid rgba(var(--rt-brand-rgb, 149, 107, 255), .28); border-radius: 10px;
	background: rgba(var(--rt-brand-rgb, 149, 107, 255), .1); color: var(--rt-brand, #956BFF);
}
.rtw-title { font-size: 21px; font-weight: 750; line-height: 1.25; }
.rtw-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; }

/* 필터 카드: 위 줄(날짜 알약 · 오른쪽 도구) · 아래 줄(달력). */
.rtw-filters {
	gap: 12px; margin: 0 0 12px; padding: 14px 16px;
	border: 1px solid var(--rt-border, #222a36); border-radius: 10px; background: var(--rt-surface-1, #0B1826);
}
.rtw-filter-row { gap: 8px; }
.rtw-filter-top .rtw-head-acts { margin-left: auto; }
/* 날짜 입력은 PC 에서 210px. 좁은 화면에서는 가용 너비를 쓴다. */
.rtw-filter-row input[type="date"].rtb-input { flex: 0 1 210px; width: 210px; max-width: 100%; min-width: 0; }
.rtw-filter-row .rtb-search-btn { padding: 0 12px; }

/* 빈 목록 카드: 가운데 아이콘 + 안내 두 줄. */
.rtw-empty {
	display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 12px; padding: 40px 20px;
	text-align: center; border: 1px solid var(--rt-border, #222a36); border-radius: 10px; background: var(--rt-surface-1, #0B1826);
}
.rtw-empty-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px;
	border-radius: 50%; background: rgba(var(--rt-brand-rgb, 149, 107, 255), .1); color: var(--rt-brand, #956BFF);
}
.rtw-empty strong { color: var(--rt-text, #F7F7FA); font-size: 15px; font-weight: 700; }
.rtw-empty p { margin: 0; color: var(--rt-text-2, #AAB1C7); font-size: 13px; }

@media (max-width: 640px) {
	.rtw-head { min-height: 0; padding: 12px 13px; gap: 10px; }
	.rtw-hero-icon { flex-basis: 36px; width: 36px; height: 36px; }
	.rtw-title { font-size: 19px; }
	.rtw-sub { font-size: 11.5px; }
	.rtw-filters { padding: 12px; }
	.rtw-filter-top .rtw-head-acts { margin-left: 0; width: 100%; }
	.rtw-filter-row input[type="date"].rtb-input { flex: 1 1 0; width: auto; max-width: none; }
}

/* ═══ 경기 카드 목록 정돈 ═══════════════════════════════════════════
   날짜 머리(한글 · 경기 수) · 카드 · 리그 줄. 예측 영역의 퍼플은 사이트 토큰(--rtw-pick-*)으로 준다. */
.rtw-date-heading {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 10px 0 0; padding: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: 0;
	color: var(--rt-text, #F7F7FA); border-bottom: 1px solid var(--rt-border, #222a36);
}
.rtw-date-heading:first-child { margin-top: 0; }
.rtw-date-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rtw-date-text::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--rt-brand, #956BFF); }
.rtw-date-tag {
	font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
	background: rgba(var(--rt-brand-rgb, 149, 107, 255), .16); color: var(--rt-accent-hover, #B49AFF);
}
.rtw-date-count { display: none; } /* 날짜별 "N경기" 는 표시하지 않는다(숫자 계산은 그대로). */
.rtw-card { border-radius: 12px; background: var(--rt-surface-1, #0B1826); }
.rtw-card:hover, .rtw-card:focus-within { border-color: var(--rt-brand, #956BFF); }
/* 리그 줄: 장식 선을 걷고 왼쪽에서 시작한다. 체크상자(관리자)는 그 앞 자리에 그대로 있다. */
.rtw-top { justify-content: flex-start; }
.rtw-top::before, .rtw-top::after { display: none; }
.is-manage .rtw-top { padding: 0 0 0 23px; }

/* 리그 국기 — 공식 헬퍼가 정한 국기가 있을 때만 그린다(없으면 종목 아이콘). 표시용이다. */
.rtw-flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }

/* 글 읽기의 경기 머리 — 목록 카드와 같은 퍼플 계열. 리그 줄은 장식선 없이 왼쪽에서 시작한다.
   읽기 화면은 퍼플 토큰 범위 밖이라 여기서 예측 영역 색을 직접 준다(결과 상태 색과 섞이지 않는다). */
.rtb-read .rtw-mh {
	--rtw-pick-bg: #102438; --rtw-pick-border: #377CA6;
	--rtw-pick-label: #B8CADB; --rtw-pick-value: #7DD3FC;
	--rtw-pick-bg-hover: #102438; --rtw-pick-border-hover: #377CA6;
}
/* 보조 예측 값(두 번째 값)은 한 단계 옅은 아이스 블루. 보조가 없으면 이 규칙에 걸리는 요소가 없다. */
.rtb-read .rtw-pick.is-detail .rtw-pick-value ~ .rtw-pick-label ~ .rtw-pick-value { color: #B8CADB; }
.rtw-mh-top { justify-content: center; }
.rtw-mh-top::before, .rtw-mh-top::after { display: none; }

/* ═══ B안 — 리그별 그룹 리스트 ════════════════════════════════════
   날짜 머리(위) → 리그 그룹(<details>, 기본 펼침) → 경기 한 줄. 카드 격자는 쓰지 않는다.
   누르는 곳은 줄 전체를 덮는 `.rtw-link` 하나이고, 체크상자만 그 위(z-index)에 있다. */
.rtw-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rtw-list > .rtw-date-heading { margin: 8px 0 0; }
.rtw-list > .rtw-date-heading:first-child { margin-top: 0; }
.rtw-lg { border: 1px solid var(--rt-border, #222a36); border-radius: 12px; background: var(--rt-surface-1, #0B1826); overflow: hidden; }
.rtw-lg-head {
	display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none;
	color: var(--rt-text, #F7F7FA); font-size: 15px; font-weight: 700; background: rgba(var(--rt-brand-rgb, 149, 107, 255), .06);
}
.rtw-lg-head::-webkit-details-marker { display: none; }
.rtw-lg[open] > .rtw-lg-head { border-bottom: 1px solid var(--rt-border, #222a36); }
.rtw-lg-head:hover { background: rgba(var(--rt-brand-rgb, 149, 107, 255), .1); }
.rtw-lg-head .rtw-sport-ico { width: 18px; height: 18px; color: var(--rt-brand, #956BFF); }
.rtw-lg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtw-lg-count {
	display: none; /* 리그별 "N경기" 는 표시하지 않는다(숫자 계산은 그대로). */
	margin-left: auto; flex: none; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
	background: rgba(var(--rt-brand-rgb, 149, 107, 255), .16); color: var(--rt-accent-hover, #B49AFF);
}
.rtw-lg-chev { flex: none; margin-left: auto; color: var(--rt-text-2, #AAB1C7); transition: transform .15s; }
.rtw-lg:not([open]) .rtw-lg-chev { transform: rotate(-90deg); }
/* PC 데스크톱: 접히지 않는 머리 — 눌러도 아무 일도 없으므로 손 모양과 호버 색을 두지 않는다 */
html .rtw .rtw-lg.is-static > .rtw-lg-head { cursor: default; }
html .rtw .rtw-lg.is-static > .rtw-lg-head:hover { background: rgba(145, 97, 245, .08); }

.rtw-row {
	position: relative; display: grid; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px;
	grid-template-columns: auto 52px minmax(0, 1fr) minmax(220px, 340px) 16px;
	border-top: 1px solid var(--rt-border, #222a36);
}
.is-manage .rtw-row { grid-template-columns: 18px 52px minmax(0, 1fr) minmax(220px, 340px) 16px; }
.rtw-lg-rows > .rtw-row:first-child { border-top: 0; }
.rtw-row:hover { background: rgba(var(--rt-brand-rgb, 149, 107, 255), .07); }
.rtw-row:not(.is-manage .rtw-row) { grid-template-columns: 52px minmax(0, 1fr) minmax(220px, 340px) 16px; }
.rtw-row .rtw-lock { position: absolute; left: 4px; top: 4px; font-size: 10px; }
.rtw-r-time { color: var(--rt-text-2, #AAB1C7); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rtw-r-match { justify-self: center; width: 100%; max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.rtw-r-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rtw-r-tn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
/* 홈/원정 배지는 목록에서 보이지 않는다(마크업은 그대로 둔다). */
.rtw-r-tn .rtw-side { display: none; }
.rtw-r-team:last-child { justify-content: flex-start; }
.rtw-row .rtw-logo { width: 28px; height: 24px; }
.rtw-row .rtw-mono { width: 26px; height: 26px; margin: 0; font-size: 11px; }
.rtw-row .rtw-team-name { display: block; width: auto; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rtw-r-vs { color: var(--rt-text-2, #AAB1C7); font-size: 11px; font-weight: 700; }
/* 예측 영역은 아이스 블루 — 이 목록 전용이다(상세·결과 상태 색은 그대로). 최종 위 · 보조 아래, 보조가 없으면 최종만. */
.rtw-r-pick {
	display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: 6px 12px;
	border: 1px solid #377CA6; border-radius: 9px; background: #102438;
	transition: background-color .12s, border-color .12s;
}
.rtw-row:hover .rtw-r-pick { background: #143049; border-color: #4A93C2; }
.rtw-r-pick-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rtw-r-pick-item + .rtw-r-pick-item { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(55, 124, 166, .45); }
.rtw-r-pick .rtw-pick-label { font-size: 10.5px; letter-spacing: 0; text-transform: none; color: #B8CADB; }
.rtw-r-pick .rtw-pick-label::after { content: none; }
.rtw-r-pick .rtw-pick-value { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; color: #7DD3FC; }
.rtw-r-pick-item.is-sub .rtw-pick-value { color: #B8CADB; font-weight: 600; }
.rtw-r-go { color: var(--rt-text-2, #AAB1C7); justify-self: end; }
.rtw-row:hover .rtw-r-go { color: var(--rt-brand, #956BFF); }

@media (max-width: 760px) {
	/* 세 줄: 체크 · 시간 · 화살표 / 대진 / 예측. 가로 스크롤 없이 접는다. */
	.rtw-row, .is-manage .rtw-row, .rtw-row:not(.is-manage .rtw-row) {
		grid-template-columns: auto auto minmax(0, 1fr) 16px; grid-template-areas: "chk time . go" "match match match match" "pick pick pick pick"; row-gap: 8px; padding: 10px 12px;
	}
	.rtw-row .rtw-check { grid-area: chk; }
	.rtw-r-time { grid-area: time; }
	.rtw-r-pick { grid-area: pick; justify-self: stretch; }
	.rtw-r-go { grid-area: go; }
	.rtw-r-match { grid-area: match; }
}

/* 글 읽기 상단의 관리 정보(Rank 경기 상세 · 게시 상태)는 화면에 내지 않는다. 마크업·값은 그대로다. */
.rtb-read .rtw-admin-meta { display: none; }

/* ═══ 운영자 경기 분석 목록 — V2 네이비·퍼플 컬러톤 ════════════════════
   목록 화면 전용 클래스(.rtw-head · .rtw-filters · .rtw-foot · .rtw-empty · .rtw-list · .rtw-search-below-filters)
   안쪽만 다룬다. 글쓰기·읽기 화면(.rtw-write · .rtb-read)과 리스트형 게시판은 이 규칙에 걸리지 않는다.
   ⚠ 버튼·입력·알약의 색은 공용 `common/css/ranktipster-violet-trial.css` 가 `html:root :is(...)` 로 강하게 정해 둬서
     일반 규칙으로는 이길 수 없다. 그 파일은 다른 V2 화면과 같이 쓰므로 건드리지 않고, 이 목록 안에서만 `!important` 로 덮는다. */
.rtw {
	--rtv-card: #0D142D; --rtv-line: #39316B; --rtv-accent: #9161F5; --rtv-accent-hi: #A582F8;
	--rtv-btn: #11243A; --rtv-sub: #9DAAC8; --rtv-field: #0A1128;
}
.rtw-filters, .rtw-foot, .rtw-search-below-filters { --rtb-ctl-h: 36px; --rtw-ctl-h: 36px; --rtw-radius: 10px; }
html .rtw .rtw-head, html .rtw .rtw-filters, html .rtw .rtw-empty, html .rtw .rtw-lg {
	background: var(--rtv-card); border-color: var(--rtv-line);
}
html .rtw .rtw-lg-head { background: rgba(145, 97, 245, .08); }
html .rtw .rtw-lg[open] > .rtw-lg-head, html .rtw .rtw-row, html .rtw .rtw-list > .rtw-date-heading { border-color: rgba(57, 49, 107, .75); }
html .rtw .rtw-row:hover, html .rtw .rtw-lg-head:hover { background: rgba(145, 97, 245, .1); }
html .rtw .rtw-head .rtw-sub, html .rtw .rtw-r-time, html .rtw .rtw-r-vs, html .rtw .rtw-empty p, html .rtw .rtw-filters .rtw-selall { color: var(--rtv-sub); }
html .rtw .rtw-head .rtw-title { font-size: 22px; font-weight: 800; color: #F7F7FA; }
html .rtw .rtw-head .rtw-hero-icon { border-color: var(--rtv-line); background: rgba(145, 97, 245, .14); color: var(--rtv-accent-hi); }
html .rtw .rtw-list > .rtw-date-heading { font-size: 16px; font-weight: 800; }
html .rtw .rtw-date-text::before { background: var(--rtv-accent); }
html .rtw .rtw-lg-head { font-size: 15.5px; }
html .rtw .rtw-row .rtw-team-name { font-size: 14.5px; font-weight: 700; color: #F7F7FA; }
html .rtw .rtw-r-time { font-size: 13.5px; font-weight: 700; }

/* 상단 검색·필터 — 입력·버튼·알약 높이 36 · 라운드 10 · 같은 테두리 */
html .rtw .rtw-filters { gap: 10px; padding: 12px 14px; }
html .rtw .rtw-filter-row > label:not(.rtw-selall) { color: var(--rtv-sub); font-size: 13px; font-weight: 700; }
html:root .rtw :is(.rtw-filters, .rtw-search-below-filters) .rtb-input {
	height: 36px; border-radius: 10px; color-scheme: dark;
	background-color: var(--rtv-field) !important; border-color: var(--rtv-line) !important; color: #F7F7FA !important;
}
html .rtw :is(.rtw-filters, .rtw-search-below-filters) .rtb-input::placeholder { color: var(--rtv-sub); opacity: .8; }
html:root .rtw :is(.rtw-filters, .rtw-search-below-filters) .rtb-input:hover { border-color: #5A4BA0 !important; }
html:root .rtw :is(.rtw-filters, .rtw-search-below-filters) .rtb-input:focus { border-color: var(--rtv-accent) !important; box-shadow: 0 0 0 2px rgba(145, 97, 245, .28); }
html:root .rtw :is(.rtw-filters, .rtw-foot, .rtw-search-below-filters) :is(.rtw-pill, .rtb-btn, .rtb-pg):not(.is-on):not(.rtb-btn-primary) {
	height: 36px; border-radius: 10px; font-size: 13px; font-weight: 700; transition: background-color .12s, border-color .12s, color .12s;
	background: var(--rtv-btn) !important; border-color: var(--rtv-line) !important; color: var(--rtv-sub) !important;
}
html:root .rtw :is(.rtw-filters, .rtw-foot, .rtw-search-below-filters) :is(.rtw-pill, .rtb-btn, .rtb-pg):not(.is-on):not(.rtb-btn-primary):hover {
	background: #162B45 !important; border-color: var(--rtv-accent) !important; color: #F7F7FA !important;
}
html:root .rtw :is(.rtw-filters, .rtw-foot, .rtw-search-below-filters) :is(.rtw-pill.is-on, .rtb-btn-primary, .rtb-search-btn, .rtb-pg.is-on) {
	height: 36px; border-radius: 10px; font-weight: 700;
	background: var(--rtv-accent) !important; border-color: var(--rtv-accent) !important; color: #FFFFFF !important;
}
html:root .rtw :is(.rtw-filters, .rtw-foot, .rtw-search-below-filters) :is(.rtw-pill.is-on, .rtb-btn-primary, .rtb-search-btn, .rtb-pg.is-on):hover {
	background: var(--rtv-accent-hi) !important; border-color: var(--rtv-accent-hi) !important; color: #FFFFFF !important;
}
html .rtw .rtw-filter-row .rtb-search-btn { padding: 0 16px; }

/* 하단 관리 버튼 — 글 관리 · 일괄 등록은 네이비, 글쓰기는 퍼플. 크기·간격·라운드 동일 */
html .rtw .rtw-foot-right { gap: 8px; }
html .rtw .rtw-foot .rtb-btn { padding: 0 16px; }
html .rtw .rtw-foot .rtb-pg { min-width: 36px; }

/* 빈 목록 — 높이·여백을 줄이고 가운데 정렬은 그대로 */
html .rtw .rtw-empty { gap: 6px; padding: 24px 20px; }
html .rtw .rtw-empty-icon { width: 44px; height: 44px; margin-bottom: 2px; background: rgba(145, 97, 245, .14); color: var(--rtv-accent-hi); }
html .rtw .rtw-empty strong { font-size: 15px; font-weight: 800; }

@media (max-width: 640px) {
	html .rtw .rtw-filters { padding: 10px 12px; }
	html .rtw .rtw-head { padding: 12px; }
	html .rtw .rtw-head .rtw-title { font-size: 19px; }
	html .rtw .rtw-empty { padding: 20px 16px; }
	html .rtw .rtw-foot-right { flex-wrap: wrap; }
}

/* 운영자 경기분석 목록 — 모바일(≤767px): 헤더 슬림 · 필터 정렬 · 뉴스툰식 캡슐 · 하단 버튼 3등분 */
@media (max-width: 767px) {
	html:root .rtw .rtw-head { min-height: 0; padding: 10px 12px; gap: 10px; }
	html:root .rtw .rtw-head .rtw-hero-icon { flex-basis: 32px; width: 32px; height: 32px; }
	html:root .rtw .rtw-head .rtw-title { font-size: 17px; }
	html:root .rtw .rtw-head .rtw-sub { display: none; }
	html:root .rtw .rtw-filters { gap: 8px; padding: 12px; }
	html:root .rtw .rtw-filter-top { flex-wrap: wrap; overflow: visible; align-items: center; }
	html:root .rtw .rtw-filter-top .rtw-head-acts { display: contents; }
	html:root .rtw .rtw-filter-top .rtw-selall { order: 3; margin-left: auto; font-size: 12px; white-space: nowrap; }
	html:root .rtw .rtw-filter-top .rtw-head-acts > .rtb-btn { order: 4; flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; }
	html:root .rtw .rtw-filter-top .rtw-search { order: 5; flex: 1 1 100%; width: 100%; }
	html:root .rtw .rtw-filters .rtw-pill.rtw-pill.rtw-pill.rtw-pill { box-sizing: border-box; height: 36px; padding: 0 14px; border: 1px solid #385a75; border-radius: 999px; background: transparent; box-shadow: none; color: #aab1c7; font-size: 13px; font-weight: 650; }
	html:root .rtw .rtw-filters .rtw-pill.rtw-pill.rtw-pill.is-on { border-color: transparent; background: #956BFF; color: #fff; }
	html:root .rtw .rtw-filters .rtb-input { height: 40px; }
	html:root .rtw .rtw-filters .rtb-search-btn.rtb-search-btn.rtb-search-btn { height: 40px; }
	html:root .rtw .rtw-foot-right { gap: 8px; }
	html:root .rtw .rtw-foot-right .rtb-btn.rtb-btn.rtb-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px; justify-content: center; border-radius: 10px; white-space: nowrap; }
	html:root .rtw .rtw-empty { gap: 4px; padding: 16px; }
	html:root .rtw .rtw-empty-icon { width: 36px; height: 36px; }
}

/* PC(≥1024px) 색상 통일 — 운영자 경기 분석 필터·페이지네이션·입력창·예측 박스를 랭킹·피드와 같은 퍼플 다크 톤으로.
   이 화면의 버튼·입력창은 변수(--rtv-*)와 !important 로 칠해져 있어 변수 값만 바꾸고, 청색 hover 만 !important 로 맞춘다. 활성(.is-on·primary)은 그대로. */
@media (min-width: 1024px) {
	html:root .rtw { --rtv-btn: #15183f; --rtv-field: #0e1233; }
	html:root .rtw :is(.rtw-filters, .rtw-foot, .rtw-search-below-filters) :is(.rtw-pill, .rtb-btn, .rtb-pg):not(.is-on):not(.rtb-btn-primary):hover { border-color:rgba(149,107,255,.35)!important; background:rgba(149,107,255,.16)!important; color:#fff!important; box-shadow:inset 0 0 12px rgba(149,107,255,.18) !important; }
	html:root .rtw :is(.rtw-filters) .rtw-pill:not(.is-on):not(.rtb-btn-primary) { border-color: rgba(149, 107, 255, .18) !important; background: rgba(149, 107, 255, .04) !important; color: #cfc6ee !important; }
	html:root .rtw .rtw-filters .rtw-filter-row:not(:has(> :not(.rtw-pill))) { align-self: flex-start; width: fit-content; padding: 3px; border: 1px solid; border-radius: 999px; border-color:rgba(149,107,255,.28); background:linear-gradient(rgba(14,18,48,.9),rgba(9,13,36,.95)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.22); }
	html:root .rtw .rtw-filters .rtw-filter-row:not(:has(> :not(.rtw-pill))) .rtw-pill:not(.is-on):not(:hover) { border-color: transparent !important; background: transparent !important; }
	html:root .rtw .rtw-filters .rtw-pill.is-on.is-on { border-color:rgba(190,165,255,.5)!important; background:linear-gradient(180deg,#9b79ff,#7549eb)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(117,73,235,.38) !important; }
	html:root .rtw .rtw-filters .rtw-pill.is-on.is-on:hover { background:linear-gradient(180deg,#a888ff,#8157f2)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 16px rgba(117,73,235,.5) !important; }
	html:root .rtw .rtw-filters .rtb-input.rtb-input { border-color:rgba(149,107,255,.28)!important; background:rgba(149,107,255,.07) !important; }
	html:root .rtw .rtw-foot .rtb-pg.is-on.is-on.is-on { border-color:rgba(190,165,255,.5)!important; background:linear-gradient(180deg,#9b79ff,#7549eb)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(117,73,235,.38) !important; }
	html:root .rtw .rtw-filters { border-color: rgba(149, 107, 255, .28); background: linear-gradient(rgba(12, 18, 44, .96), rgba(8, 13, 34, .98)); }
	html:root .rtw .rtw-r-pick { border-color: rgba(149, 107, 255, .28); background: rgba(149, 107, 255, .08); }
	html:root .rtw .rtw-r-pick-item + .rtw-r-pick-item { border-top-color: rgba(149, 107, 255, .2); }
	/* 뉴스툰 상단 디자인 기준: 제목 상자 · 아이콘 · 캡슐 필터 · 캡슐 검색 버튼 · 8px 입력창 */
	html:root .rtw .rtw-head { padding: 16px 22px; border-color: rgba(149, 107, 255, .3); border-radius: 16px; background: radial-gradient(60% 140% at 78% 0%,rgba(149,107,255,.3),transparent 62%),radial-gradient(40% 90% at 8% 100%,rgba(70,120,255,.14),transparent 70%),linear-gradient(120deg,#171a42,#0b1030 62%); }
	html:root .rtw .rtw-head .rtw-hero-icon { flex-basis: 42px; width: 42px; height: 42px; border-color: rgba(149, 107, 255, .3); border-radius: 14px; background: linear-gradient(145deg,rgba(149,107,255,.34),rgba(149,107,255,.1)); box-shadow: 0 0 22px rgba(149, 107, 255, .28); color: #d8c6ff; }
	html:root .rtw .rtw-head .rtw-title { font-size: 26px; font-weight: 900; letter-spacing: -.3px; }
	html:root .rtw .rtw-head .rtw-sub { font-size: 14px; }
	html:root .rtw .rtw-filters .rtw-pill.rtw-pill.rtw-pill { border-radius: 999px; }
	html:root .rtw .rtw-filters .rtb-search-btn.rtb-search-btn.rtb-search-btn { border-radius: 999px; border-color:rgba(190,165,255,.5)!important; background:linear-gradient(180deg,#9b79ff,#7549eb)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(117,73,235,.38) !important; }
	html:root .rtw .rtw-filters .rtb-search-btn.rtb-search-btn.rtb-search-btn:hover { background:linear-gradient(180deg,#a888ff,#8157f2)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 16px rgba(117,73,235,.5) !important; }
	html:root .rtw .rtw-filters .rtb-input.rtb-input { border-radius: 8px; }
}

/* PC(>=1024px) 경기 행 1줄: 최종·보조 예측 박스는 목록에서만 숨기고(데이터·상세 표시는 그대로),
   [체크] [시간] [양 팀 — 남은 폭의 중앙] [분석 보러가기 →] 로 놓는다. 링크는 줄 전체를 덮는 .rtw-link 그대로.
   태블릿·모바일은 아래 규칙이 .rtw-r-btn 을 감춰 기존 그대로다. */
.rtw-r-btn { display: none; }
@media (min-width: 1024px) {
	html:root .rtw .rtw-row.rtw-row { grid-template-columns: 52px minmax(0, 1fr) auto; min-height: 52px; padding: 6px 14px; }
	html:root .rtw.is-manage .rtw-row.rtw-row { grid-template-columns: 18px 52px minmax(0, 1fr) auto; }
	html:root .rtw .rtw-row .rtw-r-pick, html:root .rtw .rtw-row .rtw-r-go { display: none; }
	html:root .rtw .rtw-row .rtw-r-match { max-width: 820px; }
	html:root .rtw .rtw-row .rtw-r-team:first-child { justify-content: flex-end; }
	html:root .rtw .rtw-row .rtw-r-tn { align-items: stretch; }
	html:root .rtw .rtw-row .rtw-r-team:first-child .rtw-team-name { text-align: right; }
	html:root .rtw .rtw-row .rtw-r-btn {
		display: inline-flex; align-items: center; gap: 6px; justify-self: end; height: 34px; padding: 0 14px; white-space: nowrap;
		border: 1px solid rgba(190, 165, 255, .5); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700;
		background: linear-gradient(180deg, #9b79ff, #7549eb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 10px rgba(117, 73, 235, .3);
	}
	html:root .rtw .rtw-row:hover .rtw-r-btn { background: linear-gradient(180deg, #a888ff, #8157f2); }
}

/* ═══════════════════════════════════════════════════════════════════
   PC 날짜 이동 바 — [‹][오늘][›] [📅 10월 19일 (일)]   ……   [팀 검색][검색][도구]
   1024px 이상이고 모바일 목록이 아닐 때만(`.has-datebar`). 그 밖에서는 예전 알약·달력 줄이 그대로다.
   ═══════════════════════════════════════════════════════════════════ */
.rtw-datebar { display: none; }
@media (min-width: 1024px) {
	.rtw-filters.has-datebar .rtw-filter-top > .rtw-pill,
	.rtw-filters.has-datebar > form.rtw-filter-row { display: none; }
	.rtw-filters.has-datebar .rtw-datebar { display: flex; align-items: center; gap: 8px; }
	.rtw-datenav {
		display: inline-flex; align-items: stretch; height: 36px; overflow: hidden; box-sizing: border-box;
		border: 1px solid var(--rtv-line, #39316B); border-radius: 10px; background: var(--rtv-btn, #11243A);
	}
	.rtw-datenav a {
		display: flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 12px; box-sizing: border-box;
		color: var(--rtv-sub, #9DAAC8); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
		border-left: 1px solid var(--rtv-line, #39316B); transition: background-color .12s, color .12s;
	}
	.rtw-datenav a:first-child { border-left: 0; }
	.rtw-datenav .rtw-datenav-step { font-size: 20px; padding: 0 10px 2px; }
	.rtw-datenav a:hover, .rtw-datenav a:focus-visible { background: rgba(145, 97, 245, .16); color: #F7F7FA; outline: 0; }
	.rtw-datenav .rtw-datenav-today.is-on { background: var(--rtv-accent, #9161F5); color: #FFFFFF; }
	.rtw-datepick { margin: 0; }
	.rtw-datebtn {
		position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; box-sizing: border-box;
		border: 1px solid var(--rtv-line, #39316B); border-radius: 10px; background: var(--rtv-btn, #11243A);
		color: var(--rtv-sub, #9DAAC8); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
		transition: background-color .12s, border-color .12s, color .12s;
	}
	.rtw-datebtn.is-set { color: #F7F7FA; }
	.rtw-datebtn:hover, .rtw-datebtn:focus-within { border-color: var(--rtv-accent, #9161F5); background: #162B45; color: #F7F7FA; }
	.rtw-datebtn svg { flex: 0 0 auto; }
	/* 진짜 날짜 입력은 버튼 전체를 덮는 투명 층이다 — 어디를 눌러도 선택기가 열린다. */
	.rtw-datebtn input[type="date"] {
		position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; color-scheme: dark;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   PC(≥1024px) 경기분석 글 상세 — 청록·파랑 판을 /analysis 목록·/market 과 같은 다크 네이비 + 퍼플로.
   `.rtb-read` 안(글 읽기)만 건드린다. 색 값은 목록 필터 상자(`.rtw-filters`)가 쓰는 것을 그대로 재사용했다:
   판 rgba(12,18,44)→(8,13,34) · 퍼플 선 rgba(149,107,255,.28) · 연퍼플 글자 #cfc6ee · 강조 #b49aff.
   크기·여백·배치·글자는 바꾸지 않는다. 승패·배당 같은 상태 색은 이 글에 없다.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	.rtb-read .rtb-panel.rtb-doc { border-color: rgba(149, 107, 255, .28); background: linear-gradient(rgba(12, 18, 44, .96), rgba(8, 13, 34, .98)); }
	.rtb-read .rtw-mh { border-bottom-color: rgba(149, 107, 255, .2); }
	.rtb-read .rtw-mh .rtw-vs-tag { background: rgba(149, 107, 255, .14); }
	.rtb-read .rtw-mh .rtw-side { background: rgba(149, 107, 255, .1); }
	/* 최종·보조 예측 박스 */
	.rtb-read .rtw-mh {
		--rtw-pick-bg: rgba(149, 107, 255, .08); --rtw-pick-border: rgba(149, 107, 255, .28);
		--rtw-pick-label: #cfc6ee; --rtw-pick-value: #b49aff;
		--rtw-pick-bg-hover: rgba(149, 107, 255, .08); --rtw-pick-border-hover: rgba(149, 107, 255, .28);
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-value ~ .rtw-pick-label ~ .rtw-pick-value { color: #cfc6ee; }
	/* HOME / AWAY 분석 카드 */
	.rtb-read .analysis-team-card { border-color: rgba(149, 107, 255, .22); background: rgba(149, 107, 255, .06); }
	.rtb-read .analysis-team-home { --rtas-accent: #9161f5; }
	.rtb-read .analysis-team-away { --rtas-accent: #b49aff; }
	/* 종합 분석 · 강조 인용 — 왼쪽 굵은 선은 기존 그대로, 바탕과 나머지 세 변만 퍼플로 */
	.rtb-read .analysis-overall,
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content blockquote.rt-analysis-highlight,
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content blockquote.t3-analysis-highlight {
		border-top-color: rgba(149, 107, 255, .28); border-right-color: rgba(149, 107, 255, .28); border-bottom-color: rgba(149, 107, 255, .28);
		background: rgba(149, 107, 255, .08);
	}
	.rtb-read .analysis-pick-final-team { --rtas-pick-gold: #fff; }
	.rtb-read .analysis-pick-final-team ~ .analysis-pick-final-label ~ .analysis-pick-final-team { --rtas-pick-gold: #cfc6ee; }
}

/* `<br>` 를 나눈 문단은 1024px 미만에서 틈이 없다 — 예전 `<br>` 줄바꿈과 똑같이 보인다 */
.rtb-read :is(.analysis-team-body, .analysis-overall-body) p.rtas-brp { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PC(≥1024px) 경기분석 글 상세 리뉴얼 — 프리미엄 분석 리포트
   히어로(브레드크럼·리그·팀·VS) → 예측 배너 → HOME/AWAY 카드 → 종합 분석 리포트 → 댓글.
   전부 `.rtb-read` 안이고 1024px 미만은 아무것도 바뀌지 않는다. 데이터는 그대로이며 새 숫자를 만들지 않는다
   (원고에 없는 요약 지표·소제목·종합 ①② 카드는 그리지 않는다). 색은 위 PC 색 블록의 퍼플 값을 쓴다.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	.rtb-read .rtb-panel.rtb-doc { overflow: hidden; border-radius: 16px; box-shadow: 0 14px 40px rgba(6, 4, 28, .5); }

	/* ── 히어로: 무대 조명 — 양옆 보라 광원 + 가는 사선 빔 + 아래로 어두워지는 바탕 ── */
	.rtb-read .rtw-mh {
		--rtw-mh-w: 1100px;
		position: relative; padding: 26px 30px 32px; border-bottom: 1px solid rgba(149, 107, 255, .22);
		background:
			radial-gradient(440px 250px at 9% -6%, rgba(149, 107, 255, .46), transparent 72%),
			radial-gradient(440px 250px at 91% -6%, rgba(149, 107, 255, .46), transparent 72%),
			repeating-linear-gradient(118deg, rgba(180, 154, 255, .055) 0 1px, transparent 1px 24px),
			linear-gradient(180deg, rgba(24, 16, 70, .72), rgba(10, 10, 34, .4));
	}
	.rtb-read .rtw-mh .rtw-league { font-size: 20px; font-weight: 800; color: #f7f7fa; gap: 10px; }
	.rtb-read .rtw-mh .rtw-flag { width: 28px; height: 21px; border-radius: 3px; }
	/* 리그명 왼쪽 종목 아이콘 — 글자(20px)와 비슷한 크기, 세로 가운데 */
	.rtb-read .rtw-mh .rtw-lg-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }
	.rtb-read .rtw-mh .rtw-lg-ico .rtw-sport-img { display: block; width: 22px; height: 22px; }
	.rtb-read .rtw-mh .rtw-lg-ico .rtw-sport-ico { width: 20px; height: 20px; }
	.rtb-read .rtw-match.is-detail .rtw-team { display: flex; flex-direction: column; align-items: center; gap: 10px; }
	.rtb-read .rtw-match.is-detail .rtw-logo { width: 100px; height: 88px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
	.rtb-read .rtw-match.is-detail .rtw-mono { width: 84px; height: 84px; font-size: 32px; }
	.rtb-read .rtw-match.is-detail .rtw-team-name { order: 2; font-size: 28px; font-weight: 800; color: #fff; }
	.rtb-read .rtw-match.is-detail .rtw-side { display: none; }
	.rtb-read .rtw-match.is-detail .rtw-vs { gap: 10px; padding-top: 22px; }
	.rtb-read .rtw-match.is-detail .rtw-vs-tag { min-width: 60px; height: 38px; font-size: 17px; font-weight: 800; color: #efe9ff; border: 1px solid rgba(149, 107, 255, .45); background: rgba(149, 107, 255, .2); }
	.rtb-read .rtw-match.is-detail .rtw-time { font-size: 22px; font-weight: 800; color: #f7f7fa; }

	/* ── 예측 배너: [★ 최종 예측  값] │ [▥ 보조 예측  값] ── */
	.rtb-read .rtw-pick.is-detail {
		display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; column-gap: 18px;
		width: 100%; max-width: none; box-sizing: border-box; margin: 28px 0 0; padding: 16px 28px; text-align: left;
		border: 1.5px solid rgba(149, 107, 255, .55); border-radius: 14px;
		background: linear-gradient(90deg, rgba(149, 107, 255, .18), rgba(60, 40, 140, .1));
		box-shadow: 0 0 0 1px rgba(149, 107, 255, .08), 0 8px 26px rgba(60, 30, 160, .28);
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-label {
		display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #f7f7fa; white-space: nowrap;
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-label::after { content: none; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-label::before {
		content: ""; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(149, 107, 255, .42);
		background-position: center; background-repeat: no-repeat; background-size: 22px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='m12 3 2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.3l1.2-6.3L3 9.6l6.3-.8z'/%3E%3C/svg%3E");
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-value ~ .rtw-pick-label {
		padding-left: 28px; border-left: 1px solid rgba(149, 107, 255, .32);
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-value ~ .rtw-pick-label::before {
		background-color: rgba(149, 107, 255, .24);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfc6ee'%3E%3Cpath d='M5 12h3v8H5zm5-6h3v14h-3zm5 3h3v11h-3z'/%3E%3C/svg%3E");
	}
	.rtb-read .rtw-pick.is-detail .rtw-pick-value { overflow: visible; text-overflow: clip; white-space: normal; font-size: 22px; font-weight: 800; line-height: 1.25; color: #fff; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-mk { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #b49aff; }

	/* ── 본문 판: 카드 사이 숨 쉴 자리 ── */
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content.rt-analysis-split { --rtas-gap: 20px; }
	.rtb-read .analysis-team-grid { margin-bottom: 24px; }

	/* ── HOME / AWAY 카드 ── */
	.rtb-read .analysis-team-card {
		padding: 28px 30px; border-radius: 16px; border-color: rgba(149, 107, 255, .32);
		background: linear-gradient(160deg, rgba(149, 107, 255, .11), rgba(14, 12, 46, .55));
	}
	.rtb-read .analysis-team-title { gap: 14px; }
	.rtb-read .analysis-team-logo { width: 44px; height: 44px; }
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content .analysis-team-heading { font-size: 22px; font-weight: 800; color: #fff; }
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content .analysis-team-heading::after { content: " 분석"; }
	.rtb-read .analysis-team-rule { margin: 18px 0 20px; }

	/* ── 종합 분석 리포트 ── */
	.rtb-read .analysis-overall {
		padding: 28px 32px; border-radius: 16px;
		background: linear-gradient(160deg, rgba(149, 107, 255, .13), rgba(14, 12, 46, .6));
	}
	.rtb-read .analysis-overall-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 20px; font-weight: 800; color: #fff; }
	.rtb-read .analysis-overall-heading::before {
		content: ""; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background-color: rgba(149, 107, 255, .24);
		background-position: center; background-repeat: no-repeat; background-size: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfc6ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E");
	}
	/* 분석 본문 타이포 — GoodPick365 경기분석 본문(`.gpd-section-text`)과 같은 값: 글꼴 스택 · 16px · 줄간격 1.6 ·
	   `word-break: keep-all`(한글을 단어 중간에서 끊지 않는다 — 이전엔 normal 이라 줄 끝에 한 글자가 남았다) · `overflow-wrap: anywhere`.
	   글자색은 이 사이트 다크 테마 값을 유지한다. 원고의 줄바꿈(`<br>`)은 그대로 둔다. */
	.rtb-read :is(.analysis-team-body, .analysis-overall-body) {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
		font-size: 16px; line-height: 1.6; color: #e6e3f7; word-break: keep-all; overflow-wrap: anywhere;
	}
	/* 문단 간격(원고의 `<br>` 를 나눈 `p.rtas-brp`) 14px — 마지막 문단 뒤에는 두지 않는다 */
	.rtb-read :is(.analysis-team-body, .analysis-overall-body) p.rtas-brp { margin: 0 0 14px; }
	.rtb-read :is(.analysis-team-body, .analysis-overall-body) p.rtas-brp:last-child { margin-bottom: 0; }
	/* 종합 분석 안의 예측 배너 — 낮은 가로형 2분할: [★ 최종예측 : 값] │ [▥ 보조예측 : 값]. 보조가 없으면 왼쪽만. */
	.rtb-read .analysis-pick-final {
		display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; column-gap: 14px;
		min-height: 60px; box-sizing: border-box; margin-top: 26px; padding: 0 22px;
		border: 1.5px solid rgba(149, 107, 255, .55); border-radius: 14px;
		background: linear-gradient(90deg, rgba(149, 107, 255, .18), rgba(60, 40, 140, .1));
		box-shadow: 0 0 0 1px rgba(149, 107, 255, .08), 0 8px 26px rgba(60, 30, 160, .28);
	}
	.rtb-read .analysis-pick-final::before { content: none; }
	.rtb-read .analysis-pick-final-icon { display: none; }
	.rtb-read .analysis-pick-final-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: none; color: #f7f7fa; white-space: nowrap; }
	.rtb-read .analysis-pick-final-label::before {
		content: ""; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(149, 107, 255, .42);
		background-position: center; background-repeat: no-repeat; background-size: 18px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='m12 3 2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.3l1.2-6.3L3 9.6l6.3-.8z'/%3E%3C/svg%3E");
	}
	.rtb-read .analysis-pick-final-team ~ .analysis-pick-final-label { padding-left: 24px; border-left: 1px solid rgba(149, 107, 255, .32); }
	.rtb-read .analysis-pick-final-team ~ .analysis-pick-final-label::before {
		background-color: rgba(149, 107, 255, .24);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfc6ee'%3E%3Cpath d='M5 12h3v8H5zm5-6h3v14h-3zm5 3h3v11h-3z'/%3E%3C/svg%3E");
	}
	.rtb-read .analysis-pick-final-team { min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }

	/* ── 댓글: 본문과 같은 판 ── */
	.rtb-read .rtb-cmt { border-color: rgba(149, 107, 255, .28); background: linear-gradient(rgba(12, 18, 44, .96), rgba(8, 13, 34, .98)); }
	.rtb-read .rtb-cmt-title { color: #f7f7fa; border-bottom-color: rgba(149, 107, 255, .2); }
	.rtb-read .rtb-cmt-title em { color: #b49aff; }
	.rtb-read .rtb-cmt-item { border-color: rgba(149, 107, 255, .16); }
	.rtb-read .rtb-cmt-list > .rtb-cmt-item:not(.is-reply) + .rtb-cmt-item:not(.is-reply),
	.rtb-read .rtb-cmt-list > .rtb-cmt-item.is-reply + .rtb-cmt-item:not(.is-reply) { border-top-color: rgba(149, 107, 255, .16); }
	.rtb-read .rtb-cmt-body a { color: #b49aff; }
	.rtb-read .rtb-cmt-act:hover, .rtb-read .rtb-cmt-act:focus-visible { color: #cfc6ee; background: rgba(149, 107, 255, .12); }
}
@media (min-width: 1024px) {
	/* 예측 문구: PC 는 선택만(`최종예측 : 무승부`), 1024 미만은 예전 글자(`시장 · 선택 @ 배당`) 그대로 */
	.rtb-read .rtw-pk-m { display: none; }
	/* 폭: 본문 카드가 1060px 에서 멈추던 것(`.rtb-doc-content` max-width)을 풀고, 히어로·배너·카드·버튼이 같은 30px 좌우 기준선을 쓴다 */
	.rtb-read .rtb-doc-body { padding-left: 30px; padding-right: 30px; }
	.rtb-read .rtb-doc-body.is-webzine .rtb-doc-content.rt-analysis-split { max-width: none; }
	.rtb-read .rtb-doc-tools { padding-left: 30px; padding-right: 30px; }
	/* 수정·삭제 버튼: 청록 판 대신 사이트 기본 — 수정은 보라 채움, 삭제는 빨강 글자 + 보라 톤 바탕 */
	.rtb-read .rtb-doc .rtb-doc-tools .rtb-btn.rtb-btn-edit {
		border-color: rgba(190, 165, 255, .5); background: linear-gradient(180deg, #9b79ff, #7549eb); color: #fff;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 10px rgba(117, 73, 235, .3);
	}
	.rtb-read .rtb-doc .rtb-doc-tools .rtb-btn.rtb-btn-edit:hover { border-color: rgba(190, 165, 255, .5); background: linear-gradient(180deg, #a888ff, #8157f2); color: #fff; }
	.rtb-read .rtb-doc .rtb-doc-tools .rtb-btn.rtb-btn-delete { border-color: rgba(149, 107, 255, .28); background: rgba(149, 107, 255, .07); color: var(--rt-negative, #e0576b); }
	.rtb-read .rtb-doc .rtb-doc-tools .rtb-btn.rtb-btn-delete:hover { border-color: var(--rt-negative, #e0576b); background: var(--rt-danger-bg, #2a1a1c); color: var(--rt-negative, #e0576b); }
}
@media (max-width: 1023px) { .rtw-pk-d { display: none; } }
@media (min-width: 1024px) and (max-width: 1180px) {
	.rtb-read .rtw-pick.is-detail { padding: 14px 18px; column-gap: 12px; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-label { gap: 10px; font-size: 14px; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-label::before { width: 36px; height: 36px; background-size: 18px; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-value ~ .rtw-pick-label { padding-left: 16px; }
	.rtb-read .rtw-pick.is-detail .rtw-pick-value { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PC(≥1024px) 히어로 — 최근 5경기 폼 (승/무/패, 왼쪽이 오래된 경기). 분할 카드가 있는 글에서는 예측 배너 자리를 대신한다
   (예측은 종합 분석 하단 스트립에서 보인다). 승·무·패 색은 승부예측 경기 상세의 폼 배지와 같은 값이다.
   1024px 미만에는 이 블록이 보이지 않고 예측 박스가 그대로다.
   ═══════════════════════════════════════════════════════════════════ */
.rtw-form { display: none; }
@media (min-width: 1024px) {
	.rtb-read:has(.rt-analysis-split) .rtw-pick.is-detail { display: none; }
	.rtb-read .rtw-form {
		display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; margin: 28px 0 0; padding: 18px 28px;
		border: 1.5px solid rgba(149, 107, 255, .55); border-radius: 14px;
		background: linear-gradient(90deg, rgba(149, 107, 255, .18), rgba(60, 40, 140, .1));
		box-shadow: 0 0 0 1px rgba(149, 107, 255, .08), 0 8px 26px rgba(60, 30, 160, .28);
	}
	.rtb-read .rtw-form-side { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 0 16px; }
	.rtb-read .rtw-form-side + .rtw-form-side { border-left: 1px solid rgba(149, 107, 255, .32); }
	.rtb-read .rtw-form-head { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; color: #f7f7fa; }
	.rtb-read .rtw-form-badges { display: flex; gap: 8px; }
	.rtb-read .rtw-form-b {
		display: grid; place-items: center; width: 40px; height: 36px; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; cursor: default;
	}
	.rtb-read .rtw-form-b.is-W { background: #078958; }
	.rtb-read .rtw-form-b.is-D { background: #eab308; }
	.rtb-read .rtw-form-b.is-L { background: #cf304b; }
	.rtb-read .rtw-form-empty { display: grid; place-items: center; height: 36px; font-size: 14px; font-weight: 700; color: #9daac8; }
}