/*
Theme Name: COFF
Description: 커프(COFF) — 커피 시세의 모든 것. 증권앱 문법의 모바일 시세판 테마 (디자인 기준: coureal/05 디자인 방향).
Version: 2.5.1
Author: coureal
Text Domain: coff
*/

:root {
	--coff-bg: #FAF7F2;        /* 크림 화이트 */
	--coff-ink: #1A1512;       /* 에스프레소 블랙 */
	--coff-brown: #6F4E37;     /* 커피 브라운 (포인트) */
	--coff-red: #E5484D;       /* 저점 갱신 / 하락 */
	--coff-amber: #F5A623;     /* 저점 부근 */
	--coff-muted: #8A7F76;
	--coff-card: #FFFFFF;
	--coff-line: #EDE7DF;
	--coff-radius: 14px;
	--coff-maxw: 600px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--coff-bg);
	color: var(--coff-ink);
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

.coff-shell {
	max-width: var(--coff-maxw);
	margin: 0 auto;
	min-height: 100vh;
	padding-bottom: 72px;
}

/* ── 상단 슬림바 ───────────────────────────── */
.coff-topbar {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 14px 16px 10px;
	position: sticky;
	top: 0;
	background: color-mix(in srgb, var(--coff-bg) 88%, transparent);
	backdrop-filter: blur(12px);
	z-index: 10;
}
.coff-logo {
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -0.5px;
	text-decoration: none;
	color: var(--coff-ink);
}
.coff-logo em { color: var(--coff-brown); font-style: normal; }
.coff-tagline { font-size: 12px; font-weight: 600; color: var(--coff-muted); flex: 1; }
.coff-search-btn {
	border: 0;
	background: none;
	font-size: 20px;
	color: var(--coff-ink);
	cursor: pointer;
	padding: 0 2px;
}

/* ── 하락 티커 스트립 (증권앱 지수 띠) ─────────── */
.coff-ticker {
	background: var(--coff-ink);
	color: #EFE9E2;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
	padding: 7px 0;
}
.coff-ticker-track {
	display: inline-block;
	animation: coff-ticker 18s linear infinite;
}
.coff-ticker-item { margin: 0 14px; }
.coff-ticker-item b.down { color: #FF8A8E; font-weight: 700; margin-left: 4px; }
@keyframes coff-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── 카테고리 칩 ──────────────────────────── */
.coff-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 12px 16px 4px;
	scrollbar-width: none;
}
.coff-chips::-webkit-scrollbar { display: none; }
.chip {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--coff-muted);
	background: var(--coff-card);
	border: 1px solid var(--coff-line);
	border-radius: 999px;
	padding: 7px 14px;
	text-decoration: none;
}
.chip.active {
	background: var(--coff-ink);
	border-color: var(--coff-ink);
	color: #FFF;
}

/* ── 섹션 헤더 ───────────────────────────── */
.coff-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 14px 16px 4px;
}
.coff-section-head h2 { font-size: 17px; margin: 0; letter-spacing: -0.3px; }
.coff-sort { font-size: 12px; color: var(--coff-muted); }

/* ── 시세 로우 (증권앱 종목 리스트 문법) ────────── */
.coff-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--coff-card);
	border-radius: var(--coff-radius);
	padding: 14px;
	margin: 8px 16px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 4px rgba(26, 21, 18, 0.05);
}
.coff-row-name { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.coff-row-opt { font-size: 12px; color: var(--coff-muted); margin: 2px 0 6px; }
.coff-row-price { text-align: right; flex-shrink: 0; }
.coff-cup-price { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.coff-cup-price small { font-size: 12px; font-weight: 600; color: var(--coff-muted); margin-left: 2px; }
.coff-now { font-size: 12px; color: var(--coff-muted); margin-top: 2px; }
.coff-now b.down, b.down { color: var(--coff-red); font-weight: 700; }

/* ── 뱃지 ───────────────────────────────── */
.coff-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 8px;
}
.coff-badge.low-hit { background: color-mix(in srgb, var(--coff-red) 12%, white); color: var(--coff-red); }
.coff-badge.low-near { background: color-mix(in srgb, var(--coff-amber) 15%, white); color: #B87400; }

/* ── 카드(상세/본문) ─────────────────────── */
.coff-card {
	background: var(--coff-card);
	border-radius: var(--coff-radius);
	padding: 14px;
	margin: 10px 16px;
	box-shadow: 0 1px 4px rgba(26, 21, 18, 0.06);
}

/* ── 하단 3탭 (시세·급락·관심) ─────────────── */
.coff-tabbar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--coff-maxw);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--coff-card);
	border-top: 1px solid var(--coff-line);
	padding: 8px 0 max(8px, env(safe-area-inset-bottom));
	z-index: 20;
}
.coff-tabbar a {
	text-align: center;
	font-size: 11px;
	color: var(--coff-muted);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.coff-tabbar a .ico { font-size: 18px; }
.coff-tabbar a.active { color: var(--coff-ink); font-weight: 700; }

.coff-empty {
	text-align: center;
	color: var(--coff-muted);
	padding: 80px 24px;
	font-size: 14px;
}

/* ── 즐겨찾기 별 버튼 ─────────────────────── */
.coff-fav {
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: #C9BFB4;
	cursor: pointer;
	padding: 2px;
	flex-shrink: 0;
}
.coff-fav.on { color: var(--coff-amber); }

/* ── 페이지 공통 ─────────────────────────── */
.coff-page-desc { font-size: 12px; color: var(--coff-muted); padding: 0 16px; margin: 6px 0 4px; }
.coff-card-title { font-size: 15px; margin: 0 0 8px; letter-spacing: -0.3px; }

/* ── 마이: 머신 칩(버튼) ───────────────────── */
.coff-machine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.chip { cursor: pointer; font-family: inherit; }
button.chip.active { background: var(--coff-ink); border-color: var(--coff-ink); color: #FFF; }

/* ── 마이: 댓글 목록 ───────────────────────── */
.coff-comment-list { list-style: none; margin: 0; padding: 0; }
.coff-comment-list li { padding: 8px 0; border-bottom: 1px solid var(--coff-line); font-size: 13px; }
.coff-comment-list li:last-child { border-bottom: 0; }
.coff-comment-list a { color: var(--coff-ink); text-decoration: none; font-weight: 600; }
.coff-comment-meta { display: block; font-size: 11px; color: var(--coff-muted); margin-top: 2px; }

.coff-btn {
	display: inline-block;
	background: var(--coff-ink);
	color: #FFF;
	font-size: 13px;
	font-weight: 700;
	border-radius: 10px;
	padding: 9px 16px;
	text-decoration: none;
}
.coff-link-muted { font-size: 12px; color: var(--coff-muted); }

/* ── 로우 썸네일 ─────────────────────────── */
.coff-thumb {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--coff-line);
}

/* ── 저점 글로우: 테두리 그라디언트 회전 ──────── */
@property --coff-spin {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
.coff-row.is-low {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--coff-card), var(--coff-card)) padding-box,
		conic-gradient(from var(--coff-spin),
			var(--coff-red), #FF8A5C, var(--coff-amber),
			transparent 55%, var(--coff-red)) border-box;
	animation: coff-spin 2.8s linear infinite;
	box-shadow: 0 2px 14px rgba(229, 72, 77, 0.18);
}
@keyframes coff-spin {
	to { --coff-spin: 360deg; }
}
.coff-row.is-near {
	border: 2px solid color-mix(in srgb, var(--coff-amber) 55%, white);
	box-shadow: 0 2px 10px rgba(245, 166, 35, 0.15);
	animation: coff-pulse 2.2s ease-in-out infinite;
}
@keyframes coff-pulse {
	0%, 100% { box-shadow: 0 2px 10px rgba(245, 166, 35, 0.12); }
	50%      { box-shadow: 0 2px 16px rgba(245, 166, 35, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
	.coff-row.is-low, .coff-row.is-near, .coff-ticker-track { animation: none; }
}

/* ── 검색 오버레이 ────────────────────────── */
.coff-search-bar {
	display: none;
	padding: 0 16px 10px;
}
.coff-search-bar.open { display: block; }
.coff-search-bar form { display: flex; gap: 8px; }
.coff-search-bar input[type="search"] {
	flex: 1;
	border: 1.5px solid var(--coff-line);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--coff-card);
}
.coff-search-bar button {
	border: 0;
	background: var(--coff-ink);
	color: #FFF;
	border-radius: 12px;
	padding: 0 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

/* ── 상품 상세 ───────────────────────────── */
.coff-hero {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
}
.coff-hero img { width: 84px; height: 84px; border-radius: 18px; }
.coff-hero h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -0.4px; }
.coff-hero .coff-cat { font-size: 12px; color: var(--coff-muted); margin-bottom: 6px; }
.coff-chart-card svg { display: block; width: 100%; height: auto; }
.coff-chart-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--coff-muted);
	margin-top: 8px;
}
.coff-opt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.coff-opt-table th {
	text-align: left;
	font-size: 11px;
	color: var(--coff-muted);
	font-weight: 600;
	padding: 6px 0;
	border-bottom: 1px solid var(--coff-line);
}
.coff-opt-table td { padding: 10px 0; border-bottom: 1px solid var(--coff-line); }
.coff-opt-table tr:last-child td { border-bottom: 0; }
.coff-opt-table .num { text-align: right; font-weight: 700; }
.coff-cta-wrap { padding: 4px 16px 12px; }
.coff-cta {
	display: block;
	text-align: center;
	background: var(--coff-brown);
	color: #FFF;
	font-size: 15px;
	font-weight: 800;
	border-radius: 14px;
	padding: 15px;
	text-decoration: none;
}
.coff-disclosure { font-size: 11px; color: var(--coff-muted); text-align: center; margin: 8px 0 0; }

