/**
 * Hello Elementor Child — 글로벌 디자인 시스템
 *
 * 토스 블루 기반 미니멀 스타일
 * 모든 CSS 파일에서 이 변수를 참조한다.
 *
 * @package HelloElementorChild
 */

/* =============================================================================
   1. 디자인 토큰 (CSS Custom Properties)
   ============================================================================= */

:root {
	/* ── 브랜드 컬러 ── */
	--color-primary:        #0064FF;
	--color-primary-hover:  #0050CC;
	--color-primary-light:  #E8F0FE;
	--color-primary-bg:     #F0F4FF;

	/* ── 텍스트 ── */
	--color-text-primary:   #191F28;
	--color-text-secondary: #4E5968;
	--color-text-tertiary:  #8B95A1;
	--color-text-disabled:  #B0B8C1;

	/* ── 배경 ── */
	--color-bg-primary:     #FFFFFF;
	--color-bg-secondary:   #F8F9FA;
	--color-bg-tertiary:    #F2F4F6;

	/* ── 보더 ── */
	--color-border:         #E5E8EB;
	--color-border-light:   #F2F4F6;
	--color-border-dark:    #D1D6DB;

	/* ── 시맨틱 ── */
	--color-success:        #00C471;
	--color-warning:        #FF9500;
	--color-error:          #F04452;
	--color-info:           #0064FF;

	/* ── 다크 (푸터 등) ── */
	--color-dark-bg:        #191F28;
	--color-dark-surface:   #141920;
	--color-dark-text:      #FFFFFF;
	--color-dark-muted:     #8B95A1;

	/* ── 타이포그래피 ── */
	--font-family:          "Pretendard", -apple-system, BlinkMacSystemFont,
	                        "Apple SD Gothic Neo", system-ui, sans-serif;
	--font-mono:            "SF Mono", "Fira Code", "Consolas", monospace;

	/* 폰트 사이즈 */
	--text-xs:    12px;
	--text-sm:    13px;
	--text-base:  15px;
	--text-md:    16px;
	--text-lg:    18px;
	--text-xl:    20px;
	--text-2xl:   24px;
	--text-3xl:   30px;
	--text-4xl:   36px;

	/* 폰트 웨이트 */
	--font-regular:   400;
	--font-medium:    500;
	--font-semibold:  600;
	--font-bold:      700;
	--font-extrabold: 800;

	/* 라인 하이트 */
	--leading-tight:  1.2;
	--leading-snug:   1.4;
	--leading-normal: 1.6;
	--leading-relaxed: 1.8;

	/* ── 간격 ── */
	--space-1:   4px;
	--space-2:   8px;
	--space-3:   12px;
	--space-4:   16px;
	--space-5:   20px;
	--space-6:   24px;
	--space-8:   32px;
	--space-10:  40px;
	--space-12:  48px;
	--space-16:  64px;
	--space-20:  80px;

	/* ── 둥글기 ── */
	--radius-sm:   6px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-full: 9999px;

	/* ── 그림자 ── */
	--shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.12);
	--shadow-xl:   0 8px 24px rgba(0, 0, 0, 0.16);

	/* ── 트랜지션 ── */
	--transition-fast:   150ms ease;
	--transition-base:   200ms ease;
	--transition-slow:   300ms ease;

	/* ── z-index ── */
	--z-dropdown:  10;
	--z-sticky:    20;
	--z-fixed:     30;
	--z-overlay:   40;
	--z-modal:     50;

	/* ── 레이아웃 ── */
	--container-sm:   640px;
	--container-md:   768px;
	--container-lg:   1024px;
	--container-xl:   1200px;
	--container-2xl:  1400px;
}

/* =============================================================================
   2. 리셋 & 기본 스타일
   ============================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family) !important;
	font-size: var(--text-base);
	font-weight: var(--font-regular);
	line-height: var(--leading-normal);
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Pretendard 전역 강제 — Elementor, WooCommerce, 플러그인 폰트 오버라이드 */
body *:not(code):not(pre):not(kbd):not(.dashicons):not([class*="icon"]) {
	font-family: inherit;
}

/* =============================================================================
   3. 타이포그래피
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--color-text-primary);
	letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

p {
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	word-break: keep-all;
}

small {
	font-size: var(--text-sm);
	color: var(--color-text-tertiary);
}

strong {
	font-weight: var(--font-semibold);
	color: var(--color-text-primary);
}

/* =============================================================================
   4. 링크
   ============================================================================= */

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-hover);
}

