/*
Theme Name: Solluna IoT Theme
Theme URI: https://www.solluna-iot.com
Author: Solluna IoT Team
Author URI: https://www.solluna-iot.com
Description: Custom WordPress Theme for Solluna IoT Platform - Figma Remake
Version: 2.0.0
Text Domain: sollunatags
*/

/* ==========================================================================
   CSS Variables (Design Tokens from Figma)
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --color-bg-navy: #0A1128;
    /* Deep dark blue background */
    --color-bg-navy-light: #121A33;
    /* Slightly lighter for cards */
    --color-text-white: #FFFFFF;
    --color-text-gray: #A3ABC2;
    --color-brand-cyan: #00A3FF;
    --color-brand-blue: #0052D4;
    /* Cyan blue for IoT text and buttons */
    --color-brand-yellow: #FFC107;
    /* Yellow for '초연결' text */
    --color-border-subtle: rgba(255, 255, 255, 0.08);

    --color-farm-icon: #2ECC71;
    --color-home-icon: #F39C12;
    --color-factory-icon: #3498DB;
    --color-sensor-icon: #9C27B0;
    /* 보라색 계열 */

    --font-primary: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    --container-max-width: 1200px;
    --header-height: 80px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}



body {
    background-color: var(--color-bg-navy);
    color: var(--color-text-white);
    line-height: 1.6;
    scroll-behavior: smooth;
    letter-spacing: -0.02em;
    word-break: keep-all;
    /* 단어 끊김 현상 제거 */
    overflow-wrap: break-word;
    /* Better Korean readability */
}

h1,
h2,
h3,
h4,
.hero-title,
.domain-title,
.about-title {
    letter-spacing: -0.03em;
    word-break: keep-all;
}

a, button, input[type="submit"], input[type="button"], .btn {
    -webkit-tap-highlight-color: transparent;
}

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

ul {
    list-style: none;
}

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

/* ==========================================================================
   Header & Navigation (Figma Matched)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: transparent;
    backdrop-filter: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: top 0.3s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled {
    background-color: rgba(10, 17, 40, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.site-header.nav-up {
    top: -100px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Figma specific icon styles */
.logo-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text-group {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0;
}

.logo-text-main {
    color: var(--color-text-white);
}

.logo-text-sub {
    color: var(--color-brand-cyan);
}

/* Main Navigation */
.main-navigation {
    display: flex;
    align-items: center;
    gap: 40px;
}

.main-navigation ul {
    display: flex;
    align-items: center;
    gap: 32px;
}

.main-navigation a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-gray);
}

.main-navigation a:hover,
.main-navigation a.active {
    color: var(--color-text-white);
}