/* ── 사이트 푸터 ─────────────────────────── */
.coff-footer {
	padding: 22px 16px 26px;
	font-size: 11px;
	color: var(--coff-muted);
	line-height: 1.7;
}
.coff-footer nav { display: flex; gap: 12px; margin-bottom: 8px; }
.coff-footer nav a { color: var(--coff-ink); font-weight: 600; text-decoration: none; font-size: 12px; }

/* ── v0.5 디자인 디벨롭 ─────────────────────── */

/* 파트너스 고지 띠 (상시 노출) */
.coff-notice {
	margin: 0;
	padding: 6px 16px;
	font-size: 10.5px;
	color: var(--coff-muted);
	background: color-mix(in srgb, var(--coff-ink) 4%, var(--coff-bg));
	border-top: 1px solid var(--coff-line);
	border-bottom: 1px solid var(--coff-line);
	text-align: center;
}

/* 티커: 기본 감속 (index에서 항목 수 비례 inline duration 지정) */
.coff-ticker-track { animation-duration: 40s; }
.coff-ticker { font-size: 11.5px; padding: 8px 0; }

/* 미디어 래퍼: ☆를 썸네일 우하단에 항상 고정 */
.coff-media { position: relative; flex-shrink: 0; }
.coff-media .coff-thumb { display: block; }
.coff-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	width: 52px;
	height: 52px;
}
.coff-media .coff-fav {
	position: absolute;
	right: -7px;
	bottom: -7px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--coff-card);
	border: 1px solid var(--coff-line);
	border-radius: 999px;
	font-size: 13px;
	padding: 0;
	box-shadow: 0 1px 3px rgba(26,21,18,0.12);
}

/* 로우 정렬 보정 */
.coff-row { align-items: center; }
.coff-row-main { flex: 1; min-width: 0; }
.coff-row-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 브랜드 칩 */
.coff-brand-chips { padding-bottom: 14px; }
.chip-brand { display: inline-flex; align-items: center; gap: 6px; }
.chip-count {
	font-size: 10px;
	font-weight: 700;
	background: var(--coff-bg);
	border-radius: 999px;
	padding: 2px 6px;
	color: var(--coff-muted);
}

