@charset "utf-8";

/* 코어에 번들된 Pretendard 를 쓴다. 외부 CDN 을 참조하지 않는다.
 * 경로는 웹 루트가 아니라 이 파일 위치 기준이다: themes/redline/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 {

	--hr-brand: #e1131d;
	--hr-brand-dark: #b60d16;
	--hr-brand-light: #ff3b45;
	--hr-brand-soft: rgba(225, 19, 29, .14);

	--hr-ink: #f5f5f5;
	--hr-ink-sub: #a8a8a8;
	--hr-muted: #6f6f6f;
	--hr-line: #262626;
	--hr-line-soft: #1a1a1a;
	--hr-bg: #0a0a0a;
	--hr-surface: #141414;
	--hr-danger: #e1131d;
	--hr-success: #21c17a;

	--hr-btn-face: transparent;
	--hr-btn-line: #3a3a3a;
	--hr-btn-strong: var(--hr-brand);
	--hr-btn-strong-hover: #ffffff;

	/* 스케이트 그래픽처럼 각지게. 어디에도 둥근 모서리를 두지 않는다 */
	--hr-radius: 0;
	--hr-radius-sm: 0;
	--hr-radius-btn: 0;
	--hr-radius-pill: 0;
	--hr-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);

	--hr-w: 1440px;
	--hr-font: Pretendard, 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
		'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	/* 자간을 벌린 대문자 라벨에 쓰는 값 */
	--hr-track: .18em;
}

[data-theme="light"] {
	--hr-ink: #0a0a0a;
	--hr-ink-sub: #4a4a4a;
	--hr-muted: #8a8a8a;
	--hr-line: #e2e2e2;
	--hr-line-soft: #f0f0f0;
	--hr-bg: #ffffff;
	--hr-surface: #f4f4f4;
	--hr-btn-line: #cfcfcf;
	--hr-btn-strong-hover: #0a0a0a;
	--hr-shadow: 0 24px 60px -34px rgba(10, 10, 10, .4);
}

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

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

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

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

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

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

.hr-btn,
.hr a.hr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	border: 1px solid var(--hr-btn-line);
	border-radius: 0;
	background: var(--hr-btn-face);
	color: var(--hr-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hr-btn:hover { border-color: var(--hr-ink); background: var(--hr-ink); color: var(--hr-bg); }
.hr-btn-primary,
.hr a.hr-btn-primary {
	background: var(--hr-brand);
	border-color: var(--hr-brand);
	color: #fff;
}
.hr-btn-primary:hover { background: var(--hr-btn-strong-hover); border-color: var(--hr-btn-strong-hover); color: var(--hr-bg); }
.hr-btn-sm { padding: 11px 20px; font-size: 11.5px; }
.hr-btn-lg { padding: 19px 42px; font-size: 13.5px; }
.hr-btn:disabled, .hr-btn.is-disabled { opacity: .45; pointer-events: none; }

.hr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--hr-line);
	border-radius: 0;
	background: transparent;
	color: var(--hr-ink-sub);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.hr-chip:hover { border-color: var(--hr-brand); color: var(--hr-brand); }
.hr-chip.is-on { background: var(--hr-brand); border-color: var(--hr-brand); color: #fff; }

.hr-badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 0;
	background: var(--hr-brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hr-badge.is-muted { background: var(--hr-surface); color: var(--hr-muted); }
.hr-badge.is-danger { background: var(--hr-danger); color: #fff; }
.hr-badge.is-success { background: var(--hr-success); color: #06170f; }

.hr-card { border: 1px solid var(--hr-line); border-radius: 0; background: var(--hr-surface); padding: 28px; }

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

.hr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hr-table th, .hr-table td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--hr-line); }
.hr-table thead th {
	border-bottom: 1px solid var(--hr-ink);
	color: var(--hr-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 32px; padding-bottom: 18px; border-bottom: 1px solid var(--hr-ink); }
.hr-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: var(--hr-track); color: var(--hr-brand); text-transform: uppercase; }
.hr-title { margin: 10px 0 0; font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; }
.hr-desc { margin: 10px 0 0; color: var(--hr-ink-sub); font-size: 15px; }

.hr-pages { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 40px 0 0; }
.hr-pages a, .hr-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: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--hr-ink-sub);
}
.hr-pages a:hover { border-color: var(--hr-line); color: var(--hr-ink); }
.hr-pages strong { background: var(--hr-brand); border-color: var(--hr-brand); color: #fff; }

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