/**
 * FoodPhoto Design Draft - style.css
 * Refactored for Professional Quality (Conversion Optimization)
 * Strict Adherence to Masterplan V1 Structure
 * Last Updated: 2026-02-08 17:15
 */

:root {
    /* Brand Colors */
    --bg-cream: #fdeec3;
    --bg-soft-peach: #FFF0E6;
    /* New Option 1 */
    --bg-white: #ffffff;
    --text-dark: #222222;
    --text-gray: #555555;
    --text-light: #888888;
    --color-accent: #FF6600;
    --color-accent-hover: #e65c00;

    /* Premium Shadows (Diffused) */
    --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 60px -12px rgba(0, 0, 0, 0.12);
    --shadow-btn: 0 4px 14px rgba(255, 102, 0, 0.35);

    /* Layout & Spacing */
    --container-width: 1140px;
    /* Slightly tighter for focus */
    --section-padding: 120px 0;
    /* Premium Whitespace */
    --radius-card: 20px;
    --radius-btn: 100px;
    /* Pill shape for modern feel */

    /* Typography */
    --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.7;
    /* Relaxed reading */
    letter-spacing: -0.01em;
    /* Tighten standard text */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

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

section {
    padding: var(--section-padding);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.03em;
    /* Tighten headlines */
    color: var(--text-dark);
}


.section-title {
    font-size: 3.2rem;
    /* Increased for impact */
    text-align: center;
    margin-bottom: 24px;
    word-break: keep-all;
}

.section-desc {
    font-size: 1.4rem;
    /* Increased for readability */
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 60px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    line-height: 1.6;
    word-break: keep-all;
}

/* Premium Typography Elements */
.text-highlight {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 18px;
    /* Highlighting height */
    background: rgba(255, 230, 100, 0.6);
    /* Soft yellow/orange highlight */
    z-index: -1;
    transform: skewX(-10deg);
}

.text-accent-bold {
    color: var(--color-accent);
    font-weight: 800;
    /* Extra bold for contrast */
}

/* Feature Keyword Highlights */
.text-cyan {
    color: #00ffff;
}

.text-orange {
    color: #ff9900;
    /* Brighter Orange for visibility */
}

/* Fade Up Animation */
.fade-up-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up-trigger.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.2s;
}

/* Premium Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: white;
    padding: 16px 42px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--shadow-btn);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffffff !important;
}

.btn-primary:hover {
    transform: translateY(-3px);
    background-color: var(--color-accent-hover);
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.45);
}

/* Navbar: Clean Fixed */
.navbar {
    padding: 12px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: var(--bg-cream);
    /* No shadow initially for clean look */
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: Add shadow on scroll via JS later if needed */

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-dark);
}

.logo img {
    width: 192px;
    /* 80% of previous 60px height (approx 240px width) -> 192px */
    height: auto;
}



.navbar nav a {
    color: var(--text-dark);
    text-decoration: none;
    margin-left: 40px;
    font-weight: 600;
    font-size: 1.3rem;
    font-size: 1.3rem;
}

.navbar nav a:not(.btn-primary) {
    position: relative;
    padding-bottom: 4px;
}

.navbar nav a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.navbar nav a:not(.btn-primary):hover::after,
.navbar nav a.active:not(.btn-primary)::after {
    width: 100%;
}

/* Hero Section */
.hero-image-section {
    width: 100%;
    margin-top: 100px;
    /* Offset for header + breathing room */
    line-height: 0;
    position: relative;
    background: var(--bg-cream);
    /* Seamless blend */
}

.hero-main-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    max-width: 1600px;
    /* Constrain max width for ultra-wide monitors */
    margin: 0 auto;
}

/* Content Section (Slider) */
.content-section {
    text-align: center;
    background: var(--bg-cream);
    padding-bottom: 160px;
    /* Extra spacing before next section */
}

/* Content Section Specific Override */
.content-section .section-desc {
    font-size: 1.4rem;
    /* Standardized */
    max-width: 800px;
    /* 글자가 커지므로 줄바꿈 방지를 위해 너비도 소폭 확대 */
    line-height: 1.4;
    /* 타이틀에 가깝게 줄간격 조정 */
    margin-left: auto;
    margin-right: auto;
}

/* --- NEW: Auto Reveal Container & Static Caption --- */
.auto-reveal-container {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 40px auto 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: #000;
}

.reveal-base-img,
.reveal-after-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 100% 0 0);
    /* Hidden via clip-path right 100% */
    transition: clip-path 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 5;
}

.auto-reveal-container.is-revealed .reveal-overlay {
    clip-path: inset(0 0 0 0);
    /* Fully revealed */
}