/* ── 댓글 ───────────────────────────────── */
.coff-comments-count { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.coff-comments-empty { font-size: 13px; color: var(--coff-muted); margin: 0 0 12px; }
.coff-comment-items { list-style: none; margin: 0 0 14px; padding: 0; }
.coff-comment-items ol.children { list-style: none; padding-left: 16px; border-left: 2px solid var(--coff-line); margin-top: 8px; }
.coff-comment { padding: 10px 0; border-bottom: 1px solid var(--coff-line); }
.coff-comment:last-child { border-bottom: 0; }
.coff-comment-head { display: flex; align-items: baseline; gap: 8px; }
.coff-comment-author { font-size: 13px; }
.coff-comment-date { font-size: 11px; color: var(--coff-muted); }
.coff-comment-body { font-size: 13.5px; line-height: 1.65; }
.coff-comment-body p { margin: 4px 0; }
.coff-comment-pending { display: block; font-size: 11px; color: var(--coff-amber); }
.coff-comment-actions a { font-size: 11px; color: var(--coff-muted); text-decoration: none; font-weight: 600; }
.coff-reply-title { font-size: 14px; margin: 4px 0 10px; }
.coff-comments .comment-form p { margin: 0 0 10px; }
.coff-comments .comment-form label {
	display: block;
	font-size: 11px;
	color: var(--coff-muted);
	margin-bottom: 4px;
}
.coff-comments .comment-form input[type="text"],
.coff-comments .comment-form input[type="email"],
.coff-comments .comment-form input[type="url"],
.coff-comment-field textarea {
	width: 100%;
	border: 1.5px solid var(--coff-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--coff-bg);
	box-sizing: border-box;
}
.coff-comment-field textarea:focus,
.coff-comments .comment-form input:focus { outline: none; border-color: var(--coff-brown); background: var(--coff-card); }
.coff-comment-submit { border: 0; cursor: pointer; font-family: inherit; font-size: 13px; }
.coff-comments .comment-form-cookies-consent { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: var(--coff-muted); }
.coff-comments .comment-form-cookies-consent label { margin: 0; }
.coff-comments .comment-reply-link { font-size: 11px; }
.coff-comments .logged-in-as { font-size: 11px; color: var(--coff-muted); }

/* ── v0.6 쿠파스 동선 · 로그인 댓글 ─────────── */

/* 상세 고정 CTA 바 (탭바 위) — 핵심 수익 동선 */
.coff-cta-bar {
	position: fixed;
	bottom: 62px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--coff-maxw);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom) * 0);
	background: linear-gradient(to top, var(--coff-bg) 70%, transparent);
	z-index: 15;
	box-sizing: border-box;
}
.coff-cta-bar .coff-cta { box-shadow: 0 4px 14px rgba(111, 78, 55, 0.35); }
.single-coff_product main, body.single-coff_product .coff-shell { padding-bottom: 150px; }

/* 파트너스 배너 슬롯 */
.coff-partner-slot {
	position: relative;
	margin: 12px 16px;
}
.coff-ad-tag {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 9px;
	font-weight: 700;
	color: var(--coff-muted);
	letter-spacing: 0.5px;
	z-index: 1;
}
.coff-partner-placeholder {
	border: 1.5px dashed var(--coff-line);
	border-radius: var(--coff-radius);
	background: color-mix(in srgb, var(--coff-card) 60%, var(--coff-bg));
	padding: 22px 16px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--coff-muted);
}
.coff-partner-placeholder small { display: block; font-weight: 400; font-size: 10.5px; margin-top: 4px; }

/* 정렬 링크 */
.coff-sort-link {
	color: var(--coff-muted);
	text-decoration: none;
	margin-left: 8px;
	font-size: 12px;
}
.coff-sort-link.active { color: var(--coff-ink); font-weight: 700; }
.coff-sort-link.active::before { content: "↓ "; }

/* 로그인 전용 댓글 */
.coff-must-login { text-align: center; padding: 8px 0 4px; }
.coff-must-login p { font-size: 13px; color: var(--coff-muted); margin: 0 0 10px; }
.coff-logged-in { font-size: 11px; color: var(--coff-muted); margin: 0 0 8px; }

/* ── v0.7 스파크라인 · 익명 댓글 ─────────────── */
.coff-spark { width: 64px; height: 24px; flex-shrink: 0; }
@media (max-width: 379px) { .coff-spark { display: none; } }

.coff-anon-row { display: flex; gap: 8px; margin: 0 0 10px; }
.coff-anon-row input { flex: 1; min-width: 0; }
.coff-comment-notes { font-size: 10.5px; color: var(--coff-muted); line-height: 1.6; margin: 8px 0 0; }
.coff-comment-del {
	border: 0;
	background: none;
	font-size: 11px;
	color: var(--coff-muted);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	margin-left: 10px;
	font-family: inherit;
}
.coff-comment-del:hover { color: var(--coff-red); }

/* 접근성·렌더 최적화 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--coff-brown);
	outline-offset: 2px;
}
.coff-row { content-visibility: auto; contain-intrinsic-size: auto 84px; }

/* ── v0.8 헤더 고정 · 동의 · 5탭 · 랭킹 · 탐색 ── */

/* 헤더+고지 묶음 sticky */
.coff-header-sticky {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--coff-bg);
}
.coff-header-sticky .coff-topbar { position: static; background: var(--coff-bg); backdrop-filter: none; }

/* 5탭 */
.coff-tabbar { grid-template-columns: repeat(5, 1fr); }

/* 댓글: 비밀번호 인풋 포함 명시 스타일 */
.coff-anon-row input[type="text"],
.coff-anon-row input[type="password"],
.coff-comments .comment-form input[type="password"] {
	width: 100%;
	border: 1.5px solid var(--coff-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--coff-bg);
	box-sizing: border-box;
}
.coff-anon-row input:focus { outline: none; border-color: var(--coff-brown); background: var(--coff-card); }

/* 동의 체크 */
.coff-agree { margin: 0 0 10px; }
.coff-agree label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 11.5px;
	color: var(--coff-muted);
	line-height: 1.6;
	cursor: pointer;
}
.coff-agree input[type="checkbox"] {
	margin: 2px 0 0;
	width: 15px;
	height: 15px;
	accent-color: var(--coff-brown);
	flex-shrink: 0;
}
.coff-agree a { color: var(--coff-brown); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* 랭킹 뱃지 */
.coff-rank-badge {
	position: absolute;
	top: -6px;
	left: -6px;
	z-index: 1;
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--coff-ink);
	color: #FFF;
	font-size: 11px;
	font-weight: 800;
	border-radius: 7px;
	padding: 0 4px;
}
.coff-rank-badge.top3 { background: var(--coff-brown); }

/* 탐색 페이지 */
.coff-explore-group { padding: 10px 0; border-bottom: 1px solid var(--coff-line); }
.coff-explore-group:last-child { border-bottom: 0; }
.coff-explore-parent {
	font-size: 14px;
	font-weight: 700;
	color: var(--coff-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.coff-machine-item { display: inline-flex; align-items: center; gap: 4px; }
.coff-machine-item .coff-machine { padding: 7px 10px; }

/* CTA 링크 준비 중 상태 */
.coff-cta.is-pending { background: var(--coff-muted); pointer-events: none; }

/* 무클래스 링크 기본 디자인 (본문/카드 내) */
main a:not([class]) {
	color: var(--coff-brown);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--coff-brown) 40%, transparent);
}
.comment-navigation { padding: 8px 0; font-size: 12px; }
.comment-navigation a { color: var(--coff-brown); font-weight: 700; text-decoration: none; }

/* ── v0.9 디테일 보정 ─────────────────────── */

/* 동의 체크: 세로 가운데 정렬 */
.coff-agree label { align-items: center; }

/* 동의 전 등록 버튼 비활성 */
.coff-comment-submit:disabled {
	background: var(--coff-line);
	color: var(--coff-muted);
	cursor: not-allowed;
	box-shadow: none;
}

