/* =========== RESET =========== */
        *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        html{
            font-size:16px;
            -webkit-text-size-adjust:100%;
            text-size-adjust:100%;
        }
        body{
            font-family:'Noto Sans KR','Montserrat',sans-serif;
            color:#fff;
            background:linear-gradient(180deg, #1a3a6b 0%, #0f2748 100%);
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
            -webkit-tap-highlight-color:transparent;
        }
        a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
        ul,li{list-style:none}
        button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
        img{max-width:100%;display:block}
        em,i{font-style:normal}

        /* Suppress hover on touch devices to prevent stuck-hover states */
        @media (hover:none){
            .perf_card:hover{transform:none; box-shadow:none}
            .perf_card:hover .perf_thumb img{transform:none; filter:saturate(1.08) brightness(.9)}
            .esg_pillar:hover{transform:none}
            .recruit_stat:hover{transform:none}
            .contact_card:hover{background:rgba(30,144,255,0.04); border-color:rgba(255,255,255,0.10)}
            #news .item:hover a{padding-left:0}
            #news .item:hover .title{color:#fff}
        }

        /* Respect reduced motion preference */
        @media (prefers-reduced-motion:reduce){
            *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
            .vdo_box .poster{animation:none}
        }

        /* =========== ACCESSIBILITY =========== */
        /* Skip-to-content link, visible only on keyboard focus */
        .skip-link{
            position:fixed; top:-80px; left:16px; z-index:4000;
            padding:12px 20px;
            background:var(--primary); color:#001833;
            font-size:14px; font-weight:700; letter-spacing:.3px;
            border-radius:0 0 8px 8px;
            transition:top .25s cubic-bezier(.25,.46,.45,.94);
        }
        .skip-link:focus{top:0; outline:3px solid #fff; outline-offset:2px}

        /* Visible focus ring for all interactive elements (keyboard users) */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        [tabindex]:focus-visible{
            outline:2px solid var(--primary-2);
            outline-offset:3px;
            border-radius:4px;
        }
        /* Stronger focus for CTA buttons */
        .btn-contact:focus-visible,
        .contact_form button:focus-visible,
        #recruit .recruit_box a:focus-visible{
            outline:3px solid #fff;
            outline-offset:3px;
            box-shadow:0 0 0 6px rgba(30,144,255,0.4);
        }
        /* Remove default outline only when focus-visible fallback exists */
        a:focus:not(:focus-visible),
        button:focus:not(:focus-visible){outline:none}

        /* Screen reader only */
        .sr-only{
            position:absolute; width:1px; height:1px; padding:0; margin:-1px;
            overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
        }

        :root{
            /* ===== Brand colors ===== */
            --primary:#1E90FF;
            --primary-2:#4FB3FF;
            --primary-3:#7FCFFF;
            --bg:#0f2748;
            --bg-2:#1a3a6b;

            /* ===== Layout ===== */
            --header-h:92px;
            --container-max:1440px;        /* desktop max content width */
            --container-pad:clamp(20px, 4vw, 60px); /* responsive horizontal gutter */

            /* ===== Spacing scale ===== */
            --gap-xs:clamp(8px, 1vw, 12px);
            --gap-sm:clamp(12px, 1.5vw, 20px);
            --gap-md:clamp(20px, 2.5vw, 36px);
            --gap-lg:clamp(32px, 4vw, 60px);
            --gap-xl:clamp(48px, 6vw, 100px);

            /* ===== Section vertical padding ===== */
            --sec-pad-y:clamp(80px, 9vw, 160px);
            --sec-pad-y-sm:clamp(56px, 7vw, 110px);

            /* ===== Type scale (rem-anchored, clamp only on display sizes) ===== */
            --fz-xs:0.75rem;     /* 12px */
            --fz-sm:0.875rem;    /* 14px */
            --fz-base:1rem;      /* 16px */
            --fz-md:1.125rem;    /* 18px */
            --fz-lg:1.25rem;     /* 20px */
            --fz-xl:clamp(1.25rem, 1.6vw, 1.625rem);    /* 20-26px */
            --fz-h3:clamp(1.5rem, 2.4vw, 2.25rem);      /* 24-36px */
            --fz-h2:clamp(2rem, 4vw, 3.5rem);           /* 32-56px */
            --fz-h1:clamp(2.5rem, 6.4vw, 6.875rem);     /* 40-110px */
            --fz-display:clamp(3rem, 7.2vw, 8rem);      /* 48-128px */

            /* ===== Safe-area (notch / home indicator) ===== */
            --safe-top:env(safe-area-inset-top, 0px);
            --safe-right:env(safe-area-inset-right, 0px);
            --safe-bottom:env(safe-area-inset-bottom, 0px);
            --safe-left:env(safe-area-inset-left, 0px);

            /* ===== Dynamic viewport (svh/dvh with fallback) ===== */
            --vh-100:100vh;
            --vh-100:100svh; /* small viewport — hides browser chrome variance */
            --dvh-100:100vh;
            --dvh-100:100dvh;

            /* ===== Easing ===== */
            --ease-out:cubic-bezier(.25,.46,.45,.94);
        }

        /* ===== Breakpoints (used in @media queries — kept as comments since CSS doesn't allow var() in @media) =====
           --bp-lg : 1280px (large desktop)
           --bp-md : 1024px (tablet landscape / small desktop)
           --bp-sm :  768px (tablet portrait / mobile)
           --bp-xs :  480px (small phone)
        ===================================================================== */

        /* ===== Container utility (opt-in — does NOT apply to existing .layout to avoid breaking pin sections) ===== */
        .container{
            width:100%;
            max-width:var(--container-max);
            margin-inline:auto;
            padding-inline:var(--container-pad);
        }

        /* Honour safe-area on full-bleed surfaces */
        @supports(padding:max(0px)){
            header{
                padding-left:max(var(--container-pad), var(--safe-left));
                padding-right:max(var(--container-pad), var(--safe-right));
            }
        }

        /* Smooth-scroll with sticky-header offset */
        html{scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
        @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

        /* =========== HEADER =========== */
        header{
            position:fixed; top:0; left:0; right:0;
            z-index:2000; height:var(--header-h);
            padding:0 3vw;
            display:flex; align-items:center; justify-content:space-between;
            transition:top .5s, background .4s, border-color .4s;
            border-bottom:1px solid transparent;
        }
        header.scrolled{
            background:rgba(15,39,72,0.92);
            backdrop-filter:blur(20px);
            -webkit-backdrop-filter:blur(20px);
            border-bottom-color:rgba(255,255,255,0.08);
        }
        header.hide{top:calc(var(--header-h) * -1)}
        .ui_logo{line-height:0}
        .ui_logo a{
            display:inline-flex; align-items:center; gap:12px;
        }
        .ui_logo img{
            height:44px; width:auto;
            filter:brightness(0) invert(1);
            transition:filter .3s, transform .4s cubic-bezier(.25,.46,.45,.94);
        }
        .ui_logo a:hover img{
            transform:scale(1.06);
            filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(30,144,255,0.5));
        }
        .ui_logo .kr{
            font-family:'Noto Sans KR',sans-serif;
            font-size:13px; font-weight:500; letter-spacing:-.3px;
            color:rgba(255,255,255,0.7);
            border-left:1px solid rgba(255,255,255,0.2);
            padding-left:12px; line-height:1;
        }
        header nav>ul{display:flex; gap:38px}
        header nav>ul>li{position:relative; padding:30px 0}
        header nav>ul>li>a{
            color:rgba(255,255,255,0.88);
            font-size:17px; font-weight:500;
            position:relative; padding:6px 0;
            transition:color .3s;
        }
        header nav>ul>li>a::after{
            content:''; position:absolute; bottom:0; left:0;
            width:0; height:2px; background:var(--primary);
            transition:width .35s cubic-bezier(.25,.46,.45,.94);
        }
        header nav>ul>li:hover>a,
        header nav>ul>li>a.active{color:var(--primary)}
        header nav>ul>li:hover>a::after,
        header nav>ul>li>a.active::after{width:100%}
        /* Mobile nav active 표시 */
        .mobile_nav a.active{color:var(--primary)}
        .depth_wrap{
            position:absolute; top:100%; left:50%;
            transform:translateX(-50%) translateY(-6px);
            min-width:160px;
            background:rgba(15,39,72,0.96);
            backdrop-filter:blur(16px);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:0 0 10px 10px;
            padding:10px 0;
            opacity:0; visibility:hidden; pointer-events:none;
            transition:all .3s;
        }
        header nav>ul>li:hover .depth_wrap{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
        .depth_wrap li a{
            display:block; padding:10px 20px;
            font-size:13px; color:rgba(255,255,255,0.6);
            transition:all .2s; white-space:nowrap;
        }
        .depth_wrap li a:hover{color:var(--primary); background:rgba(30,144,255,0.05); padding-left:26px}
        .header_other{display:flex; align-items:center; gap:20px}
        .lang{
            font-family:'Montserrat',sans-serif;
            font-size:12px; font-weight:600; letter-spacing:1px;
            color:rgba(255,255,255,0.6);
            border:1px solid rgba(255,255,255,0.15);
            padding:7px 14px; border-radius:20px;
            transition:all .3s;
        }
        .lang:hover{color:var(--primary); border-color:var(--primary)}
        .btn-contact{
            padding:10px 22px;
            background:var(--primary); color:#001833;
            border-radius:24px;
            font-size:12px; font-weight:700; letter-spacing:.5px;
            transition:all .3s;
        }
        .btn-contact:hover{background:#fff}

        /* =========== STACKING PIN (pure CSS sticky with dwell) ===========
           Each .pin-wrap stays sticky at top for (dwell) of scroll, then transitions.
           Reduced from 250vh→180vh: 80vh dwell + 100vh transition. 한 섹션당 휠 회전 약 30% 감소. */
        .stack{position:relative}
        .pin-wrap{
            position:relative;
            height:180vh;
        }
        /* Visual is the hero: a single viewport tall — about flows in right after */
        #visualWrap{height:100vh; height:100dvh; z-index:1}
        #researchWrap{z-index:3}
        #performanceWrap{z-index:4}
        #recruitWrap{z-index:7}
        .pin{
            position:sticky; top:0;
            width:100%;
            height:100vh;       /* fallback for browsers without dvh support */
            height:100dvh;      /* tracks dynamic visible viewport (mobile chrome) */
            overflow:hidden;
        }

        /* =========== VISUAL =========== */
        #visual{background:#000; contain:layout paint}
        #visual .layout{
            position:relative; width:100%; height:100%;
            display:flex; align-items:center; justify-content:center;
            will-change:filter, opacity;
        }
        .vdo_box{position:absolute; inset:0; z-index:0; overflow:hidden; contain:layout paint}
        /* Poster only shown before video starts. No continuous animation — once video plays the poster is obscured and any animation just wastes compositor cycles. */
        .vdo_box .poster{
            position:absolute; inset:0;
            background-size:cover; background-position:center;
        }
        .vdo_box video{
            position:absolute; inset:0;
            width:100%; height:100%; object-fit:cover;
            object-position:center 10%;
            /* no CSS filter — lets GPU composite the video frames directly without per-frame shader pass */
            transform:translateZ(0);
            backface-visibility:hidden;
        }
        .vdo_overlay{
            position:absolute; inset:0; z-index:1;
            background:
                radial-gradient(ellipse at 30% 40%, rgba(30,144,255,0.18) 0%, transparent 55%),
                radial-gradient(ellipse at 75% 70%, rgba(77,208,225,0.14) 0%, transparent 55%),
                linear-gradient(180deg, rgba(15,39,72,0.22) 0%, rgba(15,39,72,0.58) 100%);
        }
        .grid_lines{
            position:absolute; inset:0; z-index:1; pointer-events:none;
            background-image:
                radial-gradient(ellipse at center, transparent 30%, #000 100%),
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size:cover, 80px 80px, 80px 80px;
            background-blend-mode:multiply;
            opacity:0.85;
        }
        .progress_bar{
            position:absolute; bottom:0; left:0; right:0;
            height:3px; background:rgba(255,255,255,0.1); z-index:5;
        }
        .progress_bar .time{
            display:block; height:100%; width:0%;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
            animation:progressRun 8s linear infinite;
        }
        @keyframes progressRun{
            0%{width:0%} 100%{width:100%}
        }
        .visual_content{
            position:relative; z-index:3;
            text-align:center;
            /* 하단 padding은 .wheel(SCROLL DOWN, 약 100px 영역)과 겹치지 않도록 안전 여백
               — 줌인 시 짧아진 뷰포트에서도 본문 텍스트가 wheel 위로 안전하게 정렬됨 */
            padding:0 5vw clamp(80px, 14vh, 160px);
        }
        .eyebrow{
            font-family:'Montserrat',sans-serif;
            font-size:13px; font-weight:500; letter-spacing:5px;
            color:var(--primary);
            margin-bottom:30px;
            display:inline-flex; align-items:center; gap:12px;
        }
        .eyebrow::before, .eyebrow::after{
            content:''; width:40px; height:1px; background:var(--primary);
        }
        .title_main{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 7.2vw, 128px);
            font-weight:800; line-height:1; letter-spacing:-3px;
            color:#fff; display:block;
        }
        .title_main em{color:var(--primary)}
        .title_kr{
            display:block; margin-top:34px;
            font-size:clamp(18px, 1.5vw, 26px); font-weight:500;
            color:rgba(255,255,255,0.88);
            text-wrap:pretty;
            word-break:keep-all;
        }
        .visual_content .desc{
            margin-top:20px;
            font-size:14px; font-weight:300; letter-spacing:3px;
            color:rgba(255,255,255,0.6);
            text-transform:uppercase;
        }
        .wheel{
            position:absolute; bottom:40px; left:50%;
            transform:translateX(-50%);
            z-index:5;
            color:rgba(255,255,255,0.6);
            font-family:'Montserrat',sans-serif;
            font-size:11px; letter-spacing:3px;
            display:flex; flex-direction:column; align-items:center; gap:12px;
        }
        .wheel::after{
            content:''; width:1px; height:60px;
            background:linear-gradient(180deg, var(--primary), transparent);
            animation:wheel 2s infinite;
            transform-origin:top;
        }
        @keyframes wheel{
            0%{transform:scaleY(0)}
            50%{transform:scaleY(1)}
            100%{transform:scaleY(0); transform-origin:bottom}
        }
        /* 줌인 등으로 가시 뷰포트가 짧을 때 SCROLL DOWN과 본문 글자가 겹치는 것 방지 */
        @media (max-height:720px){
            .visual_content{padding-bottom:90px}
            .wheel{font-size:10px; bottom:20px}
            .wheel::after{height:36px}
        }
        @media (max-height:560px){
            .visual_content{padding-bottom:0}
            .wheel{display:none}
        }
        .text_motion{
            display:block;
            transform:translateY(30px); opacity:0;
            transition:opacity .9s cubic-bezier(.25,.46,.45,.94), transform .9s cubic-bezier(.25,.46,.45,.94);
        }
        .text_motion.on{transform:translateY(0); opacity:1}

        /* =========== TECH =========== */
        #tech{background:var(--bg); color:#fff}
        #tech .layout{
            position:relative; width:100%; height:100%;
            padding:calc(var(--header-h) + 40px) 5vw 160px;
        }
        #techBackground{position:absolute; inset:0; z-index:0; opacity:.4}
        #tech_img{position:absolute; inset:0; z-index:1}
        .tech_item{
            position:absolute; inset:0;
            opacity:0; visibility:hidden;
            transition:opacity .8s cubic-bezier(.4,0,.2,1);
        }
        .tech_item.on{opacity:1; visibility:visible}
        .tech_item .tech_bg{
            position:absolute; inset:0;
            background-size:cover; background-position:center;
            opacity:.55;
            transform:scale(1.08);
            transition:transform 8s linear;
        }
        .tech_item.on .tech_bg{transform:scale(1)}
        .tech_item .tech_bg video{
            position:absolute; inset:0;
            width:100%; height:100%; object-fit:cover;
        }
        .tech_item::after{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(30,144,255,0.10) 0%, transparent 55%),
                linear-gradient(135deg, rgba(15,24,38,0.55), rgba(15,24,38,0.25));
        }
        .tech_item .text_box{
            position:absolute; z-index:2;
            top:50%; transform:translateY(-50%);
            max-width:60vw; width:60vw;
        }
        /* Alternating left/right layout */
        .tech_item[data-idx="0"] .text_box,
        .tech_item[data-idx="2"] .text_box{ left:6vw; text-align:left }
        .tech_item[data-idx="1"] .text_box,
        .tech_item[data-idx="3"] .text_box{ right:6vw; text-align:right }
        /* Big background number */
        .tech_item .big_num{
            position:absolute; z-index:1; pointer-events:none;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(200px, 42vw, 700px);
            font-weight:900; line-height:.8;
            color:transparent;
            -webkit-text-stroke:1px rgba(127,207,255,0.12);
            top:50%; transform:translateY(-50%);
            letter-spacing:-20px;
        }
        .tech_item[data-idx="0"] .big_num,
        .tech_item[data-idx="2"] .big_num{ right:-3vw }
        .tech_item[data-idx="1"] .big_num,
        .tech_item[data-idx="3"] .big_num{ left:-3vw }

        .tech_item .title_sub{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:14px; font-weight:600; color:var(--primary-3);
            letter-spacing:3px; margin-bottom:24px;
        }
        .tech_item .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
        }
        .tech_item .t_main + .t_main{color:var(--primary); margin-top:6px}
        .tech_item .t_desc{
            font-size:17px; font-weight:300; line-height:1.9;
            color:rgba(255,255,255,0.85);
            margin-top:30px; max-width:520px;
            text-wrap:pretty;
            word-break:keep-all;
        }
        .tech_item[data-idx="1"] .t_desc,
        .tech_item[data-idx="3"] .t_desc{ margin-left:auto }

        #tech_txt{
            position:absolute; left:0; right:0; bottom:0; z-index:5;
            padding:0 5vw 24px;
        }
        .bg_text{
            position:absolute; left:50%; bottom:calc(100% + 10px);
            transform:translateX(-50%);
            font-family:'Montserrat',sans-serif;
            font-size:clamp(80px, 14vw, 240px);
            font-weight:900;
            color:transparent;
            -webkit-text-stroke:1px rgba(255,255,255,0.08);
            white-space:nowrap; pointer-events:none; z-index:-1;
            letter-spacing:-6px; line-height:.8; opacity:.9;
        }
        .table{
            display:flex; position:relative;
            border-top:1px solid rgba(255,255,255,0.12);
        }
        .table>span{flex:1; position:relative}
        .table>span button{
            width:100%; padding:22px 0 0;
            color:rgba(255,255,255,0.5);
            font-size:15px; font-weight:500;
            text-align:center;
            transition:color .3s;
            position:relative;
        }
        .table>span button em{
            position:absolute; top:-1px; left:0;
            width:0; height:2px;
            background:var(--primary);
            display:block; font-size:0;
            transition:width .1s linear;
        }
        .table>span.on button{color:#fff}
        .table>span button:hover{color:rgba(255,255,255,.88)}

        /* =========== POSITIVE (ESG) =========== */
        #positive{background:var(--bg)}
        #positive .bg{position:absolute; inset:0; z-index:0}
        #positive .bg .box{
            position:absolute; inset:0;
            width:100%; height:100%;
            overflow:hidden;
        }
        #positive .bg .box::after{
            content:''; position:absolute; inset:0; z-index:2;
            background:linear-gradient(135deg, rgba(15,39,72,0.70), rgba(15,39,72,0.75));
        }
        #positive .bg .box img{
            width:100%; height:100%;
            object-fit:cover;
        }
        #positive .layout{
            position:relative; z-index:2;
            width:100%; height:100%;
            padding:calc(var(--header-h) + 40px) 5vw 80px;
            display:flex; align-items:center;
        }
        #positive .big_num{
            position:absolute; z-index:1; pointer-events:none;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(200px, 42vw, 700px);
            font-weight:900; line-height:.8; letter-spacing:-20px;
            color:transparent;
            -webkit-text-stroke:1px rgba(127,207,255,0.12);
            top:50%; right:-3vw; transform:translateY(-50%);
        }
        .esg_inner{
            position:relative; z-index:3;
            width:100%; max-width:1500px; margin:0 auto;
            display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center;
        }
        .esg_head .section_num{
            display:inline-flex; align-items:center; gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:13px; font-weight:600; letter-spacing:4px;
            color:var(--primary-3);
            margin-bottom:30px;
        }
        .esg_head .section_num::before{
            content:''; width:40px; height:1px; background:var(--primary);
        }
        #positive .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
        }
        #positive .t_main + .t_main{color:var(--primary); margin-top:6px}
        #positive .t_desc{
            font-size:17px; font-weight:300; line-height:1.9;
            color:rgba(255,255,255,0.82);
            margin-top:30px;
            max-width:520px;
            text-wrap:pretty;
            word-break:keep-all;
        }
        .esg_pillars{display:flex; flex-direction:column; gap:18px}
        .esg_pillar{
            padding:30px 34px;
            border:1px solid rgba(255,255,255,0.12);
            border-radius:16px;
            background:rgba(30,144,255,0.04);
            backdrop-filter:blur(6px);
            -webkit-backdrop-filter:blur(6px);
            display:grid; grid-template-columns:80px 1fr auto; gap:26px;
            align-items:center;
            transition:all .4s cubic-bezier(.25,.46,.45,.94);
        }
        .esg_pillar:hover{
            border-color:var(--primary);
            background:rgba(30,144,255,0.10);
            transform:translateX(10px);
        }
        .esg_pillar .p_num{
            font-family:'Montserrat',sans-serif;
            font-size:42px; font-weight:800; line-height:1;
            color:var(--primary-3); letter-spacing:-2px;
        }
        .esg_pillar .p_body h3{
            font-family:'Montserrat',sans-serif;
            font-size:22px; font-weight:700; color:#fff;
            letter-spacing:-.3px; margin-bottom:6px;
        }
        .esg_pillar .p_body .p_tag{
            font-family:'Montserrat',sans-serif;
            font-size:11px; font-weight:700; letter-spacing:2.5px;
            color:var(--primary);
        }
        .esg_pillar .p_body p{
            font-size:14px; font-weight:300; line-height:1.75;
            color:rgba(255,255,255,0.7); margin-top:8px;
            text-wrap:pretty;
            word-break:keep-all;
        }
        .esg_pillar .p_arrow{
            width:36px; height:36px; border-radius:50%;
            border:1px solid rgba(255,255,255,0.25);
            display:flex; align-items:center; justify-content:center;
            color:#fff; transition:all .3s;
        }
        .esg_pillar:hover .p_arrow{background:var(--primary); border-color:var(--primary); color:#001833; transform:rotate(-45deg)}

        /* =========== RECRUIT =========== */
        #recruit{background:var(--bg)}
        #recruit .bg{position:absolute; inset:0; z-index:0}
        #recruit .bg img{
            width:100%; height:100%; object-fit:cover;
            filter:saturate(1) brightness(.72);
        }
        #recruit .bg::after{
            content:''; position:absolute; inset:0;
            background:linear-gradient(90deg, rgba(15,39,72,0.85) 0%, rgba(15,39,72,0.35) 55%, rgba(15,39,72,0.80) 100%);
        }
        #recruit .layout{
            position:relative; z-index:2;
            width:100%; height:100%;
            padding:calc(var(--header-h) + 40px) 5vw 80px;
            display:flex; align-items:center; justify-content:center;
        }
        #recruit .big_num{
            position:absolute; z-index:1; pointer-events:none;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(200px, 42vw, 700px);
            font-weight:900; line-height:.8; letter-spacing:-20px;
            color:transparent;
            -webkit-text-stroke:1px rgba(127,207,255,0.12);
            top:50%; left:50%; transform:translate(-50%, -50%);
        }
        .recruit_inner{
            position:relative; z-index:3;
            width:100%; max-width:900px; margin:0 auto;
            display:flex; flex-direction:column; align-items:center;
            text-align:center;
        }
        .recruit_head{
            display:flex; flex-direction:column; align-items:center;
            text-align:center;
            max-width:760px;
        }
        .recruit_head .section_num{
            display:inline-flex; align-items:center; gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:13px; font-weight:600; letter-spacing:4px;
            color:var(--primary-3);
            margin-bottom:30px;
        }
        .recruit_head .section_num::before{
            content:''; width:40px; height:1px; background:var(--primary);
        }
        #recruit .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
        }
        #recruit .t_main + .t_main{color:var(--primary); margin-top:6px}
        #recruit .t_desc{
            font-size:17px; font-weight:300; line-height:1.9;
            color:rgba(255,255,255,0.85);
            margin:30px auto 0;
            max-width:580px;
            text-wrap:pretty;
            word-break:keep-all;
            text-align:center;
        }
        #recruit .recruit_box{
            display:flex; gap:14px; flex-wrap:wrap;
            margin-top:48px;
            justify-content:center;
        }
        #recruit .recruit_box a,
        #recruit .recruit_box button{
            display:inline-flex; align-items:center; gap:10px;
            padding:16px 36px;
            border-radius:30px;
            font-size:14px; font-weight:600;
            letter-spacing:.5px;
            font-family:inherit;
            cursor:pointer;
            transition:all .35s;
            min-height:48px;
            min-width:160px;
            justify-content:center;
        }
        /* 입사지원 — 파란 솔리드 버튼 */
        #recruit .recruit_box a.primary,
        #recruit .recruit_box button.primary{
            background:var(--primary);
            color:#001833;
            border:1px solid var(--primary);
        }
        #recruit .recruit_box a.primary:hover,
        #recruit .recruit_box button.primary:hover,
        #recruit .recruit_box button.primary[aria-expanded="true"]{
            background:var(--primary-2);
            border-color:var(--primary-2);
            color:#001833;
            transform:translateY(-2px);
        }
        /* 채용공고 보기 — 외곽선 버튼 */
        #recruit .recruit_box a:not(.primary),
        #recruit .recruit_box button:not(.primary){
            background:transparent;
            color:#fff;
            border:1px solid rgba(255,255,255,0.30);
        }
        #recruit .recruit_box a:not(.primary):hover,
        #recruit .recruit_box button:not(.primary):hover,
        #recruit .recruit_box button:not(.primary)[aria-expanded="true"]{
            background:rgba(255,255,255,0.06);
            border-color:#fff;
            transform:translateY(-2px);
        }
        /* recruit head section_num centered */
        .recruit_head .section_num{
            justify-content:center;
        }
        .recruit_head .section_num::after{
            content:''; width:40px; height:1px; background:var(--primary);
        }

        /* =========================================================
           RECRUIT — Grow Together centered (closed). On button click, the head
           slides into the LEFT half and the panel appears in the RIGHT half
           immediately beside it. Implemented with a grid that animates from
           a single column to 1fr 1fr.
           Inner content adopts About NEIMIN editorial language: kicker
           block (01 + caption) → h3 with em accent → lead → timeline.
           ========================================================= */
        #recruit .recruit_inner{max-width:1280px; width:100%}

        /* Big watermark number — slides + fades while a panel is active */
        #recruit .big_num{
            transition:transform .9s cubic-bezier(.83,0,.17,1), opacity .7s ease;
        }
        #recruit.is-active .big_num{
            transform:translate(-90%, -50%) scale(.85);
            opacity:.4;
        }
        /* Background reacts — slight zoom + extra dim */
        #recruit .bg img{
            transition:transform 1.1s cubic-bezier(.25,.46,.45,.94),
                       filter .7s ease;
        }
        #recruit.is-active .bg img{
            transform:scale(1.05);
            filter:saturate(.85) brightness(.5);
        }
        #recruit.is-active .bg::after{
            background:linear-gradient(90deg, rgba(15,39,72,0.92) 0%, rgba(15,39,72,0.55) 50%, rgba(15,39,72,0.32) 100%);
            transition:background .7s ease;
        }
        /* Active button — soft glow ring */
        #recruit .recruit_box button[aria-expanded="true"]{
            box-shadow:0 0 0 6px rgba(30,144,255,0.18);
        }

        /* SPLIT — fixed 2-slot flex layout, animation purely via transform on
           the split itself (GPU-accelerated → silky smooth, no layout thrash).
           Closed: split is shifted +25% so the head's left slot is centered
                   in the inner; the panel slot lives off-screen to the right.
           Open:   split returns to translateX(0); head settles into the left
                   half, the panel becomes visible in the right half right
                   beside it. The inner clips the right overflow with overflow:hidden. */
        #recruit .recruit_inner{overflow:hidden}
        .recruit_split{
            display:flex;
            width:100%;
            align-items:center;
            box-sizing:border-box;
            transform:translate3d(25%, 0, 0);
            transition:transform .85s cubic-bezier(.83,0,.17,1);
            will-change:transform;
        }
        .recruit_split.has-panel{
            transform:translate3d(0, 0, 0);
            align-items:stretch;
            flex:1;
        }
        .recruit_head{
            flex:1 1 50%; min-width:0;
            box-sizing:border-box;
            padding:0 clamp(20px, 2vw, 40px);
        }
        .recruit_split.has-panel .recruit_head{
            align-self:center;
        }
        /* When panel is open, let the inner fill the section's padded area */
        #recruit.is-active .layout{align-items:stretch}
        #recruit.is-active .recruit_inner{height:100%}

        /* PANEL — fixed 50% flex slot (always laid out, never display:none).
           Visibility/opacity controls visual presence; main slide is driven by
           the split's transform, with a small inner translate+scale for polish. */
        .recruit_panel{
            position:relative;
            flex:1 1 50%; min-width:0;
            box-sizing:border-box;
            background:linear-gradient(135deg, rgba(15,39,72,0.45) 0%, rgba(8,18,38,0.55) 100%);
            backdrop-filter:blur(28px) saturate(1.05);
            -webkit-backdrop-filter:blur(28px) saturate(1.05);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:0;
            padding:clamp(24px, 2.6vw, 40px);
            color:#fff;
            display:flex; flex-direction:column;
            overflow:hidden auto;
            scrollbar-width:thin;
            scrollbar-color:rgba(255,255,255,0.25) transparent;
            opacity:0;
            visibility:hidden;
            transform:translate3d(0, 0, 0) scale(.96);
            transition:opacity .5s ease,
                       transform .65s cubic-bezier(.16,1,.3,1),
                       visibility 0s linear .5s;
            will-change:opacity, transform;
        }
        .recruit_panel::-webkit-scrollbar{width:6px}
        .recruit_panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18); border-radius:3px}
        .recruit_panel::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32)}
        .recruit_split.has-panel .recruit_panel{
            opacity:1;
            visibility:visible;
            transform:translate3d(0, 0, 0) scale(1);
            transition:opacity .5s ease .15s,
                       transform .65s cubic-bezier(.16,1,.3,1) .15s,
                       visibility 0s;
        }
        .rp_view{flex:1; min-height:0; display:flex; flex-direction:column; gap:clamp(8px, 1vw, 14px)}
        .rp_view[hidden]{display:none}

        /* About-NEIMIN style kicker (mirror of .card-kicker / .kicker-num / .kicker-text) */
        .rp_kicker{
            display:flex; align-items:baseline; gap:14px;
            padding-bottom:14px;
            border-bottom:1px solid rgba(255,255,255,0.10);
            margin:0 0 6px;
        }
        .rp_kicker_num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2vw, 32px); font-weight:800;
            color:var(--primary);
            line-height:1; letter-spacing:-1px;
        }
        .rp_kicker_text{
            font-family:'Montserrat',sans-serif;
            font-size:11.5px; letter-spacing:2.5px; font-weight:600;
            color:rgba(255,255,255,0.55);
            text-transform:uppercase;
        }
        .rp_h{
            font-family:'Noto Sans KR','Montserrat',sans-serif;
            font-size:clamp(20px, 1.9vw, 28px); font-weight:700;
            line-height:1.3; letter-spacing:-.5px;
            color:#fff; margin:0;
            word-break:keep-all;
        }
        .rp_h em{
            font-style:normal; font-family:'Montserrat',sans-serif;
            color:var(--primary); font-weight:700;
        }
        .rp_lead{
            font-size:13.5px; line-height:1.7;
            color:rgba(255,255,255,0.65);
            margin:0 0 12px;
            word-break:keep-all;
        }
        .rp_lead strong{color:var(--primary-2); font-weight:600}

        /* Notice list — flat left-aligned rows; year is already in each title */
        .rp_timeline{
            list-style:none; padding:0; margin:6px 0 0;
            display:flex; flex-direction:column;
            border-top:1px solid rgba(255,255,255,0.10);
        }
        .rp_tl_item{
            border-bottom:1px solid rgba(255,255,255,0.08);
        }
        .rp_tl_item:last-child{border-bottom:none}
        .rp_tl_item > a{
            display:block;
            padding:clamp(12px, 1.2vw, 18px) 0;
            font-size:14.5px; color:#fff; line-height:1.5;
            text-align:left;
            transition:color .25s, padding-left .25s;
        }
        .rp_tl_item > a:hover{color:var(--primary-2); padding-left:8px}
        .rp_tl_item > a em{
            font-style:normal; font-size:.82em;
            color:rgba(255,255,255,0.45);
            margin-left:6px;
            font-family:'Montserrat',sans-serif;
            letter-spacing:.4px;
        }
        .rp_more{
            display:inline-flex; align-items:center; gap:6px;
            margin-top:18px; align-self:flex-start;
            font-family:'Montserrat',sans-serif;
            font-size:12px; font-weight:600; letter-spacing:.6px;
            color:var(--primary-2);
            transition:color .25s, transform .25s;
        }
        .rp_more:hover{color:#fff; transform:translateX(4px)}

        /* Close button */
        .recruit_panel_close{
            position:absolute; right:14px; top:14px; z-index:2;
            width:34px; height:34px;
            min-width:34px; min-height:34px;
            max-width:34px; max-height:34px;
            flex:none;
            box-sizing:border-box;
            padding:0;
            aspect-ratio:1 / 1;
            border-radius:50%;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.18);
            color:rgba(255,255,255,0.7);
            cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:all .25s;
        }
        .recruit_panel_close:hover{
            background:rgba(255,255,255,0.10);
            color:#fff; border-color:#fff;
        }
        /* Stagger reveal: panel header block + form fields/timeline rows fade in */
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *{
            opacity:0;
            transform:translateY(12px);
            animation:rpStagger .55s cubic-bezier(.16,1,.3,1) forwards;
        }
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *:nth-child(1){animation-delay:.18s}
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *:nth-child(2){animation-delay:.26s}
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *:nth-child(3){animation-delay:.34s}
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *:nth-child(4){animation-delay:.42s}
        #recruit.is-active .recruit_panel .rp_view:not([hidden]) > *:nth-child(n+5){animation-delay:.50s}
        @keyframes rpStagger{to{opacity:1; transform:translateY(0)}}

        #recruit.is-active .recruit_panel .rp_form > *{
            opacity:0;
            transform:translateY(8px);
            animation:rpStagger .45s cubic-bezier(.16,1,.3,1) forwards;
        }
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(1){animation-delay:.40s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(2){animation-delay:.45s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(3){animation-delay:.50s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(4){animation-delay:.55s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(5){animation-delay:.60s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(6){animation-delay:.65s}
        #recruit.is-active .recruit_panel .rp_form > *:nth-child(n+7){animation-delay:.70s}

        #recruit.is-active .recruit_panel .rp_timeline .rp_tl_item{
            opacity:0;
            transform:translateX(-10px);
            animation:rpRowIn .5s cubic-bezier(.16,1,.3,1) forwards;
        }
        #recruit.is-active .recruit_panel .rp_timeline .rp_tl_item:nth-child(1){animation-delay:.40s}
        #recruit.is-active .recruit_panel .rp_timeline .rp_tl_item:nth-child(2){animation-delay:.50s}
        @keyframes rpRowIn{to{opacity:1; transform:translateX(0)}}

        /* Honour reduced-motion preference */
        @media (prefers-reduced-motion:reduce){
            .recruit_panel,
            #recruit .bg img,
            #recruit .big_num{transition-duration:.001ms}
            #recruit.is-active .recruit_panel .rp_view > *,
            #recruit.is-active .recruit_panel .rp_form > *,
            #recruit.is-active .recruit_panel .rp_tl_item{
                animation:none; opacity:1; transform:none;
            }
        }

        /* form — 2-column grid for short fields so everything fits without
           an internal scrollbar. Textarea spans full width and grows. */
        .rp_form{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:clamp(10px, 1vw, 14px);
            margin-top:4px;
            flex:1; min-height:0;
            grid-template-rows:auto auto 1fr auto auto auto;
        }
        .rp_field{display:flex; flex-direction:column; min-height:0}
        .rp_field--full{grid-column:span 2}
        .rp_field--full.rp_field--grow{flex:1; min-height:0}
        .rp_field label{
            display:block;
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:11.5px; font-weight:600; letter-spacing:.6px;
            color:rgba(255,255,255,0.7);
            margin-bottom:6px;
        }
        .rp_field label span{color:var(--primary)}
        .rp_field input,
        .rp_field select,
        .rp_field textarea{
            width:100%;
            padding:11px 14px;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.14);
            border-radius:6px;
            color:#fff;
            font-family:inherit;
            font-size:14px;
            line-height:1.4;
            transition:border-color .2s, background .2s;
            box-sizing:border-box;
        }
        .rp_field--grow textarea{flex:1; min-height:80px}
        .rp_field input::placeholder,
        .rp_field textarea::placeholder{color:rgba(255,255,255,0.3)}
        .rp_field input:focus,
        .rp_field select:focus,
        .rp_field textarea:focus{
            outline:none;
            border-color:var(--primary);
            background:rgba(30,144,255,0.06);
        }
        .rp_field textarea{resize:none; font-family:inherit; height:100%}
        .rp_consent{
            grid-column:span 2;
            display:flex; align-items:flex-start; gap:8px;
            font-size:11px; line-height:1.5;
            color:rgba(255,255,255,0.55);
            cursor:pointer;
            margin-top:2px;
        }
        .rp_consent input{width:auto; margin-top:3px; flex-shrink:0; accent-color:var(--primary)}
        .rp_submit{
            grid-column:span 2;
            display:inline-flex; align-items:center; justify-content:center; gap:8px;
            background:var(--primary);
            color:#001833;
            border:none;
            padding:14px 28px;
            border-radius:30px;
            font-family:inherit;
            font-weight:700; font-size:13px; letter-spacing:.5px;
            cursor:pointer;
            transition:background .25s, transform .25s, box-shadow .25s;
            margin-top:6px;
            justify-self:start;
        }
        .rp_submit:hover{
            background:var(--primary-2);
            transform:translateY(-1px);
            box-shadow:0 8px 22px -8px rgba(30,144,255,0.6);
        }
        .rp_status{
            grid-column:span 2;
            font-size:12.5px; line-height:1.5;
            color:var(--primary-2);
            margin:6px 0 0; min-height:1em;
        }
        .rp_status.error{color:#ff8585}

        /* Mobile / tablet: vertical stack — head on top, panel slides DOWN
           below it when a button is clicked. Replaces the desktop's
           horizontal split + transform-translateX with a vertical collapse
           (max-height + translateY). */
        @media(max-width:1024px){
            .recruit_split,
            .recruit_split.has-panel{
                flex-direction:column;
                transform:none;
                align-items:stretch;
            }
            #recruit .recruit_inner{overflow:visible}
            /* Head fills full width on mobile (no longer 50% slot) */
            .recruit_head{flex:0 0 auto; width:100%; padding:0 16px}
            /* Panel collapsed by default; expands below head when has-panel */
            .recruit_panel{
                flex:0 0 auto;
                max-height:0;
                padding-top:0;
                padding-bottom:0;
                border-width:0;
                margin-top:0;
                transform:translate3d(0, -8px, 0) scale(1);
                transition:max-height .6s cubic-bezier(.83,0,.17,1),
                           padding .4s ease,
                           border-width .4s ease,
                           margin-top .4s ease,
                           opacity .45s ease,
                           transform .55s cubic-bezier(.16,1,.3,1),
                           visibility 0s linear .6s;
            }
            .recruit_split.has-panel .recruit_panel{
                max-height:1200px;        /* 65vh 캡 제거 — 폼이 짧은 화면(줌인 등)에서 짓눌리지 않게, 자연 높이로 펴지고 페이지가 스크롤됨 */
                padding-top:clamp(20px, 4vw, 28px);
                padding-bottom:clamp(20px, 4vw, 28px);
                border-width:1px;
                margin-top:clamp(20px, 4vw, 28px);
                transform:translate3d(0, 0, 0) scale(1);
                overflow:visible;
                transition:max-height .6s cubic-bezier(.83,0,.17,1),
                           padding .4s ease,
                           border-width .4s ease,
                           margin-top .4s ease,
                           opacity .45s ease .15s,
                           transform .55s cubic-bezier(.16,1,.3,1) .15s,
                           visibility 0s;
            }
        }
        @media(max-width:540px){
            .rp_form{grid-template-columns:1fr; grid-template-rows:auto auto auto auto 1fr auto auto auto}
            .rp_field--full{grid-column:span 1}
            .rp_consent, .rp_submit, .rp_status{grid-column:span 1}
        }
        /* Browser zoom-in or short windows: drop the pin so the recruit content
           can grow to its natural height instead of being clipped.
           760→900: 줌인 시 760~900px 구간에서 폼이 짓눌리던 문제 대응(고정 더 일찍 해제). */
        @media (min-width:1025px) and (max-height:900px){
            #recruitWrap{height:auto}
            #recruit.pin{
                position:relative;
                height:auto;
                min-height:100dvh;
                overflow:visible;
            }
            #recruit .layout{
                height:auto;
                min-height:100dvh;
                padding-top:calc(var(--header-h) + 60px);
                padding-bottom:80px;
                align-items:flex-start;
            }
            .recruit_split{align-items:stretch}
            .recruit_panel{overflow:visible}
        }
        /* Mobile(<=1024): recruit 섹션 고정(pin) 해제 — 입사지원 패널이 뷰포트(100dvh)를
           넘쳐도 잘리지 않고 페이지가 자연스럽게 스크롤되도록. 위 데스크톱 short-viewport escape의 모바일판. */
        @media (max-width:1024px){
            #recruitWrap{height:auto}
            #recruit.pin{
                position:relative;
                height:auto;
                min-height:100dvh;
                overflow:visible;
            }
            #recruit .layout{
                height:auto;
                min-height:100dvh;
                padding-top:calc(var(--header-h) + 40px);
                padding-bottom:80px;
                align-items:flex-start;
            }
            #recruit .recruit_inner{overflow:visible}
        }
        .recruit_stats{
            display:grid; grid-template-columns:1fr 1fr; gap:16px;
        }
        .recruit_stat{
            padding:34px 28px;
            border:1px solid rgba(255,255,255,0.12);
            border-radius:16px;
            background:rgba(30,144,255,0.04);
            backdrop-filter:blur(6px);
            -webkit-backdrop-filter:blur(6px);
            transition:all .4s cubic-bezier(.25,.46,.45,.94);
        }
        .recruit_stat:hover{
            border-color:var(--primary);
            background:rgba(30,144,255,0.10);
            transform:translateY(-4px);
        }
        .recruit_stat .num{
            font-family:'Montserrat',sans-serif;
            font-size:48px; font-weight:800;
            color:var(--primary-3); line-height:1; letter-spacing:-2px;
        }
        .recruit_stat .num small{font-size:20px; font-weight:600; margin-left:4px; color:var(--primary)}
        .recruit_stat .label{
            font-size:14px; font-weight:500;
            color:rgba(255,255,255,0.85); margin-top:14px;
            letter-spacing:-.3px;
        }
        .recruit_stat .sub{
            font-size:12px; color:rgba(255,255,255,0.5);
            margin-top:6px; line-height:1.6;
        }

        /* =========== NEWS (one-page, full viewport — like Grow Together) =========== */
        #news{
            position:relative; z-index:5;
            background:
                linear-gradient(180deg, rgba(10,14,24,0.78) 0%, rgba(10,14,24,0.92) 100%),
                url('../images/performance-bg-forest.jpg') center/cover no-repeat fixed;
            background-color:#0a0e18;
            padding:calc(var(--header-h) + 20px) 0 60px;
            min-height:100vh;
            min-height:100dvh;
            display:flex; flex-direction:column; justify-content:flex-start;
        }
        #news::before{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 80% 20%, rgba(30,144,255,0.10), transparent 60%),
                radial-gradient(ellipse at 10% 80%, rgba(77,179,255,0.06), transparent 55%);
            pointer-events:none;
        }
        #news .layout{
            position:relative; z-index:1;
            max-width:1100px; margin:0 auto; padding:0 5vw;
            display:flex; flex-direction:column; align-items:center;
            gap:clamp(40px, 5vw, 72px);
        }
        #news .layout > *{width:100%}
        /* Title block centered; content blocks (slider) keep their own alignment. */
        #news .layout > div:first-child{text-align:center}
        #news .n_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(34px, 4.4vw, 72px);
            font-weight:400; line-height:1; letter-spacing:-1.5px;
            color:#fff;
        }
        #news .n_main em{color:#fff; font-weight:inherit; font-style:normal}
        #news .n_desc{
            font-size:15px; color:rgba(255,255,255,.6); line-height:1.85;
            margin-top:20px;
            max-width:560px; margin-left:auto; margin-right:auto;
        }
        #news .slider{position:relative}
        #news .item{
            border-bottom:1px solid rgba(255,255,255,.08);
            transition:all .3s;
        }
        #news .item a{
            display:grid; grid-template-columns:1fr 140px;
            gap:30px; align-items:center;
            padding:28px 0;
            transition:padding .3s;
        }
        #news .item:hover a{padding-left:14px}
        #news .item .title{
            font-size:18px; font-weight:500; color:#fff;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
            transition:color .3s;
            text-wrap:pretty;
            word-break:keep-all;
        }
        #news .item:hover .title{color:var(--primary)}
        #news .item .date{
            font-family:'Montserrat',sans-serif;
            font-size:13px; color:var(--primary); font-weight:500;
            letter-spacing:.5px; text-align:right;
        }

        /* =========== ABOUT (pin-wrap variant) =========== */
        #about{
            background:linear-gradient(180deg, #0a0e18 0%, #08111f 100%);
        }
        #about::before{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 18% 25%, rgba(30,144,255,0.10), transparent 55%),
                radial-gradient(ellipse at 85% 80%, rgba(79,179,255,0.06), transparent 55%);
            pointer-events:none;
        }
        #about .layout{
            position:relative; z-index:2;
            width:100%; height:100%;
            max-width:1600px; margin:0 auto;
            padding:calc(var(--header-h) + 60px) 5vw 60px;
            display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(340px, 1fr);
            gap:100px; align-items:center;
            will-change:filter, opacity;
        }
        #about .about_head{
            order:2;
        }
        #about .big_num{
            position:absolute; z-index:1; pointer-events:none;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(200px, 42vw, 700px);
            font-weight:900; line-height:.8; letter-spacing:-20px;
            color:transparent;
            -webkit-text-stroke:1px rgba(127,207,255,0.12);
            top:50%; right:-3vw; transform:translateY(-50%);
        }
        .about_body .about_intro{
            font-size:18px; color:rgba(255,255,255,0.85); line-height:1.85;
            margin-bottom:40px; font-weight:400;
            text-wrap:pretty;
            word-break:keep-all;
            max-width:640px;
        }
        .overview_table{
            display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
            border-top:1px solid rgba(255,255,255,0.10);
        }
        .overview_row{
            display:grid; grid-template-columns:140px 1fr;
            padding:22px 0;
            border-bottom:1px solid rgba(255,255,255,0.08);
            align-items:center;
        }
        .overview_row dt{
            font-family:'Montserrat',sans-serif;
            font-size:11px; font-weight:700; letter-spacing:2px;
            color:var(--primary);
        }
        .overview_row dd{
            font-size:15px; color:rgba(255,255,255,0.82);
            letter-spacing:-.2px;
        }
        .overview_row.full{grid-column:span 2}

        @media(max-width:1024px){
            #about .layout{grid-template-columns:1fr; gap:30px}
            .overview_table{grid-template-columns:1fr}
            .overview_row.full{grid-column:span 1}
        }
        @media(max-width:768px){
            .about_body .about_intro{font-size:14px; margin-bottom:24px; line-height:1.8}
            .about_body .about_intro br{display:none}
            .overview_row{
                display:flex; flex-direction:column; align-items:flex-start;
                padding:14px 0; gap:6px;
            }
            .overview_row dt{font-size:10px; letter-spacing:1.5px}
            .overview_row dd{font-size:14px; line-height:1.5}
        }

        /* =========== RESEARCH (diagonal split variant) =========== */
        #research{
            background:#05090f;
            color:#fff;
        }
        #research .layout{
            position:relative; z-index:2;
            width:100%; height:100%;
            overflow:hidden;
        }

        /* Diagonal split wrapper */
        .rs_split{
            position:absolute; inset:0;
        }
        .rs_half{
            position:absolute; inset:0;
            overflow:hidden;
        }
        /* Upper-left triangle — 연구개발과제 */
        .rs_half--left{
            clip-path:polygon(0 0, 100% 0, 0 100%);
            background:
                linear-gradient(135deg, rgba(18,34,56,0.72) 0%, rgba(10,22,40,0.88) 70%),
                radial-gradient(ellipse at 20% 30%, rgba(30,144,255,0.18), transparent 60%);
        }
        /* Lower-right triangle — 기술 */
        .rs_half--right{
            clip-path:polygon(100% 0, 100% 100%, 0 100%);
            background:
                linear-gradient(135deg, rgba(8,14,24,0.90) 0%, rgba(4,10,18,0.96) 70%),
                radial-gradient(ellipse at 80% 70%, rgba(79,179,255,0.10), transparent 60%);
        }
        .rs_half_bg{
            position:absolute; inset:0; z-index:0;
            background-size:cover; background-position:center;
            opacity:.42;
        }
        .rs_half--right .rs_half_bg{
            opacity:.65;
            background-size:128% auto;
            background-position:18% 58%;
        }

        /* 3 diagonal image bands inside upper-left triangle */
        .rs_bands{
            position:absolute; inset:0; z-index:0;
            pointer-events:none;
        }
        .rs_band{
            position:absolute; inset:0;
            background-size:cover; background-position:center;
        }
        /* Sub-dividers go ↘ (top-left → bottom-right), parallel to y=x */
        /* bottom strip — GEO-DL (좌하단 코너, (0,100) 포함) */
        .rs_band--01{
            clip-path:polygon(0 28%, 36% 64%, 0 100%);
            background-size:110% auto;
            background-position:320% 30%;
        }
        /* middle strip — SITE-SCAN (대각 평행사변형, (0,0) 포함, 기존보다 살짝 축소) */
        .rs_band--02{
            clip-path:polygon(0 0, 28% 0, 64% 36%, 36% 64%, 0 28%);
            background-size:130% auto;
            background-position:50% 50%;
            /* 분석 기술 디테일 가리기용 약한 블러 */
            filter:blur(3px);
        }
        /* top strip — PV-DESIGNER (우상단 코너, (100,0) 포함) */
        .rs_band--03{
            clip-path:polygon(28% 0, 100% 0, 64% 36%);
            background-size:32% auto;
            background-position:center;
            background-repeat:repeat;
        }
        /* dark gradient overlay for legibility of 보유기술 text */
        .rs_bands::after{
            content:''; position:absolute; inset:0;
            background:
                linear-gradient(135deg, rgba(5,9,15,0.78) 0%, rgba(5,9,15,0.55) 38%, rgba(5,9,15,0.30) 100%),
                linear-gradient(180deg, rgba(5,9,15,0.45) 0%, rgba(5,9,15,0.10) 60%);
            pointer-events:none;
        }
        .rs_band_lines{
            position:absolute; inset:0; width:100%; height:100%;
            pointer-events:none;
        }
        .rs_half_inner{
            position:absolute; z-index:2;
            display:flex; flex-direction:column; gap:18px;
            max-width:min(520px, 38vw);
        }
        .rs_half--left .rs_half_inner{
            left:6vw; top:calc(var(--header-h) + 7vh);
            max-width:min(720px, 54vw);
        }
        .rs_half--right .rs_half_inner{
            right:6vw; top:calc(var(--header-h) + 14vh);
            max-width:360px;
            align-items:flex-end; text-align:right;
        }

        /* Diagonal line SVG */
        .rs_diag_line{
            position:absolute; inset:0; z-index:3;
            width:100%; height:100%;
            pointer-events:none;
        }

        /* Centered title overlay */
        .rs_center{
            position:absolute; z-index:4;
            top:50%; left:50%;
            transform:translate(-50%, -50%);
            display:flex; flex-direction:column; align-items:center;
            gap:14px;
            pointer-events:none;
            text-align:center;
        }
        .rs_center .section_num{
            display:inline-block; position:relative;
            font-family:'Montserrat',sans-serif;
            font-size:12px; font-weight:600; letter-spacing:3px;
            color:var(--primary-2);
            padding:0 22px;
        }
        .rs_center .section_num::before,
        .rs_center .section_num::after{
            content:''; position:absolute; top:50%;
            width:14px; height:1px; background:var(--primary-2);
        }
        .rs_center .section_num::before{left:0}
        .rs_center .section_num::after{right:0}
        .rs_center .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
            text-shadow:0 4px 24px rgba(0,0,0,0.6);
        }
        .rs_center .t_main + .t_main{
            color:var(--primary); margin-top:6px;
        }

        /* Label + heading + list inside each half */
        :is(#research, #esg, #solution2) .rs_label{
            font-family:'Montserrat',sans-serif;
            font-size:13px; font-weight:600; letter-spacing:3px;
            color:var(--primary-2);
        }
        :is(#research, #esg, #solution2) .rs_h{
            font-family:'Noto Sans KR','Montserrat',sans-serif;
            font-size:38px; font-weight:500; color:#fff;
            letter-spacing:-.6px; line-height:1.2;
            margin:0;
        }
        :is(#research, #esg, #solution2) .rs_items{
            list-style:none; margin:10px 0 0; padding:0;
            display:flex; flex-direction:column;
            border-top:1px solid rgba(255,255,255,0.10);
        }
        :is(#research, #esg, #solution2) .rs_items:empty{border-top:0}
        :is(#research, #esg, #solution2) .rs_item{
            display:grid;
            grid-template-columns:auto minmax(200px, max-content) 1fr;
            column-gap:32px; row-gap:10px;
            align-items:start;
            padding:42px 0;
            border-bottom:1px solid rgba(255,255,255,0.07);
        }
        :is(#research, #esg, #solution2) .rs_item:last-child{border-bottom:0}
        .rs_half--right .rs_item_body{text-align:left}
        :is(#research, #esg, #solution2) .rs_num{
            font-family:'Montserrat',sans-serif;
            font-size:15px; font-weight:500; letter-spacing:2px;
            color:rgba(255,255,255,0.6);
            padding-top:6px;
        }
        :is(#research, #esg, #solution2) .rs_item_body{
            display:flex; flex-direction:column; gap:7px; min-width:0;
        }
        :is(#research, #esg, #solution2) .rs_item_name{
            font-family:'Montserrat',sans-serif;
            font-size:27px; font-weight:500; letter-spacing:.5px;
            color:#fff;
        }
        :is(#research, #esg, #solution2) .rs_item_sub{
            font-size:18px; line-height:1.5;
            color:rgba(255,255,255,0.82);
        }
        :is(#research, #esg, #solution2) .rs_item_desc{
            margin:0; padding-left:18px;
            border-left:1px solid rgba(255,255,255,0.22);
            font-size:18px; line-height:1.7;
            color:rgba(255,255,255,0.88);
            letter-spacing:-.2px;
            word-break:keep-all;
            overflow-wrap:break-word;
            text-wrap:balance;
            max-width:32em;
        }

        @media (max-width:900px){
            /* Mobile: stack halves top/bottom with straight horizontal split */
            .rs_half--left{clip-path:polygon(0 0, 100% 0, 100% 50%, 0 50%)}
            .rs_half--right{clip-path:polygon(0 50%, 100% 50%, 100% 100%, 0 100%)}
            .rs_half--left .rs_half_inner{
                left:6vw; top:calc(var(--header-h) + 4vh);
                right:6vw; max-width:none;
                align-items:flex-start; text-align:left;
            }
            .rs_half--right .rs_half_inner{
                left:6vw; right:6vw; bottom:4vh;
                max-width:none;
                align-items:flex-start; text-align:left;
            }
            .rs_diag_line line{
                /* Horizontal line for mobile */
                stroke-opacity:.22;
            }
            /* Mobile: bands become horizontal stripes within top half */
            .rs_band--01{clip-path:polygon(0 33.33%, 100% 33.33%, 100% 50%, 0 50%)}
            .rs_band--02{
                clip-path:polygon(0 16.67%, 100% 16.67%, 100% 33.33%, 0 33.33%);
                background-size:cover;
                background-position:center 70%;
            }
            .rs_band--03{clip-path:polygon(0 0, 100% 0, 100% 16.67%, 0 16.67%)}
            .rs_band_lines{display:none}
            .rs_center{top:50%}
            .rs_center .t_main{font-size:44px; letter-spacing:-1.5px}
            :is(#research, #esg, #solution2) .rs_h{font-size:28px}
            :is(#research, #esg, #solution2) .rs_item{
                grid-template-columns:auto 1fr;
            }
            :is(#research, #esg, #solution2) .rs_item_desc{
                grid-column:1 / -1;
                padding-left:0; border-left:0;
                margin-top:4px;
                font-size:13px;
            }
            :is(#research, #esg, #solution2) .rs_item_name{font-size:16px}
            :is(#research, #esg, #solution2) .rs_item_sub{font-size:13px}
        }
        @media (max-width:640px){
            .rs_center .t_main{font-size:36px}
            :is(#research, #esg, #solution2) .rs_item{gap:14px; padding:12px 0}
            :is(#research, #esg, #solution2) .rs_item_name{font-size:14px}
            :is(#research, #esg, #solution2) .rs_item_sub{font-size:12.5px}
        }

        /* =========== PERFORMANCE (pin-wrap variant) =========== */
        #performance{
            background:
                linear-gradient(180deg, rgba(6,16,12,0.78) 0%, rgba(8,22,18,0.82) 100%),
                url('../images/performance-bg-forest.jpg') center/cover no-repeat;
        }
        #performance::before{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 10% 80%, rgba(30,144,255,0.08), transparent 55%),
                radial-gradient(ellipse at 90% 20%, rgba(120,200,160,0.06), transparent 55%);
            pointer-events:none;
        }
        #performance .layout{
            position:relative; z-index:2;
            width:100%; height:100%;
            max-width:none;
            padding:calc(var(--header-h) + 40px) 0 40px 0;
            display:grid;
            grid-template-columns:minmax(380px, 34vw) 1fr;
            gap:40px; align-items:center;
            will-change:filter, opacity;
        }
        #performance .perf_head{
            padding-left:5vw;
        }
        /* Tickers bleed to the right viewport edge */
        .perf_showcase{
            padding-right:0;
        }
        #performance .big_num{
            position:absolute; z-index:1; pointer-events:none;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(200px, 42vw, 700px);
            font-weight:900; line-height:.8; letter-spacing:-20px;
            color:transparent;
            -webkit-text-stroke:1px rgba(127,207,255,0.12);
            top:50%; left:-3vw; transform:translateY(-50%);
        }
        #performance .perf_head{
            display:flex; flex-direction:column; gap:18px;
        }
        .perf_summary{
            display:flex; gap:40px; flex-wrap:wrap;
            justify-self:end;
        }
        .perf_summary .s_item{
            text-align:right;
        }
        .perf_summary .s_num{
            font-family:'Montserrat',sans-serif;
            font-size:42px; font-weight:800; color:#fff;
            line-height:1; letter-spacing:-2px;
        }
        .perf_summary .s_num em{color:var(--primary); font-weight:300}
        .perf_summary .s_num small{
            font-size:14px; color:rgba(255,255,255,0.5);
            font-weight:500; margin-left:4px;
        }
        .perf_summary .s_label{
            font-size:12px; color:rgba(255,255,255,0.55);
            margin-top:10px; letter-spacing:.5px;
        }
        @media(max-width:1024px){
            .perf_summary{justify-self:start; gap:30px}
            .perf_summary .s_item{text-align:left}
        }
        /* Match Philosophy/Recruit base style */
        #performance .t_main,
        #about .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
        }
        /* Performance — larger + leftward emphasis */
        #performance .t_main{
            font-size:clamp(60px, 8vw, 148px);
            letter-spacing:-4px;
            margin-left:-4px;  /* optical shift so big caps align flush-left */
        }
        #performance .t_main + .t_main,
        #about .t_main + .t_main{color:var(--primary); margin-top:6px}
        #performance .t_desc,
        #about .t_desc{
            font-size:17px; font-weight:300; line-height:1.9;
            color:rgba(255,255,255,0.82);
            margin-top:30px;
            max-width:520px;
            text-wrap:pretty;
            word-break:keep-all;
        }
        /* Pin-context header styling shared with positive/recruit */
        #performance .section_num, #about .section_num{
            font-family:'Montserrat',sans-serif;
            font-size:13px; font-weight:600; letter-spacing:4px;
            color:var(--primary-3);
            display:inline-flex; align-items:center; gap:14px;
            margin-bottom:26px;
        }
        #performance .section_num::before, #about .section_num::before{
            content:''; width:40px; height:1px; background:var(--primary);
        }
        #performance .perf_summary{
            display:flex; gap:30px; margin-top:8px;
        }
        #performance .perf_summary .s_item{text-align:left}
        #performance .perf_summary .s_num{font-size:32px}
        #performance .perf_summary .s_num small{font-size:12px}
        #performance .more_btn{
            display:inline-flex; align-items:center; gap:10px;
            margin-top:12px; padding:13px 24px;
            border:1px solid rgba(255,255,255,0.22);
            border-radius:30px;
            font-size:12px; font-weight:600; letter-spacing:1.5px;
            color:#fff;
            background:rgba(30,144,255,0.05);
            transition:all .3s; align-self:flex-start;
        }
        #performance .more_btn:hover{
            border-color:var(--primary); background:var(--primary); color:#001833;
            transform:translateY(-1px);
        }

        /* Horizontal auto-scrolling ticker — cards flow continuously */
        .perf_showcase{
            position:relative; overflow:hidden;
            display:flex; flex-direction:column; gap:18px;
            justify-content:center;
        }
        .perf_ticker{
            position:relative; overflow:hidden;
            /* Fade only on left; right bleeds cleanly to viewport edge */
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 100%);
        }
        .perf_ticker_track{
            display:flex; gap:16px;
            width:max-content;
            will-change:transform;
            animation: tickerScroll 80s linear infinite;
        }
        .perf_ticker:hover .perf_ticker_track,
        .perf_ticker:focus-within .perf_ticker_track{
            animation-play-state:paused;
        }
        .perf_ticker--reverse .perf_ticker_track{
            animation-direction:reverse;
            animation-duration:72s;
        }
        @keyframes tickerScroll{
            from{transform:translate3d(0,0,0)}
            to{transform:translate3d(calc(-50% - 8px),0,0)}
        }
        @media (prefers-reduced-motion:reduce){
            .perf_ticker_track{ animation:none }
        }
        /* Card sizing inside the ticker */
        .perf_ticker .perf_card{
            width:clamp(220px, 22vw, 300px);
            height:clamp(200px, 26vh, 280px);
            flex-shrink:0;
            transition:transform .4s cubic-bezier(.25,.46,.45,.94),
                       border-color .3s, box-shadow .4s;
        }
        .perf_ticker .perf_card:hover{
            transform:translateY(-4px);
            z-index:2;
            box-shadow:0 18px 38px rgba(0,0,0,0.55);
            border-color:rgba(255,255,255,0.28);
        }
        /* Fallback grid (for screens where animation is off/tiny) */
        .perf_grid{
            display:grid; grid-template-columns:repeat(4, 1fr);
            grid-auto-rows:1fr; gap:12px;
            max-height:calc(100vh - var(--header-h) - 120px);
        }
        .perf_card{
            position:relative; overflow:hidden;
            border:1px solid rgba(255,255,255,0.08);
            border-radius:2px;
            background:rgba(10,18,14,0.55);
            backdrop-filter:blur(2px);
            -webkit-backdrop-filter:blur(2px);
            transition:transform .45s cubic-bezier(.25,.46,.45,.94),
                       border-color .3s, box-shadow .4s, background .3s;
            display:flex; flex-direction:column;
        }
        .perf_card:hover{
            border-color:rgba(255,255,255,0.22);
            background:rgba(10,18,14,0.72);
            transform:translateY(-4px);
            box-shadow:0 16px 36px rgba(0,0,0,0.5);
        }
        .perf_thumb{
            position:relative;
            aspect-ratio:4/3;
            overflow:hidden;
            background:#0a1410;
            flex:1;
        }
        .perf_thumb img{
            width:100%; height:100%;
            object-fit:cover;
            filter:saturate(1.02) contrast(1.04);
            transition:transform 1s cubic-bezier(.25,.46,.45,.94), filter .6s;
        }
        .perf_card:hover .perf_thumb img{
            transform:scale(1.05);
            filter:saturate(1.08) contrast(1.06);
        }
        /* 진주 어옥리 — 모듈이 더 잘 보이도록 살짝 확대 */
        .perf_thumb img[src*="jinju-eook"]{
            transform:scale(1.18);
            transform-origin:center 55%;
        }
        .perf_card:hover .perf_thumb img[src*="jinju-eook"]{
            transform:scale(1.24);
        }
        .perf_thumb::after{
            content:''; position:absolute; inset:0;
            background:linear-gradient(180deg, transparent 45%, rgba(4,8,6,0.82) 100%);
            pointer-events:none;
        }
        .perf_thumb .p_cap_overlay{
            position:absolute; bottom:14px; left:16px; z-index:2;
            font-family:'Montserrat',sans-serif;
            font-size:22px; font-weight:300;
            color:#fff; letter-spacing:-.5px;
            text-shadow:0 1px 10px rgba(0,0,0,0.7);
        }
        .perf_thumb .p_cap_overlay small{
            font-size:10px; font-weight:500;
            color:rgba(255,255,255,0.75); margin-left:4px;
            letter-spacing:1.2px; text-transform:uppercase;
        }
        .perf_body{
            padding:12px 16px 14px;
            display:flex; flex-direction:column; gap:6px;
            border-top:1px solid rgba(255,255,255,0.05);
        }
        .perf_card .p_date{
            font-family:'Montserrat',sans-serif;
            font-size:10px; font-weight:500; letter-spacing:2px;
            color:rgba(255,255,255,0.55);
        }
        .perf_card .p_name{
            display:block;
            font-size:13px; font-weight:500; color:#fff;
            letter-spacing:-.2px; line-height:1.35;
        }
        /* About pin content */
        #about .about_body{
            display:flex; flex-direction:column; gap:28px;
        }
        #about .about_body .about_intro{
            font-size:17px; color:rgba(255,255,255,0.85); line-height:1.85;
            margin-bottom:0; font-weight:400;
            text-wrap:pretty; word-break:keep-all; max-width:720px;
        }

        /* =========== CONTACT (one-page, full viewport — like Grow Together) =========== */
        #contact{
            position:relative; z-index:5;
            background:
                linear-gradient(180deg, rgba(6,10,18,0.80) 0%, rgba(6,10,18,0.93) 100%),
                url('../images/recruit-team.jpg') center/cover no-repeat fixed;
            background-color:#060a12;
            padding:calc(var(--header-h) + 60px) 0 80px;
            min-height:100vh;
            min-height:100dvh;
            display:flex; flex-direction:column; justify-content:center;
            border-top:1px solid rgba(255,255,255,0.06);
        }
        #contact::before{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 70% 30%, rgba(30,144,255,0.10), transparent 60%),
                radial-gradient(ellipse at 20% 90%, rgba(77,179,255,0.06), transparent 55%);
            pointer-events:none;
        }
        #contact .layout{
            position:relative; z-index:1;
            max-width:1100px; margin:0 auto; padding:0 5vw;
            display:flex; flex-direction:column; align-items:center;
            gap:clamp(40px, 5vw, 72px);
        }
        #contact .layout > *{width:100%}
        /* Title block centered; cards/form inside keep their own alignment. */
        #contact .layout > div:first-child{text-align:center}
        #contact .c_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(34px, 4.4vw, 72px);
            font-weight:400; line-height:1; letter-spacing:-1.5px;
            color:#fff;
        }
        #contact .c_main em{color:#fff; font-weight:inherit; font-style:normal}
        #contact .c_desc{
            font-size:15px; color:rgba(255,255,255,.6); line-height:1.85;
            margin-top:20px;
            max-width:560px; margin-left:auto; margin-right:auto;
            text-wrap:pretty;
            word-break:keep-all;
        }
        .contact_grid{
            display:grid; grid-template-columns:1fr 1fr; gap:0;
            border-top:1px solid rgba(255,255,255,0.14);
        }
        /* contact_card — editorial 라벨 블록. 박스 chrome 제거, 좌측 accent + 하단 hairline 으로 그리드 분리 */
        .contact_card{
            padding:clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px);
            border:none;
            border-bottom:1px solid rgba(255,255,255,0.08);
            border-right:1px solid rgba(255,255,255,0.08);
            border-radius:0;
            background:transparent;
            transition:background .35s ease;
        }
        .contact_card:hover{
            background:rgba(30,144,255,0.04);
        }
        /* 우측 컬럼(2번째 카드) right border 제거 */
        .contact_card.full{border-right:none}
        .contact_card:nth-child(4){border-right:none}  /* E-MAIL = right column */
        .contact_card .c_label{
            font-family:'Montserrat',sans-serif;
            font-size:11px; font-weight:700; letter-spacing:2.5px;
            color:var(--primary);
        }
        .contact_card .c_value{
            display:block; margin-top:14px;
            font-size:20px; font-weight:500; color:#fff;
            letter-spacing:-.3px; line-height:1.45;
            text-wrap:pretty;
            word-break:keep-all;
        }
        .contact_card .c_sub{
            display:block; margin-top:8px;
            font-size:13px; color:rgba(255,255,255,0.55);
            line-height:1.6;
        }
        .contact_card.full{grid-column:span 2}

        /* CONTACT — 오시는길 Google Maps embed */
        .contact_card--map{padding-top:clamp(20px, 2vw, 28px)}
        .contact_card--map .c_label{margin-bottom:14px; display:block}
        .contact_card--map .c_map{
            position:relative;
            aspect-ratio:21/9;
            min-height:280px;
            border-radius:10px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,0.10);
            background:#0a0e18;
        }
        .contact_card--map iframe{
            width:100%; height:100%;
            border:0; display:block;
            /* 다크 사이트와 톤 매칭 — 채도 약간 낮춤 */
            filter:saturate(.92) brightness(.96);
        }
        .contact_card--map .c_map_link{
            position:absolute; right:14px; bottom:14px;
            display:inline-flex; align-items:center; gap:6px;
            padding:9px 14px;
            background:rgba(15,39,72,0.92);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            color:#fff;
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:12px; font-weight:600; letter-spacing:.4px;
            border:1px solid rgba(255,255,255,0.18);
            border-radius:6px;
            transition:background .25s, border-color .25s, transform .25s;
        }
        .contact_card--map .c_map_link:hover{
            background:var(--primary);
            border-color:var(--primary);
            transform:translateY(-1px);
        }
        @media (max-width:768px){
            .contact_card--map .c_map{aspect-ratio:4/3; min-height:240px}
            .contact_card--map .c_map_link{font-size:11px; padding:8px 12px; right:10px; bottom:10px}
        }

        /* Section 'view all' link */
        .sec_more{
            display:inline-flex; align-items:center; gap:10px;
            padding:14px 26px;
            border:1px solid rgba(255,255,255,0.25);
            border-radius:30px;
            font-size:13px; font-weight:600;
            color:#fff; letter-spacing:.5px;
            transition:all .35s;
            margin-top:28px;
        }
        .sec_more:hover{
            background:var(--primary); color:#001833; border-color:var(--primary);
            transform:translateY(-2px);
        }
        .sec_more svg{transition:transform .3s}
        .sec_more:hover svg{transform:translateX(4px)}

        /* Contact form — outer chrome 제거, 폼 자체는 functional 하게 유지(input box 그대로) */
        .contact_form{
            grid-column:span 2;
            padding:clamp(32px, 3.5vw, 48px) clamp(20px, 2.4vw, 32px) 0;
            border:none;
            border-radius:0;
            background:transparent;
            margin-top:0;
        }
        .contact_form .form_head{
            display:flex; justify-content:space-between; align-items:flex-end;
            flex-wrap:wrap; gap:14px;
            margin-bottom:28px;
        }
        .contact_form h3{
            font-size:22px; font-weight:600; color:#fff;
            letter-spacing:-.3px;
        }
        .contact_form .form_tabs{display:flex; gap:6px}
        .contact_form .form_tabs button{
            padding:8px 18px;
            font-size:12px; font-weight:600; letter-spacing:.5px;
            color:rgba(255,255,255,0.55);
            border:1px solid rgba(255,255,255,0.14);
            border-radius:20px;
            transition:all .3s;
        }
        .contact_form .form_tabs button.active{
            color:#001833;
            background:var(--primary);
            border-color:var(--primary);
        }
        .contact_form .form_tabs button:hover:not(.active){color:#fff; border-color:rgba(255,255,255,0.3)}

        .form_grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
        .form_field{position:relative; display:flex; flex-direction:column}
        .form_field.full{grid-column:span 2}
        .form_field label{
            font-family:'Montserrat',sans-serif;
            font-size:11px; font-weight:700; letter-spacing:1.8px;
            color:rgba(255,255,255,0.55);
            margin-bottom:8px;
        }
        .form_field label .req{color:var(--primary)}
        .form_field input,
        .form_field textarea,
        .form_field select{
            padding:14px 16px;
            background:rgba(10,14,24,0.4);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:10px;
            color:#fff; font-size:14px; font-family:inherit;
            transition:all .25s;
        }
        .form_field input::placeholder,
        .form_field textarea::placeholder{color:rgba(255,255,255,0.3)}
        .form_field input:focus,
        .form_field textarea:focus,
        .form_field select:focus{
            border-color:var(--primary);
            background:rgba(10,14,24,0.6);
            outline:none;
        }
        .form_field.error input,
        .form_field.error textarea,
        .form_field.error select{border-color:#ff4d5c; background:rgba(255,77,92,0.06)}
        .form_field textarea{min-height:130px; resize:vertical; line-height:1.6}
        .form_field .err_msg{
            font-size:11px; color:#ff8a97;
            margin-top:6px; min-height:14px;
            transition:opacity .2s;
        }
        .form_consent{
            display:flex; align-items:flex-start; gap:10px;
            padding:14px 0 4px;
            font-size:12px; color:rgba(255,255,255,0.6);
        }
        .form_consent input{
            width:16px; height:16px; margin-top:2px;
            accent-color:var(--primary);
            flex-shrink:0;
        }
        .form_consent a{color:var(--primary-2); text-decoration:underline}
        .form_submit{
            margin-top:20px;
            padding:16px 38px;
            background:var(--primary); color:#001833;
            font-size:14px; font-weight:700; letter-spacing:.5px;
            border-radius:30px;
            display:inline-flex; align-items:center; gap:10px;
            transition:all .3s;
            min-height:48px;
        }
        .form_submit:hover{background:#fff; transform:translateY(-2px); box-shadow:0 10px 30px rgba(30,144,255,0.35)}
        .form_submit:disabled{opacity:.6; cursor:not-allowed; transform:none}
        .form_status{
            margin-top:16px; padding:12px 16px;
            border-radius:8px;
            font-size:13px;
            display:none;
        }
        .form_status.success{display:block; background:rgba(30,200,120,0.12); color:#6bdca8; border:1px solid rgba(30,200,120,0.35)}
        .form_status.error{display:block; background:rgba(255,77,92,0.12); color:#ff8a97; border:1px solid rgba(255,77,92,0.35)}
        .form_note{font-size:11px; color:rgba(255,255,255,0.4); margin-top:10px; line-height:1.6}

        @media(max-width:768px){
            /* CONTACT 1열 stack — divider 가 right→bottom 로 자동 정리 */
            .contact_grid{grid-template-columns:1fr}
            .contact_card{border-right:none}
            .contact_card.full{grid-column:span 1}
            .contact_card:nth-child(4){border-bottom:none}  /* E-MAIL = form 바로 위, hairline 제거 */
            .contact_form{grid-column:span 1; padding:28px 22px 0}
            .contact_form h3{font-size:18px}
            .contact_form .form_head{margin-bottom:22px}
            .form_grid{grid-template-columns:1fr; gap:14px}
            .form_field.full{grid-column:span 1}
            .form_submit{padding:14px 28px; font-size:13px; width:100%; justify-content:center}
        }

        @media(max-width:1200px){
            .perf_grid{grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(0, 1fr)}
            /* 줌인/협폭(≤1200px)에서 perf_head 텍스트와 우측 ticker가 시각적으로 겹쳐 보이는
               것을 막기 위해 1024 stack 트리거를 #performance 한정으로 200px 앞당김.
               텍스트가 위, 이미지가 아래로 흐름. */
            #performance .layout{
                grid-template-columns:1fr; gap:32px;
                align-items:flex-start;
                padding:calc(var(--header-h) + 40px) 5vw 40px;
            }
            #performance .perf_head{padding-left:0}
            #performance .perf_summary{justify-self:flex-start}
            .perf_showcase{padding-right:0}

            /* stack됐으면 pin도 풀어야 함 — 100vh 안에 1열 콘텐츠가 안 들어가서
               하단 ticker 카드가 잘리던 문제(주로 모바일/태블릿). pin-wrap의 250vh dwell도 해제. */
            #performanceWrap{height:auto!important}
            #performance.pin{
                position:relative!important;
                height:auto!important;
                min-height:auto;
                overflow:visible!important;
            }
            #performance .layout{height:auto}
            .perf_ticker .perf_card{
                /* vh 기반 높이 → 모바일/세로폭에서 카드가 너무 작아지지 않도록 절대값 */
                height:clamp(200px, 50vw, 260px);
            }
        }
        @media(max-width:1024px){
            #performance .layout, #about .layout{
                grid-template-columns:1fr; gap:40px;
                align-items:flex-start;
                padding:calc(var(--header-h) + 40px) 5vw 40px;
            }
            #performance .perf_head{padding-left:0}
            .perf_grid{grid-template-columns:repeat(3, 1fr); max-height:none}
            #contact .layout{grid-template-columns:1fr; gap:30px}
            #performance .t_desc{max-width:none}
            #performance .perf_summary{flex-wrap:wrap}
        }
        @media(max-width:768px){
            #contact{padding:70px 0; min-height:auto; justify-content:flex-start}
            #contact .layout{padding:0 20px}
            #performance .t_main, #about .t_main, #contact .c_main{font-size:44px; letter-spacing:-1.5px}
            #performance .t_desc, #about .t_desc, #contact .c_desc{font-size:14px; line-height:1.75; margin-top:20px}
            #performance .t_desc br, #about .t_desc br{display:none}
            #performance .perf_head{gap:14px}
            .perf_summary{
                gap:18px; flex-wrap:wrap;
                padding:14px 0 0;
                width:100%;
            }
            #performance .perf_summary .s_num{font-size:26px; letter-spacing:-1px}
            #performance .perf_summary .s_num small{font-size:11px}
            .perf_summary .s_label{font-size:11px; margin-top:6px}
            .perf_grid{grid-template-columns:repeat(2, 1fr); gap:10px}
            .perf_body{padding:10px 12px 12px}
            .perf_card .p_date{font-size:10px; letter-spacing:1.5px}
            .perf_card .p_name{font-size:12px; line-height:1.4}
            .perf_thumb .p_cap_overlay{font-size:16px; bottom:8px; left:10px}
            .perf_thumb .p_cap_overlay small{font-size:10px}
            #performance .more_btn{padding:11px 20px; font-size:11px}
            .contact_grid{grid-template-columns:1fr; gap:10px}
            .contact_card{padding:22px 20px; border-radius:14px}
            .contact_card.full{grid-column:span 1}
            .contact_card .c_label{font-size:10px; letter-spacing:2px}
            .contact_card .c_value{font-size:17px; margin-top:10px}
            .contact_card .c_value br{display:none}
            .contact_card .c_sub{font-size:12px; margin-top:6px}
        }
        @media(max-width:380px){
            .perf_grid{grid-template-columns:1fr}
            .perf_thumb{aspect-ratio:16/10}
        }

        /* =========== FOOTER =========== */
        footer{
            position:relative; z-index:5;
            background:#040609; color:rgba(255,255,255,0.5);
        }
        .footer_top{
            padding:90px 5vw 60px;
            border-bottom:1px solid rgba(255,255,255,0.06);
        }
        .footer_guide{
            display:grid; grid-template-columns:1.4fr 3fr; gap:60px;
        }
        .footer_title{
            display:block; line-height:0; margin-bottom:20px;
        }
        .footer_title img{
            height:40px; width:auto;
            filter:brightness(0) invert(1); opacity:.85;
        }
        .footer_brand p{
            font-size:13px; line-height:1.9; color:rgba(255,255,255,0.42);
            margin-top:20px;
            word-break:keep-all;
        }
        .footer_top nav>ul{
            display:grid; grid-template-columns:repeat(4, 1fr); gap:40px;
        }
        .footer_top nav>ul>li>strong{
            display:block;
            font-size:14px; color:#fff; font-weight:700;
            margin-bottom:18px;
        }
        .footer_top .depth2 li{margin-bottom:10px}
        .footer_top .depth2 a{
            font-size:13px; color:rgba(255,255,255,.45);
            transition:color .3s;
        }
        .footer_top .depth2 a:hover{color:var(--primary)}
        .footer_btm{
            padding:28px 5vw;
            display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
        }
        .footer_btm ul.link{display:flex; gap:26px; flex-wrap:wrap}
        .footer_btm ul.link a{
            font-size:12px; color:rgba(255,255,255,.5);
            transition:color .3s;
        }
        .footer_btm ul.link a.cr{color:rgba(255,255,255,.9); font-weight:600}
        .footer_btm ul.link a:hover{color:var(--primary)}
        .copy{
            font-size:11px; color:rgba(255,255,255,.3);
            font-family:'Montserrat',sans-serif; letter-spacing:.5px;
        }

        /* =========== SCROLL TOP =========== */
        .btn_top{
            position:fixed; bottom:30px; right:30px; z-index:999;
            opacity:0; transform:translateY(20px); pointer-events:none;
            transition:all .4s;
        }
        .btn_top.show{opacity:1; transform:translateY(0); pointer-events:auto}
        .btn_top button{
            width:52px; height:52px; border-radius:50%;
            background:var(--primary); color:#001833;
            display:flex; align-items:center; justify-content:center;
            font-family:'Montserrat',sans-serif;
            font-size:11px; font-weight:700; letter-spacing:1px;
            box-shadow:0 10px 30px rgba(30,144,255,0.4);
            transition:transform .3s;
        }
        .btn_top button:hover{transform:translateY(-4px)}

        /* =========== POPUP =========== */
        .popup{
            position:fixed; inset:0;
            display:flex; align-items:center; justify-content:center; flex-direction:column;
            background:rgba(0,0,0,0.82); z-index:3000;
            opacity:0; visibility:hidden; transition:opacity .3s;
        }
        .popup.open{opacity:1; visibility:visible}
        .popup .pop_img{
            width:min(90vw, 480px); overflow:hidden;
            border-radius:12px; background:#fff;
        }
        .popup .pop_img img{width:100%; display:block}
        .popup .pop_btn{
            background:#111; padding:14px 20px;
            display:flex; justify-content:space-between; align-items:center;
            width:min(90vw, 480px);
            border-radius:0 0 12px 12px;
        }
        .popup label{
            display:inline-flex; align-items:center; gap:10px;
            color:#fff; font-size:13px; cursor:pointer;
        }
        .popup .close{
            color:#fff; font-size:13px; font-weight:600;
            padding:6px 14px; border:1px solid rgba(255,255,255,0.3); border-radius:20px;
        }

        /* =========== RESPONSIVE =========== */
        /* Desktop defaults — hide mobile-only UI */
        .mobile_menu_btn{display:none}
        .mobile_nav{display:none}

        /* ======== TABLET (≤1024px) ======== */
        @media(max-width:1024px){
            .tech_item .text_box{max-width:80vw; width:80vw}
            .esg_inner, .recruit_inner{
                grid-template-columns:1fr; gap:56px;
            }
            .esg_head, .recruit_head{max-width:600px}
            #positive .layout, #recruit .layout{align-items:flex-start; padding-top:calc(var(--header-h) + 80px)}
            .esg_pillars{max-width:700px}
            .recruit_stats{max-width:700px}
        }

        /* ======== MOBILE (≤768px) ======== */
        @media(max-width:768px){
            :root{--header-h:58px}

            /* --- Header --- */
            header{padding:0 14px; padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right))}
            header nav{display:none}
            .lang{display:none}
            .ui_logo img{height:26px}
            .ui_logo .kr{display:none}
            .header_other{gap:10px}
            .btn-contact{font-size:11px; padding:9px 14px; min-height:36px}

            /* --- Hamburger menu button --- */
            .mobile_menu_btn{
                display:flex; align-items:center; justify-content:center;
                width:44px; height:44px; border-radius:50%;
                border:1px solid rgba(255,255,255,0.2);
                flex-shrink:0;
            }
            .mobile_menu_btn span{
                display:block; width:18px; height:1.5px; background:#fff; position:relative;
            }
            .mobile_menu_btn span::before,
            .mobile_menu_btn span::after{
                content:''; position:absolute; left:0; width:100%; height:1.5px; background:#fff;
            }
            .mobile_menu_btn span::before{top:-6px}
            .mobile_menu_btn span::after{top:6px}

            /* --- Mobile nav overlay --- */
            .mobile_nav{
                display:flex; flex-direction:column;
                position:fixed; inset:0; z-index:1999;
                background:rgba(5,8,14,0.98);
                backdrop-filter:blur(20px);
                -webkit-backdrop-filter:blur(20px);
                /* Top padding clears the absolute-positioned close button:
                   close button ends at safe + 18 + 44 = safe + 62, so leave a
                   comfortable 30px+ gap before the first menu item. */
                padding:calc(env(safe-area-inset-top) + 96px) 24px calc(env(safe-area-inset-bottom) + 30px);
                opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
                overflow-y:auto;
                -webkit-overflow-scrolling:touch;
                overscroll-behavior:contain;
            }
            .mobile_nav.open{opacity:1; visibility:visible}
            .mobile_nav ul{display:flex; flex-direction:column; gap:2px}
            .mobile_nav ul li a{
                display:flex; align-items:center;
                padding:18px 8px;
                font-size:17px; font-weight:600; color:#fff;
                border-bottom:1px solid rgba(255,255,255,0.08);
                letter-spacing:-.3px;
                min-height:56px;
            }
            .mobile_nav ul li a:active{background:rgba(30,144,255,0.08)}
            .mobile_nav .close_btn{
                position:fixed;  /* fixed so it stays above scrollable list */
                top:calc(env(safe-area-inset-top) + 18px); right:18px;
                z-index:2000;
                width:44px; height:44px;
                min-width:44px; min-height:44px;
                aspect-ratio:1 / 1;
                border-radius:50%;
                background:rgba(5,8,14,0.92);
                backdrop-filter:blur(12px);
                -webkit-backdrop-filter:blur(12px);
                border:1px solid rgba(255,255,255,0.2);
                display:flex; align-items:center; justify-content:center;
                color:#fff; font-size:20px;
                cursor:pointer; padding:0;
            }

            /* --- Pin heights reduced for mobile (less aggressive dwell) --- */
            .pin-wrap{height:140vh}
            #techWrap{height:420vh}

            /* --- Visual/Hero --- */
            #visual .layout{min-height:100dvh}
            .visual_content{padding:0 20px}
            .visual_content .eyebrow{font-size:11px; letter-spacing:3px; margin-bottom:18px}
            .visual_content .eyebrow::before,
            .visual_content .eyebrow::after{width:22px}
            .visual_content .title_kr{font-size:15px; margin-top:22px; letter-spacing:-.5px}
            .visual_content .desc{font-size:11px; letter-spacing:2px; margin-top:16px}
            .wheel{font-size:10px; bottom:calc(env(safe-area-inset-bottom) + 20px)}
            .wheel::after{height:40px}

            /* --- Tech --- */
            #tech .layout{padding:calc(var(--header-h) + 20px) 20px 140px}
            .tech_item .text_box{
                left:20px!important; right:20px!important;
                max-width:calc(100% - 40px); width:calc(100% - 40px);
                top:46%; text-align:left!important;
            }
            .tech_item .t_desc{margin-left:0!important; font-size:14px; margin-top:20px; line-height:1.8}
            .tech_item .t_desc br{display:none}
            .tech_item .t_main{font-size:44px; letter-spacing:-1px}
            .tech_item .title_sub{font-size:11px; letter-spacing:2px; margin-bottom:14px}
            .tech_item .big_num{
                font-size:160px; letter-spacing:-8px; opacity:.35;
                left:auto!important; right:-5vw!important;
            }
            #tech_txt{padding:0 16px calc(env(safe-area-inset-bottom) + 12px)}
            .bg_text{font-size:42px; letter-spacing:-2px; bottom:calc(100% + 4px)}
            .table>span button{font-size:11px; padding:14px 2px 0; letter-spacing:-.3px; min-height:44px}

            /* --- Positive/Philosophy --- */
            #positive .layout{padding:calc(var(--header-h) + 30px) 20px 40px}
            #positive .t_main{font-size:44px; letter-spacing:-1.5px}
            #positive .t_desc{font-size:14px; margin-top:20px; line-height:1.75}
            #positive .t_desc br{display:none}
            .esg_head .section_num{font-size:11px; letter-spacing:2px; margin-bottom:20px}
            .esg_head .section_num::before{width:22px}
            .esg_pillars{gap:10px}
            .esg_pillar{
                grid-template-columns:44px 1fr 24px;
                gap:14px; padding:18px 16px;
                border-radius:12px;
            }
            .esg_pillar .p_num{font-size:26px}
            .esg_pillar .p_body h3{font-size:15px; margin-bottom:4px}
            .esg_pillar .p_body .p_tag{font-size:9px; letter-spacing:1.5px}
            .esg_pillar .p_body p{font-size:12px; line-height:1.6; margin-top:6px}
            .esg_pillar .p_arrow{width:26px; height:26px}
            .esg_pillar .p_arrow svg{width:10px; height:10px}
            #positive .big_num{font-size:180px; letter-spacing:-10px; opacity:.35; right:-6vw}
            #positive .bg .box{width:110vw; height:110vw}

            /* --- Recruit (모바일에서 Grow Together / 본문 / 버튼 모두 가운데 정렬) --- */
            #recruit .layout{
                padding:calc(var(--header-h) + 30px) 20px 40px;
                justify-content:center;
                align-items:center;
            }
            #recruit .recruit_inner{align-items:center; text-align:center}
            #recruit .recruit_head{align-items:center; text-align:center; width:100%}
            #recruit .t_main{font-size:44px; letter-spacing:-1.5px; text-align:center}
            #recruit .t_desc{font-size:14px; margin:20px auto 0; padding:0; text-align:center}
            #recruit .t_desc br{display:none}
            .recruit_head .section_num{font-size:11px; letter-spacing:2px; margin-bottom:20px; justify-content:center}
            .recruit_head .section_num::before{width:22px}
            #recruit .recruit_box{margin:28px auto 0; gap:10px; justify-content:center; width:100%}
            #recruit .recruit_box a{padding:13px 22px; font-size:12px; min-height:44px}
            .recruit_stats{grid-template-columns:1fr 1fr; gap:10px}
            .recruit_stat{padding:20px 16px; border-radius:12px}
            .recruit_stat .num{font-size:28px; letter-spacing:-1px}
            .recruit_stat .num small{font-size:13px}
            .recruit_stat .label{font-size:12px; margin-top:8px}
            .recruit_stat .sub{font-size:10px; margin-top:4px}
            #recruit .big_num{font-size:180px; letter-spacing:-10px; opacity:.35; left:-6vw}

            /* --- News --- */
            /* 모바일에서도 풀페이지 유지 — min-height:100dvh + justify-content:center 그대로,
               데스크톱 padding 만 작게 축소. 4개 아이템 + 전체보기 버튼은 100dvh 안에 충분히 들어옴. */
            #news{padding:calc(var(--header-h) + 30px) 0 60px}
            #news .layout{grid-template-columns:1fr; gap:28px; padding:0 20px}
            #news .n_main{font-size:40px}
            #news .n_desc{font-size:14px}
            #news .item a{grid-template-columns:1fr; gap:6px; padding:18px 0; min-height:auto}
            #news .item .date{text-align:left; order:-1; font-size:12px}
            #news .item .title{font-size:15px; white-space:normal; line-height:1.45}
            #news .item svg{display:none}

            /* --- Footer --- */
            .footer_guide{grid-template-columns:1fr; gap:30px}
            .footer_top{padding:60px 20px 36px}
            .footer_top nav>ul{grid-template-columns:1fr 1fr; gap:28px}
            .footer_top .depth2 a{padding:3px 0; display:inline-block; min-height:28px}
            .footer_title img{height:32px}
            .footer_brand p{font-size:12px; line-height:1.95}
            .footer_btm{padding:20px; padding-bottom:calc(env(safe-area-inset-bottom) + 20px); flex-direction:column; align-items:flex-start; gap:12px}
            .footer_btm ul.link{flex-wrap:wrap; gap:14px 20px}
            .footer_btm ul.link a{font-size:11px; padding:4px 0; display:inline-block}
            .copy{font-size:10px}

            /* --- Scroll top --- */
            .btn_top{bottom:calc(env(safe-area-inset-bottom) + 16px); right:16px}
            .btn_top button{width:44px; height:44px; font-size:9px}
        }

        /* ======== SMALL PHONES (≤480px) ======== */
        @media(max-width:480px){
            .visual_content .title_main{font-size:42px!important; letter-spacing:-1.5px!important}
            .visual_content .title_kr{font-size:14px}
            .tech_item .t_main{font-size:38px}
            #positive .t_main{font-size:38px}
            #recruit .t_main{font-size:36px}
            #news .n_main{font-size:34px}
            .bg_text{font-size:34px}
            .tech_item .big_num{font-size:120px; letter-spacing:-6px}
            .recruit_stats{grid-template-columns:repeat(2, 1fr)}
            .perf_summary{gap:18px}
            .perf_summary .s_num{font-size:28px}
            .perf_summary .s_num small{font-size:11px}
            .perf_summary .s_label{font-size:10px; margin-top:6px}
        }

        /* ======== VERY SMALL (≤360px) ======== */
        @media(max-width:360px){
            .visual_content .title_main{font-size:36px!important}
            .tech_item .t_main{font-size:34px}
            .esg_pillar{grid-template-columns:40px 1fr 22px; padding:16px 14px}
            .recruit_stats{grid-template-columns:1fr}
        }

        /* ============================================================
           ABOUT (회사소개) — fresh rebuild, simple flex-column normal flow.
           NO position:absolute, NO transform on stats. Pure grid + flex.
           ============================================================ */
        #about.about-section{
            display:flex;
            flex-direction:column;
            gap:clamp(40px, 5vw, 80px);
            padding:clamp(80px, 9vw, 160px) clamp(20px, 4vw, 60px);
            background:
                linear-gradient(180deg, rgba(8,18,38,0.78) 0%, rgba(8,18,38,0.92) 100%),
                url('../images/about-bg.jpg') center/cover no-repeat;
            background-color:var(--bg);
            color:#fff;
            box-sizing:border-box;
        }
        #about.about-section > *{
            max-width:1500px;
            margin-left:auto;
            margin-right:auto;
            width:100%;
            box-sizing:border-box;
        }

        /* ===== ONE-VIEWPORT MODE (desktop, sufficient height) =====
           HTML 구조는 그대로 두고, 큰 화면에서만 title/desc 위 + 좌(company)·우(philosophy) 2단으로 압축. */
        @media (min-width:1025px) and (min-height:720px){
            #about.about-section{
                min-height:100vh;
                /* height/max-height/overflow 제거 — 150·175% 줌인 시 콘텐츠가 100vh 를 초과해도
                   잘리지 않고 자연스럽게 자라 스크롤되도록 함 */
                scroll-margin-top:0;
                display:grid;
                grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
                grid-template-rows:auto auto 1fr;
                grid-template-areas:
                    "title title"
                    "desc  desc"
                    "info  philo";
                row-gap:clamp(8px, 1vw, 14px);
                column-gap:clamp(28px, 3vw, 56px);
                padding:var(--header-h) clamp(28px, 4vw, 60px) clamp(20px, 2.4vw, 36px);
                align-items:start;
            }
            /* 제목·desc 와 본문(info/philo) 사이는 더 크게 띄움 */
            #about .info-row,
            #about .philosophy-row{
                margin-top:clamp(140px, 13vw, 240px);
            }
            #about.about-section > *{max-width:none}
            #about .section-title{
                grid-area:title;
                font-family:'Montserrat', sans-serif !important;
                font-size:clamp(40px, 4.6vw, 76px);
                font-weight:800;
                letter-spacing:-1.5px;
                line-height:1;
                color:#fff;
                margin:0;
                max-width:none;
                text-align:left;
            }
            #about .section-desc{
                grid-area:desc;
                font-size:clamp(13px, 1vw, 16px);
                line-height:1.6;
                margin:0;
                max-width:900px;
                text-align:left;
            }
            #about .info-row{
                grid-area:info;
                grid-template-columns:minmax(0, 1fr);
                gap:0;
                align-self:stretch;
            }
            #about .philosophy-row{
                grid-area:philo;
                gap:clamp(12px, 1.4vw, 20px);
                align-self:stretch;
            }
            /* Card kicker — 양쪽(Company / Philosophy) 흰줄을 같은 Y 로 + 키커 ↔ 본문 간격 확대 */
            #about .card-kicker,
            #about .card-kicker--center{
                padding-bottom:clamp(40px, 4.2vw, 64px);    /* 흰줄을 키커 텍스트에서 더 멀리 (아래로) */
                margin-bottom:clamp(28px, 3vw, 48px);       /* 흰줄 ↔ 본문 간격 확대 */
                gap:10px;
                border-bottom:1px solid rgba(255,255,255,0.14);
            }
            /* Philosophy 그리드는 위 hairline 중복 방지 위해 자체 border-top 제거 */
            #about .philosophy-grid{border-top:none}
            #about .kicker-num{font-size:clamp(18px, 1.6vw, 26px)}
            #about .kicker-text{font-size:clamp(13px, 1.05vw, 17px); letter-spacing:1.5px}
            /* Company narrative — 압축 */
            #about .company-name{
                font-size:clamp(18px, 1.5vw, 24px);
                margin:0 0 10px;
            }
            #about .company-name em{font-size:0.6em; margin-left:8px}
            #about .company-text{
                font-size:clamp(12.5px, 0.85vw, 14.5px);
                line-height:1.65;
                margin-bottom:clamp(14px, 1.4vw, 20px);
            }
            #about .company-meta{gap:0; margin:0}
            #about .company-meta li{
                padding:7px 0;
                font-size:clamp(12px, 0.82vw, 13.5px);
            }
            /* Philosophy 4-card → 2x2 그리드로 압축 (4단보다 세로 효율 ↑) */
            #about .philosophy-grid{
                grid-template-columns:repeat(2, 1fr);
                grid-template-rows:repeat(2, 1fr);
                border-top:1px solid rgba(255,255,255,0.14);
                height:100%;
            }
            #about .philosophy-card{
                padding:clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px);
                border-right:1px solid rgba(255,255,255,0.08);
                border-bottom:1px solid rgba(255,255,255,0.08);
            }
            #about .philosophy-card:nth-child(2n){border-right:none}
            #about .philosophy-card:nth-child(n+3){border-bottom:none}
            #about .ph-num{
                font-size:clamp(28px, 2.6vw, 44px);
                margin-bottom:clamp(8px, 0.8vw, 12px);
            }
            #about .ph-tag{font-size:9.5px; margin-bottom:6px}
            #about .philosophy-card h4{
                font-size:clamp(15px, 1.1vw, 18px);
                margin:0 0 6px;
            }
            #about .philosophy-card p{
                font-size:clamp(11.5px, 0.78vw, 13px);
                line-height:1.55;
            }
        }

        /* 1. SECTION LABEL — line-eyebrow-line, top */
        #about .section-label{
            display:inline-flex;
            align-items:center;
            gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:11px; letter-spacing:3px; font-weight:600;
            color:var(--primary-2);
            text-align:center;
            justify-content:center;
            margin:0 auto;
            width:auto;
        }
        #about .section-label::before,
        #about .section-label::after{
            content:''; width:32px; height:1px; background:var(--primary);
        }

        /* 2. TITLE — match Careers(t_main) scale exactly */
        #about h2.section-title{
            display:block;
            font-family:'Montserrat', sans-serif !important;
            font-size:clamp(40px, 5.2vw, 88px);
            font-weight:800;
            line-height:1;
            letter-spacing:-1.5px;
            color:#fff;
            text-align:center;
            margin:0 auto;
            max-width:1100px;
        }
        #about h2.section-title span{
            color:#fff;
            font-family:inherit;
            font-weight:inherit;
        }

        /* 3. SECTION DESC — subtitle below title */
        #about .section-desc{
            font-size:clamp(15px, 1.2vw, 19px);
            font-weight:300;
            line-height:1.75;
            color:rgba(255,255,255,0.85);
            text-align:center;
            margin:0 auto;
            max-width:760px;
            text-wrap:pretty; word-break:keep-all;
        }

        /* 4. STATS ROW — editorial hairline strip, no boxes.
           Grid 구조는 유지(zoom/responsive 용 가상 박스), 시각적 chrome만 제거. */
        #about .stats-row{
            display:grid;
            grid-template-columns:repeat(4, 1fr);
            gap:0;
            position:static;
            padding:clamp(28px, 3vw, 44px) 0;
            border-top:1px solid rgba(255,255,255,0.14);
            border-bottom:1px solid rgba(255,255,255,0.14);
        }
        #about .stat-card{
            position:static;
            text-align:center;
            padding:clamp(4px, 0.6vw, 8px) clamp(14px, 1.6vw, 24px);
            background:transparent;
            border:none;
            border-right:1px solid rgba(255,255,255,0.08);
            border-radius:0;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
            transition:none;
        }
        #about .stat-card:last-child{border-right:none}
        #about .stat-card:hover{
            background:transparent;
            border-color:rgba(255,255,255,0.08);
            transform:none;
        }
        #about .stat-num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(28px, 3.2vw, 52px);
            font-weight:800;
            color:#fff;
            line-height:1;
            letter-spacing:-1.5px;
            margin-bottom:12px;
            white-space:nowrap;
        }
        #about .stat-num small{
            font-size:0.42em;
            font-weight:600;
            color:rgba(255,255,255,0.65);
            margin-left:4px;
            letter-spacing:0;
        }
        #about .stat-label{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(11px, 0.85vw, 13px);
            letter-spacing:1.5px;
            color:var(--primary-2);
            font-weight:500;
            white-space:nowrap;
        }

        /* 5. INFO ROW — single column after HISTORY 카드 제거 */
        #about .info-row{
            display:grid;
            grid-template-columns:minmax(0, 880px);
            justify-content:center;
            gap:clamp(40px, 5vw, 80px);
            position:relative;
            width:100%;
        }
        #about .info-row::before{display:none}

        /* Company Introduction: kicker 만 가운데, 회사명·본문·meta 는 좌측 정렬 유지 */
        #about .company-card .card-kicker{justify-content:center}
        #about .company-card,
        #about .history-card{
            background:transparent;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
            border:none;
            border-radius:0;
            padding:clamp(4px, 0.5vw, 8px) clamp(8px, 1vw, 16px);
        }

        /* Card kickers (01 / 02 / 03 markers) */
        #about .card-kicker{
            display:flex;
            align-items:baseline;
            gap:14px;
            margin-bottom:clamp(24px, 2.5vw, 36px);
            padding-bottom:18px;
            border-bottom:1px solid rgba(255,255,255,0.08);
        }
        #about .card-kicker--center{
            justify-content:center;
            /* philosophy-grid 의 top hairline 과 시각적 중복을 피해 underline 제거 */
            border-bottom:none;
            padding-bottom:0;
            margin-bottom:clamp(20px, 2vw, 28px);
        }
        #about .kicker-num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2.2vw, 36px);
            font-weight:800;
            color:var(--primary);
            line-height:1;
            letter-spacing:-1px;
        }
        #about .kicker-text{
            font-size:clamp(15px, 1.25vw, 20px);
            letter-spacing:2px;
            font-weight:700;
            color:rgba(255,255,255,0.88);
            text-transform:none;
        }

        /* Company narrative */
        #about .company-name{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(22px, 2.2vw, 32px);
            font-weight:700;
            color:#fff;
            margin:0 0 14px;
            letter-spacing:-0.8px;
        }
        #about .company-name em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.55em;
            font-weight:500;
            letter-spacing:2px;
            color:var(--primary-2);
            margin-left:10px;
        }
        #about .company-text{
            font-size:clamp(14px, 1.05vw, 17px);
            line-height:1.85;
            color:rgba(255,255,255,0.85);
            margin:0 0 clamp(20px, 2vw, 32px);
            text-wrap:pretty; word-break:keep-all;
        }
        #about .company-text strong{
            font-weight:700; color:var(--primary-2);
            font-family:'Montserrat',sans-serif;
        }
        #about .company-meta{
            list-style:none; margin:0;
            padding:18px 0 0;
            border-top:1px solid rgba(255,255,255,0.08);
            display:flex; flex-direction:column; gap:10px;
        }
        #about .company-meta li{
            display:flex; align-items:baseline; gap:12px;
            font-size:clamp(13px, 0.95vw, 15px);
            color:rgba(255,255,255,0.78);
            line-height:1.5;
        }
        #about .company-meta span{
            font-family:'Montserrat',sans-serif;
            font-size:10px; letter-spacing:1.8px; font-weight:600;
            color:var(--primary-2);
            min-width:96px; flex-shrink:0;
        }
        #about .company-meta b{font-weight:500; color:#fff}

        /* History timeline */
        #about .timeline{
            list-style:none; margin:0; padding:0;
            position:relative;
        }
        #about .timeline::before{
            content:''; position:absolute;
            left:90px; top:8px; bottom:8px;
            width:1px;
            background:linear-gradient(180deg, rgba(30,144,255,0.5), rgba(30,144,255,0.05));
        }
        #about .tl-item{
            position:relative;
            display:grid;
            grid-template-columns:90px 1fr;
            gap:24px;
            padding:14px 0;
        }
        #about .tl-item::before{
            content:''; position:absolute;
            left:90px; top:22px;
            width:11px; height:11px; border-radius:50%;
            background:var(--bg);
            border:2px solid var(--primary);
            transform:translateX(-50%);
            box-shadow:0 0 0 4px rgba(30,144,255,0.10);
        }
        #about .tl-year{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(20px, 1.8vw, 28px);
            font-weight:800;
            color:var(--primary-2);
            line-height:1;
            letter-spacing:-0.5px;
            /* prevent year text from wrapping across digits at any viewport */
            white-space:nowrap;
            word-break:keep-all;
            overflow-wrap:normal;
            min-width:80px;
            width:auto;
            display:inline-block;
        }
        #about .tl-events{
            list-style:none; padding:0; margin:0;
            display:flex; flex-direction:column; gap:6px;
        }
        #about .tl-events li{
            font-size:clamp(13px, 0.95vw, 15px);
            line-height:1.55;
            color:rgba(255,255,255,0.85);
            padding-left:18px; position:relative;
        }
        #about .tl-events li::before{
            content:''; position:absolute; left:0; top:0.7em;
            width:10px; height:1px; background:var(--primary);
        }
        #about .tl-events em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.82em;
            letter-spacing:1px;
            color:rgba(255,255,255,0.45);
            margin-left:6px;
        }

        /* 6. PHILOSOPHY ROW — 4-column open layout, hairline dividers + watermark numbers */
        #about .philosophy-row{
            display:flex;
            flex-direction:column;
            gap:clamp(28px, 3vw, 44px);
        }
        #about .philosophy-grid{
            display:grid;
            grid-template-columns:repeat(4, 1fr);
            gap:0;
            border-top:1px solid rgba(255,255,255,0.14);
        }
        #about .philosophy-card{
            position:relative;
            padding:clamp(28px, 3vw, 48px) clamp(18px, 2vw, 28px) clamp(24px, 2.5vw, 36px);
            background:transparent;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
            border:none;
            border-right:1px solid rgba(255,255,255,0.08);
            border-radius:0;
            transition:background 0.4s;
            overflow:visible;
        }
        #about .philosophy-card:last-child{border-right:none}
        #about .philosophy-card::before{
            content:''; position:absolute; top:-1px; left:0;
            width:0; height:2px;
            background:var(--primary);
            transition:width 0.5s;
        }
        #about .philosophy-card:hover{
            transform:none;
            border-right-color:rgba(255,255,255,0.08);
            background:rgba(30,144,255,0.04);
        }
        #about .philosophy-card:hover::before{width:100%}
        #about .ph-num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(40px, 4.4vw, 72px);
            font-weight:800;
            color:rgba(30,144,255,0.18);
            line-height:0.9;
            margin-bottom:clamp(16px, 1.8vw, 28px);
            letter-spacing:-2px;
        }
        #about .ph-tag{
            font-family:'Montserrat',sans-serif;
            font-size:10px; letter-spacing:2.5px; font-weight:600;
            color:var(--primary);
            margin-bottom:8px;
        }
        #about .philosophy-card h4{
            font-size:clamp(17px, 1.4vw, 22px);
            font-weight:700;
            color:#fff;
            margin:0 0 12px;
            letter-spacing:-0.3px;
        }
        #about .philosophy-card p{
            font-size:clamp(12px, 0.9vw, 14px);
            line-height:1.65;
            color:rgba(255,255,255,0.72);
            margin:0;
            text-wrap:pretty; word-break:keep-all;
        }

        /* RESPONSIVE — tablet/mobile.
           Hairline divider 위치를 row→column 전환에 맞춰 right→bottom 으로 flip. */
        @media(max-width:1024px){
            /* TABLET: stats 2x2 — right divider on 1·3, bottom divider on 1·2 */
            #about .stats-row{
                grid-template-columns:repeat(2, 1fr);
                gap:0;
            }
            #about .stat-card{
                border-right:1px solid rgba(255,255,255,0.08);
                padding:clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
            }
            #about .stat-card:nth-child(2n){border-right:none}
            #about .stat-card:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.08)}
            #about .stat-card:last-child{border-right:none}

            /* INFO ROW: stack — center divider 사라짐 */
            #about .info-row{grid-template-columns:1fr; gap:clamp(40px, 5vw, 60px)}
            #about .info-row::before{display:none}
            /* 스택 시 두 블록 사이 hairline 으로 분리감 유지 */
            #about .company-card{
                padding-bottom:clamp(36px, 4vw, 56px);
                border-bottom:1px solid rgba(255,255,255,0.10);
            }

            /* PHILOSOPHY: 2x2 — same divider flip */
            #about .philosophy-grid{grid-template-columns:repeat(2, 1fr)}
            #about .philosophy-card:nth-child(2n){border-right:none}
            #about .philosophy-card:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.08)}
            #about .philosophy-card:last-child{border-right:none}
            /* hover accent line은 가장 위 행에서만 위쪽, 아래 행에서는 아래쪽으로 */
            #about .philosophy-card:nth-child(n+3)::before{top:auto; bottom:-1px}
        }
        @media(max-width:768px){
            #about .stats-row{
                grid-template-columns:repeat(2, 1fr);
                gap:0;
            }
            #about .stat-card{
                padding:clamp(14px, 2vw, 18px) 12px;
            }
        }
        @media(max-width:640px){
            #about.about-section{padding:64px 16px; gap:36px}
            #about .stat-num{font-size:24px}
            /* PHILOSOPHY 1열로 — 모든 카드 하단 border, 마지막은 제거 */
            #about .philosophy-grid{grid-template-columns:1fr}
            #about .philosophy-card{
                border-right:none;
                border-bottom:1px solid rgba(255,255,255,0.08);
            }
            #about .philosophy-card:nth-child(2n){border-right:none}
            #about .philosophy-card:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.08)}
            #about .philosophy-card:last-child{border-bottom:none}
            #about .philosophy-card::before{top:-1px!important; bottom:auto!important}
            #about .company-meta li{flex-direction:column; gap:2px}
            #about .company-meta span{min-width:auto}
            /* keep year column wide enough so 2025 doesn't wrap */
            #about .timeline::before{left:80px}
            #about .tl-item{grid-template-columns:80px 1fr; gap:16px}
            #about .tl-item::before{left:80px}
            #about .tl-year{
                min-width:70px;
                font-size:20px;
                white-space:nowrap;
                word-break:keep-all;
            }
        }
        @media(max-width:380px){
            #about .timeline::before{left:70px}
            #about .tl-item{grid-template-columns:70px 1fr; gap:12px}
            #about .tl-item::before{left:70px}
            #about .tl-year{font-size:18px; min-width:64px}
        }

        /* All direct sections stack vertically as separate blocks */
        #about > *{
            display:block;
            width:100%;
        }

        /* HERO — centered top, full width (stats are now separate sibling row) */
        #about .ab_hero{
            position:relative;
            display:block;
            text-align:center;
            padding:clamp(70px, 9vw, 160px) clamp(20px, 4vw, 60px) 0;
            max-width:1100px;
            margin:0 auto clamp(60px, 7vw, 100px);
        }
        #about .ab_eyebrow,
        #about .ab_hero_title,
        #about .ab_hero_lead{
            display:block;
            text-align:center;
        }
        #about .ab_eyebrow{
            display:inline-flex;
            margin-left:auto; margin-right:auto;
        }
        #about .ab_eyebrow{
            display:inline-flex; align-items:center; gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:11px; letter-spacing:3px; font-weight:600;
            color:var(--primary-2);
            margin-bottom:clamp(20px, 2vw, 32px);
        }
        #about .ab_eyebrow::before,
        #about .ab_eyebrow::after{
            content:''; width:32px; height:1px; background:var(--primary);
        }
        #about .ab_hero_title{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(40px, 5.6vw, 92px);
            font-weight:800;
            line-height:1.05;
            letter-spacing:-2px;
            color:#fff;
            margin:0 0 clamp(20px, 2vw, 32px);
        }
        #about .ab_hero_title em{font-style:normal; color:var(--primary)}
        #about .ab_hero_lead{
            font-size:clamp(15px, 1.2vw, 19px);
            font-weight:300;
            line-height:1.75;
            color:rgba(255,255,255,0.82);
            max-width:760px;
            margin:0 auto;
            text-wrap:pretty; word-break:keep-all;
        }
        /* STATS ROW — independent, between hero and grid (no overlap) */
        #about .ab_stats_row{
            position:relative;
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:clamp(12px, 1.4vw, 22px);
            max-width:1500px;
            margin:0 auto;
            padding:0 clamp(20px, 4vw, 60px) clamp(40px, 5vw, 80px);
        }
        #about .ab_stats_row .cs{
            text-align:center;
            padding:clamp(20px, 2.4vw, 36px) clamp(14px, 1.6vw, 22px);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:8px;
            background:rgba(8,18,38,0.55);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            transition:border-color 0.3s, background 0.3s, transform 0.3s;
        }
        #about .ab_stats_row .cs:hover{
            border-color:rgba(30,144,255,0.40);
            background:rgba(30,144,255,0.08);
            transform:translateY(-2px);
        }
        #about .ab_stats_row strong{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(24px, 2.8vw, 44px);
            font-weight:800;
            color:#fff;
            line-height:1;
            letter-spacing:-1px;
            margin-bottom:10px;
            white-space:nowrap;
        }
        #about .ab_stats_row strong em{
            font-style:normal;
            font-size:0.42em;
            font-weight:600;
            color:rgba(255,255,255,0.65);
            margin-left:4px;
            letter-spacing:0;
        }
        #about .ab_stats_row span{
            display:block;
            font-size:clamp(10px, 0.82vw, 12px);
            letter-spacing:1.5px;
            color:var(--primary-2);
            font-weight:500;
            white-space:nowrap;
        }
        @media(max-width:768px){
            #about .ab_stats_row{
                grid-template-columns:repeat(2, 1fr);
                gap:10px;
                padding-bottom:32px;
            }
            #about .ab_stats_row strong{font-size:24px; margin-bottom:6px}
        }
        @media(max-width:420px){
            #about .ab_stats_row{grid-template-columns:1fr 1fr}
        }

        /* GRID — 회사개요 (좌) + 연혁 (우) */
        #about .ab_grid{
            position:relative;
            display:grid;
            grid-template-columns:1fr;
            gap:clamp(28px, 3vw, 48px);
            max-width:1500px;
            margin:0 auto;
            padding:clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
        }
        @media(min-width:1025px){
            #about .ab_grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 4vw, 80px)}
        }
        #about .ab_panel{
            background:rgba(8,18,38,0.55);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:10px;
            padding:clamp(28px, 3vw, 48px);
        }
        #about .ab_kicker{
            display:flex; align-items:baseline; gap:14px;
            margin-bottom:clamp(24px, 2.5vw, 36px);
            padding-bottom:18px;
            border-bottom:1px solid rgba(255,255,255,0.08);
        }
        #about .ab_kicker--center{justify-content:center}
        #about .ab_k_num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2.2vw, 36px);
            font-weight:800;
            color:var(--primary);
            line-height:1;
            letter-spacing:-1px;
        }
        #about .ab_k_text{
            font-size:clamp(11px, 0.85vw, 13px);
            letter-spacing:3px;
            font-weight:600;
            color:rgba(255,255,255,0.72);
        }

        /* COMPANY narrative */
        #about .ab_co_name{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(22px, 2.2vw, 32px);
            font-weight:700;
            color:#fff;
            margin:0 0 14px;
            letter-spacing:-0.8px;
        }
        #about .ab_co_name em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.55em;
            font-weight:500;
            letter-spacing:2px;
            color:var(--primary-2);
            margin-left:10px;
        }
        #about .ab_co_text{
            font-size:clamp(14px, 1.05vw, 17px);
            line-height:1.85;
            color:rgba(255,255,255,0.85);
            margin:0 0 clamp(20px, 2vw, 32px);
            text-wrap:pretty; word-break:keep-all;
        }
        #about .ab_co_text strong{font-weight:700; color:var(--primary-2); font-family:'Montserrat',sans-serif}
        #about .ab_co_inline{
            list-style:none; margin:0; padding:18px 0 0;
            border-top:1px solid rgba(255,255,255,0.08);
            display:flex; flex-direction:column; gap:10px;
        }
        #about .ab_co_inline li{
            display:flex; align-items:baseline; gap:12px;
            font-size:clamp(13px, 0.95vw, 15px);
            color:rgba(255,255,255,0.78);
            line-height:1.5;
        }
        #about .ab_co_inline span{
            font-family:'Montserrat',sans-serif;
            font-size:10px; letter-spacing:1.8px; font-weight:600;
            color:var(--primary-2);
            min-width:96px;
            flex-shrink:0;
        }
        #about .ab_co_inline b{font-weight:500; color:#fff}

        /* TIMELINE */
        #about .ab_timeline{
            list-style:none; margin:0; padding:0;
            position:relative;
        }
        #about .ab_timeline::before{
            content:''; position:absolute;
            left:60px; top:8px; bottom:8px;
            width:1px;
            background:linear-gradient(180deg, rgba(30,144,255,0.5), rgba(30,144,255,0.05));
        }
        #about .ab_tl_item{
            position:relative;
            display:grid;
            grid-template-columns:60px 1fr;
            gap:24px;
            padding:14px 0;
        }
        #about .ab_tl_item::before{
            content:''; position:absolute;
            left:60px; top:22px;
            width:11px; height:11px; border-radius:50%;
            background:var(--bg);
            border:2px solid var(--primary);
            transform:translateX(-50%);
            box-shadow:0 0 0 4px rgba(30,144,255,0.10);
        }
        #about .ab_tl_year{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(20px, 1.8vw, 28px);
            font-weight:800;
            color:var(--primary-2);
            line-height:1;
            letter-spacing:-0.5px;
        }
        #about .ab_tl_events{
            list-style:none; padding:0; margin:0;
            display:flex; flex-direction:column; gap:6px;
        }
        #about .ab_tl_events li{
            font-size:clamp(13px, 0.95vw, 15px);
            line-height:1.55;
            color:rgba(255,255,255,0.85);
            padding-left:18px; position:relative;
        }
        #about .ab_tl_events li::before{
            content:''; position:absolute; left:0; top:0.7em;
            width:10px; height:1px; background:var(--primary);
        }
        #about .ab_tl_events em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.82em;
            letter-spacing:1px;
            color:rgba(255,255,255,0.45);
            margin-left:6px;
        }

        /* PHILOSOPHY — full width 4-card row */
        #about .ab_phil_section{
            position:relative;
            max-width:1500px;
            margin:0 auto;
            padding:clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px) clamp(60px, 7vw, 110px);
            border-top:1px solid rgba(255,255,255,0.10);
        }
        #about .ab_phil_section .ab_kicker{
            justify-content:center;
            border-bottom:none;
            padding-bottom:0;
            margin-bottom:clamp(28px, 3vw, 44px);
        }
        #about .ab_principles_grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:clamp(12px, 1.2vw, 18px);
        }
        #about .ab_pr{
            position:relative;
            padding:clamp(24px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:8px;
            background:rgba(8,18,38,0.55);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            transition:transform 0.4s, border-color 0.4s, background 0.4s;
            overflow:hidden;
        }
        #about .ab_pr::before{
            content:''; position:absolute; top:0; left:0;
            width:0; height:2px;
            background:var(--primary);
            transition:width 0.5s;
        }
        #about .ab_pr:hover{
            transform:translateY(-4px);
            border-color:rgba(30,144,255,0.30);
            background:rgba(30,144,255,0.10);
        }
        #about .ab_pr:hover::before{width:100%}
        #about .ab_pr_n{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(20px, 1.8vw, 28px);
            font-weight:800;
            color:rgba(30,144,255,0.45);
            line-height:1;
            margin-bottom:clamp(20px, 2vw, 32px);
            letter-spacing:-1px;
        }
        #about .ab_pr_tag{
            font-family:'Montserrat',sans-serif;
            font-size:10px; letter-spacing:2.5px; font-weight:600;
            color:var(--primary);
            margin-bottom:8px;
        }
        #about .ab_pr h4{
            font-size:clamp(17px, 1.4vw, 22px);
            font-weight:700;
            color:#fff;
            margin:0 0 12px;
            letter-spacing:-0.3px;
        }
        #about .ab_pr p{
            font-size:clamp(12px, 0.9vw, 14px);
            line-height:1.65;
            color:rgba(255,255,255,0.72);
            margin:0;
            text-wrap:pretty; word-break:keep-all;
        }

        /* About — Mobile/tablet */
        @media(max-width:1024px){
            #about .ab_hero_stats{grid-template-columns:repeat(2, 1fr)}
            #about .ab_principles_grid{grid-template-columns:repeat(2, 1fr)}
        }
        @media(max-width:640px){
            #about .ab_hero_stats{grid-template-columns:1fr 1fr; gap:8px}
            #about .ab_hero_stats .cs{padding:14px 10px}
            #about .ab_hero_stats strong{font-size:22px}
            #about .ab_principles_grid{grid-template-columns:1fr}
            #about .ab_co_inline span{min-width:auto}
            #about .ab_co_inline li{flex-direction:column; gap:2px}
            #about .ab_timeline::before{left:50px}
            #about .ab_tl_item{grid-template-columns:50px 1fr; gap:16px}
            #about .ab_tl_item::before{left:50px}
        }
        .ab_card{
            position:relative;
            max-width:1500px;
            margin:0 auto;
            padding:clamp(32px, 4vw, 64px) clamp(24px, 4vw, 56px);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:14px;
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
            box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
            display:flex;
            flex-direction:column;
            gap:0;
        }
        .ab_card::before{
            content:'';
            position:absolute; top:0; left:0; right:0;
            height:1px;
            background:linear-gradient(90deg, transparent 5%, rgba(30,144,255,0.6) 50%, transparent 95%);
        }
        /* CARD HEAD (HERO) — top centerpiece, all content centered */
        .ab_card_head{
            display:block;
            text-align:center;
            padding:clamp(40px, 5vw, 80px) 0;
            margin-bottom:clamp(40px, 5vw, 80px);
            border-bottom:1px solid rgba(255,255,255,0.08);
            position:relative;
        }
        .ab_card_head::before{
            content:'';
            position:absolute; inset:0;
            background:radial-gradient(ellipse at 50% 50%, rgba(30,144,255,0.10), transparent 65%);
            pointer-events:none;
        }
        .ab_card_head > *{position:relative; z-index:1}

        /* SEQUENTIAL SECTIONS (01 → 02 → 03) — each full width, stacked */
        .ab_sec{
            padding:clamp(36px, 4.5vw, 70px) 0;
            border-top:1px solid rgba(255,255,255,0.06);
        }
        .ab_sec:first-of-type{border-top:none; padding-top:0}
        .ab_sec--philosophy .ab_principles_grid{
            grid-template-columns:repeat(4, minmax(0, 1fr));
        }
        @media(max-width:1024px){
            .ab_sec--philosophy .ab_principles_grid{grid-template-columns:repeat(2, 1fr)}
        }
        @media(max-width:640px){
            .ab_sec--philosophy .ab_principles_grid{grid-template-columns:1fr}
        }
        .ab_eyebrow{
            display:inline-flex;
            align-items:center;
            gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:11px; letter-spacing:3px; font-weight:600;
            color:var(--primary-2);
            margin-bottom:clamp(20px, 2vw, 32px);
        }
        .ab_eyebrow::before,
        .ab_eyebrow::after{
            content:''; width:32px; height:1px; background:var(--primary);
        }
        .ab_card_title{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(36px, 4.6vw, 76px);
            font-weight:800;
            line-height:1.05;
            letter-spacing:-2px;
            color:#fff;
            margin:0 0 clamp(20px, 2vw, 30px);
        }
        .ab_card_title em{font-style:normal; color:var(--primary)}
        .ab_card_lead{
            font-size:clamp(15px, 1.15vw, 19px);
            font-weight:300;
            line-height:1.75;
            color:rgba(255,255,255,0.78);
            max-width:780px;
            margin:0 auto clamp(36px, 4vw, 56px);
            text-wrap:pretty; word-break:keep-all;
        }
        .ab_card_stats{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:clamp(14px, 1.4vw, 24px);
            max-width:1100px;
            margin:0 auto;
        }
        .ab_card_stats .cs{text-align:center}
        .ab_card_stats .cs{
            padding:clamp(18px, 2vw, 28px) clamp(16px, 1.6vw, 24px);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:8px;
            background:rgba(255,255,255,0.02);
            transition:border-color 0.3s, background 0.3s;
        }
        .ab_card_stats .cs:hover{
            border-color:rgba(30,144,255,0.30);
            background:rgba(30,144,255,0.04);
        }
        .ab_card_stats strong{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2.4vw, 38px);
            font-weight:800;
            color:#fff;
            line-height:1;
            letter-spacing:-1px;
            margin-bottom:8px;
            white-space:nowrap;
        }
        .ab_card_stats strong em{
            font-style:normal;
            font-size:0.42em;
            font-weight:600;
            color:rgba(255,255,255,0.6);
            margin-left:4px;
            letter-spacing:0;
        }
        .ab_card_stats span{
            font-size:clamp(10px, 0.78vw, 12px);
            letter-spacing:1px;
            color:var(--primary-2);
            font-weight:500;
            white-space:nowrap;
        }

        /* SECTION + KICKER ---------------------------------------- */
        .ab_sec{
            padding:clamp(32px, 4vw, 60px) 0;
            border-top:1px solid rgba(255,255,255,0.06);
        }
        .ab_sec:first-of-type{border-top:none; padding-top:0}
        .ab_sec:last-of-type{padding-bottom:0}
        .ab_kicker{
            display:flex; align-items:baseline; gap:16px;
            margin-bottom:clamp(28px, 3vw, 44px);
        }
        .ab_k_num{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2.2vw, 36px);
            font-weight:800;
            line-height:1;
            color:var(--primary);
            letter-spacing:-1px;
        }
        .ab_k_text{
            font-size:clamp(11px, 0.85vw, 13px);
            letter-spacing:3px;
            font-weight:600;
            color:rgba(255,255,255,0.7);
        }

        /* COMPANY OVERVIEW — narrative style (no table, no labeled list) */
        .ab_co_name{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(24px, 2.4vw, 38px);
            font-weight:700;
            color:#fff;
            margin:0 0 14px;
            letter-spacing:-1px;
            line-height:1.2;
        }
        .ab_co_name em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.55em;
            font-weight:500;
            letter-spacing:2px;
            color:var(--primary-2);
            margin-left:12px;
            vertical-align:middle;
        }
        .ab_co_text{
            font-size:clamp(15px, 1.15vw, 19px);
            line-height:1.85;
            color:rgba(255,255,255,0.85);
            margin:0 0 24px;
            text-wrap:pretty; word-break:keep-all;
        }
        .ab_co_text strong{
            font-weight:700;
            color:var(--primary-2);
            font-family:'Montserrat',sans-serif;
        }
        .ab_co_meta,
        .ab_co_addr{
            font-size:clamp(13px, 0.95vw, 15px);
            line-height:1.7;
            color:rgba(255,255,255,0.65);
            margin:0 0 12px;
        }
        .ab_co_meta span{
            font-family:'Montserrat',sans-serif;
            font-size:0.78em;
            letter-spacing:1.5px;
            font-weight:600;
            color:var(--primary-2);
            margin-right:8px;
        }
        .ab_co_meta em{
            font-style:normal;
            color:rgba(255,255,255,0.25);
            margin:0 12px;
        }
        .ab_co_addr{
            color:rgba(255,255,255,0.75);
            padding-top:12px;
            border-top:1px solid rgba(255,255,255,0.08);
            margin-top:8px;
        }

        /* (legacy fact-list styles retained but unused now) */
        .ab_facts{
            list-style:none;
            padding:0; margin:0;
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:0;
        }
        .ab_facts li{
            display:grid;
            grid-template-columns:130px 1fr;
            gap:24px;
            padding:18px 22px;
            border-bottom:1px solid rgba(255,255,255,0.06);
            align-items:baseline;
        }
        .ab_facts li:nth-child(odd){
            border-right:1px solid rgba(255,255,255,0.06);
        }
        .ab_facts li:nth-last-child(2),
        .ab_facts li:last-child{border-bottom:none}
        .ab_facts li:nth-child(5),
        .ab_facts li:nth-child(6){
            grid-column:span 2;
            border-right:none;
            border-bottom:1px solid rgba(255,255,255,0.06);
        }
        .ab_facts li:last-child{border-bottom:none}
        .f_k{
            font-family:'Montserrat',sans-serif;
            font-size:11px;
            letter-spacing:2px;
            font-weight:600;
            color:var(--primary-2);
            white-space:nowrap;
        }
        .f_v{
            font-size:clamp(14px, 1.05vw, 17px);
            color:#fff;
            font-weight:500;
            line-height:1.5;
        }
        .f_v em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.82em;
            font-weight:400;
            letter-spacing:1px;
            color:rgba(255,255,255,0.5);
            margin-left:8px;
        }

        /* HISTORY TIMELINE ---------------------------------------- */
        .ab_timeline{
            list-style:none;
            padding:0; margin:0;
            position:relative;
        }
        .ab_timeline::before{
            content:'';
            position:absolute;
            left:clamp(70px, 7vw, 110px);
            top:8px; bottom:8px;
            width:1px;
            background:linear-gradient(180deg,
                rgba(30,144,255,0.5) 0%,
                rgba(30,144,255,0.05) 100%);
        }
        .ab_tl_item{
            display:grid;
            grid-template-columns:clamp(70px, 7vw, 110px) 1fr;
            gap:clamp(28px, 3vw, 50px);
            padding:clamp(18px, 2vw, 28px) 0;
            position:relative;
        }
        .ab_tl_item::before{
            content:'';
            position:absolute;
            left:clamp(70px, 7vw, 110px);
            top:clamp(26px, 2.6vw, 36px);
            width:11px; height:11px;
            border-radius:50%;
            background:var(--bg);
            border:2px solid var(--primary);
            transform:translateX(-50%);
            box-shadow:0 0 0 4px rgba(30,144,255,0.10);
        }
        .ab_tl_year{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(22px, 2.4vw, 38px);
            font-weight:800;
            color:var(--primary-2);
            line-height:1;
            letter-spacing:-1px;
        }
        .ab_tl_events{
            list-style:none;
            padding:0; margin:0;
            display:flex; flex-direction:column; gap:8px;
        }
        .ab_tl_events li{
            font-size:clamp(13px, 1vw, 16px);
            line-height:1.6;
            color:rgba(255,255,255,0.85);
            padding-left:20px;
            position:relative;
        }
        .ab_tl_events li::before{
            content:''; position:absolute; left:0; top:0.7em;
            width:10px; height:1px; background:var(--primary);
        }
        .ab_tl_events em{
            font-style:normal;
            font-family:'Montserrat',sans-serif;
            font-size:0.82em;
            letter-spacing:1px;
            color:rgba(255,255,255,0.45);
            margin-left:6px;
        }

        /* PHILOSOPHY GRID — full-width 4-card row at desktop */
        .ab_principles_grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:clamp(12px, 1.2vw, 18px);
        }
        .ab_pr{
            position:relative;
            padding:clamp(24px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:8px;
            background:rgba(255,255,255,0.02);
            transition:transform 0.4s, border-color 0.4s, background 0.4s;
            overflow:hidden;
        }
        .ab_pr::before{
            content:'';
            position:absolute; top:0; left:0;
            width:0; height:2px;
            background:var(--primary);
            transition:width 0.5s ease;
        }
        .ab_pr:hover{
            transform:translateY(-4px);
            border-color:rgba(30,144,255,0.30);
            background:rgba(30,144,255,0.04);
        }
        .ab_pr:hover::before{width:100%}
        .ab_pr_n{
            font-family:'Montserrat',sans-serif;
            font-size:clamp(20px, 1.8vw, 28px);
            font-weight:800;
            color:rgba(30,144,255,0.35);
            line-height:1;
            margin-bottom:clamp(20px, 2vw, 32px);
            letter-spacing:-1px;
        }
        .ab_pr_tag{
            font-family:'Montserrat',sans-serif;
            font-size:10px; letter-spacing:2.5px; font-weight:600;
            color:var(--primary);
            margin-bottom:8px;
        }
        .ab_pr h4{
            font-size:clamp(17px, 1.4vw, 22px);
            font-weight:700;
            color:#fff;
            margin:0 0 12px;
            letter-spacing:-0.3px;
        }
        .ab_pr p{
            font-size:clamp(12px, 0.9vw, 14px);
            line-height:1.65;
            color:rgba(255,255,255,0.65);
            margin:0;
            text-wrap:pretty; word-break:keep-all;
        }

        /* RESPONSIVE ---------------------------------------------- */
        @media(max-width:1024px){
            /* Below desktop, drop the 12-col grid — sections stack naturally */
            .ab_card{display:block}
            .ab_card_head{display:block}
            .ab_card_stats{grid-template-columns:repeat(2, 1fr)}
            .ab_facts{grid-template-columns:1fr}
            .ab_facts li{grid-template-columns:120px 1fr; padding:14px 16px}
            .ab_facts li:nth-child(odd){border-right:none}
            .ab_facts li:nth-child(5),
            .ab_facts li:nth-child(6){grid-column:span 1}
            .ab_principles_grid{grid-template-columns:repeat(2, 1fr)}
        }
        @media(max-width:768px){
            .ab{padding:48px 14px}
            .ab_card{padding:32px 22px; border-radius:10px}
            .ab_card_stats{grid-template-columns:repeat(2, 1fr); gap:10px}
            .ab_card_stats .cs{padding:16px 14px}
            .ab_card_stats strong{font-size:24px}
            .ab_kicker{margin-bottom:20px; gap:12px}
            .ab_facts li{
                grid-template-columns:1fr;
                gap:4px; padding:14px 12px;
            }
            .ab_facts li .f_k{margin-bottom:2px}
            .ab_timeline::before{left:54px}
            .ab_tl_item{grid-template-columns:54px 1fr; gap:20px; padding:16px 0}
            .ab_tl_item::before{left:54px; top:24px}
            .ab_tl_year{font-size:22px}
            .ab_principles_grid{grid-template-columns:1fr; gap:10px}
            .ab_pr{padding:22px 18px}
            .ab_pr_n{margin-bottom:14px}
        }
        @media(max-width:480px){
            .ab_card{padding:26px 16px}
            .ab_card_title{font-size:32px; letter-spacing:-1px}
            .ab_card_lead{font-size:14px}
            .ab_card_stats{grid-template-columns:1fr 1fr}
            .ab_card_stats strong{font-size:22px}
            .ab_facts li{padding:12px 10px}
            .f_v{font-size:14px}
            .ab_pr h4{font-size:16px}
        }

        /* ============================================================
           FLOW SECTIONS (page 2 onward — non-pinned, natural-flow)
           ============================================================ */
        .flow_section{
            position:relative;
            width:100%;
            padding:clamp(60px, 8vw, 140px) clamp(20px, 4vw, 60px);
            background:var(--bg);
            color:#fff;
            box-sizing:border-box;
            z-index:10;
        }
        .flow_section--dark{background:#0a1d3a}

        /* === LEGACY sustain_* (사용 안 함, ESG 페이지는 #esg + rs_* 재사용) === */
        .__sustain_legacy_unused{
            background:linear-gradient(180deg, #0f2748 0%, #0a1730 100%);
            color:#fff;
            padding:calc(var(--header-h) - 24px) 0 clamp(20px, 2.4vw, 36px);
            scroll-margin-top:0;
            min-height:100vh;
            min-height:100dvh;
            display:flex;
            flex-direction:column;
            box-sizing:border-box;
        }
        .sustain_layout{
            width:100%;
            max-width:1680px;
            margin-inline:auto;
            padding-inline:var(--container-pad);
            display:flex;
            flex-direction:column;
            gap:clamp(40px, 4.5vw, 80px);
            flex:1;
            min-height:0;
        }
        .sustain_header{
            text-align:center;
            max-width:880px;
            margin-inline:auto;
            flex:0 0 auto;
        }
        #sustainability h2.sustain_title,
        .sustain_title{
            display:block;
            font-family:'Montserrat', sans-serif !important;
            font-size:clamp(48px, 6.4vw, 110px) !important;
            font-weight:800 !important; line-height:1; letter-spacing:-2px;
            color:#fff !important;
            margin:0 0 clamp(10px, 1.2vw, 16px);
        }
        #sustainability h2.sustain_title em,
        .sustain_title em{
            color:#fff !important;
            font-weight:inherit !important;
            font-style:normal !important;
            font-family:inherit !important;
        }
        .sustain_lead{
            font-size:var(--fz-sm);
            font-weight:400;
            line-height:1.7;
            color:rgba(255,255,255,0.7);
            margin:0;
        }

        /* GRID — 3 equal columns, fills remaining vertical space (mirrors rs_groups) */
        .sustain_grid{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:clamp(20px, 2.4vw, 40px);
            align-items:stretch;
            flex:1;
            min-height:0;
        }

        /* CARD — editorial style same as rs_card: image fills + caption below */
        .sustain_card{
            position:relative;
            display:flex;
            flex-direction:column;
            background:transparent;
            border:none;
            border-radius:0;
            overflow:visible;
            min-height:0;
            height:100%;
            transition:none;
        }
        .sustain_card:hover{
            transform:none;
            background:transparent;
        }
        .sustain_thumb{
            position:relative;
            width:100%;
            overflow:hidden;
            background:#0a1428;
            flex:1;
            min-height:0;
            aspect-ratio:auto;
        }
        .sustain_thumb img{
            position:absolute;
            inset:0;
            width:100%; height:100%;
            object-fit:cover;
            transition:transform .6s var(--ease-out);
        }
        .sustain_card:hover .sustain_thumb img{transform:scale(1.05)}
        .sustain_body{
            padding:clamp(14px, 1.6vw, 22px) 0 clamp(6px, 0.8vw, 10px);
            color:#fff;
            display:flex;
            flex-direction:column;
            gap:6px;
        }
        .sustain_num{
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-sm);
            font-weight:600;
            letter-spacing:2px;
            color:rgba(255,255,255,0.4);
            line-height:1;
            margin:0;
        }
        .sustain_tag{
            display:inline-block;
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-xs);
            font-weight:600;
            letter-spacing:3px;
            color:var(--primary-2);
            margin:0;
            padding:0; background:none; border-radius:0;
        }
        .sustain_body h3{
            font-size:clamp(0.95rem, 1.2vw, 1.125rem);
            font-weight:700;
            line-height:1.35;
            color:#fff;
            margin:4px 0 4px;
            letter-spacing:-0.2px;
        }
        .sustain_pull{
            font-size:var(--fz-sm);
            line-height:1.6;
            color:rgba(255,255,255,0.72);
            font-weight:400;
            font-style:italic;
            padding:0; margin:0 0 10px;
            border:none;
        }
        .sustain_list{
            list-style:none; padding:0; margin:0;
            display:flex; flex-direction:column; gap:8px;
        }
        .sustain_list li{
            font-size:var(--fz-sm);
            line-height:1.55;
            color:rgba(255,255,255,0.72);
        }
        .sustain_list li strong{
            display:inline;
            color:#fff; font-weight:600;
            font-size:inherit;
            letter-spacing:-.1px;
        }

        /* RESPONSIVE — same breakpoint behaviour as #research */
        @media (max-width:1024px){
            #sustainability.sustain_section{
                min-height:auto;
                display:block;
                padding:calc(var(--header-h) + 30px) 0 60px;
            }
            .sustain_layout{flex:none}
            .sustain_grid{
                grid-template-columns:1fr;
                gap:clamp(28px, 3.6vw, 44px);
                flex:none;
            }
            .sustain_thumb{
                aspect-ratio:16/10;
                flex:none;
            }
            .sustain_card{height:auto}
        }
        .flow_inner{
            width:100%;
            max-width:1600px;
            margin:0 auto;
            box-sizing:border-box;
        }

        /* ============================================================
           ABOUT — integrated company introduction (page 2)
           ============================================================ */
        .about_intro_block{
            margin-bottom:clamp(48px, 6vw, 100px);
            max-width:1100px;
        }
        .about_intro_block .about_head{margin-bottom:clamp(24px, 2.5vw, 40px)}
        .about_intro_block .about_intro{
            font-size:clamp(15px, 1.2vw, 20px);
            line-height:1.85;
            color:rgba(255,255,255,0.85);
            max-width:900px;
            font-weight:400;
        }
        .about_block_h{
            font-size:clamp(20px, 2vw, 32px);
            font-weight:700;
            color:#fff;
            margin-bottom:clamp(20px, 2.5vw, 36px);
            padding-bottom:14px;
            border-bottom:1px solid rgba(255,255,255,0.12);
            display:flex;
            align-items:baseline;
            gap:14px;
            flex-wrap:wrap;
        }
        .about_block_h span{
            font-size:clamp(11px, 0.85vw, 14px);
            font-weight:500;
            letter-spacing:2px;
            color:var(--primary-2);
        }
        .about_overview_block,
        .about_philosophy_block,
        .about_contact_block{margin-bottom:clamp(48px, 6vw, 100px)}
        .about_contact_block{margin-bottom:0}

        /* Overview cards — stat-style grid (replaces the dt/dd table) */
        .overview_cards{
            display:grid;
            grid-template-columns:repeat(6, 1fr);
            gap:clamp(12px, 1vw, 18px);
        }
        .oc_card{
            grid-column:span 2;
            position:relative;
            padding:clamp(22px, 2vw, 36px) clamp(20px, 1.8vw, 32px);
            background:rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:6px;
            transition:background 0.3s, border-color 0.3s;
            min-height:120px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:14px;
        }
        .oc_card:hover{
            background:rgba(30,144,255,0.06);
            border-color:rgba(30,144,255,0.25);
        }
        .oc_card--hero{
            grid-column:span 6;
            background:linear-gradient(135deg, rgba(30,144,255,0.10) 0%, rgba(30,144,255,0.02) 100%);
            border-color:rgba(30,144,255,0.20);
        }
        .oc_card--wide{grid-column:span 3}
        .oc_label{
            font-size:clamp(10px, 0.78vw, 12px);
            letter-spacing:2px;
            color:var(--primary-2);
            font-weight:600;
            text-transform:uppercase;
            line-height:1.4;
        }
        .oc_value{
            font-size:clamp(22px, 2vw, 32px);
            font-weight:700;
            color:#fff;
            line-height:1.2;
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            letter-spacing:-0.5px;
        }
        .oc_value em{
            display:block;
            font-style:normal;
            font-size:clamp(11px, 0.85vw, 14px);
            font-weight:500;
            color:rgba(255,255,255,0.55);
            margin-top:6px;
            letter-spacing:1px;
        }
        .oc_value small{
            font-size:0.55em;
            font-weight:600;
            color:rgba(255,255,255,0.65);
            letter-spacing:0;
        }
        .oc_value--lg{
            font-size:clamp(28px, 2.8vw, 48px);
        }
        .oc_value--sm{
            font-size:clamp(15px, 1.2vw, 19px);
            font-weight:500;
            line-height:1.5;
            letter-spacing:0;
            font-family:'Noto Sans KR',sans-serif;
        }
        .oc_value--mono{
            font-family:'Montserrat',monospace;
            font-size:clamp(18px, 1.5vw, 24px);
        }
        @media(max-width:1024px){
            .overview_cards{grid-template-columns:repeat(4, 1fr)}
            .oc_card{grid-column:span 2}
            .oc_card--hero{grid-column:span 4}
            .oc_card--wide{grid-column:span 4}
        }
        @media(max-width:640px){
            .overview_cards{grid-template-columns:1fr; gap:10px}
            .oc_card,
            .oc_card--hero,
            .oc_card--wide{grid-column:span 1}
            .oc_card{min-height:auto; padding:18px 16px; gap:8px}
            .oc_value{font-size:20px}
            .oc_value--lg{font-size:22px}
            .oc_value--sm{font-size:14px}
            .oc_value--mono{font-size:16px}
        }

        /* Philosophy 4-card grid */
        .philosophy_grid{
            display:grid;
            grid-template-columns:repeat(4, 1fr);
            gap:clamp(14px, 1.4vw, 22px);
        }
        .philosophy_card{
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:6px;
            padding:clamp(20px, 2vw, 32px);
            transition:background 0.3s, border-color 0.3s, transform 0.3s;
        }
        .philosophy_card:hover{
            background:rgba(30,144,255,0.08);
            border-color:rgba(30,144,255,0.3);
            transform:translateY(-4px);
        }
        .philosophy_card .p_num{
            font-size:clamp(20px, 1.7vw, 28px);
            font-weight:700;
            color:var(--primary-2);
            margin-bottom:14px;
        }
        .philosophy_card .p_tag{
            font-size:clamp(10px, 0.75vw, 12px);
            letter-spacing:2px;
            color:var(--primary);
            font-weight:600;
            margin-bottom:10px;
            line-height:1.4;
        }
        .philosophy_card h4{
            font-size:clamp(17px, 1.4vw, 22px);
            font-weight:700;
            color:#fff;
            margin-bottom:12px;
        }
        .philosophy_card p{
            font-size:clamp(13px, 0.95vw, 15px);
            line-height:1.7;
            color:rgba(255,255,255,0.7);
        }

        /* Contact list */
        .about_contact_list{
            list-style:none;
            padding:0; margin:0;
            display:flex;
            flex-wrap:wrap;
            gap:24px 60px;
        }
        .about_contact_list li{
            display:flex;
            align-items:baseline;
            gap:16px;
        }
        .about_contact_list .c_k{
            font-size:11px;
            letter-spacing:2px;
            color:var(--primary-2);
            font-weight:600;
            min-width:60px;
        }
        .about_contact_list .c_v{
            font-size:clamp(15px, 1.1vw, 18px);
            color:#fff;
            font-weight:500;
        }
        .about_contact_list .c_v a{color:#fff; text-decoration:underline; text-decoration-color:rgba(30,144,255,0.4); text-underline-offset:3px}
        .about_contact_list .c_v a:hover{color:var(--primary-2)}

        /* ============================================================
           TECH — Renewable Energy 2×2 quadrant grid (page 3)
           Photos are edge-to-edge (full-bleed). Section padding minimal.
           ============================================================ */
        #tech.flow_section{
            padding:0;
        }
        #tech .tech_grid{
            position:relative;
            min-height:100vh;
            min-height:100dvh;
        }

        /* CENTERPIECE — title floating at 4-quadrant intersection (no box) */
        .tech_centerpiece{
            position:absolute;
            top:50%; left:50%;
            transform:translate(-50%, -50%);
            z-index:5;
            text-align:center;
            padding:0;
            background:none;
            background-color:transparent;
            border:none;
            box-shadow:none;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
            max-width:min(90vw, 800px);
            pointer-events:none;
        }
        .tech_cp_eyebrow{
            display:inline-flex; align-items:center; gap:14px;
            font-family:'Montserrat',sans-serif;
            font-size:12px; letter-spacing:4px; font-weight:600;
            color:#fff;
            margin-bottom:clamp(16px, 1.8vw, 26px);
            text-shadow:0 2px 16px rgba(0,0,0,0.6);
        }
        .tech_cp_eyebrow::before,
        .tech_cp_eyebrow::after{
            content:''; width:32px; height:1px;
            background:var(--primary-2);
            box-shadow:0 0 8px rgba(0,0,0,0.5);
        }
        .tech_cp_title{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(40px, 6vw, 96px);
            font-weight:800;
            line-height:1.05;
            letter-spacing:-2.5px;
            color:#fff;
            margin:0 0 clamp(14px, 1.8vw, 26px);
            text-shadow:0 2px 24px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.4);
        }
        .tech_cp_title em{
            font-style:normal;
            color:var(--primary);
            text-shadow:0 2px 24px rgba(0,0,0,0.6), 0 0 50px rgba(30,144,255,0.3);
        }
        .tech_cp_lead{
            font-size:clamp(14px, 1.1vw, 17px);
            font-weight:400;
            line-height:1.7;
            color:rgba(255,255,255,0.95);
            margin:0;
            text-shadow:0 2px 14px rgba(0,0,0,0.7);
        }
        @media(max-width:768px){
            /* MOBILE: 4 cards stack vertically with uniform aspect-ratio 16/10
               and all text bottom-left. Centerpiece becomes a separate top section. */
            #tech .tech_grid{
                display:flex;
                flex-direction:column;
                gap:12px;
                min-height:auto;
                padding:24px 16px 32px;
            }
            #tech .tech_quad{
                aspect-ratio:16/10;
                min-height:auto;
                width:100%;
                border-radius:6px;
            }
            /* Uniform dark overlay across all 4 cards */
            #tech .tq_overlay{
                background:linear-gradient(180deg, rgba(8,18,38,0.35) 0%, rgba(8,18,38,0.85) 100%)!important;
            }
            /* All text aligned bottom-left uniformly */
            #tech .tq_body,
            #tech .tech_quad[data-tech="wind"] .tq_body,
            #tech .tech_quad[data-tech="om"] .tq_body{
                text-align:left;
                padding:18px 20px;
            }
            #tech .tech_quad[data-tech="wind"] .tq_body p,
            #tech .tech_quad[data-tech="om"] .tq_body p{
                margin-left:0;
            }
            /* Centerpiece — out of absolute, becomes flow item ordered first */
            #tech .tech_centerpiece{
                position:static!important;
                top:auto; left:auto;
                transform:none!important;
                order:-1;
                padding:24px 16px;
                background:rgba(8,18,38,0.45)!important;
                border:1px solid rgba(255,255,255,0.10)!important;
                border-radius:8px;
                max-width:100%;
                margin-bottom:8px;
            }
            .tech_cp_title{font-size:34px; letter-spacing:-1.5px}
            .tech_cp_lead{font-size:13px}
            .tech_cp_eyebrow{font-size:11px; letter-spacing:3px}
        }
        /* Legacy tech_head — hidden (replaced by centerpiece) */
        .tech_head{display:none}
        .tech_head{
            margin-bottom:clamp(32px, 4vw, 60px);
            max-width:1100px;
            margin-left:auto; margin-right:auto;
        }
        #tech .section_num{
            display:inline-flex; align-items:center; gap:14px;
            padding-left:0;
            margin-left:auto; margin-right:auto;
        }
        #tech .section_num::before{
            position:static;
            transform:none;
        }
        #tech .section_num::after{
            content:''; width:40px; height:1px; background:var(--primary);
        }
        #tech .t_desc{margin-left:auto; margin-right:auto}

        /* WIND (top-right) and O&M (bottom-right) — text aligned right */
        .tech_quad[data-tech="wind"] .tq_body,
        .tech_quad[data-tech="om"] .tq_body{
            text-align:right;
        }
        .tech_quad[data-tech="wind"] .tq_body p,
        .tech_quad[data-tech="om"] .tq_body p{
            margin-left:auto;
        }
        #tech .section_num,
        #about .section_num{
            display:inline-block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(11px, 0.85vw, 13px);
            font-weight:600; letter-spacing:3px;
            color:var(--primary-2);
            margin-bottom:clamp(16px, 1.6vw, 28px);
            padding-left:54px; position:relative;
        }
        #tech .section_num::before,
        #about .section_num::before{
            content:''; position:absolute; left:0; top:50%;
            width:40px; height:1px; background:var(--primary);
        }
        #tech .t_main{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(48px, 6.4vw, 110px);
            font-weight:800; line-height:1; letter-spacing:-2px;
            color:#fff;
        }
        #tech .t_main + .t_main{color:var(--primary); margin-top:6px}
        #tech .t_desc{
            font-size:clamp(14px, 1.1vw, 17px); font-weight:300; line-height:1.85;
            color:rgba(255,255,255,0.82);
            margin-top:24px; max-width:560px; text-wrap:pretty;
        }
        #about .about_head .t_desc{
            font-size:clamp(14px, 1.1vw, 17px); font-weight:300; line-height:1.85;
            color:rgba(255,255,255,0.82);
            margin-top:24px; max-width:560px; text-wrap:pretty;
        }
        .tech_grid{
            position:relative;
            display:grid;
            grid-template-columns:1fr 1fr;
            grid-template-rows:1fr 1fr;
            gap:2px;
            width:100%;
            min-height:100vh;
            min-height:100dvh;
        }
        /* Ensure centerpiece is exactly at viewport-grid center */
        .tech_grid > .tech_centerpiece{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            margin:0;
        }
        .tech_quad{
            position:relative;
            overflow:hidden;
            isolation:isolate;
            min-height:240px;
        }
        .tq_bg{
            position:absolute; inset:0;
            background-size:cover;
            background-position:center;
            transition:transform 0.7s ease;
            z-index:0;
        }
        .tech_quad:hover .tq_bg{transform:scale(1.06)}
        .tq_overlay{
            position:absolute; inset:0;
            background:linear-gradient(180deg, rgba(15,39,72,0.20) 0%, rgba(15,39,72,0.85) 100%);
            z-index:1;
            transition:background 0.4s ease;
        }
        .tech_quad:hover .tq_overlay{
            background:linear-gradient(180deg, rgba(30,144,255,0.15) 0%, rgba(15,39,72,0.92) 100%);
        }
        .tq_body{
            position:absolute;
            left:0; right:0; bottom:0;
            padding:clamp(20px, 2.4vw, 40px);
            z-index:2;
            color:#fff;
        }
        .tq_num{
            font-size:clamp(34px, 4.2vw, 72px);
            font-weight:700;
            letter-spacing:-2px;
            color:rgba(255,255,255,0.18);
            line-height:1;
            margin-bottom:clamp(8px, 0.8vw, 14px);
        }
        .tq_tag{
            font-size:clamp(11px, 0.85vw, 14px);
            letter-spacing:3px;
            color:var(--primary-2);
            font-weight:600;
            margin-bottom:8px;
        }
        .tq_body h3{
            font-size:clamp(20px, 1.8vw, 30px);
            font-weight:700;
            margin-bottom:10px;
            line-height:1.2;
        }
        .tq_body p{
            font-size:clamp(13px, 0.95vw, 15px);
            line-height:1.7;
            color:rgba(255,255,255,0.85);
            max-width:480px;
            opacity:0.85;
            transform:translateY(0);
            transition:opacity 0.3s, transform 0.3s;
        }
        @media (hover:hover){
            .tq_body p{opacity:0; transform:translateY(8px)}
            .tech_quad:hover .tq_body p{opacity:1; transform:translateY(0)}
        }

        /* Hide leftover tech slider canvas (no longer used) */
        #techBackground{display:none!important}

        /* ============================================================
           RESPONSIVE — TABLET / MOBILE for new sections
           ============================================================ */
        @media(max-width:1024px){
            .philosophy_grid{grid-template-columns:repeat(2, 1fr); gap:14px}
            .tech_grid{
                aspect-ratio:auto;
                max-height:none;
                grid-template-columns:1fr 1fr;
                grid-auto-rows:minmax(260px, 36vh);
            }
        }
        @media(max-width:768px){
            .flow_section{padding:48px 18px}
            .about_intro_block{margin-bottom:36px}
            .about_overview_block,
            .about_philosophy_block{margin-bottom:36px}
            .about_block_h{font-size:20px; padding-bottom:10px; margin-bottom:20px}
            .philosophy_grid{grid-template-columns:1fr; gap:12px}
            .philosophy_card{padding:18px}
            .tech_grid{grid-template-columns:1fr; gap:10px; grid-auto-rows:minmax(240px, 50vw)}
            .about_contact_list{flex-direction:column; gap:14px}
            .about_contact_list li{gap:12px}
            .about_contact_list .c_k{min-width:50px; font-size:10px}
            .tq_body p{opacity:1; transform:none}
        }
        @media(max-width:480px){
            .flow_section{padding:36px 14px}
            .about_block_h{font-size:18px; gap:8px}
            .about_block_h span{font-size:10px; letter-spacing:1.5px}
            .philosophy_card{padding:16px}
            .philosophy_card .p_num{font-size:18px; margin-bottom:10px}
            .philosophy_card h4{font-size:16px; margin-bottom:8px}
            .philosophy_card p{font-size:13px; line-height:1.65}
            .tq_body{padding:16px}
            .tq_num{font-size:28px}
            .tq_tag{font-size:10px; letter-spacing:2px}
            .tq_body h3{font-size:18px}
            .tq_body p{font-size:12px; line-height:1.6}
            .about_intro_block .about_intro{font-size:14px; line-height:1.75}
        }

        /* ============================================================
           LARGE SCREEN — 4K / 2K / Wide-monitor caps
           Prevent fluid units from blowing up on 1920+ displays.
           ============================================================ */
        @media(min-width:1600px){
            .flow_inner{max-width:1480px}
        }
        @media(min-width:1920px){
            html{font-size:17px}
            .flow_inner{max-width:1640px}
            /* Only cap TEXT content widths — never full-bleed visual layouts.
               Visual/recruit sections need their backgrounds/videos full-screen. */
            .visual_content{max-width:1640px; margin-left:auto; margin-right:auto}
            .perf_head{max-width:1640px}
            .recruit_inner{max-width:1640px; margin-left:auto; margin-right:auto}
            .esg_inner{max-width:1640px; margin-left:auto; margin-right:auto}
            #news .layout, #contact .layout{max-width:1640px; margin-left:auto; margin-right:auto}
        }
        @media(min-width:2560px){
            html{font-size:18px}
            .flow_inner{max-width:1840px}
            .visual_content{max-width:1840px}
            .perf_head{max-width:1840px}
            .recruit_inner{max-width:1840px}
            .esg_inner{max-width:1840px}
            #news .layout, #contact .layout{max-width:1840px}
            /* Tame extreme clamp() values on 4K */
            .visual_content .title_main{font-size:128px!important}
            .t_main{font-size:96px!important}
        }
        @media(min-width:3200px){
            /* 4K+ — keep text from sprawling beyond comfortable read width */
            .flow_inner{max-width:1920px}
            .visual_content{max-width:1920px}
            .perf_head{max-width:1920px}
            .recruit_inner{max-width:1920px}
            .esg_inner{max-width:1920px}
            #news .layout, #contact .layout{max-width:1920px}
        }

        /* ============================================================
           UNIVERSAL RESPONSIVE LAYER — based on Korean corporate sites
           (LIG / Encored / GS Engineering)
           Standard breakpoints: 1920 / 1600 / 1280 / 1024 / 768 / 480
           Pattern: max-width caps + std breakpoints + img overflow guard
           ============================================================ */

        /* Universal image safety — prevent content images overflowing.
           Exclude header logo/icons (they have fixed dimensions). */
        main img, main video, main svg{max-width:100%}
        main img{height:auto}

        /* Universal min-width safety — prevent text/elements from overflowing
           narrow viewports (long Korean / English mixed text) */
        :where(p, h1, h2, h3, h4, h5, li, dd, dt, span){
            min-width:0;
            overflow-wrap:break-word;
            word-break:keep-all;
        }

        /* Section padding scale across breakpoints (matching reference sites) */
        @media(max-width:1280px){
            .flow_section{padding-top:clamp(50px, 7vw, 100px); padding-bottom:clamp(50px, 7vw, 100px)}
        }
        @media(max-width:1024px){
            /* Force header nav to mobile mode at 1024px (LIG/Encored standard) */
            header nav, header nav>ul{display:none}
            .lang{display:none}
            .mobile_menu_btn{
                display:flex!important;
                align-items:center; justify-content:center;
                width:44px; height:44px; border-radius:50%;
                border:1px solid rgba(255,255,255,0.2);
                flex-shrink:0;
            }
            .mobile_menu_btn span{
                display:block; width:18px; height:1.5px; background:#fff; position:relative;
            }
            .mobile_menu_btn span::before,
            .mobile_menu_btn span::after{
                content:''; position:absolute; left:0; width:100%; height:1.5px; background:#fff;
            }
            .mobile_menu_btn span::before{top:-6px}
            .mobile_menu_btn span::after{top:6px}
            /* Mobile nav overlay activates at 1024px too */
            .mobile_nav{
                display:flex!important; flex-direction:column;
                position:fixed; inset:0; z-index:1999;
                background:rgba(5,8,14,0.98);
                backdrop-filter:blur(20px);
                -webkit-backdrop-filter:blur(20px);
                padding:calc(env(safe-area-inset-top) + 70px) 24px calc(env(safe-area-inset-bottom) + 30px);
                opacity:0; visibility:hidden;
                transition:opacity .3s, visibility .3s;
                overflow-y:auto;
                -webkit-overflow-scrolling:touch;
                overscroll-behavior:contain;
            }
            .mobile_nav.open{opacity:1; visibility:visible}
            /* Reduce all wide section paddings */
            #news, #contact{padding:80px 0}
            /* Ensure .perf_card images don't get cut */
            .perf_card{flex-shrink:0}
            /* Visual hero text scales */
            .visual_content .title_main{font-size:clamp(40px, 7vw, 72px)!important; letter-spacing:-1.5px}
            .visual_content .title_kr{font-size:clamp(14px, 2vw, 18px)}
            .visual_content .desc{font-size:11px; letter-spacing:2px}
        }
        @media(max-width:768px){
            /* Tighter section paddings on mobile */
            #news, #contact{padding:64px 0}
            #news .layout, #contact .layout{
                grid-template-columns:1fr!important;
                gap:32px!important;
                padding:0 18px!important;
            }
            /* Recruit / Performance / Research stat blocks stack */
            .recruit_stats{grid-template-columns:repeat(2, 1fr)!important; gap:14px}
            .perf_summary{flex-direction:row; flex-wrap:wrap; gap:18px}
            .perf_summary .s_item{flex:1 1 calc(50% - 9px); min-width:120px}
            /* News slider becomes single column */
            #news .slider{display:flex; flex-direction:column; gap:12px}
            /* Touch-friendly tap targets — min 44px */
            header nav>ul>li>a,
            .mobile_nav a,
            button, .ab_cta_btn{min-height:44px}
            /* Visual hero further compress */
            .visual_content{padding:0 24px}
            .visual_content .title_main{font-size:clamp(34px, 9vw, 56px)!important}
            .vdo_box video{object-position:center 30%}
            /* Ensure dark overlay for readability */
            .vdo_overlay{background:linear-gradient(180deg, rgba(15,39,72,0.4) 0%, rgba(15,39,72,0.75) 100%)!important}
        }
        @media(max-width:480px){
            /* Smallest mobile — minimum padding */
            #news, #contact{padding:48px 0}
            #news .layout, #contact .layout{padding:0 14px!important; gap:24px!important}
            .recruit_stats{grid-template-columns:1fr!important}
            .perf_summary{flex-direction:column; gap:14px}
            .perf_summary .s_item{flex:1 1 100%}
            /* Hide non-essential decorative elements on tiny screens */
            .grid_lines{opacity:0.4}
            .progress_bar{display:none}
        }

        /* Wide-screen guard — prevent fluid text from blowing up at 4K */
        @media(min-width:1920px){
            html{font-size:17px}
            /* Cap container widths so content stays readable */
            #about.about-section,
            .flow_section{padding-left:max(60px, calc((100vw - 1700px) / 2));
                          padding-right:max(60px, calc((100vw - 1700px) / 2))}
            #about .stats-row,
            #about .info-row,
            #about .philosophy-row,
            #about .section-title,
            #about .section-desc{max-width:1700px}
        }
        @media(min-width:2560px){
            html{font-size:18px}
            /* On 2K+, cap the containers with auto margins instead of vw padding */
            #about.about-section,
            .flow_section{padding-left:max(80px, calc((100vw - 1900px) / 2));
                          padding-right:max(80px, calc((100vw - 1900px) / 2))}
            .visual_content .title_main{font-size:128px!important; letter-spacing:-3px}
        }

        /* Print styles (basic) */
        @media print{
            .vdo_box video, .progress_bar, .wheel,
            #header, .mobile_nav, .perf_ticker,
            .ab_pr::before, .philosophy-card::before{display:none}
            *{background:none!important; color:#000!important; box-shadow:none!important}
            .pin{position:static!important; height:auto!important}
        }

        /* =====================================================================
           SAFETY OVERRIDES (rebuilt 2026-04-30)
           ─ unstack pin sections on very small screens or reduced-motion users
           ─ guarantee tech_grid collapses to 1 column at <768px
           ─ enforce minimum touch-target sizes
           ===================================================================== */

        /* On phones <480px, disable sticky pinning entirely — sticky scroll choreography
           on small viewports causes jitter when the browser chrome shows/hides. */
        @media (max-width:480px){
            .pin-wrap{height:auto!important}
            .pin{
                position:relative!important;
                height:auto!important;
                min-height:100dvh;
                overflow:visible!important;
            }
            #techWrap{height:auto!important}
        }

        /* Users who prefer reduced motion get a fully unstacked layout */
        @media (prefers-reduced-motion:reduce){
            .pin-wrap{height:auto!important}
            .pin{
                position:relative!important;
                height:auto!important;
                min-height:100dvh;
                overflow:visible!important;
            }
            #techWrap{height:auto!important}
        }

        /* Tech 2x2 → 1 column safety net for any viewport ≤768px */
        @media (max-width:768px){
            #tech .tech_grid,
            .tech_grid{
                grid-template-columns:1fr!important;
                grid-template-rows:repeat(4, minmax(220px, auto))!important;
                min-height:auto!important;
            }
            .tech_grid > .tech_centerpiece{
                position:relative!important;
                grid-column:1!important;
                grid-row:auto!important;
                inset:auto!important;
                transform:none!important;
                padding:48px 20px;
                text-align:center;
            }
        }

        /* Touch-target minimum (WCAG 2.5.5) — 44x44 hit area on mobile */
        @media (max-width:1024px) and (hover:none){
            header nav ul a,
            .mobile_nav ul li a,
            .footer_btm .link a,
            .form_tabs button,
            .more_btn,
            .sec_more,
            .btn-contact{
                min-height:44px;
                display:inline-flex;
                align-items:center;
            }
        }

        /* Prevent horizontal scroll bleed from any oversized child (esp. tickers) */
        html, body{max-width:100vw; overflow-x:clip}

        /* Footer safe-area on iOS home indicator */
        footer{padding-bottom:max(0px, var(--safe-bottom))}

        /* =====================================================================
           CONTAINER & TYPOGRAPHY NORMALISATION (Step C, 2026-04-30)
           ─ unify max-width / padding across non-pin sections via design tokens
           ─ keep body text rem-anchored (browser zoom stays predictable)
           ─ headline clamp() already used throughout — only body baseline locked
           ===================================================================== */

        /* Body baseline — rem so user font-size preference + browser zoom both work.
           Headlines keep clamp(), body stays at user-adjustable rem. */
        body{font-size:var(--fz-base); line-height:1.6}

        /* Non-pin section containers — News, Contact already 1440 max; unify all */
        #news .layout,
        #contact .layout{
            max-width:var(--container-max);
            margin-inline:auto;
            padding-inline:var(--container-pad);
        }

        /* About section already non-pin — ensure same gutter scale */
        #about.about-section{
            padding-left:var(--container-pad);
            padding-right:var(--container-pad);
        }

        /* Lock down ultrawide overrides to use the token (prevents 1920px text walls) */
        @media (min-width:1920px){
            :root{--container-max:1640px}
        }
        @media (min-width:2400px){
            :root{--container-max:1840px}
        }

        /* Header inline padding tracks the same gutter token */
        header{padding-inline:var(--container-pad)}
        @supports(padding:max(0px)){
            header{
                padding-left:max(var(--container-pad), var(--safe-left));
                padding-right:max(var(--container-pad), var(--safe-right));
            }
        }

        /* Image base — never overflow container, preserve intrinsic ratio */
        img{max-width:100%; height:auto}
        video{max-width:100%}

        /* Form controls sized for touch (16px min font prevents iOS auto-zoom on focus) */
        input, textarea, select{font-size:max(16px, var(--fz-base))}

        /* Reduce horizontal padding aggressively on small phones */
        @media (max-width:480px){
            :root{--container-pad:16px}
        }
        @media (max-width:380px){
            :root{--container-pad:12px}
        }

        /* =====================================================================
           SCROLL STABILISATION (2026-04-30)
           ─ promote pin layouts to their own GPU layer so filter/opacity changes
             don't repaint surrounding sections
           ─ disable background-attachment:fixed on mobile (catastrophic perf there)
           ─ overscroll-behavior:contain prevents browser pull-to-refresh & scroll
             chaining glitches that feel "random"
           ===================================================================== */
        html{
            overscroll-behavior-y:contain;
        }
        body{
            overscroll-behavior-y:contain;
        }
        .pin .layout,
        #visualLayout,
        #researchLayout,
        #performanceLayout,
        #recruitLayout{
            will-change:filter, opacity;
            transform:translateZ(0);
            backface-visibility:hidden;
        }
        /* Pin-wrap itself benefits from contain hint to isolate paint */
        .pin-wrap{contain:layout paint}
        /* Ticker tracks — promote to layer so they don't trigger layout shifts on scroll */
        .perf_ticker_track{
            will-change:transform;
            transform:translateZ(0);
        }
        /* Mobile: fixed-attachment backgrounds tank scroll FPS on iOS — switch to scroll */
        @media (max-width:1024px){
            #news{background-attachment:scroll!important}
        }
        /* iOS Safari momentum scroll on the body */
        body{-webkit-overflow-scrolling:touch}

        /* =====================================================================
           TECH REDESIGN (2026-04-30)
           ─ Renewable Energy: header on top + 4 cards in one row (1+1+1+1)
           ─ Each card = image on top, text below (image-and-caption pattern)
           ─ Overrides legacy 2×2 quadrant CSS by specificity / structure
           ===================================================================== */

        /* Section wrapper — full viewport height, title at top, cards fill rest */
        #tech.flow_section{
            padding:clamp(32px, 4vw, 64px) 0 clamp(24px, 3vw, 48px);
            background:linear-gradient(180deg, #0a1730 0%, #0f2748 100%);
            min-height:100vh;
            min-height:100dvh;
            display:flex;
            flex-direction:column;
        }
        #tech .tech_layout{
            width:100%;
            padding-inline:var(--container-pad);
            display:flex;
            flex-direction:column;
            gap:clamp(20px, 2.4vw, 36px);
            flex:1;            /* layout takes whole section height */
            min-height:0;      /* allow children flex to compress correctly */
        }

        /* HEADER — single-line title at the TOP of the section */
        #tech .tech_header{
            position:static;
            transform:none;
            text-align:center;
            max-width:880px;
            margin-inline:auto;
            padding:0;
            background:none;
            pointer-events:auto;
            flex:0 0 auto;     /* header keeps its own intrinsic height */
        }
        #tech .tech_header .tech_cp_title{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(1.75rem, 3.6vw, 3rem);  /* 28-48px — single-line scale */
            font-weight:800;
            line-height:1.15;
            letter-spacing:-1px;
            color:#fff;
            margin:0 0 clamp(10px, 1.2vw, 16px);
            white-space:nowrap;     /* keep on one line */
            text-shadow:none;
        }
        #tech .tech_header .tech_cp_title em{
            color:var(--primary);
            text-shadow:none;
        }
        #tech .tech_header .tech_cp_lead{
            font-size:var(--fz-sm);
            font-weight:400;
            line-height:1.7;
            color:rgba(255,255,255,0.7);
            margin:0;
            text-shadow:none;
        }
        /* On very small phones allow the title to wrap if needed */
        @media (max-width:380px){
            #tech .tech_header .tech_cp_title{white-space:normal}
        }

        /* GRID — 4 cards split full width, fill remaining section height
           Explicit single-row override defeats the legacy 2×2 .tech_grid rule
           (`grid-template-rows:1fr 1fr`) that otherwise leaves an empty 2nd row. */
        #tech .tech_grid{
            display:grid!important;
            grid-template-columns:repeat(4, 1fr)!important;
            grid-template-rows:1fr!important;
            grid-auto-rows:0!important;     /* prevent any implicit row from adding height */
            gap:clamp(12px, 1.4vw, 20px);
            position:static;
            width:100%;
            max-width:1680px;
            margin-inline:auto;
            flex:1 1 auto;
            min-height:0;
            height:100%;
        }

        /* CARD — editorial: no card chrome, image + caption only.
           가상 박스(grid 셀) 그대로, border/배경/radius 제거. */
        #tech .tech_quad{
            position:relative;
            display:flex;
            flex-direction:column;
            background:transparent;
            border:none;
            border-radius:0;
            overflow:visible;
            isolation:isolate;
            min-height:0;
            height:100%;
            transition:none;
        }
        #tech .tech_quad:hover{
            transform:none;
            border-color:transparent;
            background:transparent;
        }

        /* IMAGE — flex-grow to take most of the card height */
        #tech .tq_thumb{
            position:relative;
            width:100%;
            overflow:hidden;
            background:#0a1428;
            flex:1;            /* image fills available card height */
            min-height:0;
        }
        #tech .tq_thumb img{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .6s var(--ease-out);
        }
        #tech .tech_quad:hover .tq_thumb img{
            transform:scale(1.05);
        }
        /* Hide legacy bg/overlay if any leftover markup is present */
        #tech .tq_bg,
        #tech .tq_overlay{display:none}

        /* TEXT BLOCK — below image, normal flow.
           padding 좌우는 0(이미지와 좌우 정렬), 상하만 띄움 — 캡션 스타일 */
        #tech .tq_body{
            position:static;
            inset:auto;
            padding:clamp(16px, 1.8vw, 24px) 0 clamp(8px, 1vw, 12px);
            color:#fff;
            text-align:left;
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        #tech .tq_body .tq_num{
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-sm);
            font-weight:600;
            letter-spacing:2px;
            color:rgba(255,255,255,0.4);
            line-height:1;
            margin:0;
        }
        #tech .tq_body .tq_tag{
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-xs);
            font-weight:600;
            letter-spacing:3px;
            color:var(--primary-2);
            margin:0;
        }
        #tech .tq_body h3{
            font-size:clamp(1.125rem, 1.6vw, 1.5rem);
            font-weight:700;
            line-height:1.3;
            color:#fff;
            margin:4px 0 6px;
            letter-spacing:-0.3px;
        }
        #tech .tq_body p{
            font-size:var(--fz-sm);
            line-height:1.65;
            color:rgba(255,255,255,0.72);
            margin:0;
            opacity:1;
            transform:none;
            max-width:none;
        }

        /* Reset legacy hover-hide behaviour from old design */
        @media (hover:hover){
            #tech .tq_body p{opacity:1; transform:none}
            #tech .tech_quad:hover .tq_body p{opacity:1; transform:none}
        }

        /* RESPONSIVE — 4 cols on wide screens, 1 col (vertical 4-stack) on mobile/zoom-in.
           Skips the intermediate 2-col layout per design preference: narrow viewport
           (mobile or browser zoom) collapses straight to a single vertical column. */
        @media (max-width:1024px){
            #tech.flow_section{
                min-height:auto;
                display:block;
            }
            #tech .tech_layout{flex:none}
            #tech .tech_grid{
                grid-template-columns:1fr!important;
                grid-template-rows:auto!important;
                grid-auto-rows:auto!important;   /* override base 4067 grid-auto-rows:0 — implicit rows hold cards 2~4, which were collapsed to height 0 */
                gap:14px;
                flex:none;
                height:auto;
            }
            #tech .tq_thumb{
                aspect-ratio:16/10;
                flex:0 0 auto;
            }
            #tech .tech_quad{height:auto}
        }

        /* Override the older "@media(max-width:768px) #tech .tech_grid { display:flex... }"
           rule from the legacy 2×2 design — using higher specificity from the parent #tech */
        @media (max-width:768px){
            #tech .tech_grid{
                display:grid;
                flex-direction:initial;
                padding:0;
            }
            #tech .tech_quad{
                aspect-ratio:auto;
                width:100%;
                border-radius:10px;
            }
            /* Cancel legacy bottom-aligned text-on-image style on mobile */
            #tech .tq_body{
                position:static;
                padding:clamp(16px, 4vw, 22px);
                text-align:left;
            }
            #tech .tech_quad[data-tech="wind"] .tq_body,
            #tech .tech_quad[data-tech="om"] .tq_body{text-align:left}
            #tech .tech_quad[data-tech="wind"] .tq_body p,
            #tech .tech_quad[data-tech="om"] .tq_body p{margin-left:0}
        }

        /* =====================================================================
           RESEARCH REDESIGN (2026-04-30)
           ─ Header centered at top (matches Tech section pattern)
           ─ Two side-by-side groups: 보유기술 (3 cards) + 연구개발과제 (1 card)
           ─ Each card = image on top, text below
           ─ pin-wrap removed in HTML; this section is now normal flow
           ===================================================================== */

        #research.flow_section,
        #esg.flow_section,
        #solution2.flow_section{
            padding:calc(var(--header-h) - 16px) 0 clamp(20px, 2.4vw, 36px);
            scroll-margin-top:0;
            background:linear-gradient(180deg, #0f2748 0%, #0a1730 100%);
            min-height:100vh;
            min-height:100dvh;
            display:flex;
            flex-direction:column;
        }
        /* Override any leftover .pin sticky behaviour */
        #research.flow_section,
        section#research,
        #esg.flow_section,
        section#esg,
        #solution2.flow_section,
        section#solution2{
            position:static!important;
            height:auto!important;
            overflow:visible!important;
        }

        :is(#research, #esg, #solution2) .rs_layout{
            width:100%;
            max-width:1680px;
            margin-inline:auto;
            padding-inline:var(--container-pad);
            display:flex;
            flex-direction:column;
            gap:clamp(40px, 4.5vw, 80px);
            flex:1;
            min-height:0;
        }
        :is(#research, #esg, #solution2) .rs_header{flex:0 0 auto}

        /* HEADER — single-line title centered above the groups */
        :is(#research, #esg, #solution2) .rs_header{
            text-align:center;
            max-width:880px;
            margin-inline:auto;
            position:static;
            transform:none;
        }
        :is(#research, #esg, #solution2) .rs_title{
            display:block;
            font-family:'Montserrat',sans-serif;
            font-size:clamp(40px, 5.2vw, 88px);
            font-weight:800;
            line-height:1;
            letter-spacing:-1.5px;
            color:#fff;
            margin:0 0 clamp(10px, 1.2vw, 16px);
            white-space:nowrap;
        }
        :is(#research, #esg, #solution2) .rs_title em{
            color:#fff;
            font-style:normal;
            font-weight:inherit;
        }
        :is(#research, #esg, #solution2) .rs_lead{
            font-size:var(--fz-sm);
            font-weight:400;
            line-height:1.7;
            color:rgba(255,255,255,0.7);
            margin:0;
        }
        @media (max-width:380px){
            :is(#research, #esg, #solution2) .rs_title{white-space:normal}
        }

        /* TWO GROUPS side by side — 보유기술 (3 cards, takes 3/4) + 연구개발과제 (1 card, 1/4)
           Groups stretch to fill remaining vertical space below the header. */
        :is(#research, #esg, #solution2) .rs_groups{
            display:grid;
            grid-template-columns:3fr 1fr;
            gap:clamp(20px, 2.4vw, 40px);
            align-items:stretch;
            flex:1;
            min-height:0;
        }
        :is(#research, #esg, #solution2) .rs_group{
            display:flex;
            flex-direction:column;
            gap:clamp(14px, 1.6vw, 22px);
            min-width:0;
            min-height:0;
        }
        :is(#research, #esg, #solution2) .rs_group_title{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(1rem, 1.4vw, 1.25rem);
            font-weight:700;
            letter-spacing:-0.3px;
            color:#fff;
            margin:0;
            padding-bottom:clamp(8px, 1vw, 14px);
            border-bottom:1px solid rgba(255,255,255,0.12);
            position:relative;
        }
        :is(#research, #esg, #solution2) .rs_group_title::after{
            content:'';
            position:absolute;
            left:0; bottom:-1px;
            width:40px; height:2px;
            background:var(--primary-2);
        }

        /* CARD GRIDS */
        :is(#research, #esg, #solution2) .rs_cards{
            display:grid;
            gap:clamp(12px, 1.4vw, 20px);
            flex:1;
            min-height:0;
        }
        :is(#research, #esg, #solution2) .rs_cards--three{
            grid-template-columns:repeat(3, 1fr);
        }
        :is(#research, #esg, #solution2) .rs_cards--single{
            grid-template-columns:1fr;
        }

        /* CARD — same editorial style as #tech .tech_quad — image + caption only */
        :is(#research, #esg, #solution2) .rs_card{
            position:relative;
            display:flex;
            flex-direction:column;
            background:transparent;
            border:none;
            border-radius:0;
            overflow:visible;
            isolation:isolate;
            min-height:0;
            height:100%;
            transition:none;
        }
        :is(#research, #esg, #solution2) .rs_card:hover{
            transform:none;
            border-color:transparent;
            background:transparent;
        }
        :is(#research, #esg, #solution2) .rs_thumb{
            position:relative;
            width:100%;
            overflow:hidden;
            background:#0a1428;
            flex:1;          /* image fills available card height */
            min-height:0;
        }
        :is(#research, #esg, #solution2) .rs_thumb img{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .6s var(--ease-out);
        }
        :is(#research, #esg, #solution2) .rs_card:hover .rs_thumb img{
            transform:scale(1.05);
        }
        :is(#research, #esg, #solution2) .rs_body{
            padding:clamp(14px, 1.6vw, 22px) 0 clamp(6px, 0.8vw, 10px);
            color:#fff;
            display:flex;
            flex-direction:column;
            gap:6px;
        }
        :is(#research, #esg, #solution2) .rs_body .rs_num{
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-sm);
            font-weight:600;
            letter-spacing:2px;
            color:rgba(255,255,255,0.4);
            line-height:1;
            margin:0;
        }
        :is(#research, #esg, #solution2) .rs_body .rs_tag{
            font-family:'Montserrat',sans-serif;
            font-size:var(--fz-xs);
            font-weight:600;
            letter-spacing:3px;
            color:var(--primary-2);
            margin:0;
        }
        :is(#research, #esg, #solution2) .rs_body h4{
            font-size:clamp(0.95rem, 1.2vw, 1.125rem);
            font-weight:700;
            line-height:1.35;
            color:#fff;
            margin:4px 0 4px;
            letter-spacing:-0.2px;
        }
        :is(#research, #esg, #solution2) .rs_body p{
            font-size:var(--fz-sm);
            line-height:1.6;
            color:rgba(255,255,255,0.72);
            margin:0;
        }

        /* RESPONSIVE — wide: 보유기술(3 cards) + 연구개발과제(1 card) side-by-side.
           Mobile/zoom-in (≤1024px): groups stack AND each group becomes single column,
           producing a clean 4-card vertical stack overall. */
        @media (max-width:1024px){
            #research.flow_section,
            #esg.flow_section,
            #solution2.flow_section{
                min-height:auto;
                display:block;
            }
            :is(#research, #esg, #solution2) .rs_layout{flex:none}
            :is(#research, #esg, #solution2) .rs_groups{
                grid-template-columns:1fr;
                gap:clamp(28px, 3.6vw, 44px);
                flex:none;
            }
            :is(#research, #esg, #solution2) .rs_cards--three{
                grid-template-columns:1fr!important;
            }
            :is(#research, #esg, #solution2) .rs_thumb{
                aspect-ratio:16/10;
                flex:0 0 auto;
            }
            :is(#research, #esg, #solution2) .rs_card{height:auto}
        }

        /* =========================================================
           Nav-click landing fix (2026-05-08)
           Sections #tech, #research, #news must align cleanly with the
           fixed header — no overlap, no excess gap.
           ─ #tech / #research: bump padding-top to include header-h so
             the title sits below the header when section.top hits y=0.
           ─ #news: title was vertically centered (justify-content:center)
             which pushed it well below header — anchor it at the top.
           ========================================================= */
        #tech.flow_section,
        #research.flow_section,
        #esg.flow_section,
        #solution2.flow_section{
            padding-top:calc(var(--header-h) - 16px);
        }

        /* === #solution2 (지속가능경영) 콘텐츠 길이에 맞춘 미세 조정 ===
           섹션 상·하 padding 은 Solution(#research) 과 동일 (override 미사용)
           제목 ↔ 카드 사이는 충분히 띄움, 카드는 자연 높이 */
        #solution2.flow_section{
            min-height:auto;
            display:block;
        }
        #solution2 .rs_layout{
            flex:none;
            gap:clamp(80px, 9vw, 140px);   /* 제목 ↔ 카드 그리드 간격 대폭 확대 */
        }
        #solution2 .rs_groups{
            flex:none;
            grid-template-columns:1fr;
        }
        #solution2 .rs_cards{flex:none}
        #solution2 .rs_card{height:auto}
        #solution2 .rs_thumb{
            flex:0 0 auto;
            aspect-ratio:16/10;
        }
        #solution2 .rs_pull{
            font-size:var(--fz-sm);
            font-style:italic;
            line-height:1.55;
            color:var(--primary-2, #5fb3ff);
            margin:6px 0 12px;
        }
        #solution2 .rs_sublist{
            list-style:none;
            padding:0;
            margin:0;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        #solution2 .rs_sublist li{
            font-size:var(--fz-sm);
            line-height:1.55;
            color:rgba(255,255,255,0.72);
        }
        #solution2 .rs_sublist li strong{
            color:#fff;
            font-weight:700;
            margin-right:6px;
        }
        #news{justify-content:flex-start}

        /* =========================================================
           POLICY MODAL — editorial-grade overlay. Backdrop fades in,
           panel rises with a subtle scale; thin top accent line marks
           the section. iframe hosts the live policy content.
           ========================================================= */
        .policy_modal{
            position:fixed; inset:0; z-index:9000;
            display:flex; align-items:center; justify-content:center;
            padding:clamp(16px, 4vw, 48px);
            opacity:0; visibility:hidden; pointer-events:none;
            transition:opacity .4s ease, visibility 0s linear .4s;
        }
        .policy_modal.open{
            opacity:1; visibility:visible; pointer-events:auto;
            transition:opacity .4s ease, visibility 0s;
        }
        .policy_modal__backdrop{
            position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(15,39,72,0.55) 0%, transparent 70%),
                rgba(3,6,12,0.82);
            backdrop-filter:blur(14px) saturate(.85);
            -webkit-backdrop-filter:blur(14px) saturate(.85);
        }
        .policy_modal__panel{
            position:relative; z-index:1;
            width:min(960px, 100%);
            height:min(82vh, 920px);
            max-height:100%;
            background:#fff;
            border:1px solid rgba(255,255,255,0.08);
            border-radius:4px;
            overflow:hidden;
            display:flex; flex-direction:column;
            box-shadow:
                0 0 0 1px rgba(0,0,0,0.4),
                0 60px 120px -30px rgba(0,0,0,0.65),
                0 20px 60px -20px rgba(30,144,255,0.12);
            transform:translateY(20px) scale(.985);
            transition:transform .55s cubic-bezier(.16,1,.3,1);
        }
        .policy_modal.open .policy_modal__panel{transform:translateY(0) scale(1)}
        /* Top hairline accent — same primary as the rest of the brand */
        .policy_modal__panel::before{
            content:''; position:absolute; left:0; right:0; top:0;
            height:2px;
            background:linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 50%, transparent 100%);
            opacity:.85;
            z-index:3;
        }
        .policy_modal__head{
            display:flex; align-items:center; justify-content:space-between;
            gap:16px;
            padding:clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 36px);
            background:linear-gradient(180deg, #0f1722 0%, #0a1018 100%);
            border-bottom:1px solid rgba(255,255,255,0.06);
            position:relative;
        }
        .policy_modal__eyebrow{
            display:flex; align-items:center; gap:10px;
            font-family:'Montserrat',sans-serif;
            font-size:10px; font-weight:700; letter-spacing:3px;
            color:var(--primary-2);
            text-transform:uppercase;
            margin-bottom:6px;
        }
        .policy_modal__eyebrow::before{
            content:''; width:18px; height:1px; background:var(--primary);
        }
        .policy_modal__head h2{
            margin:0;
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:clamp(18px, 1.6vw, 22px);
            font-weight:700; letter-spacing:-.4px;
            color:#fff;
            line-height:1.2;
        }
        .policy_modal__title_wrap{display:flex; flex-direction:column; min-width:0}
        .policy_modal__close{
            flex:none;
            width:38px; height:38px;
            min-width:38px; min-height:38px;
            aspect-ratio:1/1;
            box-sizing:border-box;
            padding:0;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.16);
            border-radius:50%;
            color:rgba(255,255,255,0.72);
            cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:background .25s, color .25s, border-color .25s, transform .25s;
        }
        .policy_modal__close:hover{
            background:rgba(255,255,255,0.10);
            color:#fff; border-color:#fff;
            transform:rotate(90deg);
        }
        .policy_modal__body{
            flex:1; min-height:0;
            background:#fff;
            position:relative;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
        }
        .policy_modal__body::before{
            /* Subtle top inner shadow so content meets the dark head cleanly */
            content:''; position:sticky; left:0; right:0; top:0; display:block;
            height:18px; margin-bottom:-18px;
            background:linear-gradient(180deg, rgba(0,0,0,0.07), transparent);
            pointer-events:none; z-index:2;
        }

        /* Inline policy document — editorial body type on light bg */
        .policy_doc{
            padding:clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
            color:#1a2235;
            font-family:'Noto Sans KR','Pretendard',sans-serif;
            font-size:14.5px;
            line-height:1.85;
            letter-spacing:-.1px;
            word-break:keep-all;
            text-wrap:pretty;
            max-width:760px;
            margin:0 auto;
        }
        .policy_doc[hidden]{display:none}
        .policy_doc__lead{
            font-size:15.5px;
            line-height:1.85;
            color:#3a4458;
            margin:0 0 32px;
            padding-bottom:24px;
            border-bottom:1px solid rgba(15,39,72,0.10);
        }
        .policy_doc section{
            padding:18px 0;
        }
        .policy_doc section + section{
            border-top:1px solid rgba(15,39,72,0.06);
        }
        .policy_doc h3{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:15px;
            font-weight:700;
            letter-spacing:-.2px;
            color:var(--primary, #1e90ff);
            margin:0 0 12px;
            padding-left:14px;
            position:relative;
        }
        .policy_doc h3::before{
            content:''; position:absolute; left:0; top:.42em;
            width:4px; height:.65em;
            background:var(--primary, #1e90ff);
            border-radius:1px;
        }
        .policy_doc__chapter{
            font-family:'Montserrat','Noto Sans KR',sans-serif;
            font-size:17px;
            font-weight:800;
            letter-spacing:-.3px;
            color:#0f2748;
            margin:36px 0 4px;
            padding:14px 0 10px;
            border-bottom:2px solid #0f2748;
            text-align:center;
        }
        .policy_doc section + .policy_doc__chapter{
            margin-top:44px;
        }
        .policy_doc__chapter:first-of-type{margin-top:8px}
        .policy_doc__sign{
            margin-top:36px;
            padding-top:20px;
            border-top:1px solid rgba(15,39,72,0.10);
            text-align:right;
            font-family:'Montserrat',sans-serif;
            font-weight:600;
            letter-spacing:.5px;
            color:#0f2748;
        }
        .policy_doc p{
            margin:0 0 10px;
            color:#2a3346;
            min-height:1em;
        }
        .policy_doc p:last-child{margin-bottom:0}
        .policy_doc ul, .policy_doc ol{
            margin:8px 0 14px;
            padding-left:1.4em;
            color:#2a3346;
        }
        .policy_doc li{margin-bottom:6px; line-height:1.75}
        .policy_doc strong{color:#0f2748; font-weight:600}
        .policy_doc table{
            width:100%; border-collapse:collapse;
            margin:14px 0;
            font-size:13.5px;
        }
        .policy_doc th, .policy_doc td{
            padding:10px 12px;
            border:1px solid rgba(15,39,72,0.12);
            text-align:left; vertical-align:top;
        }
        .policy_doc th{background:rgba(15,39,72,0.04); font-weight:600; color:#0f2748}
        .policy_doc a{color:var(--primary, #1e90ff); text-decoration:underline; text-underline-offset:2px}

        /* Custom scrollbar for the modal body (WebKit/Blink + Firefox) */
        .policy_modal__body{scrollbar-width:thin; scrollbar-color:rgba(15,39,72,0.25) transparent}
        .policy_modal__body::-webkit-scrollbar{width:8px}
        .policy_modal__body::-webkit-scrollbar-thumb{background:rgba(15,39,72,0.20); border-radius:4px}
        .policy_modal__body::-webkit-scrollbar-thumb:hover{background:rgba(15,39,72,0.35)}
        @media (max-width:540px){
            .policy_modal{padding:8px}
            .policy_modal__panel{
                width:100%;
                height:100%;
                border-radius:0;
            }
            .policy_modal__head{padding:14px 16px}
            .policy_modal__head h2{font-size:15px}
            .policy_modal__eyebrow{font-size:9px; letter-spacing:2px}
            .policy_modal__close{width:34px; height:34px; min-width:34px; min-height:34px}
        }
        /* Lock body scroll while modal is open */
        body.policy-open{overflow:hidden}

        /* Careers — 채용공고 직접 노출(board) */
        .recruit_board{ width:100%; max-width:600px; margin:clamp(28px,4vw,46px) auto 0; display:flex; flex-direction:column; position:relative; z-index:3; }
        .recruit_board .rb_h{ font-family:'Noto Sans KR','Montserrat',sans-serif; font-size:clamp(18px,1.8vw,24px); font-weight:700; color:#fff; margin:0 0 6px; letter-spacing:-.3px; text-align:left; }
        .recruit_board .rb_h em{ font-style:normal; color:var(--primary); }

        /* =========== CAREERS (Announcements와 완전 동일 형식) =========== */
        #careers{
            position:relative; z-index:5;
            background:
                linear-gradient(180deg, rgba(10,14,24,0.78) 0%, rgba(10,14,24,0.92) 100%),
                url('../images/recruit-team.jpg') center/cover no-repeat fixed;
            background-color:#0a0e18;
            padding:calc(var(--header-h) + 20px) 0 60px;
            min-height:100vh; min-height:100dvh;
            display:flex; flex-direction:column; justify-content:flex-start;
        }
        #careers::before{
            content:''; position:absolute; inset:0;
            background:
                radial-gradient(ellipse at 80% 20%, rgba(30,144,255,0.10), transparent 60%),
                radial-gradient(ellipse at 10% 80%, rgba(77,179,255,0.06), transparent 55%);
            pointer-events:none;
        }
        #careers .layout{
            position:relative; z-index:1;
            max-width:1100px; margin:0 auto; padding:0 5vw;
            display:flex; flex-direction:column; align-items:center;
            gap:clamp(40px, 5vw, 72px);
        }
        #careers .layout > *{width:100%}
        #careers .layout > div:first-child{text-align:center}
        #careers .n_main{
            display:block; font-family:'Montserrat',sans-serif;
            font-size:clamp(34px, 4.4vw, 72px);
            font-weight:400; line-height:1; letter-spacing:-1.5px; color:#fff;
        }
        #careers .n_main em{color:#fff; font-weight:inherit; font-style:normal}
        #careers .n_desc{
            font-size:15px; color:rgba(255,255,255,.6); line-height:1.85;
            margin-top:20px; max-width:560px; margin-left:auto; margin-right:auto;
        }
        #careers .slider{position:relative}
        #careers .item{ border-bottom:1px solid rgba(255,255,255,.08); transition:all .3s; }
        #careers .item a{
            display:grid; grid-template-columns:1fr 140px;
            gap:30px; align-items:center; padding:28px 0; transition:padding .3s;
        }
        #careers .item:hover a{padding-left:14px}
        #careers .item .title{
            font-size:18px; font-weight:500; color:#fff;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
            transition:color .3s; text-wrap:pretty; word-break:keep-all;
        }
        #careers .item:hover .title{color:var(--primary)}
        #careers .item .date{
            font-family:'Montserrat',sans-serif; font-size:13px;
            color:var(--primary); font-weight:500; letter-spacing:.5px; text-align:right;
        }