/* CTA Button in Header (Changed to text link per user request) */
.btn-nav-cta {
    background-color: transparent;
    color: var(--color-text-gray) !important;
    padding: 10px 0px;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

.btn-nav-cta:hover {
    color: var(--color-text-white) !important;
    background-color: transparent;
    box-shadow: none;
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-white);
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-only-cta {
    display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
    .site-header {
        padding: 15px 0;
        /* position: relative; Removed to inherit 'fixed' from global */
    }

    .main-navigation ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* 모바일 메뉴 텍스트를 위로 끌어올림 */
        align-items: flex-start; /* 프리미엄 앱 스타일 좌측 정렬 */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        /* 공주님 요청: 투명도 100% (완전 불투명 솔리드 배경) */
        background: var(--color-bg-navy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 65px 40px 0; /* 우아한 좌우 여백 유지하며 텍스트 묶음을 시원하게 위로 끌어올림 (100px -> 65px) */
        z-index: 1000;
        gap: 0; /* li 마진으로 컨트롤하기 위해 gap 제거 */
        transform: translateX(100%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .main-navigation.toggled ul {
        transform: translateX(0);
    }

    .main-navigation ul li {
        width: 100%;
        margin: 0;
        padding: 0; /* 터치 전체 영역 확장을 위해 a 태그로 패딩 이관 */
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04); /* 은은하고 고급스러운 구분선 */
        opacity: 0;
        transform: translateX(40px); /* 슬라이드 인 애니메이션을 위해 우측으로 살짝 이동 */
        transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 토글 활성화 시 항목들이 우측에서 좌측으로 순차 등장 (Staggered Slide-in) */
    .main-navigation.toggled ul li:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(4) { transition-delay: 0.25s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(5) { transition-delay: 0.3s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(6) { transition-delay: 0.35s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li:nth-child(7) { transition-delay: 0.4s; opacity: 1; transform: translateX(0); }
    .main-navigation.toggled ul li.mobile-only-cta { 
        transition-delay: 0.5s; 
        opacity: 1; 
        transform: translateX(0); 
        margin-top: 0; /* 공주님 지적사항: 다른 메뉴와 동일한 간격을 위해 24px 여백 완전 제거 */
        border-bottom: none;
        padding: 0;
    }

    .main-navigation ul li a {
        font-size: 1.45rem; /* 화면이 작은 기기에서 텍스트가 잘리는 현상(Overflow)을 막기 위해 1.8rem에서 1.45rem의 황금 비율로 스케일 다운 */
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-text-white); /* 공주님 요청: 상시 화이트 폰트 */
        letter-spacing: -0.04em;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
        padding: 16px 0; /* li에서 a로 이관된 글로벌 터치 상하 패딩 */
        position: relative;
    }

    /* 우측 화살표 힌트 아이콘 가상 요소 */
    .main-navigation ul li:not(.mobile-only-cta) a::after {
        content: '→';
        font-family: inherit;
        font-size: 1.4rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.2);
        transform: translateX(-10px);
        opacity: 0;
        transition: all 0.3s ease;
    }

    /* 액티브 및 터치 시 프리미엄 시안 발광 및 스와이프 효과 */
    .main-navigation ul li a:hover,
    .main-navigation ul li a:active,
    .main-navigation ul li a:focus {
        color: var(--color-brand-cyan); /* 터치 시 시안 네온 컬러 점등 */
        padding-left: 15px; /* 터치 시 손끝을 자연스럽게 따라가는 다이내믹 피드백 */
        background: linear-gradient(90deg, rgba(0, 163, 255, 0.1) 0%, transparent 100%); /* 라인 배면에 들어오는 은은한 스포트라이트 발광 */
    }

    .main-navigation ul li:not(.mobile-only-cta) a:hover::after,
    .main-navigation ul li:not(.mobile-only-cta) a:active::after {
        opacity: 1;
        color: var(--color-brand-cyan);
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
        position: relative;
    }

    .mobile-menu-toggle .icon-bar {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #ffffff;
        margin: 3px 0;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center;
    }

    /* 토글 오픈 시 X 애니메이션 회전 반경 최적화 */
    .main-navigation.toggled .mobile-menu-toggle .icon-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .main-navigation.toggled .mobile-menu-toggle .icon-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0); /* 가운데 줄이 줄어들며 사라짐 */
    }
    .main-navigation.toggled .mobile-menu-toggle .icon-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .btn-nav-cta {
        display: none;
    }

    .mobile-only-cta {
        display: block !important;
    }

    .btn-nav-cta-mobile {
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        background: transparent !important;
        color: var(--color-brand-cyan) !important; /* 배경색 빼고 글자로 */
        padding: 16px 0 !important; /* 다른 메뉴들과 터치 패딩 일치 */
        font-size: 1.45rem !important; /* 폰트 사이즈 통일 */
        font-weight: 700;
        letter-spacing: -0.04em;
        text-decoration: none;
        box-shadow: none;
        border-radius: 0;
        transition: all 0.3s ease;
    }

    .btn-nav-cta-mobile:hover,
    .btn-nav-cta-mobile:active {
        background: linear-gradient(90deg, rgba(0, 163, 255, 0.1) 0%, transparent 100%) !important; /* 단일 메뉴와 완전히 동일한 발광 인터랙션 */
        box-shadow: none;
        color: #00F2FE !important;
        padding-left: 15px !important;
        transform: none; /* 기존 스와이프 대체 */
    }
}

/* ==========================================================================
   Footer (Figma Matched)
   ========================================================================== */
.site-footer {
    background-color: var(--color-bg-navy);
    padding: 80px 0 30px;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-gray);
    font-size: 0.95rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.footer-logo svg {
    color: var(--color-brand-cyan);
    /* Unify brand feeling */
}

.footer-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    font-weight: 300;
    max-width: 90%;
}

.footer-widget h4 {
    color: var(--color-text-white);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.01em;
}

.footer-links-widget ul li {
    margin-bottom: 16px;
}

.footer-links-widget a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.0rem;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
}

.footer-links-widget a:hover {
    color: var(--color-text-white);
    transform: translateX(4px);
}

.footer-contact-widget ul li {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-email-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-email-link:hover {
    color: var(--color-brand-cyan);
    transform: translateX(4px);
}

.footer-email-link span {
    flex: 1;
    line-height: 1.5;
    font-weight: 300;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    color: #5D667B;
}

.footer-policy {
    display: flex;
    gap: 24px;
}

.footer-policy a:hover {
    color: var(--color-text-white);
}

@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ==========================================================================
   Micro-Mobile Optimization (Very old or narrow screens like iPhone SE)
   ========================================================================== */
@media (max-width: 420px) {
    .logo-text-group {
        font-size: 1.15rem;
        /* Scale down logo text */
    }

    .site-logo {
        gap: 8px;
    }

    .site-logo svg {
        width: 30px;
        height: auto;
    }

    .container {
        padding: 0 15px;
        /* Reduce side padding slightly to fit header */
    }
}

@media (max-width: 350px) {
    .logo-text-group {
        font-size: 1.0rem;
        /* Ultra small logo text */
    }

    .site-logo svg {
        width: 26px;
    }

    .menu-toggle {
        padding: 5px;
        /* Reclaim space from hamburger padding */
    }
}