@charset "utf-8";

/* 츄베이크 테마 토큰. 모듈 스킨은 --hr-* 이름을 읽으므로 그 이름을 유지한다. */
:root {
	--cb-cream: #fbf3dc;
	--cb-cream-deep: #f3e6c1;
	--cb-paper: #fffaf0;
	--cb-kraft: #c89b6a;
	--cb-kraft-deep: #a87c4f;
	--cb-coral: #e8463a;
	--cb-coral-deep: #c3352b;
	--cb-sage: #9dbb8c;
	--cb-sage-deep: #6f9160;
	--cb-butter: #f7d774;
	--cb-ink: #4a2e12;
	--cb-ink-soft: #7a5a37;
	--cb-blue: #1d4fa8;

	--hr-brand: var(--cb-coral);
	--hr-brand-dark: var(--cb-coral-deep);
	--hr-brand-light: #f07a70;
	--hr-brand-soft: rgba(232, 70, 58, .1);
	--hr-ink: var(--cb-ink);
	--hr-ink-sub: var(--cb-ink-soft);
	--hr-muted: #a68b6c;
	--hr-line: #e9dcbd;
	--hr-line-soft: #f1e7cf;
	--hr-bg: var(--cb-paper);
	--hr-surface: var(--cb-cream);
	--hr-danger: var(--cb-coral-deep);
	--hr-success: var(--cb-sage-deep);

	--hr-btn-face: var(--cb-paper);
	--hr-btn-line: #dccbA6;
	--hr-btn-strong: var(--cb-coral);
	--hr-btn-strong-hover: var(--cb-coral-deep);

	--hr-radius: 22px;
	--hr-radius-sm: 14px;
	--hr-radius-btn: 999px;
	--hr-radius-pill: 999px;
	--hr-shadow: 0 24px 50px -30px rgba(74, 46, 18, .45);

	--hr-w: 1240px;
	--hr-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	--cb-display: 'Jua', 'Pretendard Variable', Pretendard, sans-serif;
	--cb-latin: 'Fredoka', 'Jua', sans-serif;
	--cb-script: 'Nanum Pen Script', 'Caveat', cursive;
	color-scheme: light;
}

html { background: var(--cb-cream); }
body { margin: 0; background: var(--cb-cream); }

.hr {
	font-family: var(--hr-font);
	color: var(--hr-ink);
	font-size: 16px;
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.hr *, .hr *::before, .hr *::after { box-sizing: border-box; }
.hr a { color: inherit; text-decoration: none; }
.hr img { max-width: 100%; height: auto; }
.hr button { font-family: inherit; }

html, .hr * { scrollbar-width: thin; scrollbar-color: var(--cb-kraft) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: var(--cb-kraft); }

/* 공용 버튼 */
.hr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 2px solid var(--cb-ink); border-radius: 999px; background: var(--cb-paper); color: var(--cb-ink); font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .15s, background .15s, color .15s, box-shadow .15s; box-shadow: 0 3px 0 var(--cb-ink); }
.hr-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--cb-ink); }
.hr-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cb-ink); }
.hr-btn-primary { background: var(--cb-coral); color: #fff; }
.hr-btn-primary:hover { background: var(--cb-coral-deep); }
.hr-btn-sage { background: var(--cb-sage); color: var(--cb-ink); }
.hr-btn-ghost { box-shadow: none; border-color: var(--hr-line); }
.hr-btn-ghost:hover { box-shadow: none; border-color: var(--cb-ink); }
.hr-btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

.hr-inner { width: min(100% - 40px, var(--hr-w)); margin: 0 auto; }
@media (max-width: 640px) { .hr-inner { width: min(100% - 28px, var(--hr-w)); } }

/* 코어 메시지 등 기본 요소 */
.hr .rhymix_content { min-width: 0; }

/* 링크형 버튼의 글자색: .hr a { color: inherit } 보다 우선해야 한다 */
.hr a.hr-btn { color: var(--cb-ink); }
.hr a.hr-btn-primary, .hr .hr-btn-primary { color: #fff; }
.hr a.hr-btn-primary:hover { color: #fff; }
.hr a.hr-btn-sage { color: var(--cb-ink); }
.hr a.cb-add, .hr .cb-add { color: var(--cb-ink); }
.hr .cb-nav > ul > li.is-on > a, .hr .cb-nav > ul > li:hover > a { color: var(--cb-cream); }
.hr .hr-mobile-list > li.is-on > a { color: var(--cb-coral); }
.hr .cb-cats a.is-on, .hr .cb-cats a:hover { color: var(--cb-cream); }
.hr .hrb-rv-tabs button.is-on { color: var(--cb-cream); }