/* 상세 히어로 태그 칩 (브랜드/분류/호환머신) */
.coff-hero { padding-bottom: 8px; }
.coff-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 6px;
}
.coff-tag {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--coff-muted);
	background: var(--coff-card);
	border: 1px solid var(--coff-line);
	border-radius: 999px;
	padding: 5px 11px;
	text-decoration: none;
}
.coff-tag.tag-brand {
	background: var(--coff-ink);
	border-color: var(--coff-ink);
	color: #FFF;
}
.coff-tag.tag-machine { color: var(--coff-brown); border-color: color-mix(in srgb, var(--coff-brown) 40%, white); }

/* 티커 항목이 링크가 됨 */
.coff-ticker-item { color: inherit; text-decoration: none; }
.coff-ticker-item:hover b.down { text-decoration: underline; }

/* ═══════════ v1.0 디자인 시스템 — 마이크로 인터랙션 · 프리미엄 폴리시 ═══════════ */

:root {
	--coff-shadow-sm: 0 1px 2px rgba(26, 21, 18, 0.05), 0 2px 8px rgba(26, 21, 18, 0.04);
	--coff-shadow-md: 0 2px 4px rgba(26, 21, 18, 0.06), 0 12px 28px rgba(26, 21, 18, 0.10);
	--coff-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; }
::selection { background: color-mix(in srgb, var(--coff-brown) 24%, transparent); }

/* 공통 트랜지션 */
.coff-row, .chip, .coff-tag, .coff-cta, .coff-btn, .coff-fav,
.coff-tabbar a, .coff-sort-link, .coff-comment-del, .coff-search-btn, .coff-thumb {
	transition:
		transform 0.18s var(--coff-ease),
		box-shadow 0.18s var(--coff-ease),
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		filter 0.18s ease;
}

/* 카드·로우: 헤어라인 보더 + 이중 그림자 */
.coff-card, .coff-row {
	border: 1px solid color-mix(in srgb, var(--coff-line) 70%, transparent);
	box-shadow: var(--coff-shadow-sm);
}
.coff-row.is-low, .coff-row.is-near { border-width: 2px; } /* 글로우 테두리 유지 */

/* 호버 (포인터 기기 전용 — 터치 잔상 방지) */
@media (hover: hover) {
	.coff-row:hover { transform: translateY(-2px); box-shadow: var(--coff-shadow-md); }
	.coff-row:hover .coff-thumb { transform: scale(1.06); }
	.chip:hover, .coff-tag:hover { border-color: var(--coff-ink); color: var(--coff-ink); box-shadow: var(--coff-shadow-sm); }
	.chip.active:hover, .coff-tag.tag-brand:hover { color: #FFF; }
	.coff-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(111, 78, 55, 0.45); filter: brightness(1.06); }
	.coff-btn:hover { filter: brightness(1.18); }
	.coff-fav:hover { transform: scale(1.18); color: var(--coff-amber); }
	.coff-media .coff-fav:hover { box-shadow: 0 2px 8px rgba(26, 21, 18, 0.2); }
	.coff-tabbar a:hover { color: var(--coff-ink); }
	.coff-sort-link:hover, .coff-footer nav a:hover { color: var(--coff-brown); }
	.coff-footer nav a:hover { text-decoration: underline; }
	.coff-ticker:hover .coff-ticker-track { animation-play-state: paused; }
	.coff-opt-table tbody tr:hover td, .coff-opt-table tr:hover td { background: color-mix(in srgb, var(--coff-bg) 55%, transparent); }
	.coff-explore-parent:hover { color: var(--coff-brown); }
	main a:not([class]):hover { border-bottom-color: var(--coff-brown); }
}

/* 프레스 피드백 */
.coff-row:active { transform: scale(0.985); }
.chip:active, .coff-tag:active, .coff-cta:active, .coff-btn:active, .coff-search-btn:active { transform: scale(0.95); }