/* Left-to-Right Scan Line Effect */
.reveal-scan-line {
    position: absolute;
    top: 0;
    left: 0%;
    width: 3px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px var(--color-accent);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

.auto-reveal-container.is-revealed .reveal-scan-line {
    animation: scanMove 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes scanMove {
    0% {
        left: 0%;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Hints */
.reveal-hint {
    position: absolute;
    top: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 20;
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.before-hint {
    left: 20px;
}

.after-hint {
    right: 20px;
    opacity: 0;
}

.auto-reveal-container.is-revealed .after-hint {
    opacity: 1;
}

.auto-reveal-container.is-revealed .before-hint {
    opacity: 0;
}

/* Static Result Caption (Premium Style) */
.static-caption {
    margin: 30px auto 0;
    max-width: 1080px;
    text-align: left;
    padding-left: 20px;
    border-left: 4px solid var(--color-accent);
}

.step-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #44AA44;
    /* Success Green */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.scrolly-text {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.4;
    color: #222;
    word-break: keep-all;
    margin: 0;
}

.scrolly-text strong {
    color: var(--color-accent);
    background: linear-gradient(120deg, rgba(255, 102, 0, 0.2) 0%, rgba(255, 102, 0, 0) 100%);
    padding: 0 4px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .auto-reveal-container {
        aspect-ratio: 4 / 3;
        /* Better fit for mobile */
    }

    .scrolly-text {
        font-size: 1.4rem;
    }

    .reveal-hint {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Particle Animation Elements */
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px var(--color-accent);
    opacity: 0;
    animation: particleBurst 1.2s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 0;
        transform: scale(0.5) translate(0, 0);
    }

    10% {
        opacity: 1;
        transform: scale(1.5) translate(calc(-5px + 10px * var(--dx, 0)), calc(-5px + 10px * var(--dy, 0)));
    }

    100% {
        opacity: 0;
        transform: scale(0.1) translate(calc(-30px + 60px * var(--dx, 0)), calc(-30px + 60px * var(--dy, 0)));
    }
}

/* ------------------------------------------- */

/* Process Section (Redesign) */
.process-section {
    background: var(--bg-soft-peach);
    padding: 160px 0;
    /* Increase padding to accommodate waves */
    position: relative;
    /* Context for absolute waves */
    z-index: 2;
    /* Sit on top of features section */
}

/* Process Section Specific Override */
.process-section .section-desc {
    font-size: 1.75rem;
    line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
}

/* Wave Dividers */
.wave-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.wave-divider svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    /* Adjust wave height */
}

.wave-divider.top {
    top: 0;
}

.wave-divider.bottom {
    bottom: 0;
}

.wave-fill {
    fill: var(--bg-cream);
    /* Default fallback */
}

/* Process Top Wave: Blend from Cream -> Peach (inside Peach section) */
.process-section .wave-divider.top .wave-fill {
    fill: var(--bg-cream);
}

/* Process Bottom Wave: Blend from Peach -> Features (Image) */
/* This hangs OUTSIDE the section */
.process-section .wave-divider.bottom .wave-fill {
    fill: var(--bg-soft-peach);
}

/* Flip the bottom wave to curve correctly (convex) */
.process-section .wave-divider.bottom svg {
    transform: scaleY(-1);
}

.process-timeline {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Cards equal height */
    gap: 12px;
    /* Very tight spacing */
    position: relative;
    max-width: 1200px;
    /* Full width */
    margin: 60px auto 0;
}

.process-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the marker and card */
}

.step-marker {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    color: white;
    font-weight: 800;
    border-radius: 50%;
    margin-bottom: 24px;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3);
    position: relative;
    z-index: 2;
}

.step-connector {
    display: none;
    /* Hide connector lines for tight layout */
}

.process-card {
    background: white;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    height: 100%;
    /* Fill step */
    width: 100%;
    /* Ensure full width */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 102, 0, 0.15);
}

.process-icon-box {
    width: 100%;
    /* Full width */
    aspect-ratio: 1 / 1;
    /* Large square */
    margin: 0 0 24px;
    border-radius: 16px;
    /* Rounded corners instead of circle */
    overflow: hidden;
    background: #f9f9f9;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.process-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    /* Zoom effect */
}

.process-card:hover .process-img {
    transform: scale(1.1);
}

.process-title {
    font-size: 2.9rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-accent);
}

.process-sub {
    display: block;
    font-size: 1.1rem;
    /* Increased by 30% (was 0.85rem) */
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.process-desc {
    font-size: 1.5rem;
    /* Increased by 30% (was 1.15rem) */
    color: var(--text-gray);
    line-height: 1.6;
    word-break: keep-all;
}

/* Response for Process Timeline */
@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .step-connector {
        width: 2px;
        height: 40px;
        /* Vertical connector */
        margin: 0;
        max-width: none;
    }

    .process-step {
        width: 100%;
        max-width: 320px;
        padding: 0;
    }
}



/* Wave Divider Styling */
.wave-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
    /* High z-index to sit ON TOP of next section */
    pointer-events: none;
}

.wave-divider.bottom {
    bottom: -99px;
    /* Hang OUTSIDE the section to overlap next section */
}

/* Features Bottom Wave: Blend from Features (Image) -> Branding (Cream) */
/* This sits INSIDE the section at the bottom */
.features-section .wave-divider.bottom .wave-fill {
    fill: var(--bg-cream);
}

/* Features (Visual Comparison) */
/* Features (Visual Comparison - Clean Contrast) */
.features-section {
    position: relative;
    /* Dark Overlay for Text Readability */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/images/Features/backgraund_2.webp') no-repeat center center fixed;
    /* Parallax Effect */
    background-size: cover;
    padding: 200px 0;
    /* Increased spacing */
    margin-top: 0;
    /* No negative margin needed */
    z-index: 1;
    /* Lower than Process section */
    overflow: hidden;
}

/* White Overlay for Readability */
/* Overlay Removed by User Request */
.features-section::before {
    content: none;
    display: none;
}

/* Text Color Override for Dark Background */
.features-section .section-title,
.features-section .section-desc {
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
    /* Strong shadow for readability on complex background */
}

/* Increase size and weight for Features description only */
.features-section .section-desc {
    font-size: 2.2rem;
    /* Increased by another 20% (was 1.8rem) */
    font-weight: 700;
    /* Bold for contrast */
}

.features-section .container {
    position: relative;
    z-index: 2;
    /* Ensure content is above overlay */
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.feature-card {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Pain Point Card (The Old Way) */
.feature-card.pain-point {
    background: #fdfdfd;
    /* Very subtle off-white/gray */
    border: 1px solid #e0e0e0;
    box-shadow: none;
    /* Flat for "Bad" example */
}

.feature-card.pain-point .feature-img-wrapper {
    filter: grayscale(100%);
    opacity: 0.7;
    /* Faded look */
}

.pain-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 9px;
    /* Reduced spacing by 50% */
    color: #555555;
    /* Soft gray text */
    font-size: 1.35rem;
    /* Increased for readability (was 1.25rem) */
    font-weight: 500;
    /* Regular weight for calm negative */
    line-height: 1.6;
    /* Tighter line-height for larger text */
    letter-spacing: -0.01em;
}

.pain-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 2px;
    color: #ff6b6b;
    /* Soft red */
    font-weight: 700;
    font-size: 1.1rem;
}

/* Benefit Card (The New Way) */
.feature-card.benefit {
    background: white;
    border: 1px solid rgba(255, 102, 0, 0.2);
    /* Thin, elegant border */
    box-shadow: 0 20px 60px -10px rgba(255, 102, 0, 0.15);
    /* Premium diffused shadow */
    transform: scale(1.02);
    z-index: 2;
    /* Lift above pain card */
}

