/* ────────────────────────────────────────────────────────────────────────
   딱따고기 프레스티지 (ddgg_prestige) — Design Tokens & Shared Primitives
   기업/비즈니스 범용 레이아웃 · 컬러셋은 [data-scheme] 으로 스왑
   모든 토큰/리셋은 .ddgg-prestige 안으로 스코프되어 관리자 UI 에 새지 않습니다.

   컬러셋(data-scheme) — 전부 라이트(흰 배경·다크 글자), 액센트만 다름:
     blue (기본·딥블루) · emerald · charcoal(모노) · burgundy
   커스텀 액센트:
     루트에 style="--pr-accent:#xxxxxx" 가 인라인으로 주입되면
     hover/pressed/soft/ring 이 color-mix 로 자동 파생됩니다.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   기본 스킴 = blue (화이트 + 딥블루). .ddgg-prestige 자체에 정의.
   ════════════════════════════════════════════════════════════════════════ */
.ddgg-prestige {
	/* Surfaces — 라이트(흰 배경 + 쿨그레이 면) */
	--pr-bg: #ffffff;
	--pr-surface: #f5f8fc;
	--pr-surface-2: #eaf0f8;
	--pr-surface-3: #dde7f3;
	--pr-border: #e5ebf3;
	--pr-border-strong: #ccd8e6;

	/* Text */
	--pr-text: #16233a;
	--pr-text-muted: #4d5b72;
	--pr-text-subtle: #8492a8;
	--pr-text-faint: #c2ccdb;

	/* Accent — 딥블루 */
	--pr-accent: #1f4e9c;
	--pr-on-accent: #ffffff;

	/* Hero 오버레이 (히어로 배경 이미지 위 그라데이션 — 라이트 공용 뉴트럴 딤) */
	--pr-hero-overlay: linear-gradient(180deg, rgba(15,20,30,0.22) 0%, rgba(15,20,30,0.48) 55%, rgba(15,20,30,0.82) 100%);

	/* Type */
	--pr-font-sans: "Pretendard Variable", Pretendard, Inter, ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
	--pr-font-display: "Cormorant Garamond", "Pretendard Variable", Pretendard, serif;

	/* Radius */
	--pr-r-xs: 4px;
	--pr-r-sm: 6px;
	--pr-r-md: 10px;
	--pr-r-lg: 16px;
	--pr-r-xl: 22px;
	--pr-r-pill: 999px;

	/* Shadow (라이트) */
	--pr-sh-sm: 0 1px 2px rgba(20,30,50,0.05), 0 1px 3px rgba(20,30,50,0.04);
	--pr-sh-md: 0 6px 20px rgba(20,30,50,0.07), 0 2px 6px rgba(20,30,50,0.05);
	--pr-sh-lg: 0 24px 60px rgba(20,30,50,0.13), 0 8px 18px rgba(20,30,50,0.07);

	/* Layout metrics */
	--pr-header-h: 80px;
	--pr-sidebar-w: 256px;
	--pr-container: 1320px;
	--pr-container-wide: 1440px;
	--pr-gutter: 28px;

	/* 헤더(메가메뉴) — 사용자 디자인 변수 별칭 */
	--pc-header-height: var(--pr-header-h);
	--pc-header-max: 2560px;
	--pc-gnb-width: 1600px;        /* gnb 폭 — 로고/우측을 바깥으로 밀고 중앙 메뉴 영역 확보 */
	--pr-menu-min: 180px;          /* 1차 메뉴 항목 · 메가 컬럼 최소 너비 */
	--color-main1: var(--pr-accent);

	/* ── 파생 액센트 (커스텀 --pr-accent 가 주입돼도 자동 재계산) ── */
	--pr-accent-hover:   color-mix(in srgb, var(--pr-accent) 84%, #ffffff);
	--pr-accent-pressed: color-mix(in srgb, var(--pr-accent) 78%, #000000);
	--pr-accent-soft:    color-mix(in srgb, var(--pr-accent) 14%, var(--pr-bg));
	--pr-accent-soft-2:  color-mix(in srgb, var(--pr-accent) 22%, var(--pr-bg));
	--pr-accent-line:    color-mix(in srgb, var(--pr-accent) 40%, transparent);
	--pr-accent-ring:    color-mix(in srgb, var(--pr-accent) 35%, transparent);
}

/* ── emerald — 화이트 + 딥그린 ── */
.ddgg-prestige[data-scheme="emerald"] {
	--pr-surface: #f4faf7;
	--pr-surface-2: #e7f4ee;
	--pr-surface-3: #d6ebe1;
	--pr-border: #e1eee8;
	--pr-border-strong: #c4ddd2;

	--pr-text: #16241f;
	--pr-text-muted: #4a5d56;
	--pr-text-subtle: #859a91;
	--pr-text-faint: #c2d6cd;

	--pr-accent: #0e7c66;
	--pr-on-accent: #ffffff;
}

/* ── charcoal — 화이트 + 잉크블랙 액센트 (무채색 모노) ── */
.ddgg-prestige[data-scheme="charcoal"] {
	--pr-surface: #f7f7f8;
	--pr-surface-2: #efeff1;
	--pr-surface-3: #e4e4e7;
	--pr-border: #e7e7ea;
	--pr-border-strong: #d2d2d6;

	--pr-text: #18181b;
	--pr-text-muted: #52525b;
	--pr-text-subtle: #a1a1aa;
	--pr-text-faint: #d4d4d8;

	--pr-accent: #18181b;
	--pr-on-accent: #ffffff;
	/* 모노 — 액센트가 이미 어두우므로 hover 는 살짝 밝게 */
	--pr-accent-hover: color-mix(in srgb, var(--pr-accent) 82%, #ffffff);
}

/* ── burgundy — 화이트 + 와인 ── */
.ddgg-prestige[data-scheme="burgundy"] {
	--pr-surface: #faf6f7;
	--pr-surface-2: #f3e9ec;
	--pr-surface-3: #ecdadf;
	--pr-border: #eedfe3;
	--pr-border-strong: #ddc2c9;

	--pr-text: #2a1a1f;
	--pr-text-muted: #6a545b;
	--pr-text-subtle: #a98f97;
	--pr-text-faint: #d8c4ca;

	--pr-accent: #8e2d43;
	--pr-on-accent: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════════
   Base reset — .ddgg-prestige 안으로만 스코프
   (단, body 마진은 풀폭 고정 헤더/히어로 정렬을 위해 초기화. 이 CSS 는 본
    레이아웃이 적용된 프론트 페이지에서만 로드되므로 관리자엔 영향 없음)
   ════════════════════════════════════════════════════════════════════════ */
body { margin: 0; }

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

.ddgg-prestige {
	background: var(--pr-bg);
	color: var(--pr-text);
	font-family: var(--pr-font-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.003em;
}
.ddgg-prestige a { color: inherit; text-decoration: none; }
.ddgg-prestige button { font-family: inherit; cursor: pointer; }
.ddgg-prestige img { display: block; max-width: 100%; }
.ddgg-prestige h1, .ddgg-prestige h2, .ddgg-prestige h3,
.ddgg-prestige h4, .ddgg-prestige h5 { margin: 0; font-weight: 700; line-height: 1.25; }
.ddgg-prestige p { margin: 0; }
.ddgg-prestige ul { margin: 0; padding: 0; list-style: none; }

.ddgg-prestige ::selection { background: var(--pr-accent); color: var(--pr-on-accent); }
.ddgg-prestige ::-moz-selection { background: var(--pr-accent); color: var(--pr-on-accent); }

/* ── Container ── */
.ddgg-prestige .container {
	max-width: var(--pr-container);
	margin: 0 auto;
	padding: 0 var(--pr-gutter);
}
.ddgg-prestige .container-wide { max-width: var(--pr-container-wide); margin: 0 auto; padding: 0 var(--pr-gutter); }

/* ── Display/eyebrow type ── */
.ddgg-prestige .eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--pr-accent);
}
.ddgg-prestige .eyebrow::before {
	content: ''; width: 26px; height: 1px; background: var(--pr-accent-line);
}
.ddgg-prestige .display { font-family: var(--pr-font-display); font-weight: 600; letter-spacing: 0.01em; }
.ddgg-prestige .muted  { color: var(--pr-text-muted); }
.ddgg-prestige .subtle { color: var(--pr-text-subtle); }

/* ════════════════════════════════════════════════════════════════════════
   Buttons
   ════════════════════════════════════════════════════════════════════════ */
.ddgg-prestige .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 24px !important; height: unset !important;
	border-radius: var(--pr-r-pill); border: 1px solid transparent;
	font-size: 14px; font-weight: 600; color: var(--pr-text);
	transition: background .18s, border-color .18s, color .18s, transform .06s, box-shadow .18s;
	white-space: nowrap; letter-spacing: 0.01em;
}
.ddgg-prestige .btn:active { transform: translateY(1px); }
.ddgg-prestige .btn-primary { background: var(--pr-accent); color: var(--pr-on-accent); box-shadow: var(--pr-sh-sm); }
.ddgg-prestige .btn-primary:hover { background: var(--pr-accent-hover); color: var(--pr-on-accent); box-shadow: var(--pr-sh-md); }
.ddgg-prestige .btn-outline { background: transparent; color: var(--pr-text); border-color: var(--pr-border-strong); }
.ddgg-prestige .btn-outline:hover { border-color: var(--pr-accent); color: var(--pr-accent); }
.ddgg-prestige .btn-ghost { background: transparent; color: var(--pr-text-muted); }
.ddgg-prestige .btn-ghost:hover { color: var(--pr-text); }
.ddgg-prestige .btn-light { background: var(--pr-text); color: var(--pr-bg); }
.ddgg-prestige .btn-light:hover { background: var(--pr-text-muted); }
.ddgg-prestige .btn-sm { padding: 8px 16px !important; font-size: 13px; }
.ddgg-prestige .btn-lg { padding: 15px 30px !important; font-size: 15px; }
.ddgg-prestige .btn-block { width: 100%; }

/* ── Pills / chips ── */
.ddgg-prestige .pill {
	display: inline-flex; align-items: center; gap: 7px;
	height: 34px; padding: 0 16px; border-radius: var(--pr-r-pill);
	background: var(--pr-surface-2); border: 1px solid var(--pr-border);
	color: var(--pr-text-muted); font-size: 13px; font-weight: 600;
}
.ddgg-prestige .pill strong { color: var(--pr-text); font-weight: 700; }
.ddgg-prestige .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pr-accent); }

/* ── icon button (header) ── */
.ddgg-prestige .icon-btn {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: transparent; border: 1px solid transparent; color: inherit;
	transition: background .15s, border-color .15s;
}
.ddgg-prestige .icon-btn:hover { background: var(--pr-surface-2); }