/**
 * Personal Color 16-Type Detail Page - Premium Design System
 * Version: 8.1.2 (Critical Fix - Flex Stretch Problem)
 * Design Philosophy: Apple + Toss Style + Glassmorphism + Polishing
 *
 * 🛠️ v8.1 Bug Fixes:
 * 1. 형광펜 효과: 전체 박스 → 하단 40%만 세련된 밑줄
 * 2. 신뢰도 카드: 돌출 버그 수정 (box-sizing, grid 정렬)
 *
 * 🎨 v8.0 Key Improvements (Senior Designer Micro-Management):
 * 1. 상품 이미지: object-fit: contain + padding으로 '액자 효과'
 * 2. 컬러 팔레트: 탕후루 같은 입체 구슬 효과 (Glossy)
 * 3. 체크리스트: 아이콘 색상 테마 동기화
 * 4. 관련 타입 카드: 클릭 유도성 강화
 * 5. 스타일 가이드: 정보 위계(Hierarchy) 명확화
 *
 * 🎨 v7.0 Key Improvements (Lead Designer Feedback):
 * 1. Glassmorphism & Airy - 반투명 유리 효과
 * 2. Magazine-Like Product Grid - 형광펜 효과, 에디터 코멘트
 * 3. Typography Rhythm - word-break: keep-all, 자간 최적화
 * 4. Micro-Interactions - 컬러칩 광택, 버튼 깊이감
 * 5. Mobile Thumb Zone - 엄지 최적화
 */

/* =========================================
   [DESIGN SYSTEM] CSS Variables & Fonts
   ========================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
    /* Typography */
    --font-primary: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Spacing System (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Colors - Neutral */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f3f4f6;
    --color-border-light: #e5e7eb;
    --color-border-default: #d1d5db;

    /* Colors - Brand */
    --color-accent: #E91E63;
    --color-accent-dark: #C2185B;
    --color-accent-light: #FCE4EC;

    /* ★ v7.0 Glassmorphism Shadows (유색 그림자) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);

    /* ★ 시즌별 유색 그림자 (Glassmorphism) */
    --shadow-glass: 0 8px 32px rgba(168, 216, 234, 0.15);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Season Theme Variables ===== */
/* 봄 (Spring) - Warm Pink/Coral */
.season-theme-spring {
    --season-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 50%, #fecdd3 100%);
    --season-accent: #FB7185;
    --season-accent-dark: #E11D48;
    --season-accent-light: rgba(251, 113, 133, 0.15);
    --season-text: #881337;
    --season-border: #fda4af;
    --season-badge-bg: linear-gradient(135deg, #FF6B9D 0%, #FF8FB1 100%);
    --shadow-glass: 0 8px 32px rgba(251, 113, 133, 0.12);
}

/* 여름 (Summer) - Cool Blue/Lavender */
.season-theme-summer {
    --season-gradient: linear-gradient(135deg, #f0f5ff 0%, #e0e7ff 50%, #c7d2fe 100%);
    --season-accent: #818CF8;
    --season-accent-dark: #6366F1;
    --season-accent-light: rgba(129, 140, 248, 0.15);
    --season-text: #3730a3;
    --season-border: #a5b4fc;
    --season-badge-bg: linear-gradient(135deg, #6A8EAE 0%, #93B5C6 100%);
    --shadow-glass: 0 8px 32px rgba(168, 216, 234, 0.15);
}

/* 가을 (Autumn) - Warm Brown/Orange */
.season-theme-autumn {
    --season-gradient: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    --season-accent: #D97706;
    --season-accent-dark: #B45309;
    --season-accent-light: rgba(217, 119, 6, 0.12);
    --season-text: #78350f;
    --season-border: #fbbf24;
    --season-badge-bg: linear-gradient(135deg, #CD853F 0%, #DEB887 100%);
    --shadow-glass: 0 8px 32px rgba(251, 191, 36, 0.15);
}

/* 겨울 (Winter) - Cool Blue/Silver */
.season-theme-winter {
    --season-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
    --season-accent: #3B82F6;
    --season-accent-dark: #2563EB;
    --season-accent-light: rgba(59, 130, 246, 0.12);
    --season-text: #1e3a8a;
    --season-border: #60a5fa;
    --season-badge-bg: linear-gradient(135deg, #4169E1 0%, #6495ED 100%);
    --shadow-glass: 0 8px 32px rgba(96, 165, 250, 0.15);
}

/* =========================================
   [CRITICAL] Core Layout & Reset
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ★ v7.0 Typography Rhythm - 한글 최적화 */
body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    word-break: keep-all; /* ★ 단어 단위 줄바꿈 (한글 필수) */
    text-underline-position: under; /* 밑줄이 글자와 겹치지 않게 */
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 메인 컨테이너 */
.pc-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-lg);
    background: var(--color-bg-primary);
    min-height: 100vh;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
    .pc-container {
        padding: var(--space-md);
    }
}

/* ★ v7.0 Mobile Thumb Zone - 더 좁은 패딩으로 콘텐츠 확보 */
@media (max-width: 480px) {
    .pc-container {
        padding: var(--space-md) 14px;
    }
}

/* =========================================
   [HERO] Season-Themed Gradient Header
   ========================================= */
.pc-hero {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    margin: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-xl);
    background: var(--season-gradient, linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%));
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    position: relative;
    overflow: hidden;
}

/* Hero 배경 패턴 (미묘한 그레인 효과) */
.pc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.hero-emoji {
    font-size: 56px;
    margin-bottom: var(--space-md);
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ★ v7.0 Typography - 제목 타이트하게 */
.hero-title {
    font-size: 32px;
    font-weight: var(--font-weight-extrabold);
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
    letter-spacing: -0.03em; /* ★ 제목은 타이트하게 */
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-lg);
    letter-spacing: -0.01em;
}

.hero-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    line-height: 1.8;
}

/* ★ v7.0 Typography - 감성 문구 */
.hero-description.emotional {
    font-size: 17px;
    font-weight: var(--font-weight-light); /* 가벼운 웨이트 */
    letter-spacing: 0.02em; /* 자간 넓게 */
    color: var(--color-text-tertiary);
    line-height: 1.9;
    max-width: 600px;
    padding: 0 var(--space-md);
    opacity: 0.85;
}

.hero-characteristics {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ★ v7.0 Glassmorphism - 배지 */
.char-badge {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--season-text, var(--color-text-secondary));
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.char-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .pc-hero {
        padding: var(--space-xl) var(--space-md);
        margin: calc(-1 * var(--space-md));
        margin-bottom: var(--space-lg);
    }

    .hero-emoji { font-size: 48px; }
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 16px; }
    .hero-description { font-size: 15px; }
    .hero-description.emotional { font-size: 15px; }
}