.feature-card.benefit:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 30px 80px -15px rgba(255, 102, 0, 0.25);
}

.benefit-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    /* Reduced spacing */
    font-size: 1.35rem;
    /* Large, clear text (was 1.15rem) */
    color: var(--text-dark);
    font-weight: 600;
    /* Semi-bold for emphasis */
    line-height: 1.6;
    /* Tighter line-height for larger text */
    letter-spacing: -0.01em;
}

.benefit-list li strong {
    color: var(--color-accent);
    font-weight: 700;
}

.benefit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-accent);
    font-weight: 800;
    font-size: 1.2rem;
}

/* Common Header */
.feature-header {
    padding: 30px 30px 20px;
    text-align: center;
}

.feature-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
}

.feature-badge.gray {
    background: #eee;
    color: #888;
}

.feature-badge.accent {
    background: var(--color-accent);
    color: white;
    font-size: 1.4rem;
    /* Additional 20% increase */
    padding: 8px 24px;
    /* Increased padding for emphasis */
}

.feature-card h3 {
    font-size: 1.6rem;
    margin: 0;
    font-weight: 800;
}

.feature-card h3.highlight {
    color: var(--color-accent);
}

/* Images */
.feature-img-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f0;
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-content {
    padding: 15px 30px 30px;
    /* Reduced top padding from 30px to 15px */
    flex-grow: 1;
}

/* Reset default list styles for custom padding and margin */
.pain-list,
.benefit-list {
    margin-top: 0;
    list-style: none;
    padding-left: 0;
}

.pain-list {
    margin-top: 20px;
    /* Added spacing to separate from image */
}

/* Trust Banner */
.trust-banner {
    background: white;
    border-radius: 20px;
    padding: 30px 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 100%;
    /* Expanded to match grid width */
    margin: 0 auto;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.trust-icon {
    font-size: 2.6rem;
    /* Increased by 30% from 2rem */
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    font-size: 1.5rem;
    /* Reduced for balance (was 1.8rem) */
    color: var(--text-dark);
    margin-bottom: 0px;
    line-height: 1.1;
}

.trust-text span {
    font-size: 1.3rem;
    /* Reduced by 20% (was 1.6rem) */
    color: var(--text-gray);
}

.trust-divider {
    width: 1px;
    height: 40px;
    background: #eee;
}

/* Responsive Features */
@media (max-width: 768px) {
    .feature-card-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .feature-card.benefit {
        transform: none;
        /* Reset distinct scale on mobile */
    }

    .trust-banner {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
        padding: 30px;
    }

    .trust-divider {
        display: none;
    }
}

/* Custom Wave Fill for Features Section (Match Branding) */
.features-section .wave-divider.bottom .wave-fill {
    fill: #ffffff;
}

/* Branding Section */
.branding-section {
    background: #ffffff;
    /* Crisp white contrast */
    padding: 140px 0;
    /* More expansive padding */
}

.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.branding-content .section-title {
    font-size: 2.8rem;
    line-height: 1.25;
}

.branding-list {
    margin-top: 40px;
}

.branding-list li {
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 3px solid var(--color-accent);
}

.branding-list strong {
    display: block;
    font-size: 1.7rem;
    /* Increased by 30% (was 1.3rem) */
    margin-bottom: 8px;
    color: var(--text-dark);
}

.branding-list p {
    color: var(--text-gray);
    font-size: 1.35rem;
    /* Increased by 30% (was 1.05rem) */
}

.branding-visual {
    position: relative;
}

.branding-mockup {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-cream);
    /* Fallback */
    border-radius: 30px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* Ensure image stays within radius */
}

.branding-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.branding-mockup:hover .branding-img {
    transform: scale(1.05);
}

/* Responsive for Branding */
@media (max-width: 960px) {
    .branding-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .branding-content {
        text-align: center;
    }

    .branding-content .section-title,
    .branding-content .section-desc {
        text-align: center !important;
    }

    .branding-list {
        text-align: left;
        display: inline-block;
    }
}

/* Gallery Section */
.gallery-section {
    padding-bottom: 0 !important;
    background: var(--bg-cream);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    /* Artistic tight spacing */
}

.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
    filter: brightness(0.95);
}

.gallery-item:hover img {
    transform: scale(1.05);
    /* Subtle smooth zoom */
    filter: brightness(1.1);
}

/* Gallery Button Container */
.gallery-btn-container {
    text-align: center;
    padding: 80px 0;
    background: #ffffff;
}

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

/* Pricing Section */
.pricing-section {
    background: var(--bg-cream);
}

.pricing-desc-highlight {
    font-size: 1.82rem;
    /* 1.4rem * 1.3 ≈ 1.82rem */
    font-weight: 700;
}

.text-orange {
    color: #ff6600;
    font-weight: 800;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: center;
    /* Center alignment for dynamic height */
    margin-top: 80px;
}