/* 로고: 에스프레소 그라디언트 텍스트 */
.coff-logo {
	background: linear-gradient(120deg, var(--coff-ink) 30%, var(--coff-brown) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.coff-logo em { -webkit-text-fill-color: var(--coff-brown); }

/* 탭바: 반투명 블러 + 활성 인디케이터 바 */
.coff-tabbar {
	background: color-mix(in srgb, var(--coff-card) 86%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.coff-tabbar a { position: relative; }
.coff-tabbar a.active::after {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 3px;
	border-radius: 99px;
	background: var(--coff-brown);
}

/* 검색바: 슬라이드 다운 */
.coff-search-bar {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding: 0 16px;
	transition: max-height 0.25s var(--coff-ease), opacity 0.2s ease, padding 0.25s var(--coff-ease);
}
.coff-search-bar.open { max-height: 70px; opacity: 1; padding: 6px 16px 10px; }

/* 티커: 좌우 엣지 페이드 */
/* 티커 엣지 페이드 제거 (2026-07-17 사용자 요청) */

/* 저점 갱신 뱃지: 라이브 도트 */
.coff-badge.low-hit::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 99px;
	background: currentColor;
	margin-right: 4px;
	vertical-align: 1px;
	animation: coff-blink 1.4s ease-in-out infinite;
}
@keyframes coff-blink { 50% { opacity: 0.25; } }

/* 리스트 진입 페이드업 (상위 8개 스태거) */
@keyframes coff-fadeup {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
main > a.coff-row { animation: coff-fadeup 0.35s var(--coff-ease) backwards; }
main > a.coff-row:nth-of-type(1) { animation-delay: 0.02s; }
main > a.coff-row:nth-of-type(2) { animation-delay: 0.06s; }
main > a.coff-row:nth-of-type(3) { animation-delay: 0.10s; }
main > a.coff-row:nth-of-type(4) { animation-delay: 0.14s; }
main > a.coff-row:nth-of-type(5) { animation-delay: 0.18s; }
main > a.coff-row:nth-of-type(6) { animation-delay: 0.22s; }
main > a.coff-row:nth-of-type(7) { animation-delay: 0.26s; }
main > a.coff-row:nth-of-type(8) { animation-delay: 0.30s; }

/* 즐겨찾기 별 팝 */
.coff-fav.pop { animation: coff-pop 0.32s var(--coff-ease); }
@keyframes coff-pop {
	40% { transform: scale(1.5) rotate(8deg); }
	70% { transform: scale(0.92); }
}

/* 모션 민감 사용자: 전부 비활성 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	main > a.coff-row, .coff-fav.pop, .coff-badge.low-hit::before { animation: none; }
	.coff-row, .chip, .coff-tag, .coff-cta, .coff-btn, .coff-fav, .coff-thumb, .coff-search-bar { transition: none; }
	.coff-row:hover { transform: none; }
}

/* ── v1.0.2 동의 체크 정렬 확정 ───────────────
   구형 규칙 `.coff-comments .comment-form label { display:block }`(특이도 0,2,1)이
   `.coff-agree label`(0,1,1)을 이겨 flex가 깨지던 문제 → 특이도 상향으로 확정. */
.coff-comments .comment-form .coff-agree label,
.coff-agree label {
	display: flex;
	flex-wrap: nowrap;
	align-items: center; /* 체크박스 ↔ 문구 세로 가운데 */
	gap: 8px;
	margin: 0;
	font-size: 11.5px;
	color: var(--coff-muted);
	line-height: 1.5;
	cursor: pointer;
}
.coff-comments .comment-form .coff-agree input[type="checkbox"],
.coff-agree input[type="checkbox"] {
	margin: 0;
	align-self: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--coff-brown);
}
.coff-comments .comment-form .coff-agree span,
.coff-agree span {
	flex: 1;
	min-width: 0;
	line-height: 1.5;
}

/* ── v1.0.3 콘텐츠 확장 컴포넌트 ─────────────── */

/* 잔당가 비교 바 */
.coff-compare-sub { font-weight: 400; color: var(--coff-muted); font-size: 11px; margin-left: 4px; }
.coff-compare-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.coff-compare-label { width: 52px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.coff-compare-bar { flex: 1; height: 8px; background: var(--coff-bg); border-radius: 99px; overflow: hidden; }
.coff-compare-bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--coff-brown), #A07856);
}
.coff-compare-price { font-size: 12.5px; width: 64px; text-align: right; flex-shrink: 0; }

/* 커피 가이드 로우 */
.coff-guide-row {
	display: block;
	background: var(--coff-card);
	border: 1px solid color-mix(in srgb, var(--coff-line) 70%, transparent);
	border-radius: var(--coff-radius);
	box-shadow: var(--coff-shadow-sm);
	padding: 13px 14px;
	margin: 8px 16px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s var(--coff-ease), box-shadow 0.18s var(--coff-ease);
}
@media (hover: hover) {
	.coff-guide-row:hover { transform: translateY(-2px); box-shadow: var(--coff-shadow-md); }
}
.coff-guide-title { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.coff-guide-excerpt { font-size: 12px; color: var(--coff-muted); margin-top: 3px; line-height: 1.55; }

/* 탐색: 머신 행 (✓ 칩 대체) */
.coff-machine-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--coff-line);
}
.coff-machine-row:last-child { border-bottom: 0; }
.coff-machine-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--coff-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.coff-machine-set {
	border: 1.5px solid var(--coff-line);
	background: var(--coff-card);
	color: var(--coff-muted);
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
	font-family: inherit;
	flex-shrink: 0;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.coff-machine-set.active { background: var(--coff-ink); border-color: var(--coff-ink); color: #FFF; }
.coff-machine-set.active::after { content: " ✓"; }

/* 상세 옵션표: 잔당가 강조/보조 */
.coff-cup-strong { color: var(--coff-brown); font-weight: 800; }
.coff-unit-sub { font-size: 11px; color: var(--coff-muted); font-weight: 400; }

/* ── v1.1 브랜드 칩 줄바꿈 (가로 스크롤 제거) ── */
.coff-brand-chips {
	flex-wrap: wrap;
	overflow-x: visible;
}

/* ── v1.1.1 댓글 페이지네이션 내비 ─────────────── */
.coff-comments .comment-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0 2px;
	border-top: 1px solid var(--coff-line);
	margin-top: 4px;
}
.coff-comments .comment-navigation .nav-previous a,
.coff-comments .comment-navigation .nav-next a {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--coff-ink);
	text-decoration: none;
	background: var(--coff-bg);
	border: 1px solid var(--coff-line);
	border-radius: 999px;
	padding: 7px 14px;
	transition: border-color 0.15s, color 0.15s;
}
@media (hover: hover) {
	.coff-comments .comment-navigation a:hover { border-color: var(--coff-brown); color: var(--coff-brown); }
}
.coff-comments .comment-navigation .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ── v1.2 댓글 정렬 탭 · 숫자 페이지네이션 · 공감 투표 ── */

.coff-comments-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}
.coff-comments-head .coff-comments-count { margin: 0; }
.coff-csort { display: flex; gap: 10px; }
.coff-csort a { font-size: 12px; color: var(--coff-muted); text-decoration: none; font-weight: 600; }
.coff-csort a.active { color: var(--coff-ink); font-weight: 800; }
.coff-csort a.active::before { content: "↓ "; }