a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* =============================================================================
   5. 버튼
   ============================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 10px 20px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: 1;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Primary */
.btn-primary {
	color: #FFFFFF;
	background: var(--color-primary);
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 100, 255, 0.25);
}

/* Secondary */
.btn-secondary {
	color: var(--color-text-primary);
	background: var(--color-bg-tertiary);
}

.btn-secondary:hover {
	background: var(--color-border);
	color: var(--color-text-primary);
}

/* Outline */
.btn-outline {
	color: var(--color-primary);
	background: transparent;
	border: 1px solid var(--color-primary);
}

.btn-outline:hover {
	color: #FFFFFF;
	background: var(--color-primary);
}

/* Ghost */
.btn-ghost {
	color: var(--color-text-secondary);
	background: transparent;
}

.btn-ghost:hover {
	color: var(--color-text-primary);
	background: var(--color-bg-tertiary);
}

/* 사이즈 */
.btn-sm {
	padding: 6px 14px;
	font-size: var(--text-sm);
}

.btn-lg {
	padding: 14px 28px;
	font-size: var(--text-md);
}

/* =============================================================================
   6. 카드
   ============================================================================= */

.card {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-md);
}

a.card {
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

a.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* =============================================================================
   7. 뱃지 & 태그
   ============================================================================= */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-full);
	line-height: 1.4;
}

.badge-primary {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.badge-success {
	color: #006B3F;
	background: #E6F9F0;
}

.badge-warning {
	color: #8A5600;
	background: #FFF4E0;
}

.badge-error {
	color: #B91C2E;
	background: #FEECEF;
}

/* =============================================================================
   8. 폼 요소
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	color: var(--color-text-primary);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-text-disabled);
}

label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
}

/* =============================================================================
   9. 구분선
   ============================================================================= */

hr {
	border: none;
	border-top: 1px solid var(--color-border-light);
	margin: var(--space-8) 0;
}

/* =============================================================================
   10. 블록인용
   ============================================================================= */

blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-6);
	border-left: 3px solid var(--color-primary);
	background: var(--color-bg-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
	color: var(--color-text-secondary);
	font-size: var(--text-base);
	font-style: normal;
	margin: 0;
}

/* =============================================================================
   11. 코드
   ============================================================================= */

code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	color: var(--color-primary);
	background: var(--color-primary-light);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

pre {
	background: var(--color-dark-bg);
	color: #E5E8EB;
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	overflow-x: auto;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
}

/* =============================================================================
   12. 테이블
   ============================================================================= */

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border-light);
}

th {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text-tertiary);
	background: var(--color-bg-secondary);
}

td {
	font-size: var(--text-base);
	color: var(--color-text-primary);
}

tr:hover td {
	background: var(--color-bg-secondary);
}

/* =============================================================================
   13. 유틸리티
   ============================================================================= */

/* 텍스트 색상 */
.text-primary   { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted     { color: var(--color-text-tertiary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-error     { color: var(--color-error) !important; }

/* 배경 */
.bg-primary   { background: var(--color-primary) !important; }
.bg-light     { background: var(--color-bg-secondary) !important; }
.bg-dark      { background: var(--color-dark-bg) !important; }

/* 텍스트 정렬 */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* =============================================================================
   14. 반응형 (모바일 조정)
   ============================================================================= */

@media (max-width: 768px) {
	:root {
		--text-4xl: 28px;
		--text-3xl: 24px;
		--text-2xl: 20px;
		--text-xl:  18px;
	}
}

/* =============================================================================
   15. 접근성 — 모션 감소
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================================
   16. 헤더 — 모바일 아이콘 보정
   Elementor SVG 아이콘에 width 누락 이슈 수정
   ============================================================================= */

.elementor-widget-icon .elementor-icon .e-font-icon-svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* =============================================================================
   17. 헤더 CTA — 로그인 상태 전환
   body.logged-in 클래스 (WordPress 기본 제공)로 두 버튼 전환
   ============================================================================= */

/* 기본 (비로그인): 로그인 버튼 표시, 마이페이지 버튼 숨김 */
.elementor-widget.hc-cta-my-account {
	display: none !important;
}

/* 로그인 상태: 마이페이지 버튼 표시, 로그인 버튼 숨김 */
body.logged-in .elementor-widget.hc-cta-login {
	display: none !important;
}
body.logged-in .elementor-widget.hc-cta-my-account {
	display: block !important;
}