/* ───────────────────────────────────────────────────
 * rhymix.kr/market — 마켓플레이스 스타일
 * el_rhymix 디자인 토큰 통일
 * ─────────────────────────────────────────────────── */

:root {
	--rxred-50:  #fef2f2;
	--rxred-100: #fee2e2;
	--rxred-500: #ef4444;
	--rxred-600: #dc2626;
	--rxred-700: #b91c1c;
	--ink-50:  #fafafa;
	--ink-100: #f4f4f5;
	--ink-200: #e4e4e7;
	--ink-300: #d4d4d8;
	--ink-400: #a1a1aa;
	--ink-500: #71717a;
	--ink-600: #52525b;
	--ink-700: #3f3f46;
	--ink-800: #27272a;
	--ink-900: #18181b;
	--ink-950: #09090b;
	--font-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
	--shadow:    0 4px 24px -8px rgba(0,0,0,.08);
	--shadow-lg: 0 12px 40px -12px rgba(0,0,0,.15);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-900);
	background: white;
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Top Nav (el_rhymix 통일) ───────────────────── */

.topnav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ink-200);
}
.topnav-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -.02em;
	color: var(--ink-900);
}
.logo-mark {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--ink-950);
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 900;
}
.logo-kr { color: var(--rxred-600); }
.topnav-menu { display: flex; gap: 28px; }
.topnav-menu a { color: var(--ink-600); font-size: .9rem; font-weight: 500; transition: color .15s; }
.topnav-menu a:hover { color: var(--ink-900); }
.topnav-menu a.active { color: var(--ink-900); font-weight: 600; }
.topnav-actions { display: flex; gap: 10px; }
.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 7px;
	color: var(--ink-600);
	transition: all .15s;
}
.btn-ghost:hover { color: var(--ink-900); background: var(--ink-100); }
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 7px;
	background: var(--ink-950);
	color: white;
	border: none;
	transition: all .15s;
}
.btn-primary:hover { background: var(--ink-800); }

@media (max-width: 768px) {
	.topnav-menu { display: none; }
	.topnav-inner { padding: 0 16px; }
}

/* ─── Page wrap ──────────────────────────────────── */

.page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}
.page-wide {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ─── Hero ───────────────────────────────────────── */

.hero {
	text-align: center;
	padding: 64px 24px 40px;
	background: linear-gradient(180deg, var(--ink-50) 0%, white 100%);
	border-bottom: 1px solid var(--ink-200);
}
.hero h1 {
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0 0 16px;
}
.hero p {
	font-size: 1.1rem;
	color: var(--ink-600);
	margin: 0 0 28px;
}
.hero .label {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--rxred-600);
	background: var(--rxred-50);
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid var(--rxred-100);
	margin-bottom: 16px;
	text-transform: uppercase;
}
@media (max-width: 768px) {
	.hero h1 { font-size: 2.2rem; }
	.hero { padding: 40px 16px 28px; }
}

/* ─── Filters ────────────────────────────────────── */

.filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 32px 0 24px;
	align-items: center;
	justify-content: space-between;
}
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill {
	padding: 7px 14px;
	font-size: .82rem;
	font-weight: 500;
	color: var(--ink-600);
	background: white;
	border: 1px solid var(--ink-200);
	border-radius: 20px;
	transition: all .15s;
}
.filter-pill:hover { color: var(--ink-900); border-color: var(--ink-300); }
.filter-pill.active {
	background: var(--ink-950);
	color: white;
	border-color: var(--ink-950);
	font-weight: 600;
}
.filter-count {
	font-size: .82rem;
	color: var(--ink-500);
}

/* ─── Product Grid ───────────────────────────────── */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.product-card {
	background: white;
	border: 1px solid var(--ink-200);
	border-radius: 14px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: all .2s;
	cursor: pointer;
}
.product-card:hover {
	transform: translateY(-2px);
	border-color: var(--ink-400);
	box-shadow: var(--shadow);
}
.product-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.product-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
}
.product-icon.dark { background: var(--ink-950); }
.product-icon.accent { background: var(--rxred-600); }
.product-tier {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 4px 9px;
	border-radius: 5px;
}
.product-tier.free { background: var(--ink-100); color: var(--ink-700); }
.product-tier.pro { background: var(--rxred-50); color: var(--rxred-700); border: 1px solid var(--rxred-100); }
.product-tier.freemium { background: linear-gradient(90deg, var(--ink-100), var(--rxred-50)); color: var(--ink-700); }

.product-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 2px; }
.product-card .name-en { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-400); margin-bottom: 10px; }
.product-card .tagline { font-size: .88rem; color: var(--ink-600); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.product-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--ink-100);
	font-size: .78rem;
	color: var(--ink-500);
}
.status-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.status-dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}
.status-dot.green::before  { background: #22c55e; }
.status-dot.amber::before  { background: #f59e0b; }
.status-dot.blue::before   { background: #3b82f6; }
.status-dot.gray::before   { background: var(--ink-400); }

/* ─── Empty state ────────────────────────────────── */

.empty-state {
	text-align: center;
	padding: 80px 24px;
	color: var(--ink-500);
}

/* ─── Product Detail Page ────────────────────────── */

.detail-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px 80px;
}
.detail-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .85rem;
	color: var(--ink-500);
	margin-bottom: 28px;
	font-weight: 500;
}
.detail-back:hover { color: var(--ink-900); }

.detail-hero {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 24px;
	align-items: start;
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--ink-200);
}
.detail-icon {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
}
.detail-icon.dark { background: var(--ink-950); }
.detail-icon.accent { background: var(--rxred-600); }
.detail-title {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 0 0 6px;
	line-height: 1.15;
}
.detail-name-en {
	font-family: var(--font-mono);
	font-size: .85rem;
	color: var(--ink-500);
	margin-bottom: 14px;
}
.detail-tagline { font-size: 1.05rem; color: var(--ink-600); margin: 0; }
.detail-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14px;
}
.meta-pill {
	font-size: .72rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--ink-100);
	color: var(--ink-700);
}
.detail-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 200px;
}

