@charset "utf-8";

/* ================================================================
   INNOTECH · 한국어 전용 스타일
   ----------------------------------------------------------------
   2026-08-10 리뉴얼
   2026-08-14 색채계획 확정서에 따른 색 전면 교체
   · 이 파일은 CSS 중 맨 마지막에 불린다 → 앞의 규칙을 덮어쓴다
   · 영문 · 일본어 화면에는 영향을 주지 않는다
   ----------------------------------------------------------------
   색 : 청록 #00CBB6 (Pantone 3265 M) · 먹색 #062522 · 흰색
   폭 : 상단바 · 푸터 모두 min(1560px, 88%)
   ================================================================ */

:root{
    --tealx:#00CBB6;
    --teal-lt:#66D3C6;
    --inkx:#062522;
    --logo-gray:#C0CDCB;
    --f-muted:#6E7C7B;
}

/* ================================================================
   1. 상단바 — 알약형 · 반투명 · 스크롤 따라옴
   ================================================================ */
header{
    position:fixed !important;
    left:0; right:0; top:18px;
    z-index:100;
    background:transparent !important;
    display:flex; justify-content:center;
    pointer-events:none;
    transition:none !important;
}
header::before,
header::after{ content:none !important; display:none !important; }

header .inner{
    pointer-events:auto;
    width:min(1560px,88%) !important;
    max-width:none !important;
    height:auto !important;
    padding:13px 15px 13px 24px !important;
    margin:0 !important;
    background:rgba(6,37,34,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:14px;
    display:flex; align-items:center;
    justify-content:flex-start !important;
    gap:6px;
    transition:background .35s, box-shadow .35s;
}
body.hd-light header .inner{
    background:rgba(255,255,255,.72);
    box-shadow:0 2px 18px rgba(6,37,34,.10);
}

/* ---------- 로고 ---------- */
header .inner h1{ margin-right:20px; flex-shrink:0; }
header .inner h1 a{ display:block; line-height:0; }
header .inner h1 a img{
    width:150px; height:auto; display:block;
    transition:opacity .25s;
}
header .inner h1 a img.white{ opacity:1 !important; position:static !important; }
header .inner h1 a img:not(.white){ display:none !important; }
body.hd-light header .inner h1 a img.white{ filter:invert(1) brightness(.18); }

header .inner h1 a:hover img.white,
body.hd-light header .inner h1 a:hover img.white{
    filter:brightness(0) saturate(100%) invert(76%) sepia(84%) saturate(3764%) hue-rotate(129deg) brightness(94%) contrast(102%) !important;
}

/* ---------- 메뉴 ---------- */
header .inner nav{ height:auto !important; }
header .inner nav>ul{
    height:auto !important;
    margin-right:0 !important;
    align-items:center;
}
header .inner nav>ul>li{
    height:auto !important;
    padding-right:0 !important;
    position:relative;
}
header .inner nav>ul>li>a{
    height:auto !important;
    font-size:15px !important;
    font-weight:500 !important;
    color:#fff !important;
    padding:10px 16px !important;
    transition:color .22s;
}
body.hd-light header .inner nav>ul>li>a{ color:var(--inkx) !important; }
header .inner nav>ul>li>a:hover{ color:var(--tealx) !important; }

/* ---------- 세부 메뉴 ---------- */
header .inner nav .sub{
    position:absolute;
    left:50%; top:100%;
    transform:translateX(-50%);
    padding-top:32px !important;
    padding-right:0 !important;
    min-width:210px;
}
header .inner nav .sub::before{
    content:'';
    position:absolute;
    left:0; right:0; top:32px; bottom:0;
    background:rgba(6,37,34,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:11px;
    z-index:0;
    transition:background .35s, box-shadow .35s;
}
body.hd-light header .inner nav .sub::before{
    background:rgba(255,255,255,.96);
    box-shadow:0 6px 26px rgba(6,37,34,.14);
}
header.hover .inner nav .sub{ opacity:0 !important; pointer-events:none !important; }
header .inner nav>ul>li:hover .sub{ opacity:1 !important; pointer-events:auto !important; }

header .inner nav .sub>ul,
header .inner nav .sub>dl{
    position:relative;
    z-index:1;
    background:transparent !important;
    border-radius:11px;
    padding:14px 8px;
    min-width:200px;
}
header .inner nav .sub dt{ display:none !important; }
header .inner nav .sub li{ height:34px; }
header .inner nav .sub li+li{ margin-top:0 !important; }
header .inner nav .sub li a{
    display:inline-block !important;
    position:relative;
    margin:0 16px;
    padding-bottom:4px;
    font-size:14px !important;
    line-height:26px !important;
    color:rgba(255,255,255,.82) !important;
    white-space:nowrap !important;
    transition:font-size .24s, color .24s;
}
body.hd-light header .inner nav .sub li a{
    color:rgba(6,37,34,.72) !important;
}
header .inner nav .sub li a::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1.5px; background:var(--tealx);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
header .inner nav .sub li a:hover,
header .inner nav .sub li a.cur{
    font-size:17px !important;
    color:#fff !important;
    font-weight:400 !important;
}
body.hd-light header .inner nav .sub li a:hover,
body.hd-light header .inner nav .sub li a.cur{
    color:var(--inkx) !important;
}
header .inner nav .sub li a:hover::after{ transform:scaleX(1); }

/* ---------- 오른쪽 버튼 ---------- */
header .inner .header-right{
    margin-left:auto;
    display:flex; align-items:center; gap:8px;
}

.hd-btn{
    position:relative; display:inline-flex;
    align-items:center; justify-content:center;
    overflow:hidden; cursor:pointer; z-index:0;
    border-radius:7px; text-decoration:none;
    transition:color .3s;
}
.hd-btn .fill{
    position:absolute; inset:-2px; z-index:1;
    transform:translateY(101%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.hd-btn:hover .fill{ transform:translateY(0); }
.hd-btn>span{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:7px;
    white-space:nowrap;
}

/* 버튼 높이 통일 */
.hd-kko,
.hd-est,
.hd-as,
header .inner .header-right .lang>button{
    height:40px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
}
.hd-kko{ width:40px !important; }
header .inner .header-right .lang>button{ width:40px !important; }

/* 카카오톡 */
.hd-kko{ background:rgba(255,255,255,.92); color:var(--inkx); }
.hd-kko .fill{ background:#FEE500; }
.hd-kko:hover{ color:#3C1E1E; }
.hd-kko svg{ width:20px; height:20px; }
body.hd-light .hd-kko{ background:var(--inkx); color:#fff; }
body.hd-light .hd-kko:hover{ color:#3C1E1E; }

/* 견적의뢰 — 테두리 */
.hd-est{
    border:1px solid rgba(255,255,255,.42);
    color:#fff; font-size:13.5px; font-weight:500;
    padding:0 18px; letter-spacing:-.2px;
}
.hd-est .fill{ background:var(--tealx); }
.hd-est:hover{ color:#fff; border-color:var(--tealx); }
body.hd-light .hd-est{ border-color:#D6E0DE; color:var(--inkx); }
body.hd-light .hd-est:hover{ color:#fff; }

/* AS 신청 — 청록 채움 (가장 중요) */
.hd-as{
    background:var(--tealx); color:#fff;
    border:1px solid var(--tealx);
    font-size:14px; font-weight:600;
    padding:0 20px; letter-spacing:-.2px;
}
.hd-as .fill{ background:var(--inkx); }
.hd-est svg,
.hd-as svg{ width:17px; height:17px; flex-shrink:0; }
.hd-kko svg{ width:19px; height:19px; }

/* ---------- 지구본 · 언어 선택 ---------- */
header .inner .header-right .lang{
    position:relative; width:auto !important;
    font-size:inherit !important; color:inherit !important;
}
header .inner .header-right .lang>button{
    padding:0 !important; border-radius:7px !important;
    background:rgba(255,255,255,.92) !important;
    color:var(--inkx) !important;
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s, background .25s, color .25s;
}
header .inner .header-right .lang>button::after{ content:none !important; }
header .inner .header-right .lang>button svg{ width:19px; height:19px; }
header .inner .header-right .lang>button:hover{
    transform:scale(1.08);
    background:#fff !important;
    color:var(--tealx) !important;
}
body.hd-light header .inner .header-right .lang>button{
    background:var(--inkx) !important; color:#fff !important;
}
body.hd-light header .inner .header-right .lang>button:hover{ color:var(--teal-lt) !important; }

header .inner .header-right .lang .lang-depth{
    left:auto !important; right:0 !important;
    min-width:150px; padding-top:10px !important;
    opacity:0; pointer-events:none; transition:opacity .25s;
}
header .inner .header-right .lang:hover .lang-depth{ opacity:0; pointer-events:none; }
header .inner .header-right .lang.open .lang-depth{ opacity:1; pointer-events:auto; }
header .inner .header-right .lang .lang-depth ul{
    background:rgba(6,37,34,.94) !important;
    backdrop-filter:blur(10px);
    border:0 !important; border-radius:11px !important;
    padding:8px !important;
}
header .inner .header-right .lang .lang-depth li a{
    height:36px !important; border-radius:7px !important;
    color:rgba(255,255,255,.85) !important;
    font-size:13px; padding:0 12px !important;
}
header .inner .header-right .lang .lang-depth li a:hover{
    background:rgba(0,203,182,.18) !important; color:#fff !important;
}

/* ================================================================
   2. 푸터
   ================================================================ */
footer{
    position:relative;
    background:var(--inkx) !important;
    padding:80px 0 30px !important;
    overflow:hidden;
    z-index:0;
}
footer #ft-canvas{
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
}
body footer .inner,
body #content>footer .inner{
    position:relative;
    z-index:2;
    width:min(1560px,88vw) !important;
    max-width:none !important;
    height:auto !important;
    padding:0 !important;
    margin:0 auto !important;
    display:block !important;
}
footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
}

.ft-grid{
    display:grid;
    grid-template-columns:0.95fr 0.6fr 0.6fr 0.95fr;
    gap:44px;
    justify-content:space-between;
}
.ft-col{ min-width:0; width:100%; }
.ft-col h5{
    font-size:14px; letter-spacing:2px;
    color:var(--f-muted); font-weight:500; margin-bottom:24px;
}
.ft-logo{ margin-bottom:26px; }
.ft-logo img{ width:100%; max-width:240px; height:auto; display:block; }

.ft-badges{
    display:grid;
    grid-template-columns:repeat(4,68px);
    gap:10px;
    justify-content:start;
}
.ft-badge{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    width:68px; height:52px;
    border:1px solid #0A4A44; border-radius:6px;
    padding:7px 5px; cursor:pointer; box-sizing:border-box;
    color:#8A9997; font-size:13px;
    transition:color .25s, border-color .25s, transform .25s;
}
.ft-badge img{
    max-width:100%; max-height:26px;
    object-fit:contain; display:block;
    filter:brightness(0) invert(1) opacity(.62);
    transition:filter .25s;
}
.ft-badge b{
    font-size:9.5px; font-weight:500;
    letter-spacing:.4px; line-height:1;
    color:#8A9997; transition:color .25s;
}
.ft-badge:hover{
    border-color:var(--tealx);
    transform:translateY(-3px) scale(1.06);
}
.ft-badge:hover img{
    filter:brightness(0) saturate(100%) invert(76%) sepia(84%) saturate(3764%) hue-rotate(129deg) brightness(94%) contrast(102%);
}
.ft-badge:hover b{ color:var(--tealx); }
.ft-note{ font-size:14px; color:var(--f-muted); margin-top:22px; line-height:1.8; }

.ft-link{
    display:block; height:34px; line-height:34px;
    margin-bottom:12px; white-space:nowrap; text-decoration:none;
}
.ft-link em{
    font-style:normal; font-size:17px;
    color:rgba(255,255,255,.85);
    display:inline-block; position:relative;
    padding-bottom:5px; vertical-align:middle;
    white-space:nowrap;
    transition:font-size .24s, color .24s;
}
.ft-link em::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1.5px; background:#fff;
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.ft-link:hover em{ font-size:20px; color:#fff; }
.ft-link:hover em::after{ transform:scaleX(1); }

.ft-reach h4{
    font-size:34px; color:#fff; font-weight:300;
    line-height:1.35; letter-spacing:-1.2px; margin-bottom:12px;
}
.ft-reach p{ font-size:15px; color:#8A9997; margin-bottom:26px; line-height:1.7; }

.ft-bt{
    position:relative; display:flex;
    align-items:center; justify-content:center;
    width:100%; overflow:hidden; cursor:pointer; z-index:0;
    border-radius:7px; text-decoration:none;
    font-size:15px; font-weight:500;
    padding:16px 18px; margin-bottom:12px;
    box-sizing:border-box;
    transition:color .3s;
}
.ft-bt .fill{
    position:absolute; inset:-2px; z-index:1;
    transform:translateY(101%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.ft-bt:hover .fill{ transform:translateY(0); }
.ft-bt>span{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
}
.ft-bt svg{ width:17px; height:17px; flex-shrink:0; }
.ft-p1{ background:var(--tealx); color:#fff; }
.ft-p1 .fill{ background:#fff; }
.ft-p1:hover{ color:var(--inkx); }
.ft-p2{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.ft-p2 .fill{ background:var(--tealx); }

.ft-bot{
    margin-top:52px; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.11);
    display:flex; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    font-size:14px; color:var(--f-muted);
}

/* 떠다니는 버튼 제거 */
.float-btns{ display:none !important; }

/* ================================================================
   3. 반응형
   ================================================================ */
@media (max-width:1560px){
    header .inner{ width:min(1360px,92%) !important; }
    body footer .inner{ width:min(1360px,92vw) !important; }
    .ft-grid{ gap:36px; }
}
@media (max-width:1420px){
    header .inner{ padding:12px 14px 12px 20px !important; }
    header .inner h1 a img{ width:132px; }
    header .inner nav>ul>li>a{ font-size:14px !important; padding:10px 12px !important; }
    .ft-grid{ gap:32px; }
    .ft-reach h4{ font-size:29px; }
    .ft-bt{ font-size:14px; padding:15px 12px; }
}
@media (max-width:1200px){
    header .inner nav>ul>li>a{ font-size:13px !important; padding:10px 9px !important; }
    .hd-est{ font-size:12.5px; padding:0 14px; }
    .hd-as{ font-size:13px; padding:0 15px; }
    .ft-grid{ gap:26px; }
    .ft-link em{ font-size:15.5px; }
    .ft-link:hover em{ font-size:18px; }
    .ft-bt{ font-size:13px; padding:14px 8px; }
}
@media (max-width:1024px){
    header{ top:12px; }
    header .inner{ width:min(1200px,94%) !important; padding:11px 12px 11px 18px !important; }
    header .inner nav{ display:none !important; }
    header .inner h1{ width:auto !important; margin-right:0; }
    header .inner h1 a img{ width:124px; }
    header .inner .header-right{ gap:6px; }
    header .inner .header-right .m-lang{ display:none !important; }

    body footer .inner{ width:94vw !important; }
    .ft-grid{ grid-template-columns:repeat(2,1fr); gap:34px; }
    .ft-reach h4{ font-size:28px; }
    .ft-bt{ font-size:14px; padding:16px 14px; }
    .ft-link em{ font-size:17px; }
}
@media (max-width:768px){
    footer{ padding:56px 0 24px !important; }
    .ft-grid{ grid-template-columns:1fr; gap:30px; }
    .ft-reach h4{ font-size:25px; }
    .ft-link em{ font-size:16px; }
    .ft-bot{ flex-direction:column; gap:8px; }
    .ft-badges{ display:none !important; }
    .ft-note{ margin-top:14px !important; }
}

/* ================================================================
   4. body.white 규칙 무력화 (메인 화면 대응)
   ================================================================ */
body.white header h1 a img.white,
body.white header.fixed h1 a img.white,
body.white header:hover h1 a img.white{
    opacity:1 !important;
    display:block !important;
}
body.white header h1 a img:not(.white),
body.white header.fixed h1 a img:not(.white),
body.white header:hover h1 a img:not(.white){
    display:none !important;
}
body.white header .inner nav>ul>li>a,
body.white header.fixed .inner nav ul li>a,
body.white header:hover .inner nav ul li>a{
    color:#fff !important;
}
body.white.hd-light header .inner nav>ul>li>a,
body.white.hd-light header.fixed .inner nav ul li>a,
body.white.hd-light header:hover .inner nav ul li>a{
    color:var(--inkx) !important;
}
body.white header .inner nav>ul>li>a:hover{
    color:var(--tealx) !important;
}

/* ================================================================
   모바일 상단바 · 메뉴 판
   ================================================================ */
@media (max-width:1024px){

    header .inner .hd-kko,
    header .inner .hd-est,
    header .inner .hd-as,
    header .inner .header-right .lang{ display:none !important; }

    header .inner .header-right{ margin-left:auto; gap:0; }
    header .btn-menu{
        display:flex !important;
        flex-direction:column; justify-content:center;
        gap:5px; width:40px; height:40px;
        background:none; border:0; cursor:pointer;
        margin-left:0 !important;
    }
    header .btn-menu span{
        display:block; width:22px; height:1.6px;
        margin:0 auto; border-radius:2px;
        background-color:#fff !important;
        transition:background .3s;
    }
    body.hd-light header .btn-menu span{ background-color:#062522 !important; }

    header{ transition:transform .34s cubic-bezier(.4,0,.2,1) !important; }
    body.hd-hide header{ transform:translateY(-140%); }

    aside#aside{
        position:fixed !important;
        top:0; right:0; bottom:0;
        left:auto !important;
        width:min(380px,86vw) !important;
        max-width:none !important;
        background:#062522 !important;
        z-index:210;
        display:flex; flex-direction:column;
        transform:translateX(102%);
        transition:transform .42s cubic-bezier(.4,0,.2,1);
        overflow:hidden;
        padding:0 !important;
    }
    aside#aside.show{ transform:translateX(0); }

    .mask{
        position:fixed; inset:0;
        background:rgba(6,37,34,.55);
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        opacity:0; pointer-events:none;
        transition:opacity .35s;
        z-index:200;
    }
    .mask.show{ opacity:1; pointer-events:auto; }

    .mo-top{
        display:flex; align-items:center; justify-content:space-between;
        padding:22px 24px 20px;
        border-bottom:1px solid rgba(255,255,255,.10);
        flex-shrink:0;
    }
    .mo-logo img{ width:130px; height:auto; display:block; }
    aside#aside .btn-close{
        position:static !important;
        width:38px; height:38px;
        background:none; border:0; cursor:pointer;
        color:rgba(255,255,255,.75);
        display:flex; align-items:center; justify-content:center;
    }
    aside#aside .btn-close svg{ width:22px; height:22px; }

    aside#aside .m-nav{
        flex:1; overflow-y:auto;
        padding:16px 24px 24px !important;
    }
    aside#aside .m-nav ul{ list-style:none; margin:0; padding:0; }
    aside#aside .m-nav > ul > li{ border-bottom:1px solid rgba(255,255,255,.07); }
    aside#aside .m-nav > ul > li > a,
    aside#aside .m-nav > ul > li > .has-depth{
        display:flex; align-items:center; justify-content:space-between;
        padding:17px 0 !important;
        font-size:17px; font-weight:400;
        color:#fff !important;
        text-decoration:none; cursor:pointer;
        background:none !important;
        width:100%; border:0; text-align:left;
    }
    aside#aside .m-nav > ul > li > .has-depth::after{
        content:''; width:8px; height:8px;
        border-right:1.5px solid rgba(255,255,255,.5);
        border-bottom:1.5px solid rgba(255,255,255,.5);
        transform:rotate(-45deg);
        transition:transform .3s;
        margin-right:3px;
    }
    aside#aside .m-nav > ul > li > .has-depth.cur::after{
        transform:rotate(45deg);
    }
    aside#aside .m-nav > ul > li ul{
        display:none; padding:2px 0 14px !important;
    }
    aside#aside .m-nav > ul > li ul li a{
        display:block; padding:11px 0 11px 14px !important;
        font-size:15px; font-weight:300;
        color:rgba(255,255,255,.62) !important;
        text-decoration:none;
        border-left:1px solid rgba(255,255,255,.12);
    }
    aside#aside .m-nav > ul > li ul li a:hover,
    aside#aside .m-nav > ul > li ul li a.cur{
        color:#66D3C6 !important;
        border-left-color:#00CBB6;
    }

    .mo-bot{
        flex-shrink:0;
        padding:20px 24px 26px;
        border-top:1px solid rgba(255,255,255,.10);
        background:rgba(0,0,0,.14);
    }
    .mo-bt{
        display:flex; align-items:center; justify-content:center; gap:9px;
        height:50px; border-radius:8px;
        font-size:15px; font-weight:500;
        text-decoration:none; margin-bottom:10px;
        transition:opacity .25s;
    }
    .mo-bt svg{ width:17px; height:17px; flex-shrink:0; }
    .mo-bt:active{ opacity:.75; }
    .mo-p1{ background:#00CBB6; color:#fff !important; }
    .mo-p2{ border:1px solid rgba(255,255,255,.34); color:#fff !important; }

    .mo-lang{ display:flex; gap:6px; margin-top:16px; }
    .mo-lang a{
        flex:1; text-align:center;
        padding:10px 0; border-radius:7px;
        font-size:12.5px; font-weight:400;
        color:rgba(255,255,255,.55) !important;
        border:1px solid rgba(255,255,255,.14);
        text-decoration:none;
    }
    .mo-lang a.cur{
        color:#062522 !important;
        background:#66D3C6; border-color:#66D3C6;
    }
}

@media (min-width:1025px){
    .mo-top, .mo-bot{ display:none !important; }
}

/* ================================================================
   메인 화면 (한국어)
   ================================================================ */

/* ---------- 옛 사진 배경 전부 제거 ---------- */
.main-wrap .sec.sec-2,
.main-wrap .sec.sec-3,
.main-wrap .sec.sec-4,
.main-wrap .sec.sec-5,
.main-wrap .sec.sec-6{
    background-image:none !important;
}
.main-wrap .sec.sec-2,
.main-wrap .sec.sec-4{ background-color:#062522 !important; }
.main-wrap .sec.sec-3,
.main-wrap .sec.sec-6{ background-color:#fff !important; }
.main-wrap .sec.sec-5{ background-color:#F4FBFA !important; }

/* ---------- 히어로 (슬라이드 제거) ---------- */
.main-wrap .sec.sec-1{ background:#062522 !important; }
.main-wrap .sec.sec-1 .slide-4::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(6,37,34,.44) 0%,rgba(6,37,34,.30) 55%,rgba(6,37,34,.60) 100%);
    z-index:1;
}
.main-wrap .sec.sec-1 .slide-4 .inner{ position:relative; z-index:2; }
.main-wrap .sec.sec-1 .main-slide-controls{ display:none !important; }
.indicator{ display:none !important; }

/* ---------- 공통 제목 ---------- */
.mn-kick{
    font-size:13px; letter-spacing:5px; text-transform:uppercase;
    color:#00CBB6; font-weight:500;
}
.mn-h{
    font-size:clamp(28px,3.2vw,44px); font-weight:200;
    letter-spacing:-1.6px; line-height:1.2; margin:14px 0 0;
    color:#062522;
}
.mn-dark .mn-h{ color:#fff; }
.mn-h b{ font-weight:400; color:#00CBB6; }

/* ================================================================
   sec-2 · WHY LED
   ================================================================ */
.main-wrap .sec.sec-2{ position:relative; overflow:hidden; }
.main-wrap .sec.sec-2 .inner{
    display:block !important;
    padding-top:112px !important;
    padding-bottom:40px !important;
}
.wl-wrap{ width:100%; }

.wl-beams{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.wl-beams i{ display:none; }
.wl-beams::before{
    content:'';
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:56px 56px;
}
.wl-beams::after{
    content:'';
    position:absolute; top:0; bottom:0;
    width:26%; left:-40%;
    background:linear-gradient(90deg,transparent,rgba(210,173,84,.15),transparent);
    animation:mnSweep 6.5s ease-in-out infinite;
}
@keyframes mnSweep{ 0%{left:-40%} 100%{left:130%} }
.main-wrap .sec.sec-2 .inner{ position:relative; z-index:1; }

.main-wrap .sec.sec-2 .mn-h{ font-size:clamp(28px,3.2vw,44px) !important; }

/* 숫자 4개 */
.wl-stats{
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.13);
    margin-top:34px;
}
.wl-stats>div{
    position:relative;
    padding:20px;
    border-right:1px solid rgba(255,255,255,.13);
    border-bottom:1px solid rgba(255,255,255,.13);
    opacity:0; transform:translateY(18px); cursor:default;
    transition:opacity .7s ease, transform .7s ease, background .28s ease;
}
.wl-stats>div:first-child{ border-left:1px solid rgba(255,255,255,.13); }
.sec-2.on .wl-stats>div{ opacity:1; transform:translateY(0); }
.sec-2.on .wl-stats>div:nth-child(1){ transition-delay:.05s; }
.sec-2.on .wl-stats>div:nth-child(2){ transition-delay:.15s; }
.sec-2.on .wl-stats>div:nth-child(3){ transition-delay:.25s; }
.sec-2.on .wl-stats>div:nth-child(4){ transition-delay:.35s; }

.wl-stats>div::after{
    content:''; position:absolute;
    left:-1px; right:-1px; top:-1px; bottom:-1px;
    border:1px solid #00CBB6;
    opacity:0; transition:opacity .28s ease;
    pointer-events:none; z-index:3;
}
.sec-2.on .wl-stats>div:hover{
    background:rgba(0,203,182,.06);
    transform:translateY(-4px) scale(1.03);
    z-index:2;
}
.sec-2.on .wl-stats>div:hover::after{ opacity:1; }

.wl-stats .n{
    font-size:44px; font-weight:200; color:#D2AD54;
    line-height:1; letter-spacing:-1.4px;
}
.wl-stats .n span{ font-weight:300; letter-spacing:0; }
.wl-stats .n span.u{ font-size:17px; vertical-align:baseline; margin-left:3px; }
.wl-stats .n span.s{ font-size:19px; vertical-align:super; margin:0 1px; }
.wl-stats .l{
    font-size:13px; color:#8A9997; margin-top:10px;
    transition:color .28s ease;
}
.sec-2.on .wl-stats>div:hover .l{ color:#A6B5B3; }

/* 비교 막대 */
.wl-bars{ margin-top:36px; }
.wl-bar-head{
    display:grid; grid-template-columns:200px 1fr 1fr;
    gap:34px; padding:0 0 14px 0;
    border-bottom:1px solid rgba(255,255,255,.13);
}
.wl-bar-head span{
    font-size:12.5px; letter-spacing:1.6px;
    font-weight:500;
}
.wl-bar-head .h1{ grid-column:2; color:#00CBB6; }
.wl-bar-head .h2{ grid-column:3; color:#EB946F; }

.wl-row{
    display:grid; grid-template-columns:200px 1fr 1fr;
    gap:34px; align-items:center;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
}
.wl-row .lb{ font-size:15.5px; font-weight:300; color:#8A9997; }
.wl-row .bg{ position:relative; }
.wl-row .bar{
    display:block; height:3px; width:0;
    border-radius:2px; margin-bottom:9px;
    transition:width 1.1s cubic-bezier(.25,1,.4,1);
}
.sec-2.on .wl-row .bar{ width:var(--w); }
.wl-row .bar.good{ background:#00CBB6; }
.wl-row .bar.bad{ background:#E97A4C; }
.wl-row .bg b{ display:block; font-size:17px; font-weight:400; }
.wl-row .bg:nth-child(2) b{ color:#fff; }
.wl-row .bg:nth-child(3) b{ color:#EB946F; }
.wl-row:nth-child(2) .bar{ transition-delay:.20s; }
.wl-row:nth-child(3) .bar{ transition-delay:.32s; }
.wl-row:nth-child(4) .bar{ transition-delay:.44s; }
.wl-row:nth-child(5) .bar{ transition-delay:.56s; }

/* ================================================================
   공통 링크 — 글자 + 화살표 원
   ================================================================ */
.main-wrap .mn-link{
    display:inline-flex !important;
    align-items:center; gap:8px;
    margin-top:26px;
    width:auto !important; height:auto !important;
    padding:0 !important; border:0 !important;
    border-radius:0 !important; background:none !important;
    text-align:left !important; line-height:1 !important;
    text-decoration:none; cursor:pointer;
}
.main-wrap .mn-link .tx{
    position:relative; display:inline-block;
    font-size:16px; font-weight:400;
    color:#00CBB6; padding-bottom:6px; margin-top:6px;
    transition:color .28s;
}
.main-wrap .mn-link .tx::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1.5px; background:currentColor;
    transform:scaleX(0); transform-origin:left;
    transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.main-wrap .mn-link:hover .tx::after{ transform:scaleX(1); }
.main-wrap .mn-link .ar{
    flex-shrink:0; width:32px; height:32px;
    border:1px solid currentColor; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#00CBB6; background:transparent; font-style:normal;
    transition:background .3s, color .3s;
}
.main-wrap .mn-link .ar svg{
    width:18px; height:18px;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.main-wrap .mn-link:hover .ar{ background:#00CBB6; color:#fff; }
.main-wrap .mn-link:hover .ar svg{ transform:translateX(3px); }

.main-wrap .sec.sec-2 .mn-link .tx,
.main-wrap .sec.sec-4 .mn-link .tx{ color:#66D3C6; }
.main-wrap .sec.sec-2 .mn-link .ar,
.main-wrap .sec.sec-4 .mn-link .ar{ border-color:#66D3C6; color:#66D3C6; }
.main-wrap .sec.sec-2 .mn-link:hover .ar,
.main-wrap .sec.sec-4 .mn-link:hover .ar{ background:#66D3C6; color:#062522; }

/* ================================================================
   sec-3 · 인증 · ESG
   ================================================================ */
.main-wrap .sec.sec-3 .inner{
    display:block !important;
    padding-top:112px !important;
    padding-bottom:40px !important;
}
.ct-wrap{ width:100%; }
.ct-head{ margin-bottom:26px; }
.main-wrap .sec.sec-3 .ct-head .mn-h{ color:#062522 !important; }
.main-wrap .sec.sec-3 .ct-head .mn-h b{ color:#00CBB6 !important; }
.main-wrap .sec.sec-3 .ct-head .mn-kick{ color:#00CBB6 !important; }

.ct-grid{
    position:relative;
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid #EDF1F0;
    border-left:1px solid #EDF1F0;
    overflow:hidden;
}
.ct-cell{
    position:relative; height:88px;
    border-right:1px solid #EDF1F0;
    border-bottom:1px solid #EDF1F0;
    display:flex; align-items:center; justify-content:center;
    padding:20px; cursor:pointer; overflow:hidden;
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
}
.sec-3.on .ct-cell{ opacity:1; transform:translateY(0); }
.sec-3.on .ct-cell:nth-child(11){ transition-delay:.04s; }
.sec-3.on .ct-cell:nth-child(12){ transition-delay:.10s; }
.sec-3.on .ct-cell:nth-child(13){ transition-delay:.16s; }
.sec-3.on .ct-cell:nth-child(14){ transition-delay:.22s; }
.sec-3.on .ct-cell:nth-child(15){ transition-delay:.28s; }
.sec-3.on .ct-cell:nth-child(16){ transition-delay:.34s; }
.sec-3.on .ct-cell:nth-child(17){ transition-delay:.40s; }
.sec-3.on .ct-cell:nth-child(18){ transition-delay:.46s; }

.ct-cell img{
    position:relative; z-index:3;
    max-width:56%; max-height:38px;
    object-fit:contain; display:block;
    filter:grayscale(1) brightness(1.45) opacity(.78);
    transition:filter .3s, transform .3s;
}
.ct-cell:hover img{ filter:grayscale(1) brightness(.22); transform:scale(1.05); }
.ct-cell .gd{
    position:absolute; inset:0; z-index:1; opacity:0;
    transition:opacity .4s;
    background:radial-gradient(65% 80% at 50% 50%,rgba(0,203,182,.13) 0%,transparent 70%);
}
.ct-cell:hover .gd{ opacity:1; }
.ct-cell::before{
    content:''; position:absolute; inset:0; z-index:2;
    opacity:0; transition:opacity .35s; padding:1px;
    background:linear-gradient(90deg,transparent 0%,transparent 38%,#00CBB6 47%,#66D3C6 50%,#00CBB6 53%,transparent 62%,transparent 100%);
    background-size:400% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
}
.ct-cell:hover::before{ opacity:1; animation:mnflw 8s linear infinite; }
@keyframes mnflw{ 0%{background-position:0% 0} 100%{background-position:400% 0} }

/* 십자 표시 */
.ct-x{
    position:absolute; left:var(--cx); top:var(--cy);
    width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
    z-index:6; pointer-events:none;
    animation:ctXfade 2.6s ease-in-out var(--d) infinite;
}
.ct-x::before,
.ct-x::after{ content:''; position:absolute; background:#8A9997; }
.ct-x::before{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px; }
.ct-x::after{ top:50%; left:0; height:1px; width:100%; margin-top:-.5px; }
@keyframes ctXfade{
    0%,100%{ transform:scale(.45); }
    50%{ transform:scale(1.25); }
}
.ct-x.am::before,
.ct-x.am::after{ background:#D2AD54; }
.ct-x.am{ width:13px; height:13px; margin:-6.5px 0 0 -6.5px; }

.ct-sweep{
    position:absolute; top:0; bottom:0;
    width:38%; left:-45%;
    z-index:4; pointer-events:none;
    background:linear-gradient(90deg,
        rgba(0,203,182,0) 0%,
        rgba(0,203,182,.035) 40%,
        rgba(0,203,182,.05) 62%,
        rgba(0,203,182,0) 100%);
    animation:ctSweep 14s ease-in-out infinite;
}
@keyframes ctSweep{ 0%{left:-45%} 100%{left:120%} }

/* ESG 3칸 */
.ct-esg{
    display:grid; grid-template-columns:repeat(3,1fr);
    margin-top:38px; gap:14px;
    align-items:stretch;
}
.ct-esg>div{
    position:relative; background:#fff;
    padding:34px 32px 34px 34px;
    border:1px solid #EDF1F0; border-radius:10px;
    display:flex; flex-direction:column; justify-content:center;
    min-height:132px;
    transition:background .28s, border-color .28s, transform .3s, box-shadow .3s;
}
.ct-esg>div:nth-child(1){ --esg:#00CBB6; --esg-bg:rgba(0,203,182,.05); }
.ct-esg>div:nth-child(2){ --esg:#D2AD54; --esg-bg:rgba(210,173,84,.06); }
.ct-esg>div:nth-child(3){ --esg:#D94D08; --esg-bg:rgba(217,77,8,.05); }
.ct-esg>div::before{
    content:''; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:4px; height:calc(100% - 68px);
    background:var(--esg);
    transition:height .35s cubic-bezier(.4,0,.2,1);
}
.ct-esg>div:hover{
    background:var(--esg-bg);
    border-color:var(--esg);
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 10px 26px rgba(6,37,34,.07);
}
.ct-esg>div:hover::before{ height:calc(100% - 48px); }
.ct-esg .t{ font-size:15px; letter-spacing:2.6px; color:var(--esg); font-weight:500; }
.ct-esg .d{ font-size:18px; color:#54615F; margin-top:14px; line-height:1.7; font-weight:300; }

/* ================================================================
   sec-4 · 기술력 + 라인아트
   ================================================================ */
.main-wrap .sec.sec-4{ overflow:hidden; }
.main-wrap .sec.sec-4 .inner{
    display:flex !important;
    align-items:center !important;
    height:100% !important;
}
.lu-wrap{
    display:grid; grid-template-columns:1fr 1.25fr;
    gap:56px; align-items:center; width:100%;
}
.lu-wrap .slots{ position:relative; height:58vh; }
.lu-wrap .blk{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .5s ease;
}
.lu-wrap .blk.on{ opacity:1; pointer-events:auto; }
.lu-wrap .num{ font-size:14px; color:#54615F; letter-spacing:2.5px; margin-bottom:10px; }
.lu-wrap .kick{
    font-size:14px; letter-spacing:4.5px;
    color:#00CBB6; font-weight:500; text-transform:uppercase;
}
.lu-wrap .blk h2{
    font-size:clamp(30px,3.6vw,50px); font-weight:200;
    color:#fff; letter-spacing:-1.6px; line-height:1.16;
    margin:18px 0 20px;
}
.lu-wrap .blk h2 b{ font-weight:500; color:#00CBB6; }
.lu-wrap .blk p{
    font-size:19px; font-weight:300;
    color:#8A9997; line-height:1.75; max-width:520px;
}
.lu-wrap .dots{ position:absolute; left:0; bottom:0; display:flex; gap:8px; }
.lu-wrap .dots i{
    width:24px; height:2px;
    background:rgba(255,255,255,.18);
    transition:background .35s;
}
.lu-wrap .dots i.on{ background:#00CBB6; }
.lu-wrap .art{ display:flex; align-items:center; }
.lu-wrap .art svg{
    width:100%; height:auto; max-height:62vh;
    display:block; color:#fff;
}

/* ================================================================
   sec-5 · 계산기
   ================================================================ */
.main-wrap .sec.sec-5{ height:auto !important; min-height:100vh; }
.main-wrap .sec.sec-5 .inner{
    display:block !important;
    padding-top:112px !important;
    padding-bottom:60px !important;
}
.cl-wrap{ width:100%; }
.cl-head{ margin-bottom:36px; }
.main-wrap .sec.sec-5 .cl-head .mn-h{ color:#062522 !important; }
.main-wrap .sec.sec-5 .cl-head .mn-h b{ color:#00CBB6 !important; }
.main-wrap .sec.sec-5 .cl-head .mn-kick{ color:#00CBB6 !important; }

.cl-box{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.cl-in .row{ margin-bottom:28px; }
.cl-in label{
    display:block; font-size:12.5px; letter-spacing:2.4px;
    color:#6E7C7B; font-weight:500; margin-bottom:12px;
}
.cl-area{ display:flex; gap:10px; }
.cl-area input[type=number]{
    flex:1; min-width:0; height:64px;
    border:1px solid #D6E0DE; border-radius:9px;
    background:#fff; padding:0 20px;
    font-size:26px; font-weight:300; color:#062522;
    font-family:inherit; box-sizing:border-box;
}
.cl-area input[type=number]:focus{ outline:none; border-color:#00CBB6; }
.cl-area input::-webkit-outer-spin-button,
.cl-area input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.cl-unit, .cl-place{ display:flex; gap:8px; }
.cl-unit button, .cl-place button{
    border:1px solid #D6E0DE; background:#fff; color:#54615F;
    font-size:15px; padding:0 24px; height:64px; border-radius:9px;
    cursor:pointer; font-family:inherit;
    transition:background .25s, border-color .25s, color .25s;
}
.cl-place button{ height:56px; font-size:15.5px; }
.cl-unit button:hover, .cl-place button:hover{ border-color:#00CBB6; color:#00CBB6; }
.cl-unit button.on, .cl-place button.on{ background:#062522; border-color:#062522; color:#fff; }

.cl-note{
    font-size:14px; color:#6E7C7B; line-height:1.75; font-weight:300;
    padding-top:22px; border-top:1px solid #E7EDEC;
}
.cl-out{ background:#062522; border-radius:16px; padding:38px 36px; color:#fff; }
.cl-out .lb{ font-size:12px; letter-spacing:2.6px; color:#6E7C7B; font-weight:500; }
.cl-out .pick{
    font-size:clamp(28px,3vw,40px); font-weight:200;
    margin-top:14px; letter-spacing:-1.2px; line-height:1.2;
}
.cl-out .pick b{ color:#D2AD54; font-weight:300; }
.cl-out .qty{ font-size:16px; color:#8A9997; margin-top:14px; line-height:1.7; font-weight:300; }
.cl-out .alt{
    margin-top:26px; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.13);
    font-size:15.5px; color:#8A9997; line-height:2; font-weight:300;
}
.cl-out .alt .alt-t{
    font-size:11.5px; letter-spacing:2.4px; color:#6E7C7B;
    margin-bottom:8px; line-height:1.6; font-weight:500;
}
.cl-out .alt span{ color:#fff; }
.cl-btns{ display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.cl-btns a{
    position:relative; display:inline-flex;
    align-items:center; justify-content:center;
    overflow:hidden; z-index:0; border-radius:8px;
    text-decoration:none; height:52px; padding:0 26px;
    font-size:14.5px; font-weight:500;
    transition:color .3s;
}
.cl-btns a .fill{
    position:absolute; inset:-2px; z-index:1;
    transform:translateY(101%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.cl-btns a:hover .fill{ transform:translateY(0); }
.cl-btns a>span{ position:relative; z-index:2; white-space:nowrap; }
.cl-b1{ background:#00CBB6; color:#fff; }
.cl-b1 .fill{ background:#fff; }
.cl-b1:hover{ color:#062522; }
.cl-b2{ border:1px solid rgba(255,255,255,.38); color:#fff; }
.cl-b2 .fill{ background:#00CBB6; }

/* ================================================================
   sec-6 · 주요 납품기관
   ================================================================ */
.main-wrap .sec.sec-6{ height:auto !important; min-height:100vh; }
.main-wrap .sec.sec-6 .inner{
    display:block !important;
    padding-top:112px !important;
    padding-bottom:60px !important;
}
.kc-wrap{ width:100%; }
.kc-head{ margin-bottom:30px; }
.main-wrap .sec.sec-6 .kc-head .mn-h{ color:#062522 !important; }
.main-wrap .sec.sec-6 .kc-head .mn-h b{ color:#00CBB6 !important; }
.main-wrap .sec.sec-6 .kc-head .mn-kick{ color:#00CBB6 !important; }

.kc-grid{
    position:relative;
    display:grid; grid-template-columns:repeat(5,1fr);
    border-top:1px solid #EDF1F0;
    border-left:1px solid #EDF1F0;
    overflow:hidden;
}
.kc-cell{
    position:relative; height:132px;
    border-right:1px solid #EDF1F0;
    border-bottom:1px solid #EDF1F0;
    display:flex; align-items:center; justify-content:center;
    padding:14px; cursor:pointer; overflow:hidden;
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
}
.sec-6.on .kc-cell{ opacity:1; transform:translateY(0); }
.kc-cell img{
    position:relative; z-index:3;
    max-width:88%; max-height:76px;
    object-fit:contain; display:block;
    filter:grayscale(1) brightness(1.42) opacity(.75);
    transition:filter .3s, transform .3s;
}
.kc-cell:hover img{ filter:grayscale(1) brightness(.22); transform:scale(1.05); }
.kc-cell .gd{
    position:absolute; inset:0; z-index:1; opacity:0;
    transition:opacity .4s;
    background:radial-gradient(65% 80% at 50% 50%,rgba(0,203,182,.13) 0%,transparent 70%);
}
.kc-cell:hover .gd{ opacity:1; }
.kc-cell::before{
    content:''; position:absolute; inset:0; z-index:2;
    opacity:0; transition:opacity .35s; padding:1px;
    background:linear-gradient(90deg,transparent 0%,transparent 38%,#00CBB6 47%,#66D3C6 50%,#00CBB6 53%,transparent 62%,transparent 100%);
    background-size:400% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
}
.kc-cell:hover::before{ opacity:1; animation:mnflw 8s linear infinite; }

.kc-x{
    position:absolute; left:var(--cx); top:var(--cy);
    width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
    z-index:6; pointer-events:none;
    animation:ctXfade 2.6s ease-in-out var(--d) infinite;
}
.kc-x::before,
.kc-x::after{ content:''; position:absolute; background:#8A9997; }
.kc-x::before{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px; }
.kc-x::after{ top:50%; left:0; height:1px; width:100%; margin-top:-.5px; }

.kc-sweep{
    position:absolute; top:0; bottom:0;
    width:38%; left:-45%;
    z-index:4; pointer-events:none;
    background:linear-gradient(90deg,
        rgba(0,203,182,0) 0%,
        rgba(0,203,182,.035) 40%,
        rgba(0,203,182,.05) 62%,
        rgba(0,203,182,0) 100%);
    animation:ctSweep 14s ease-in-out infinite;
}

/* ================================================================
   메인 반응형
   ================================================================ */
@media (max-width:1200px){
    .wl-bar-head, .wl-row{ grid-template-columns:150px 1fr 1fr; gap:22px; }
    .wl-stats .n{ font-size:36px; }
}
@media (max-width:1024px){
    .main-wrap .sec.sec-4 .inner{ padding:80px 0 !important; }
    .lu-wrap{ grid-template-columns:1fr; gap:30px; }
    .lu-wrap .slots{ height:auto; position:static; }
    .lu-wrap .blk{ position:static; opacity:1; pointer-events:auto; padding:26px 0; }
    .lu-wrap .dots{ display:none; }
    .lu-wrap .art svg{ max-height:34vh; }
    .ct-grid{ grid-template-columns:repeat(4,1fr); }
    .ct-esg{ grid-template-columns:1fr; }
    .kc-grid{ grid-template-columns:repeat(3,1fr); }
    .cl-box{ grid-template-columns:1fr; gap:28px; }
    .wl-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ================================================================
   모바일 · 스냅 끄고 죽 흐르게
   ================================================================ */
@media (max-width:1024px){
    body.mo-flow,
    body.mo-flow html{ overflow:auto !important; height:auto !important; }
    body.mo-flow .main-wrap{ height:auto !important; transform:none !important; }
    body.mo-flow .main-wrap .sec,
    body.mo-flow .main-wrap footer{
        height:auto !important; min-height:0 !important; transform:none !important;
    }
    body.mo-flow .main-wrap .sec.sec-1{
        height:100vh !important;
        height:100dvh !important;
        min-height:0 !important;
    }
    body.mo-flow .main-wrap .sec .inner{
        height:auto !important;
        padding-top:74px !important;
        padding-bottom:54px !important;
        align-items:flex-start !important;
    }
    body.mo-flow .main-wrap .sec.sec-1 .inner{
        padding:0 !important; height:100% !important; align-items:center !important;
    }
    body.mo-flow .main-wrap footer .inner{
        padding-top:0 !important; padding-bottom:0 !important;
    }

    /* ---------- 숨겨진 것 보이게 ---------- */
    .wl-stats>div,
    .ct-cell,
    .kc-cell{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    /* ---------- sec-2 WHY LED ---------- */
    .main-wrap .sec.sec-2 .mn-h{ font-size:26px !important; }
    .wl-stats{ grid-template-columns:repeat(2,1fr) !important; }
    .wl-stats .n{ font-size:32px !important; }
    .wl-stats .n span.u{ font-size:14px !important; }
    .wl-stats .n span.s{ font-size:16px !important; }
    .wl-stats>div{ padding:16px 14px !important; }
    .wl-bar-head{ display:none !important; }
    .wl-row{
        grid-template-columns:1fr !important;
        gap:4px !important; padding:16px 0 !important;
    }
    .wl-row .lb{ font-size:13px !important; color:#6E7C7B !important; }
    .wl-row .bg{ display:flex; align-items:center; gap:10px; }
    .wl-row .bar{
        height:3px !important; margin:0 !important;
        max-width:110px; flex-shrink:0;
        width:0 !important;
        transition:width 1.1s cubic-bezier(.25,1,.4,1) !important;
    }
    .main-wrap .sec.sec-2.on .wl-row .bar{ width:var(--w) !important; }
    .wl-row .bg b{ font-size:15px !important; }
    .wl-beams{ display:none !important; }

    /* ---------- sec-3 인증 ---------- */
    .ct-head{ padding-top:6px !important; margin-bottom:22px !important; }
    .ct-head .mn-kick,
    .kc-head .mn-kick,
    .cl-head .mn-kick{ font-size:11.5px !important; letter-spacing:3.4px !important; }
    .ct-head .mn-h,
    .kc-head .mn-h,
    .cl-head .mn-h{
        font-size:25px !important; margin-top:10px !important; line-height:1.28 !important;
    }
    .ct-grid{ grid-template-columns:repeat(4,1fr) !important; }
    .ct-cell{ height:auto !important; aspect-ratio:1/1; padding:10px !important; }
    .ct-cell img{ max-width:76% !important; max-height:60% !important; }
    .ct-x{ display:none !important; }
    .ct-esg{ grid-template-columns:1fr !important; gap:10px !important; align-items:stretch !important; }
    .ct-esg>div{
        padding:18px 18px 18px 22px !important;
        min-height:104px !important;
    }
    .ct-esg .t{ font-size:12.5px !important; letter-spacing:2px !important; }
    .ct-esg .d{ font-size:14.5px !important; margin-top:8px !important; }

    /* ---------- sec-4 제품 ---------- */
    .main-wrap .sec.sec-4 .inner{
        padding-left:5% !important;
        padding-right:5% !important;
        box-sizing:border-box !important;
    }
    .lu-wrap{ display:block !important; }
    .lu-wrap .slots{ position:static !important; height:auto !important; }
    .lu-wrap .blk{
        position:static !important;
        opacity:1 !important; pointer-events:auto !important;
        display:block !important;
        padding:22px 0 !important;
        border-top:1px solid rgba(255,255,255,.10);
    }
    .lu-wrap .blk:first-child{ border-top:0; }
    .lu-wrap .blk h2{ font-size:24px !important; margin:10px 0 12px !important; word-break:keep-all; }
    .lu-wrap .blk p{ font-size:15.5px !important; max-width:none !important; padding-right:6px; }
    .lu-wrap .dots{ display:none !important; }
    .lu-wrap .art{ margin-top:26px; }
    .lu-wrap .art svg{ max-height:none !important; }

    /* ---------- sec-5 계산기 ---------- */
    .main-wrap .sec.sec-5 .inner{
        padding-top:60px !important; padding-bottom:40px !important;
    }
    .cl-head{ margin-bottom:18px !important; }
    .cl-in .row{ margin-bottom:16px !important; }
    .cl-in label{ font-size:11px !important; margin-bottom:7px !important; }
    .cl-area{ flex-direction:row !important; }
    .cl-area input[type=number]{
        height:48px !important; font-size:19px !important; padding:0 14px !important;
    }
    .cl-unit button{ height:48px !important; font-size:13px !important; padding:0 15px !important; }
    .cl-place button{ height:44px !important; font-size:13.5px !important; padding:0 18px !important; }
    .cl-note{ font-size:11.5px !important; line-height:1.6 !important; padding-top:12px !important; }
    .cl-box{ gap:16px !important; }
    .cl-out{ padding:22px 20px !important; border-radius:12px !important; }
    .cl-out .lb{ font-size:10.5px !important; }
    .cl-out .pick{ font-size:22px !important; margin-top:8px !important; }
    .cl-out .qty{ font-size:13px !important; margin-top:8px !important; }
    .cl-out .alt{
        margin-top:14px !important; padding-top:12px !important;
        font-size:13px !important; line-height:1.7 !important;
    }
    .cl-btns{ margin-top:16px !important; gap:8px !important; }
    .cl-btns a{ height:44px !important; font-size:13px !important; padding:0 18px !important; }

    /* ---------- sec-6 납품기관 ---------- */
    .kc-grid{ grid-template-columns:repeat(3,1fr) !important; }
    .kc-cell{ height:auto !important; aspect-ratio:1.35/1; padding:10px !important; }
    .kc-cell img{ max-width:84% !important; max-height:62% !important; }
    .kc-cell:nth-of-type(10){ display:none !important; }
    .kc-x{ display:none !important; }

    /* ---------- 링크 화살표 ---------- */
    .main-wrap .mn-link{
        display:inline-flex !important;
        align-items:center !important;
        gap:8px !important;
        margin-top:24px !important;
    }
    .main-wrap .mn-link .tx{ font-size:15px !important; }
    .main-wrap .mn-link .ar{
        display:inline-flex !important;
        flex-shrink:0 !important;
        width:32px !important; height:32px !important;
        border:1px solid currentColor !important;
        border-radius:50% !important;
        align-items:center !important; justify-content:center !important;
        font-style:normal !important; opacity:1 !important;
    }
    .main-wrap .mn-link .ar svg{
        width:17px !important; height:17px !important; display:block !important;
    }
    .main-wrap .sec.sec-3 .mn-link .ar,
    .main-wrap .sec.sec-6 .mn-link .ar{
        border-color:#00CBB6 !important; color:#00CBB6 !important; background:transparent !important;
    }
    .main-wrap .sec.sec-3 .mn-link .ar svg,
    .main-wrap .sec.sec-6 .mn-link .ar svg{ stroke:#00CBB6 !important; }
    .main-wrap .sec.sec-2 .mn-link .ar,
    .main-wrap .sec.sec-4 .mn-link .ar{
        border-color:#66D3C6 !important; color:#66D3C6 !important; background:transparent !important;
    }
    .main-wrap .sec.sec-2 .mn-link .ar svg,
    .main-wrap .sec.sec-4 .mn-link .ar svg{ stroke:#66D3C6 !important; }

    /* ---------- 푸터 ---------- */
    footer .ft-badges{ display:none !important; }
    footer .ft-note{ margin-top:14px !important; }
    footer .ft-grid{ gap:26px !important; }
    footer .ft-bot{ margin-top:30px !important; }
}

/* ================================================================
   2026-08-10 · 한국어 메인 마무리
   ================================================================ */

/* ---------- 1. 메인에서 바깥 푸터 숨기기 ---------- */
body#main footer{ display:none !important; }
body#main #content > footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
}

/* ---------- 2. ESG 글자색 못 박기 ---------- */
.main-wrap .sec.sec-3 .ct-esg > div .t{ color:var(--esg) !important; }
.main-wrap .sec.sec-3 .ct-esg > div .d{ color:#54615F !important; }
.main-wrap .sec.sec-3 .ct-esg > div:nth-child(1) .t{ color:#00CBB6 !important; }
.main-wrap .sec.sec-3 .ct-esg > div:nth-child(2) .t{ color:#D2AD54 !important; }
.main-wrap .sec.sec-3 .ct-esg > div:nth-child(3) .t{ color:#D94D08 !important; }

/* ---------- 3. 비교 막대 ---------- */
.main-wrap .sec.sec-2 .wl-row .bar{
    width:0 !important;
    transition:width 1.1s cubic-bezier(.25,1,.4,1) !important;
}
.main-wrap .sec.sec-2.on .wl-row .bar{ width:var(--w) !important; }

/* ---------- 4. 라인아트 ---------- */
.lu-wrap .art{ min-height:200px; }
.lu-wrap .art svg{
    width:100% !important; height:auto !important;
    color:#fff !important;
}

/* ---------- 밝은 구간 링크 글자색 ---------- */
.main-wrap .sec.sec-3 .mn-link .tx,
.main-wrap .sec.sec-5 .mn-link .tx,
.main-wrap .sec.sec-6 .mn-link .tx{
    color:#00CBB6 !important;
}
.main-wrap .sec.sec-3 .mn-link .tx::after,
.main-wrap .sec.sec-5 .mn-link .tx::after,
.main-wrap .sec.sec-6 .mn-link .tx::after{
    background:#00CBB6 !important;
}
.main-wrap .sec.sec-3 .mn-link .ar,
.main-wrap .sec.sec-5 .mn-link .ar,
.main-wrap .sec.sec-6 .mn-link .ar{
    border-color:#00CBB6 !important;
    color:#00CBB6 !important;
}
.main-wrap .sec.sec-3 .mn-link .ar svg,
.main-wrap .sec.sec-5 .mn-link .ar svg,
.main-wrap .sec.sec-6 .mn-link .ar svg{
    stroke:#00CBB6 !important;
}
.main-wrap .sec.sec-3 .mn-link:hover .ar,
.main-wrap .sec.sec-5 .mn-link:hover .ar,
.main-wrap .sec.sec-6 .mn-link:hover .ar{
    background:#00CBB6 !important;
    color:#fff !important;
}
.main-wrap .sec.sec-3 .mn-link:hover .ar svg,
.main-wrap .sec.sec-5 .mn-link:hover .ar svg,
.main-wrap .sec.sec-6 .mn-link:hover .ar svg{
    stroke:#fff !important;
}

/* ================================================================
   메인 효과 · 가장 마지막에 못 박기 (컴퓨터 화면)
   ================================================================ */
@media (min-width:1025px){

    /* 숫자 4개 올라오기 */
    .main-wrap .sec.sec-2 .wl-stats > div{
        opacity:0 !important;
        transform:translateY(18px) !important;
        transition:opacity .7s ease, transform .7s ease, background .28s ease !important;
    }
    .main-wrap .sec.sec-2.on .wl-stats > div{
        opacity:1 !important;
        transform:translateY(0) !important;
    }
    .main-wrap .sec.sec-2.on .wl-stats > div:nth-child(1){ transition-delay:.05s !important; }
    .main-wrap .sec.sec-2.on .wl-stats > div:nth-child(2){ transition-delay:.15s !important; }
    .main-wrap .sec.sec-2.on .wl-stats > div:nth-child(3){ transition-delay:.25s !important; }
    .main-wrap .sec.sec-2.on .wl-stats > div:nth-child(4){ transition-delay:.35s !important; }
    .main-wrap .sec.sec-2.on .wl-stats > div:hover{
        transform:translateY(-4px) scale(1.03) !important;
        background:rgba(0,203,182,.06) !important;
    }

    /* 비교 막대 */
    .main-wrap .sec.sec-2 .wl-row .bar{
        width:0 !important;
        transition:width 1.1s cubic-bezier(.25,1,.4,1) !important;
    }
    .main-wrap .sec.sec-2.on .wl-row .bar{ width:var(--w) !important; }
    .main-wrap .sec.sec-2.on .wl-row:nth-child(2) .bar{ transition-delay:.20s !important; }
    .main-wrap .sec.sec-2.on .wl-row:nth-child(3) .bar{ transition-delay:.32s !important; }
    .main-wrap .sec.sec-2.on .wl-row:nth-child(4) .bar{ transition-delay:.44s !important; }
    .main-wrap .sec.sec-2.on .wl-row:nth-child(5) .bar{ transition-delay:.56s !important; }

    /* 인증마크 나타나기 */
    .main-wrap .sec.sec-3 .ct-cell{
        opacity:0 !important;
        transform:translateY(16px) !important;
        transition:opacity .6s ease, transform .6s ease !important;
    }
    .main-wrap .sec.sec-3.on .ct-cell{
        opacity:1 !important;
        transform:translateY(0) !important;
    }

    /* 파트너 로고 나타나기 */
    .main-wrap .sec.sec-6 .kc-cell{
        opacity:0 !important;
        transform:translateY(16px) !important;
        transition:opacity .6s ease, transform .6s ease !important;
    }
    .main-wrap .sec.sec-6.on .kc-cell{
        opacity:1 !important;
        transform:translateY(0) !important;
    }
}

/* 모바일에서도 효과 살리기 */
@media (max-width:1024px){
    .main-wrap .sec.sec-2 .wl-stats > div{
        opacity:0 !important;
        transform:translateY(18px) !important;
        transition:opacity .7s ease, transform .7s ease !important;
    }
    .main-wrap .sec.sec-2.on .wl-stats > div{
        opacity:1 !important;
        transform:translateY(0) !important;
    }
}

/* 세는 숫자 · 기울임 막기 */
.main-wrap .sec.sec-2 .wl-stats .n i.cnt{
    font-style:normal !important;
    font-weight:inherit !important;
    font-size:inherit !important;
    color:inherit !important;
    letter-spacing:inherit !important;
    display:inline-block;
    font-variant-numeric:tabular-nums;
}
.main-wrap .sec.sec-2 .wl-stats .n span.s{
    margin:0 4px !important;
}

/* ================================================================
   브랜드 색 단추 · 카카오톡 채널                     2026-08-11 추가
   ----------------------------------------------------------------
   · 클래스가 아니라 링크 주소(pf.kakao.com)로 잡는다
     → 상단바 · 모바일 메뉴 판이 한꺼번에 바뀐다
   · 한국어 푸터에는 카카오톡 단추가 없으므로 영향 없음
   · 평소            : 노랑 #FEE500 바탕 + 갈색 말풍선 #3C1E1E
   · 호버(어두운 배경): 흰색 차오름 + 갈색 말풍선
   · 호버(밝은 배경)  : 갈색 차오름 + 노란 말풍선
   ================================================================ */

a[href*="pf.kakao.com"]{
    background:#FEE500 !important;
    color:#3C1E1E !important;
    border-color:#FEE500 !important;
}
a[href*="pf.kakao.com"] svg{ color:inherit !important; }
a[href*="pf.kakao.com"] .fill{ background:#fff !important; }
a[href*="pf.kakao.com"]:hover{ color:#3C1E1E !important; }

/* 밝은 배경 위의 상단바에서만 갈색이 차오른다 */
body.hd-light header a[href*="pf.kakao.com"] .fill{ background:#3C1E1E !important; }
body.hd-light header a[href*="pf.kakao.com"]:hover{ color:#FEE500 !important; }

/* ================================================================
   브랜드 단추 채움 보정 · 카카오톡                   2026-08-11 추가
   ================================================================ */

a[href*="pf.kakao.com"] .fill{
    left:-3px !important;  right:-3px !important;
    top:-3px !important;   bottom:-3px !important;
    width:auto !important; height:auto !important;
}

a[href*="pf.kakao.com"]{
    transition:background-color .38s cubic-bezier(.4,0,.2,1), color .3s !important;
}
a[href*="pf.kakao.com"]:hover{
    background:#fff !important;
    border-color:#fff !important;
}
body.hd-light header a[href*="pf.kakao.com"]:hover{
    background:#3C1E1E !important;
    border-color:#3C1E1E !important;
}

/* ================================================================
   색 판 · 한국어                                    2026-08-11 신규
   ----------------------------------------------------------------
   ★2026-08-14 색채계획 확정서 6-1 표 값으로 전면 교체

   영문(en_style.css)과 완전히 같은 값이다.
   판은 언어와 상관없으므로 값을 그대로 맞춘다.

     frame-*  바깥 판 → 상단바 단추 · 푸터 배경
     tone-*   안쪽 판 → 히어로 · 본문 단추 · 링크 · 강조

   gray 는 이름만 그대로 두고 색은 회청(#63849A) 계열이다.
   DB 를 손대지 않기 위해서다.

   나중에 tone.css 로 분리하면 이 덩어리는 지운다.
   ================================================================ */

/* ---------- 안쪽 판 ---------- */
:root,
body{
    --tn:      #00CBB6;   /* 청록 · Pantone 3265 M */
    --tn-deep: #00A896;
    --tn-lite: #66D3C6;
    --tn-hero: #F4FBFA;
    --tn-ftd:  #062522;
    --tn-ftl:  #F4FBFA;
}
body.tone-orange{
    --tn:#FF5900; --tn-deep:#D94D08; --tn-lite:#EB946F;
    --tn-hero:#FCF7F4; --tn-ftd:#2B1208; --tn-ftl:#FCF7F4;
}
body.tone-lime{
    --tn:#C2E86D; --tn-deep:#7E9433; --tn-lite:#D1E89F;
    --tn-hero:#FBFDF6; --tn-ftd:#23270B; --tn-ftl:#FBFDF6;
}
body.tone-sky{
    --tn:#009CDE; --tn-deep:#0082BC; --tn-lite:#7FCCF0;
    --tn-hero:#F2FAFE; --tn-ftd:#041119; --tn-ftl:#F2FAFE;
}
body.tone-gray{
    --tn:#63849A; --tn-deep:#4C6674; --tn-lite:#ACBECC;
    --tn-hero:#F7FAFB; --tn-ftd:#1E2A2F; --tn-ftl:#F7FAFB;
}

/* ---------- 바깥 판 ---------- */
:root,
body{
    --fr:      #00CBB6;
    --fr-deep: #00A896;
    --fr-lite: #66D3C6;
    --fr-ftd:  #062522;
    --fr-ftl:  #F4FBFA;
}
body.frame-orange{
    --fr:#FF5900; --fr-deep:#D94D08; --fr-lite:#EB946F;
    --fr-ftd:#2B1208; --fr-ftl:#FCF7F4;
}
body.frame-lime{
    --fr:#C2E86D; --fr-deep:#7E9433; --fr-lite:#D1E89F;
    --fr-ftd:#23270B; --fr-ftl:#FBFDF6;
}
body.frame-sky{
    --fr:#009CDE; --fr-deep:#0082BC; --fr-lite:#7FCCF0;
    --fr-ftd:#041119; --fr-ftl:#F2FAFE;
}
body.frame-gray{
    --fr:#63849A; --fr-deep:#4C6674; --fr-lite:#ACBECC;
    --fr-ftd:#1E2A2F; --fr-ftl:#F7FAFB;
}

/* ================================================================
   금색 · 본문 전용                                  2026-08-14 신규
   ----------------------------------------------------------------
   색채계획 확정서 7절 전문. 영문(en_style.css)과 같은 값이다.

   쓰는 곳    본문 안의 큰 숫자 · 강조 문구 · 강조 단추 · 구분선
   쓰지 않는 곳 헤더 (절대) · 푸터 (절대) · 목록 · 표 · 게시판

   ★ 화면 하나에 금색은 1~2곳까지. 남발하면 싸구려로 보인다.

   이름표
     gold           글씨 · 숫자 · 선   (일렁임 자동)
     gold-btn       채운 단추          (일렁임 자동)
     gold-btn-line  테두리 단추        (일렁임 자동)
     gold-flat      위에 덧붙이면 일렁임만 꺼짐 (단색 #D2AD54)
   ================================================================ */

/* ---------- 금색 글씨 · 숫자 · 선 — 어두운 판 ---------- */
.gold{
    background-color:#D2A32B;
    background-image:
        linear-gradient(100deg,rgba(255,247,214,0) 0%,rgba(255,247,214,.85) 18%,
                        rgba(255,247,214,0) 36%,rgba(255,247,214,0) 100%),
        linear-gradient(76deg,rgba(255,252,235,0) 0%,rgba(255,252,235,.50) 24%,
                        rgba(255,252,235,0) 48%,rgba(255,252,235,0) 100%),
        linear-gradient(116deg,rgba(96,62,8,0) 0%,rgba(96,62,8,.55) 20%,
                        rgba(96,62,8,0) 40%,rgba(96,62,8,0) 100%);
    background-size:230px 100%,150px 100%,300px 100%;
    background-repeat:repeat;
    animation:goldWave 10s linear infinite;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
@keyframes goldWave{
    from{ background-position:0 0,0 0,0 0; }
    to  { background-position:230px 0,-300px 0,300px 0; }
}

/* 밝은 판 안에서는 값이 저절로 바뀐다 */
.ft-light .gold,
.is-light .gold{
    background-color:#A8811F;
    background-image:
        linear-gradient(100deg,rgba(255,242,196,0) 0%,rgba(255,242,196,.72) 18%,
                        rgba(255,242,196,0) 36%,rgba(255,242,196,0) 100%),
        linear-gradient(76deg,rgba(255,248,214,0) 0%,rgba(255,248,214,.42) 24%,
                        rgba(255,248,214,0) 48%,rgba(255,248,214,0) 100%),
        linear-gradient(116deg,rgba(58,36,4,0) 0%,rgba(58,36,4,.50) 20%,
                        rgba(58,36,4,0) 40%,rgba(58,36,4,0) 100%);
}

/* 광택 끄기 */
.gold-flat{
    background:none;
    color:#D2AD54;
    animation:none;
}

/* ---------- 금색 채운 단추 — 어두운 판 ---------- */
.gold-btn{
    display:inline-block;
    border:0;
    border-radius:5px;
    padding:14px 20px;
    font-size:12px;
    font-weight:600;
    text-align:center;
    color:#FBF2D6;
    box-shadow:inset 0 1px 0 rgba(255,242,196,.8),
               inset 0 -1px 0 rgba(50,32,4,.5);
    background-image:
        linear-gradient(100deg,rgba(255,246,214,0) 0%,rgba(255,246,214,.30) 25%,
                        rgba(255,246,214,0) 55%,rgba(255,246,214,0) 100%),
        linear-gradient(72deg,rgba(255,252,235,0) 0%,rgba(255,252,235,.20) 30%,
                        rgba(255,252,235,0) 62%,rgba(255,252,235,0) 100%),
        linear-gradient(118deg,rgba(70,46,6,0) 0%,rgba(70,46,6,.22) 28%,
                        rgba(70,46,6,0) 58%,rgba(70,46,6,0) 100%),
        linear-gradient(180deg,#C69A28 0%,#B4871A 45%,
                        #A0761A 80%,#B08423 100%);
    background-size:340px 100%,220px 100%,420px 100%,100% 100%;
    background-repeat:repeat;
    animation:goldBtn 12s linear infinite;
}
@keyframes goldBtn{
    from{ background-position:0 0,0 0,0 0,0 0; }
    to  { background-position:340px 0,-440px 0,420px 0,0 0; }
}

/* 밝은 판 */
.ft-light .gold-btn,
.is-light .gold-btn{
    background-image:
        linear-gradient(100deg,rgba(255,244,206,0) 0%,rgba(255,244,206,.28) 25%,
                        rgba(255,244,206,0) 55%,rgba(255,244,206,0) 100%),
        linear-gradient(72deg,rgba(255,250,226,0) 0%,rgba(255,250,226,.18) 30%,
                        rgba(255,250,226,0) 62%,rgba(255,250,226,0) 100%),
        linear-gradient(118deg,rgba(56,36,4,0) 0%,rgba(56,36,4,.22) 28%,
                        rgba(56,36,4,0) 58%,rgba(56,36,4,0) 100%),
        linear-gradient(180deg,#B88C20 0%,#A2761A 45%,
                        #8E6716 80%,#9E7420 100%);
}

/* ---------- 금색 테두리 단추 — 테두리 자체가 일렁인다 ---------- */
/* 안쪽을 판 바탕색으로 덮는다. 사진 위에서는 .gold-btn 을 쓸 것 */
.gold-btn-line{
    display:inline-block;
    border:1px solid transparent;
    border-radius:5px;
    padding:14px 20px;
    font-size:12px;
    font-weight:600;
    text-align:center;
    background-image:
        linear-gradient(var(--tn-hero),var(--tn-hero)),
        linear-gradient(100deg,rgba(255,246,214,0) 0%,rgba(255,246,214,.60) 25%,
                        rgba(255,246,214,0) 55%,rgba(255,246,214,0) 100%),
        linear-gradient(72deg,rgba(255,252,235,0) 0%,rgba(255,252,235,.40) 30%,
                        rgba(255,252,235,0) 62%,rgba(255,252,235,0) 100%),
        linear-gradient(118deg,rgba(70,46,6,0) 0%,rgba(70,46,6,.35) 28%,
                        rgba(70,46,6,0) 58%,rgba(70,46,6,0) 100%),
        linear-gradient(180deg,#D2A32B 0%,#B4871A 55%,#A0761A 100%);
    background-size:100% 100%,340px 100%,220px 100%,420px 100%,100% 100%;
    background-repeat:repeat;
    background-origin:border-box;
    background-clip:padding-box,border-box,border-box,border-box,border-box;
    animation:goldLine 12s linear infinite;
}
@keyframes goldLine{
    from{ background-position:0 0,0 0,0 0,0 0,0 0; }
    to  { background-position:0 0,340px 0,-440px 0,420px 0,0 0; }
}

/* ---------- 움직임 줄이기 대응 ---------- */
@media (prefers-reduced-motion: reduce){
    .gold,
    .gold-btn,
    .gold-btn-line{ animation:none; }
}