@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ==========================================================================
   1. Core & Reset
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* SPA Transitions */
.page-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    overflow: hidden;
    /* Default hidden scroll */
}

.page-view.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Page Specific Overrides */
#page-home {
    z-index: 10;
}

#page-about {
    z-index: 20;
    /* Above home */
    background: var(--bg-color);
    /* Solid Black */
    /* overflow-y: auto; REMOVED for Window Scroll */
    /* overscroll-behavior-y: auto; REMOVED for Window Scroll */
    position: relative;
    /* Changed to relative to ensure body scroll works! */
    top: 0;
    left: 0;
    min-height: 100vh;
    padding: 50vh 50px 50px;
}

:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --text-color-secondary: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);
    --img-filter: none;
    --card-bg: #000000;
    --modal-bg: rgba(20, 20, 20, 0.85);
    --modal-border: rgba(255, 255, 255, 0.1);
    --button-bg: rgba(255, 255, 255, 0.08);
    --button-bg-hover: rgba(255, 255, 255, 0.15);
    --divider-color: rgba(255, 255, 255, 0.2);
    --text-gray: #cccccc;
    --text-gray-dark: #999999;
    --gradient-color: rgba(0, 0, 0, 1);
    /* For toggles */
    --toggle-inactive: 0.5;
    --toggle-active: 1;
}

body.day-mode {
    --bg-color: #ffffff;
    --text-color: #000000;
    --text-color-secondary: rgba(0, 0, 0, 0.6);
    --border-color: rgba(0, 0, 0, 0.1);
    --img-filter: invert(1);
    --card-bg: #ffffff;
    --modal-bg: rgba(240, 240, 240, 0.9);
    --modal-border: rgba(0, 0, 0, 0.1);
    --button-bg: rgba(0, 0, 0, 0.05);
    --button-bg-hover: rgba(0, 0, 0, 0.1);
    --divider-color: rgba(0, 0, 0, 0.1);
    --text-gray: #444444;
    --text-gray-dark: #666666;
    --gradient-color: rgba(255, 255, 255, 1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    width: 100%;
    height: 100%;
    /* Critical for absolute children */
    overflow: hidden;
    /* Prevent body itself from scrolling by default (Home) */
    opacity: 0;
    transition: opacity 3.0s ease-out, background-color 0.5s, color 0.5s;
}

/* Allow body scroll when on about page */
body.on-about-page {
    overflow-y: auto;
    overscroll-behavior-y: auto;
    /* Maximal bounce */
}

body.loaded {
    opacity: 1;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Lenis Recommended Styles */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
    color: transparent;
    cursor: default;
}

/* Allow Body Scroll on About Page */
body.on-about-page {
    height: auto;
    overflow: visible;
    overflow-x: hidden;
}

/* Scroll Fix Helper */
html.allow-scroll {
    overflow-y: auto !important;
    height: auto;
}

/* Scroll Mode for Home Page (Safety fallback) */
body.scroll-mode {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.scroll-mode #page-home {
    flex: 1;
    /* Takes remaining space */
    display: block;
    width: 100%;
    min-height: auto;
    /* Remove forced 100vh */
    padding: 0;
    overflow-x: hidden;
}

.scroll-mode #contact-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;

    /* Place center of button (height ~9.5vw) at 50vh */
    /* 50vh - (9.5vw / 2) = 50vh - 4.75vw */
    margin-top: calc(50vh - 4.75vw);
    margin-bottom: 60px;
    /* Gap between button and text */
}

.scroll-mode #sub-copy-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto 100px auto;
    /* Center horizontally, padding bottom */
    width: 90%;
}

/* Ensure footer doesn't overlap in scroll mode */
body.scroll-mode footer {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: auto;
    /* Sticky footer: Push to bottom if content is short */
    padding-bottom: 50px;
    transform: none;
    flex-shrink: 0;
}

/* Ensure footer flows naturally on About Page */
body.on-about-page footer,
body.about-page footer {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 50px;
    padding-bottom: 50px;
    transform: none;
    pointer-events: auto;
}

/* ==========================================================================
   2. Canvas (Background)
   ========================================================================== */
canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ==========================================================================
   3. Layout Components (Footer, Copy)
   ========================================================================== */
footer {
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: calc(100% - 100px);
    transform: none;
    color: var(--text-color-secondary);
    font-size: 8pt;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.3s;
}

.theme-toggle {
    display: inline-block;
    margin-left: 20px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: auto;
    /* Enable click */
}

.theme-toggle span {
    opacity: 0.4;
    transition: opacity 0.3s;
    padding: 5px;
    /* Increase hit area */
    cursor: pointer;
    pointer-events: auto;
    /* Explicitly enable on span */
}