.btn-lg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: .9rem;
	font-weight: 600;
	transition: all .15s;
	border: 1px solid transparent;
}
.btn-lg.primary { background: var(--ink-950); color: white; }
.btn-lg.primary:hover { background: var(--ink-800); }
.btn-lg.outline { background: white; color: var(--ink-900); border-color: var(--ink-200); }
.btn-lg.outline:hover { border-color: var(--ink-400); }
.btn-lg.danger { background: var(--rxred-600); color: white; }
.btn-lg.danger:hover { background: var(--rxred-700); }

.detail-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px) {
	.detail-hero { grid-template-columns: 1fr; }
	.detail-actions { width: 100%; }
	.detail-body { grid-template-columns: 1fr; gap: 24px; }
}

.detail-section { margin-bottom: 36px; }
.detail-section h2 {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 14px;
	letter-spacing: -.015em;
}
.detail-section p {
	color: var(--ink-700);
	line-height: 1.75;
	margin: 0 0 12px;
}
.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}
.feature-list li {
	font-size: .92rem;
	color: var(--ink-700);
	padding-left: 24px;
	position: relative;
	line-height: 1.5;
}
.feature-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--rxred-50);
	border: 2px solid var(--rxred-600);
}
.feature-list li::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 11px;
	width: 5px;
	height: 8px;
	border-right: 2px solid var(--rxred-600);
	border-bottom: 2px solid var(--rxred-600);
	transform: rotate(45deg);
}
@media (max-width: 600px) { .feature-list { grid-template-columns: 1fr; } }

.detail-aside {
	background: var(--ink-50);
	border: 1px solid var(--ink-200);
	border-radius: 14px;
	padding: 24px;
}
.aside-section { margin-bottom: 18px; }
.aside-section:last-child { margin-bottom: 0; }
.aside-section dt {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ink-500);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.aside-section dd {
	font-size: .9rem;
	color: var(--ink-900);
	margin: 0;
	font-weight: 500;
}
.aside-divider { height: 1px; background: var(--ink-200); margin: 18px 0; }

.price-block { padding: 20px; background: white; border: 1px solid var(--ink-200); border-radius: 12px; margin-bottom: 12px; }
.price-block.pro { background: var(--ink-950); color: white; border-color: var(--ink-950); }
.price-block .plan-name { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; }
.price-block.pro .plan-name { color: var(--rxred-500); }
.price-block .price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 4px; }
.price-block .price-unit { font-size: .85rem; font-weight: 500; color: var(--ink-500); }
.price-block.pro .price-unit { color: var(--ink-400); }
.price-block .price-note { font-size: .78rem; color: var(--ink-500); margin: 0 0 14px; }
.price-block.pro .price-note { color: var(--ink-400); }

/* ─── Footer ─────────────────────────────────────── */

.footer {
	border-top: 1px solid var(--ink-200);
	background: white;
	margin-top: 80px;
}
.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}
.footer .desc { font-size: .82rem; color: var(--ink-500); margin-top: 8px; line-height: 1.6; max-width: 480px; }
.footer .links { display: flex; justify-content: flex-end; gap: 24px; font-size: .85rem; flex-wrap: wrap; }
.footer .links a { color: var(--ink-600); }
.footer .links a:hover { color: var(--ink-900); }
.copyright { color: var(--ink-400); font-size: .78rem; text-align: center; padding: 16px; border-top: 1px solid var(--ink-200); }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 16px; } .footer .links { justify-content: flex-start; } }

/* ─── Modal ──────────────────────────────────────── */

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(9,9,11,.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal {
	background: white;
	border-radius: 16px;
	max-width: 480px;
	width: 100%;
	padding: 36px;
	box-shadow: var(--shadow-lg);
	animation: modalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background: var(--ink-100);
	color: var(--ink-600);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.modal-close:hover { background: var(--ink-200); color: var(--ink-900); }
.modal h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -.015em; }
.modal .modal-sub { color: var(--ink-600); margin: 0 0 24px; font-size: .9rem; }
.modal-product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--ink-50);
	border-radius: 10px;
	margin-bottom: 20px;
}
.modal-product .product-icon { width: 36px; height: 36px; border-radius: 8px; }
.modal-product .modal-product-name { font-weight: 600; font-size: .95rem; }
.modal-product .modal-product-tag { font-size: .78rem; color: var(--ink-500); }
.form-row { margin-bottom: 16px; position: relative; }
.form-row label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink-700);
	margin-bottom: 6px;
}
.form-row input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	font-size: .95rem;
	font-family: inherit;
	transition: all .15s;
}
.form-row input[type="email"]:focus {
	outline: none;
	border-color: var(--ink-950);
	box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.form-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .82rem;
	color: var(--ink-600);
	margin-bottom: 18px;
	line-height: 1.5;
}
.form-check input[type="checkbox"] { margin-top: 3px; }
.form-msg {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: .85rem;
	margin-top: 14px;
}
.form-msg.success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.form-msg.error { background: var(--rxred-50); color: var(--rxred-700); border: 1px solid var(--rxred-100); }

/* ─── Utilities ──────────────────────────────────── */

.hidden { display: none !important; }
.center { text-align: center; }
.text-muted { color: var(--ink-500); }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }