@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/Paperlogy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/Paperlogy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/Paperlogy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Hyde';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2501-3@1.0/Hyde-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'AtoZ';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/A2Z-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'goorm-sans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/goorm-sans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Design System Variables */
:root {
    /* Colors */
    --primary-yellow: #FFF9C4;
    /* Pastel Yellow - Warmth */
    --primary-green: #2C4035;
    --bg-soft-mint: #E8F3EE;
    --nemos-orange: #FF7A00;
    --text-dark: #45644A;
    /* Olive - Applied to all main text */
    --text-light: #6A8A70;
    /* Muted Olive */
    --background-cream: #FAFAFA;
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --font-heading: 'Paperlogy', sans-serif;
    --font-body: 'Paperlogy', sans-serif;
}

/* Exclusion: Volunteer Page uses original colors */
.volunteer-page {
    --text-dark: #333333;
    --text-light: #666666;
}

/* ==========================================================================
   2. Reset & Base Typography
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--background-cream);
    line-height: 1.6;
    overflow-x: clip; /* clip instead of hidden allows position: sticky to work properly */
    word-break: keep-all;
    overflow-wrap: break-word;
    /* Sticky Footer Setup */
    display: flex;
    flex-direction: column;
    min-height: 60rem;
    /* Proportional to content on zoom */
    padding-top: 5.0rem; /* Offset for fixed header */
}

body.no-header-page {
    padding-top: 0 !important;
}

main {
    flex: 1 0 auto;
    /* Pushes footer to the bottom */
}

/* Responsive Media Elements */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Scroll Snap for Index Page (Mandatory catch for Hero) */
html.home-snap {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 4.375rem !important;
    /* Account for Sticky GNB */
}

.snap-align-start {
    scroll-snap-align: start;
}

html {
    scroll-behavior: smooth;
}

.snap-section {
    /* scroll-snap-align: start; (Disabled) */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    html {
        scroll-snap-type: none;
        /* Disable snap on mobile */
    }

    .snap-section {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        /* Reset alignment for long content */
    }
}

/* Anim Section - Trigger for fade-in animations (Snapping x) */
.anim-section {
    position: relative;
}

/* Scroll Snap Fade-in-up Animations */
.anim-section .snap-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When the section comes into view */
.anim-section.is-inview .snap-anim {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delay Utilities */
.anim-section.is-inview .delay-1 {
    transition-delay: 0.2s;
}

.anim-section.is-inview .delay-2 {
    transition-delay: 0.4s;
}

.anim-section.is-inview .delay-3,
.snap-section.is-inview .delay-3 {
    transition-delay: 0.6s;
}

.anim-section.is-inview .delay-4,
.snap-section.is-inview .delay-4 {
    transition-delay: 0.8s;
}

h1,
h2,
h3,
h4,
.logo {
    font-family: var(--font-heading);
    word-break: keep-all;
    font-size: 2.6rem;
    /* Responsive typography */
}

.container {
    width: 100%;
    max-width: 1700px;
    /* Expanded from 1440px to ultra-wide */
    margin: 0 auto;
    padding: 0 3rem;
    /* Reduced from 5vw to fill more space */
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

.container-wide {
    max-width: 150rem;
    /* Expanded to match */
}

/* ==========================================================================
   3. Navigation (Header) & Buttons
   ========================================================================== */
header,
#header-placeholder {
    display: contents;
    /* Allows children to behave as direct items of .scroll-container, fixing sticky boundary */
}

.main-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); /* Proportionally scaled shadow */
    border-bottom: 0.125rem solid var(--primary-green); /* Proportionally scaled border */
    z-index: 1001;
}

main.scroll-container {
    margin-top: 0;
    padding-top: 0;
    position: relative;
    /* Ensure absolute SVG spans full height */
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-meta-link {
    font-size: 0.85rem;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.header-meta-link:hover {
    color: var(--nemos-orange);
}

.header-meta-divider {
    color: #eee;
    font-size: 0.75rem;
}

.header-sns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-sns a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f8f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, background-color 0.2s;
    overflow: hidden;
}

.header-sns a:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.header-sns img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}

.top-sns-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.4rem;
    /* 1.75rem(28px)에서 20% 축소 반영 (22.4px) */
    height: 1.4rem;
    /* 1.75rem(28px)에서 20% 축소 반영 (22.4px) */
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.top-sns-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.top-sns-links img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    /* Match scale used in your other SNS icons to fit border-radius */
}

/* Adjust Kakao specific icon logic like in the floating menu */
.top-sns-links a[title*="카카오톡"] img {
    transform: scale(1.1);
}

/* Reduce the Blog icon size by 10% */
.top-sns-links a[title*="블로그"] img {
    transform: scale(1.08);
}

header+* {
    margin-top: 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5.85rem;
    /* Increased by 20% from 4.375rem */
    width: 100%;
    max-width: 106.25rem;
    /* Converted from 1700px */
    margin: 0 auto;
}

.logo-area {
    flex: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Ensures logo container doesn't get squeezed on small screens */
    min-width: max-content;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Ensure logo is on top of any overlapping navigation */
    position: relative;
    z-index: 10;
    height: 100%;
    width: fit-content;
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 6.79rem;
    /* Increased by 20% from 3.4375rem */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    /* Center items within the nav */
    /* Removed margin-left: auto; so it stays centered */
}

nav {
    flex: 1.5;
    /* Large center area for navigation menu */
    display: flex;
    justify-content: center;
}

nav a:not(.btn) {
    text-decoration: none;
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    /* Increased by 20% from 1.04rem */
    transition: color 0.3s;
    position: relative;
    white-space: nowrap;
}

/* Fix header shift by giving the action button a fixed width container */
.header-action-li {
    width: 15.625rem;
    /* Converted from 250px for zoom responsiveness */
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .header-action-li {
        width: auto;
        justify-content: center;
    }
}

/* Hover Animation - Underline */
nav a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -0.375rem;
    /* Converted from -6px */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0.1875rem;
    /* Converted from 3px */
    background-color: var(--primary-green);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 0.125rem;
}

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

nav a:not(.btn):hover,
nav a:not(.btn).active {
    color: var(--primary-green);
}

/* Custom Orange Hover for Volunteer Link */
nav a.nav-orange::after {
    background-color: var(--nemos-orange) !important;
}

nav a.nav-orange:hover,
nav a.nav-orange.active {
    color: var(--nemos-orange) !important;
}

/* Dropdown Menu Styles */
.has-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    padding: 0.8rem 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 100;
}

/* Invisible bridge so mouse hover doesn't detach */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

/* Active Hover State */
.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    text-align: center;
    transition: background 0.3s, color 0.3s !important;
    white-space: nowrap;
    border-radius: 8px;
    margin: 0 8px;
    width: auto !important;
}

/* Hide original underline animation for dropdown items */
nav .dropdown-menu a:not(.btn)::after {
    display: none;
}

.dropdown-menu a:hover {
    background: #FFF3E8;
    color: var(--nemos-orange) !important;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--primary-green);
    color: white !important;
    box-shadow: 0 4px 12px rgba(200, 230, 201, 0.6);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(200, 230, 201, 0.9);
}

/* Volunteer Page Specific Header CTA Button */
.btn-volunteer-orange {
    background-color: var(--nemos-orange);
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 122, 0, 0.4);
    animation: shadowPulseOrange 2s infinite;
}

.btn-volunteer-orange:hover {
    transform: translateY(-4px);
    background-color: #E66A00;
    box-shadow: 0 8px 25px rgba(255, 122, 0, 0.7);
    animation: none;
}

@keyframes shadowPulseOrange {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 122, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 122, 0, 0);
    }
}

.btn-primary:hover {
    background-color: #1B5E20;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}

/* Volunteer Page Custom Nav Group */
.volunteer-nav-group {
    background-color: var(--nemos-light-orange);
    border-radius: 50px;
    padding: 0.1rem 1.2rem;
    /* Adjusted for tighter fit */
    white-space: nowrap;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .volunteer-nav-group {
        flex-direction: column;
        background-color: transparent;
        padding: 0;
        gap: 2.5rem;
    }
}

/* ==========================================================================
   4. Hero Carousel Banner (癲ル슢???????쒓낮?꾬┼??넊? 100% ????????袁⑸즲??먮き?
   ========================================================================== */
.wide-banner-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50rem + 50%);
    /* ??釉먮뻤????癲??????*/
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner-slider-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.banner-slider-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.wide-banner-item {
    flex: 0 0 100%;
    /* ??釉먮뻤??100% ??癲??????*/
    scroll-snap-align: center;
    height: 42rem;
    /* ???怨쀪퐨???????繹먮굞逾?*/
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.banner-inner-content {
    max-width: 1200px;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-section {
    position: relative;
    overflow: hidden;
    /* Contain .hero-blob */
}

.footer-section {
    position: relative;
    overflow: hidden;
    /* Contain .footer-blob */
}

/* 공통 수채화 번짐 오브제 스타일 */
.moving-bg-blob,
.hero-blob,
.footer-blob {
    position: absolute;
    width: 50rem;
    /* 50rem equivalent */
    height: 37.5rem;
    /* 600px equivalent */
    background: radial-gradient(circle at 35% 35%, rgba(255, 122, 0, 0.45) 0%, transparent 70%),
        radial-gradient(circle at 65% 65%, rgba(255, 150, 50, 0.35) 0%, transparent 80%),
        radial-gradient(circle at 45% 85%, rgba(255, 122, 0, 0.25) 0%, transparent 60%);
    filter: blur(70px) contrast(1.2);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
}

.moving-bg-blob {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 1, 0.4, 1);
}

.hero-blob {
    top: 15%;
    right: -5%;
    opacity: 0.8;
    /* 홈페이지 히어로는 더 진하게 */
    animation: blobFloat 12s ease-in-out infinite;
}

.footer-blob {
    bottom: -5%;
    left: -15%;
    opacity: 0.5;
    width: 56.25rem;
    /* 900px */
    height: 43.75rem;
    /* 700px */
    animation: blobFloat 18s ease-in-out infinite reverse;
}

@keyframes blobFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    33% {
        transform: translate(30px, -50px) rotate(4deg) scale(1.05);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-2deg) scale(0.95);
    }
}

.banner-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-dark);
}