/* =========================================
   [SECTIONS] Common Section Styles
   ========================================= */
.pc-section {
    margin: var(--space-2xl) 0;
    padding: 0;
}

/* ★ v7.0 Typography - 섹션 헤더 */
.pc-section h2,
.section-header {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    letter-spacing: -0.02em; /* ★ 제목은 타이트하게 */
    line-height: 1.3;
}

/* Section Header with Accent Bar */
.pc-section h2::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--season-accent, var(--color-accent));
    border-radius: 2px;
    flex-shrink: 0;
}

/* =========================================
   [PALETTE] Premium Color Chips
   ========================================= */
.palette-grid, .avoid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* ★ v8.0 컬러 팔레트 '탕후루 같은 입체 구슬' 효과 (Glossy) */
.palette-color, .avoid-color {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none; /* ★ 테두리 제거로 더 깔끔하게 */
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
    /* ★ 입체적인 구슬 효과 */
    box-shadow:
        inset -4px -4px 8px rgba(0, 0, 0, 0.1), /* 아래쪽 내부 그림자 */
        inset 4px 4px 8px rgba(255, 255, 255, 0.4), /* 위쪽 내부 하이라이트 */
        0 4px 10px rgba(0, 0, 0, 0.15); /* 외부 그림자 */
}

/* ★ 빛 반사 효과 (Shine Effect) */
.palette-color::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 100%
    );
    transform: skewX(-25deg);
    transition: 0.5s ease;
    opacity: 0;
}

.palette-color:hover::before {
    left: 125%;
    opacity: 1;
    transition: 0.7s ease;
}

/* ★ v8.0 Hover 시 광택 강조 */
.palette-color:hover, .avoid-color:hover {
    transform: translateY(-2px) scale(1.1);
    /* ★ 광택 강조된 구슬 효과 */
    box-shadow:
        inset -4px -4px 12px rgba(0, 0, 0, 0.2), /* 더 깊은 내부 그림자 */
        inset 4px 4px 12px rgba(255, 255, 255, 0.6), /* 더 밝은 내부 하이라이트 */
        0 8px 16px rgba(0, 0, 0, 0.2); /* 더 깊은 외부 그림자 */
}

/* Color Tooltip on Hover */
.palette-color::after {
    content: attr(title);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: white;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    z-index: 10;
}

.palette-color:hover::after {
    opacity: 1;
    visibility: visible;
}

.representative-color {
    background: var(--color-bg-tertiary);
    padding: var(--space-md);
    text-align: center;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* =========================================
   [STYLE CARDS] Style Guide Cards
   ========================================= */
.style-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* ★ v7.0 Glassmorphism - 스타일 카드 */
.style-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

.style-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--season-badge-bg, var(--color-accent));
    opacity: 0;
    transition: var(--transition-normal);
}

.style-card:hover {
    border-color: var(--season-accent, var(--color-accent));
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.style-card:hover::before {
    opacity: 1;
}

/* ★ v8.0 스타일 가이드 정보 위계 명확화 */
.style-card h3 {
    font-size: 11px; /* ★ 더 작게 */
    letter-spacing: 1px; /* ★ 자간 넓게 */
    color: var(--color-text-muted);
    margin-bottom: 12px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    opacity: 0.8; /* ★ 더 연하게 */
}

/* ★ v8.0 핵심 내용은 더 굵고 진하게 */
.style-card p {
    font-size: 17px; /* ★ 16px -> 17px */
    font-weight: var(--font-weight-bold); /* 700 */
    margin: 0;
    word-break: keep-all;
    color: var(--color-text-primary);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .style-cards { grid-template-columns: 1fr; }
}

/* =========================================
   [CHECKLIST] Notepad-Style UI + Glassmorphism
   ========================================= */
.checklist-section {
    margin: var(--space-2xl) 0;
}

.checklist-section h2 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

/* ★ v7.0 Glassmorphism - 체크리스트 박스 */
.checklist-box {
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    /* Glassmorphism + Notepad 텍스처 */
    background:
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            rgba(0, 0, 0, 0.02) 31px,
            rgba(0, 0, 0, 0.02) 32px
        ),
        rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass);
}

/* 노트 바인딩 효과 */
.checklist-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        var(--season-accent, #E91E63) 0%,
        var(--season-accent-dark, #C2185B) 100%
    );
    opacity: 0.25;
}

/* 웜톤 배경 */
.checklist-box.warm-tone {
    background:
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            rgba(249, 115, 22, 0.04) 31px,
            rgba(249, 115, 22, 0.04) 32px
        ),
        rgba(255, 251, 245, 0.8);
    border-color: rgba(254, 215, 170, 0.5);
}

.checklist-box.warm-tone::before {
    background: linear-gradient(to bottom, #F97316 0%, #EA580C 100%);
}

/* 쿨톤 배경 */
.checklist-box.cool-tone {
    background:
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            rgba(99, 102, 241, 0.04) 31px,
            rgba(99, 102, 241, 0.04) 32px
        ),
        rgba(250, 251, 255, 0.8);
    border-color: rgba(199, 210, 254, 0.5);
}

.checklist-box.cool-tone::before {
    background: linear-gradient(to bottom, #6366F1 0%, #4F46E5 100%);
}

.checklist-items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    padding-left: var(--space-xl);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    transition: var(--transition-fast);
}

.check-item:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text-primary);
}

.check-item:last-child {
    border-bottom: none;
}

/* ★ v8.0 체크 아이콘 테마 색상 동기화 */
.check-icon {
    flex-shrink: 0;
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ★ 웜톤 체크 아이콘 스타일 (봄/가을) */
.checklist-box.warm-tone .check-icon {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))
        hue-rotate(-30deg) saturate(1.3); /* 오렌지/코랄 계열로 */
    text-shadow: 0 0 8px rgba(251, 113, 133, 0.3); /* 웜톤 네온 효과 */
}

