/* =========================================================
   SM SOFT LAB — Site Design System (Light, Minimal Enterprise)
   ========================================================= */
:root{
    --bg:#ffffff;
    --bg-soft:#f5f7fb;
    --bg-card:#ffffff;
    --line:rgba(15,32,69,.08);
    --line-strong:rgba(15,32,69,.14);

    --ink:#0b1426;
    --ink-2:#1f2a44;
    --text:#3a4359;
    --text-dim:#6b748c;
    --text-mute:#94a0b6;

    --brand:#0b54e6;
    --brand-2:#1f7bff;
    --brand-soft:#e8f0ff;
    --accent:#0bd5b5;

    --grad:linear-gradient(135deg,#0b54e6 0%,#1f7bff 55%,#0bd5b5 100%);
    --grad-soft:linear-gradient(135deg,rgba(11,84,230,.06),rgba(31,123,255,.06) 50%,rgba(11,213,181,.06));

    --radius-sm:10px;
    --radius:16px;
    --radius-lg:24px;
    --maxw:1200px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --shadow-sm:0 1px 2px rgba(15,32,69,.04),0 1px 3px rgba(15,32,69,.05);
    --shadow:0 8px 24px -12px rgba(15,32,69,.18),0 2px 6px rgba(15,32,69,.04);
    --shadow-lg:0 30px 60px -30px rgba(15,32,69,.25),0 8px 20px -8px rgba(15,32,69,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;letter-spacing:-.011em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
/* 입력 필드는 선택 가능하게 (편집을 위해) */
input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
body{overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:rgba(11,84,230,.18);color:var(--ink)}

/* ===== 레이아웃 ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative;padding:140px 0;}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--brand)}

.section-title{font-size:clamp(30px,3.6vw,52px);font-weight:700;letter-spacing:-.028em;line-height:1.12;color:var(--ink);margin:18px 0 18px}
.section-title .grad,.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-lead{color:var(--text-dim);font-size:18px;max-width:680px;line-height:1.65}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--line-strong);background:#fff;color:var(--ink);transition:.25s var(--ease)}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--bg-soft);border-color:var(--bg-soft)}
.btn .arr{transition:.3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ===== 헤더 ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;transition:.3s var(--ease);background:rgba(255,255,255,0)}
.hd.scrolled{background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line);padding:14px 0}
.hd-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--ink)}
.brand > span:not(.brand-mark){display:none}
.brand-mark{width:160px;height:40px;background:url('logos/smsoftlab.png') left center/contain no-repeat}
.gnb{display:flex;align-items:center;gap:4px}
.gnb a{padding:10px 16px;border-radius:999px;font-size:14px;color:var(--text);font-weight:500;transition:.2s var(--ease);position:relative}
.gnb a:hover{color:var(--ink)}
.gnb a.on{color:var(--ink);background:var(--bg-soft)}
.gnb-extras{display:none}
.hd-cta{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;font-size:12px;color:var(--text-mute);font-weight:600;letter-spacing:.04em}
.lang a{padding:6px 8px;color:var(--text-mute)}
.lang a.on{color:var(--ink)}
.lang span{padding:6px 4px;color:var(--text-mute)}
.menu-toggle{display:none}

/* ===== 페이지 히어로 (서브 페이지 공통) ===== */
.page-hero{padding:200px 0 100px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%)}
.page-hero h1{font-size:clamp(40px,5.4vw,76px);font-weight:700;letter-spacing:-.032em;line-height:1.05;color:var(--ink);margin:22px 0 22px;position:relative;z-index:1}
.page-hero p.lead{font-size:clamp(16px,1.4vw,19px);color:var(--text-dim);max-width:680px;position:relative;z-index:1;line-height:1.65}
.crumb{display:flex;align-items:center;gap:8px;color:var(--text-mute);font-size:13px;margin-top:30px;font-weight:500}
.crumb a{color:var(--text-dim)}
.crumb a:hover{color:var(--ink)}
.crumb svg{opacity:.5}

/* ===== CTA 카드 (페이지 하단 공통) ===== */
.cta{padding:120px 0 0}
.cta-card{position:relative;border-radius:var(--radius-lg);padding:80px 60px;background:var(--ink);color:#fff;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.cta-card::before{content:"";position:absolute;inset:0;background:
    radial-gradient(600px 300px at 100% 100%,rgba(31,123,255,.4),transparent 60%),
    radial-gradient(500px 300px at 0% 0%,rgba(11,213,181,.18),transparent 60%);
    pointer-events:none}
.cta-card .eyebrow{color:#7fb3ff}
.cta-card .eyebrow::before{background:#7fb3ff}
.cta-card h2{font-size:clamp(28px,3.2vw,42px);font-weight:700;letter-spacing:-.028em;line-height:1.1;margin-bottom:18px;position:relative;color:#fff}
.cta-card p{color:rgba(255,255,255,.72);max-width:520px;position:relative}
.cta-form{display:flex;flex-direction:column;gap:10px;position:relative}
.cta-form input,.cta-form textarea{padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;transition:.2s var(--ease);outline:none}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(255,255,255,.45)}
.cta-form input:focus,.cta-form textarea:focus{border-color:#fff;background:rgba(255,255,255,.10)}
.cta-form textarea{min-height:90px;resize:vertical}
.cta-form .btn-primary{background:#fff;color:var(--ink);border-color:#fff;justify-content:center;padding:14px}
.cta-form .btn-primary:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* ===== 푸터 ===== */
footer{padding:80px 0 40px;border-top:1px solid var(--line);margin-top:140px;color:var(--text-dim);font-size:14px;background:var(--bg-soft)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:50px}
.ft-grid h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;font-weight:700}
.ft-grid li{margin-bottom:10px}
.ft-grid a:hover{color:var(--ink)}
.ft-info p{margin-bottom:6px;color:var(--text-dim)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--line);font-size:13px;color:var(--text-mute);flex-wrap:wrap;gap:14px}

/* ===== 스크롤 인터랙션 ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}

/* ===== 반응형 ===== */
@media (max-width:960px){
    section{padding:80px 0}
    .page-hero{padding:130px 0 60px}

    /* 헤더 compact */
    .hd{padding:14px 0}
    .hd.scrolled{padding:10px 0}
    .brand-mark{width:128px;height:34px}
    .lang{display:none}
    .hd-cta .btn-primary{display:none}
    .theme-toggle{width:38px;height:38px}
    .theme-toggle svg{width:16px;height:16px}

    /* GNB → 우측 슬라이드 드로어 */
    .gnb{
        display:flex;
        flex-direction:column;
        gap:0;
        position:fixed;
        top:0;right:0;
        min-height:100vh;                    /* fallback */
        min-height:100dvh;                   /* 동적 뷰포트만큼 최소 높이 */
        width:min(340px,88vw);
        background:var(--bg);
        /* 하단 padding은 safe-area-inset-bottom(노치/홈바)까지 고려 */
        padding:88px 20px max(30px, calc(env(safe-area-inset-bottom, 0px) + 24px));
        box-shadow:-20px 0 60px rgba(0,0,0,.18);
        transform:translateX(100%);
        transition:transform .35s var(--ease);
        z-index:49;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        align-items:stretch;
        border-left:1px solid var(--line);
    }
    /* nav 링크 — .btn 류(문의하기 버튼)는 제외 */
    .gnb a:not(.btn){
        padding:16px 18px;
        font-size:16px;
        font-weight:600;
        color:var(--ink);
        border-bottom:1px solid var(--line);
        border-radius:0;
        text-align:left;
        background:transparent;
    }
    .gnb a:not(.btn):hover{background:var(--bg-soft)}
    .gnb a:not(.btn).on{background:transparent;color:var(--brand)}

    /* 드로어 안에 삽입되는 액션(CTA + lang) — JS가 동적으로 옮겨 넣음 */
    .gnb-extras{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:14px}
    .gnb-extras .btn-primary{justify-content:center;width:100%;padding:14px;border-radius:12px;background:transparent;color:var(--ink);border-color:var(--ink)}
    .gnb-extras .lang{display:flex;justify-content:center;font-size:13px}

    /* drawer 열린 상태 */
    body.menu-open{overflow:hidden}
    body.menu-open .gnb{transform:translateX(0)}

    /* 백드롭 (body::before로 HTML 변경 없이) */
    body::before{
        content:"";
        position:fixed;inset:0;
        background:rgba(0,0,0,.5);
        opacity:0;pointer-events:none;
        transition:opacity .3s var(--ease);
        z-index:48;
    }
    body.menu-open::before{opacity:1;pointer-events:auto}

    /* menu-toggle (햄버거 → X 트랜지션) */
    .menu-toggle{
        display:inline-flex;width:40px;height:40px;border-radius:50%;
        border:1px solid var(--line);background:transparent;
        align-items:center;justify-content:center;flex-shrink:0;
        transition:.25s var(--ease);position:relative;z-index:50;
    }
    .menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.3s var(--ease)}
    .menu-toggle span::before,.menu-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:absolute;left:0;transition:.3s var(--ease)}
    .menu-toggle span::before{top:-6px}
    .menu-toggle span::after{top:6px}
    body.menu-open .menu-toggle{background:var(--bg-soft);border-color:var(--bg-soft)}
    body.menu-open .menu-toggle span{background:transparent}
    body.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg)}
    body.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg)}

    .cta-card{grid-template-columns:1fr;padding:50px 30px}
    .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
}