.pricing-card {
    background: white;
    padding: 60px 40px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card.recommended {
    transform: scale(1.08);
    border: 2px solid var(--color-accent);
    box-shadow: 0 30px 60px -15px rgba(255, 102, 0, 0.25);
    z-index: 10;
}

.pricing-card.recommended:hover {
    transform: scale(1.08) translateY(-5px);
}

.pricing-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: white;
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(255, 102, 0, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pricing-card h3 {
    font-size: 1.95rem;
    /* Increased by 30% from 1.5rem */
    margin-bottom: 24px;
    color: var(--text-dark);
}

.price {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-accent);
    margin: 24px 0;
    letter-spacing: -0.05em;
    line-height: 1;
}

.price span {
    font-size: 1.3rem;
    /* Increased by 30% from 1rem */
    color: var(--text-gray);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.features-list {
    margin: 40px 0;
    text-align: left;
    padding-left: 20px;
}

.features-list li {
    margin-bottom: 0;
    color: var(--text-gray);
    font-size: 1.37rem;
    /* Increased by 30% from 1.05rem */
    display: flex;
    align-items: center;
}

/* Footer */
.footer {
    background: #1a1a1a;
    color: #999;
    padding: 80px 0;
    font-size: 0.9rem;
    border-top: 1px solid #222;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-logo {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.footer-info p {
    margin-bottom: 8px;
    line-height: 1.6;
}

.footer-links a {
    color: #999;
    margin-left: 24px;
    font-weight: 500;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.copyright {
    margin-top: 24px;
    font-size: 0.8rem;
    color: #666;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }

    .footer-links {
        margin-top: 30px;
    }

    .footer-links a {
        margin-left: 0;
        margin-right: 20px;
    }
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem;
    }

    .pricing-card.recommended {
        transform: scale(1.02);
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 80px 0;
    }

    /* Mobile Typography Standardization */

    /* 1. Global Section Title: 3.2rem (PC) -> 1.8rem (Mobile) */
    .section-title,
    .process-title,
    .branding-content .section-title {
        font-size: 1.8rem !important;
        line-height: 1.3;
    }

    .pricing-desc-highlight {
        font-size: 1.25rem !important;
        /* Mobile optimization */
    }



    /* 2. Global Section Desc: 1.4rem (PC) -> 0.95rem (Mobile) */
    .section-desc,
    .process-desc,
    .features-section .section-desc,
    .content-section .section-desc {
        font-size: 0.95rem !important;
        line-height: 1.6;
    }

    /* 3. Global Body/List: 1.125rem (PC) -> 0.9rem (Mobile) */
    .pain-list li,
    .benefit-list li,
    .branding-list p {
        font-size: 0.9rem !important;
    }

    /* 4. Sub-headings */
    .branding-list strong,
    .process-sub {
        font-size: 1.1rem !important;
    }

    /* 5. Special Elements */
    .price {
        font-size: 2.2rem !important;
    }

    .btn-primary {
        font-size: 0.95rem !important;
        padding: 14px 30px;
    }

    .navbar nav {
        display: none;
        /* Mobile menu implementation usually needed, but keeping simple per requirements */
    }

    .navbar .container {
        justify-content: center;
    }

    .process-grid,
    .feature-card-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pricing-card.recommended {
        transform: scale(1);
        margin: 20px 0;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-image-section {
        margin-top: 80px;
    }
}

/* Site Logo Image */
/* =========================================
   PHONE & PC SEPARATION LAYER (Phase 6)
   ========================================= */

/* 1. PC Specific Overrides (Min-width: 769px) */
@media screen and (min-width: 769px) {
    /* Add PC-only styles here */
}

/* 2. Mobile Specific Overrides (Max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Add Mobile-only styles here */
}

/* [Phase 6] Header Modifications */
@media screen and (min-width: 769px) {

    /* PC Logo Size (230px) */
    .logo img {
        width: 230px !important;
        height: auto;
    }

    /* PC Menu Font Size (1.1rem) */
    .navbar nav a {
        font-size: 1.1rem !important;
    }
}

/* [Phase 6] Content Section Modifications */

/* 1. Highlight Text Style */
.highlight-text {
    color: #ff6600;
    font-weight: bold;
}

/* [2026-02-13] Mobile Menu - Sensory Glass Overlay */

/* 1. Toggle Button (Visible only on Mobile) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    z-index: 2000;
    /* Above Overlay */
    padding: 0;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.mobile-menu-toggle span:nth-child(1) {
    top: 0;
}

.mobile-menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.mobile-menu-toggle span:nth-child(3) {
    bottom: 0;
}

/* Hamburger to X Animation */
.mobile-menu-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: #fff;
    /* White on dark overlay */
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background-color: #fff;
}

/* 2. Overlay Container */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Animation State: Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Open State */
body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

body.mobile-menu-open {
    overflow: hidden;
    /* Lock Scroll */
}

/* 3. Menu List & Items */
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-menu-item {
    opacity: 0;
    transform: translateY(30px);
    margin-bottom: 25px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Staggered Animation Delay when Open */
body.mobile-menu-open .mobile-menu-item:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

body.mobile-menu-open .mobile-menu-item:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

body.mobile-menu-open .mobile-menu-item:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}

body.mobile-menu-open .mobile-menu-item:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

body.mobile-menu-open .mobile-menu-item:nth-child(5) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-list a {
    text-decoration: none;
    font-size: 2rem;
    /* Large Typography */
    font-weight: 800;
    color: #fff;
    display: block;
    transition: color 0.3s;
    letter-spacing: -0.03em;
}

.mobile-menu-list a:active {
    color: #ff6600;
    transform: scale(0.95);
}

/* Mobile CTA Button Style */
a.btn-primary-mobile {
    color: #ff6600 !important;
    font-size: 2.2rem !important;
    /* Stand out */
    margin-top: 20px;
    display: inline-block;
}

/* 4. Footer in Overlay */
.mobile-menu-footer {
    position: absolute;
    bottom: 40px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* 5. Mobile Only Display Logic */
@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
        /* Show hamburger */
    }

    /* Navbar container adjust */
    .navbar .container {
        justify-content: space-between !important;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 2. Content Section Text Size */
.content-section .section-desc {
    max-width: 800px;
    /* Slight increase for larger font */
    line-height: 1.4;
}

/* PC Specific (Min-width: 769px) */
@media screen and (min-width: 769px) {
    .content-section .section-desc {
        font-size: 1.7rem !important;
        /* 30% larger */
    }
}

/* Mobile Specific (Max-width: 768px) */
@media screen and (max-width: 768px) {
    .content-section .section-desc {
        font-size: 1.45rem !important;
        /* 30% larger */
    }
}

/* [Phase 6] Process Section Modifications */

/* 1. Process Title (Common) */
.process-title {
    font-size: 2.9rem !important;
    color: #ff6600 !important;
    /* Orange */
}

/* 2. Process Description (PC) - Match Content Section */
@media screen and (min-width: 769px) {
    #process .section-desc {
        font-size: 1.4rem !important;
    }
}

/* 3. Process Description (Mobile) */
@media screen and (max-width: 768px) {
    #process .section-desc {
        font-size: 1.3rem !important;
    }

    /* 4. Process Card Text Increase (Mobile Only) */
    .process-desc {
        font-size: 1.14rem !important;
        /* 20% larger */
    }
}

