:root {
    --bg-color: #ffffff;
    /* Clean White */
    --text-primary: #0f172a;
    /* Dark Navy Text */
    --text-secondary: #64748b;
    /* Slate Gray */
    --gold: #2563eb;
    /* Royal Blue (Primary) */
    --gold-glow: rgba(37, 99, 235, 0.2);
    --white: #ffffff;
    --card-bg: #eff6ff;
    /* Very Light Blue */
    --nav-height: 120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

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

h1,
h2,
h3,
.logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

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

ul {
    list-style: none;
}

/* Utilities */
.text-gold {
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    flex-wrap: wrap;
    /* Allow wrapping */
}

.section {
    padding: 120px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 100px;
    /* Increased logo size */
    width: auto;
    filter: none;
}

.btn-nav {
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    gap: 5rem;
    /* Increased spacing */
    align-items: center;
    list-style: none;
    margin: 0 auto;
    /* Center the menu */
}

.nav-item {
    position: relative;
    padding: 10px 0;
}

.nav-link {
    font-size: 1.3rem;
    /* Increased font size */
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.nav-item:hover .nav-link {
    color: var(--gold);
}

.nav-item:hover .nav-link::after {
    width: 100%;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    min-width: 180px;
    padding: 15px 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: rgba(37, 99, 235, 0.05);
    color: var(--gold);
    padding-left: 25px;
    /* Slight movement effect */
}

/* Mobile Responsive Menu Adjustments */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--text-primary);
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
        margin-left: 20px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 60px;
        /* Matched to simplified mobile nav height */
        gap: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        padding: 20px 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }


    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 16px 0;
        width: 100%;
    }

    .nav-link {
        font-size: 1.5rem;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        display: none;
        /* Hide by default on mobile, maybe toggle? or just show all */
        padding: 0;
        min-width: unset;
        width: 100%;
    }

    .dropdown-menu li a {
        padding: 10px 0;
        color: var(--text-secondary);
    }

    /* Simple expand for mobile dropdowns: show them always or on click. 
       For simplicity, let's just Show All for now or hide usage. 
       Better UX: Show them indented. */
    .dropdown-menu {
        display: block;
        /* Show all links on mobile for easy access or use JS to toggle. Let's show all. */
        margin-top: 10px;
        background: #f9f9f9;
        border-radius: 0;
    }

    .nav-btn-container {
        display: none;
        /* Often hidden inside menu or kept in header. Let's keep existing behavior: hidden or moved? */
    }

    /* We need the buttons accessible. Let's put them in the menu or keep header simple. 
       The current HTML structure has them separate. 
       On mobile, we usually want them inside the menu if space is tight. 
       For now, let's keep them in header but maybe scale down or hide 'Naver Cafe' text? */
    .nav-btn-container {
        display: flex;
        gap: 10px;
    }

    .btn-naver,
    .btn-nav {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    /* Hero adjustments */
    .pro-hero,
    .hero {
        flex-direction: column;
        padding-top: 60px;
        /* Adjusted for smaller mobile nav */
        height: auto;
        min-height: 100vh;
    }

    .hero-left,
    .hero-right,
    .strategy-left,
    .contact-right {
        width: 100%;
        padding: 40px 20px;
        text-align: center;
    }

    .hero-left p {
        margin: 0 auto 40px;
        /* Center align text block */
        border-left: none;
        border-top: 3px solid var(--point-red);
        padding-top: 20px;
        padding-left: 0;
    }

    .signage-frame {
        width: 90%;
        height: auto;
        aspect-ratio: 2/3;
        padding: 20px;
    }

    .signage-content h2 {
        font-size: 2.5rem;
    }

    /* Mobile Header Resizing */
    .navbar {
        height: 60px;
        /* Reduced from 120px */
        padding: 0 15px;
    }

    .logo img {
        height: 40px;
        /* Reduced from 100px */
    }

    .hamburger {
        transform: scale(0.8);
        margin-left: 10px;
    }

    /* Compact Buttons for Mobile */
    .nav-btn-container {
        display: flex;
        gap: 5px;
    }

    .btn-naver,
    .btn-nav {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        white-space: nowrap;
    }
}

