/* =========================================================
   TOKENS — DESIGN.md 와 1:1 대응
   ========================================================= */
:root{
  /* color */
  --c-navy:#0F4A2E; --c-navy-deep:#0A2E1D;
  --c-blue:#2A7D3A; --c-blue-tint:#EAF4E6;
  --c-ink:#121A15; --c-sub:#46534B; --c-mute:#5C6A61;
  --c-line:#E2E8E1; --c-line-strong:#CDD6CC;
  --c-soft:#F5F8F4; --c-white:#FFFFFF;
  --c-frozen:#7FB2FF; --c-chilled:#6FD3C8; --c-ambient:#F2C46D;

  /* type */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fs-display:min(84.0px,max(clamp(40px,5vw,72px),calc(72px + (100vw - 1440px) * 0.025)));
  --fs-h1:min(67.2px,max(clamp(34px,4vw,57.6px),calc(57.6px + (100vw - 1440px) * 0.02)));
  --fs-h2:min(53.7px,max(clamp(30px,3.2vw,46px),calc(46px + (100vw - 1440px) * 0.01604)));
  --fs-h3:min(39.7px,max(clamp(26px,2.36vw,34px),calc(34px + (100vw - 1440px) * 0.01188)));
  --fs-h4:min(28.0px,max(clamp(20px,1.67vw,24px),calc(24px + (100vw - 1440px) * 0.00833)));
  --fs-lead:min(25.7px,max(clamp(18px,1.53vw,22px),calc(22px + (100vw - 1440px) * 0.00771)));
  --fs-h5:min(22.2px,max(clamp(17px,1.32vw,19px),calc(19px + (100vw - 1440px) * 0.00667)));
  --fs-body:min(17px,max(clamp(15px,1.11vw,16px),calc(16px + (100vw - 1440px) * 0.00208)));
  --fs-sm:14px; --fs-xs:12px; --fs-2xs:11px;
  --ls-display:-0.045em; --ls-title:-0.035em; --ls-label:0.16em;

  /* space (8pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px; --sp-11:64px; --sp-12:80px; --sp-13:96px;

  /* rhythm */
  --sec-y:min(186.7px,max(clamp(88px,11.1vw,160px),calc(160px + (100vw - 1440px) * 0.05562)));
  --head-gap:min(93.3px,max(clamp(48px,5.56vw,80px),calc(80px + (100vw - 1440px) * 0.02771)));
  --head-inner:min(32.7px,max(clamp(20px,1.95vw,28px),calc(28px + (100vw - 1440px) * 0.00979)));

  /* layout */
  --wrap:clamp(1200px,calc(1200px + (100vw - 1440px) * 0.41667),1400px);
  --gutter:clamp(20px,5vw,40px);
  --col-gap:clamp(16px,2.2vw,32px);
  --hd-h:94px;

  /* radius */
  --r-panel:28px; --r-card:22px; --r-thumb:14px; --r-pill:999px;
  --shadow-hover:0 18px 40px rgba(18,26,21,.08);

  /* motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-inout:cubic-bezier(.6,0,.2,1);
  --dur-1:250ms; --dur-2:600ms; --dur-3:900ms;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.7;color:var(--c-ink);background:var(--c-white);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px}
section[id]{scroll-margin-top:var(--hd-h)}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec--soft{background:var(--c-soft)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type utilities — 모든 텍스트는 이 클래스 중 하나로 크기가 정해집니다 */
.t-display{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--ls-display);line-height:1.06}
.t-h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:var(--ls-title);line-height:1.1;text-wrap:pretty}
.t-h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:var(--ls-title);line-height:1.2;text-wrap:pretty}
.t-h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--ls-title);line-height:1.18;text-wrap:pretty}
.t-h4{font-size:var(--fs-h4);font-weight:800;letter-spacing:var(--ls-title);line-height:1.18;text-wrap:pretty}
.t-h5{font-size:var(--fs-h5);font-weight:800;letter-spacing:var(--ls-title);line-height:1.45;text-wrap:pretty}
.t-lead{font-size:var(--fs-lead);font-weight:700;line-height:1.75;text-wrap:pretty}
.t-body{font-size:var(--fs-body);line-height:1.7;color:var(--c-sub);text-wrap:pretty}
.t-body--loose{line-height:2.05}
.t-sm{font-size:var(--fs-sm);line-height:1.8;color:var(--c-sub);text-wrap:pretty}
.t-xs{font-size:var(--fs-xs);line-height:1.6;color:var(--c-mute);text-wrap:pretty}
.t-2xs{font-size:var(--fs-2xs);line-height:1.6;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-label);line-height:1.2;text-transform:uppercase;color:var(--c-blue)}
.eyebrow--mute{color:var(--c-mute)}
.eyebrow--light{color:rgba(255,255,255,.7)}