/* [Phase 6] Features Section Modifications */

/* 1. Features Description (PC) */
@media screen and (min-width: 769px) {
    .features-section .section-desc {
        font-size: 2.2rem !important;
    }
}

/* 2. Features Description (Mobile) */
@media screen and (max-width: 768px) {
    .features-section .section-desc {
        font-size: 1.3rem !important;
    }
}

/* Note: Mobile Background Image Update cancelled by user request */
/* [Phase 6] Pricing Section Modifications */

/* 1. Pricing Text Increase (PC Only) */
@media screen and (min-width: 769px) {

    .pricing-card h3,
    .pricing-card .price,
    .pricing-features li {
        font-size: 1.3rem !important;
        /* Approx 30% increase base */
    }

    .pricing-card .price {
        font-size: 2.5rem !important;
        /* Make price standout */
    }
}

/* 2. Highlight for '1/10 가격' handled by .highlight-text class (already added) */
/* [Phase 6] Total Branding Section Modifications */

/* 1. Branding Text Increase (PC Only) */
@media screen and (min-width: 769px) {

    .branding-section li,
    .branding-section p {
        font-size: 1.3rem !important;
        /* Approx 30% increase base */
    }
}

/* [2026-02-13] Unified System Font Stack for Titles (PC/Mobile) */
h1,
h2,
h3,
h4,
.section-title,
.process-title,
.branding-content .section-title {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif !important;
    letter-spacing: -0.05em !important;
    /* Tighten for mobile-like feel */
    font-weight: 800;
    /* Maintain Bold */
}

/* [2026-02-13] Update: Prioritize Pretendard Web Font */
:root {
    --font-main: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

h1,
h2,
h3,
h4,
.section-title,
.process-title,
.branding-content .section-title {
    font-family: var(--font-main) !important;
    letter-spacing: -0.05em !important;
    font-weight: 800;
}

/* [2026-02-13] Section Spacing Reduction (Content -> Process) */
.content-section {
    padding-bottom: 80px !important;
    /* Was 160px */
}

.process-section {
    padding-top: 120px !important;
    /* Was 160px */
}

/* [2026-02-13] Fix Sticky Scroll Issue */
.content-section {
    overflow: visible !important;
    /* Allow sticky position to work */
}

/* [2026-02-13] Fix Sticky Scroll Issue - Round 2 */
html,
body {
    overflow: visible !important;
    /* Critical for sticky to work */
    overflow-x: clip !important;
    /* Modern alternative to hidden that allows sticky */
}

.content-section {
    overflow: visible !important;
    transform: none !important;
}

/* [2026-02-13] Content Section Title Resizing (PC Only) */
@media screen and (min-width: 769px) {
    .content-section .section-title {
        font-size: 2.56rem !important;
        /* 3.2rem * 0.8 */
    }
}

/* [2026-02-13] Content Section Description Resizing (20% Reduction) */

/* PC Specific (Min-width: 769px) Override */
@media screen and (min-width: 769px) {
    .content-section .section-desc {
        font-size: 1.36rem !important;
        /* 1.7rem * 0.8 */
    }
}

/* Mobile Specific (Max-width: 768px) Override */
@media screen and (max-width: 768px) {
    .content-section .section-desc {
        font-size: 1.16rem !important;
        /* 1.45rem * 0.8 */
    }
}

/* [2026-02-13] Scrolly Text Caption Resizing */

/* PC Default (Base): Override existing 2.1rem */
.scrolly-text {
    font-size: 1.89rem !important;
    /* 2.1rem * 0.9 (-10%) */
}

/* Mobile Override (Max-width: 768px) */
@media screen and (max-width: 768px) {
    .scrolly-text-card .scrolly-text {
        font-size: 1.32rem !important;
        /* 1.1rem * 1.2 (+20%) */
    }
}

/* [2026-02-13] Process Title Resizing (20% Reduction) */

/* PC Default (Base): Override existing 2.9rem */
.process-title {
    font-size: 2.32rem !important;
    /* 2.9rem * 0.8 */
}

/* Mobile Override (Max-width: 768px) */
@media screen and (max-width: 768px) {
    .process-title {
        font-size: 2.0rem !important;
        /* User Request 2.0rem */
    }
}

/* [2026-02-13] Process Description Resizing (PC Only 20% Reduction) */

/* PC Override (Min-width: 769px) */
@media screen and (min-width: 769px) {
    .process-desc {
        font-size: 1.2rem !important;
        /* 1.5rem * 0.8 */
    }
}

/* [2026-02-13] Features Section Mobile Layout Adjustments */
@media screen and (max-width: 768px) {

    /* 1. Gap Reduction (-10%) */
    .feature-card-grid {
        gap: 21px !important;
        /* 24px * 0.9 */
    }

    /* 2. Text Size (+20%) & Alignment */
    .pain-list li,
    .benefit-list li {
        font-size: 1.08rem !important;
        /* 0.9rem * 1.2 */
        text-align: left !important;
        /* Ensure Left Alignment */
    }
}

/* [2026-02-13] Features Section Mobile Padding Adjustments */
@media screen and (max-width: 768px) {

    /* 1. Reduce Container Padding (Gain 30px width) */
    .feature-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. Move Text Closer to Icon */
    .pain-list li,
    .benefit-list li {
        padding-left: 25px !important;
        /* Was 32px */
    }

    /* 3. Adjust Icon Position */
    .pain-list li::before,
    .benefit-list li::before {
        left: -2px !important;
    }
}

/* [2026-02-13] Feature Logo Replacement */
.feature-logo {
    height: 50px;
    /* 42px * 1.2 */
    width: auto;
    margin-bottom: 0;
    display: inline-block;
}

/* [2026-02-13] Trust Text Line Height Fix */
.trust-text span {
    line-height: 1.2;
    margin-top: 0;
}

/* [2026-02-13] Trust Banner Mobile Padding Fix */
@media screen and (max-width: 768px) {
    .trust-banner {
        padding: 30px 15px !important;
        /* Reduce horizontal padding from 30px to 15px */
    }
}

/* [2026-02-13] Features Text Vertical Adjustment */
.feature-content {
    padding-top: 25px !important;
    /* Push text down (increase space from image) */
    padding-bottom: 15px !important;
    /* Pull bottom up (reduce bottom space) */
}

/* [2026-02-13] Trust Text Size Reduction (-10%) */
.trust-text strong {
    font-size: 1.35rem !important;
    /* 1.5rem * 0.9 */
}

.trust-text span {
    font-size: 1.17rem !important;
    /* 1.3rem * 0.9 */
}

/* [2026-02-13] Branding Description Size Mobile Adjustment (+20%) */
@media screen and (max-width: 768px) {
    .branding-list p {
        font-size: 1.08rem !important;
        /* 0.9rem * 1.2 */
    }
}

/* [2026-02-13] Branding Helper Text Size (Mobile Only) */
@media screen and (max-width: 768px) {
    .branding-section .section-desc {
        font-size: 1.68rem !important;
        /* 1.4rem * 1.2 */
    }
}

/* [2026-02-13] Branding Helper Text Final Size Correction (1.4rem) */
@media screen and (max-width: 768px) {
    .branding-section .section-desc {
        font-size: 1.4rem !important;
        /* Override previous 1.68rem */
    }
}

/* [2026-02-13] Branding List Title Size Adjustment (Mobile Only +10%) */
@media screen and (max-width: 768px) {
    .branding-list strong {
        font-size: 1.21rem !important;
        /* 1.1rem * 1.1 */
    }
}

/* [2026-02-13] Pricing Tagline Size Adjustment (Mobile Only +20%) */
@media screen and (max-width: 768px) {
    .pricing-desc-highlight {
        font-size: 1.5rem !important;
        /* 1.25rem * 1.2 */
    }
}

/* [2026-02-13] Pricing Card Selection Logic */
.pricing-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent !important;
    /* Prepare for selection border */
}