.wide-banner-content h2 {
    font-size: 3.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.wide-banner-content p {
    font-size: 1.3rem;
    color: #444;
}

.emoji-icon {
    font-size: 8rem;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

/* ?袁⑸즲??먮き????????繹먭퍓彛?*/
.bg-orange {
    background-color: var(--nemos-light-orange);
}

.bg-mint {
    background-color: #E0F7FA;
}

.bg-yellow {
    background-color: var(--primary-yellow);
}

/* ??釉먯뒜???????????*/
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.carousel-prev {
    left: 3%;
}

.carousel-next {
    right: 3%;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: white;
}

.carousel-dots {
    position: relative;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    gap: 0.8rem;
    z-index: 20;
}

@media (max-width: 768px) {
    .carousel-dots {
        top: 0;
        margin-top: 0;
    }
}

.dot {
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    width: 1.875rem;
    border-radius: 5px;
    background: var(--text-light);
    /* 연한 올리브색(Muted Olive) */
}

/* ==========================================================================
   5. Bento Grid Dashboard
   ========================================================================== */
.bento-dashboard-grid {
    display: grid;
    gap: 16px 32px;
    grid-template-columns: repeat(6, 1fr);
}

.bento-card {
    border-radius: 20px;
    padding: 1.5rem 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-dark);
    background: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bento-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.bento-card-header h3 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0;
}

/* Notice Card */
.notice-card {
    background: #4A433F;
    /* Warm Charcoal background */
    color: #FDFBF7;
}

.notice-card .bento-card-header h3 {
    color: #FDFBF7;
}

.bento-more-btn {
    color: rgba(253, 251, 247, 0.7);
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.bento-more-btn:hover {
    color: #FDFBF7;
}

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.notice-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FDFBF7;
    text-decoration: none;
    padding: 0.6rem 0.8rem;
    margin: 0 -0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.notice-list a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.notice-title {
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 65%;
}

.notice-date {
    font-size: 1.15rem;
    color: rgba(253, 251, 247, 0.6);
}

/* SNS Card */
.sns-links {
    display: flex;
    gap: 13px;
}

.sns-btn {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: #f0f0f0;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.sns-btn:hover {
    background: #e0e0e0;
}

.sns-gallery {
    display: flex;
    gap: 13px;
    flex: 1;
}

.sns-gallery img {
    flex: 1;
    width: 25%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 1/1;
}

/* Bottom Row Cards */
.bottom-card {
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bg-yellow {
    background: #FFF9C4;
}

.bg-mint {
    background: #E0F2F1;
}

.bg-orange {
    background: #FFE0B2;
}

.bottom-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.bottom-card p {
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
    color: rgba(0, 0, 0, 0.6);
}

.card-emoji {
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
}

.card-action {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: auto;
    align-self: flex-start;
}

/* Responsive Grid Placement */
@media (min-width: 769px) {
    .bento-dashboard-grid {
        grid-template-columns: repeat(15, 1fr);
    }

    .notice-card {
        grid-column: span 6;
    }

    .sns-card {
        grid-column: span 9;
    }

    .bottom-card {
        grid-column: span 5;
    }
}

@media (max-width: 768px) {
    .bento-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .notice-card,
    .sns-card,
    .bottom-card {
        grid-column: 1 / -1;
    }

    .notice-title {
        max-width: 70%;
    }

    .sns-gallery {
        flex-wrap: wrap;
    }

    .sns-gallery img {
        width: calc(50% - 5px);
        flex: none;
    }
}

/* ==========================================================================
   5.5 Program Preview Section
   ========================================================================== */
.preview-section {
    padding-top: 2rem;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.preview-header h2 {
    font-size: 2rem;
    font-weight: 700;
}

.preview-more-link {
    font-size: 1rem;
    color: var(--nemos-orange);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.preview-more-link:hover {
    opacity: 0.7;
}

.bg-soft-mint {
    background-color: #F0FDF4;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.preview-card {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--text-dark);
}

.preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.preview-card-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.preview-card-content {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.preview-card-badge {
    align-self: flex-start;
    background: var(--primary-green);
    color: #1B5E20;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.preview-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preview-card-info {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: auto;
}

.preview-card-info strong {
    color: var(--text-dark);
}

.btn-outline {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    background: transparent;
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
}

.btn-outline:hover {
    background: var(--primary-green);
    color: white;
}

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

@media (max-width: 768px) {
    .preview-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   6. Full-page Scroll & Animations
   ========================================================================== */
.scroll-container {
    height: auto;
    min-height: 60rem;
    overflow-y: visible;
    overflow-x: hidden;
    /* Prevent horizontal scrolling from overflowing background blobs */
    /* scroll-snap-type: y mandatory; (Disabled) */
    scroll-behavior: smooth;
    /* scroll-padding-top: 70px; (Moved to html scroller) */
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* ???袁⑹뵫?棺堉??벬€???影€??탿??(???ャ뀕?? */


.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-container section {
    min-height: 60rem;
    scroll-snap-align: start;
    padding-top: 6.5rem;
    /* Proportional header offset */
    /* ??關履??????밸쭬 ?亦껋꼨援?€얠쥉異??좊뮡??????*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ???쒓낮???筌믨퀡????影€?る븕 */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* ?袁⑸즴??????釉먯뒜????*/
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.scroll-text {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.chevron {
    width: 14px;
    height: 14px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    margin: 0 auto;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    40% {
        transform: translateY(-10px) rotate(45deg);
    }

    60% {
        transform: translateY(-5px) rotate(45deg);
    }
}

/* Premium Mobile Hamburger Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 1.875rem;
    /* 30px */
    height: 1.3125rem;
    /* 21px */
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    /* Keep above the overlay */
}

.mobile-menu-btn .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* X Animation when active */
.mobile-menu-btn.is-active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: var(--nemos-orange);
}

.mobile-menu-btn.is-active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.is-active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: var(--nemos-orange);
}

/* ==========================================================================
   7. Mobile Responsive (?袁⑸즵?????袁⑸젻泳?€μ젂?
   ========================================================================== */
@media (max-width: 768px) {

    /* Header & Navigation Fix */
    .mobile-menu-btn {
        display: flex;
    }

    .vision-bar {
        height: 80px; /* Increased 2x from 40px */
        padding: 0;
    }

    .vision-bar h2 {
        font-size: 1.8rem; 
        letter-spacing: 2px;
        transform: scale(1, 1.2);
        /* Added slight vertical stretch for mobile */
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        margin-left: 0 !important;
        /* Reset desktop centering margin */
        padding: 8rem 2rem 2rem;
    }

    nav.is-active {
        right: 0;
    }

    /* Show meta info inside mobile nav when active */
    nav.is-active~.header-meta {
        display: none;
        /* Hide from main header regardless */
    }

    .header-meta {
        display: none;
        /* Default hide on mobile header */
    }

    /* If we want it inside the nav, we should adjust js/components to place it inside nav or manage with absolute positioning */
    /* For now, keeping mobile clean by focusing on nav items */

    nav ul {
        flex-direction: column;
        gap: 2.2rem;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
    }

    nav ul li a {
        font-size: 1.8rem;
        font-weight: 700;
    }

    /* Keep the wrapper normal so columns don't mess up the menu */
    .banner-inner-content {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }

    .wide-banner-content h2 {
        font-size: 2rem;
    }

    .emoji-icon {
        font-size: 5rem;
        margin-top: 2rem;
    }

    .quick-nav-grid {
        grid-template-columns: 1fr;
        /* 癲ル슢?꾤땟????繹먮굟諭??筌먲퐢痢??嶺뚮ㅎ?붷ㅇ??嶺뚮㉡?ｈ??*/
    }

    /* 癲ル슢?꾤땟????繹먮굟諭??筌먲퐢痢??????쒓낮?꾬┼??넊? ???袁⑹뵫?????⑤챷???筌뚯슦肉???좊읈?????좊렰 ?嶺뚮㉡?€쾮?*/
    .scroll-container {
        scroll-snap-type: none;
        overflow-y: visible;
        height: auto;
    }

    .scroll-container section {
        min-height: auto;
        padding: 0 0 6rem;
    }
}

/* ==========================================================================
   8. Floating SNS Menu (????렺€轅곗땡????ル늅?????덉툗 癲ル슢?????
   ========================================================================== */
.floating-sns-menu {
    position: fixed;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    /* 15px */
    z-index: 999;
}

.sns-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    overflow: hidden;
}

.sns-item:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sns-img-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    /* ?嶺???筌뚯슦肉??????癲??? */
}

/* Adjust Kakao specific icon logic like in the floating menu */
.sns-item a[title*="카카오톡"] .sns-img-icon {
    transform: scale(1.1);
}

/* Tooltip (Hover text) */
.sns-item::before {
    content: attr(title);
    position: absolute;
    right: 75px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(10px);
}

.sns-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .floating-sns-menu {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        flex-direction: row;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 20px;
        border-radius: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .sns-item {
        width: 45px;
        height: 45px;
        box-shadow: none;
    }

    .sns-item::before {
        display: none;
    }
}

/* ==========================================================================
   9. Premium Apply Modal (UI/UX)
   ========================================================================== */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal.show {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    padding: 2.5rem 3rem;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 31.25rem;
    /* 500px */
    max-height: 51rem;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
}

/* Custom Scrollbar for Modal Content */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Modal Form Inputs */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    background-color: #F8F9FA;
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 15px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--nemos-orange);
    background-color: #FFF;
    box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.15);
}

textarea.form-textarea {
    resize: vertical;
}

/* Modal Close Button */
.close-btn {
    position: absolute;
    top: 1.5625rem;
    /* 25px */
    right: 1.875rem;
    /* 30px */
    color: #999;
    font-size: 1.75rem;
    /* 28px */
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
    display: inline-block;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--nemos-orange);
    text-decoration: none;
    transform: rotate(90deg);
}

/* ==========================================================================
   Volunteer Page Specific Styles (Refactored)
   ========================================================================== */
.vol-hero-section {
    text-align: left;
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
    padding-bottom: 7rem;
    z-index: 1;
    /* 블롭이 배경 위로 올라오도록 섹션 인덱스 설정 */
}

.vol-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    flex-wrap: wrap;
}

.vol-hero-content {
    flex: 1;
    min-width: 300px;
    text-align: left;
    position: relative;
    z-index: 2;
}

.vol-badge {
    background: var(--nemos-orange);
    color: white;
    padding: 0.5rem 1.25rem;
    /* 8px 20px */
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeInUpText 0.8s ease-out forwards;
}

.vol-hero-title {
    font-size: 4.8rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.35;
    word-break: keep-all;
    opacity: 0;
    animation: fadeInUpText 0.8s ease-out 0.2s forwards;
}

.vol-highlight {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(255, 122, 0, 0.4) 60%);
    padding: 0 4px;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: drawHighlight 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}

.vol-hero-desc {
    font-size: 1.6rem;
    color: #555;
    margin-top: 2rem;
    line-height: 1.8;
    word-break: keep-all;
    opacity: 0;
    animation: fadeInUpText 0.8s ease-out 0.4s forwards;
}

/* ==========================================================================
   Volunteer Page: Activities & Notice Section
   ========================================================================== */
.vol-section-center {
    text-align: center;
}

.vol-title-badge {
    background: var(--nemos-orange);
    color: white;
    padding: 0.9375rem 2.5rem;
    /* 15px 40px */
    border-radius: 45px;
    font-size: 2.2rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 3.5rem;
    transition-delay: 0.1s;
}

.vol-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.vol-notice-container {
    background-color: white;
    padding: 5rem 6rem;
    /* Moderately increased padding */
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.vol-notice-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2.5rem;
    /* Moderate margin */
    border-bottom: 2px solid var(--nemos-orange);
    padding-bottom: 0.8rem;
}

.vol-notice-title {
    color: var(--text-dark);
    font-size: 3.2rem;
    /* Adjusted from 3.6rem (was originally 2.8) */
    font-weight: bold;
    margin: 0;
    transition-delay: 0.3s;
}

.vol-notice-more {
    color: var(--text-light);
    font-size: 1.1rem;
    /* Adjusted from 1.2rem */
    text-decoration: none;
    transition: color 0.3s;
    transition-delay: 0.4s;
}

.vol-notice-more:hover {
    color: var(--nemos-orange);
}

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

.vol-notice-item {
    display: block;
    padding: 1.5rem 0.8rem;
    /* Adjusted padding */
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.vol-notice-item:hover {
    background-color: #fafafa;
}

.vol-notice-item-left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    /* Adjusted gap */
    overflow: hidden;
}

.vol-notice-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 1rem;
    /* Adjusted from 1.1rem (was 0.85) */
    font-weight: bold;
    min-width: 70px;
    text-align: center;
}

.vol-notice-tag.open {
    background-color: var(--nemos-orange);
}

.vol-notice-tag.info {
    background-color: var(--nemos-light-orange);
    color: var(--nemos-orange);
}

.vol-notice-tag.closed {
    background-color: #e0e0e0;
    color: #555;
}

.vol-notice-link {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 650px;
    display: inline-block;
}

/* Accordion Header */
.notice-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.notice-acc-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.acc-icon {
    font-size: 0.9rem;
    color: #999;
    transition: transform 0.3s ease;
}

/* Accordion Active State */
.vol-notice-item.has-accordion.active .acc-icon {
    transform: rotate(180deg);
}

.vol-notice-item.has-accordion.active .vol-notice-link {
    color: var(--nemos-orange);
    font-weight: 600;
}

/* Accordion Body */
.notice-acc-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    background-color: #fafafa;
    border-radius: 0 0 10px 10px;
}

.vol-notice-item.has-accordion.active .notice-acc-body {
    max-height: 500px;
    opacity: 1;
    margin-top: 1.5rem;
    /* Space between header and body */
}

.notice-acc-content-inner {
    padding: 1.5rem 2rem;
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 1.05rem;
    border-top: 1px dashed #eee;
}

.notice-acc-content-inner h4 {
    margin-bottom: 1rem;
    color: var(--nemos-orange);
    font-size: 1.2rem;
}

.notice-acc-content-inner ul {
    margin: 1rem 0;
    padding-left: 20px;
}

.notice-acc-content-inner li {
    margin-bottom: 0.5rem;
}

.vol-notice-item:hover .vol-notice-link {
    color: var(--nemos-orange);
}

.vol-notice-date {
    color: #999;
    font-size: 1rem;
    /* Adjusted from 1.1rem */
    min-width: 90px;
    text-align: right;
}

/* ==========================================================================
   Volunteer Page: Target & Benefits Section
   ========================================================================== */
.vol-bg-light-orange {
    background-color: var(--nemos-light-orange);
}

.vol-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}

.vol-list-title {
    font-size: 2.2rem;
    color: var(--text-dark);
    border-left: 5px solid var(--nemos-orange);
    padding-left: 1.2rem;
    margin-bottom: 2rem;
}

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

.vol-list-item {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.vol-list-icon {
    color: var(--nemos-orange);
}

.vol-list-text {
    font-size: 1.25rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* ==========================================================================
   Volunteer Page: Bottom CTA & Modal Forms
   ========================================================================== */
.vol-cta-text {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
    color: var(--text-dark);
    font-weight: 500;
}

.vol-cta-button {
    padding: 1.8rem 6rem;
    font-size: 2rem;
    border-radius: 60px;
}

.form-input.vol-select {
    font-family: var(--font-body);
    padding: 15px;
}

.vol-submit-btn {
    width: 100%;
    border-radius: 50px;
}

/* ==========================================================================
   About Page: Magazine Redesign
   ========================================================================== */
.about-hero-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
}

.ceo-greeting-box {
    background: #ffffff;
    padding: 4rem 3rem;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Quote Watermark */
.ceo-greeting-box::before {
    content: "\"";
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 15rem;
    color: rgba(0, 0, 0, 0.03);
    font-family: Georgia, serif;
    z-index: -1;
    line-height: 1;
}

.ceo-title {
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.ceo-greeting-text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    word-break: keep-all;
}

.ceo-signature {
    font-size: 1.5rem;
    color: #555;
    margin-top: 2rem;
    text-align: right;
    font-family: var(--font-heading);
}

/* Mission Bento Grid */
.mission-section-box {
    background: #ffffff;
    padding: 4rem 3rem;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.mission-section-title {
    color: var(--primary-green);
    margin-bottom: 2rem;
    text-align: left;
}

.mission-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.mission-card-bento {
    border-radius: 30px;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card-bento:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.mission-card-yellow {
    background: var(--primary-yellow);
}

.mission-card-yellow h3,
.mission-card-yellow p {
    color: var(--text-dark);
}

.mission-card-green {
    background: var(--primary-green);
}

.mission-card-green h3,
.mission-card-green p {
    color: #ffffff;
}

.mission-card-light {
    background: #E0F7FA;
}

.mission-card-light h3 {
    color: var(--primary-green);
}

.mission-card-light p {
    color: var(--text-dark);
}

.mission-card-bento h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.mission-card-bento p {
    word-break: keep-all;
    line-height: 1.6;
    margin: 0;
}

.about-select {
    font-family: var(--font-body);
    padding: 15px;
}

.about-submit-btn {
    width: 100%;
    border-radius: 50px;
}

/* Element Delays for the About Page */
.delay-100 {
    transition-delay: 0.1s !important;
    animation-delay: 0.1s !important;
}

.delay-300 {
    transition-delay: 0.3s !important;
    animation-delay: 0.3s !important;
}

.delay-400 {
    transition-delay: 0.4s !important;
    animation-delay: 0.4s !important;
}

.delay-500 {
    transition-delay: 0.5s !important;
    animation-delay: 0.5s !important;
}

.delay-600 {
    transition-delay: 0.6s !important;
    animation-delay: 0.6s !important;
}

.delay-700 {
    transition-delay: 0.7s !important;
    animation-delay: 0.7s !important;
}

.delay-800 {
    transition-delay: 0.8s !important;
    animation-delay: 0.8s !important;
}

.delay-900 {
    transition-delay: 0.9s !important;
    animation-delay: 0.9s !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.pos-rel {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.z-index-2 {
    z-index: 2;
}

/* ==========================================================================
   About Page: Premium Hero Section (Redesign)
   ========================================================================== */
.hero-split {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-soft-mint);
    /* Harmonized with Main Page top */
    min-height: 48rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(44, 64, 53, 0.05);
}

.split-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4rem;
    padding: 2rem 20px;
}

.hero-text {
    flex: 1;
    min-width: 300px;
}

/* Typography */
.handwritten-hero {
    font-family: 'Georgia', serif;
    /* Elegant serif - Reverted as requested */
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-dark);
    /* Olive Color */
    margin-bottom: 2rem;
    letter-spacing: -1px;
    text-shadow: none;
    /* Removed 3D effect for original look */
}

.hero-text p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-light);
    font-weight: 300;
}

/* Highlight Drawing Animation */
.highlight {
    position: relative;
    display: inline-block;
    color: var(--text-dark);
    font-weight: 500;
    z-index: 1;
}

.highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 40%;
    background-color: rgba(44, 64, 53, 0.15);
    /* Soft olive highlight */
    z-index: -1;
    transform-origin: left;
    transform: scaleX(0);
    animation: drawHighlightLine 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes drawHighlightLine {
    to {
        transform: scaleX(1);
    }
}

/* Breathing Watercolor Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    /* 1.5x blurrier */
    opacity: 0.6;
    animation: breatheBlob 8s infinite alternate ease-in-out;
}

