/*
 * 나래 테마 공통 토큰과 부품.
 * 레이아웃과 모든 스킨이 같은 변수를 쓴다. html[data-nr-mode] 가 light / dark 를 가른다.
 * 대표 색(--nr-accent)과 보조 색(--nr-accent-2)은 레이아웃 설정 값이 :root 에 들어온다.
 */
:root {
	--nr-accent: #3d5afe;
	--nr-accent-2: #00c2a8;
	--nr-w: 1320px;
	--nr-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
	--nr-radius: 18px;
	--nr-radius-sm: 12px;
	--nr-ease: cubic-bezier(.2, .7, .2, 1);

	--nr-bg: #ffffff;
	--nr-bg-2: #f4f5f8;
	--nr-card: #ffffff;
	--nr-line: #e6e8ee;
	--nr-line-2: #d5d9e1;
	--nr-text: #0d1016;
	--nr-sub: #586071;
	--nr-mute: #8d95a3;
	--nr-inv: #0d1016;
	--nr-inv-text: #ffffff;
	--nr-glass: rgba(255, 255, 255, .78);
	--nr-shadow: 0 24px 60px -32px rgba(13, 16, 22, .35);
	--nr-hot: #f03e3e;
	--nr-accent-soft: color-mix(in srgb, var(--nr-accent) 11%, transparent);
	--nr-accent-line: color-mix(in srgb, var(--nr-accent) 35%, transparent);
	--nr-accent-ink: var(--nr-accent);
	color-scheme: light;
}

html[data-nr-mode="dark"] {
	--nr-bg: #090a0e;
	--nr-bg-2: #111319;
	--nr-card: #14171e;
	--nr-line: #232733;
	--nr-line-2: #313646;
	--nr-text: #f1f3f7;
	--nr-sub: #a2a9b8;
	--nr-mute: #6d7585;
	--nr-inv: #f1f3f7;
	--nr-inv-text: #090a0e;
	--nr-glass: rgba(9, 10, 14, .72);
	--nr-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
	--nr-hot: #ff6b6b;
	--nr-accent-soft: color-mix(in srgb, var(--nr-accent) 20%, transparent);
	--nr-accent-line: color-mix(in srgb, var(--nr-accent) 50%, transparent);
	--nr-accent-ink: color-mix(in srgb, var(--nr-accent) 70%, #ffffff);
	color-scheme: dark;
}

html, body { background: var(--nr-bg); }
body { margin: 0; color: var(--nr-text); font-family: var(--nr-font); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
body.color_scheme_dark, body.color_scheme_light { background: var(--nr-bg); }

/* 버튼 */
.nr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font: 700 15px/1 var(--nr-font); letter-spacing: -.01em; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: transform .2s var(--nr-ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.nr-btn:hover { transform: translateY(-2px); }
.nr-btn:active { transform: translateY(0); }
.nr-btn-lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; }
.nr-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.nr-btn-accent { background: var(--nr-accent); color: #fff !important; box-shadow: 0 12px 30px -14px var(--nr-accent); }
.nr-btn-accent:hover { box-shadow: 0 18px 40px -14px var(--nr-accent); }
.nr-btn-ink { background: var(--nr-inv); color: var(--nr-inv-text) !important; }
.nr-btn-line { border-color: var(--nr-line-2); background: transparent; color: var(--nr-text) !important; }
.nr-btn-line:hover { border-color: var(--nr-text); }
.nr-btn-ghost { border-color: color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit !important; }
.nr-btn-ghost:hover { border-color: currentColor; }
.nr-btn-light { background: #fff; color: #0d1016 !important; }

/* 이름표 */
.nr-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--nr-accent-soft); color: var(--nr-accent-ink); font-size: 12.5px; font-weight: 800; font-style: normal; letter-spacing: -.01em; }
.nr-badge.is-hot { background: color-mix(in srgb, var(--nr-hot) 14%, transparent); color: var(--nr-hot); }
.nr-badge.is-off { background: var(--nr-bg-2); color: var(--nr-mute); }

/* 거르기 단추 */
.nr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nr-chips button, .nr-chips a { height: 40px; padding: 0 16px; border: 1px solid var(--nr-line); border-radius: 999px; background: var(--nr-card); color: var(--nr-sub); font: 700 14px/1 var(--nr-font); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; transition: all .18s; }
.nr-chips button:hover, .nr-chips a:hover { border-color: var(--nr-text); color: var(--nr-text); }
.nr-chips .is-on { background: var(--nr-inv) !important; border-color: var(--nr-inv) !important; color: var(--nr-inv-text) !important; }

/* 번쩍이는 빛 덩어리 (첫 화면 · 지원 유도 · 서브 제목) */
.nr-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; will-change: transform; }
.nr-orb-1 { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; left: -8%; top: -20%; background: var(--nr-accent); animation: nr-float-a 18s ease-in-out infinite alternate; }
.nr-orb-2 { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; right: -6%; top: 10%; background: var(--nr-accent-2); animation: nr-float-b 22s ease-in-out infinite alternate; }
.nr-orb-3 { width: 28vw; height: 28vw; max-width: 460px; max-height: 460px; left: 38%; bottom: -24%; background: color-mix(in srgb, var(--nr-accent) 50%, var(--nr-accent-2)); animation: nr-float-a 26s ease-in-out infinite alternate-reverse; }
html[data-nr-mode="dark"] .nr-orb { opacity: .42; }
@keyframes nr-float-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@keyframes nr-float-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-10vw, 8vh, 0) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
	.nr-orb, .nr-ticker-track { animation: none !important; }
	[data-nr-reveal], .nr-hero-title .nr-line, .nr-hero-text, .nr-hero-btns { opacity: 1 !important; transform: none !important; animation: none !important; }
	.nr-live i::after { animation: none !important; }
}