/* 숫자 페이지네이션 (1 2 3 …) */
.coff-cpages { text-align: center; padding: 12px 0 2px; border-top: 1px solid var(--coff-line); margin-top: 4px; }
.coff-cpages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	margin: 0 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--coff-muted);
	text-decoration: none;
	border: 1px solid var(--coff-line);
	border-radius: 9px;
	background: var(--coff-bg);
	padding: 0 6px;
}
.coff-cpages .page-numbers.current { background: var(--coff-ink); border-color: var(--coff-ink); color: #FFF; }
@media (hover: hover) {
	.coff-cpages a.page-numbers:hover { border-color: var(--coff-brown); color: var(--coff-brown); }
}

/* 공감 투표 버튼 */
.coff-comment-head { display: flex; align-items: baseline; gap: 8px; }
.coff-vote { margin-left: auto; display: inline-flex; gap: 5px; }
.coff-vote-btn {
	border: 1px solid var(--coff-line);
	background: var(--coff-bg);
	color: var(--coff-muted);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 9px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.coff-vote-btn.up.active { background: color-mix(in srgb, var(--coff-brown) 12%, white); border-color: var(--coff-brown); color: var(--coff-brown); }
.coff-vote-btn.down.active { background: color-mix(in srgb, var(--coff-red) 10%, white); border-color: var(--coff-red); color: var(--coff-red); }
@media (hover: hover) {
	.coff-vote-btn:hover { border-color: var(--coff-ink); color: var(--coff-ink); }
}

/* ── v1.2.1 오늘의 저점 히어로 · 브랜드 컬러 ─── */

/* 오늘의 저점 히어로 카드 */
.coff-low-hero {
	display: block;
	margin: 12px 16px 4px;
	padding: 16px;
	border-radius: var(--coff-radius);
	text-decoration: none;
	color: inherit;
	border: 2px solid transparent;
	background:
		linear-gradient(
			color-mix(in srgb, var(--coff-red) 5%, var(--coff-card)),
			color-mix(in srgb, var(--coff-red) 2%, var(--coff-card))
		) padding-box,
		conic-gradient(from var(--coff-spin),
			var(--coff-red), #FF8A5C, var(--coff-amber),
			transparent 55%, var(--coff-red)) border-box;
	animation: coff-spin 2.8s linear infinite;
	box-shadow: 0 4px 20px rgba(229, 72, 77, 0.16);
}
.coff-low-hero-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.coff-low-hero-label { font-size: 12px; font-weight: 800; letter-spacing: -0.2px; color: var(--coff-red); }
.coff-low-hero-body { display: flex; gap: 14px; align-items: center; }
.coff-low-hero-thumb { width: 68px; height: 68px; border-radius: 16px; flex-shrink: 0; }
.coff-low-hero-info { min-width: 0; }
.coff-low-hero-info .coff-row-name { font-size: 15.5px; }
.coff-low-hero-price { margin-top: 5px; display: flex; align-items: baseline; gap: 8px; }
.coff-low-hero-price b { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.coff-low-hero-price small { font-size: 13px; color: var(--coff-muted); font-weight: 600; margin-left: 2px; }
.coff-low-hero-price .down { font-size: 13px; font-weight: 800; }
.coff-low-hero-spark { display: block; width: 100%; height: 40px; margin-top: 12px; }
@media (hover: hover) {
	.coff-low-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(229, 72, 77, 0.24); }
}
.coff-low-hero { transition: transform 0.18s var(--coff-ease), box-shadow 0.18s var(--coff-ease); }

/* 저점 갱신 로우: 배경 틴트 강화 (테두리 회전 유지) */
.coff-row.is-low {
	background:
		linear-gradient(
			color-mix(in srgb, var(--coff-red) 4%, var(--coff-card)),
			color-mix(in srgb, var(--coff-red) 4%, var(--coff-card))
		) padding-box,
		conic-gradient(from var(--coff-spin),
			var(--coff-red), #FF8A5C, var(--coff-amber),
			transparent 55%, var(--coff-red)) border-box;
}

/* 브랜드 컬러 도트 */
.coff-brand-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex-shrink: 0;
	background: var(--coff-brown);
}
.chip-brand { display: inline-flex; align-items: center; gap: 6px; }
.coff-brand-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.coff-brand-head .coff-brand-dot.lg { width: 12px; height: 12px; background: var(--brand-color, var(--coff-brown)); }
@media (prefers-reduced-motion: reduce) {
	.coff-low-hero { animation: none; }
}

/* ── v1.3 커피 지수 · 심장박동 · 인라인 CTA ──── */

/* 커피 지수 위젯 */
.coff-index { padding: 14px 16px; }
.coff-index-main { display: flex; align-items: baseline; justify-content: space-between; }
.coff-index-label { font-size: 13px; font-weight: 800; letter-spacing: -0.3px; }
.coff-index-label small { display: block; font-size: 10.5px; font-weight: 500; color: var(--coff-muted); margin-top: 1px; }
.coff-index-value { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; }
.coff-index-value small { font-size: 12px; font-weight: 600; color: var(--coff-muted); margin-left: 2px; }
.coff-index-deltas { display: flex; gap: 6px; margin-top: 10px; }
.coff-index-delta {
	flex: 1;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
	border-radius: 10px;
	padding: 7px 4px;
	background: var(--coff-bg);
}
.coff-index-delta small { display: block; font-size: 10px; font-weight: 500; color: var(--coff-muted); margin-bottom: 2px; }
.coff-index-delta.down { color: var(--coff-red); background: color-mix(in srgb, var(--coff-red) 7%, var(--coff-bg)); }
.coff-index-delta.rise { color: #1F6FB2; background: color-mix(in srgb, #1F6FB2 7%, var(--coff-bg)); }
.coff-index-delta.flat { color: var(--coff-muted); }

/* 상세 차트 현재 지점 심장박동 */
.coff-chart-card svg .coff-pulse-ring,
.coff-chart-card svg .coff-pulse-dot {
	transform-box: fill-box;
	transform-origin: center;
}
.coff-chart-card svg .coff-pulse-ring { animation: coff-heartbeat-ring 1.6s ease-out infinite; }
.coff-chart-card svg .coff-pulse-dot { animation: coff-heartbeat-dot 1.6s ease-in-out infinite; }
@keyframes coff-heartbeat-ring {
	0%   { transform: scale(0.7); opacity: 0.8; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@keyframes coff-heartbeat-dot {
	0%, 100% { transform: scale(1); }
	15%      { transform: scale(1.25); }
	30%      { transform: scale(1); }
}

/* 차트 직하단 인라인 CTA */
.coff-chart-cta { display: block; text-align: center; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
	.coff-chart-card svg .coff-pulse-ring, .coff-chart-card svg .coff-pulse-dot { animation: none; }
}

/* ── v1.4 삭제 인라인 폼 · 차트 호버 툴팁 ────── */

/* 댓글 삭제 인라인 폼 */
.coff-del-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 10px;
	background: var(--coff-bg);
	border: 1px solid var(--coff-line);
	border-radius: 10px;
}
.coff-del-form input[type="password"] {
	flex: 1;
	min-width: 120px;
	border: 1.5px solid var(--coff-line);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	background: var(--coff-card);
}
.coff-del-form input:focus { outline: none; border-color: var(--coff-brown); }
.coff-del-form button {
	border: 0;
	border-radius: 8px;
	padding: 8px 13px;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
.coff-del-form .confirm { background: var(--coff-red); color: #FFF; }
.coff-del-form .confirm:disabled { background: var(--coff-line); color: var(--coff-muted); cursor: wait; }
.coff-del-form .cancel { background: var(--coff-card); border: 1px solid var(--coff-line); color: var(--coff-muted); }
.coff-del-error { width: 100%; font-size: 11px; color: var(--coff-red); font-weight: 600; }

/* 차트 호버 툴팁 */
.coff-chart-wrap { position: relative; touch-action: pan-y; }
.coff-chart-tip {
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
	background: var(--coff-ink);
	color: #FFF;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 8px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(26, 21, 18, 0.25);
}
.coff-hover-guide { stroke: var(--coff-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.coff-hover-marker { fill: var(--coff-card); stroke: var(--coff-ink); stroke-width: 2; }

/* ── v1.5 허니팟 (스팸봇 방어 — 시각적 완전 은닉) ── */
.coff-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* ── v1.5.1 퀵 칩 (저점만·잔당가·하락률) ────── */
.coff-quick-chips { padding-top: 2px; }
.chip-quick {
	background: color-mix(in srgb, var(--coff-brown) 6%, var(--coff-card));
	border-color: color-mix(in srgb, var(--coff-brown) 25%, var(--coff-line));
	color: var(--coff-brown);
}
.chip-quick.active {
	background: var(--coff-brown);
	border-color: var(--coff-brown);
	color: #FFF;
}

/* ── v1.6 구매바형 CTA (가격 맥락 + 샤인 버튼) ── */
.coff-cta-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--coff-card);
	border: 1px solid var(--coff-line);
	border-radius: 16px;
	padding: 10px 10px 10px 16px;
	box-shadow: var(--coff-shadow-md);
}
.coff-cta-price { min-width: 0; }
.coff-cta-price b { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; display: block; line-height: 1.15; }
.coff-cta-price b small { font-size: 12px; font-weight: 600; color: var(--coff-muted); margin-left: 1px; }
.coff-cta-sub { font-size: 11px; font-weight: 700; color: var(--coff-red); white-space: nowrap; }

.coff-cta.has-link {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #6F4E37 20%, #8B5E3C 80%);
	box-shadow: 0 4px 14px rgba(111, 78, 55, 0.35);
	padding: 14px 12px;
	white-space: nowrap;
}
/* 샤인 스윕 — 4초마다 한 번, 은은하게 */
.coff-cta.has-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	animation: coff-shine 4s ease-in-out infinite;
}
@keyframes coff-shine {
	0%, 70%   { left: -60%; }
	85%, 100% { left: 130%; }
}
.coff-cta-arrow { display: inline-block; transition: transform 0.18s var(--coff-ease); }
@media (hover: hover) {
	.coff-cta.has-link:hover .coff-cta-arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.coff-cta.has-link::after { animation: none; }
}

/* ── v1.7 소개·문의 페이지 ─────────────────── */

/* 소개 히어로 */
.coff-about-hero { text-align: center; padding: 30px 20px 18px; }
.coff-about-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.3; margin: 0 0 12px; }
.coff-about-hero h1 em {
	font-style: normal;
	background: linear-gradient(120deg, var(--coff-brown), #A07856);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.coff-about-hero p { font-size: 13.5px; color: var(--coff-muted); line-height: 1.7; margin: 0; }

/* 소개 카드 */
.coff-about-card { position: relative; }
.coff-about-card p { font-size: 13.5px; line-height: 1.75; margin: 0; color: color-mix(in srgb, var(--coff-ink) 85%, var(--coff-muted)); }
.coff-about-num {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 28px;
	font-weight: 800;
	color: color-mix(in srgb, var(--coff-brown) 18%, transparent);
	letter-spacing: -1px;
}
.coff-about-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: color-mix(in srgb, var(--coff-ink) 85%, var(--coff-muted)); }
.coff-about-cta { text-align: center; padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* 문의 유형 */
.coff-contact-types { display: grid; gap: 10px; margin-bottom: 14px; }
.coff-contact-type {
	background: var(--coff-bg);
	border-radius: 10px;
	padding: 11px 13px;
}
.coff-contact-type b { display: block; font-size: 13px; margin-bottom: 2px; }
.coff-contact-type span { font-size: 12px; color: var(--coff-muted); line-height: 1.6; }
.coff-contact-mail { display: block; text-align: center; }

/* FAQ 아코디언 (details/summary — JS 불필요) */
.coff-faq { border-bottom: 1px solid var(--coff-line); }
.coff-faq:last-of-type { border-bottom: 0; }
.coff-faq summary {
	font-size: 13.5px;
	font-weight: 700;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 22px;
}
.coff-faq summary::-webkit-details-marker { display: none; }
.coff-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--coff-muted);
	transition: transform 0.18s var(--coff-ease);
}
.coff-faq[open] summary::after { content: "−"; color: var(--coff-brown); }
.coff-faq p { font-size: 13px; line-height: 1.75; color: var(--coff-muted); margin: 0 0 12px; }

/* ── v1.8 문의 폼 ─────────────────────────── */
.coff-inq-field { margin: 0 0 10px; }
.coff-inq-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.coff-inq-field label .req { color: var(--coff-red); }
#coff-inq-form select,
#coff-inq-form textarea {
	width: 100%;
	border: 1.5px solid var(--coff-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--coff-bg);
	box-sizing: border-box;
	color: var(--coff-ink);
}
#coff-inq-form select:focus,
#coff-inq-form textarea:focus { outline: none; border-color: var(--coff-brown); background: var(--coff-card); }
#coff-inq-form textarea { resize: vertical; line-height: 1.6; }
.coff-inq-submit { border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; width: 100%; padding: 13px; }
.coff-inq-submit:disabled { background: var(--coff-line); color: var(--coff-muted); cursor: not-allowed; }
.coff-inq-error { display: block; font-size: 12px; color: var(--coff-red); font-weight: 600; margin-top: 8px; }
.coff-inq-done { text-align: center; padding: 24px 12px; }
.coff-inq-done b { font-size: 16px; }
.coff-inq-done p { font-size: 12.5px; color: var(--coff-muted); margin: 8px 0 0; }

/* ── v1.8.1 로우 썸네일 높이 = 본문(coff-row-main) 높이 ── */
.coff-row { align-items: stretch; }
.coff-media { align-self: stretch; display: flex; }
.coff-media .coff-thumb,
.coff-media .coff-thumb-fallback {
	width: 60px;
	height: auto;
	min-height: 56px;
	align-self: stretch;
	object-fit: cover;
}
/* 본문 외 열은 세로 가운데 유지 */
.coff-row-main, .coff-spark, .coff-row-price { align-self: center; }

/* ── v1.9.1 이메일 인풋 스타일 · 차트 CTA 승격 ── */

/* 이메일 인풋 — text/password와 동일 스타일 (누락분) */
.coff-anon-row input[type="email"],
#coff-inq-form input[type="email"],
#coff-inq-form input[type="text"] {
	width: 100%;
	border: 1.5px solid var(--coff-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--coff-bg);
	box-sizing: border-box;
	min-width: 0;
	color: var(--coff-ink);
}
.coff-anon-row input[type="email"]:focus,
#coff-inq-form input:focus { outline: none; border-color: var(--coff-brown); background: var(--coff-card); }

/* 차트 직하단 CTA — 구매바 버튼과 동일 컴포넌트(그라디언트+샤인+화살표) */
.coff-chart-cta {
	display: block;
	width: 100%;
	margin-top: 12px;
	box-sizing: border-box;
	text-align: center;
}

/* ── v2.0 셸 확장 + 홈 2열 시세 그리드 ─────── */
:root { --coff-maxw: 740px; }

/* 댓글 등록 버튼 전폭 */
.coff-comments .form-submit { margin: 0; }
.coff-comment-submit { width: 100%; padding: 12px; }

/* 홈 시세 보드 */
.coff-board {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	padding: 0 16px;
}
.coff-board .coff-row { margin: 0; }
.coff-board .coff-partner-slot { grid-column: 1 / -1; margin: 2px 0; }

/* 넓은 화면: 한 줄 2개 (셀이 좁아지므로 스파크라인은 숨김) */
@media (min-width: 680px) {
	.coff-board { grid-template-columns: 1fr 1fr; gap: 12px; }
	.coff-board .coff-spark { display: none; }
}

/* 그리드 내 진입 페이드업 (기존 main > a.coff-row 셀렉터 대체) */
.coff-board > a.coff-row { animation: coff-fadeup 0.35s var(--coff-ease) backwards; }
.coff-board > a.coff-row:nth-of-type(1) { animation-delay: 0.02s; }
.coff-board > a.coff-row:nth-of-type(2) { animation-delay: 0.06s; }
.coff-board > a.coff-row:nth-of-type(3) { animation-delay: 0.10s; }
.coff-board > a.coff-row:nth-of-type(4) { animation-delay: 0.14s; }
.coff-board > a.coff-row:nth-of-type(5) { animation-delay: 0.18s; }
.coff-board > a.coff-row:nth-of-type(6) { animation-delay: 0.22s; }
.coff-board > a.coff-row:nth-of-type(7) { animation-delay: 0.26s; }
.coff-board > a.coff-row:nth-of-type(8) { animation-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
	.coff-board > a.coff-row { animation: none; }
}

/* ── v2.1 정사각 썸네일 · 셸 800px · 상세 관련 2열 ── */
:root { --coff-maxw: 800px; }

/* 썸네일: 정사각 고정 (v1.8.1 stretch 회귀) — 2줄 상품명에도 안정 */
.coff-row { align-items: center; }
.coff-media { align-self: center; display: block; }
.coff-media .coff-thumb,
.coff-media .coff-thumb-fallback {
	width: 64px;
	height: 64px;
	min-height: 0;
	aspect-ratio: 1 / 1;
	align-self: auto;
	object-fit: cover;
	border-radius: 14px;
}
.coff-thumb-fallback { display: flex; align-items: center; justify-content: center; }

/* ── v2.2 히어로 좌우 균형 · 6탭 · 장비 허브 ── */

/* 히어로: 좌 정보 / 우 큰 잔당가 (좌측 쏠림 해소) */
.coff-low-hero-body { display: flex; align-items: center; gap: 14px; }
.coff-low-hero-info { flex: 1; min-width: 0; }
.coff-low-hero-now { font-size: 11.5px; color: var(--coff-muted); margin-top: 6px; }
.coff-low-hero-val { text-align: right; flex-shrink: 0; }
.coff-low-hero-val b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.coff-low-hero-val small { font-size: 12px; font-weight: 600; color: var(--coff-muted); }
.coff-low-hero-val .down { display: block; font-size: 14px; font-weight: 800; margin-top: 4px; }

/* 6탭 */
.coff-tabbar { grid-template-columns: repeat(6, 1fr); }

/* 장비 허브 */
.coff-gear-groups { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 680px) {
	.coff-gear-groups { grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 16px; }
	.coff-gear-groups .coff-card { margin-left: 0; margin-right: 0; }
}
.coff-gear-group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	text-decoration: none;
	color: inherit;
	margin-bottom: 8px;
}
.coff-gear-group-head .coff-card-title { margin: 0; }
.coff-gear-count { font-size: 11.5px; font-weight: 700; color: var(--coff-brown); flex-shrink: 0; }
@media (hover: hover) {
	.coff-gear-group-head:hover .coff-card-title { color: var(--coff-brown); }
}