.blob-yellow {
    width: 50rem;
    height: 50rem;
    background-color: rgba(200, 230, 201, 0.4);
    /* Refined to mint */
    top: -20%;
    left: -15%;
    animation-delay: 0s;
}

.blob-mint {
    width: 900px;
    height: 900px;
    background-color: rgba(69, 100, 74, 0.15);
    /* Muted olive blob */
    bottom: -20%;
    right: -15%;
    animation-delay: -4s;
}

@keyframes breatheBlob {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(30px, -20px);
    }
}

/* Premium Floating Image Frame */
.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.polaroid-frame {
    background: white;
    padding: 15px 15px 45px 15px;
    /* bottom padding typical of polaroids */
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
    /* deep elegant shadow */
    max-width: 400px;
    width: 100%;
    transform: rotate(4deg);
    animation: floatFrame 6s ease-in-out infinite;
}

.polaroid-frame img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
}

@keyframes floatFrame {

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

    50% {
        transform: translateY(-25px) rotate(2deg);
    }
}

/* Elegant Bouncy Scroll Indicator */
.hero-split .scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

.hero-split .scroll-text {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    /* sleek gray */
    font-weight: 500;
}

.hero-split .chevron {
    width: 16px;
    height: 16px;
    border-right: 2px solid #666;
    /* sleek gray */
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    animation: bounceChevronPremium 2s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes bounceChevronPremium {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    40% {
        transform: translateY(-12px) rotate(45deg);
    }

    60% {
        transform: translateY(-6px) rotate(45deg);
    }
}

/* ==========================================================================
   Volunteer Page: Mobile Responsiveness for Scaled Elements
   ========================================================================== */
@media (max-width: 768px) {
    .split-layout {
        display: block;
        padding: 4rem 20px 8rem 20px;
        position: relative;
    }

    .hero-text {
        width: 100%;
        position: relative;
        z-index: 2;
        text-align: left;
    }

    .hero-image {
        position: absolute;
        right: 15px;
        bottom: 2rem;
        width: 50%;
        max-width: 200px;
        z-index: 3;
    }

    .polaroid-frame {
        width: 100%;
        max-width: none;
        padding: 10px 10px 30px 10px;
    }

    .handwritten-hero {
        font-size: 3.8rem;
        margin-bottom: 1.5rem;
    }

    .hero-text p {
        font-size: 1.25rem;
        word-break: keep-all;
        max-width: 85%;
        line-height: 1.6;
    }

    .vol-hero-title {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }

    .vol-hero-desc {
        font-size: 1.05rem;
        margin-top: 1rem;
    }

    .vol-notice-container {
        padding: 2rem 1.5rem;
    }

    .vol-notice-title {
        font-size: 1.5rem;
    }

    .vol-cta-button {
        font-size: 1.15rem;
        padding: 1rem 3rem;
    }
}

/* ==========================================================================
   Volunteer Page: New Hero Section Typography Animation
   ========================================================================== */
.new-vol-hero {
    min-height: 51rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    position: relative;
    padding: 0 20px;
    padding-bottom: 0 !important;
    /* Remove gap before Activities billboard */
}

.typing-hero {
    text-align: center;
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: #111;
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -1.5px;
}

.typing-hero .line {
    display: block;
    margin-bottom: 25px;
    /* Added margin between lines */
}

.typing-hero .word {
    display: inline-block;
    white-space: nowrap;
}

.typing-hero .space {
    display: inline-block;
}

.typing-hero .char {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    animation: typingFadeInUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.typing-hero .char.orange {
    color: var(--nemos-orange);
}

.typing-hero noscript .orange {
    color: var(--nemos-orange);
}

@keyframes typingFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .typing-hero {
        font-size: 2.8rem;
    }

    .new-vol-hero {
        min-height: 36rem;
    }

    .typing-hero .line {
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   Volunteer Page: Phase 3 Hero Animations
   ========================================================================== */
.hero-animate-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nemosTypingTitle {
    position: absolute;
    width: 100%;
    z-index: 5;
}

.final-hero-layout {
    position: absolute;
    /* Overlay without pushing typing text */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* Hidden until Phase 3 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 1;
}

.final-hero-layout.fade-in-final {
    opacity: 1;
    transform: translateY(0);
}

.final-hero-text {
    width: 100%;
    max-width: 850px;
    text-align: center;
    /* Centered as per user flex instructions */
}

.nemos-target-spot {
    display: inline-block;
    color: #FF7A00;
    font-size: 1.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    box-shadow: none;
    opacity: 0;
    /* Hidden while floating text moves to it */
    transition: opacity 0.3s ease;
}

.final-hero-title {
    font-size: 4rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.35;
    margin-bottom: 1.5rem;
    word-break: keep-all;
}

.final-hero-desc {
    font-size: 1.4rem;
    color: #555;
    line-height: 1.8;
    word-break: keep-all;
}

.final-hero-image {
    display: none;
}



/* Floating wrapper for Phase 3 transition */
.nemos-floating-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    /* Starting from Phase 2 size */
    font-size: 5.5rem;
    /* Match typing-hero final size */
    font-weight: 800;
    line-height: 1;
    color: #FFA14D;
    /* Lightened orange to match target spot */
    z-index: 10;
    white-space: nowrap;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -1.5px;
    /* Ensure no margins/padding mess up the origin */
    margin: 0;
    padding: 0;
}

.nemos-floating-wrapper.move-to-target {
    /* Calculate scale factor: 2.2rem / 5.5rem = 0.4 */
    transform: translate(0, 0) scale(0.4);
    transform-origin: top left;
    transition: all 1s cubic-bezier(0.25, 1, 0.4, 1);
}

@media (max-width: 768px) {
    .final-hero-layout {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding-top: 3rem;
    }

    .final-hero-text {
        text-align: center;
    }

    .nemos-target-spot {
        font-size: 1.7rem;
        padding: 0;
    }

    .nemos-floating-wrapper.move-to-target {
        transform: translate(0, 0) scale(0.64);
        /* 1.8 / 2.8 = 0.64 (since mobile typing hero is 2.8rem) */
    }

    .nemos-floating-wrapper {
        font-size: 2.8rem;
        /* Mobile typing hero font size */
    }

    /* --- 슬라이더 도트 인디케이터 (Progress Bar 대체) --- */
    .slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 1.5rem;
        z-index: 10;
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: #ddd;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background-color: var(--nemos-orange);
        transform: scale(1.4);
        width: 24px;
        /* 조금 더 길쭉하게 혹은 크게 */
        border-radius: 5px;
    }

    .final-hero-title {
        font-size: 2.2rem;
    }

    .final-hero-desc {
        font-size: 1.1rem;
    }


}

/* ==========================================================================
   Billboard Carousel Styles (Activities Section)
   ========================================================================== */
.billboard-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* Below the badge and cover */
}

/* Ensure the first slide is visible behind the initial cover */
.billboard-slide.initial-active {
    opacity: 1;
}

.billboard-slide.active {
    opacity: 1;
    z-index: 2;
}

.billboard-slide .dim-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3;
}

.billboard-slide .dynamic-text {
    z-index: 4;
}

#activitiesBillboard {
    cursor: pointer;
    /* Indicates that the carousel can be clicked */
}

/* --- Opening Intro Layer Animations --- */
.activity-intro-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 10;
    transition: background-color 0.8s ease 1s;
    /* Delay for background fade-out */
    pointer-events: auto;
}

.activity-intro-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    color: #000000;
    font-size: 4rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.4, 1);
    z-index: 11;
}

/* Typewriter Cursor */
.type-cursor {
    display: inline-block;
    color: #FF7A00;
    margin-left: 5px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    from,
    to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* intro-play State */
.activity-intro-layer.intro-play {
    background-color: transparent;
    pointer-events: none;
}

.activity-intro-layer.intro-play .activity-intro-text {
    opacity: 0;
    /* Fade out instead of moving */
    transform: translate(-50%, -50%) scale(0.9);
}

/* Hide cursor when moving */
.activity-intro-layer.intro-play .type-cursor {
    display: none;
}

/* New Floating Badge */
.activity-floating-badge {
    position: absolute;
    bottom: 50px;
    right: 50px;
    background-color: var(--nemos-orange, #FF7A00);
    color: #ffffff;
    padding: 24px 50px;
    border-radius: 100px;
    font-size: 1.8rem;
    font-weight: 800;
    box-shadow: 0 20px 50px rgba(255, 122, 0, 0.4);
    z-index: 20;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-floating-badge.show-badge {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.activity-floating-badge:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(255, 122, 0, 0.5);
    color: white;
    /* preserve text color */
}

@media (max-width: 768px) {
    .activity-intro-text {
        font-size: 2.5rem;
    }

    .activity-floating-badge {
        bottom: 30px;
        right: 20px;
        padding: 16px 40px;
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   Program Management System (Dynamic)
   ========================================================================== */
#program-list-container {
    display: flex;
    flex-direction: column;
}

.program-item {
    display: flex;
    gap: 3rem;
    border-bottom: 1px solid #ddd;
    padding: 3.5rem 0;
    transition: all 0.3s ease;
    align-items: flex-start;
}

.program-item:last-child {
    border-bottom: 2px solid #ddd;
    /* Match top-level divider style */
}

.program-poster {
    flex: 0 0 320px;
    height: 440px;
    border-radius: 4px;
    /* Refined sharp radius */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

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

.program-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    /* Sync with poster height */
    position: relative;
}

.program-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: #8E44AD;
    /* Purple Badge */
    color: white;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    width: fit-content;
}

.program-header-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

.program-title {
    font-size: 2rem;
    color: #111;
    margin: 0;
    font-weight: 700;
}

.program-details-table {
    width: 100%;
    border-collapse: collapse;
}

.program-details-table th {
    text-align: left;
    padding: 0.5rem 0;
    color: #111;
    font-weight: 700;
    width: 100px;
    font-size: 1.1rem;
    vertical-align: top;
}

.program-details-table td {
    padding: 0.5rem 0;
    color: #444;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
}

.program-more-link {
    align-self: flex-end;
    margin-top: auto;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
}

.program-more-link:hover {
    opacity: 0.7;
}

/* Admin Form Styles */
.admin-form-container {
    max-width: 850px;
    margin: 4rem auto;
    background: #fff;
    padding: 4rem;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.admin-form-group {
    margin-bottom: 1.8rem;
}

.admin-form-group label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 700;
    color: #222;
}

.admin-form-input,
.admin-form-textarea {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .program-item {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2.5rem 0;
    }

    .program-poster {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }

    .program-content {
        min-height: auto;
    }

    .program-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .program-title {
        font-size: 1.8rem;
    }

    .program-details-table th {
        width: 90px;
        font-size: 1rem;
    }

    .program-details-table td {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Mobile Optimization for Top Utility Bar
   ========================================================================== */
@media (max-width: 768px) {
    .top-bar {
        padding: 6px 15px;
        /* Reduce padding */
    }

    .top-bar .container {
        justify-content: space-between;
        /* Spread elements */
        flex-wrap: wrap;
        /* Prevent overflow on very small screens */
        gap: 10px;
        /* Base gap if wrapped */
    }

    .top-auth-links {
        gap: 6px;
        /* Tighter gap between login and signup */
    }

    .top-link {
        font-size: 12px;
        /* Smaller text */
    }

    .top-divider {
        font-size: 10px;
        /* Smaller divider */
    }

    .top-sns-links {
        gap: 10px;
        /* Narrower gap between SNS icons */
    }

    .top-sns-links a img {
        width: auto;
        height: 16px;
        /* Compact icons */
        max-width: 18px;
    }
}

/* Volunteer Target Section Responsiveness */
@media (max-width: 768px) {
    .vol-target-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Bounce Arrow Animation */
.bounce-arrow {
    display: inline-block;
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

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

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}


/* ==========================================================================
   Homepage Redesign Sections
   ========================================================================== */

/* Section 1: Hero (Refined) */
.hero-section {
    position: relative;
    background-color: white;
    overflow: hidden;
    min-height: 60rem;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* Force start from top bar */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   Dynamic Growth Line (index.html)
   ========================================================================== */
.growth-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind content blocks */
    pointer-events: none;
}

#growth-path-active {
    transition: stroke-dashoffset 0.1s ease-out;
    /* Smooth drawing effect */
    filter: drop-shadow(0px 0px 8px rgba(127, 160, 134, 0.3));
    /* Mysterious glowing effect */
}

.hero-top {
    background-color: var(--bg-soft-mint);
    padding: 0 0 8rem !important;
    margin-top: 0 !important;
    position: relative;
    border-radius: 0 0 50% 50% / 0 0 15% 15%;
    /* Large curve */
    text-align: center;
    z-index: 2;
}

.hero-blob {
    position: absolute;
    top: 0 !important;
    /* Anchor to the very top */
    left: -10%;
    width: 900px;
    height: 1350px;
    /* Elongated blob */
    background: radial-gradient(circle, rgba(44, 64, 53, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 2;
    /* Moved up to cover parts of the photo */
}

.hero-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    /* Secure readability while background stays at top */
    position: relative;
    z-index: 3;
    /* Keep text above the blob */
}

.hero-title {
    font-size: 3.9rem;
    font-weight: 800;
    color: var(--text-dark);
    /* Match the image's black/dark text */
    margin-bottom: 1.5rem;
    letter-spacing: -2px;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.8), 4px 4px 12px rgba(0, 0, 0, 0.15);
    /* 3D Depth effect */
}

.hero-arrow {
    margin-bottom: 2rem;
    opacity: 1;
    /* Full visibility */
    display: flex;
    justify-content: center;
}

.hero-arrow svg path {
    stroke: #45644A !important;
    /* Olive Color */
    stroke-width: 4px !important;
    filter: drop-shadow(0 2px 5px rgba(69, 100, 74, 0.2));
}

.hero-arrow svg {
    width: 3.75rem;
    /* ~60px */
    height: 3.75rem;
    animation: bounceDown 2s infinite;
    /* Re-using existing animation */
}



.hero-bottom {
    padding: 0 0 0;
    margin-top: -18rem;
    /* Moved further up to fit section better */
    position: relative;
    z-index: 1;
}

.hero-bottom-left {
    width: 100%;
    padding-left: 0;
}

.hero-bottom-grid {
    display: flex;
    align-items: center;
    /* Center vertically */
    justify-content: flex-start;
    gap: 4rem;
    max-width: none !important;
    margin: 0;
}

.hero-photo-wrap {
    flex: 0 0 655px;
    /* Increased size by 20% from 546px */
}

.hero-portrait {
    width: 100%;
    height: 45rem;
    /* Proportional equivalent of ~74vh */
    object-fit: cover;
    border-radius: 0 30px 30px 0;
    /* Straight left edge for far-left look */
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.hero-slogan-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* Pulled next to the photo card */
    align-items: center;
}

.hero-slogan {
    font-family: 'goorm-sans', sans-serif;
    font-size: 3.17rem;
    /* Increased another 20% from 2.64rem */
    font-weight: 700;
    /* Increased for prominence + 3D look */
    line-height: 1.5;
    color: #45644A;
    /* Olive Color */
    width: 100%;
    max-width: 900px;
    /* Increased to allow 2-line break at larger font size */
    word-break: keep-all;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8), 3px 3px 10px rgba(69, 100, 74, 0.2);
    /* Soft dimensional effect */
    text-align: center;
    /* Center-aligned as requested */
    margin: 0;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.6rem;
    }

    .hero-bottom-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Stacked */
        gap: 2rem;
        text-align: center;
    }

    .hero-photo-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-width: 250px;
        /* Reduced to user request */
        margin: 0 auto;
    }

    .hero-portrait {
        height: auto;
        aspect-ratio: 3/4;
        border-radius: 20px;
        /* Softer for mobile */
    }

    .hero-slogan {
        font-size: 1.8rem;
        /* Scaled down for readability */
        padding: 0 1rem;
    }
}

/* Section 2: Mission (Redesigned) */
.mission-section {
    position: relative;
    background-color: var(--background-cream);
    padding: 10rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65rem;
    /* Proportional screen height */
}

.mission-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16rem;
    /* Fixed absolute scaling */
    font-weight: 900;
    color: var(--primary-green);
    opacity: 0.03;
    /* Subtle watermark */
    letter-spacing: 1.5rem;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.snap-section.is-inview .mission-bg-text {
    opacity: 0.04;
    transform: translate(-50%, -50%) scale(1.05);
}

.mission-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 60rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mission-center-text {
    max-width: 50rem;
    margin: 0 auto 5rem;
}

.mission-floating-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* Asymmetric 2-column */
    gap: 2rem !important;
    /* Standardized gap */
    width: 100% !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 5;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.mission-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box !important;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.8s ease;
    opacity: 0;
    transform: translateY(20px);
}