.pricing-card.selected {
    border-color: var(--color-accent) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Default Button State (Inactive) */
.pricing-card .btn-primary {
    background-color: #ebe7e7 !important;
    color: #666 !important;
    pointer-events: none;
    /* Prevent click until selected */
}

/* Active Button State */
.pricing-card.selected .btn-primary {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    pointer-events: auto;
}

/* [2026-02-13] Pricing Discount Banner Styling */
.pricing-discount-banner {
    text-align: center;
    margin-top: 30px !important;
    background-color: #fff4e6;
    /* Light Orange */
    color: #ff6600;
    /* Dark Orange */
    font-weight: 700;
    font-size: 1.1rem;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #ffe0b2;
    display: inline-block;
    /* Center aligned by parent text-align: center */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Mobile Adjustment */
@media screen and (max-width: 768px) {
    .pricing-discount-banner {
        font-size: 1.0rem;
        width: 100%;
        /* Full width on mobile? or keep inline? Let not force width 100% just display block if needed, but inline-block is fine if text wraps */
        margin-top: 20px !important;
    }
}

/* [2026-02-13] Pricing Discount Banner Styling (Animated Gradient Border) */
@keyframes border-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.pricing-discount-banner {
    position: relative;
    text-align: center;
    margin-top: 30px !important;
    background: #fff;
    z-index: 1;

    /* Double layer background for border effect */
    border: double 2px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fff, #fff),
        linear-gradient(120deg, #ff6600, #ffb347, #ffcc33, #ff6600);
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 200% 200%;
    animation: border-flow 2s linear infinite;

    color: #ff6600;
    font-weight: 800;
    font-size: 1.15rem;
    /* Slightly larger */
    padding: 15px 25px;
    /* More padding */
    display: inline-block;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.15);
    /* Soft glow shadow */
    letter-spacing: -0.5px;
}

/* Mobile Adjustment */
@media screen and (max-width: 768px) {
    .pricing-discount-banner {
        font-size: 1.0rem;
        width: 100%;
        margin-top: 20px !important;
        padding: 15px 10px;
    }
}

/* [2026-02-13] Pricing Discount Banner Styling (Premium Shine) */
@keyframes shine-lines {
    0% {
        background-position: -100px;
    }

    40%,
    100% {
        background-position: 300px;
    }

    /* Move continuously then pause */
}

.pricing-discount-banner {
    /* Override previous styles */
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%) !important;
    color: #fff !important;
    border: none !important;
    /* Remove previous border */
    border-radius: 50px !important;
    /* Pill shape */
    padding: 12px 30px !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3) !important;
    display: inline-block;
    margin-top: 30px !important;
    text-align: center;
    z-index: 1;
    animation: none !important;
    /* Remove border-flow animation */
}

/* Shine Effect Layer */
.pricing-discount-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    background-repeat: no-repeat;
    background-size: 50px 100%;
    /* Width of the beam */
    animation: shine-lines 3s infinite linear;
}

/* Mobile Adjustment */
@media screen and (max-width: 768px) {
    .pricing-discount-banner {
        font-size: 1.0rem !important;
        width: auto !important;
        /* Let it size to content */
        display: inline-block !important;
        margin-top: 25px !important;
        padding: 12px 25px !important;
    }
}

/* [2026-02-13] Pricing Discount Banner Styling (Soft Breathing) */
@keyframes soft-breathing {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 30px rgba(255, 69, 0, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3);
    }
}

.pricing-discount-banner {
    /* Override animation */
    animation: soft-breathing 2s infinite ease-in-out !important;
}

/* Remove Shine Effect */
.pricing-discount-banner::after {
    display: none !important;
    animation: none !important;
}

/* [2026-02-13] Pricing Discount Banner Centering */
.pricing-discount-banner {
    display: table !important;
    /* Ensure it behaves like a block for margins but shrinks to content */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 30px !important;
    /* Maintain other styles */
}

@media screen and (max-width: 768px) {
    .pricing-discount-banner {
        /* Mobile centering */
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 25px !important;
        width: auto !important;
    }
}

/* [2026-02-13] Admin Bar Compatibility */
.admin-bar .navbar {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .navbar {
        top: 46px !important;
    }
}