.theme-toggle span:hover,
.theme-toggle span.active-mode {
    opacity: 1;
}

/* Hide main footer when on about page if needed, or style differently */
.on-about-page footer {
    /* Adjust if you want footer to behave differently on About view */
    /* For now, let's keep it fixed or let the specific footer inside About handle it?
       Ah, about.html had its own footer inside. We should probably use that one and hide the main fixed one?
       Or merge them. Let's hide the FIXED footer when on About Page.
    */
    opacity: 0;
    pointer-events: none;
}

/* About Page Footer Override */
.about-page footer,
#page-about footer {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 0px;
    padding-bottom: 0px;
    transform: none;
    text-align: center;
    pointer-events: auto;
    opacity: 1;
}

#sub-copy-container {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    color: var(--text-color);
    font-family: 'Pretendard', sans-serif;
    z-index: 5;
    width: 90%;
    max-width: 800px;
    pointer-events: none;
}

.core-copy {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
    opacity: 0.9;
}

.sub-description {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.7;
    word-break: keep-all;
}

/* ==========================================================================
   4. Contact Interface (Main Button)
   ========================================================================== */
#contact-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    perspective: 1000px;
    width: 90vw;
    max-width: 1600px;
    pointer-events: auto;
}

#contact-btn {
    display: flex;
    justify-content: center;
    gap: 4px;
    perspective: 1000px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: auto;
    max-width: 95vw;
    margin: 0 auto;
}

/* Solari Board: Flip Card Structure */
.flip-card {
    position: relative;
    display: inline-block;
    width: 6.5vw;
    height: 9.5vw;
    font-size: 8.5vw;
    line-height: 9.5vw;
    font-weight: 800;
    font-family: 'Pretendard', sans-serif;
    color: var(--text-color);
    /* Text White */
    background: var(--card-bg);
    /* Card Black */
    border-radius: 6px;
    perspective: 1000px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}

/* Mechanical Hinges */
.flip-card::before,
.flip-card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 6px;
    background: #111;
    z-index: 10;
    transform: translateY(-50%);
    border-radius: 1px;
}

.flip-card::before {
    left: 1px;
}

.flip-card::after {
    right: 1px;
}

/* Half-Card Styles */
.top,
.bottom,
.flap {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: var(--card-bg);
    /* Flaps Black */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.top {
    top: 0;
    z-index: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.bottom {
    bottom: 0;
    z-index: 0;
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.flap {
    z-index: 2;
    border-radius: 4px;
}

.flap.top-flap {
    top: 0;
    transform-origin: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.flap.bottom-flap {
    bottom: 0;
    transform-origin: top;
    transform: rotateX(90deg);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Text Positioning */
.top span,
.bottom span,
.flap span {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}

.top span,
.flap.top-flap span {
    top: 0;
    height: 200%;
}

.bottom span,
.flap.bottom-flap span {
    top: -100%;
    height: 200%;
}

/* Animation Keyframes */
.flip-down-top {
    animation: flipTop 0.04s ease-in forwards;
}

.flip-down-bottom {
    animation: flipBottom 0.04s ease-out 0.04s forwards;
}

@keyframes flipTop {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes flipBottom {
    0% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

/* ==========================================================================
   5. Modal (Contact Options)
   ========================================================================== */
#contact-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--modal-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    z-index: 300;
    width: 320px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease-in-out;
}

#contact-modal.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -45%);
}

#contact-modal h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.email-address {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 25px;
}

.contact-options {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-options li a,
.contact-options li button {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    text-align: center;
}

.contact-options li a:hover,
.contact-options li button:hover {
    background: var(--button-bg-hover);
}

/* ==========================================================================
   6. Mobile Optimization (Overrides)
   ========================================================================== */
.mobile-br {
    display: none;
}

.desktop-br {
    display: inline;
}

/* ==========================================================================
   7. About Us Page & Link
   ========================================================================== */
/* Main Page Link (About Us) */
/* Main Navigation (About Us | Contact) */
.top-nav {
    position: fixed;
    top: 50px;
    right: 50px;
    color: var(--text-color);
    font-family: "Pretendard", sans-serif;
    font-weight: 300;
    /* Light */
    font-size: 9pt;
    z-index: 100;
    opacity: 0.8;
    display: flex;
    align-items: center;
}

.top-nav a,
.top-nav span {
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.3s;
}

.active-nav {
    opacity: 1 !important;
    font-weight: 600;
}

footer a.footer-address {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    /* Enable click */
    transition: color 0.3s;
}

footer a.footer-address:hover {
    color: var(--text-color);
    text-decoration: none;
}

.top-nav a:hover,
#nav-contact-link:hover {
    opacity: 1;
    cursor: pointer;
}

.nav-divider {
    margin: 0 10px;
    opacity: 0.5;
    font-weight: 300;
}

/* Theme Switcher Button */
#theme-btn {
    position: fixed;
    top: 50px;
    left: 50px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: "Pretendard", sans-serif;
    font-weight: 900;
    /* Heavy */
    font-size: 15pt;
    z-index: 100;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s;
    padding: 0;
    text-decoration: none;
    /* Add this */
}

#theme-btn:hover {
    opacity: 1;
}

/* About Page Specifics */
body.about-page {
    background-color: var(--bg-color);
    overflow-y: auto;
    /* Allow scroll */
    padding: 50vh 50px 50px;
    /* Top pad, Bottom pad */
}

.scroll-gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    /* Adjusted to 300px */
    background: linear-gradient(to bottom, var(--gradient-color) 20%, rgba(0, 0, 0, 0) 100%);
    z-index: 90;
    /* Below Title (100), Above Content */
    pointer-events: none;
}

.scroll-gradient-overlay-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    /* Adjusted to 200px */
    background: linear-gradient(to top, var(--gradient-color) 20%, rgba(0, 0, 0, 0) 100%);
    z-index: 90;
    pointer-events: none;
}

