@charset "UTF-8";

.eyebrow{font-size:var(--fs-label-sub);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:20px;display:inline-flex;align-items:center;gap:8px;}.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;background:currentColor;border-radius:2px;}
.eyebrow.cold{color:#0891b2;}.eyebrow.cyan{color:var(--main-color-cold);}
h2.stitle{font-size:54px;font-weight:700;line-height:1.18;letter-spacing:-0.03em;margin-bottom:20px;word-break:keep-all;overflow-wrap:break-word;}
h2.stitle.dark{color:#fff;}
.slead{font-size:1.25rem;font-weight:400;line-height:1.75;max-width:800px;width:100%;word-break:keep-all;text-wrap:balance;}
.slead.light{color:#4a5560;}.slead.dark{color:#8B9CA8;}
.fu{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
.fu.vis{opacity:1;transform:none;}
.d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}.d4{transition-delay:.32s;}.d5{transition-delay:.40s;}

.c_sub_section .sec-btns button { max-width:220px; }
.sec-hero-stats { min-width:452px;}
.c_title_area .sub_label { color: #0891b2;}
.sec-stat-num small img {max-height:2.5rem;}

/* frost particles */
.frost{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.frost span{position:absolute;width:3px;height:3px;background:rgba(34,211,238,.5);border-radius:50%;animation:fall linear infinite;}
@keyframes fall{0%{transform:translateY(-10px);opacity:0;}15%{opacity:.7;}100%{transform:translateY(100vh);opacity:0;}}
.h-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(8,145,178,.18);border:1px solid rgba(34,211,238,.32);border-radius:100px;padding:7px 16px;font-size:12px;font-weight:700;color:var(--main-color-cold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px;backdrop-filter:blur(4px);}
.h-dot{width:5px;height:5px;background:var(--main-color-cold);border-radius:50%;box-shadow:0 0 7px var(--main-color-cold);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.h-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.btn-p{display:inline-flex;align-items:center;gap:8px;background:#0891b2;color:#fff;font-size:15px;font-weight:700;padding:14px 28px;border-radius:10px;text-decoration:none;transition:all .3s;box-shadow:0 4px 20px rgba(8,145,178,.35);}
.btn-p:hover{background:#0e7490;transform:translateY(-3px);box-shadow:0 16px 32px rgba(8,145,178,.5);}
.btn-g{display:inline-flex;align-items:center;gap:10px;background:transparent;color:rgba(255,255,255,0.65);font-size:15px;font-weight:600;padding:15px 32px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.16);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.btn-g:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);}

.pain{background:#fff;}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
@media(max-width:768px){.pain-grid{grid-template-columns:1fr;}}
.pain-card{background:#F2F8FA;border:1.5px solid #DCE8EC;border-radius:20px;padding:36px 28px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.pain-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0891b2,var(--main-color-cold));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}.pain-card:hover::before{transform:scaleX(1);}
.pain-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.07);}
.pain-emoji{font-size:26px;margin-bottom:14px;}
.pain-emoji img {max-height:5rem;}
.pain-card h3{font-size:var(--fs-label-sub);font-weight:700;color:#0891b2;margin-bottom:12px;line-height:1.35;word-break:keep-all;}
.pain-card p{font-size:var(--fs-desc-sub);color:#4a5560;line-height:1.7;word-break:keep-all;}

/* ZONES */
.zones{background:#06121A;position:relative;overflow:hidden;}
.zones::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(8,145,178,.1) 0%,transparent 70%);pointer-events:none;}
.zones-header{text-align:center;margin-bottom:60px;}
.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 auto;}
@media(max-width:768px){.zone-grid{grid-template-columns:1fr;}}
.zone-card{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 26px;text-align:center;transition:all .35s;position:relative;overflow:hidden;}
.zone-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.zone-card.frozen::before{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
.zone-card.chilled::before{background:linear-gradient(90deg,#06b6d4,#22d3ee);}
.zone-card.fresh::before{background:linear-gradient(90deg,#10b981,#34d399);}
.zone-card.ambient::before{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.zone-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);}
.zone-header{display:flex;align-items:center;gap:20px;margin-bottom:2rem;}
.zone-icon{filter:drop-shadow(0 0 14px rgba(34,211,238,0.35));flex-shrink:0;}
.zone-icon img {max-height:4rem;}
.zone-info{display:flex;flex:1;flex-direction:column;text-align:left;}
.zone-name{font-size:var(--fs-label);font-weight:700;color:#fff;margin-bottom:4px;}
.zone-manage{font-size:var(--fs-desc-sub);font-weight:600;color:var(--main-color-cold);letter-spacing:.04em;}
.zone-items{font-size:var(--fs-desc-sub);color:#8B9CA8;line-height:1.75;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);word-break:keep-all;}

.zones .tag_group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zones .tag_group span {
    padding: 4px 12px;
    font-size: 14px;
    color: #00F2FF;
    background: rgba(0, 242, 255, 0.05);
    border: 1px solid rgba(0, 242, 255, 0.1);
    border-radius: 100px;
}

.zones-caption{margin-top:52px;text-align:center;font-size:var(--fs-label);font-weight:700;color:#fff;line-height:1.7;word-break:keep-all;}
.zones-caption span{color:var(--main-color-cold);}

/* MONITOR */
.monitor{background:#fff;}
.mon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
@media(max-width:768px){.mon-grid{grid-template-columns:1fr;}}
.mon-card{text-align:center;border:1.5px solid #DCE8EC;border-radius:20px;padding:36px 28px;background:linear-gradient(160deg,#f8fdfe,#eef8fa);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.mon-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0891b2,var(--main-color-cold));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}.mon-card:hover::before{transform:scaleX(1);}
.mon-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(8,145,178,.08);border-color:#0891b2;}
.mon-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 26px auto;}
.mon-icon img {max-height:5rem;}
.mon-card h3{font-size:var(--fs-label-sub);font-weight:800;color:#1a1f2e;margin-bottom:12px;word-break:keep-all;}
.mon-card .desc{font-size:var(--fs-desc-sub);color:#4a5560;line-height:1.65;margin-bottom:14px;}
.mon-card .benefit{font-size:var(--fs-desc);color:#0891b2;font-weight:600;line-height:1.6;padding-top:12px;border-top:1px solid #DCE8EC;}
.monitor .mon-img {padding:5rem 0;text-align:center;}
.monitor .mon-img .mon-img-inner {
    position: relative;
    line-height:0;
    padding: 3rem;
}
.monitor .mon-img .mon-img-inner::before,
.monitor .mon-img .mon-img-inner::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: transparent;
    pointer-events: none;
}
/* 좌상단 ㄱ자 */
.monitor .mon-img .mon-img-inner::before {
    top: 0;
    left: 0;
    border-top: 4px solid #3ba3fd;
    border-left: 4px solid #3ba3fd;
}
/* 우하단 ㄱ자 (180도 회전) */
.monitor .mon-img .mon-img-inner::after {
    bottom: 0;
    right: 0;
    border-bottom: 4px solid #3ba3fd;
    border-right: 4px solid #3ba3fd;
}
.monitor .mon-img img {width:100%;max-width:100%;}
.monitor .cm-guide-label {
    bottom: 68px;
    right: 68px;
}
@media(max-width:768px){
    .monitor .mon-img {
        padding: 3rem 0;
    }
    .monitor .mon-img .mon-img-inner {
        padding: 1rem;
    }
    .monitor .mon-img .mon-img-inner::before,
    .monitor .mon-img .mon-img-inner::after {
        width: 30px;
        height: 30px;
    }
    .monitor .cm-guide-label {
        bottom: 30px;
        right: 30px;
    }
}

/* ── FSSC 22000 TECH SECTION ── */
.fssc{background:#0a1620;position:relative;overflow:hidden;}
.fssc::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(8,145,178,.1) 0%,transparent 65%);pointer-events:none;}
.fssc-header{text-align:center;margin-bottom:64px;position:relative;z-index:1;}
.fssc-kv{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:72px;position:relative;z-index:1;}
@media(max-width:768px){.fssc-kv{grid-template-columns:1fr;gap:36px;}}
.fssc-kv-text p{font-size:var(--fs-desc-sub);color:#8B9CA8;line-height:1.85;margin-top:14px;}
.fssc-kv-badge{background:linear-gradient(160deg, #062052, #08308d);border:1px solid rgba(34,211,238,.2);border-radius:24px;padding:44px 36px;text-align:center;position:relative;overflow:hidden;}
.fssc-kv-badge::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:280px;height:280px;background:radial-gradient(circle,rgba(34,211,238,.12) 0%,transparent 70%);pointer-events:none;}
.fssc-badge-logo{width:180px;height:180px;margin:0 auto 24px;display:block;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px rgba(34,211,238,.4),0 0 32px rgba(34,211,238,.2);}
.fssc-badge-name{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:.04em;}
.fssc-badge-sub{color:rgba(255,255,255,.7);margin-bottom:20px;line-height:1.5;}
.fssc-badge-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.fssc-badge-tag{font-size:0.938rem;font-weight:500;padding:4px 12px;border-radius:100px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);color:var(--main-color-cold);letter-spacing:.04em;}
.fssc-reqs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;position:relative;z-index:1;}
@media(max-width:640px){.fssc-reqs{grid-template-columns:1fr;}}
.fssc-req{border-radius:16px;padding:28px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,.03);transition:all .3s;}
.fssc-req:hover{border-color:rgba(34,211,238,.3);transform:translateY(-3px);background:rgba(8,145,178,.06);}
.fssc-req-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.fssc-req-icon{width:44px;height:44px;border-radius:12px;background:rgba(8,145,178,.15);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
.fssc-req-icon img {max-height:2rem;}
.fssc-req-head h3{font-size:var(--fs-label-sub);font-weight:700;color:#fff;line-height:1.3;}
.fssc-req-body{font-size:var(--fs-desc-sub);color:#8B9CA8;line-height:1.7;margin-bottom:14px;}
.fssc-req-wekeep{font-size:var(--fs-desc-sub);font-weight:600;color:var(--main-color-cold);line-height:1.6;padding-top:12px;border-top:1px solid rgba(255,255,255,0.07);}
.fssc-req-wekeep::before{content:'위킵 적용 ';font-weight:800;color:var(--main-color-cold);}
.fssc-award{margin-top:52px;background:rgba(255,255,255,.03);border:1px solid rgba(34,211,238,.18);border-radius:20px;padding:44px 48px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;position:relative;z-index:1;}
@media(max-width:640px){.fssc-award{grid-template-columns:1fr;text-align:center;padding:32px 24px;}}
.fssc-award-icon{font-size:56px;}
.fssc-award-icon img {max-height:5rem;vertical-align: middle;}
.fssc-award-text h3{font-size:var(--fs-label-sub);font-weight:800;color:#fff;margin-bottom:8px;}
.fssc-award-text p{font-size:var(--fs-desc-sub);color:rgba(255,255,255,.7);line-height:1.7;}

/* CERT */
.cert{background:#F5F7FB;}
.cert-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;}
@media(max-width:768px){.cert-inner{grid-template-columns:1fr;gap:1rem;}}
.cert-badges{display:flex;flex-direction:column;gap:16px;}
.cert-badge{background:rgba(8,145,178,.8);border:1px solid rgba(8,145,178,.4);border-radius:16px;padding:26px 28px;display:flex;align-items:center;gap:18px;transition:all .3s;}
.cert-badge:hover{border-color:rgba(34,211,238,.3);background:rgba(8,145,178,1);}
.cert-badge-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.cert-badge-icon img {width:50px;height:50px;}
.cert-badge-text h4{font-size:var(--fs-label-sub);font-weight:800;color:#fff;margin-bottom:6px;}
.cert-badge-text .org{color:#f0c075;font-weight:600;margin-bottom:6px;}
.cert-badge-text p{font-size:var(--fs-desc-sub);color:#fff;line-height:1.6;word-break:keep-all;}

/* SERVICE LINK */
.svclink{background:#fff;}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{text-align:center;border-radius:20px;padding:44px 36px;text-decoration:none;color:inherit;transition:all .35s;position:relative;overflow:hidden;border:1px solid #DCE8EC;}
.svc-card.fresh{background:linear-gradient(150deg,#ecfdf5,#d1fae5);}
.svc-card.health{background:linear-gradient(150deg,#eff6ff,#dbeafe);}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.08);}
.svc-icon{font-size:44px;margin-bottom:18px;}
.svc-icon img {max-height:4rem;}
.svc-card h3{font-size:var(--fs-label-sub);font-weight:700;color:#1a1f2e;margin-bottom:10px;}
.svc-card p{font-size:var(--fs-desc-sub);color:#555;line-height:1.6;margin-bottom:20px;}
.svc-arrow{font-size:var(--fs-desc-sub);font-weight:700;color:#0891b2;}
.svc-card.health .svc-arrow{color:var(--main-color);}

/* OS POS */
.ospos{background:#06121A;}
.ospos-diagram{display:flex;flex-direction:column;gap:8px;margin-top:48px;max-width:1000px;margin-left:auto;margin-right:auto;}
.os-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:2rem;display:flex;align-items:center;gap:14px;transition:all .25s;}
.os-row:hover{background:rgba(255,255,255,.07);}
.os-row.hl{background:rgba(8,145,178,.3);border-color:rgba(34,211,238,.3);}
.os-row-icon{font-size:18px;width:50px;text-align:center;flex-shrink:0;}
.os-row-icon img {max-width:100%;max-height:2rem;vertical-align:middle;}
.os-row-name{font-size:var(--fs-label-sub);font-weight:700;min-width:64px;flex-shrink:0;color:#fff;}
.os-row-name.acc{color:var(--main-color-cold);}
.os-sep{width:1px;height:14px;background:rgba(255,255,255,0.07);flex-shrink:0;}
.os-row-desc{color:#8B9CA8;font-size:var(--fs-desc-sub);}
.os-here{margin-left:auto;font-size:0.875rem;font-weight:700;color:var(--main-color-cold);background:rgba(8,145,178,.12);border:1px solid rgba(34,211,238,.2);padding:2px 10px;border-radius:100px;white-space:nowrap;animation: os-here-nudge 2s linear infinite;}
.ospos-caption{margin-top:32px;text-align:center;font-size:var(--fs-label);font-weight:700;color:#fff;line-height:1.7;word-break:keep-all;}

/* ── 스크롤 버튼 ── */
.scroll-btn{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.55);background:none;border:none;cursor:pointer;transition:color .25s;}
.scroll-btn:hover{color:rgba(255,255,255,.9);}
.scroll-btn-label{font-size:11px;font-weight:600;letter-spacing:.16em;}
.scroll-btn-mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.3);border-radius:14px;display:flex;justify-content:center;padding-top:7px;transition:border-color .25s;}
.scroll-btn:hover .scroll-btn-mouse{border-color:var(--main-color-cold);}
.scroll-btn-wheel{width:3px;height:8px;background:rgba(255,255,255,.7);border-radius:2px;animation:scrollWheel 1.6s ease-in-out infinite;}
@keyframes scrollWheel{0%{opacity:0;transform:translateY(-4px);}40%{opacity:1;}80%{opacity:0;transform:translateY(6px);}100%{opacity:0;}}

/* zone 카드 진입 애니메이션 초기 상태 */
.zone-card{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .55s ease,transform .55s ease,background .3s,border-color .3s;}
.zone-card:hover{transform:translateY(-6px) scale(1)!important;}

/* fssc-req 초기 숨김 */
.fssc-req{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,border-color .3s,background .3s;}
.fssc-req.vis{opacity:1;transform:none;}

/* mon-card 호버 강화 */
.mon-card{transition:transform .35s,box-shadow .35s,border-color .35s;}
.mon-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(8,145,178,.12);border-color:#0891b2;}

/* cert-badge 호버 */
.cert-badge{transition:border-color .3s,background .3s,transform .3s;}
.cert-badge:hover{transform:translateX(4px);}

/* svc-card 호버 강화 */
.svc-card{transition:transform .35s,box-shadow .35s;}
.svc-card:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(0,0,0,.1);}

/* pain-card 호버 */
.pain-card{text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s;}
.pain-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(8,145,178,0.18);border-color:rgba(8,145,178,0.3);}

/* os-row 호버 */
.os-row{transition:background .25s,border-color .25s,transform .25s;}
.os-row:hover{transform:translateX(6px);}

/* btn-g 호버 */
.btn-g{transition:all .3s;}
.btn-g:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35);transform:translateY(-2px);}

/* fssc-award 호버 */
.fssc-award{background: linear-gradient(160deg, #062052, #08308d);transition:border-color .3s,box-shadow .3s;}
.fssc-award:hover{border-color:rgba(34,211,238,.4);box-shadow:0 0 40px rgba(34,211,238,.08);}

/* ===== 위킵 반응형 타이포그래피 ===== */
@media(max-width:1024px){
    h2.stitle{font-size:44px;}
}
@media(max-width:768px){
    .sec-hero-stats {min-width:100%;}
    h2.stitle{font-size:32px;line-height:1.25;}
    .slead{font-size:16px;}
    .pain-card h3,.mon-card h3,.zone-name{font-size:18px;}
    .os-row {padding:2rem 1rem;}
    .os-row-name { min-width:50px; }
}