@media (max-width:600px){
    .wrap{padding:0 20px}
    section{padding:64px 0}
    .page-hero{padding:120px 0 50px}
    .cta-card{padding:40px 22px}
    footer{padding:60px 0 30px;margin-top:80px}
    .ft-grid{gap:24px;margin-bottom:36px}
    .ft-bot{flex-direction:column;align-items:flex-start;text-align:left}
    .crumb{font-size:12px}
}

@media (max-width:480px){
    .ft-grid{grid-template-columns:1fr}
    .cta-card h2{font-size:22px}
    .cta-card{padding:36px 20px}
    .brand-mark{width:108px;height:28px}
    .gnb{width:min(320px,92vw);padding:78px 16px 24px}
}
@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s var(--ease);padding:0;flex-shrink:0}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ============ DARK THEME ============ */
[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0b1426;
    --bg-soft:#0f1a30;
    --bg-card:#13203a;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);

    --ink:#f5f7fb;
    --ink-2:#cbd5e0;
    --text:#cbd5e0;
    --text-dim:#94a3b8;
    --text-mute:#64748b;

    --brand:#3b82f6;
    --brand-2:#60a5fa;
    --brand-soft:rgba(59,130,246,.14);
    --accent:#0bd5b5;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
    --shadow:0 8px 24px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
    --shadow-lg:0 30px 60px -30px rgba(0,0,0,.7),0 8px 20px -8px rgba(0,0,0,.5);
}
[data-theme="dark"] ::selection{background:rgba(59,130,246,.32);color:#fff}

/* Header in dark */
[data-theme="dark"] .hd{background:rgba(11,20,38,0)}
[data-theme="dark"] .hd.scrolled{background:rgba(11,20,38,.8);border-bottom-color:var(--line)}

/* Buttons in dark */
[data-theme="dark"] .btn{background:var(--bg-card);color:var(--ink);border-color:var(--line-strong)}
[data-theme="dark"] .btn:hover{border-color:var(--brand);color:var(--brand)}
[data-theme="dark"] .btn-primary{background:var(--brand);border-color:var(--brand);color:#0b1426}
[data-theme="dark"] .btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#0b1426}

/* Menu toggle button mobile */
[data-theme="dark"] .menu-toggle{background:var(--bg-card);border-color:var(--line)}
[data-theme="dark"] .menu-toggle span,
[data-theme="dark"] .menu-toggle span::before,
[data-theme="dark"] .menu-toggle span::after{background:var(--ink)}

/* CTA card stays dark — only tweak gradient */
[data-theme="dark"] .cta-card{background:#0a1224}
[data-theme="dark"] .cta-card::before{background:radial-gradient(600px 300px at 100% 100%,rgba(59,130,246,.45),transparent 60%),radial-gradient(500px 300px at 0% 0%,rgba(11,213,181,.22),transparent 60%)}

/* Card surfaces — many inline styles use background:#fff directly */
[data-theme="dark"] .app-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feat-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .stack-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .asset-cell,
[data-theme="dark"] .prod-card:not(.featured),
[data-theme="dark"] .flow-card,
[data-theme="dark"] .flow-step,
[data-theme="dark"] .hybrid-item,
[data-theme="dark"] .tl-card,
[data-theme="dark"] .status-table,
[data-theme="dark"] .compare-table,
[data-theme="dark"] .vm-card:not(.dark),
[data-theme="dark"] .map-card,
[data-theme="dark"] .map-actions,
[data-theme="dark"] .map-actions a,
[data-theme="dark"] .map-actions button,
[data-theme="dark"] .part-label,
[data-theme="dark"] .product-hero .meta span,
[data-theme="dark"] .platform-row span,
[data-theme="dark"] .hub-node,
[data-theme="dark"] .zero-illustration,
[data-theme="dark"] .pin-label,
[data-theme="dark"] .status-cell{background:var(--bg-card);color:var(--ink)}

/* Cells with hover */
[data-theme="dark"] .client-cell{background:var(--bg-card)}
[data-theme="dark"] .client-cell:hover{background:var(--bg-soft)}
[data-theme="dark"] .client-cell.empty,
[data-theme="dark"] .client-cell.empty:hover{background:var(--bg-card)}

/* Icons with bg-soft fill in cards */
[data-theme="dark"] .feature-card .ic,
[data-theme="dark"] .feat-card .ic,
[data-theme="dark"] .val .ico,
[data-theme="dark"] .stack-card .ico,
[data-theme="dark"] .app-card .deco{background:var(--bg-soft);border-color:var(--line)}

/* Tags / chips */
[data-theme="dark"] .module .tag-row span,
[data-theme="dark"] .prod-card .feat span,
[data-theme="dark"] .case-card .pf span{background:var(--bg-soft);color:var(--text)}

/* Hero (index has hardcoded white-ish gradient inline) */
[data-theme="dark"] .hero{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%)}
[data-theme="dark"] .hero-visual{background:linear-gradient(135deg,#0f1a30 0%,#13203a 100%);border-color:var(--line)}
[data-theme="dark"] .hero-visual .pf-badge{background:var(--bg-card);border-color:var(--line);color:var(--text-dim)}
[data-theme="dark"] .hero-visual .pf-badge.center{background:var(--ink);color:#0b1426;border-color:var(--ink)}
[data-theme="dark"] .hero-visual .grid-deco{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}

/* Hero / approach grid decorative dots in dark */
[data-theme="dark"] .hero-bg::after{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}

/* Sections that switch background tier */
[data-theme="dark"] .approach,
[data-theme="dark"] .how,
[data-theme="dark"] .news{background:var(--bg)}
[data-theme="dark"] .products-section,
[data-theme="dark"] .clients,
[data-theme="dark"] .hist-section,
[data-theme="dark"] .flow-section,
[data-theme="dark"] .case-section,
[data-theme="dark"] .links-section,
[data-theme="dark"] .run-section,
[data-theme="dark"] .hybrid,
[data-theme="dark"] .stats-banner,
[data-theme="dark"] .year-tabs,
[data-theme="dark"] .loc-section{background:var(--bg-soft)}

/* History timeline */
[data-theme="dark"] .tl-list::before,
[data-theme="dark"] .timeline::before{background:var(--line)}

/* About leadership blockquote */
[data-theme="dark"] .leader-text blockquote{color:var(--ink)}

/* About vm-card (light variant) */
[data-theme="dark"] .vm-card:not(.dark){border-color:var(--line)}

/* Compare table */
[data-theme="dark"] .compare-row{border-top-color:var(--line)}
[data-theme="dark"] .compare-cell{border-left-color:var(--line)}
[data-theme="dark"] .compare-row.head{background:var(--bg-soft)}
[data-theme="dark"] .compare-cell.us{background:rgba(59,130,246,.10);color:var(--brand-2)}

/* Footer */
[data-theme="dark"] footer{background:var(--bg-soft);border-top-color:var(--line)}
[data-theme="dark"] .ft-bot{border-top-color:var(--line)}

/* Year tabs (history) */
[data-theme="dark"] .year-tab{color:var(--text-dim)}
[data-theme="dark"] .year-tab:hover{color:var(--ink)}
[data-theme="dark"] .year-tab.on{color:var(--ink);border-bottom-color:var(--brand)}

/* Eyebrow keeps brand color */
[data-theme="dark"] .eyebrow{color:var(--brand-2)}
[data-theme="dark"] .eyebrow::before{background:var(--brand-2)}

/* GENIE platform-row dot stays accent */
[data-theme="dark"] .platform-row span::before{background:var(--accent)}

/* GNB on-state */
[data-theme="dark"] .gnb a.on{background:var(--bg-soft)}

/* Gradient text uses brand-2 in dark for better contrast */
[data-theme="dark"] .grad,
[data-theme="dark"] .section-title .grad,
[data-theme="dark"] .hero h1 em,
[data-theme="dark"] .pillar-text h2 em{background:linear-gradient(135deg,#60a5fa 0%,#0bd5b5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Highlight pill in history */
[data-theme="dark"] .tl-card ul li .hl{background:rgba(59,130,246,.18);color:var(--brand-2)}

/* Map iframe — keep light filter so map remains readable */
[data-theme="dark"] .map-card iframe{filter:invert(.92) hue-rotate(180deg) saturate(.85);background:#222}

/* Brand mark logo — invert for visibility on dark bg */
[data-theme="dark"] .brand-mark{filter:invert(1) brightness(1.2) contrast(1.1)}