@charset "utf-8";

/* 코어에 번들된 Pretendard 를 쓴다. 외부 CDN 을 참조하지 않는다.
 * 경로는 웹 루트가 아니라 이 파일 위치 기준이다: themes/clutch/assets -> 루트 */
@font-face {
	font-family: 'Pretendard';
	src: url('../../../common/fonts/PretendardVariable.woff2') format('woff2-variations');
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
}

/* 이 테마의 바탕은 어둡다. 밝은 모드는 예비이며 기본은 다크다 */
:root {

	--cl-brand: #00e5a0;
	--cl-brand-dark: #00b47e;
	--cl-brand-light: #4dffc4;
	--cl-brand-soft: rgba(0, 229, 160, .12);

	/* 두 번째 네온. 대진표의 패자조와 라이브 표시에 쓴다 */
	--cl-alt: #b14aff;
	--cl-alt-soft: rgba(177, 74, 255, .14);
	--cl-live: #ff3b6b;

	--cl-ink: #f2f4f8;
	--cl-ink-sub: #98a1b3;
	--cl-muted: #5d6577;
	--cl-line: #232833;
	--cl-line-soft: #1a1e27;
	--cl-bg: #0b0d12;
	--cl-surface: #12151d;
	--cl-surface-2: #191d27;
	--cl-danger: #ff3b6b;
	--cl-success: #00e5a0;
	--cl-warn: #ffb020;

	--cl-radius: 4px;
	--cl-radius-sm: 3px;
	--cl-radius-lg: 8px;
	--cl-radius-pill: 999px;
	--cl-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
	/* 네온은 그림자로 낸다. 글자에 직접 걸면 읽기 어려워진다 */
	--cl-glow: 0 0 0 1px var(--cl-brand-soft), 0 0 24px -6px var(--cl-brand);

	--cl-w: 1440px;
	--cl-font: Pretendard, 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
		'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	/* 영문 표제용. 한글은 뒤의 Pretendard 가 받는다 (fonts.css 참고) */
	--cl-display: 'Chakra Petch', Pretendard, 'Pretendard Variable', -apple-system,
		'Segoe UI', 'Malgun Gothic', sans-serif;
	/* 점수와 시드 번호는 자리를 고정해야 대진표가 흔들리지 않는다 */
	--cl-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
	--cl-track: .14em;
}

[data-theme="light"] {
	--cl-brand: #00a877;
	--cl-brand-dark: #00805a;
	--cl-brand-light: #00c78d;
	--cl-brand-soft: rgba(0, 168, 119, .1);
	--cl-alt: #7c22d6;
	--cl-alt-soft: rgba(124, 34, 214, .1);
	--cl-ink: #0b0d12;
	--cl-ink-sub: #4d5768;
	--cl-muted: #8b93a3;
	--cl-line: #e1e5ec;
	--cl-line-soft: #eef1f5;
	--cl-bg: #ffffff;
	--cl-surface: #f6f8fa;
	--cl-surface-2: #eef1f5;
	--cl-shadow: 0 24px 60px -34px rgba(11, 13, 18, .35);
	--cl-glow: 0 0 0 1px var(--cl-brand-soft);
}

html, body { margin: 0; background: var(--cl-bg); }

.cl {
	font-family: var(--cl-font);
	color: var(--cl-ink);
	background: var(--cl-bg);
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 창 스크롤바는 html 이 그리므로 감싸는 요소가 아니라 여기에 둔다 */
html, .cl * {
	scrollbar-width: thin;
	scrollbar-color: var(--cl-line) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cl-bg); }
::-webkit-scrollbar-thumb { background-color: var(--cl-line); border: 3px solid var(--cl-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--cl-brand); }
::-webkit-scrollbar-corner { background: transparent; }

.cl a { color: inherit; text-decoration: none; }
.cl img { max-width: 100%; height: auto; }
.cl ul, .cl ol { list-style: none; margin: 0; padding: 0; }
.cl h1, .cl h2, .cl h3, .cl h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }

.cl-inner { width: 100%; max-width: var(--cl-w); margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); box-sizing: border-box; }

/* 자간 벌린 대문자 라벨 */
.cl-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: var(--cl-track);
	text-transform: uppercase;
	color: var(--cl-brand);
}
.cl-label::before { content: ""; width: 20px; height: 2px; background: var(--cl-brand); }