/* ★ 쿨톤 체크 아이콘 스타일 (여름/겨울) */
.checklist-box.cool-tone .check-icon {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))
        hue-rotate(180deg) saturate(1.2); /* 블루/바이올렛 계열로 */
    text-shadow: 0 0 10px rgba(65, 105, 225, 0.3); /* 쿨톤 네온 효과 */
}

.check-text {
    flex: 1;
}

/* ★ v7.0 형광펜 하이라이트 효과 */
.check-text strong,
.check-text b {
    background: linear-gradient(
        to bottom,
        transparent 60%,
        var(--season-accent-light, rgba(233, 30, 99, 0.18)) 60%
    );
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: 0 2px;
}

.checklist-summary {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-tertiary);
    margin: 0;
    padding-top: var(--space-lg);
    border-top: 2px dashed var(--color-border-light);
}

.checklist-summary strong {
    color: var(--season-accent, var(--color-accent));
    font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
    .checklist-box { padding: var(--space-md); }
    .check-item {
        font-size: 14px;
        padding: var(--space-sm) 0;
        padding-left: var(--space-lg);
    }
    .checklist-box::before { left: 16px; }
}

/* =========================================
   [CELEBRITY] Premium Celebrity Section
   ========================================= */
.celeb-section {
    margin: var(--space-2xl) 0;
}

.celeb-section h2 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

/* ★ v7.0 Glassmorphism */
.celeb-content {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass);
}

.celeb-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.celeb-tag {
    background: var(--season-badge-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.celeb-tag:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.celeb-analysis-text {
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.celeb-analysis-text p { margin: 0; }

.celeb-search-link {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
}

.celeb-search-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--season-accent, var(--color-accent));
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    transition: var(--transition-normal);
}

.celeb-search-link a:hover {
    background: var(--season-accent-light, var(--color-accent-light));
}

@media (max-width: 768px) {
    .celeb-content { padding: var(--space-lg); }
    .celeb-tag { font-size: 13px; padding: 8px 14px; }
    .celeb-analysis-text { font-size: 14px; }
}

/* =========================================
   [FAQ] Conversational Q&A Style + Glassmorphism
   ========================================= */
.faq-section {
    margin: var(--space-2xl) 0;
}

.faq-section h2 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    letter-spacing: -0.02em;
}

/* ★ v7.0 Glassmorphism */
.faq-container {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-glass);
}