/* [2026-02-13] Header Button Fix */
/* 1. Ensure Header Button is on TOP */
.navbar .btn-primary {
    position: relative;
    z-index: 1001 !important;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* 2. Hide Rogue Buttons (Duplicate artifacts) */
body>.btn-primary,
body>a.btn-primary {
    display: none !important;
}

/* 3. Ensure Navbar Container allows button visibility */
.navbar .container {
    overflow: visible;
}

/* ========================================= */
/* SYNCED BENTO PRICING CARDS FROM PRICING PAGE */
/* ========================================= */
/* [V23 MODERN REDESIGN] 3D Pricing Cards with Color Themes */
.home-bento-pricing {
    --color-lite: #20c997;
    /* Mint Green */
    --color-std: #ff6b00;
    /* Signature Orange */
    --color-prem: #6741d9;
    /* Royal Indigo */
}

.home-bento-pricing .pricing-section {
    background-color: #f8f9fa;
    /* Light Gray Background */
    padding: 100px 0;
}

.home-bento-pricing .pricing-grid {
    display: flex;
    flex-wrap: nowrap;
    /* PC에서는 절대 줄바꿈 되지 않음 */
    justify-content: center;
    gap: 30px;
    margin: 50px auto 0;
    max-width: 1200px;
}

/* Base Card Style */
.home-bento-pricing .pricing-card {
    background-color: #fff;
    border-radius: 20px;
    padding: 0;
    /* Remove padding for full-width header */
    width: 100%;
    max-width: 350px;
    flex: 1 1 0;
    /* 창 크기가 좁아져도 3개가 동일 비율로 축소됨 */
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* overflow: hidden; Removed to fix badge clipping */
    border: none;
    display: flex;
    flex-direction: column;
    /* border-top removed */
}

/* Full Width Header Bar */
.home-bento-pricing .pricing-header-bar {
    padding: 20px 0;
    text-align: center;
    border-radius: 20px 20px 0 0;
    /* Match card top corners */
    width: 100%;
}

.home-bento-pricing .pricing-header-bar h3 {
    color: #fff;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Theme Backgrounds for Header Bar */
.home-bento-pricing .lite-theme .pricing-header-bar {
    background-color: var(--color-lite);
}

.home-bento-pricing .standard-theme .pricing-header-bar {
    background-color: var(--color-std);
}

.home-bento-pricing .premium-theme .pricing-header-bar {
    background-color: var(--color-prem);
}

/* Content Wrapper */
.home-bento-pricing .card-content-wrap {
    padding: 20px 30px 30px 30px;
    /* Breathe */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Hover Effect: Lift Up & Color Shadow */
.home-bento-pricing .pricing-card:hover {
    transform: translateY(-15px);
}

.home-bento-pricing .pricing-card.lite-theme:hover {
    box-shadow: 0 20px 40px rgba(32, 201, 151, 0.15);
}

.home-bento-pricing .pricing-card.standard-theme:hover {
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.2);
}

.home-bento-pricing .pricing-card.premium-theme:hover {
    box-shadow: 0 20px 40px rgba(103, 65, 217, 0.15);
}

/* Card Header (Price Area) */
.home-bento-pricing .card-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* Price Tag */
.home-bento-pricing .price {
    font-size: 3.5rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
    margin-top: 0;
    /* Forces 0 top margin to respect badge spacing */
    margin-bottom: 5px;
}

/* Price Color by Theme */
.home-bento-pricing .lite-theme .price {
    color: var(--color-lite);
}

.home-bento-pricing .standard-theme .price {
    color: var(--color-std);
}

.home-bento-pricing .premium-theme .price {
    color: var(--color-prem);
}

.home-bento-pricing .price span {
    font-size: 1rem;
    font-weight: 500;
    color: #888;
}

/* VAT Note */
.home-bento-pricing .vat-note {
    display: block;
    font-size: 0.85rem;
    color: #999;
    font-weight: 400;
    margin-top: 5px;
}

.home-bento-pricing .desc {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
}

/* Card Body */
.card-.home-bento-pricing {
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.home-bento-pricing .spec-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.home-bento-pricing .spec-list li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
}

.home-bento-pricing .spec-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
}

/* Check Icon Color by Theme */
.home-bento-pricing .lite-theme .spec-list li::before {
    color: var(--color-lite);
}

.home-bento-pricing .standard-theme .spec-list li::before {
    color: var(--color-std);
}

.home-bento-pricing .premium-theme .spec-list li::before {
    color: var(--color-prem);
}

/* Highlight Features */
.home-bento-pricing .spec-list li.highlight {
    font-weight: 700;
    color: #111;
}

/* Featured Card Override (Standard) */
.home-bento-pricing .pricing-card.featured {
    transform: scale(1.05);
    z-index: 2;
    background: #fff;
    /* Removed default glow, handled by theme shadow now */
}

.home-bento-pricing .pricing-card.featured:hover {
    transform: scale(1.05) translateY(-15px);
}

.home-bento-pricing .pricing-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    /* Gradient Top Bar for Standard */
    background: linear-gradient(90deg, #ff9966, #ff5e62);
    display: none;
    /* Hide default gradient, use solid theme color */
}

.home-bento-pricing .pricing-card.featured.standard-theme {
    /* Re-enable gradient if desired or keep solid orange */
    border-top: 6px solid var(--color-std);
}

/* Pulse Animation for Badge */
@keyframes badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 94, 98, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 94, 98, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 94, 98, 0);
    }
}