.nav-btn-container {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn-naver {
    border: 1px solid #03C75A;
    /* Naver Green */
    color: #03C75A;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-naver:hover {
    background: #03C75A;
    color: #ffffff;
}

.btn-nav {
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-nav:hover {
    background: var(--gold);
    color: var(--bg-color);
}

/* Hero */
.hero {
    height: 100vh;
    padding-top: var(--nav-height);
    position: relative;
    display: flex;
    align-items: center;
    align-items: center;
    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
}

.hero-content {
    flex: 1;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.sub-copy {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-weight: 300;
}

.btn-group {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    font-size: 1rem;
    display: inline-block;
}

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

.btn-primary {
    background: var(--gold);
    color: var(--bg-color);
    border: none;
}

.btn-outline {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    background: transparent;
}

.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 600px;
    filter: drop-shadow(0 0 30px rgba(37, 99, 235, 0.15));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    opacity: 0.6;
}

.scroll-down .arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    transform: rotate(45deg);
}

/* Sections */
.reverse {
    flex-direction: row-reverse;
}

.section-title {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.quote {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 3rem;
    padding-left: 20px;
    border-left: 3px solid var(--gold);
    font-style: italic;
}

.feature-list li {
    margin-bottom: 2rem;
}

.feature-list strong,
.feature-list .icon {
    display: block;
    font-size: 1.1rem;
    /* Slightly larger heading for list items */
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.feature-list p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-wrapper img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Contact Section */
.contact {
    background: #f0f9ff;
    /* Pale Sky Blue */
    color: #0f172a;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    width: 100%;
}

.contact-header {
    margin-bottom: 3rem;
}

.contact-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0a192f;
}

.contact-header p {
    color: #666;
    font-size: 1.1rem;
}

.contact-form {
    text-align: left;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.08);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: #333;
}

.radio-label input[type="radio"] {
    width: auto;
    margin-right: 10px;
    accent-color: var(--gold);
    /* Gold color for the radio button */
    transform: scale(1.2);
}

.form-group input:focus {
    outline: none;
    border-color: var(--gold);
}

.btn-block {
    width: 100%;
    margin-top: 1rem;
    font-size: 1.2rem;
    background: #1e3a8a;
    /* Darker Blue */
    color: white;
}

.btn-block:hover {
    background: #172554;
}

footer {
    background: #f1f1f1;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .reverse {
        flex-direction: column;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .quote {
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
        text-align: left;
    }

    .image-wrapper img,
    .hero-image img {
        max-width: 80%;
    }


    .contact-form {
        padding: 20px;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 40px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    overflow-y: auto;
    padding-right: 10px;
    line-height: 1.6;
    color: #444;
    white-space: pre-line;
    /* Preserves newlines from text */
}

/* Checkbox Style */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.checkbox-group input {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.link-text {
    color: var(--gold);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 5px;
    font-weight: 500;
}

/* Location Page Styles */
.location-section {
    padding: 160px 20px 100px;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    background-color: #f8f9fa;
}

.location-container {
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1a1a1a;
}

.map-wrapper {
    margin-bottom: 3rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

.info-card {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    text-align: left;
}

.info-item h3 {
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 10px;
    font-weight: 600;
}

.info-item p {
    font-size: 1.1rem;
    color: #333;
}

.highlight-text {
    font-weight: 600;
    background: linear-gradient(120deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    padding: 2px 5px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .info-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile Portrait Safety */
@media (max-width: 480px) {

    .container,
    .section,
    .pro-hero,
    .pro-ceo,
    .pro-contact,
    .members-container,
    .location-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .signage-frame {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        aspect-ratio: 2/3;
    }

    h1,
    .hero-left h1,
    .strategy-title,
    .section-title,
    .ceo-main-copy {
        font-size: 2.2rem !important;
        word-wrap: break-word;
        word-break: keep-all;
    }

    .signage-content h2 {
        font-size: 2.5rem !important;
    }

    .hero-right,
    .strategy-left {
        min-height: 400px;
        /* Ensure visibility */
    }

    /* Prevent horizontal scroll from large elements */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
}