/* ── v2.3 장비 즉석 필터 · 뒤로가기 ─────────── */
.coff-gear-scope { font-size: 13px; font-weight: 700; color: var(--coff-brown); }
.coff-gear-cat.active {
	background: var(--coff-ink);
	border-color: var(--coff-ink);
	color: #FFF;
}
.coff-gear-cat.active .chip-count { background: rgba(255, 255, 255, 0.2); color: #FFF; }

.coff-back-wrap { padding: 0 16px; margin: 4px 0 8px; }
.coff-back-btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--coff-ink);
	text-decoration: none;
	background: var(--coff-card);
	border: 1px solid var(--coff-line);
	border-radius: 999px;
	padding: 7px 14px;
	transition: border-color 0.15s, color 0.15s;
}
@media (hover: hover) {
	.coff-back-btn:hover { border-color: var(--coff-brown); color: var(--coff-brown); }
}

/* ── v2.4 전면 검수 반영 ─────────────────── */

/* 섹션 헤드 아래 여백 보강 */
.coff-section-head { margin-bottom: 8px; }

/* 카드 내 칩: 가로 스크롤 제거 → 줄바꿈 */
.coff-card .coff-chips { flex-wrap: wrap; overflow-x: visible; }

/* 장비 그룹 카드: 1줄에 하나 */
@media (min-width: 680px) {
	.coff-gear-groups { grid-template-columns: 1fr; }
}