.about-container {
    max-width: 800px;
    margin: 0 auto;
    container-type: inline-size;
}

.about-section {
    margin-bottom: 120px;
}

.about-container .about-section:last-of-type {
    margin-bottom: 60px;
}

/* Typography */
/* Typography */
.english-title {
    font-size: 6.5vw;
    width: 100%;
    font-weight: 900;
    /* Heavy */
    color: var(--text-color);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.korean-desc {
    font-size: 1.2rem;
    color: var(--text-gray-dark);
    font-weight: 400;
}

.section-header {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    text-transform: capitalize;
}

.section-lead {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    line-height: 1.6;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 40px;
}

.item-list {
    display: grid;
    gap: 40px;
}

.list-item h4 {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.list-item p {
    font-size: 1rem;
    color: var(--text-gray-dark);
    line-height: 1.6;
}

/* Back Navigation (Fixed Bottom Center) */
.back-nav-container {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.back-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--border-color);
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.back-link:hover {
    background: var(--button-bg-hover);
}

/* Diagram Section */

.diagram-container {
    margin-top: 60px;
    margin-bottom: 60px;
    /* To match content width, if content is full width, this is fine.
       If list items are grid, we might need to match their column width?
       But usually mobile text is full width. Desktop might be grid.
       Let's check .item-list styles first.
    */
}

.image-wrapper {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.process-diagram {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
    filter: var(--img-filter);
    /* Invert image in day mode */
}

.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-wrapper:hover .hover-overlay {
    opacity: 1;
}

.image-wrapper:hover .process-diagram {
    transform: scale(1.02);
}

/* Image Modal */
.image-modal {
    position: fixed;
    z-index: 200;
    /* Above everything */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.image-modal.hidden {
    display: none;
    opacity: 0;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    filter: var(--img-filter);
    /* Adapt to Day/Night mode */
}

/* Day Mode Hover Overlay (1% Black) */
body.day-mode .hover-overlay {
    background: rgba(0, 0, 0, 0.01);
}

/* Day Mode Hover Icon (Black for visibility on white) */
body.day-mode .hover-overlay path {
    stroke: #000000;
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

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

/* Mobile Adjustments */
@media (max-width: 768px) {
    .top-nav {
        top: 32px;
        right: 30px;
    }

    #theme-btn {
        top: 30px;
        left: 30px;
    }

    footer {
        bottom: 30px;
        left: 30px;
        width: calc(100% - 60px);
    }

    .back-nav-container {
        bottom: 30px;
    }

    body.about-page,
    #page-about {
        padding: 300px 30px 30px;
    }

    .about-page footer {
        margin-top: 30px;
    }

    .english-title {
        font-size: 18vw;
        /* Large enough to wrap */
        width: 100%;
        line-height: 0.9;
        word-break: keep-all;
        white-space: normal;
    }

    .section-header {
        font-size: 1.8rem;
    }

    .about-section {
        margin-bottom: 80px;
    }
}

@media (max-width: 768px) {

    /* Layout Adjustments */
    .mobile-br {
        display: inline;
    }

    .desktop-br {
        display: none;
    }

    #sub-copy-container {
        width: 70%;
    }

    /* Typography Overrides */
    .sub-description {
        font-size: 0.7rem;
        /* ~11px */
    }
}