.home-bento-pricing .badge-best {
    display: inline-block;
    margin-bottom: 20px;
    /* Equal spacing (20px top / 20px bottom) */
    margin-top: 0;
    line-height: 1;
    background: linear-gradient(90deg, #ff9966, #ff5e62);
    color: #fff;
    padding: 6px 18px;
    /* Larger Padding */
    border-radius: 50px;
    font-size: 1.0rem;
    /* +25% larger */
    font-weight: 800;
    /* Extra Bold */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(255, 94, 98, 0.4);
    animation: badge-pulse 2s infinite;
    /* Emphasis Effect */
}

/* Buttons */
.home-bento-pricing .btn-block {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: center;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #fff;
}

/* Button Colors by Theme */
.home-bento-pricing .lite-theme .btn-block {
    background-color: var(--color-lite);
}

.home-bento-pricing .standard-theme .btn-block {
    background-color: var(--color-std);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}

.home-bento-pricing .premium-theme .btn-block {
    background-color: var(--color-prem);
}

.home-bento-pricing .lite-theme .btn-block:hover {
    background-color: #12b886;
    /* Darker Mint */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(32, 201, 151, 0.3);
}

.home-bento-pricing .standard-theme .btn-block:hover {
    background-color: #e65c00;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(255, 102, 0, 0.3);
}

.home-bento-pricing .premium-theme .btn-block:hover {
    background-color: #5f3dc4;
    /* Darker Indigo */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(103, 65, 217, 0.3);
}

/* Remove old Button styles overlap */
.home-bento-pricing .btn-block.primary,
.home-bento-pricing .btn-block.secondary {
    /* These classes are still in HTML but theme styles will override base button styles if specific enough */
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .home-bento-pricing .pricing-grid {
        gap: 20px;
        flex-wrap: wrap;
        /* 테블릿 이하에서는 좁아지므로 안전하게 줄바꿈 허용 */
    }
}

@media (max-width: 768px) {
    .home-bento-pricing .pricing-grid {
        flex-direction: column;
        align-items: center;
    }

    .home-bento-pricing .pricing-card {
        max-width: 100%;
        /* Full width on mobile */
    }

    .home-bento-pricing .pricing-card.featured {
        transform: scale(1);
    }
}

/* Animated Wave Button (Interactive) - 70px padded */
.btn-laser-wave {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 70px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #ff6600;
    background: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(255, 102, 0, 0.2);
}

.btn-laser-wave::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: 54px;
    background: linear-gradient(90deg, #ff6600 0%, #ffffff 40%, #ff8c42 60%, #ff6600 100%);
    background-size: 300% auto;
    animation: laser-spin 1.5s linear infinite;
    z-index: -2;
}

.btn-laser-wave::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 48px;
    z-index: -1;
    transition: background 0.3s ease;
}

.wave-container {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.wave-char {
    display: inline-block;
    animation: char-jump 1.8s infinite;
}

.c1-1 {
    animation-delay: 0.0s;
}

.c1-2 {
    animation-delay: 0.1s;
}

.c1-3 {
    animation-delay: 0.2s;
}

.c1-4 {
    animation-delay: 0.3s;
}

.c1-5 {
    animation-delay: 0.4s;
}

.c1-6 {
    animation-delay: 0.5s;
}

.c1-7 {
    animation-delay: 0.6s;
}

.c1-arrow {
    animation-delay: 0.7s;
}

.c2-0 {
    animation-delay: 0.0s;
}

.c2-1 {
    animation-delay: 0.1s;
}

.c2-2 {
    animation-delay: 0.2s;
}

.c2-3 {
    animation-delay: 0.3s;
}

.c2-4 {
    animation-delay: 0.4s;
}

.c2-5 {
    animation-delay: 0.5s;
}

.c2-6 {
    animation-delay: 0.6s;
}

.c2-7 {
    animation-delay: 0.7s;
}

.c2-arrow {
    animation-delay: 0.8s;
}

@keyframes laser-spin {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@keyframes char-jump {

    0%,
    30%,
    100% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(-6px);
        color: #cc5200;
    }
}

.arrow {
    font-size: 1.4rem;
    transition: transform 0.2s ease;
    margin-left: 6px;
    margin-right: -4px;
}

.btn-laser-wave:hover {
    color: #ffffff;
}

.btn-laser-wave:hover::after {
    background: #ff6600;
}

.btn-laser-wave:hover span.wave-char,
.btn-laser-wave:hover::before {
    animation-play-state: paused;
}

.btn-laser-wave:hover .arrow {
    transform: translateX(6px);
    color: #ffffff;
}

/* ==========================================================================
 * [2026-03] 이벤트 웰컴 토스트 팝업 스타일 가이드 (전역 스크롤/레이아웃 간섭 ZERO)
 * ========================================================================== */
.event-toast-popup {
    position: fixed;
    bottom: -400px;
    /* 초기에는 화면 아래 숨김 */
    left: 20px;
    /* 좌측 하단 배치 (우측 Tawk.to 버튼 회피) */
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    overflow: hidden;
    transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    /* 숨겨져 있을 땐 클릭 방해 금지 */
}

/* 등장 클래스 */
.event-toast-popup.show {
    bottom: 20px;
    opacity: 1;
    pointer-events: auto;
    /* 활성화 시 클릭 가능 */
}

/* 닫기 시 우측으로 사라짐 */
.event-toast-popup.hide {
    transform: translateX(-150%);
    opacity: 0;
    pointer-events: none;
}

.toast-header {
    padding: 12px 16px;
    background: var(--color-accent, #FF6600);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
}

.toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.toast-body {
    padding: 0;
    cursor: pointer;
    position: relative;
    background: #000;
}

.toast-img-wrapper {
    position: relative;
    width: 100%;
}

.toast-body img {
    width: 100%;
    display: block;
    transition: opacity 0.3s;
}

.toast-body:hover img {
    opacity: 0.9;
}

.toast-overlay-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 34, 34, 0.95);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* 모바일 분기처리 (가로 폭 100% 꽉차게 조정 및 Tawk.to 버튼 침범 방지) */
@media (max-width: 400px) {
    .event-toast-popup {
        width: calc(100% - 40px);
    }
}

/* ==========================================================================
   Kakao Floating Chat Button (2026-03-10) 
   ========================================================================== */
.kakao-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FEE500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: kakao-float 3s ease-in-out infinite;
}

/* 맥박 파동(Pulse Wave) 효과 가상 요소 */
.kakao-floating-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #FEE500;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: kakao-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* 파동(Pulse) 애니메이션 키프레임 */
@keyframes kakao-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* 둥둥 떠다니는(Float) 애니메이션 키프레임 */
@keyframes kakao-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.kakao-floating-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.kakao-floating-btn:hover {
    animation-play-state: paused;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 25px rgba(254, 229, 0, 0.4);
}

.kakao-floating-btn:hover::before {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .kakao-floating-btn {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px;
    }

    .kakao-floating-btn img {
        width: 28px;
        height: 28px;
    }
}