.snap-section.is-inview .mission-item-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Asymmetric Fluid Stagger */
.mission-item-wrapper:nth-child(2),
.mission-item-wrapper:nth-child(4) {
    transform: translateY(80px);
    /* Phase 2: Stagger applied */
}

.snap-section.is-inview .mission-item-wrapper:nth-child(2),
.snap-section.is-inview .mission-item-wrapper:nth-child(4) {
    transform: translateY(80px);
    /* Maintain stagger after entry */
}

.mission-title-above {
    font-family: 'Playfair Display', serif !important;
    font-size: 2rem !important;
    /* Fixed typography */
    color: var(--primary-green) !important;
    /* Dark Green */
    margin-bottom: -10px !important;
    /* Overlap effect */
    z-index: 10 !important;
    text-shadow: 3px 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: capitalize;
    word-break: keep-all;
}

.mission-card {
    position: relative !important;
    background: rgba(255, 255, 255, 0.5) !important;
    /* Semi-transparent */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    /* Glass border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    /* Fluid ratio */
    min-height: 160px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.card-icon {
    font-size: 4rem;
    /* High-impact emojis */
    line-height: 1;
}

.mission-subtitle-below {
    font-size: 1.25rem !important;
    color: var(--text-dark) !important;
    margin-top: 15px !important;
    font-weight: 500 !important;
    word-break: keep-all;
    text-align: center;
}

.card-title-ext {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    text-transform: capitalize !important;
    color: #A3B49D !important;
}

.card-desc-ext {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    width: 100%;
    color: var(--text-dark) !important;
    font-size: 1.2rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .mission-floating-cards {
        grid-template-columns: 1fr !important;
        /* 1 column stacking */
        gap: 3rem !important;
    }

    .mission-item-wrapper:nth-child(2),
    .mission-item-wrapper:nth-child(4) {
        transform: none !important;
        /* Reset stagger */
    }

    .mission-card {
        height: 160px !important;
    }

    .mission-title-above {
        font-size: 1.8rem !important;
    }
}

.mission-card .card-image {
    width: 100%;
    height: 100%;
}

.mission-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wave Divider */
.wave-divider {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: transparent;
}

.wave-divider svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

.mission-card-text h4 {
    color: #A3B9A8;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mission-card-text p {
    font-size: 1.1rem;
    color: var(--text-dark);
}

/* Section 3: Vision */
.vision-section {
    position: relative;
    background-color: white;
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
}

.vision-bar {
    background-color: var(--primary-green);
    color: white;
    height: 80px; /* Increased 2x from 40px */
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.vision-bar h2 {
    font-family: 'AtoZ', sans-serif;
    font-size: 2.5rem; /* Proportional to 80px */
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    transform: scale(1.2, 1.4);
    display: inline-block;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 10px 20px rgba(0, 0, 0, 0.3);
}

.vision-content {
    height: 35rem; /* Increased 30% from 27rem */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left; /* Changed alignment to left */
}

.vision-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 64, 53, 0.7);
    /* Slightly darker for better text contrast */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vision-text-wrap {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 1200px; /* Matched to upper section boundaries */
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.vision-text-wrap h3 {
    font-size: 2.86rem; /* Increased 30% from 2.2rem */
    font-weight: 500;
    line-height: 1.7;
    /* Optimized for the new message */
    word-break: keep-all;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.highlight-mint {
    color: var(--bg-soft-mint);
    font-weight: 800;
}

/* --- Inquiry Section Horizontal Cards --- */
.inquiry-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.inquiry-horizontal-card {
    background: #ffffff;
    /* Fallback white */
    border-radius: 30px;
    padding: 3.2rem 3rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Base gradient layer for all cards */
.inquiry-horizontal-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    /* Slightly larger to cover any border gap */
    background: linear-gradient(120deg, #FFF2CC 0%, #FFF2CC 22%, #FFFFFF 22.1%, #FFFFFF 100%);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

.inquiry-horizontal-card.card-orange::before {
    background: linear-gradient(120deg, #FF7A00 0%, #FF7A00 22%, #FFFFFF 22.1%, #FFFFFF 100%);
}

.inquiry-horizontal-card.card-olive::before {
    background: linear-gradient(120deg, #2C5E4E 0%, #2C5E4E 22%, #FFFFFF 22.1%, #FFFFFF 100%);
}

.inquiry-horizontal-card.card-pink::before {
    background: linear-gradient(120deg, #FFE4E8 0%, #FFE4E8 22%, #FFFFFF 22.1%, #FFFFFF 100%);
}

.inquiry-horizontal-card.card-blue::before {
    background: linear-gradient(120deg, #E3F1FF 0%, #E3F1FF 22%, #FFFFFF 22.1%, #FFFFFF 100%);
}

.inquiry-horizontal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: rgba(69, 100, 74, 0.1);
}

.card-icon-box {
    width: 80px;
    height: 80px;
    background: #f8fbf9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-text-box {
    text-align: left;
}

.card-text-box h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 0.5rem;
}

.card-text-box p {
    font-size: 1.05rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .inquiry-horizontal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .inquiry-horizontal-card {
        padding: 2rem;
        gap: 1.5rem;
    }

    .card-icon-box {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}

.footer-bottom {
    border-top: 1px solid rgba(44, 64, 53, 0.05);
    /* Softer olive border */
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.footer-info {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    text-align: center;
}

/* --- 메인 전광판 스타일 (Peek-a-boo 멀티컬럼) --- */
/* --- 메인 전광판 스타일 (웅장한 '풀 스크린' 개편) --- */
.main-billboard-section {
    position: relative;
    width: 100vw;
    height: 36.8rem;
    /* Reduced by 20% from 46rem */
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
    padding-bottom: 0;
    margin-bottom: 0;
    /* Removed margin to delete the gap between billboard and quick menu */
    overflow: hidden;
    background-color: #000;
}

@media (max-width: 768px) {
    .main-billboard-section {
        height: 100vh;
        /* Restore full screen for mobile */
    }
}

.billboard-slider {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    overflow: hidden;
    cursor: grab;
    z-index: 10;
    user-select: none;
    /* 드래그 시 텍스트 선택 방지 */
}

.billboard-slider.grabbing {
    cursor: grabbing;
}

.billboard-slider:active {
    cursor: grabbing;
}

.slider-wrapper {
    display: flex;
    gap: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide.slide-item {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    position: relative;
    user-select: none;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Split Screen Layout for Slider */
.slide-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    background-color: #1F242D; /* Sleek charcoal dark grey background */
}

/* Left Content Area */
.slide-left-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4rem 0 3rem;
    color: #ffffff;
    height: 100%;
    box-sizing: border-box;
}

.slide-text-wrapper {
    max-width: 750px;
    width: 100%;
    text-align: left;
}

.slide-status-badge {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--primary-green);
    color: #ffffff;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.slide-status-badge.badge-orange {
    background-color: var(--nemos-orange);
}

.slide-status-badge.badge-green {
    background-color: #2e7d32;
}

.slide-title {
    font-size: 3.2rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #ffffff;
    line-height: 1.25;
    word-break: keep-all;
}

.slide-desc {
    font-size: 1.15rem;
    color: #BAC2C7; /* Soft gray-white text */
    line-height: 1.6;
    margin-bottom: 3rem;
    word-break: keep-all;
}

/* CTA Wrapper & Buttons */
.slide-cta-wrapper {
    display: flex;
    gap: 12px;
}

.slide-cta-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}

.slide-cta-btn.btn-primary {
    background-color: var(--primary-green);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(44, 94, 78, 0.25);
}

.slide-cta-btn.btn-primary:hover {
    background-color: #1e4136; /* Darker olive green for hover */
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(44, 94, 78, 0.35);
}

.slide-cta-btn.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
}

.slide-cta-btn.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* Right Media Area */
.slide-right-media {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 3rem 0 4rem;
    height: 100%;
    box-sizing: border-box;
}

.slide-media-container {
    height: 85%;
    width: auto;
    aspect-ratio: 1 / 1.414; /* standard A4 poster ratio */
    border-radius: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.slide-media-container:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.slide-poster-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-media-container:hover .slide-poster-img {
    transform: scale(1.05);
}

.slide-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Adjust Billboard Height for split screen grid layout */
.main-billboard-section {
    height: 36.8rem !important; /* Reduced by 20% */
}

/* Responsive Stacking for Mobile/Tablet */
@media (max-width: 1100px) {
    .slide-title {
        font-size: 2.6rem;
    }
    .slide-media-container {
        height: 80%;
        width: auto;
        aspect-ratio: 1 / 1.414;
    }
    .slide-left-content {
        padding: 0 2rem 0 3rem;
    }
    .slide-right-media {
        padding: 0 3rem 0 2rem;
    }
}

@media (max-width: 992px) {
    .main-billboard-section {
        height: auto !important;
        min-height: auto !important;
    }
    .slide-split-container {
        grid-template-columns: 1fr;
        height: auto;
        padding-bottom: 4rem;
    }
    .slide-left-content {
        justify-content: center;
        padding: 4rem 2rem 2rem 2rem;
        height: auto;
    }
    .slide-text-wrapper {
        text-align: center;
    }
    .slide-status-badge {
        margin-bottom: 1rem;
    }
    .slide-title {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    .slide-desc {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .slide-cta-wrapper {
        justify-content: center;
    }
    .slide-right-media {
        justify-content: center;
        padding: 1rem 2rem 3rem 2rem;
        height: auto;
    }
    .slide-media-container {
        width: 75%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1 / 1.414;
    }
}

/* 슬라이더 화살표 제거 (사용자 요청) */
.slider-arrow {
    display: none !important;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev {
    left: 40px;
}

.slider-arrow.next {
    right: 40px;
}

.slider-dots {
    position: absolute;
    bottom: 40px;
    /* 카드 하단부 적정 위치 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 18px;
    /* 넓어진 카드에 맞춰 도트 간격 확대 */
    z-index: 100;
    pointer-events: auto;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 약한 테두리로 구분감 주기 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dot.active {
    background: #ffffff;
    width: 32px;
    /* 활성 상태에서 길쭉하게 변형하여 가시성 극대화 */
    border-radius: 6px;
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dot:hover {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .slider-arrow {
        display: none;
    }

    /* 모바일은 화살표 숨김 */
}

/* --- 연구소 소개 섹션 (히어로 스타일 고도화) --- */
main.scroll-container section.intro-section {
    position: relative;
    padding: 8rem 0 6rem !important;
    /* Balanced vertical padding */
    height: auto !important;
    min-height: 42rem !important;
    /* Increased for content comfort */
    display: block;
    /* Standard flow for precise alignment */
    background-image: url('../images/2.png') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    /* Baseline start */
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    main.scroll-container section.intro-section {
        height: auto !important;
        /* Allow content flow */
        min-height: 100vh !important;
        flex-direction: column !important;
        /* Stack children vertically */
        padding: 6rem 0 0 !important;
        /* Removed bottom padding for seamless attachment */
    }
}

/* 추가된 레이블 스타일 */
.intro-brand-wrap {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto 3rem;
    /* Centered container box */
    width: 100%;
    max-width: 1700px;
    padding: 0 3rem;
    /* EXACT Match to Logo baseline */
    z-index: 5;
    text-align: left;
    transform: none;
}

@media (max-width: 768px) {
    .intro-brand-wrap {
        padding: 0 1.5rem;
        text-align: center;
        margin-bottom: 4rem;
    }
}

main.scroll-container .intro-brand-label {
    font-family: 'Paperlogy', sans-serif !important;
    font-size: 1.8rem !important;
    /* Slightly increased for visibility */
    font-weight: 800 !important;
    /* Extra Bold */
    color: #91B295 !important;
    letter-spacing: 0px !important;
    /* Tight spacing as requested */
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

.intro-action-btn {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 14px 34px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.05em;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-transform: uppercase;
}

.intro-action-btn:hover {
    background: #91B295;
    border-color: #91B295;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

main.scroll-container .intro-brand-desc {
    font-family: 'Paperlogy', sans-serif !important;
    color: #ffffff !important;
    font-size: 2.3rem !important;
    /* Slightly increased for visibility */
    font-weight: 700 !important;
    /* Bold */
    opacity: 0.95 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
    display: block !important;
    margin-bottom: 1.2rem !important;
}

.intro-brand-subdesc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 2rem;
    max-width: 600px;
    word-break: keep-all;
}

.intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* 50% Dark Dim */
    z-index: 1;
}

.intro-section .container {
    position: relative;
    z-index: 2;
    /* Ensure content is above dim layer */
}

/* Intro Stats Dashboard (Relocated Content) */
.intro-stats-dashboard {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.intro-section.is-inview .intro-stats-dashboard {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.intro-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    color: #91B295;
    /* Matching brand label color */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.stat-odometer {
    font-size: 4.5rem;
    line-height: 1;
}

.stat-unit {
    font-size: 2.2rem;
    margin-left: 5px;
    font-weight: 500;
}

.stat-label {
    font-size: 1.1rem;
    color: #ffffff;
    opacity: 0.85;
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Responsive for Stats Dashboard */
@media (max-width: 768px) {
    .intro-stats-dashboard {
        flex-direction: row;
        /* 나란히 배치 */
        justify-content: center;
        gap: 2rem;
        /* Reduced gap for horizontal fit */
        margin-top: 2rem;
    }

    .stat-number-wrap {
        font-size: 2.5rem;
        /* Scaled down for side-by-side */
    }

    .stat-odometer {
        font-size: 2.5rem;
    }

    .stat-unit {
        font-size: 1.2rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }
}

.intro-content {
    max-width: 1000px;
    margin: 0 auto;
}

.intro-subtitle {
    display: block;
    color: var(--nemos-orange) !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

.intro-title {
    font-size: 4rem !important;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 2rem;
    line-height: 1.2;
    text-decoration: none;
    word-break: keep-all;
}

.intro-text {
    font-size: 1.3rem !important;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 auto 2rem;
    max-width: 50rem !important;
    word-break: keep-all;
}

.intro-text strong {
    color: #ffffff !important;
    font-weight: 700;
}



.intro-action {
    display: flex;
    justify-content: center;
}

.intro-badge-btn {
    display: inline-block;
    background-color: #ffffff;
    color: #222 !important;
    padding: 1.2rem 3.5rem;
    border-radius: 100px;
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-badge-btn:hover {
    transform: translateY(-5px) scale(1.05);
    background-color: var(--nemos-orange);
    color: white !important;
    box-shadow: 0 15px 45px rgba(255, 122, 0, 0.4);
}

@media (max-width: 1100px) {
    .intro-title {
        font-size: 3.5rem !important;
    }
}

@media (max-width: 992px) {
    .intro-title {
        font-size: 3rem !important;
    }
}

@media (max-width: 768px) {
    .intro-title {
        font-size: 2.4rem !important;
    }

    .intro-text {
        font-size: 1.15rem !important;
    }
}

/* --- 전역 앰비언트 배경 오브제 (Blobs) --- */
.global-ambient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Ensure it stays at the very back of the scroll context */
    pointer-events: none;
    overflow: hidden;
}

.ambient-blob {
    position: absolute;
    filter: blur(120px) contrast(1.1);
    /* 블러를 더욱 강화하여 부드러운 수채화톤 구현 */
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
    animation: floatAmbient 25s infinite alternate ease-in-out;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* 섹션 투명화 및 레이어 정리 */
.scroll-container section {
    background: transparent !important;
    /* 배경 블롭이 보이도록 섹션 배경 제거 */
    position: relative;
    z-index: 1;
    /* 블롭보다 위로 설정 */
}

.scroll-container .container,
.scroll-container .container-wide {
    position: relative;
    z-index: 2;
    /* 콘텐츠를 가장 위로 */
}

.blob-mint {
    background: #D1EAE2;
    width: 50rem;
    height: 50rem;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.blob-orange {
    background: #FFE0C4;
    width: 60rem;
    height: 60rem;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    animation-delay: -5s;
}

.blob-yellow {
    background: #FFF9C4;
    width: 55rem;
    height: 55rem;
    border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%;
    animation-delay: -10s;
}

.blob-green {
    background: #E8F3EE;
    /* Subtle Soft Green */
    width: 45rem;
    height: 45rem;
    border-radius: 50% 50% 30% 70% / 40% 60% 50% 50%;
    animation-delay: -15s;
}

@keyframes floatAmbient {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-50px, 30px) scale(1.08) rotate(8deg);
    }

    100% {
        transform: translate(30px, -40px) scale(0.92) rotate(-5deg);
    }
}

/* 프로그레스 바 스타일 */
.slider-controls-progress {
    margin-top: 3rem;
    margin-bottom: 4rem;
    text-align: center;
}

.progress-bar-bg {
    width: 100%;
    max-width: 400px;
    height: 6px;
    background: #E0E0E0;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.progress-bar-active {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-green, #2C5E4E);
    border-radius: 10px;
    width: 0%;
    transition: width 0.6s ease;
}

/* --- Projects Grid Section (Modern White & Olive) --- */
.projects-section {
    padding: 0 0 0 0;
    background-color: #F0ECE1; /* Soft beige/warm gray */
    position: relative;
    z-index: 10;
    height: 800px !important;
    min-height: 800px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.projects-header {
    text-align: left;
    margin-top: 0;
    margin-bottom: 2rem;
}
.projects-header h2 {
    margin-top: 0;
}


.projects-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 4rem 0 0 0;
}

.project-card {
    flex: 1;
    position: relative;
    background: #ffffff;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(145, 178, 149, 0.2);
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    /* Slanted Diagonal Shape */
    padding: 2rem 3rem;
    height: 35rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 -20px;
    /* Overlap for seamless diagonal look */
}

/* Dim Overlay Effect */
.project-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    /* 딤 처리 */
    transition: background 0.4s ease;
    z-index: 1;
}

.project-card:hover::before {
    background: rgba(0, 0, 0, 0.2);
    /* 호버 시 이미지가 더 잘 보임 */
}

.project-card>* {
    position: relative;
    z-index: 2;
    /* 딤 레이어 위로 콘텐츠 노출 */
}

.project-card:hover {
    flex: 1.4;
    /* Dynamic expansion on hover */
    border-color: #91B295;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
}

.project-icon {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.project-card:hover .project-icon {
    transform: scale(1.1) rotate(-8deg);
}

.project-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.2rem;
    font-family: 'Paperlogy', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.project-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    padding: 0 20px;
    word-break: keep-all;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
    .projects-section {
        height: auto !important;
        min-height: auto !important;
        padding: 4rem 0 !important;
    }

    .projects-grid {
        height: auto;
        flex-direction: column;
        gap: 2rem;
    }

    .project-card {
        margin: 0;
        clip-path: none;
        /* Reset slant for mobile list */
        padding: 4rem 2rem;
        height: auto;
        border-radius: 20px;
    }
}

/* Project Section Top Badge Styling */
.project-badge-container {
    display: inline-block;
    position: relative;
    padding: 0.8rem 3rem;
    margin-bottom: 2rem;
}

.project-badge-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2C4035;
    /* Deep Olive */
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    /* Horizontal Parallelogram */
    z-index: 1;
}

.project-top-label {
    position: relative;
    z-index: 2;
    color: #ffffff;
    /* White text on dark badge */
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

.projects-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(44, 64, 53, 0.1);
    /* Very Subtle Line */
    margin: 0;
}

/* Background Decorative Text */
.projects-bg-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-size: 20rem;
    font-weight: 900;
    color: rgba(44, 64, 53, 0.03);
    /* Extremely Transparent */
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.05em;
    user-select: none;
}

.project-number {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    z-index: 2;
}

/* --- 어드민 플로팅 내비게이션 (Fixed to stay on right) --- */
.admin-floating-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(18, 26, 22, 0.6);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-nav-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    color: #333;
}

.admin-nav-item:hover {
    background: var(--primary-green, #2C5E4E);
    color: white;
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 5px 15px rgba(44, 94, 78, 0.3);
}

.admin-nav-item.logout-btn:hover {
    background: #ff4d4f;
    box-shadow: 0 5px 15px rgba(255, 77, 79, 0.3);
}

/* 툴팁 (말풍선) 효과 */
.admin-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 65px;
    /* 아이콘 왼쪽으로 표시 */
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.admin-nav-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Partnership Form Section (Integrated from partnership.html)
   ========================================================================== */
/* --- Partnership & Inquiry Section (Deep Forest Modernization) --- */
#inquiry-section.inquiry-full-section {
    background: #F0ECE1 !important;
    /* Deep Forest Beige Concept - REVERTED */
    padding: 0 !important;
    /* Remove section padding */
    position: relative;
    overflow: hidden;
}

#inquiry-section .sub-hero-subtitle {
    color: #91B295 !important;
    opacity: 1;
}

#inquiry-section .sub-hero-title {
    color: #2C4035 !important;
}

#inquiry-section .sub-hero-desc {
    color: rgba(44, 64, 53, 0.7) !important;
}

/* --- Inquiry Typography List (Modern Minimalism) --- */
.inquiry-typography-list {
    margin-top: 2rem;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: column;
}

.inquiry-type-item {
    display: flex;
    align-items: flex-start;
    padding: 2.2rem 0rem;
    /* Removed 1.5rem left padding for Logo baseline match */
    border-bottom: 1px solid rgba(44, 64, 53, 0.1);
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

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

.inquiry-type-item:hover {
    background: rgba(145, 178, 149, 0.03);
    padding-left: 1.5rem;
    /* Slight shift on hover for interaction */
}

.type-num {
    font-size: 1rem;
    font-weight: 800;
    color: #91B295;
    margin-right: 3.5rem;
    font-family: 'Montserrat', sans-serif;
    padding-top: 0.3rem;
    letter-spacing: 0.1em;
}

.type-content {
    flex: 1;
}

.type-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #2C4035;
    margin-bottom: 0.8rem;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    letter-spacing: -0.05em;
}

.inquiry-type-item:hover .type-title {
    color: #91B295;
}

.type-ko {
    font-size: 1.1rem;
    font-weight: 400;
    color: #6A8A70;
    font-family: 'Paperlogy', sans-serif;
    letter-spacing: 0;
}

.type-desc {
    font-size: 0.95rem;
    color: rgba(44, 64, 53, 0.6);
    max-width: 900px;
    word-break: keep-all;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .type-title {
        font-size: 1.8rem;
    }

    .type-ko {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .inquiry-type-item {
        flex-direction: column;
        padding: 2rem 1rem;
    }

    .inquiry-type-item:hover {
        padding-left: 1.5rem;
    }

    .type-num {
        margin-bottom: 1rem;
    }

    .type-title {
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.6rem;
        gap: 0.4rem;
    }
}

/* --- Partnership & Inquiry Section (Light Forest Theme Conversion) --- */
.partnership-form-full-section {
    padding: 0 0 120px;
    /* Removed top padding to attach to inquiry section */
    position: relative;
    background: #FAF8F3 !important;
    /* Brighter beige for visibility */
    overflow: hidden;
}

.partnership-form-container {
    max-width: 1700px;
    /* Matched to .container for consistent alignment */
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 3rem;
    /* Matched to site-wide container padding */
}

@media (max-width: 768px) {
    .partnership-form-container {
        padding: 0 1.5rem;
    }
}

#partnership-form-wrapper .sub-hero-subtitle {
    color: var(--primary-green, #2C4035) !important;
    /* Dark green subtitle */
    opacity: 0.8;
}

.partnership-form-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-green, #2C4035) !important;
    /* Dark green header */
    margin-bottom: 1.5rem;
}

.partnership-form-header p {
    font-size: 1.25rem;
    color: var(--text-dark, #45644A) !important;
    /* Dark olive description */
    line-height: 1.6;
}

.partnership-form-card {
    width: 100%;
    /* Spans full container width */
    background: #ffffff;
    /* White card for light theme */
    border: 1px solid rgba(44, 64, 53, 0.08);
    /* Soft olive border */
    border-radius: 40px;
    padding: 5rem 4.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
}

@media (max-width: 768px) {
    .partnership-form-card {
        padding: 2.5rem 1.5rem;
        border-radius: 20px;
    }
}

.partnership-form-card .form-group label {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-green, #2C4035);
    /* Dark green label */
    opacity: 0.9;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}

.partnership-form-card .form-input,
.partnership-form-card .form-select,
.partnership-form-card .form-textarea {
    background: rgba(44, 64, 53, 0.02);
    /* Light olive tint */
    border: 1px solid rgba(44, 64, 53, 0.1);
    border-radius: 12px;
    padding: 1.2rem;
    color: var(--text-dark, #45644A);
    /* Dark green text */
    transition: all 0.3s ease;
}

.partnership-form-card .form-input:focus,
.partnership-form-card .form-select:focus,
.partnership-form-card .form-textarea:focus {
    border-color: #91B295;
    background: rgba(145, 178, 149, 0.08);
    box-shadow: 0 0 0 4px rgba(145, 178, 149, 0.15);
}

.partnership-submit-btn {
    background: #91B295;
    color: #121A16;
    font-weight: 800;
    border-radius: 12px;
    padding: 1.2rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3rem;
}

.partnership-submit-btn:hover {
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Modern Tab System */
.partnership-tabs {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 5rem;
    border-bottom: 1px solid rgba(44, 64, 53, 0.1);
}

.partnership-tabs .tab-item {
    padding: 1.5rem 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(44, 64, 53, 0.3);
    /* Muted inactive green */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.partnership-tabs .tab-item:hover {
    color: var(--primary-green, #2C4035);
}

.partnership-tabs .tab-item.active {
    color: #91B295;
    pointer-events: auto;
    /* Ensuring it's clickable */
}

.partnership-tabs .tab-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #91B295;
    box-shadow: 0 0 10px rgba(145, 178, 149, 0.6);
}

/* Tab Content Visibility */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: tabFadeIn 0.5s ease forwards;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Internal Form Detailed Elements */
.form-section-unit {
    margin-bottom: 3.5rem;
}

.form-separator-title {
    font-size: 1.25rem;
    color: var(--primary-green, #2C4035);
    /* Dark green separator */
    font-weight: 700;
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(44, 64, 53, 0.1);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
}

.form-agreement-wrap {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 1.8rem;
    margin-top: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.form-agreement-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    cursor: pointer;
    accent-color: #91B295;
}

.form-agreement-label {
    font-size: 0.95rem;
    color: rgba(212, 225, 209, 0.8);
    cursor: pointer;
    line-height: 1.5;
}

.agreement-detail {
    display: block;
    font-size: 0.8rem;
    color: rgba(212, 225, 209, 0.5);
    margin-top: 0.4rem;
}

.tab-info-box {
    text-align: center;
    padding: 4rem 2rem;
}

.tab-info-box h3 {
    font-size: 1.8rem;
    color: var(--primary-green, #2C4035);
    /* Dark green tab info */
    margin-bottom: 1.2rem;
    font-family: 'Montserrat', sans-serif;
}

.tab-info-box p {
    color: var(--text-dark, #45644A);
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
}

@media (max-width: 768px) {
    .inquiry-horizontal-grid {
        grid-template-columns: 1fr;
    }

    .partnership-form-card {
        padding: 3rem 1.5rem;
    }

    .partnership-tabs {
        gap: 1.5rem;
    }

    .partnership-tabs .tab-item {
        font-size: 0.85rem;
    }

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

    .quick-menu-title {
        font-size: 2.8rem;
    }

    .tab-info-box {
        padding: 2rem 1rem;
    }
}

/* Intro Stats Dashboard Positioning inside Hero Section */
.intro-stats-dashboard-wrap {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    width: 100%;
    max-width: 1700px;
    padding: 0 3rem;
    /* Baseline match for stats info */
    text-align: left;
}

@media (max-width: 768px) {
    .intro-stats-dashboard-wrap {
        position: relative;
        /* Change from absolute for mobile flow */
        bottom: auto;
        background: transparent;
        /* Remove bottom-specific gradient */
        padding: 0;
    }
}

.intro-stats-dashboard-wrap .intro-stats-dashboard {
    margin-top: 0;
}


/* Responsive Adjustment for Intro Position */
@media (max-width: 1200px) {
    .intro-brand-wrap {
        left: 80px;
        top: 80px;
    }
}

@media (max-width: 768px) {
    .intro-brand-wrap {
        left: 30px;
        top: 40px;
        width: calc(100% - 60px);
    }

    main.scroll-container .intro-brand-label {
        font-size: 1.4rem !important;
    }

    main.scroll-container .intro-brand-desc {
        font-size: 1.8rem !important;
    }

    .intro-brand-subdesc {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        width: 100%;
    }
}

/* ==========================================================================
   Section 4: People with Slow Mind Lab (함께하는 사람들 - 로고 그리드)
   ========================================================================== */
.people-section {
    padding: 0 0 0.5rem 0;
    background: #F0ECE1;
    /* Soft beige background */
    height: 600px !important;
    min-height: 600px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.people-header {
    margin-bottom: 1rem;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 3rem;
}

.people-header .sub-hero-title {
    white-space: nowrap;
    word-break: keep-all;
}

/* Logo Grid Optimization */
.partner-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 columns for logos */
    gap: 2rem;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 3rem;
}

.partner-logo-item {
    background: #ffffff;
    border-radius: 12px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 1px solid rgba(44, 64, 53, 0.05);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

.partner-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    /* Premium faded look */
    opacity: 0.6;
    transition: all 0.4s ease;
}

.partner-logo-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(44, 64, 53, 0.1);
    border-color: rgba(145, 178, 149, 0.4);
}

.partner-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.people-cta {
    margin-top: 6rem;
    text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .partner-logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .people-section {
        padding: 1rem 0 3rem 0;
        height: auto;
    }

    .people-header {
        padding: 0 1.5rem;
        text-align: center;
    }

    .partner-logo-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 1.5rem;
        gap: 1.2rem;
    }

    .partner-logo-item {
        height: 100px;
        padding: 1.2rem;
        border-radius: 12px;
    }
}

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

/* ==========================================================================
   Index Page Reorganization Style (mybanpo.org Reference)
   ========================================================================== */

/* 1. Main Billboard Slider Control Panel */
.billboard-control-panel {
    position: absolute;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px 18px;
    z-index: 10;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .billboard-control-panel {
        bottom: 2rem;
    }
}

.billboard-control-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s;
    user-select: none;
}

.billboard-control-btn:hover {
    opacity: 0.7;
}

.billboard-page-no {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    user-select: none;
}

.billboard-page-no .current-slide-no {
    font-weight: 700;
    color: var(--nemos-orange);
}

.billboard-page-no .slash {
    opacity: 0.5;
}

.billboard-page-no .total-slide-no {
    opacity: 0.8;
}

/* 2. Quick Menu Bar */
.quick-menu-bar-section {
    background-color: #E8F3EE !important; /* Light green */
    padding: 0.8rem 0 !important;
    position: relative;
    z-index: 5;
    border-bottom: 1px solid rgba(44, 64, 53, 0.05);
    min-height: auto !important;
    height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; 
    display: block !important; /* override the global flex display */
    scroll-snap-align: none !important; /* disable snap for this slim bar */
}

.quick-menu-grid {
    display: flex;
    justify-content: center;
    gap: 4rem; /* 아이콘 간격 50% 가깝게 조정 */
    flex-wrap: wrap;
    text-align: center;
}

.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-dark);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0.5rem 0;
}

.quick-menu-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: #f4f6f5; /* Very soft green-gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, background-color, box-shadow;
}

.quick-menu-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-green);
    transition: color 0.3s ease;
}

.quick-menu-item:hover .quick-menu-icon svg {
    color: #ffffff;
}

.quick-menu-item span {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c4035;
    white-space: nowrap;
    transition: color 0.3s;
}

.quick-menu-item:hover {
    transform: translateY(-4px);
}

.quick-menu-item:hover .quick-menu-icon {
    background-color: var(--primary-green);
    box-shadow: 0 10px 25px rgba(44, 64, 53, 0.15);
    transform: scale(1.05);
}

.quick-menu-item:hover span {
    color: var(--nemos-orange);
    text-decoration: none;
}

@media (max-width: 992px) {
    .quick-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .quick-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 1rem;
    }
    .quick-menu-icon {
        width: 64px;
        height: 64px;
    }
    .quick-menu-icon svg {
        width: 24px;
        height: 24px;
    }
    .quick-menu-item span {
        font-size: 0.85rem;
    }
}

/* 3. News Tab & Quick Banners Section */
.news-quick-section {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #ffffff;
    height: 700px !important;
    min-height: 700px !important;
    margin-top: -3rem !important; /* PC negative margin */
}

.news-quick-grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 4rem;
    height: 100%;
}

@media (max-width: 1200px) {
    .news-quick-section {
        height: auto !important;
        min-height: auto !important;
        margin-top: 2rem !important; /* Push down on tablets */
    }
    .news-quick-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
        height: auto;
    }
    .news-tab-wrapper,
    .quick-banner-wrapper {
        height: auto !important;
    }
    .quick-banner-card {
        flex: none !important;
    }
}

/* News Tab Wrapper */
.news-tab-wrapper {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(44, 64, 53, 0.03);
    border: 1px solid rgba(44, 64, 53, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-tab-content {
    flex: 1;
    min-height: 0;
}

.news-tab-pane.active {
    display: grid;
    height: 100%;
}

.news-tab-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #eaeaea;
    margin-bottom: 2.5rem;
    position: relative;
}

.news-tab-btn {
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #aaaaaa;
    padding: 0 1.5rem 1rem 1.5rem;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
    position: relative;
    bottom: -2px;
}

.news-tab-btn.active {
    color: var(--primary-green);
    border-bottom: 3px solid var(--primary-green);
}

.news-tab-btn:first-child {
    padding-left: 0;
}

.news-more-btn {
    margin-left: auto;
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 1rem;
    transition: color 0.2s;
}

.news-more-btn:hover {
    color: var(--nemos-orange);
}

/* Tab Content */
.news-tab-pane {
    display: none;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
    gap: 3rem;
    min-width: 0;
}

.news-tab-pane.active {
    display: grid;
}

@media (max-width: 768px) {
    .news-tab-pane {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Highlight Card */
.news-highlight-card {
    background-color: var(--bg-soft-mint);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(44, 64, 53, 0.08);
}

.highlight-link {
    display: flex;
    flex-direction: column;
    padding: 2.2rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    justify-content: space-between;
}

.highlight-badge {
    align-self: flex-start;
    background-color: var(--primary-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.highlight-badge.badge-orange {
    background-color: var(--nemos-orange);
}

.highlight-title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.highlight-desc {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.highlight-date {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

/* News List Items */
.news-list-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
}

.news-list-items li {
    border-bottom: 1px dashed #eaeaea;
    padding-bottom: 1rem;
}

.news-list-items li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-list-items a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    gap: 2rem;
    transition: color 0.2s;
}

.news-list-items a:hover {
    color: var(--nemos-orange);
}

.list-title {
    font-size: 1.05rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
    min-width: 0; /* Enable flex-item text overflow clamping */
}

.list-date {
    font-size: 0.9rem;
    color: var(--text-light);
    white-space: nowrap;
}

/* Right Wrapper (Stats & Banners) */
.quick-banner-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Stats Mini Dashboard */
.intro-stats-mini-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1.8rem;
    box-shadow: 0 10px 30px rgba(44, 64, 53, 0.03);
    border: 1px solid rgba(44, 64, 53, 0.05);
}

.mini-stat-item {
    text-align: center;
}

.mini-stat-item:first-child {
    border-right: 1px solid #eaeaea;
}

.mini-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-green);
    line-height: 1.2;
}

.mini-stat-num .plus {
    color: var(--nemos-orange);
}

.mini-stat-label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 6px;
    font-weight: 600;
}

/* Quick Banner Cards */
.quick-banner-card {
    display: flex;
    align-items: center;
    padding: 2.2rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    border: 1px solid transparent;
    flex: 1;
}

.quick-banner-card.card-orange {
    background-color: #FFF8F3;
    border-color: rgba(255, 122, 0, 0.1);
    color: var(--nemos-orange);
}

.quick-banner-card.card-green {
    background-color: var(--bg-soft-mint);
    border-color: rgba(44, 64, 53, 0.06);
    color: var(--primary-green);
}

.quick-banner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
}

.card-icon {
    font-size: 2.6rem;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.card-text {
    text-align: left;
}

.card-text h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: inherit;
}

.card-text p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.4;
    font-weight: 500;
    margin: 0;
}

.card-arrow {
    margin-left: auto;
    font-size: 1.6rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.quick-banner-card:hover .card-arrow {
    transform: translateX(5px);
}

/* 4. Section Title & Subtitle */
.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.section-title b {
    color: var(--nemos-orange);
    font-weight: 800;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 500;
}

/* 5. Nemos Gallery Slide Section */
.gallery-slide-section {
    padding: 8rem 0;
    background-color: #ffffff;
    overflow: hidden;
}

.gallery-slide-header {
    margin-bottom: 3.5rem;
}

.gallery-control-buttons {
    display: flex;
    gap: 10px;
}

.gallery-control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.gallery-control-btn:hover {
    background-color: var(--primary-green);
    color: #ffffff;
    border-color: var(--primary-green);
}

.gallery-slider-viewport {
    width: 100%;
    padding: 10px 0;
}

.gallery-slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.gallery-slide-card {
    flex: 0 0 290px;
    background: #ffffff;
    border-radius: var(--radius-sm);
    border: 1px solid #eaeaea;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-slide-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.gallery-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.gallery-slide-card:hover .gallery-card-img {
    transform: scale(1.05);
}

.gallery-card-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.gallery-card-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nemos-orange);
    background-color: #FFF8F3;
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start;
}

.gallery-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222222;
    line-height: 1.4;
    height: 3.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-date {
    font-size: 0.85rem;
    color: #999999;
}

/* 6. Partner Infinite Rolling Slider */
.partner-infinite-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #ffffff;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(44, 64, 53, 0.05);
    border-bottom: 1px solid rgba(44, 64, 53, 0.05);
}

.partner-infinite-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    animation: infiniteScroll 30s linear infinite;
}

.partner-infinite-track:hover {
    animation-play-state: paused;
}

.partner-infinite-track .partner-logo-item {
    flex-shrink: 0;
    width: 220px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s, border-color 0.3s;
}

.partner-infinite-track .partner-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: all 0.3s ease;
}

