﻿@charset "utf-8";
*,
*::before,
*::after {
	box-sizing: border-box;
}
:root {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	cursor: default;
	line-height: 1.5;
	overflow-wrap: break-word;
	word-break: break-word;
}

:root {
	--font-body: clamp(16px, calc(14.11px + 0.588vw), 20px);
	--font-line-height: line-height: clamp(1.6, 1.4 + 0.4vw, 1.8);

	/* Brand */
	--color-primary: #333333;
	--color-primary-hover: #555555;
	--color-primary-active: #111111;

	/* Text */
	--color-text-main: #111827;
	--color-text-sub: #6b7280;
	--color-text-muted: #9ca3af;
	--color-text-inverse: #ffffff;
	--color-accent: #1f7a63;

	/* Background */
	--color-bg-main: #ffffff;
	--color-bg-sub: #b0cbff;
	--color-bg-card: #f9fafb;
	--color-bg-hover: #f1f5f9;
	--color-bg-inverse: #111827;

	/* Border */
	--color-border: #eee;
	--color-border-strong: #d1d5db;

	/* Status */
	--color-success: #22c55e;
	--color-success-bg: #ecfdf5;

	--color-error: #ef4444;
	--color-error-bg: #fef2f2;

	--color-warning: #f59e0b;
	--color-warning-bg: #fffbeb;

	--color-info: #0ea5e9;
	--color-info-bg: #f0f9ff;

	/* Card */
	--color-bg-car: #fff;

	/* Interaction */
	--color-hover: #f3f4f6;
	--color-active: #e5e7eb;
	--color-disabled: #9ca3af;
	--color-overlay: rgba(0, 0, 0, 0.5);

	/* Shadow */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

	/* Focus */
	--color-focus: #3b82f6;

	--font-sub-title: "Paperlogy", sans-serif;
	--font-serif: 'MaruBuri', serif;
}
html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
body {
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
	line-height: 1.5;
}

input,
button,
textarea,
select {
	font: inherit;
}
img {
	display: block;
	max-width: 100%;
}
button {
	background: none;
	border: 0;
	cursor: pointer;
}
a {
	color: inherit;
	text-decoration: none;
}
a:visited,
a.visited,
a.visited:visited,
a:active {
	color: inherit;
	text-decoration: none;
}

a:hover,
a.visited:hover {
	text-decoration: none;
}
a:focus {
	text-decoration: none;
}
a:focus-visible,
button:focus-visible {
	outline-offset: -1px;
	outline-width: 1px;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}
b {
	font-weight: 700;
}
.blind {
	display: block;
	position: absolute;
	top: -9999em;
	left: -9999em;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	text-indent: -9999em;
}

.aftercr:after {
	clear: both;
	content: "";
	display: block;
}

/* ============================================================
   공통 구독 CTA 컴포넌트
   .sub-cta--dark  : 어두운 배경 (bg-inverse) — mmain07·08·09
   .sub-cta--light : 밝은 배경 (bg-card)     — mmain02
   ============================================================ */
.sub-cta {
	padding: 96px 0;
}

.sub-cta-inner {
	text-align: center;
}

.sub-cta-label {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	margin-bottom: 20px;
}

.sub-cta-tit {
	font-size: clamp(24px, calc(10px + 2.5vw), 44px);
	font-weight: 900;
	font-family: var(--font-sub-title);
	margin-bottom: 48px;
}

.sub-cta-desc {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	margin-bottom: 48px;
}

.sub-cta-form {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
}

.sub-cta-input {
	flex: 1;
	padding: 15px 20px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	outline: none;
	transition: border-color 0.2s;
}

.sub-cta-btn {
	padding: 15px 28px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}

/* dark */
.sub-cta--dark {
	background: var(--color-bg-inverse);
}
.sub-cta--dark .sub-cta-label {
	color: rgba(255, 255, 255, 0.45);
}
.sub-cta--dark .sub-cta-tit {
	color: var(--color-text-inverse);
}
.sub-cta--dark .sub-cta-desc {
	color: rgba(255, 255, 255, 0.65);
}
.sub-cta--dark .sub-cta-input {
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	border-right: none;
	background: transparent;
	color: var(--color-text-inverse);
}
.sub-cta--dark .sub-cta-input::placeholder {
	color: rgba(255, 255, 255, 0.38);
}
.sub-cta--dark .sub-cta-input:focus {
	border-color: rgba(255, 255, 255, 0.65);
}
.sub-cta--dark .sub-cta-btn {
	background: var(--color-bg-main);
	color: #000;
	transition: opacity 0.2s;
}
.sub-cta--dark .sub-cta-btn:hover {
	opacity: 0.85;
}

/* light */
.sub-cta--light {
	background: var(--color-bg-card);
	padding: 80px 0;
}
.sub-cta--light .sub-cta-inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 24px;
}
.sub-cta--light .sub-cta-label {
	font-weight: 700;
	color: var(--color-primary);
}
.sub-cta--light .sub-cta-tit {
	color: var(--color-text-main);
	font-size: clamp(22px, calc(14px + 1.6vw), 36px);
}
.sub-cta--light .sub-cta-form {
	gap: 12px;
}
.sub-cta--light .sub-cta-input {
	height: 52px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: 6px;
	background: var(--color-bg-main);
	color: var(--color-text-main);
}
.sub-cta--light .sub-cta-input:focus {
	border-color: var(--color-primary);
}
.sub-cta--light .sub-cta-btn {
	height: 52px;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: 6px;
	transition: background 0.2s ease;
}
.sub-cta--light .sub-cta-btn:hover {
	background: var(--color-primary-hover);
}

/* 반응형 — 999px */
@media (max-width: 999px) {
	.sub-cta { padding: 72px 0; }
	.sub-cta--light { padding: 64px 0; }
}

/* 반응형 — 768px */
@media (max-width: 768px) {
	.sub-cta { padding: 56px 0; }
	.sub-cta--light { padding: 48px 0; }
	.sub-cta-tit { margin-bottom: 32px; }
	.sub-cta--dark .sub-cta-form { flex-direction: column; }
	.sub-cta--dark .sub-cta-input {
		border-right: 1.5px solid rgba(255, 255, 255, 0.28);
		border-bottom: none;
	}
	.sub-cta--light .sub-cta-form { flex-direction: column; }
}