/* =========================================================
   COMPONENTS
   ========================================================= */
.btn-circle{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--c-line-strong);display:grid;place-items:center;color:var(--c-ink);transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.btn-circle:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.btn-circle--light{border-color:rgba(255,255,255,.45);color:#fff}
.btn-circle--light:hover{background:#fff;border-color:#fff;color:var(--c-ink)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;font-size:var(--fs-sm);font-weight:700;line-height:1.7;color:var(--c-blue);white-space:nowrap}
.link-arrow i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid currentColor;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1),color var(--dur-1)}
.link-arrow:hover i{transform:rotate(45deg);background:var(--c-blue);color:#fff}

/* section head: 모든 섹션 공통 */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-8)}
.sec-head__text{display:flex;flex-direction:column;gap:var(--head-inner);max-width:80%}
.sec-head + *{margin-top:var(--head-gap)}
.sec-head > .btn{flex:none;white-space:nowrap}

/* progress */
.track{position:relative;height:1px;background:var(--c-line-strong);flex:1}
.track span{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--c-ink);transform-origin:left;transform:scaleX(0)}
.count{display:flex;gap:6px;font-size:var(--fs-2xs);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--c-mute)}
.count b{font-weight:600;color:var(--c-ink)}

/* =========================================================
   MOTION PRIMITIVES
   ========================================================= */
.motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.motion [data-reveal].in{opacity:1;transform:none}
.ln{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln:not(:last-child){padding-right:.26em}
.ln > span{display:inline-block}
.motion .mask .ln > span{transform:translateY(105%);transition:transform var(--dur-3) var(--ease-out)}
.motion .mask .ln:nth-child(2) > span{transition-delay:.1s}
.motion .mask .ln:nth-child(3) > span{transition-delay:.2s}
.motion .mask.in .ln > span{transform:none}

/* =========================================================
   GLOBAL UI
   ========================================================= */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.progress span{display:block;height:100%;background:var(--c-blue);transform-origin:left;transform:scaleX(0)}
.to-top{position:fixed;right:var(--gutter);bottom:calc(var(--sp-7) + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;background:var(--c-ink);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-hover);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--dur-1),transform var(--dur-1)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}

/* =========================================================
   HEADER
   ========================================================= */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:#fff;border-bottom:1px solid rgba(255,255,255,.18);transition:border-color var(--dur-1),transform 400ms var(--ease-out)}
.hd.solid{background:var(--c-white);color:var(--c-ink);border-color:var(--c-line)}
.hd.hide{transform:translateY(-100%)}
.hd__in{height:var(--hd-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding-inline:var(--gutter)}
.logo{display:flex;align-items:center;gap:var(--sp-3);min-height:44px}
.logo__mark{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--c-navy);display:grid;place-items:center}
.hd.solid .logo__mark{background:var(--c-navy);color:#fff}
.logo__txt b{display:block;font-size:17px;font-weight:800;line-height:1}
.logo__txt small{display:block;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;line-height:1;margin-top:var(--sp-1);opacity:.85}
.gnb{display:flex;gap:clamp(28px,3vw,44px);font-size:var(--fs-body);font-weight:600}
.gnb a{position:relative;padding-block:var(--sp-2);opacity:.85;transition:opacity var(--dur-1)}
.gnb a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-1) var(--ease-out)}
.gnb a:hover,.gnb a.active{opacity:1}
.gnb a:hover::after,.gnb a.active::after{transform:scaleX(1)}
.hd__btns{display:flex;gap:var(--sp-2)}
.hd .btn-circle{border-color:rgba(255,255,255,.45);color:inherit}
.hd.solid .btn-circle{border-color:var(--c-line)}
.hd .btn-circle:hover{background:var(--c-blue);border-color:var(--c-blue);color:#fff}

/* full menu */
#menuOpen .i-close{display:none}
#menuOpen[aria-expanded="true"] .i-menu{display:none}
#menuOpen[aria-expanded="true"] .i-close{display:block}
@keyframes menuIn{from{opacity:0;transform:translateY(20px)}}

.hero__pause::after{content:"";position:absolute;inset:-8px}

/* search */
.search{position:fixed;inset:0;z-index:45;background:rgba(10,46,29,.5);display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--hd-h) + var(--sp-4) + env(safe-area-inset-top,0px)) var(--gutter) var(--sp-8)}
.search__box{width:100%;max-width:720px;background:var(--c-white);border-radius:var(--r-card);box-shadow:var(--shadow-hover);overflow:hidden}
.motion .search:not([hidden]) .search__box{animation:menuIn var(--dur-2) var(--ease-out) both}
.search__field{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);border-bottom:1px solid var(--c-line)}
.search__field > svg{flex:none;color:var(--c-mute)}
#searchClose{color:var(--c-ink);border-color:var(--c-line)}
#searchOpen .i-close{display:none}
#searchOpen[aria-expanded="true"] .i-search{display:none}
#searchOpen[aria-expanded="true"] .i-close{display:block}
.search__field input{flex:1;min-width:0;height:48px;border:0;outline:0;font:inherit;font-size:var(--fs-h5);font-weight:600;color:var(--c-ink);background:none}
.search__field input::placeholder{color:var(--c-mute);font-weight:400}
.search__field input::-webkit-search-cancel-button,.search__field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search__list{max-height:min(420px,60svh);overflow:auto;padding:var(--sp-2)}
.search__list a{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-thumb)}
.search__list a:hover,.search__list a:focus-visible{background:var(--c-soft)}
.search__list b{font-size:var(--fs-body);font-weight:700}
.search__list mark{background:var(--c-blue-tint);color:var(--c-blue);border-radius:3px}
.search__empty,.search__hint{padding:var(--sp-5) var(--sp-4)}
.search__hint{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--sp-7) + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--c-ink);color:#fff;font-size:var(--fs-sm);font-weight:600;padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill);transition:opacity var(--dur-1),transform var(--dur-1) var(--ease-out);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   1. HERO
   ========================================================= */