/* 보드에 로우가 1개뿐이면 전폭 */
.coff-board > a.coff-row:only-of-type { grid-column: 1 / -1; }

/* 랭킹 변동 칩 */
.coff-rank-chip {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	border-radius: 7px;
	padding: 2px 7px;
	margin-top: 4px;
	margin-right: 4px;
	letter-spacing: 0;
}
.coff-rank-chip.up   { color: var(--coff-red); background: color-mix(in srgb, var(--coff-red) 9%, var(--coff-bg)); }
.coff-rank-chip.dn   { color: #1F6FB2; background: color-mix(in srgb, #1F6FB2 9%, var(--coff-bg)); }
.coff-rank-chip.new  { color: #B87400; background: color-mix(in srgb, var(--coff-amber) 14%, var(--coff-bg)); }
.coff-rank-chip.flat { color: var(--coff-muted); background: var(--coff-bg); }
.coff-rank-chip.crown {
	color: #FFF;
	background: linear-gradient(120deg, var(--coff-brown), #A07856);
	box-shadow: 0 2px 8px rgba(111, 78, 55, 0.3);
}

/* ── v2.5.1 탭바 7탭 ─────────────────────── */
.coff-tabbar { grid-template-columns: repeat(7, 1fr); }
/* 좁은 화면: 7탭 라벨이 안 넘치게 폰트·간격 축소 */
@media (max-width: 430px) {
	.coff-tabbar a { font-size: 9.5px; letter-spacing: -0.3px; }
	.coff-tabbar .ico { font-size: 15px; }
}