@charset "utf-8";

/* ============================================================
   mcat15 — 라디오 편성표형 분류
   빈티지 라디오 테마 + 시간대×카테고리 테이블 + info bar
   ============================================================ */

:root {
	--mc15-bg:       #f5f0e8;
	--mc15-dark:     #1e1508;
	--mc15-amber:    #c8840a;
	--mc15-amber-lt: rgba(200, 132, 10, 0.1);
	--mc15-ink:      #1a1209;
	--mc15-muted:    #7a6040;
	--mc15-rule:     #c4b090;
	--mc15-cell-bg:  #ede7da;
}

body {
	background: var(--mc15-bg);
}
body.dark {
	background: #120e08;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.12;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px;
}

body.page-light-header #header,
body.page-light-header #header.on,
body.page-light-header #header.act {
	background-color: var(--mc15-bg) !important;
}

.mc15-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
}

/* ═══════════════════════════════════════════
   S1: 히어로
   ═══════════════════════════════════════════ */
.mc15-hero {
	padding: 130px 0 0;
	position: relative;
}
.mc15-eyebrow {
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	color: var(--mc15-amber);
	font-weight: 600;
	margin-bottom: 14px;
}
.mc15-tit {
	font-size: clamp(40px, calc(14px + 4.5vw), 80px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--mc15-ink);
	margin-bottom: 14px;
}
.mc15-desc {
	font-size: clamp(15px, calc(6px + 1.1vw), 18px);
	color: var(--mc15-muted);
	word-break: keep-all;
	margin-bottom: 40px;
}
.mc15-hero-wave {
	display: block;
	width: 100%;
	height: 60px;
}

/* ═══════════════════════════════════════════
   S2: 편성표 테이블
   ═══════════════════════════════════════════ */
.mc15-schedule {
	padding-bottom: 100px;
}
.mc15-table-wrap {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mc15-rule) transparent;
}
.mc15-table-wrap::-webkit-scrollbar {
	height: 4px;
}
.mc15-table-wrap::-webkit-scrollbar-track {
	background: transparent;
}
.mc15-table-wrap::-webkit-scrollbar-thumb {
	background: var(--mc15-rule);
	border-radius: 2px;
}
.mc15-table {
	width: 100%;
	min-width: 960px;
	border-collapse: collapse;
}

/* 헤더 행 */
.mc15-table thead tr {
	border-bottom: 2px solid var(--mc15-amber);
}
.mc15-table thead th {
	padding: 16px 12px 12px;
	text-align: left;
	vertical-align: bottom;
}
.mc15-th-ch {
	display: block;
	font-size: clamp(12px, calc(4px + 0.8vw), 13px);
	font-family: var(--font-mono, monospace);
	font-weight: 700;
	color: var(--mc15-amber);
	margin-bottom: 4px;
}
.mc15-th-cat {
	display: block;
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-weight: 700;
	color: var(--mc15-ink);
}


/* 일반 셀 */
.mc15-cell {
	border: 1px solid var(--mc15-rule);
	vertical-align: top;
	cursor: pointer;
	transition: background 0.18s;
	min-width: 140px;
}
.mc15-cell:focus {
	outline: 2px solid var(--mc15-amber);
	outline-offset: -2px;
}
.mc15-cell:hover {
	background: var(--mc15-amber-lt);
}
.mc15-cell.is-active {
	background: var(--mc15-amber-lt);
	outline: 2px solid var(--mc15-amber);
	outline-offset: -2px;
}
.mc15-cell--empty {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 4px,
		rgba(196, 176, 144, 0.15) 4px,
		rgba(196, 176, 144, 0.15) 5px
	);
	cursor: default;
}
.mc15-cell-inner {
	padding: 16px 14px;
}
.mc15-cell-vol {
	display: block;
	font-size: clamp(12px, calc(4px + 0.8vw), 14px);
	font-family: var(--font-mono, monospace);
	font-weight: 700;
	color: var(--mc15-amber);
	margin-bottom: 6px;
}
.mc15-cell-tit {
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-weight: 600;
	font-family: var(--font-serif);
	color: var(--mc15-ink);
	word-break: keep-all;
}

/* ═══════════════════════════════════════════
   하단 Info Bar
   ═══════════════════════════════════════════ */
.mc15-info-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--mc15-dark);
	transform: translateY(100%);
	transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
	border-top: 2px solid var(--mc15-amber);
}
.mc15-info-bar.is-open {
	transform: translateY(0);
}
.mc15-info-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 60px;
	flex-wrap: wrap;
}
.mc15-info-time {
	font-size: clamp(12px, calc(4px + 0.8vw), 14px);
	color: rgba(200, 132, 10, 0.6);
	font-family: var(--font-mono, monospace);
	font-weight: 700;
	white-space: nowrap;
}
.mc15-info-sep {
	color: rgba(200, 132, 10, 0.3);
}
.mc15-info-cat {
	font-size: clamp(12px, calc(4px + 0.8vw), 14px);
	color: var(--mc15-amber);
	font-weight: 700;
	white-space: nowrap;
}
.mc15-info-tit {
	font-size: clamp(18px, calc(8px + 1.4vw), 24px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: #e8dcc8;
	word-break: keep-all;
	flex: 1;
	min-width: 160px;
}
.mc15-info-desc {
	font-size: clamp(14px, calc(5px + 1vw), 16px);
	color: rgba(232, 220, 200, 0.55);
	word-break: keep-all;
	flex: 1;
	min-width: 140px;
}
.mc15-info-vol {
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-family: var(--font-mono, monospace);
	color: rgba(200, 132, 10, 0.55);
	white-space: nowrap;
}
.mc15-info-link {
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-weight: 700;
	color: var(--mc15-amber);
	text-decoration: none;
	white-space: nowrap;
	padding: 8px 16px;
	border: 1px solid rgba(200, 132, 10, 0.4);
	border-radius: 2px;
	transition: background 0.2s;
}
.mc15-info-link:hover {
	background: var(--mc15-amber-lt);
}
.mc15-info-close {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	background: none;
	border: 1px solid rgba(200, 132, 10, 0.3);
	color: var(--mc15-amber);
	font-size: 16px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s;
}
.mc15-info-close:hover {
	background: var(--mc15-amber-lt);
}

/* ═══════════════════════════════════════════
   반응형 — 999px
   ═══════════════════════════════════════════ */
@media all and (max-width: 999px) {
	.mc15-wrap { padding: 0 32px; }
	.mc15-info-inner { padding: 16px 40px 16px 32px; gap: 12px; }
	.mc15-info-desc { display: none; }
}

/* ═══════════════════════════════════════════
   반응형 — 768px
   ═══════════════════════════════════════════ */
@media all and (max-width: 768px) {
	.mc15-wrap { padding: 0 20px; }
	.mc15-hero { padding: 100px 0 0; }
	.mc15-info-inner { padding: 14px 48px 14px 20px; gap: 8px; }
	.mc15-info-tit { font-size: clamp(16px, calc(6px + 2vw), 20px); }
	.mc15-info-vol { display: none; }
}

/* ═══════════════════════════════════════════
   반응형 — 499px
   ═══════════════════════════════════════════ */
@media all and (max-width: 499px) {
	.mc15-wrap { padding: 0 16px; }
	.mc15-td-time { padding: 14px 10px 14px 0; }
	.mc15-cell { min-width: 120px; }
}