.hero-track{position:relative;height:260svh;background:var(--c-white)}
.hero{position:sticky;top:0;height:100svh;min-height:560px;background:var(--c-navy);color:#fff;overflow:hidden}
.hero.scrub .slide{opacity:1;visibility:visible;transition:none}
.hero.scrub .slide__bg{transition:none;will-change:transform}
.hero.scrub .s2{clip-path:inset(100% 0 0 0);will-change:clip-path}
.hero.scrub .hero__copy{will-change:transform,opacity}
.hero-track.static{height:auto}
.hero-track.static .hero{position:relative;height:clamp(600px,94svh,960px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--dur-3) ease,visibility 0s var(--dur-3)}
.slide.on{opacity:1;visibility:visible;transition:opacity var(--dur-3) ease}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.08);transition:transform 7s linear}
.slide.on .slide__bg{transform:scale(1)}
.slide__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,46,29,.72) 0%,rgba(10,46,29,.25) 60%,rgba(10,46,29,.1) 100%)}
/* 사진이 들어간 슬라이드: 글자 영역(좌하단)을 더 어둡게 */
.slide__bg.has-photo::after{background:linear-gradient(0deg,rgba(10,46,29,.9) 0%,rgba(10,46,29,.55) 38%,rgba(10,46,29,.15) 70%,rgba(10,46,29,.35) 100%),linear-gradient(90deg,rgba(10,46,29,.6) 0%,rgba(10,46,29,0) 65%)}
.s1 .slide__bg{background-image:radial-gradient(120% 90% at 85% 20%,#5FA83B 0%,rgba(95,168,59,0) 55%),radial-gradient(90% 80% at 10% 100%,#145C36 0%,rgba(20,92,54,0) 60%),linear-gradient(160deg,#11502F 0%,#0A2E1D 100%)}
.s2 .slide__bg{background-image:radial-gradient(100% 80% at 80% 80%,#3E9E7A 0%,rgba(62,158,122,0) 55%),radial-gradient(80% 70% at 20% 10%,#1F6B3F 0%,rgba(31,107,63,0) 60%),linear-gradient(200deg,#0F4A2E 0%,#072316 100%)}
.has-photo ~ .hero__art{display:none}
.hero__art{position:absolute;right:0;top:0;width:62%;height:100%;opacity:.55;pointer-events:none}
.hero__art .route{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s var(--ease-out) .3s}
.slide.on .hero__art .route{stroke-dashoffset:0}
.hero__art .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.hero__copy{position:absolute;left:0;right:0;bottom:clamp(128px,11.8vw,170px)}
.hero__copy .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.hero__copy .eyebrow{color:rgba(255,255,255,.78);letter-spacing:.28em}
.hero__sub{font-size:var(--fs-body);letter-spacing:.18em;line-height:1.7;margin-bottom:var(--sp-1)}
.slide .hero__copy .wrap > *{opacity:0;transform:translateY(28px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.slide.on .hero__copy .wrap > *{opacity:1;transform:none}
.slide.on .hero__copy .wrap > :nth-child(2){transition-delay:.12s}
.slide.on .hero__copy .wrap > :nth-child(3){transition-delay:.24s}
.hero__ctrl{position:absolute;left:0;right:0;bottom:clamp(32px,4.2vw,60px);z-index:3}
.hero__ctrl .wrap{display:flex;align-items:center;gap:var(--sp-6)}
.hero__ctrl .btn-circle{width:48px;height:48px}
.hero__arrows{display:flex;gap:var(--sp-2)}
.hero__ctrl .track{background:rgba(255,255,255,.3);max-width:640px;margin-left:auto}
.hero__ctrl .track span{background:#fff}
.hero__ctrl .count,.hero__ctrl .count b{color:#fff}
.hero__pause{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.45);font-size:10px;display:grid;place-items:center}
.hero__scroll{position:absolute;left:50%;bottom:0;width:1px;height:48px;background:rgba(255,255,255,.2);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;inset:0;background:#fff;animation:drip 2s var(--ease-inout) infinite}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* =========================================================
   2. KEY FIGURES
   ========================================================= */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line)}
.fig{padding:var(--sp-9) var(--sp-7) var(--sp-8);border-bottom:1px solid var(--c-line);transition:background var(--dur-1)}
.fig:hover{background:var(--c-soft)}
.fig:not(:nth-child(3n)){border-right:1px solid var(--c-line)}
.fig__num{display:flex;align-items:baseline;gap:var(--sp-1);font-variant-numeric:tabular-nums}
.fig__num strong{font-size:var(--fs-display);font-weight:700;letter-spacing:var(--ls-display);line-height:1}
.fig__num em{font-style:normal;font-size:var(--fs-h4);font-weight:700}
.fig .t-sm{margin-top:var(--sp-4)}

/* 화면 고정 + 스크롤에 따라 숫자가 올라감 */
.kf-track{position:relative;height:230svh}
.kf-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:var(--hd-h)}
/* 화면 높이가 낮을수록 글자·숫자·여백이 함께 줄어들어 잘리지 않음 */
.kf-pin .t-h1{font-size:min(var(--fs-h1),6.2svh)}
.kf-pin .sec-head__text{gap:min(var(--head-inner),2.8svh)}
.kf-pin .fig{padding:min(48px,3.4svh) var(--sp-7) min(40px,2.8svh)}
.kf-pin .fig__num strong{font-size:min(var(--fs-display),7.5svh)}
.kf-pin .fig .t-sm{margin-top:min(16px,1.6svh)}
.kf-pin > .wrap{width:100%}
.kf-pin .figs{margin-top:min(var(--head-gap),5svh)}
.fig{position:relative;transition:background var(--dur-2)}
.fig__num strong{transition:color var(--dur-2)}
.fig.on{background:var(--c-soft)}
.fig.on .fig__num strong{color:var(--c-blue)}
.fig__bar{position:absolute;left:var(--sp-7);right:var(--sp-7);bottom:var(--sp-5);height:2px;background:var(--c-line);border-radius:2px;overflow:hidden}
.fig__bar i{position:absolute;inset:0;background:var(--c-blue);transform-origin:left;transform:scaleX(0)}
.kf-track.static{height:auto}
.kf-track.static .kf-pin{position:static;min-height:0;padding-block:var(--sec-y)}
.kf-track.static .fig__bar{display:none}

/* =========================================================
   3. LOGISTICS
   ========================================================= */
.temp{position:relative;overflow:hidden;border-radius:var(--r-panel);background:linear-gradient(135deg,#11502F,#0A2E1D);color:#fff;padding:clamp(28px,4.4vw,64px);display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-10);align-items:center}
.temp__route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.18}
.temp__route path{stroke-dasharray:1;stroke-dashoffset:1}
.temp__text{position:relative;display:flex;flex-direction:column;gap:var(--sp-5)}
.temp__text .t-body{color:rgba(255,255,255,.72)}
.zones{position:relative;display:grid;gap:var(--sp-3)}
.zone{display:grid;grid-template-columns:96px 1fr 132px;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-thumb);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background var(--dur-1),border-color var(--dur-1)}
.zone:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.zone__name{font-size:var(--fs-body);font-weight:700;display:flex;align-items:center;gap:var(--sp-2)}
.zone__name i{width:8px;height:8px;border-radius:50%;background:var(--z)}
.zone__meta{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.zone__meta span{font-size:var(--fs-sm);color:rgba(255,255,255,.7)}
.gauge{position:relative;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.12)}
.gauge b{position:absolute;top:0;bottom:0;left:var(--from);width:var(--w);border-radius:inherit;background:var(--z);transform-origin:left;transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0) * 150ms)}
.motion .gauge b{transform:scaleX(0)}
.motion .in .gauge b{transform:scaleX(1)}
.zone__deg{font-size:var(--fs-h4);font-weight:800;letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.gauge-scale{display:grid;grid-template-columns:96px 1fr 132px;gap:var(--sp-5);padding-inline:var(--sp-6);border-inline:1px solid transparent;font-size:var(--fs-2xs);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.gauge-scale__bar{position:relative;height:18px}
.gauge-scale__bar span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gauge-scale__bar span:first-child{transform:none}
.gauge-scale__bar span:last-child{transform:translateX(-100%)}
.gauge-scale__bar span::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;background:currentColor}
.gauge-scale__bar span:first-child::before{left:0}.gauge-scale__bar span:last-child::before{left:auto;right:0}

.cards{margin-top:var(--sp-13);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12) var(--sp-9)}
.card{position:relative;border-top:1px solid var(--c-line-strong);padding-top:var(--sp-7);display:flex;flex-direction:column}
.card__ico{width:56px;height:56px;border-radius:16px;background:var(--c-white);display:grid;place-items:center;color:var(--c-blue);margin-bottom:var(--sp-7);transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.card:hover .card__ico{background:var(--c-blue);color:#fff;transform:translateY(-4px) rotate(-6deg)}
.card .eyebrow{margin-bottom:var(--sp-3)}
.card .t-sm{margin-top:var(--sp-3)}

/* =========================================================
   4. CENTERS
   ========================================================= */
.ct-track{position:relative;height:190svh}
.ct-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:var(--hd-h)}
.ct-pin > .wrap{width:100%}
.ct{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-13);align-items:center}
.ct__side{display:flex;flex-direction:column;gap:var(--sp-10)}
.ct-bar{position:relative;height:2px;background:var(--c-line);border-radius:2px;overflow:hidden}
.ct-bar span{position:absolute;inset:0;background:var(--c-ink);transform-origin:left;transform:scaleX(0)}
.ct__nav{display:flex;align-items:center;gap:var(--sp-5)}
.ct__nav .btns{display:flex;gap:var(--sp-2)}
.dots{display:flex;gap:var(--sp-2)}
.ct__nav .btns svg,.ct__nav .btns span{transition:transform var(--dur-1)}
.dots button{display:grid;place-items:center;min-width:24px;height:44px;padding-inline:var(--sp-2)}
.dots button::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--c-line-strong);transition:width var(--dur-1) var(--ease-out),background var(--dur-1)}
.dots button.on::before{width:28px;background:var(--c-ink)}
.dots{gap:0}
.vwin{height:min(620px,calc(100svh - var(--hd-h) * 2 - 40px));min-height:360px;overflow:hidden;border-radius:var(--r-panel);position:relative;background:var(--c-navy-deep)}
.vtrack{position:absolute;inset:0}
.vitem{position:absolute;inset:0;background:var(--c-navy-deep);transform-origin:50% 0;will-change:transform;box-shadow:0 -24px 48px rgba(10,46,29,.28);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;justify-content:safe flex-end;gap:var(--sp-3);color:#fff;overflow:hidden}
.vitem::before{content:"";position:absolute;inset:0;background:var(--bg);transform:scale(1.1);transition:transform 1.4s var(--ease-out)}
.vitem.on::before{transform:scale(1)}
.vitem > *{position:relative}
.ct-track.static{height:auto}
.ct-track.static .ct-pin{position:static;height:auto;padding-block:var(--sec-y)}
.ct-track.static .vwin{height:auto;min-height:0;overflow:visible;background:none}
.ct-track.static .vtrack{position:static;display:grid;gap:var(--sp-3)}
.ct-track.static .vitem{position:relative;height:440px;border-radius:var(--r-panel);box-shadow:none}
.ct-track.static .ct__nav,.ct-track.static .ct-bar{display:none}
.vitem .t-body{color:rgba(255,255,255,.82);max-width:420px}
.vitem ul{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.vitem li{font-size:var(--fs-xs);font-weight:600;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.vitem.has-photo .vico{display:none}
.vitem .vico{position:absolute;top:clamp(28px,3.4vw,48px);right:clamp(28px,3.4vw,48px);width:clamp(56px,6vw,88px);height:auto;opacity:.9}
.vitem > *:not(.vico){transform:translateY(20px);opacity:0;transition:transform var(--dur-2) var(--ease-out) .35s,opacity var(--dur-2) .35s}
.vitem.on > *:not(.vico){transform:none;opacity:1}
.v1{--bg:radial-gradient(80% 70% at 80% 10%,#4E9A45,transparent 60%),linear-gradient(160deg,#134D2E,#082A1A)}
.v2{--bg:radial-gradient(80% 70% at 20% 10%,#2E9C8A,transparent 60%),linear-gradient(200deg,#0E4F45,#06302A)}
.v3{--bg:radial-gradient(80% 70% at 70% 20%,#7DA83A,transparent 60%),linear-gradient(170deg,#3B5A1E,#1E2F10)}

/* =========================================================
   5. PRODUCTS
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{font-size:var(--fs-sm);font-weight:600;min-height:44px;padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--c-line-strong);color:var(--c-sub);background:var(--c-white);transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.chip:hover{border-color:var(--c-ink);color:var(--c-ink)}
.chip[aria-pressed="true"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.rail{margin-top:var(--sp-7);display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding-bottom:var(--sp-1)}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail.dragging .prod{pointer-events:none}
.prod{flex:0 0 calc((100% - var(--sp-5)*3)/4);scroll-snap-align:start;background:var(--c-white);border-radius:var(--r-card);padding:var(--sp-6) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1)}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.prod.enter{animation:prodIn var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes prodIn{from{opacity:0;transform:translateX(24px)}}
.prod__top{display:flex;justify-content:space-between;align-items:center}
.prod__top .t-2xs{color:var(--c-mute)}
.tag{font-size:var(--fs-2xs);font-weight:600;color:var(--c-blue);background:var(--c-blue-tint);padding:2px var(--sp-2);border-radius:var(--r-pill)}
.prod__pic{position:relative;height:190px;margin:var(--sp-5) 0 var(--sp-6);border-radius:var(--r-thumb);display:grid;place-items:center;background:var(--tint,var(--c-soft));color:var(--ink,var(--c-navy));overflow:hidden}
.prod__pic svg,.prod__pic img{transition:transform var(--dur-2) var(--ease-out)}
.prod__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod:hover .prod__pic svg,.prod:hover .prod__pic img{transform:scale(1.08)}
.g-meat{--tint:#FCEEEC;--ink:#A8453D}
.g-sea{--tint:#E9F1FD;--ink:#2A7D3A}
.g-farm{--tint:#EAF5EE;--ink:#2E7D52}
.g-proc{--tint:#FFF3E3;--ink:#A86A12}
.g-cafe{--tint:#F5EEE8;--ink:#855638}
.g-supply{--tint:#EEF1F5;--ink:#46534B}
.prod .t-xs{margin-top:var(--sp-2)}
.rail-ctrl{margin-top:var(--sp-9);display:flex;align-items:center;gap:var(--sp-6)}
.rail-ctrl .btns{display:flex;gap:var(--sp-2)}

/* =========================================================
   6. INTEGRITY
   ========================================================= */
.ig{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-13);align-items:start}
.ig__title{display:flex;flex-direction:column;gap:var(--head-inner);position:sticky;top:calc(var(--hd-h) + var(--sp-8))}
.ig__body{display:flex;flex-direction:column;gap:var(--sp-7)}
.words .w{color:#A9B3C4;transition:color .3s}
.words .w.on{color:var(--c-ink)}
.pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
.pledge li{padding-top:var(--sp-5);border-top:2px solid var(--c-ink);display:flex;flex-direction:column;gap:var(--sp-1)}
.pledge b{font-size:var(--fs-body);font-weight:800}
.pledge span{font-size:var(--fs-sm);line-height:1.7;color:var(--c-sub)}
.ig__body .link-arrow{margin-top:var(--sp-4);align-self:flex-start}

/* =========================================================
   7. NEWS
   ========================================================= */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.news a{--pad-y:var(--sp-7);--pad-x:var(--sp-6);background:var(--c-white);border-radius:var(--r-card);padding:var(--pad-y) var(--pad-x);overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-4);min-height:236px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1)}
.news__thumb{aspect-ratio:16/9;max-width:none;margin:calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) var(--sp-2);background:var(--c-soft) center/cover no-repeat;overflow:hidden}
.news__thumb[hidden]{display:none}
.news a:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.news__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.news__foot i{font-style:normal;color:var(--c-blue);transition:transform var(--dur-1) var(--ease-out)}
.news a:hover .news__foot i{transform:translate(4px,-4px)}

/* =========================================================
   8. FOOTER
   ========================================================= */
.ft{background:var(--c-navy-deep);color:rgba(255,255,255,.7);padding-bottom:calc(var(--sp-10) + env(safe-area-inset-bottom,0px))}
.marquee{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12);padding-block:var(--sp-7)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-size:var(--fs-h1);font-weight:800;letter-spacing:var(--ls-title);line-height:1.1;color:rgba(255,255,255,.14);padding-right:.2em;white-space:nowrap}
.marquee span b{color:rgba(255,255,255,.9);font-weight:800}
@keyframes marquee{to{transform:translateX(-50%)}}
.ft__top{display:flex;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;padding-block:var(--sp-12) var(--sp-10);border-bottom:1px solid rgba(255,255,255,.12)}
.ft__brand{display:flex;flex-direction:column;gap:var(--sp-7)}
.ft .logo{color:#fff}
.ft .logo__mark{background:#fff;color:var(--c-navy)}
.ft__brand .t-h3{color:#fff}
.ft__cols{display:grid;grid-template-columns:repeat(3,auto);gap:var(--sp-12);font-size:var(--fs-sm)}
.ft__cols .eyebrow{color:rgba(255,255,255,.45);margin-bottom:var(--sp-4)}
.ft__cols a{display:flex;align-items:center;min-height:44px;line-height:1.4;transition:color var(--dur-1)}
.ft__cols a:hover{color:#fff}
.ft__info{margin-top:var(--sp-8);font-size:var(--fs-xs);line-height:2;display:flex;flex-wrap:wrap;gap:0 var(--sp-6)}
.ft__copy{margin-top:var(--sp-5);font-size:var(--fs-xs);color:rgba(255,255,255,.4)}

/* =========================================================
   RESPONSIVE — lg 1279 / md 1023 / sm 767
   ========================================================= */
@media (max-width:1279px){
  .prod{flex-basis:calc((100% - var(--sp-5)*2)/3)}
}
@media (max-width:1023px){
  .gnb{display:none}
  .temp,.ct,.ig{grid-template-columns:1fr;gap:var(--sp-9)}
  .ct__side,.ig__title{position:static}
  .ct__side{gap:var(--sp-8)}
  .ct{gap:var(--sp-7)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero__scroll{height:24px}
}
/* 태블릿(1단 배치): 물류센터 고정 블록이 화면 안에 들어가게 카드 창 높이에서 위 제목 몫을 뺌 */
@media (min-width:768px) and (max-width:1023px){
  .vwin{height:clamp(320px,calc(100svh - var(--hd-h) * 2 - 380px),620px);min-height:0}
}
/* 1024~1279: 온도 게이지 칸이 너무 좁아지지 않게 */
@media (min-width:1024px) and (max-width:1279px){
  .zone,.gauge-scale{grid-template-columns:72px 1fr 116px;gap:var(--sp-4)}
}
@media (max-width:767px){
  :root{--hd-h:68px;--sec-y:64px;--head-gap:32px;--head-inner:14px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .sec-head__text{max-width:none}
  .hero__art{width:100%;opacity:.3}
  .hero__ctrl .track{display:none}
  .hero__ctrl .count{margin-left:auto}
  .figs{grid-template-columns:repeat(3,1fr)}
  .fig{padding:var(--sp-5) var(--sp-2) var(--sp-4)}
  .zone{grid-template-columns:1fr auto;padding:var(--sp-4)}
  .gauge-scale{grid-template-columns:1fr}
  .gauge-scale > i{display:none}
  .zone__meta{grid-column:1/-1;grid-row:2}
  .gauge-scale{padding-inline:var(--sp-4);margin-top:var(--sp-2)}
  .cards{grid-template-columns:1fr;gap:var(--sp-9);margin-top:var(--sp-11)}
  .prod{flex-basis:78%}
  .rail-ctrl .track{display:none}
  .rail-ctrl .btns{margin-left:auto}
  .pledge,.news{grid-template-columns:1fr}
  .news a{min-height:0}
  .ft__cols{grid-template-columns:repeat(2,1fr);gap:var(--sp-7)}
}
@media (max-width:767px){
  /* 헤더·히어로 */
  .logo__txt b{font-size:15px}
  .hd__btns .btn-circle{width:44px;height:44px}
  .hero-track{height:220svh}
  .hero{min-height:520px}
  .hero__copy{bottom:108px}
  .hero__copy .wrap{gap:var(--sp-3)}
  .hero__sub{letter-spacing:.08em}
  .hero__ctrl .btn-circle{width:44px;height:44px}
  .hero__scroll{display:none}
  /* 지표 */
  .fig__num strong{font-size:28px;letter-spacing:-.04em}
  .fig__num em{font-size:var(--fs-sm)}
  .kf-track{height:210svh}
  .kf-pin{padding-block:var(--hd-h)}
  .kf-pin .fig{padding:var(--sp-4) var(--sp-2)}
  .kf-pin .fig__num strong{font-size:min(28px,3.6svh)}
  .fig__bar{left:var(--sp-2);right:var(--sp-2);bottom:var(--sp-2)}
  .fig .t-sm{font-size:var(--fs-xs);line-height:1.5}
  .fig .t-sm{margin-top:var(--sp-2)}
  /* 물류 패널: 온도대 설명 문구 숨기고 이름·온도·게이지만 */
  .temp{gap:var(--sp-7)}
  .temp__text{gap:var(--sp-3)}
  .zones{gap:var(--sp-2)}
  .zone{row-gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}
  .zone__meta span{display:none}
  .zone__deg{font-size:var(--fs-h5)}
  /* 서비스 카드: 가로 스크롤 카드 */
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:var(--sp-9) calc(var(--gutter) * -1) 0;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:var(--sp-3)}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 72%;scroll-snap-align:start;background:var(--c-white);border-top:0;border-radius:var(--r-card);padding:var(--sp-6) var(--sp-5)}
  .card__ico{width:44px;height:44px;border-radius:12px;background:var(--c-soft);margin-bottom:var(--sp-5)}
  .card .eyebrow{margin-bottom:var(--sp-2)}
  /* 물류센터: 좌우 스와이프에 맞춰 화살표를 좌우로 */
  .ct__nav{justify-content:space-between}
  .ct-track{height:175svh}
  .ct-pin{padding-block:var(--hd-h)}
  .ct__side .t-body{display:none}
  .vwin{height:max(280px,calc(100svh - var(--hd-h) * 2 - 250px));min-height:0}
  .ct__side{gap:var(--sp-5)}
  .vitem .t-body{font-size:var(--fs-sm)}
  .vitem ul{gap:6px}
  /* 품목: 칩 한 줄 가로 스크롤, 레일은 화면 끝까지 */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .chips::-webkit-scrollbar{display:none}
  .chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .chip{flex:none}
  .rail{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:var(--sp-3)}
  .prod{flex-basis:72%}
  .prod__pic{height:120px;margin:var(--sp-3) 0 var(--sp-4)}
  .prod{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
  .rail{margin-top:var(--sp-4)}
  .rail-ctrl{margin-top:var(--sp-5)}
  /* 정도경영 */
  .pledge{gap:0;margin-top:0}
  .ig{gap:var(--sp-6)}
  .ig__body{gap:var(--sp-5)}
  .ig__body .t-body--loose{line-height:1.8;font-size:var(--fs-sm)}
  .ig__body .link-arrow{margin-top:0}
  .pledge li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--sp-4);padding-block:var(--sp-4);border-top-width:1px}
  .pledge li:first-child{border-top-width:2px}
  /* 뉴스: 가로 스크롤 카드 */
  .news{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:var(--sp-3)}
  .news::-webkit-scrollbar{display:none}
  .news a{--pad-y:var(--sp-6);--pad-x:var(--sp-5);flex:0 0 82%;scroll-snap-align:start;min-height:0;gap:var(--sp-3)}
  .news__foot{padding-top:var(--sp-4)}
  /* 푸터·메뉴 */
  .marquee{padding-block:var(--sp-4)}
  .marquee span{font-size:var(--fs-h3)}
  .ft__top{padding-block:var(--sp-9) var(--sp-7);gap:var(--sp-7)}
  .ft__brand{gap:var(--sp-5)}
  .ft__brand .t-h3{font-size:var(--fs-h4)}
  .ft__cols{grid-template-columns:repeat(3,1fr);gap:var(--sp-4);width:100%}
  .ft__cols .eyebrow{margin-bottom:var(--sp-1)}
  .ft__cols a{font-size:var(--fs-sm)}
  .ft__info{margin-top:var(--sp-6);gap:0 var(--sp-5);line-height:1.9}
  .to-top{display:none}
  .temp__route{display:none}
}
/* 터치 기기: 누른 뒤 hover 상태가 남지 않게 */
@media (hover:none){
  .fig:hover{background:none}
  .zone:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
  .card:hover .card__ico{transform:none;background:var(--c-white);color:var(--c-blue)}
  .prod:hover,.news a:hover{transform:none;box-shadow:none}
  .prod:hover .prod__pic svg,.prod:hover .prod__pic img{transform:none}
  .link-arrow:hover i{transform:none;background:none;color:inherit}
  .btn-circle:hover{background:none;border-color:var(--c-line-strong);color:var(--c-ink)}
  .btn-circle--light:hover,.hd .btn-circle:hover{border-color:rgba(255,255,255,.45);color:#fff}
  .hd.solid .btn-circle:hover{border-color:var(--c-line);color:var(--c-ink)}
  .chip:hover{border-color:var(--c-line-strong);color:var(--c-sub)}
  .chip[aria-pressed="true"]:hover{border-color:var(--c-ink);color:#fff}
  .btn-circle:active,.chip:active,.prod:active,.news a:active{transform:scale(.97)}
  .dots button{min-width:44px}
}
@media (max-width:767px) and (max-height:700px){
  .vitem li:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}