.partner-infinite-track .partner-logo-item:hover {
    transform: translateY(-5px);
    border-color: rgba(44, 64, 53, 0.15);
}

.partner-infinite-track .partner-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 2세트를 붙였으므로 정확히 전체 트랙 길이의 50%만큼 갔을 때 루프 초기화 */
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Program Inquiry Button & Modal Popup
   ========================================================================== */
.program-inquiry-btn {
    align-self: flex-end;
    margin-top: auto;
    background-color: var(--primary-green);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(44, 64, 53, 0.15);
}

.program-inquiry-btn:hover {
    background-color: #1e2d25;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(44, 64, 53, 0.25);
}

/* Inquiry Modal */
.inquiry-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inquiry-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: all 0.3s;
}

.inquiry-modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 440px;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
    animation: modalAppear 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.inquiry-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.inquiry-modal-close:hover {
    color: #333;
}

.inquiry-modal-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 0.5rem;
    text-align: center;
}

.inquiry-modal-subtitle {
    font-size: 0.95rem;
    color: #666;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.4;
    word-break: keep-all;
}

.inquiry-options-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inquiry-option-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    background-color: #fcfcfc;
}

.inquiry-option-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-green);
    box-shadow: 0 8px 20px rgba(44, 64, 53, 0.08);
    background-color: #ffffff;
}