/* 진행 중 표시. 점이 뛰어야 살아 있는 느낌이 난다 */
.cl-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--cl-radius-pill);
	background: rgba(255, 59, 107, .12);
	color: var(--cl-live);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.cl-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: clPulse 1.6s ease-in-out infinite;
}
@keyframes clPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.cl-btn,
.cl a.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	background: transparent;
	color: var(--cl-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.cl-btn:hover { border-color: var(--cl-brand); color: var(--cl-brand); }
.cl-btn-primary,
.cl a.cl-btn-primary {
	background: var(--cl-brand);
	border-color: var(--cl-brand);
	color: #05130d;
}
.cl-btn-primary:hover { background: var(--cl-brand-light); border-color: var(--cl-brand-light); color: #05130d; box-shadow: var(--cl-glow); }
.cl-btn-sm { padding: 10px 18px; font-size: 13px; }
.cl-btn-lg { padding: 18px 36px; font-size: 15.5px; }
.cl-btn:disabled, .cl-btn.is-disabled { opacity: .4; pointer-events: none; }

.cl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius-pill);
	background: transparent;
	color: var(--cl-ink-sub);
	font-size: 13px;
	font-weight: 700;
	transition: border-color .15s, color .15s, background-color .15s;
}
.cl-chip:hover { border-color: var(--cl-brand); color: var(--cl-brand); }
.cl-chip.is-on { background: var(--cl-brand); border-color: var(--cl-brand); color: #05130d; }

.cl-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--cl-radius-sm);
	background: var(--cl-surface-2);
	color: var(--cl-ink-sub);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
}
.cl-badge.is-brand { background: var(--cl-brand-soft); color: var(--cl-brand); }
.cl-badge.is-alt { background: var(--cl-alt-soft); color: var(--cl-alt); }
.cl-badge.is-danger { background: rgba(255, 59, 107, .14); color: var(--cl-danger); }
.cl-badge.is-warn { background: rgba(255, 176, 32, .14); color: var(--cl-warn); }

.cl-card {
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius-lg);
	background: var(--cl-surface);
	padding: 24px;
}

.cl-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cl-field > label { font-size: 12.5px; font-weight: 700; color: var(--cl-ink-sub); }
.cl-field > label em { color: var(--cl-brand); font-style: normal; }
.cl input[type="text"], .cl input[type="password"], .cl input[type="email"],
.cl input[type="search"], .cl input[type="tel"], .cl input[type="number"],
.cl input[type="date"], .cl input[type="datetime-local"], .cl select, .cl textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	background: var(--cl-surface);
	color: var(--cl-ink);
	font: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color .14s, box-shadow .14s;
}
.cl input:focus, .cl select:focus, .cl textarea:focus { border-color: var(--cl-brand); box-shadow: 0 0 0 3px var(--cl-brand-soft); }
.cl textarea { resize: vertical; line-height: 1.7; }
.cl-field-hint { margin: 0; font-size: 12.5px; color: var(--cl-muted); line-height: 1.6; }
.cl-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.cl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cl-table th, .cl-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--cl-line); }
.cl-table thead th {
	color: var(--cl-ink-sub);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* 점수와 순위는 자리가 흔들리면 표가 어지럽다 */
.cl-num { font-family: var(--cl-mono); font-variant-numeric: tabular-nums; }

/* 사이트 헤더(.cl-head)와 이름이 겹치지 않게 페이지 머리는 따로 둔다 */
.cl-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--cl-line); }
.cl-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: var(--cl-track); color: var(--cl-brand); text-transform: uppercase; }
.cl-title { margin: 10px 0 0; font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; }
.cl-desc { margin: 10px 0 0; color: var(--cl-ink-sub); font-size: 15px; }

.cl-pages { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 40px 0 0; }
.cl-pages a, .cl-pages strong {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border: 1px solid transparent;
	border-radius: var(--cl-radius);
	font-size: 13px;
	font-weight: 700;
	color: var(--cl-ink-sub);
}
.cl-pages a:hover { border-color: var(--cl-line); color: var(--cl-ink); }
.cl-pages strong { background: var(--cl-brand); border-color: var(--cl-brand); color: #05130d; }

.cl-empty { padding: 60px 20px; text-align: center; color: var(--cl-muted); font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
	.cl * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── 영문 표제 ──
   자간을 벌린 대문자 라벨과 숫자에 각진 영문 글꼴을 물린다.
   한글이 섞이면 그 글자만 Pretendard 로 떨어진다. */
.cl-label,
.cl-live,
.cl-badge,
.cl-eyebrow,
.cl-num,
.cl-table thead th { font-family: var(--cl-display); }

/* ── 스킨 간 폼과 버튼 통일 ──
   회원(.xm)과 게시판 스킨은 각자 다른 뿌리에서 왔다.
   모양(모서리, 여백, 눌림)만 여기서 한 번에 맞춘다. 색은 각 스킨이 토큰에서 물려받는다. */
.xm input[type="text"], .xm input[type="password"], .xm input[type="email"],
.xm input[type="search"], .xm input[type="tel"], .xm input[type="number"],
.xm input[type="date"], .xm select, .xm textarea,
.bd input[type="text"], .bd input[type="password"], .bd input[type="email"],
.bd input[type="search"], .bd select, .bd textarea {
	border-radius: var(--cl-radius);
	font-size: 14.5px;
	transition: border-color .14s, box-shadow .14s;
}
.xm input:focus, .xm select:focus, .xm textarea:focus,
.bd input:focus, .bd select:focus, .bd textarea:focus {
	outline: none;
	border-color: var(--cl-brand);
	box-shadow: 0 0 0 3px var(--cl-brand-soft);
}

.xm .btn, .xm a.btn, .xm button.btn,
.xm input[type="submit"], .xm .submit,
.bd .btn, .bd a.btn, .bd button.btn {
	border-radius: var(--cl-radius);
	font-size: 14px;
	font-weight: 700;
	transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}
.xm .btn:hover, .xm a.btn:hover, .xm button.btn:hover,
.bd .btn:hover, .bd a.btn:hover, .bd button.btn:hover { transform: translateY(-1px); }