.faq-item {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.faq-question {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: 17px;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.faq-question::before {
    content: 'Q.';
    color: var(--season-accent, var(--color-accent));
    font-weight: var(--font-weight-extrabold);
    flex-shrink: 0;
    font-size: 18px;
}

.faq-answer {
    color: var(--color-text-secondary);
    line-height: 1.85;
    padding-left: 32px;
    font-size: 15px;
    position: relative;
}

.faq-answer::before {
    content: 'A.';
    color: #3B82F6;
    font-weight: var(--font-weight-bold);
    position: absolute;
    left: 0;
    font-size: 16px;
}

@media (max-width: 768px) {
    .faq-container { padding: var(--space-lg); }
    .faq-question { font-size: 16px; }
    .faq-answer { font-size: 14px; padding-left: 28px; }
}

/* =========================================
   [ATTRIBUTION] Source & Credits Section
   ========================================= */
.attribution-section {
    margin: var(--space-2xl) 0;
}

.sources-box {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
}

.expert-sources {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.expert-sources h3,
.haircon-role h3 {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.source-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-list li {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.source-list a {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: #1976d2;
    transition: var(--transition-fast);
}

.source-list a:hover {
    text-decoration: underline;
}

.source-credentials {
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.haircon-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.haircon-name {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.role-description {
    font-size: 14px;
    color: var(--color-text-tertiary);
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   [DISCLAIMER] Content Disclaimer
   ========================================= */
.content-disclaimer {
    margin: var(--space-lg) 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-border-default);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: var(--color-text-tertiary);
    line-height: 1.8;
}

/* =========================================
   [RELATED TYPES] Internal Linking
   ========================================= */
.related-types-section {
    margin: var(--space-2xl) 0;
}

.related-types-section h2 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

.related-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

@media (max-width: 768px) {
    .related-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ★ v8.0 관련 타입 카드 - 클릭 유도성 강화 */
.related-type-card {
    cursor: pointer; /* ★ 클릭 가능함을 명시 */
    background: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid transparent; /* ★ 호버 시 색상을 넣기 위해 투명 테두리 선언 */
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ★ v8.0 Hover 시 "눌러보고 싶게" 만들기 */
.related-type-card:hover {
    border-color: var(--season-accent, var(--color-accent)); /* ★ 테마 컬러로 테두리 활성화 */
    background: linear-gradient(to bottom right, #ffffff, var(--color-bg-tertiary)); /* ★ 미세한 그라데이션 */
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* ★ 그림자 깊이감 증가 */
}

/* ★ v8.0 Active 시 눌림 효과 */
.related-type-card:active {
    transform: translateY(-2px) scale(0.98);
}

.related-type-color {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    box-shadow: var(--shadow-md);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.related-type-name {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.related-type-season {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Season Indicator Colors */
.season-spring { border-left: 4px solid #FB7185; }
.season-summer { border-left: 4px solid #818CF8; }
.season-autumn { border-left: 4px solid #F59E0B; }
.season-winter { border-left: 4px solid #3B82F6; }

/* =========================================
   [STATS] Bayesian Statistics Section
   ========================================= */
.stats-section {
    margin: var(--space-2xl) 0;
}

.stats-container {
    background: var(--season-badge-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    color: white;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.stats-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.stats-title {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    opacity: 0.9;
    margin-bottom: var(--space-sm);
    position: relative;
}

.stats-value {
    font-size: 56px;
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.stats-description {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.6;
    position: relative;
}

@media (max-width: 768px) {
    .stats-value { font-size: 42px; }
}

/* ★ v8.1 Fix: 신뢰도 카드 돌출 버그 수정 (Legacy 인라인 스타일 오버라이드) */
/* 통계 섹션 내부 그리드 - 노란 테두리 박스 안에 안착 */
.pc-section[style*="linear-gradient(135deg, #fffbeb"] > div[style*="background: white"] > div[style*="display: grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 그리드 내부 카드들 - 너비 강제 조정 */
.pc-section[style*="linear-gradient(135deg, #fffbeb"] > div[style*="background: white"] > div[style*="display: grid"] > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

/* 모바일에서 세로 배치 */
@media (max-width: 400px) {
    .pc-section[style*="linear-gradient(135deg, #fffbeb"] > div[style*="background: white"] > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   [PRODUCTS] Magazine-Style Product Grid
   ========================================= */
.monetization-section {
    margin: var(--space-2xl) 0;
}

.monetization-section .section-header {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    letter-spacing: -0.02em;
}

.monetization-section .section-subtext {
    color: var(--color-text-tertiary);
    font-size: 15px;
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (min-width: 769px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }
}

/* ★ v7.0 Magazine-Like Product Card + Glassmorphism */
.product-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-slow);
    position: relative;
    box-shadow: var(--shadow-glass);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--season-badge-bg, linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%));
    opacity: 0;
    transition: var(--transition-normal);
}

.product-card:hover {
    border-color: var(--season-accent, var(--color-accent));
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
}

.product-card:hover::before {
    opacity: 1;
}

/* ★ v8.0 상품 이미지 '액자 효과' - 제품이 잘리지 않고 여백 있게 */
.prod-img-box {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #ffffff; /* ★ 순백색 배경으로 제품과 경계 명확화 */
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 20px; /* ★ 제품 주변에 숨쉴 공간 확보 (중요!) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ★ 제품이 잘리지 않고 온전히 보이게 */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05)); /* ★ 제품 자체에 은은한 그림자 */
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* ★ 쫀득한 모션 */
}

/* ★ Hover 시 제품이 튀어오르는 느낌 */
.product-card:hover .prod-img-box img {
    transform: scale(1.1) translateY(-5px);
}

.prod-cat-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
}

.prod-info {
    padding: var(--space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prod-brand {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prod-name {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0 0 var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ★ v8.1.2 [CRITICAL FIX] 형광펜 글자 길이에 딱 맞게 - flex stretch 문제 해결 */
.prod-reason {
    /* 1. ★★★ 핵심: flex item이 부모 너비를 stretch하지 않게 */
    width: fit-content;
    align-self: flex-start;

    /* 2. 줄바꿈 시, 형광펜도 글자 따라 끊어지게 처리 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    /* 3. 색칠 범위: 투명 70% + 색상 30% (얇고 세련된 밑줄) */
    background: linear-gradient(to top, var(--season-accent-light, #dbeafe) 30%, transparent 30%);

    /* 4. 디테일 조정 */
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    padding: 0 2px;
    margin: 0 0 12px 0;
}

/* ★ v8.0 형광펜 효과가 적용된 텍스트 */
.prod-reason-highlight {
    background: linear-gradient(to top, var(--season-accent-light, rgba(233, 30, 99, 0.18)) 40%, transparent 40%);
    padding: 0 2px;
}

.prod-reason.marketing-copy {
    font-size: 12px;
    /* ★ 형광펜 밑줄 스타일 */
    background: linear-gradient(to top, var(--season-accent-light, rgba(233, 30, 99, 0.22)) 40%, transparent 40%);
    padding: 2px 4px;
    border-radius: 0;
    margin: var(--space-sm) 0 var(--space-md);
    line-height: 1.8;
    color: var(--color-text-secondary);
    display: inline;
}

/* ★ v7.0 Magazine-Like - Apple 스타일 블랙 버튼 */
.prod-btn {
    width: 100%;
    background: var(--color-text-primary); /* ★ 블랙 버튼 */
    color: white;
    border: none;
    padding: 14px var(--space-md);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: 48px; /* Touch Target */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    letter-spacing: 0.5px; /* ★ 자간 추가 */
}

.prod-btn:hover {
    background: #333;
    transform: scale(1.02);
}

/* ★ v7.0 Micro-Interactions - 버튼 눌림 깊이감 */
.prod-btn:active {
    transform: scale(0.98);
    background: #000;
}

.affiliate-disclaimer {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

/* ★ v7.0 Mobile Thumb Zone */
@media (max-width: 768px) {
    .monetization-section .section-header { font-size: 20px; }
    .product-grid { gap: var(--space-md); }
    .prod-name { font-size: 13px; }
    .prod-btn {
        padding: 12px var(--space-md);
        font-size: 13px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    /* ★ 상품 그리드 간격 좁힘 -> 이미지 더 크게 */
    .product-grid {
        gap: 10px;
        margin: 0 -6px; /* 컨테이너 패딩 상쇄 */
    }

    .prod-info {
        padding: var(--space-sm) var(--space-sm) var(--space-md);
    }

    .prod-reason {
        font-size: 12px;
    }
}

/* =========================================
   [CTA] Call to Action Section
   ========================================= */
.cta-section {
    margin: var(--space-2xl) 0;
    text-align: center;
    padding: var(--space-2xl);
    background: var(--season-gradient, linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%));
    border-radius: var(--radius-xl);
}

.cta-section h2 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

.cta-section h2::before {
    display: none;
}

.cta-section p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    font-size: 16px;
}

/* ★ v7.0 Micro-Interactions - CTA 버튼 */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--season-badge-bg, linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%));
    color: white;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
    min-height: 52px;
}

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

/* ★ v7.0 Micro-Interactions - 버튼 눌림 */
.cta-button:active {
    transform: translateY(0) scale(0.98);
}

/* =========================================
   [ACTION BUTTONS] Share & Navigation
   ========================================= */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-xl) 0;
}

.action-buttons a,
.action-buttons button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    min-height: 44px; /* Touch Target */
    border: 1px solid var(--color-border-default);
    background: white;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.action-buttons a:hover,
.action-buttons button:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
    transform: translateY(-2px);
}

/* ★ v7.0 Micro-Interactions */
.action-buttons a:active,
.action-buttons button:active {
    transform: translateY(0) scale(0.98);
}

/* =========================================
   [UTILITIES] Keyword Tags & Links
   ========================================= */
.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.keyword-tag {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.keyword-tag:hover {
    background: var(--color-border-light);
}

.keyword-tag.high-volume {
    background: #fef3c7;
    color: #92400e;
}

.keyword-tag.related {
    background: #e0e7ff;
    color: #3730a3;
}

/* 문맥형 링크 */
.in-text-link {
    color: var(--season-accent, var(--color-accent));
    text-decoration: underline;
    text-decoration-color: rgba(233, 30, 99, 0.3);
    text-underline-offset: 3px;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.in-text-link:hover {
    text-decoration-color: var(--season-accent, var(--color-accent));
    background: var(--season-accent-light, var(--color-accent-light));
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
}

/* =========================================
   [ANIMATIONS] Subtle Motion Design
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pc-section {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ★ v7.0 컬러칩 빛 반사 애니메이션 */
@keyframes shine {
    0% { left: -75%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* Reduced Motion 지원 */
@media (prefers-reduced-motion: reduce) {
    .hero-emoji { animation: none; }
    .pc-section { animation: none; }
    .palette-color::before { display: none; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =========================================
   [V3.0] 비주얼 업그레이드 - Hero Background Image
   ========================================= */

/* Hero Section with Background Image */
.pc-hero.hero-bg-image {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero Content Wrapper */
.pc-hero.hero-bg-image .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-xl);
}

/* Clear Winter Hero Background - 투명도 조절로 배경 질감 살림 */
.pc-hero.hero-clear-winter {
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.85) 100%),
        url('/static/images/personalcolor/hero-bg-clear-winter.webp');
}

/* =========================================
   [DEEP WINTER SPECIAL] Dark Mode Hero
   ========================================= */

/* Deep Winter Hero - 어두운 배경 + 어두운 오버레이 */
.pc-hero.hero-deep-winter {
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%),
        url('/static/images/personalcolor/hero-bg-deep-winter.webp');
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    border-bottom: none;
}

/* Deep Winter 텍스트 강제 화이트 처리 */
.pc-hero.hero-deep-winter .hero-title,
.pc-hero.hero-deep-winter .hero-subtitle,
.pc-hero.hero-deep-winter .hero-description {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Deep Winter 배지 스타일 - 반투명 블랙 */
.pc-hero.hero-deep-winter .char-badge {
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Deep Winter 이모지 화이트 그림자 */
.pc-hero.hero-deep-winter .hero-emoji {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* 텍스트 가독성 향상 (밝은 배경용 - Clear Winter 등) */
.pc-hero.hero-bg-image .hero-title,
.pc-hero.hero-bg-image .hero-subtitle,
.pc-hero.hero-bg-image .hero-description {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* Deep Winter는 다크 텍스트 쉐도우로 오버라이드 */
.pc-hero.hero-deep-winter .hero-title,
.pc-hero.hero-deep-winter .hero-subtitle,
.pc-hero.hero-deep-winter .hero-description {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* =========================================
   [COOL WINTER SPECIAL] Icy Mode Hero
   ========================================= */

/* Cool Winter Hero - 아이시 배경 + 밝은 블루 틴트 오버레이 */
.pc-hero.type-cool-winter {
    background-image:
        linear-gradient(to bottom, rgba(240, 248, 255, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-cool-winter.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: #1a1a2e;
    border-bottom: 1px solid rgba(65, 105, 225, 0.2);
}

/* Cool Winter 텍스트 스타일 - 다크 블루 */
.pc-hero.type-cool-winter .hero-title,
.pc-hero.type-cool-winter .hero-subtitle,
.pc-hero.type-cool-winter .hero-description {
    color: #1a1a2e !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

/* Cool Winter 배지 스타일 - 아이스 블루 */
.pc-hero.type-cool-winter .char-badge {
    background: rgba(65, 105, 225, 0.15);
    color: #1a1a2e;
    border: 1px solid rgba(65, 105, 225, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Cool Winter 이모지 스타일 */
.pc-hero.type-cool-winter .hero-emoji {
    text-shadow: 0 0 15px rgba(65, 105, 225, 0.4);
}

/* =========================================
   [BRIGHT WINTER SPECIAL] Vivid Neon Mode
   ========================================= */

/* 1. Hero 배경 이미지 & 오버레이 */
.pc-hero.type-bright-winter {
    background-image:
        /* 배경의 네온 컬러가 은은하게 비치도록 투명도 조절 */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-bright-winter.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* 텍스트 가독성을 위해 진한 색상 유지 */
    color: #1a1a2e;
    border-bottom: 2px solid #FF1493; /* 하단에 핫핑크 포인트 라인 */
}

/* Bright Winter 텍스트 스타일 */
.pc-hero.type-bright-winter .hero-title,
.pc-hero.type-bright-winter .hero-subtitle,
.pc-hero.type-bright-winter .hero-description {
    color: #1a1a2e !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 2. 브라이트 윈터 전용 배지 스타일 (Hot Pink Border) */
.pc-hero.type-bright-winter .char-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #C2185B; /* Deep Pink Text */
    border: 1px solid #FF69B4; /* Hot Pink Border */
    box-shadow: 0 2px 8px rgba(255, 20, 147, 0.15); /* Pink Glow */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Bright Winter 이모지 스타일 */
.pc-hero.type-bright-winter .hero-emoji {
    text-shadow: 0 0 15px rgba(255, 20, 147, 0.4);
}

/* =========================================
   [CLEAR AUTUMN SPECIAL] Warm Glow Mode
   ========================================= */

/* 1. Hero 배경 이미지 & 웜톤 오버레이 */
.pc-hero.type-clear-autumn {
    background-image:
        /* 아주 연한 살구색/크림색 오버레이로 따뜻함 유지 */
        linear-gradient(to bottom, rgba(255, 250, 240, 0.7) 0%, rgba(255, 250, 240, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-clear-autumn.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* 텍스트 가독성 */
    color: #5D4037; /* 다크 브라운 텍스트로 부드럽게 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #E97451; /* 테라코타 포인트 라인 */
}

/* 2. Hero 텍스트 컬러 오버라이드 (브라운 계열) */
.pc-hero.type-clear-autumn .hero-title {
    color: #3E2723 !important;
}
.pc-hero.type-clear-autumn .hero-subtitle,
.pc-hero.type-clear-autumn .hero-description {
    color: #5D4037 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 3. 클리어 오텀 전용 배지 스타일 (Warm Orange) */
.pc-hero.type-clear-autumn .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #D84315; /* Deep Orange Text */
    border: 1px solid #FFAB91; /* Light Orange Border */
    box-shadow: 0 2px 6px rgba(233, 116, 81, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Clear Autumn 이모지 스타일 */
.pc-hero.type-clear-autumn .hero-emoji {
    text-shadow: 0 0 15px rgba(233, 116, 81, 0.4); /* Warm glow */
}

/* =========================================
   [DEEP AUTUMN SPECIAL] Luxury Dark Mode
   딥 오텀 - 깊고 풍부한 가을의 고급스러움
   ========================================= */
.pc-hero.type-deep-autumn {
    background:
        linear-gradient(to bottom, rgba(62, 39, 35, 0.4) 0%, rgba(62, 39, 35, 0.85) 100%),
        url('/static/images/personalcolor/hero-bg-deep-autumn.webp') center center / cover no-repeat !important;
    color: #FFF8E1; /* Warm White */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border-bottom: none;
}

/* Deep Autumn 텍스트 스타일 - 밝은 색상 */
.pc-hero.type-deep-autumn .hero-title,
.pc-hero.type-deep-autumn .hero-subtitle,
.pc-hero.type-deep-autumn .hero-description {
    color: #FFFFFF !important;
}

/* Deep Autumn 배지 스타일 - 글래스모피즘 다크 */
.pc-hero.type-deep-autumn .char-badge {
    background: rgba(0, 0, 0, 0.5);
    color: #FFECB3; /* Amber Light */
    border: 1px solid #8D6E63; /* Brown Border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Deep Autumn 이모지 스타일 */
.pc-hero.type-deep-autumn .hero-emoji {
    text-shadow: 0 0 15px rgba(139, 69, 19, 0.6); /* Saddle Brown glow */
}

/* =========================================
   [WARM AUTUMN SPECIAL] Cozy Gold Mode
   ========================================= */

/* 1. Hero 배경 이미지 & 크림 골드 오버레이 */
.pc-hero.type-warm-autumn {
    background:
        linear-gradient(to bottom, rgba(255, 248, 225, 0.6) 0%, rgba(255, 248, 225, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-warm-autumn.webp') center center / cover no-repeat !important;
    color: #4E342E;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid #D2691E;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Deep Coffee) */
.pc-hero.type-warm-autumn .hero-title {
    color: #3E2723 !important;
}

.pc-hero.type-warm-autumn .hero-subtitle {
    color: #5D4037 !important;
}

.pc-hero.type-warm-autumn .hero-description {
    color: #4E342E !important;
}

/* 3. 웜 오텀 전용 배지 스타일 (Gold/Rust) */
.pc-hero.type-warm-autumn .char-badge {
    background: rgba(255, 255, 255, 0.8);
    color: #BF360C;
    border: 1px solid #FFCCBC;
    box-shadow: 0 2px 6px rgba(191, 54, 12, 0.1);
}

/* 4. 웜 오텀 이모지 스타일 */
.pc-hero.type-warm-autumn .hero-emoji {
    text-shadow: 0 0 15px rgba(205, 133, 63, 0.6);
}

/* =========================================
   [MUTED AUTUMN SPECIAL] Dusty Mood Mode
   차분하고 은은한 안개 낀 가을 숲 분위기
   ========================================= */

/* 1. Hero 배경 이미지 & 미스티 오버레이 */
.pc-hero.type-muted-autumn {
    background:
        linear-gradient(to bottom, rgba(245, 245, 240, 0.6) 0%, rgba(240, 238, 230, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-muted-autumn.webp') center center / cover no-repeat !important;
    color: #5D5650;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid #A67C52;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Soft Charcoal) */
.pc-hero.type-muted-autumn .hero-title {
    color: #4A4238 !important;
}

.pc-hero.type-muted-autumn .hero-subtitle {
    color: #6D635B !important;
}

.pc-hero.type-muted-autumn .hero-description {
    color: #5D5650 !important;
}

/* 3. 뮤트 오텀 전용 배지 스타일 (Olive/Khaki) */
.pc-hero.type-muted-autumn .char-badge {
    background: rgba(255, 255, 255, 0.7);
    color: #556B2F;
    border: 1px solid #BDB76B;
    box-shadow: 0 2px 4px rgba(85, 107, 47, 0.1);
}

/* 4. 뮤트 오텀 이모지 스타일 */
.pc-hero.type-muted-autumn .hero-emoji {
    text-shadow: 0 0 15px rgba(166, 124, 82, 0.5);
}

/* =========================================
   [V3.0] 비주얼 업그레이드 - Celeb Visual Section
   ========================================= */

/* Celeb Content Layout */
.celeb-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
}

/* AI Model Visual Container */
.celeb-visual {
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    position: relative;
}

.celeb-visual img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.celeb-visual:hover img {
    transform: scale(1.03);
}

/* Visual Caption Overlay */
.visual-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Celeb Info Section */
.celeb-info {
    width: 100%;
    text-align: center;
}

/* Desktop Layout */
@media (min-width: 768px) {
    .celeb-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .celeb-visual {
        flex: 0 0 auto;
        max-width: 320px;
    }

    .celeb-info {
        flex: 1;
        text-align: left;
        padding-left: var(--space-lg);
    }
}

/* =========================================
   [V3.0] 비주얼 업그레이드 - Palette Download Card
   ========================================= */

/* Download Card Container */
.palette-download-card {
    margin-top: var(--space-2xl);
    text-align: center;
    background: var(--color-bg-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-default);
    transition: var(--transition-normal);
}

.palette-download-card:hover {
    border-color: var(--season-accent, var(--color-accent));
    background: var(--color-bg-primary);
}

/* Download Guide Text */
.download-guide {
    font-size: 14px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

/* Palette Card Image */
.palette-download-card img {
    max-width: 280px;
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    margin: 0 auto var(--space-lg);
    display: block;
    transition: transform 0.3s ease;
}

.palette-download-card:hover img {
    transform: translateY(-4px);
}

/* Download Button */
.download-btn {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--season-accent, #E91E63) 0%, var(--season-accent-dark, #C2185B) 100%);
    color: white;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.download-btn:active {
    transform: translateY(0);
}

/* Palette Download Button (card 내부 버튼) */
.palette-download-btn {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--season-accent, #8B4513) 0%, var(--season-accent-dark, #5D4037) 100%);
    color: white;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    margin-top: var(--space-md);
}

.palette-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: white;
}

.palette-download-btn:active {
    transform: translateY(0);
}

/* =========================================
   [CLEAR SUMMER SPECIAL] Refreshing Aqua Mode
   클리어 섬머 - 맑고 투명한 청량함
   ========================================= */

/* 1. Hero 배경 이미지 & 스카이 블루/화이트 오버레이 */
.pc-hero.type-clear-summer {
    background:
        linear-gradient(to bottom, rgba(240, 248, 255, 0.65) 0%, rgba(240, 248, 255, 0.92) 100%),
        url('/static/images/personalcolor/hero-bg-clear-summer.webp') center center / cover no-repeat !important;
    color: #37474F; /* Cool Grey Text */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid #87CEEB; /* Sky Blue Border */
}

/* 2. Hero 텍스트 컬러 오버라이드 (Cool Grey) */
.pc-hero.type-clear-summer .hero-content .hero-title {
    color: #1A237E !important; /* Deep Indigo */
}

.pc-hero.type-clear-summer .hero-content .hero-subtitle,
.pc-hero.type-clear-summer .hero-content .hero-description {
    color: #37474F !important; /* Blue Grey */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 3. 클리어 섬머 전용 배지 스타일 (Aqua Blue) */
.pc-hero.type-clear-summer .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #0288D1; /* Light Blue Text */
    border: 1px solid #B3E5FC; /* Light Blue Border */
    box-shadow: 0 2px 6px rgba(135, 206, 235, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 4. Clear Summer 이모지 스타일 */
.pc-hero.type-clear-summer .hero-content .hero-emoji {
    text-shadow: 0 0 20px rgba(135, 206, 235, 0.5); /* Sky Blue Glow */
}

/* 5. Clear Summer Palette Download Card */
.palette-download-card.type-clear-summer {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.95) 0%, rgba(227, 242, 253, 0.95) 100%);
    border: 1px solid #B3E5FC;
}

.palette-download-card.type-clear-summer .download-btn {
    background: linear-gradient(135deg, #4FC3F7 0%, #0288D1 100%);
}

.palette-download-card.type-clear-summer .download-btn:hover {
    background: linear-gradient(135deg, #29B6F6 0%, #0277BD 100%);
}

/* =========================================
   [COOL SUMMER SPECIAL] Refreshing Aqua Mode
   쿨 섬머: 시원하고 청아한 블루 베이스
   ========================================= */

/* 1. Hero 배경 이미지 & 쿨 화이트 오버레이 */
.pc-hero.type-cool-summer {
    background:
        linear-gradient(to bottom, rgba(240, 248, 255, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-cool-summer.webp') center center / cover no-repeat !important;
    color: #4A5568;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #6A8EAE;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Cool Grey/Navy) */
.pc-hero.type-cool-summer .hero-content .hero-title {
    color: #2D3748 !important;
}

.pc-hero.type-cool-summer .hero-content .hero-subtitle {
    color: #4A5568 !important;
}

/* 3. 쿨 섬머 전용 배지 스타일 (Sky Blue) */
.pc-hero.type-cool-summer .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #0277BD;
    border: 1px solid #B3E5FC;
    box-shadow: 0 2px 6px rgba(3, 169, 244, 0.15);
}

/* 4. 다운로드 버튼 (쿨 블루 그라데이션) */
.palette-download-card.type-cool-summer .download-btn {
    background: linear-gradient(135deg, #6A8EAE 0%, #4A7C9B 100%);
}

.palette-download-card.type-cool-summer .download-btn:hover {
    background: linear-gradient(135deg, #7FB3D5 0%, #6A8EAE 100%);
    box-shadow: 0 4px 12px rgba(106, 142, 174, 0.3);
}

/* =========================================
   [MUTED SUMMER SPECIAL] Dusty Lavender Mode
   뮤트 섬머: 더스티하고 세련된 라벤더 베이스
   ========================================= */

/* 1. Hero 배경 이미지 & 뮤트 그레이 오버레이 */
.pc-hero.type-muted-summer {
    background:
        linear-gradient(to bottom, rgba(240, 238, 245, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-muted-summer.webp') center center / cover no-repeat !important;
    color: #5A5669;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #B0A8B9;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Dusty Purple/Grey) */
.pc-hero.type-muted-summer .hero-content .hero-title {
    color: #4A4458 !important;
}

.pc-hero.type-muted-summer .hero-content .hero-subtitle {
    color: #5A5669 !important;
}

/* 3. 뮤트 섬머 전용 배지 스타일 (Lavender Grey) */
.pc-hero.type-muted-summer .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #7D6E8A;
    border: 1px solid #D4C5D0;
    box-shadow: 0 2px 6px rgba(176, 168, 185, 0.2);
}

/* 4. 다운로드 버튼 (뮤트 라벤더 그라데이션) */
.palette-download-card.type-muted-summer .download-btn {
    background: linear-gradient(135deg, #B0A8B9 0%, #8D7C98 100%);
}

.palette-download-card.type-muted-summer .download-btn:hover {
    background: linear-gradient(135deg, #C1BBD2 0%, #B0A8B9 100%);
    box-shadow: 0 4px 12px rgba(176, 168, 185, 0.3);
}

/* =========================================
   [LIGHT SUMMER SPECIAL] Milky Pastel Mode
   라이트 섬머: 뽀얀 우유빛 파스텔 베이스
   ========================================= */

/* 1. Hero 배경 이미지 & 밀키 화이트 오버레이 */
.pc-hero.type-light-summer {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-light-summer.webp') center center / cover no-repeat !important;
    color: #555555;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #D8BFD8;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Soft Grey) */
.pc-hero.type-light-summer .hero-content .hero-title {
    color: #444444 !important;
}

.pc-hero.type-light-summer .hero-content .hero-subtitle {
    color: #666666 !important;
}

/* 3. 라이트 섬머 전용 배지 스타일 (Lavender/Pastel) */
.pc-hero.type-light-summer .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #9C27B0;
    border: 1px solid #E1BEE7;
    box-shadow: 0 2px 6px rgba(225, 190, 231, 0.3);
}

/* 4. 다운로드 버튼 (라벤더 파스텔 그라데이션) */
.palette-download-card.type-light-summer .download-btn {
    background: linear-gradient(135deg, #E6E6FA 0%, #D8BFD8 100%);
    color: #555555;
}

.palette-download-card.type-light-summer .download-btn:hover {
    background: linear-gradient(135deg, #D8BFD8 0%, #C8A8C8 100%);
    box-shadow: 0 4px 12px rgba(216, 191, 216, 0.4);
}

/* =========================================
   [CLEAR SPRING SPECIAL] Aqua Luminous Mode
   클리어 스프링: 투명한 아쿠아 & 생기 있는 라임
   ========================================= */

/* 1. Hero 배경 이미지 & 맑은 오버레이 */
.pc-hero.type-clear-spring {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%),
        url('/static/images/personalcolor/hero-bg-clear-spring.webp') center center / cover no-repeat !important;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #4DD9FF;
}

/* 2. Hero 텍스트 컬러 오버라이드 */
.pc-hero.type-clear-spring .hero-content .hero-title {
    color: #222222 !important;
}

.pc-hero.type-clear-spring .hero-content .hero-subtitle {
    color: #555555 !important;
}

/* 3. 클리어 스프링 전용 배지 스타일 (Aqua/Lime) */
.pc-hero.type-clear-spring .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #0097A7;
    border: 1px solid #4DD9FF;
    box-shadow: 0 2px 6px rgba(77, 217, 255, 0.2);
}

/* 4. 다운로드 버튼 (아쿠아 그라데이션) */
.palette-download-card .download-btn:hover {
    background: #4DD9FF;
    color: white;
    box-shadow: 0 4px 12px rgba(77, 217, 255, 0.4);
}

/* =========================================
   [WARM SPRING SPECIAL] Golden Glow Mode
   웜 스프링: 따뜻한 골드 빔 & 생기 있는 코랄 오렌지
   ========================================= */

/* 1. Hero 배경 이미지 & 웜 틴트 오버레이 */
.pc-hero.type-warm-spring {
    background:
        linear-gradient(to bottom, rgba(255, 250, 240, 0.6) 0%, rgba(255, 253, 230, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-warm-spring.webp') center center / cover no-repeat !important;
    color: #4E342E;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #FF9A56;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Warm Coffee) */
.pc-hero.type-warm-spring .hero-content .hero-title {
    color: #3E2723 !important;
}

.pc-hero.type-warm-spring .hero-content .hero-subtitle {
    color: #5D4037 !important;
}

/* 3. 웜 스프링 전용 배지 스타일 (Orange/Gold) */
.pc-hero.type-warm-spring .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #E65100;
    border: 1px solid #FFCC80;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2);
}

/* 4. 다운로드 버튼 (라이트 오렌지) */
.palette-download-card.type-warm-spring .download-btn:hover {
    background: #FF9A56;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 154, 86, 0.4);
}

/* =========================================
   [BRIGHT SPRING SPECIAL] Vivid Pop Mode
   ========================================= */

/* 1. Hero 배경 이미지 & 화이트 틴트 오버레이 */
.pc-hero.type-bright-spring {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%),
        url('/static/images/personalcolor/hero-bg-bright-spring.webp') center center / cover no-repeat !important;
    color: #111111;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #FF6B9D;
}

/* 2. Hero 텍스트 컬러 오버라이드 (Deep Charcoal) */
.pc-hero.type-bright-spring .hero-content .hero-title { color: #000000 !important; }
.pc-hero.type-bright-spring .hero-content .hero-subtitle { color: #333333 !important; }

/* 3. 브라이트 스프링 전용 배지 스타일 (Hot Pink/Coral) */
.pc-hero.type-bright-spring .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #D81B60;
    border: 1px solid #FF4081;
    box-shadow: 0 2px 6px rgba(255, 64, 129, 0.2);
}

/* 4. 다운로드 버튼 포인트 컬러 (Hover) */
.palette-download-card.type-bright-spring .download-btn:hover {
    background: #FF6B9D;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

/* =========================================
   [LIGHT SPRING SPECIAL] Milky Pastel Mode
   ========================================= */

/* 1. Hero 배경 이미지 & 뽀얀 오버레이 */
.pc-hero.type-light-spring {
    background:
        /* 화사함을 극대화하는 밀키 화이트/피치 틴트 오버레이 */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%),
        url('/static/images/personalcolor/hero-bg-light-spring.webp') center center / cover no-repeat !important;
    /* 텍스트 가독성: 부드러운 웜 그레이/브라운 */
    color: #5D4037;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid #FFC8DD; /* 베이비 핑크 포인트 라인 */
}

/* 2. Hero 텍스트 컬러 오버라이드 (Warm Grey) */
.pc-hero.type-light-spring .hero-content .hero-title { color: #4E342E !important; }
.pc-hero.type-light-spring .hero-content .hero-subtitle { color: #6D4C41 !important; }

/* 3. 라이트 스프링 전용 배지 스타일 (Peach/Pink) */
.pc-hero.type-light-spring .hero-content .char-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #FF7043; /* Soft Orange Text */
    border: 1px solid #FFCCBC; /* Peach Border */
    box-shadow: 0 2px 6px rgba(255, 171, 145, 0.2);
}

/* 4. 다운로드 버튼 포인트 컬러 (Hover) */
.palette-download-card.type-light-spring .download-btn:hover {
    background: #FFB7C5; /* 벚꽃 핑크 */
    color: #4E342E; /* 밝은 배경이므로 글자는 짙게 */
    box-shadow: 0 4px 12px rgba(255, 183, 197, 0.4);
}

/* =========================================
   [PRINT] Print Styles (SEO)
   ========================================= */
@media print {
    .pc-container {
        box-shadow: none;
        max-width: 100%;
    }

    .action-buttons,
    .cta-button,
    .prod-btn {
        display: none;
    }

    .product-card {
        break-inside: avoid;
    }
}