.kakao-option:hover {
    border-color: #f7e600;
    box-shadow: 0 8px 20px rgba(247, 230, 0, 0.15);
}

.inquiry-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kakao-option .inquiry-option-icon {
    background-color: #f7e600;
}

.kakao-option .inquiry-option-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.inquiry-option-text {
    flex: 1;
}

.inquiry-option-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #222;
}

.inquiry-option-text p {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
    line-height: 1.3;
}

/* =========================================================================
   Floating Channels Widget Bar (Quick Menu Bar)
   ========================================================================= */
.floating-widget-bar {
    position: fixed;
    right: 24px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: auto;
}

.widget-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0;
    outline: none;
    overflow: hidden;
}

.widget-item img {
    width: 105%;
    height: 105%;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.widget-item .widget-icon {
    font-size: 1.2rem;
    font-weight: bold;
    color: #666;
    transition: color 0.3s ease;
}

/* Specific Hover Styles */
.widget-item:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.widget-top {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s;
}
.widget-top .widget-icon {
    color: #ffffff;
}

@media (max-width: 768px) {
    .floating-widget-bar {
        right: 16px;
        bottom: 80px;
        gap: 8px;
    }
    .widget-item {
        width: 44px;
        height: 44px;
        touch-action: manipulation;
    }
    .widget-item img {
        width: 100%;
        height: 100%;
    }
    .widget-item .widget-icon {
        font-size: 1rem;
    }
    /* Disable sticky hover for floating SNS widget items on mobile */
    .widget-item:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    }
    /* Active touch feedback for floating SNS widget items */
    .widget-item:active {
        transform: scale(0.88) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ==========================================================================
   Mobile Performance & Optimization Overrides
   ========================================================================== */
@media (max-width: 992px) {
    /* Enable grid properly for quick menu on tablets */
    .quick-menu-grid {
        display: grid !important;
    }
}

@media (max-width: 768px) {
    /* 1. Complete Scroll Snap Disabling for Mobile */
    html, html.home-snap, body, .scroll-container {
        scroll-snap-type: none !important;
        scroll-padding-top: 0 !important;
        scroll-behavior: auto !important;
    }
    
    .scroll-container section, 
    .snap-section, 
    .snap-align-start,
    section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
        min-height: auto !important;
    }

    /* 2. Hide watercolor blobs on mobile to prevent GPU blur filter paint storms */
    .moving-bg-blob,
    .hero-blob,
    .footer-blob,
    .ambient-blob,
    .blob,
    .blob-container,
    .ink-drop {
        display: none !important;
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    /* 3. Main Billboard Slider Mobile Overrides */
    .main-billboard-section, 
    .billboard-slider, 
    .slider-wrapper, 
    .slide.slide-item {
        height: auto !important;
        min-height: auto !important;
    }
    
    .slide-split-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding-bottom: 5.5rem !important; /* Space for absolute positioning of control buttons */
    }

    .slide-left-content {
        padding: 3rem 1.5rem 1.5rem 1.5rem !important;
        height: auto !important;
    }

    .slide-title {
        font-size: 1.65rem !important;
        margin-bottom: 0.8rem !important;
        line-height: 1.4 !important;
        word-break: keep-all !important;
    }

    .slide-desc {
        font-size: 0.9rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.5 !important;
        word-break: keep-all !important;
    }

    .slide-right-media {
        padding: 0.5rem 1.5rem 2.5rem 1.5rem !important;
        height: auto !important;
    }

    .slide-media-container {
        width: 60% !important;
        max-width: 220px !important;
        aspect-ratio: 1 / 1.414 !important;
    }

    .billboard-control-panel {
        bottom: 1.5rem !important;
    }

    /* 4. Quick Menu Grid 3 Columns Override & Touch Optimizations */
    .quick-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem 0.8rem !important;
    }

    .quick-menu-item {
        touch-action: manipulation;
    }

    /* Disable sticky hover for Quick Menu items on mobile */
    .quick-menu-item:hover {
        transform: none !important;
    }
    .quick-menu-item:hover .quick-menu-icon {
        background-color: #f4f6f5 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
        transform: none !important;
    }
    .quick-menu-item:hover .quick-menu-icon svg {
        color: var(--primary-green) !important;
    }
    .quick-menu-item:hover span {
        color: #2c4035 !important;
    }

    /* Active touch feedback for Quick Menu items */
    .quick-menu-item:active {
        transform: scale(0.92) !important;
    }
    .quick-menu-item:active .quick-menu-icon {
        background-color: var(--primary-green) !important;
        box-shadow: 0 4px 12px rgba(44, 64, 53, 0.2) !important;
        transform: scale(0.92) !important;
    }
    .quick-menu-item:active .quick-menu-icon svg {
        color: #ffffff !important;
    }
    .quick-menu-item:active span {
        color: var(--nemos-orange) !important;
    }

    /* 5. News Tab Section Mobile Overrides */
    .news-quick-section {
        height: auto !important;
        min-height: auto !important;
        padding-top: 2.5rem !important; /* Increased padding top */
        padding-bottom: 4.5rem !important; /* Increased padding-bottom to separate banner cards */
        margin-top: 2.5rem !important; /* Push down on mobile to prevent overlap with menu bar */
    }

    .news-quick-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        height: auto !important;
    }

    .news-tab-wrapper {
        padding: 1.2rem !important;
        height: auto !important;
    }

    .news-tab-header {
        margin-bottom: 1.5rem !important;
    }

    .news-tab-btn {
        font-size: 1.15rem !important;
        padding: 0 0.8rem 0.8rem 0.8rem !important;
    }

    .news-more-btn {
        font-size: 0.85rem !important;
        padding-bottom: 0.8rem !important;
    }

    .news-tab-pane {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .news-highlight-card .highlight-link {
        padding: 1.2rem !important;
    }

    .highlight-badge {
        margin-bottom: 0.8rem !important;
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    .highlight-title {
        font-size: 1.15rem !important;
        margin-bottom: 0.6rem !important;
    }

    .highlight-desc {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        -webkit-line-clamp: 2 !important; /* show only 2 lines on mobile */
    }

    .news-list-items {
        gap: 0.6rem !important;
    }

    .news-list-items li {
        padding-bottom: 0.6rem !important;
    }

    .list-title {
        font-size: 0.95rem !important;
    }

    .list-date {
        font-size: 0.8rem !important;
    }

    /* Stats dashboard inside news section */
    .intro-stats-mini-dashboard {
        padding: 1.2rem !important;
        gap: 0.8rem !important;
    }

    .mini-stat-num {
        font-size: 1.8rem !important;
    }

    .mini-stat-label {
        font-size: 0.75rem !important;
    }

    /* Quick banner card */
    .quick-banner-card {
        padding: 1.2rem 1.5rem !important;
        touch-action: manipulation;
    }

    /* Disable sticky hover for Quick Banner cards on mobile */
    .quick-banner-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .quick-banner-card:hover .card-arrow {
        transform: none !important;
    }

    /* Active touch feedback for Quick Banner cards */
    .quick-banner-card:active {
        transform: scale(0.97) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }
    .quick-banner-card:active .card-arrow {
        transform: translateX(4px) !important;
    }

    .card-icon {
        font-size: 2rem !important;
        margin-right: 1rem !important;
    }

    .card-text h3 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }

    .card-text p {
        font-size: 0.85rem !important;
    }

    /* 6. Projects Section Mobile Overrides */
    .projects-section {
        margin-top: 3.5rem !important; /* Margin separation between sections */
        padding-top: 3.5rem !important; /* Padding buffer inside section */
        height: auto !important;
        min-height: auto !important;
    }

    .projects-bg-text {
        display: none !important;
    }

    .projects-header {
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .section-title {
        font-size: 1.80rem !important;
        line-height: 1.35 !important;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
    }

    .projects-grid {
        margin-top: 2rem !important;
    }

    .project-card {
        padding: 3rem 1.5rem !important;
    }

    .project-card h3 {
        font-size: 1.25rem !important;
    }

    .project-card p {
        font-size: 0.85rem !important;
    }

    /* 7. People Section Mobile Overrides */
    .people-section {
        height: auto !important;
        min-height: auto !important;
        padding: 3rem 0 !important;
    }

    .people-header .sub-hero-title {
        white-space: normal !important;
        word-break: keep-all !important;
        font-size: 1.7rem !important;
        line-height: 1.35 !important;
    }

    .people-header .sub-hero-desc {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   10. Seasonal Program & Global Left Floating Button
   ========================================================================== */

.floating-program-widget {
    position: fixed;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    pointer-events: none; /* Let clicks pass through empty spaces */
}

/* 텍스트 탭: 평소에 좌측 가장자리에 붙어서 텍스트만 보임 */
.program-widget-tab {
    pointer-events: auto;
    background-color: var(--primary-green, #00A86B);
    color: white !important;
    padding: 20px 10px 20px 8px;
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 3px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
}

.program-widget-tab:hover {
    background-color: var(--nemos-orange, #FF7A00);
}

/* 호버 시 나타나는 카드 */
.program-widget-card {
    position: absolute;
    left: 0; /* Starts behind the tab */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    pointer-events: auto;
    display: flex;
    width: 370px;
    height: 140px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* 전체 위젯 호버 시 카드 전개 */
.floating-program-widget:hover .program-widget-card {
    left: 100%; /* Slides out past the tab */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 카드 이미지 (카드 전체를 덮도록 절대 좌표로 구성) */
.widget-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.widget-card-image img {
    position: absolute; /* Stack images on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1번 이미지 (photo1.jpg): 평소에 위에 노출되고, 호버 시 페이드 아웃 */
.widget-card-image img:first-child {
    z-index: 3;
    opacity: 1;
    transition: opacity 1.2s ease-in-out;
}

/* 2번 이미지 (photo2.jpg): 아래에 대기 */
.widget-card-image img:last-child {
    z-index: 2;
    opacity: 1;
}

/* 호버 시 1번 이미지를 페이드 아웃 시켜서 아래의 2번 이미지가 서서히 드러나게 함 */
.floating-program-widget:hover .widget-card-image img:first-child {
    opacity: 0;
}

/* 이미지 딤처리 (텍스트 가독성을 위해 어둡게 처리하는 선형 그래디언트 오버레이) */
.widget-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 4; /* 이미지보다 위에, 콘텐츠 텍스트보다 아래에 위치 */
    pointer-events: none;
}

/* 카드 내용 (딤처리 위에 텍스트가 뜨도록 설정) */
.widget-card-content {
    position: relative;
    z-index: 5; /* 딤처리 오버레이 위에 띄움 */
    width: 100%;
    height: 100%;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    box-sizing: border-box;
}

.widget-card-content h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff; /* 딤처리 배경 대비 흰색 글씨 */
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.widget-card-content p {
    margin: 0;
    font-size: 0.85rem;
    color: #e5e5e5; /* 딤처리 배경 대비 연한 그레이 본문 */
    margin-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.widget-card-btn {
    display: inline-block;
    padding: 7px 16px;
    background-color: var(--nemos-orange, #FF7A00); /* 오렌지 버튼으로 강력한 포인트 대비 */
    color: white !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3);
}

.widget-card-btn:hover {
    background-color: #e66a00;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(255, 122, 0, 0.5);
}

/* Seasonal Program Page Styles */
.program-intro-header {
    position: relative;
    min-height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(20, 24, 33, 0.72), rgba(20, 24, 33, 0.78)), url('../images/photo1.jpg') no-repeat center center; /* 활동사진 전체 어두운 그레이/블랙 딤처리 */
    background-size: cover;
    padding: 40px 0 80px;
    box-sizing: border-box;
    text-align: center;
}

.program-intro-header .badge {
    display: inline-block;
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
    padding: 0.3rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    border-radius: 0;
}

.program-intro-header h1 {
    font-family: 'Nanum Myeongjo', 'Batang', Georgia, serif; /* 정갈한 명조체 */
    font-size: 3rem; /* 크기 상향 */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    line-height: 1.35;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.program-intro-header .divider {
    width: 80px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1.8rem auto;
}

.program-intro-header p {
    font-size: 1.15rem;
    color: #E2E8F0;
    line-height: 1.75;
    max-width: 750px;
    margin: 0 auto;
    word-break: keep-all;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.program-details-section {
    padding: 6rem 0;
    background-color: #ffffff;
}

/* Vision Section Styles */
.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.vision-card {
    background: linear-gradient(145deg, #ffffff 0%, #F5FAF7 100%);
    border: 1px solid rgba(44, 64, 53, 0.08);
    border-radius: 0;
    padding: 2.5rem;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(44, 64, 53, 0.03);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vision-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(44, 64, 53, 0.08);
}

.vision-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-green);
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.vision-card-quote {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1F2937;
    background: #FFF8F2;
    border-left: 4px solid var(--nemos-orange);
    border-radius: 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    line-height: 1.6;
    word-break: keep-all;
    box-shadow: 0 2px 8px rgba(255, 122, 0, 0.02);
}

@media (min-width: 1024px) {
    .vision-card-quote {
        white-space: nowrap;
        font-size: 0.95rem;
    }
}

.vision-card-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.vision-detail-item h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.vision-detail-item h5::before {
    content: "—";
    color: var(--nemos-orange);
    margin-right: 0.5rem;
    font-weight: 700;
}

.vision-detail-item p {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.65;
    margin: 0;
    word-break: keep-all;
}

.vision-footnote {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.8rem;
    font-weight: 500;
    display: block;
}

/* Trapezoid Slanted Grid Styles (Program Purpose) */
.trapezoid-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.trapezoid-card {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(145, 178, 149, 0.2);
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); /* Slanted Diagonal Shape */
    padding: 3rem 2.5rem;
    height: 30rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 -20px; /* Overlap for seamless diagonal look */
    box-sizing: border-box;
}

/* Dim Overlay Effect */
.trapezoid-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* 딤 처리 */
    transition: background 0.4s ease;
    z-index: 1;
}

.trapezoid-card:hover::before {
    background: rgba(0, 0, 0, 0.25); /* 호버 시 이미지가 더 잘 보임 */
}

.trapezoid-card>* {
    position: relative;
    z-index: 2; /* 딤 레이어 위로 콘텐츠 노출 */
}

.trapezoid-card:hover {
    flex: 1.4; /* Dynamic expansion on hover */
    border-color: #91B295;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
}

.trapezoid-card-inner {
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.trapezoid-card-tag {
    display: inline-block;
    background-color: rgba(255, 122, 0, 0.15);
    color: #FFF;
    border: 1px solid rgba(255, 122, 0, 0.5);
    padding: 0.25rem 0.8rem;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trapezoid-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.35;
    font-family: 'Paperlogy', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.trapezoid-card-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin: 0;
    padding: 0 10px;
    word-break: keep-all;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.program-section-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.program-section-subtitle {
    font-size: 1.05rem;
    color: var(--text-light);
    font-weight: 500;
    margin: 0;
}

/* 여름방학 세부 프로그램 안내 (선형 구획 표/리스트 뷰) */
.program-schedule-section {
    padding: 6rem 0 0 0;
    background-color: #ffffff;
    border-top: 1px solid #E5E7EB;
}

.program-info-list {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 2px solid #0B192C; /* 딥 네이비 메인 경계선 */
}

.program-info-row {
    display: flex;
    padding: 1.8rem 0;
    border-bottom: 1px solid #E5E7EB;
    align-items: flex-start;
}

.program-info-label {
    width: 180px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0B192C;
    flex-shrink: 0;
}

.program-info-val {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.65;
    flex-grow: 1;
    word-break: keep-all;
}

.program-weekly-plan {
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.program-weekly-item {
    padding: 1.2rem;
    background-color: #FAFAFA; /* 차분한 웜 그레이 */
    border-left: 3px solid #1B4332; /* 포레스트 그린 포인트 선 */
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
}

.program-weekly-item strong {
    display: block;
    font-size: 1rem;
    color: #0B192C;
    margin-bottom: 0.25rem;
}

.program-weekly-item span {
    display: block;
    font-size: 0.9rem;
    color: #4B5563;
    line-height: 1.5;
}

/* 신청서 영역 */
.program-apply-section {
    padding: 0 0 9rem 0; /* 하단 플로팅 버튼 여유 공간 확보 */
    background-color: #FAFAFA; /* 옅은 그레이 전환으로 구획 분리 */
    border-top: 1px solid #E5E7EB;
}

.program-apply-card {
    background: #ffffff;
    padding: 3.5rem 3rem;
    border-radius: 4px; /* 직각 구성 */
    border: 1px solid #E5E7EB;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.program-apply-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #0B192C;
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.program-apply-card .subtitle {
    text-align: center;
    color: #666666;
    font-size: 0.95rem;
    margin-bottom: 3rem;
}

.program-apply-form .form-group {
    margin-bottom: 1.5rem;
}

.program-apply-form .form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

.program-apply-form .form-input,
.program-apply-form .form-textarea,
.program-apply-form .form-select {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    border: 1px solid #D1D5DB;
    border-radius: 4px; /* Sharp corners */
    background-color: #ffffff;
    color: #1F2937;
    font-family: inherit;
    transition: border-color 0.2s;
    box-shadow: none;
}

.program-apply-form .form-input:focus,
.program-apply-form .form-textarea:focus,
.program-apply-form .form-select:focus {
    border-color: #0B192C;
    outline: none;
}

.program-submit-btn-solid {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    background-color: #0B192C; /* Navy Solid Button */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.program-submit-btn-solid:hover {
    background-color: #152A4A;
}

/* 하단 고정형 신청하기 플로팅 바 (Rectangular FAB) */
.program-fixed-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0B192C; /* 딥 네이비 솔리드 바 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 999;
    padding: 14px 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.program-fixed-cta-btn {
    background-color: var(--nemos-orange, #FF7A00); /* 묵직한 오렌지 솔리드 */
    color: white !important;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 50px;
    border-radius: 4px; /* 직각형태 */
    width: auto;
    min-width: 300px;
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(255, 122, 0, 0.35);
    letter-spacing: 0.5px;
}

.program-fixed-cta-btn:hover {
    background-color: #E66A00;
    transform: translateY(-1px);
}

.program-fixed-cta-btn:active {
    transform: scale(0.98);
}

/* Mobile Program Overrides */
@media (max-width: 768px) {
    .program-widget-card {
        display: none !important; /* Hide hover card on mobile */
    }
    
    .program-widget-tab {
        writing-mode: horizontal-tb !important; /* Horizontal on mobile */
        border-radius: 30px !important;
        padding: 0.8rem 1.4rem !important;
        font-size: 0.95rem !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        top: auto !important;
        transform: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
        z-index: 9999 !important;
        touch-action: manipulation !important;
        background-color: var(--primary-green, #00A86B) !important;
        color: white !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        box-sizing: border-box !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
    }

    .program-widget-tab:hover {
        transform: none !important;
        background-color: var(--primary-green, #00A86B) !important;
    }

    .program-widget-tab:active {
        transform: scale(0.92) !important;
        background-color: var(--nemos-orange, #FF7A00) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }

    .program-intro-header {
        min-height: 30rem;
        padding: 40px 1.5rem 60px;
    }

    .program-intro-header h1 {
        font-size: 1.85rem;
    }

    .program-intro-header p {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .program-details-section {
        padding: 4rem 1.5rem;
    }

    .program-section-title {
        font-size: 1.65rem;
        word-break: keep-all;
    }

    .program-apply-section {
        padding: 0 1.5rem 4rem 1.5rem;
    }

    .program-schedule-section {
        padding: 4rem 1.5rem 0 1.5rem;
    }

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .vision-card {
        padding: 1.8rem;
    }

    .trapezoid-grid {
        flex-direction: column;
        gap: 1.5rem;
    }

    .trapezoid-card {
        margin: 0 !important;
        clip-path: none !important;
        height: auto !important;
        padding: 3rem 1.5rem !important;
        transform: none !important;
    }

    .trapezoid-card:hover {
        transform: translateY(-5px) !important;
    }

    .trapezoid-card-inner {
        transform: none !important;
    }

    .program-info-row {
        flex-direction: column;
        padding: 1.2rem 0;
        gap: 0.5rem;
    }

    .program-info-label {
        width: 100%;
        font-size: 1rem;
    }

    .program-info-val {
        width: 100%;
        font-size: 0.9rem;
    }

    .program-apply-card {
        padding: 2.5rem 1.5rem;
    }

    .program-apply-card h2 {
        font-size: 1.6rem;
    }

    .program-fixed-cta-bar {
        padding: 10px 15px;
    }

    .program-fixed-cta-btn {
        width: 100%;
        min-width: auto;
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* 신청서 모달 팝업 스타일 */
.program-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.program-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.program-modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.program-modal.active .program-modal-content {
    transform: translateY(0);
}

.program-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 2.25rem;
    font-weight: 300;
    color: #6B7280;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.program-modal-close:hover {
    color: #111827;
}

/* 모달 내부 스크롤바 커스텀 */
.program-modal-content::-webkit-scrollbar {
    width: 8px;
}
.program-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.program-modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
.program-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 주요 이력 섹션 스타일 (타임라인 레이아웃) */
.program-history-section {
    padding: 6rem 0;
    background-color: #ffffff;
    border-top: 1px solid #E5E7EB;
}

.program-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #E5E7EB;
    margin-left: 15px;
    margin-top: 2rem;
}

.timeline-year-block {
    margin-bottom: 3.5rem;
    position: relative;
}

.timeline-year-block:last-child {
    margin-bottom: 0;
}

.timeline-year-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1B4332; /* Forest green */
    margin-bottom: 2rem;
    margin-left: -44px;
    display: inline-block;
    background: #ffffff;
    padding: 0.2rem 0.8rem;
    border: 2px solid #1B4332;
    border-radius: 4px;
    z-index: 10;
    position: relative;
}

.timeline-events {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-event-row {
    display: flex;
    gap: 2rem;
    position: relative;
}

.timeline-event-row::before {
    content: '';
    position: absolute;
    left: -37px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FF7A00; /* Orange node */
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #E5E7EB;
    z-index: 5;
}

.timeline-event-date {
    flex-shrink: 0;
    width: 110px;
    font-size: 1rem;
    font-weight: 700;
    color: #FF7A00; /* Nemos Orange */
    padding-top: 8px;
    letter-spacing: -0.5px;
}

.timeline-event-content {
    flex-grow: 1;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 1.2rem 1.4rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.timeline-event-content:hover {
    transform: translateY(-2px);
    border-color: #1B4332; /* 포레스트 그린 경계선 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.timeline-event-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.timeline-event-details {
    margin: 0;
    padding-left: 1.2rem;
    list-style-type: disc;
}

.timeline-event-details li {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

.timeline-event-details li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .program-history-section {
        padding: 4rem 1.5rem;
    }
    .program-timeline {
        padding-left: 0;
        border-left: none;
        margin-left: 0;
    }
    .timeline-year-title {
        margin-left: 0;
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }
    .timeline-event-row {
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 1.5rem;
    }
    .timeline-event-row::before {
        display: none;
    }
    .timeline-event-date {
        width: 100%;
        padding-top: 0;
        font-size: 1rem;
    }
    .timeline-event-content {
        padding: 1rem;
    }
}

/* 카카오톡 1:1 상담문의 플로팅 퀵버튼 */
.kakao-inquiry-float {
    position: fixed;
    bottom: 95px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FEE500;
    color: #191919 !important;
    text-decoration: none !important;
    padding: 16px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.35rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kakao-inquiry-float img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.kakao-inquiry-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.kakao-inquiry-float:active {
    transform: scale(0.96);
}

@media (max-width: 768px) {
    .kakao-inquiry-float {
        bottom: 90px;
        right: 16px;
        padding: 12px 20px;
        font-size: 1.15rem;
        gap: 10px;
    }
    .kakao-inquiry-float img {
        width: 28px;
        height: 28px;
    }
}

/* Mobile Auth & Admin Gear Styles */
.mobile-auth-wrapper {
    display: none;
}
.mobile-admin-gear {
    display: none;
}

@media (max-width: 768px) {
    .mobile-auth-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .mobile-auth-wrapper .top-auth-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
    }
    .mobile-auth-wrapper .header-meta-link {
        font-size: 1.2rem;
        color: #333;
        text-decoration: none;
        font-weight: 600;
    }
    .mobile-auth-wrapper .header-meta-link strong {
        color: var(--primary-green, #2c4035);
    }
    .mobile-auth-wrapper .header-meta-divider {
        color: #ddd;
        font-size: 1rem;
    }
    .mobile-admin-gear {
        position: absolute;
        right: 65px; /* Left of hamburger menu */
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #333;
        text-decoration: none;
        z-index: 1002;
    }
}

/* ==========================================================================
   Admin Mobile Layout Optimizations
   ========================================================================== */
@media (max-width: 768px) {
    /* Admin Floating Navigation to Bottom Tab Bar */
    .admin-floating-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        background: rgba(18, 26, 22, 0.96) !important;
        border-radius: 0 !important;
        padding: 10px 15px !important;
        gap: 12px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
        z-index: 99999 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        scrollbar-width: none !important; /* Firefox */
    }

    .admin-floating-nav::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }

    .admin-nav-item {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    /* Hide the original vertical divider */
    .admin-floating-nav div[style*="height: 1px"] {
        display: none !important;
    }

    /* Admin Page Content Spacing & Sizing */
    main section.container {
        padding-top: 100px !important;
        padding-bottom: 8rem !important; /* Clearance for bottom tab bar */
    }

    main section.container h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    main section.container p {
        font-size: 0.9rem !important;
        margin-bottom: 2rem !important;
    }

    /* Admin Form Container Optimization */
    .admin-form-container {
        padding: 1.5rem !important;
        margin: 1.5rem auto !important;
        border-radius: 0 !important; /* Straight border radius */
    }

    /* BBS Write/Edit Table stacking on mobile */
    .bbs-write-table,
    .bbs-write-table tbody,
    .bbs-write-table tr,
    .bbs-write-table th,
    .bbs-write-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .bbs-write-table th {
        text-align: left !important;
        background-color: #f7f7f7 !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding: 0.8rem 1rem !important;
        width: 100% !important;
    }
    
    .bbs-write-table td {
        padding: 1rem !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .bbs-input-select {
        width: 100% !important;
        min-width: unset !important;
    }
}