/* Korean Traditional Theme Styles */

/* =====================================
   Shamanic Theme Extensions (전통 샤머니즘 무드)
   ===================================== */

:root {
    --shaman-900: #0b0a0f;
    --shaman-800: #12111a;
    --shaman-700: #1b1a24;
    --gilded-gold: #C6A66B;
    --hanbok-gold: #B8860B; /* fallback reference */
    --hanji-ink: rgba(255, 255, 255, 0.06);
}

/* Ensure root background matches theme to avoid white flash at page edges */
html,
body {
    background-color: var(--shaman-900);
    min-height: 100%;
}

/* Site background: deep obsidian with subtle fiber texture */
body.theme-shaman {
    /* Base color to avoid showing white when gradients have transparency */
    background-color: var(--shaman-900);
    background: radial-gradient(1200px 500px at 50% -10%, rgba(198,166,107,0.12), transparent 60%),
                radial-gradient(1000px 600px at 80% 10%, rgba(215,53,39,0.07), transparent 70%),
                linear-gradient(180deg, var(--shaman-900), var(--shaman-800));
    color: rgba(255,255,255,0.92);
    position: relative;
    overscroll-behavior: none; /* prevent iOS/Android bounce from exposing white */
}

/* Hanji fiber overlay */
body.theme-shaman::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(145deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(25deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 10px);
    mix-blend-mode: overlay;
}

/* Navigation: obsidian + gilded border */
.nav-shaman {
    background: linear-gradient(to bottom, rgba(11,10,15,0.92), rgba(18,17,26,0.78));
    border-bottom: 1px solid rgba(184,134,11,0.35);
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

/* Hero section: altar light accent */
.hero-shaman {
    position: relative;
    background: radial-gradient(900px 420px at 50% 0%, rgba(198,166,107,0.12), transparent 60%),
                radial-gradient(700px 400px at 15% 10%, rgba(0,59,127,0.10), transparent 65%),
                radial-gradient(700px 400px at 85% 15%, rgba(215,53,39,0.10), transparent 65%);
}

.hero-shaman::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px 200px at 50% 0%, rgba(255,215,0,0.09), transparent 60%);
}

/* Paper-like translucent panels for sections */
.hanji-panel {
    background: var(--hanji-ink);
    border: 1px solid rgba(198,166,107,0.28);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

/* Brush-style display title */
.brush-title {
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(198,166,107,0.22), 0 2px 0 rgba(0,0,0,0.4);
}

/* Decorative gilded divider inspired by dancheong */
.divider-dancheong {
    height: 2px;
    width: 120px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, #D73527, #FFD700, #003B7F);
    border-radius: 999px;
}

/* Primary CTA: amulet-like glow */
.btn-amulet {
    background-image: linear-gradient(90deg, #D73527, #FFD700);
    color: #111;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(255,215,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.25);
}

.btn-amulet:hover {
    filter: brightness(1.05) saturate(1.05);
    transform: translateY(-2px) scale(1.02);
}

.btn-amulet-ghost {
    background: transparent;
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(198,166,107,0.6);
    border-radius: 999px;
}

.btn-amulet-ghost:hover {
    background: rgba(198,166,107,0.08);
    transform: translateY(-2px);
}

/* Small vertical talisman accent */
.talisman-bar {
    display: inline-block;
    width: 6px;
    height: 28px;
    background: linear-gradient(180deg, #FFD700, #B8860B);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 6px 16px rgba(255,215,0,0.25);
}

/* Floating decorative orbs */
.floating-orb {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.2) 35%, transparent 60%),
                linear-gradient(135deg, rgba(215,53,39,0.8), rgba(0,59,127,0.8));
    filter: blur(0.2px);
    opacity: 0.55;
    animation: float 6s ease-in-out infinite;
}

/* Tighten base copy color in dark theme */
body.theme-shaman p,
body.theme-shaman li {
    color: rgba(235,235,235,0.9);
}

/* Story section readability (김포점집이야기) */
#a06 .prose {
    font-size: 1.0625rem; /* ~17px */
    line-height: 1.85;
    letter-spacing: 0.02em;
    word-break: keep-all;
}

@media (min-width: 768px) {
    #a06 .prose { font-size: 1.125rem; }
}

/* Normalize paragraph spacing to avoid excessive gaps */
#a06 .prose p.mb-6 { margin-bottom: 1.1rem; }

/* Dialogue emphasis: quoted callouts */
/* Unified dialogue styling */
#a06 .dialogue-box {
    position: relative;
    background: rgba(255,255,255,0.06);
    border-left: 4px solid var(--hanbok-gold);
    border-radius: 14px;
    padding: 1.25rem;
}

@media (min-width: 768px) {
    #a06 .dialogue-box { padding: 1.5rem; }
}

#a06 .dialogue-quote {
    padding-left: 2.25rem;
}

#a06 .dialogue-quote::before {
    content: "“"; /* opening quote */
    position: absolute;
    left: 0.75rem;
    top: 0.55rem;
    font-size: 2rem;
    line-height: 1;
    color: rgba(255,255,255,0.65);
}

#a06 .dialogue-quote p { font-style: italic; }

/* Inline dialogue line (within paragraph) */
#a06 .dialogue-line {
    position: relative;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--hanbok-gold);
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

/* Traditional shadow effect */
.traditional-shadow {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Text gradient effect */
.text-gradient {
    background: linear-gradient(45deg, #D73527, #FFD700, #003B7F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover animations */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Traditional Korean pattern background */
.pattern-bg {
    background-image: 
        radial-gradient(circle at 25% 25%, #FFD700 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, #D73527 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* YouTube embed responsive container */
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    margin-bottom: 2rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #D73527, #FFD700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #8B0000, #B8860B);
}

/* Form input focus states */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

/* Button hover effects */
button {
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
}

/* Navigation sticky effects */
.nav-sticky {
    backdrop-filter: blur(10px);
    background-color: rgba(11, 10, 15, 0.92);
}

/* Section spacing utilities */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .embed-container {
        display: none;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    /* 모바일에서 그라디언트 텍스트 가독성 향상 */
    .text-gradient {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: currentColor !important;
        color: #ffffff !important;
        font-size: inherit; /* 상위 타이포 스케일 유지 */
        line-height: 1.15;
        text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
        -webkit-text-stroke: 0.4px rgba(0,0,0,0.25);
        letter-spacing: 0.02em;
    }

    .embed-container {
        margin-bottom: 1rem;
    }
    
    .traditional-shadow {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-gradient {
        background: none;
        -webkit-text-fill-color: initial;
        color: #000;
        font-weight: bold;
    }
}

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