/* ══════════════════════════════════════════════
   Armored Fresh - Renew Design v2
   시안 기준: 흰 배경 + 블랙 타이포 + 유기적 장식
   메인(히어로·푸터 등): 수직 스크롤만 (snap). 가로 스크롤 없음.
   OUR MISSION / SCIENCE / INNOVATION 3섹션만 패널 횡스크롤(.story-h-scroll).
   ══════════════════════════════════════════════ */
/* ── 웹폰트 self-host (사이트 내부 woff2 직접 보관 — 외부 CDN 왕복 제거로 적용 시차 제거) ──
   Google Fonts에서 받은 latin / latin-ext subset의 가변폰트(variable) woff2.
   한 파일이 weight 전구간을 포함하므로 font-weight 범위로 선언한다.
   font-display:swap — preload로 즉시 내려받고, 도착 즉시 실제 웹폰트로 교체한다.
   (optional은 ~100ms 윈도우를 놓치면 시스템 폴백으로 고착되어 글자 두께가 달라 보이므로 swap 사용)
   (한글은 시스템 폴백 — 기존과 동일) */
@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/alexandria-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/alexandria-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lexend';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/lexend-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lexend';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lexend Deca';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/lexend-deca-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lexend Deca';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/lexend-deca-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design Tokens (renew_메인 시안: 흰 배경·블랙 타이포 + Lexend Deca / Alexandria / Lexend) ── */
:root{
  /* 폰트 폴백 스택: 웹폰트 로딩 전 시스템 폰트로 보이다가 swap될 때의 레이아웃 변화(CLS)를 줄이기 위해
     metric이 비슷한 sans-serif 시스템 폰트를 폴백으로 지정 (웹폰트 디자인 자체는 동일 유지) */
  --font-nav:'Alexandria',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-title:'Lexend Deca',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-body:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --ink:#000000;
  --ink-muted:#1a1a1a;
  --ink-soft:#4a4a4a;
  --hero-ink:#000000;
  --hero-sub-ink:#000000;
  --bg: #ffffff;
  --bg2: #f4f9f4;
  --bg-card: #ffffff;
  --text: #0D2366;
  --text-sub: #3B5998;
  --text-light: #8899BB;
  --accent: #0055FF;
  --accent-warm: #E8B830;
  --green: #3CB371;
  --green-light: #D4F5D4;
  --border: rgba(13,35,102,0.08);
  --shadow: 0 4px 24px rgba(13,35,102,0.06);
  --nav-h: 60px;
  /* sub.css #sub_container .container 와 동일 계열 */
  --content-max: 170rem;
  --text-col-max: 96rem;
  --section-pad-x: 5rem;
  --section-pad-y: 8rem;
}

/* 1rem ≈ 10px (브라우저 기본 16px일 때 62.5%) — 라이브 테마와 동일 기준 */
html{font-size:62.5%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:var(--font-body),-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  margin:0;padding:0;overflow-x:hidden;
}
h1,h2,h3,.font-title{font-family:var(--font-title),sans-serif}

/* ══════════════════════════════════════════════
   SITE NAV
   ══════════════════════════════════════════════ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  box-sizing:border-box;
  background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 48px;border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(13,35,102,0.04);
  font-family:var(--font-nav);
  line-height:1;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.site-logo{
  font-size:clamp(11px,1vw,13px);letter-spacing:0.14rem;color:var(--ink);
  text-transform:uppercase;text-decoration:none;cursor:pointer;font-family:var(--font-nav);
  line-height:1.15;display:inline-flex;align-items:baseline;
  justify-self:start;
}
.site-logo-strong{font-weight:700;}
.site-logo-light{font-weight:300;}
.site-nav-links{
  display:flex;gap:clamp(1.6rem,2.2vw,3.2rem);list-style:none;margin:0;padding:0;align-items:center;
  justify-self:center;
}
.site-nav .site-nav-links > li{margin:0;padding:0;list-style:none;display:flex;align-items:center}
.site-nav-links a{
  color:var(--ink);text-decoration:none;
  font-size:clamp(1.15rem,1.05vw,1.35rem);
  font-weight:300;
  letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;
  line-height:1.2;display:inline-block;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:opacity .4s ease, font-weight .4s ease, border-color .4s ease;
}
.site-nav-links a:hover{opacity:0.55}
.site-nav-links a.active{opacity:1;font-weight:600;border-bottom-color:var(--ink);}
.hamburger-btn{justify-self:end}

/* Hamburger */
.hamburger-btn{
  background:none;border:none;cursor:pointer;padding:8px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;
}
.hamburger-btn span{display:block;height:1.5px;background:var(--hero-ink);transition:all .3s}
.hamburger-btn span:nth-child(1){width:24px}
.hamburger-btn span:nth-child(2){width:16px}
.hamburger-btn span:nth-child(3){width:24px}
.hamburger-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:24px}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:24px}

/* ══════════════════════════════════════════════
   SLIDE MENU
   ══════════════════════════════════════════════ */
.menu-overlay{
  position:fixed;inset:0;background:rgba(13,35,102,0.3);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.menu-overlay.open{opacity:1;pointer-events:all}
.slide-menu{
  position:fixed;top:0;right:0;bottom:0;width:300px;background:#fff;z-index:210;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:32px 40px;
  box-shadow:-8px 0 48px rgba(13,35,102,.14);
  max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.slide-menu.open{transform:translateX(0)}
.slide-menu{scrollbar-width:none;-ms-overflow-style:none;}
.slide-menu::-webkit-scrollbar{display:none;}
.slide-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.slide-menu-logo{
  font-size:1.9rem;font-weight:700;letter-spacing:0.14rem;color:var(--ink);text-transform:uppercase;font-family:var(--font-nav);text-decoration:none;
}
.slide-menu-logo .site-logo-light{font-weight:300;}
.slide-menu-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--ink-soft);padding:4px;line-height:1}
.slide-menu-links{list-style:none;flex:1}
.slide-menu-links li{border-bottom:1px solid var(--border)}
.slide-menu-links a{
  display:block;padding:18px 0;font-size:1.25rem;font-weight:300;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;font-family:var(--font-nav);
  transition:opacity .2s,padding-left .2s;cursor:pointer;
}
.slide-menu-links a:hover{opacity:0.55;padding-left:6px}

/* ── SHOP 아코디언 ── */
.slide-menu-shop-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 0;background:none;border:none;cursor:pointer;
  font-size:1.25rem;font-weight:300;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink);font-family:var(--font-nav);
  transition:opacity .2s,padding-left .2s;text-align:left;
  outline:none;-webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;appearance:none;
}
.slide-menu-shop-toggle:focus,
.slide-menu-shop-toggle:focus-visible,
.slide-menu-shop-toggle:active{outline:none;box-shadow:none;}
.slide-menu-shop-toggle:hover{opacity:0.55;padding-left:6px}
.slide-menu-shop-arrow{
  display:inline-block;margin-left:8px;font-size:1.05em;line-height:1;
  transition:transform .25s ease;
}
.slide-menu-shop-toggle[aria-expanded="true"] .slide-menu-shop-arrow{
  transform:rotate(180deg);
}
.slide-menu-brands{
  list-style:none;margin:0;padding:0 8px;
  background:transparent;border-radius:6px;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease, padding .35s ease, opacity .3s ease;
  opacity:0;
}
.slide-menu-shop-toggle[aria-expanded="true"] + .slide-menu-brands{
  max-height:1200px;
  padding:6px 8px 12px;
  opacity:1;
}
.slide-menu-brands[hidden]{display:block !important;}
.slide-menu-brands li{border-bottom:none;margin-bottom:4px;}
.slide-menu-brands li:last-child{margin-bottom:0;}
.slide-menu-brands li a{
  display:flex;align-items:center;justify-content:center;
  padding:10px 8px;text-decoration:none;
  transition:background .2s;
  border-radius:6px;
}
.slide-menu-brands li a:hover{background:rgba(255,255,255,0.08);}
/* 브랜드별 개별 배경 */
.brand-piilk a{background:#1f1f1f;}
.brand-piilk a:hover{background:#2a2a2a;}
.brand-cheongnyun a,
.brand-woojuin a,
.brand-momanddaddy a,
.brand-myeongnyehun a,
.brand-danghyun a{background:#f6f6f6;}
.brand-cheongnyun a:hover,
.brand-woojuin a:hover,
.brand-momanddaddy a:hover,
.brand-myeongnyehun a:hover,
.brand-danghyun a:hover{background:#ececec;}
.brand-logo{
  height:32px;width:auto;max-width:80px;object-fit:contain;
}
.brand-region{
  display:inline-block;
  padding:2px 6px;
  font-size:0.65em;
  font-weight:700;
  letter-spacing:0.5px;
  color:#fff;
  border-radius:3px;
  line-height:1;
  flex-shrink:0;
}
.brand-region-us{background:#1E3A8A;}
.brand-region-kr{background:#C60C30;}
.brand-name{
  font-size:0.9em;font-weight:400;letter-spacing:0.02em;color:var(--ink-soft);
  text-transform:none;
}

.slide-menu-footer{padding-top:24px;border-top:1px solid var(--border)}
.slide-menu-footer address{font-style:normal;font-size:1.15rem;font-weight:300;color:var(--ink-soft);line-height:1.8;font-family:var(--font-body)}

/* ══════════════════════════════════════════════
   MAIN SCROLL CONTAINER (Snap Scroll)
   ══════════════════════════════════════════════ */
html.snap-enabled,
html.snap-enabled body{
  margin:0;padding:0;overflow:hidden;height:100%;
}
html.snap-enabled .main-scroll{
  margin-top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  background:var(--bg);
}
html.snap-enabled .main-scroll .section,
html.snap-enabled .main-scroll .site-footer{
  scroll-snap-align:start;
}

.main-scroll{
  margin-top:var(--nav-h);
  overflow-x:hidden;
  max-width:100%;
  background:var(--bg);
}

/* ══════════════════════════════════════════════
   DOT INDICATOR (vertical, right side) - 페이지 섹션 위치 표시
   ══════════════════════════════════════════════ */
.dot-indicator{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:14px;
  opacity:1;pointer-events:auto;
  padding:0;margin:0;
  transition:opacity .35s ease;
}
.dot-indicator .dot{
  width:10px;height:10px;border-radius:50%;
  border:2px solid #c8c8c8;background:transparent;
  padding:0;
  cursor:pointer;transition:background .3s,border-color .3s,transform .3s;
}
.dot-indicator .dot:hover{
  border-color:#888;transform:scale(1.2);
}
.dot-indicator .dot:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.dot-indicator .dot.active{
  background:var(--ink);border-color:var(--ink);transform:scale(1.2);
}

/* ══════════════════════════════════════════════
   ENTRANCE ANIMATION (fade-in from below)
   ══════════════════════════════════════════════ */
.anim-item{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.anim-item.visible{
  opacity:1;
  transform:translateY(0);
}

/* ══════════════════════════════════════════════
   SECTIONS (common)
   ══════════════════════════════════════════════ */
.section{
  position:relative;overflow:visible;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--section-pad-y) var(--section-pad-x);
  box-sizing:border-box;
  background:transparent;
}
html.snap-enabled .section{
  height:calc(100vh - var(--nav-h));min-height:calc(100vh - var(--nav-h));
}
/* 미션·사이언스·이노베이션: 한 뷰포트 안에서 횡스크롤 패널 */
html.snap-enabled .section.section-story{
  height:calc(100vh - var(--nav-h));
  min-height:calc(100vh - var(--nav-h));
  max-height:calc(100vh - var(--nav-h));
  align-items:stretch;
  justify-content:center;
  overflow:visible;
  padding:2rem 0 1.2rem;
}
.section.section-story{
  overflow:visible;
  padding-left:0;
  padding-right:0;
}
html.snap-enabled .site-footer{
  min-height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.section-title{
  font-family:var(--font-title);
  font-size:clamp(3.2rem,4.5vw,7.5rem);font-weight:700;line-height:1.06;
  text-align:center;color:var(--ink);letter-spacing:-0.025em;margin-bottom:2rem;
}
.section-desc{
  font-family:var(--font-body);
  font-size:clamp(1.4rem,1.2vw,2rem);color:var(--ink-muted);
  text-align:center;line-height:1.45;letter-spacing:0;
  text-transform:none;max-width:var(--text-col-max);margin:0 auto 4rem;font-weight:400;
}

/* ══════════════════════════════════════════════
   STORYBOARD v6 — 횡스크롤 패널 (미션 / 사이언스 / 이노베이션)
   ══════════════════════════════════════════════ */
.story-h-outer{
  position:relative;z-index:2;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  width:100%;
  max-width:100%;
}
.story-h-scroll{
  display:flex;
  flex-direction:row;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.story-h-scroll::-webkit-scrollbar{display:none;}
.story-h-slide{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  max-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  box-sizing:border-box;
  padding:0 var(--section-pad-x);
  padding-bottom:20vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .3s ease;
}
.story-h-footer{
  display:none;
}
.story-h-arrow{
  background:none;border:1px solid var(--border);border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;color:var(--text-sub);transition:all .2s;
  padding:0;line-height:1;
}
.story-h-arrow:hover{background:var(--bg2);color:var(--text);}
.story-h-arrow:disabled{opacity:0.3;cursor:default;background:none;color:var(--text-sub);}
.story-h-dots{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.story-h-dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid #c8c8c8;
  padding:0;
  background:transparent;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.story-h-dot:hover{border-color:#888;}
.story-h-dot.active{
  background:var(--ink);
  border-color:var(--ink);
  transform:scale(1.15);
}
.story-chunk{
  margin-bottom:0;
  width:100%;
  max-width:var(--content-max);
}
.section-label{
  font-family:var(--font-nav);
  font-size:clamp(1rem,0.95vw,1.15rem);font-weight:300;letter-spacing:0.2rem;
  text-transform:uppercase;color:rgba(0,0,0,0.5);text-align:center;
  margin-bottom:1.6rem;
}
.section-title-story{
  font-family:var(--font-title);
  font-size:clamp(4.8rem,7vw,10rem);
  font-weight:400;line-height:1.05;letter-spacing:-0.03em;
  color:var(--ink);
  text-transform:none;margin-bottom:1.6rem;
}
.mission-tagline{
  font-family:var(--font-body);
  font-size:clamp(1.8rem,1.6vw,2.4rem);
  letter-spacing:0;color:var(--ink);font-weight:400;
  text-align:center;margin:0;line-height:1.4;
}
@keyframes missionDecoRise1 {
  from {
    opacity: 0;
    transform: translate(calc(-50% - 800px), calc(-50% + 378px + 100vh));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% - 800px), calc(-50% + 378px));
  }
}
@keyframes missionDecoRise2 {
  from {
    opacity: 0;
    transform: translate(calc(-50% + 650px), calc(-50% - 270px + 100vh));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + 650px), calc(-50% - 270px));
  }
}
@keyframes missionDecoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mission-deco-wrap{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(375px, 45vw, 720px);
  z-index:1;
  pointer-events:none;
  opacity:0;
  transform: translate(calc(-50% - 800px), calc(-50% + 378px));
}
.mission-deco-wrap-2{
  width:clamp(150px, 18vw, 288px);
  transform: translate(calc(-50% + 650px), calc(-50% - 270px));
}
/* [오버랩 조정 2026-06-09 / 코비] Mission deco 진입 — Hero deco 퇴장(0.6~0.65s)이
   진행 중(약 0.25s, 퇴장 ~40% 경과)일 때 겹쳐 등장하도록 animation-delay 0.3s→0.25s.
   다음 섹션 고유 deco는 걸친 객체와 다른 DOM이라 퇴장과 자유롭게 오버랩 가능
   → "객체 먼저 빠지는 중에 다음 객체가 시간차로 올라온다"는 사용자 의도에 부합.
   진입 모션 0.85s 유지. (0.25 + 0.85 = 1.1s 안에 정착) */
.mission-deco-wrap.animate{
  animation: missionDecoRise1 0.85s cubic-bezier(0.25,0.46,0.45,0.94) 0.25s forwards;
}
.mission-deco-wrap-2.animate{
  animation: missionDecoRise2 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.mission-deco{
  width:100%;
  display:block;
}
.mission-deco-wrap.animate .mission-deco{
  animation: missionDecoSpin 80s linear 1.2s infinite;
}

/* ──────────────────────────────────────────────
   [옵션 C 범용화 / Mission→Science] mission-deco(3.png, 좌하단 대형) 퇴장 + Science 재등장.
   ── Hero→Mission 의 heroDeco2 패턴과 동일 구조:
        · Mission 단독 이탈(Mission→Science 전환) 시 위로 퇴장(fade 없음, 위치 이동만).
        · 퇴장 종료 후 Science 진입 타이밍에 아래에서 다시 올라와 Science 새 위치에 정착.
   ── 퇴장 거리: 정착 center 가 vh/2+378px(중앙보다 아래) + 대형 객체이므로 -130vh 로
      상·하단 전체가 viewport 상단 밖으로 확실히 이탈. (heroDeco2 와 동일 사유) */
@keyframes missionDecoExit {
  from { transform: translate(calc(-50% - 800px), calc(-50% + 378px)); }
  to   { transform: translate(calc(-50% - 800px), calc(-50% + 378px - 130vh)); }
}
.mission-deco-wrap.exiting{
  /* base .mission-deco-wrap{opacity:0} 낙하 방지 위해 opacity:1 고정(fade 없음). */
  opacity: 1;
  /* [오버랩 조정 2026-06-09 / 코비] 1.0s→0.65s (heroDeco2 와 동일 톤, 대형 객체 -130vh 유지). */
  animation: missionDecoExit 0.65s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
}
/* mission-deco(3.png) 의 Science 재등장 정착 위치 결정 근거 [v3 정합 2026-06-11 / 코비]:
     · [v3 정답 기준] 사용자 지시 — 최종 정착 위치를 v3(renew_test_v3)와 일치. v3 에서
       mission-deco-wrap 정착값은 missionDecoRise1 to: translate(-800px, +378px) 이다(v3 원문 확인).
     · 이전 추정값(-720px,+560px)은 시안 없이 "다음 뷰포트 안에 들어오게" 가정해 잡은 값으로
       위치가 틀어졌다 → v3 정착값 그대로 복원한다.
     · 좌표계: 이 객체는 #section-mission 자식. 재등장(.science-return) 키프레임 to 가 최종 정지
       위치다. 순차 전환 동작/타이밍은 그대로 두고 정지 좌표만 v3 로 맞춤. */
@keyframes missionDecoScienceReturn {
  from { opacity:0; transform: translate(calc(-50% - 800px), calc(-50% + 378px + 100vh)); }
  to   { opacity:1; transform: translate(calc(-50% - 800px), calc(-50% + 378px)); }
}
.mission-deco-wrap.science-return{
  opacity: 1;
  animation: missionDecoScienceReturn 0.85s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards;
}
.mission-deco-wrap.science-return .mission-deco{
  /* 재등장 후에도 회전 모션 유지(정착 후 1.2s 뒤 시작). */
  animation: missionDecoSpin 80s linear 1.2s infinite;
}

/* ──────────────────────────────────────────────
   [옵션 C] Mission 텍스트 등장 시퀀스 (헤드라인/라벨/태그라인)
   ── 사용자 최종 의도: "기존 객체가 위로 먼저 빠진 그 다음에" 텍스트가 전환·등장.
      이전엔 텍스트가 항상 떠 있었으나, 등장 연출 대상으로 전환.
   ── 톤은 기존 .anim-item↔.visible(아래에서 살짝 올라오며 fade-in)과 동일하게 맞춤
      (translateY 28px + opacity, cubic-bezier 동일 계열).
   ── 타이밍(시퀀스): JS가 Hero→Mission 전환(.exiting 부여)과 동시에 mission deco의
      .animate 와 함께 이 요소들에 .in 을 부여한다. CSS transition-delay 로
      "기존 객체 퇴장 시작 후"가 되도록 약간 늦춘다.
        · t0      : Hero deco .exiting 시작(위로 퇴장, 0.9~1.0s)
        · t0+0.3s : Mission deco rise 시작(기존, animation-delay 0.3s)
        · t0+0.35s: Mission 라벨 등장 시작 → 0.45s 텍스트(헤드라인) → 0.55s 태그라인
          (stagger). 각 transition 0.6s. 텍스트 체감 등장 ~0.55~0.65s.
      → "객체 먼저 빠짐 → 그 다음 텍스트+다음객체 자리잡음" 순서가 체감되되,
        퇴장(~0.9s)과 등장(0.35s 시작)이 충분히 겹쳐 빈 화면 공백이 생기지 않는다.
   ── 재진입(위로 다시 스크롤): JS가 .in 제거 → 초기(숨김) 상태 복귀 → 재진입 시 재생.
   ────────────────────────────────────────────── */
/* [범용화 2026-06-09 / 코비] .mission-text-anim → .story-text-anim 으로 승격.
   Hero→Mission 에서 검증된 텍스트 등장 패턴(아래에서 28px 상승 + fade-in, 라벨→헤드라인
   →본문 stagger)을 Mission/Innovation(Science)/Standard 세 섹션 텍스트에 동일 적용한다.
   대상: .section-label / .section-title-story / .mission-tagline / .section-desc-prose.
   ── 하위호환: 기존 .mission-text-anim 셀렉터도 별칭으로 함께 유지(혹시 모를 캐시/참조 대비). */
.story-text-anim,
.mission-text-anim{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:opacity, transform;
}
.story-text-anim.in,
.mission-text-anim.in{
  opacity:1;
  transform:translateY(0);
}
/* [오버랩 조정 2026-06-09 / 코비] stagger 0.35/0.45/0.55 → 0.25/0.35/0.45 로 단축.
   이전 섹션 deco 퇴장(0.6~0.65s)이 진행 중(~0.25s, 퇴장 ~40% 경과)일 때 텍스트가
   겹쳐 올라오기 시작 → "객체 빠지는 중에 텍스트가 시간차로 등장"하는 오버랩.
   텍스트는 deco와 다른 DOM이라 퇴장과 자유롭게 겹쳐도 깜빡 위험 없음. 세 섹션 공통. */
.story-text-anim.section-label.in{ transition-delay:0.25s; }
.story-text-anim.section-title-story.in{ transition-delay:0.35s; }
.story-text-anim.mission-tagline.in,
.story-text-anim.section-desc-prose.in{ transition-delay:0.45s; }
.story-heading{
  font-family:var(--font-title);
  font-size:clamp(4.8rem,7vw,10rem);
  font-weight:400;line-height:1.05;color:var(--ink);letter-spacing:-0.03em;
  text-align:center;margin-bottom:1.6rem;text-transform:none;
}
.compare-wrap-slide .story-heading{
  font-size:clamp(3.2rem,4.5vw,6rem);line-height:1.05;letter-spacing:-0.03em;
}
.story-heading-center{text-align:center;}
.story-body{
  font-family:var(--font-body);
  font-size:clamp(1.8rem,1.6vw,2.4rem);
  color:var(--ink-muted);line-height:1.45;text-align:center;font-weight:400;
  max-width:62rem;margin:0 auto;
}
.section-desc-prose{
  font-family:var(--font-body);
  font-size:clamp(1.6rem,1.35vw,2.2rem);
  color:var(--ink-muted);line-height:1.4;text-align:center;font-weight:400;
  max-width:56rem;margin:0 auto;text-transform:none;letter-spacing:0;
}
/* PC 줄바꿈 미세조정: Innovation 서브카피의 "research."가 윗줄에 오도록 폭 +,
   Standard 서브카피의 가운데 문장이 한 줄에 들어오도록 폭 +.
   데스크톱(>=769px)에만 적용 — 모바일/태블릿 레이아웃은 56rem 기본값 유지. */
@media (min-width:769px){
  .science-content .section-desc-prose{max-width:60rem;}
  .innovation-content .section-desc-prose{max-width:64rem;}
}
.science-pullquote{
  font-family:var(--font-title);
  font-size:clamp(4.8rem,7vw,10rem);
  font-weight:400;font-style:italic;line-height:1.05;
  color:var(--ink);text-align:center;margin:0 0 1.2rem;letter-spacing:-0.03em;
}
.science-pullquote-follow{
  font-family:var(--font-body);
  font-size:clamp(1.8rem,1.6vw,2.4rem);
  color:var(--ink-muted);text-align:center;margin:0;
  font-style:italic;font-weight:400;line-height:1.4;
}
.specs-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  width:100%;max-width:96rem;margin:0 auto;
}
.spec-card{
  text-align:center;padding:3.2rem 2rem;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);
}
.spec-value{
  font-family:var(--font-title);
  font-size:clamp(3.6rem,4vw,5.4rem);
  font-weight:400;color:var(--ink);margin-bottom:0.4rem;letter-spacing:-0.02em;
}
.spec-unit{font-size:1.6rem;color:var(--ink-soft);font-weight:500;}
.spec-name{
  font-family:var(--font-nav);
  font-size:clamp(1.2rem,1.1vw,1.5rem);letter-spacing:0.08rem;color:var(--ink-muted);
  text-transform:uppercase;font-weight:300;line-height:1.35;
}
.compare-wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;align-items:stretch;
  width:100%;max-width:90rem;margin:1.6rem auto 0;
}
.compare-card{
  padding:2rem 2rem;border-radius:16px;background:var(--bg-card);
  box-shadow:var(--shadow);border:1px solid var(--border);
}
.compare-ours{
  border:2px solid var(--accent-warm);
}
.compare-label{
  font-size:clamp(1rem,0.9vw,1.2rem);letter-spacing:0.1rem;text-transform:uppercase;
  font-weight:300;margin-bottom:1rem;font-family:var(--font-nav);
}
.compare-theirs .compare-label{color:var(--ink-soft);}
.compare-ours .compare-label{color:var(--ink);}
.compare-vs{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-nav);
  font-size:1.2rem;font-weight:400;color:#b0b0b0;
  padding:0 0.8rem;
}
.ing-list{list-style:none;text-align:left;font-family:var(--font-body);}
.ing-list li{
  padding:0.25rem 0;font-size:1.2rem;font-weight:400;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.ing-list-blur li{color:var(--ink-soft);opacity:0.65;font-size:1.1rem;}
.ing-list-clean li{color:var(--ink);font-weight:400;}
.ing-list-clean li::before{content:"\2713  ";color:var(--green);font-weight:700;}
.clean-badge{
  margin-top:1.4rem;padding:0.8rem 1.2rem;background:var(--green-light);
  border-radius:8px;font-family:var(--font-nav);
  font-size:1rem;font-weight:500;color:var(--green);
  letter-spacing:0.08rem;text-align:center;text-transform:uppercase;
}
.quote-block{
  background:linear-gradient(135deg,#f8f8f8,#fff);
  border-radius:16px;padding:4.8rem 4rem;
  border-left:4px solid #ddd;
  text-align:center;max-width:76rem;margin:0 auto;
}
.quote-block p{
  font-family:var(--font-title);
  color:var(--ink);font-style:italic;font-weight:400;
  font-size:clamp(2.4rem,3vw,4rem);line-height:1.45;margin:0;letter-spacing:-0.02em;
}
.process-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  width:100%;max-width:100rem;margin:2rem auto 0;position:relative;
}
.process-step{text-align:center;}
.step-circle{
  width:8.8rem;height:8.8rem;border-radius:50%;margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;background:var(--bg-card);
  border:2px solid var(--border);box-shadow:var(--shadow);
}
.step-num{
  font-size:0.9rem;color:rgba(0,0,0,0.45);letter-spacing:0.16rem;
  margin-bottom:0.4rem;font-weight:300;font-family:var(--font-nav);
}
.step-title{
  font-size:1.35rem;font-weight:500;margin-bottom:0.4rem;
  font-family:var(--font-title);color:var(--ink);letter-spacing:-0.02em;
}
.step-desc{
  font-size:1.2rem;color:var(--ink-muted);line-height:1.45;font-weight:400;
  max-width:22rem;margin:0 auto;font-family:var(--font-body);
}
.nongmo-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  width:100%;max-width:78rem;margin:1.6rem auto 0;
}
.nongmo-card{
  border-radius:16px;padding:2.8rem 2rem;text-align:left;
}
.nongmo-industry{
  background:var(--bg2);border:1px solid var(--border);opacity:0.92;
}
.nongmo-ours{
  background:var(--bg-card);border:2px solid var(--green);
  box-shadow:var(--shadow);
}
.nongmo-label{
  font-size:1rem;letter-spacing:0.12rem;text-transform:uppercase;
  font-weight:300;margin-bottom:1rem;font-family:var(--font-nav);
}
.nongmo-industry .nongmo-label{color:var(--ink-soft);}
.nongmo-ours .nongmo-label{color:var(--green);font-weight:500;}
.nongmo-card p{
  font-size:1.35rem;line-height:1.45;color:var(--ink-muted);margin:0;font-family:var(--font-body);font-weight:400;
}
.nongmo-ours p{color:var(--ink);}
.badges-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  width:100%;max-width:96rem;margin:2rem auto 0;
}
.badge{
  text-align:center;padding:2.8rem 1.6rem;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);
}
.badge-icon{font-size:2.6rem;margin-bottom:0.8rem;line-height:1;}
.badge-title{
  font-size:1.15rem;font-weight:400;letter-spacing:0.08rem;
  text-transform:uppercase;color:var(--ink);font-family:var(--font-nav);
}
.badge-sub{
  font-size:1.2rem;color:var(--ink-muted);margin-top:0.4rem;line-height:1.45;font-family:var(--font-body);font-weight:400;
}
.tech-emoji{font-size:3.2rem;line-height:1;display:block;}

/* ══════════════════════════════════════════════
   SECTION: HERO
   ══════════════════════════════════════════════ */
.section-hero{
  background:transparent;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow:visible;
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  width:min(100%,92rem);
  max-width:96rem;
  margin-inline:auto;
  margin-bottom:10vh;
  padding:0 2rem;
  display:flex;flex-direction:column;align-items:center;
}
.hero-eyebrow{display:none;}
.hero-headline{
  font-family:var(--font-title);
  font-size:clamp(4.8rem,7vw,10rem);font-weight:400;line-height:1.05;
  color:var(--hero-ink);margin-bottom:clamp(3.6rem,4.5vw,5rem);letter-spacing:-0.03em;
  text-transform:none;
}
.hero-sub{
  font-family:var(--font-body);
  font-size:clamp(1.8rem,1.6vw,2.4rem);letter-spacing:0;color:var(--hero-sub-ink);
  font-weight:400;line-height:1.4;text-transform:none;
  max-width:72rem;margin:0 auto;
}
/* Hero 메인 타이틀: PC(>=769px)에서 2줄로 안정 표시되도록 콘텐츠 박스 폭 확장.
   타이틀 줄바꿈은 마크업의 <br>("Redesigning Food" / "From the Ground Up.") 고정.
   루트 62.5%(1rem=10px) 기준. 측정(여러 해상도)에서 2번째 줄 "From the Ground Up."의
   자연 폭 최댓값 = 957px(font clamp 상한 100px, 1440~1920 구간). 기존 박스 92rem(920px)는
   이보다 좁아 1440px+에서 해당 줄이 한 번 더 wrap → 총 3줄이 되던 원인.
   100rem(1000px)로 확장해 957px 대비 ~43px 여유 확보 → 1366~1920 전 구간 2줄 안정.
   (.hero-sub는 별도 max-width:72rem로 제약돼 영향 없음, 데코는 absolute라 불변) */
@media (min-width:769px){
  .hero-content{width:min(100%,100rem);max-width:100rem;}
}
/* 시안: 우측 세로 SCROLL (히어로 - 숨김 처리) */
.hero-scroll-hint{
  position:absolute;right:clamp(4.8rem,6.5vw,7rem);top:50%;transform:translateY(-50%);
  z-index:3;display:none;flex-direction:column;align-items:center;gap:0.6rem;
  font-family:var(--font-nav);pointer-events:none;
}
.hero-scroll-word{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:1rem;font-weight:300;letter-spacing:0.28em;text-transform:uppercase;color:#b8b8b8;
}
.hero-scroll-hint .hero-scroll-arrow{
  display:block;font-size:1.4rem;line-height:1;color:#c8c8c8;
  transform:rotate(90deg);font-weight:300;
}
/* 시안: 서브 섹션 우측 가로 SCROLL 힌트 */
.story-scroll-hint{
  position:absolute;right:clamp(3rem,5vw,6rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:row;align-items:center;gap:1rem;
  font-family:var(--font-nav);pointer-events:auto;cursor:pointer;
  z-index:3;transition:opacity .2s;
}
.story-scroll-hint:hover{opacity:0.6;}
.story-scroll-word{
  font-size:1rem;font-weight:300;letter-spacing:0.28em;text-transform:uppercase;color:#b8b8b8;
}
.story-scroll-arrow{
  font-size:1.4rem;color:#b8b8b8;line-height:1;font-weight:300;
}
.story-scroll-line{display:none;}
/* 시안: 하단 1/3 슬라이드 표시(정적) */
.hero-slide-ui{
  position:absolute;left:50%;bottom:clamp(2.4rem,4vh,4.8rem);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:1rem;
  pointer-events:none;
}
.hero-slide-nub{
  width:4.4rem;height:4.4rem;border-radius:50%;
  border:1px solid #e0e0e0;background:#f4f4f4;
  display:flex;align-items:center;justify-content:center;color:#9a9a9a;
}
.hero-slide-count{
  font-family:var(--font-nav);font-size:1rem;font-weight:300;letter-spacing:0.06em;
  color:#5a5a5a;background:#ececec;padding:0.45rem 1rem;border-radius:999px;
}

/* Hero decorative objects */
.deco{position:absolute;pointer-events:none;z-index:0;}

/* Green pipe top-center */
.deco-pipe-top{
  width:clamp(200px,28vw,420px);
  top:-2%;left:50%;transform:translateX(-50%);
  opacity:0.8;
}
/* Green pipe left side */
.deco-pipe-left{
  width:clamp(120px,14vw,200px);
  top:10%;left:-3%;
  opacity:0.6;
}
/* Red clover upper-right */
.deco-clover-red{
  width:clamp(50px,6vw,80px);
  top:12%;right:14%;
  opacity:0.85;
}
/* Green wavy line near clover */
.deco-wave-green{
  width:clamp(70px,8vw,110px);
  top:18%;right:8%;
  opacity:0.7;
}
/* Small yellow blob */
.deco-blob-yellow{
  width:clamp(50px,7vw,100px);height:clamp(45px,6vw,90px);
  background:radial-gradient(ellipse,rgba(232,184,48,0.5),rgba(232,184,48,0.08) 70%);
  top:20%;right:22%;
  border-radius:55% 45% 50% 50%/50% 55% 45% 50%;
}

/* Hero decoration images */
@keyframes heroDecoRise1 {
  from {
    opacity: 0;
    transform: translate(calc(-50% - 672px), calc(-50% - 144px + 100vh));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% - 672px), calc(-50% - 144px));
  }
}
@keyframes heroDecoRise2 {
  from {
    opacity: 0;
    transform: translate(calc(-50% + 595px), calc(-50% + 486px + 100vh));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + 595px), calc(-50% + 486px));
  }
}
.hero-deco{
  position:absolute;
  z-index:1;
  pointer-events:none;
  max-width:none;
  opacity:0;
}
/* 1.png: 코랄 클러스터 — 화면 중심 기준 좌상단 */
.hero-deco-1{
  top:50%;
  left:50%;
  width:clamp(280px, 35vw, 550px);
  /* 키프레임 시작 위치(off-screen 아래)를 유지하기 위해 기본 transform 명시 */
  transform: translate(calc(-50% - 672px), calc(-50% - 144px + 100vh));
}
.hero-deco-1.animate{
  animation: heroDecoRise1 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  animation-delay: 0s;
}
/* [옵션 C / 수정] heroDeco1 퇴장 전용 모션 — fade-out 제거, 순수 위치 이동(translateY)만.
   사용자 요구: 투명도 변화 없이 위로 올라가 화면 밖으로 완전히 빠져나가 자연히 안 보이게.
   ── opacity는 진입 정착 상태값(1) 그대로 from/to 모두 유지(키프레임에서 opacity 미언급).
   ── 코랄(좌상단)은 정착 center가 vh/2-144px(화면 중앙보다 약간 위). 위로 화면높이 이상
      이동시키면 객체 전체가 viewport 상단 밖으로 완전히 이탈한다 → -100vh로 충분히 클리어.
   ── 거리가 -40vh→-100vh로 늘었으나 모션이 답답하지 않게 duration은 0.9s로 소폭 확대,
      easing은 ease-in(가속 퇴장) 유지해 "위로 빨려 올라가는" 체감. */
@keyframes heroDecoExit1 {
  from {
    transform: translate(calc(-50% - 672px), calc(-50% - 144px));
  }
  to {
    transform: translate(calc(-50% - 672px), calc(-50% - 144px - 100vh));
  }
}
.hero-deco-1.exiting{
  /* [수정/중요] 퇴장 키프레임이 opacity를 언급하지 않으므로, .animate 제거 후 base
     .hero-deco{opacity:0} 로 떨어져 즉시 사라지는 것을 막기 위해 opacity:1 명시 고정.
     → 객체는 전 구간 불투명(fade 없음)으로 위로 이동만 하며 화면 밖으로 나간다. */
  opacity: 1;
  /* [오버랩 조정 2026-06-09 / 코비] 퇴장 duration 0.9s→0.6s 단축.
     사용자 요구: 걸친/현재 객체가 더 빠르게 위로 빠지고, 다음 객체가 시간차로 겹쳐 등장.
     거리(-100vh)는 유지하고 시간만 줄여 "더 빠르게 빨려 올라가는" 체감. ease-in 가속 유지. */
  animation: heroDecoExit1 0.6s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
  animation-delay: 0s;
}
/* 2.png: 그린 클러스터 — 화면 중심 기준 우하단 */
.hero-deco-2{
  top:50%;
  left:50%;
  width:clamp(481px, 60.1vw, 944px);
  transform: translate(calc(-50% + 595px), calc(-50% + 486px + 100vh));
}
.hero-deco-2.animate{
  animation: heroDecoRise2 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  animation-delay: 0.25s;
}
/* [프로토타입 / 수정] heroDeco2 퇴장 전용 모션 — fade-out 제거, 순수 위치 이동만.
   사용자 요구: opacity 변화 없이 위로 이동만으로 화면 밖 완전 이탈.
   ── opacity 미언급 → from/to 모두 정착값 1 유지(페이드 없음).
   ── 그린(우하단)은 대형 객체(폭 481~944px, 높이도 큼)이고 정착 center가 vh/2+486px
      (화면 중앙보다 아래). 위로 화면높이 1배(100vh)로는 큰 높이 탓에 하단이 viewport에
      걸릴 수 있어 -130vh로 잡아 객체 전체(상·하단 모두)가 상단 밖으로 확실히 이탈하게 함.
   ── 거리가 -42vh→-130vh로 크게 늘어 같은 0.8s면 너무 빨라 "휙" 사라져 보이므로
      duration 1.0s로 확대(이동량/시간 비례 체감 유지). easing ease-in(가속) 유지. */
@keyframes heroDecoExit2 {
  from {
    transform: translate(calc(-50% + 595px), calc(-50% + 486px));
  }
  to {
    transform: translate(calc(-50% + 595px), calc(-50% + 486px - 130vh));
  }
}
.hero-deco-2.exiting{
  /* [수정/중요] heroDeco1과 동일 사유 — base opacity:0 낙하 방지 위해 opacity:1 고정. */
  opacity: 1;
  /* [오버랩 조정 2026-06-09 / 코비] 퇴장 duration 1.0s→0.65s 단축(대형 객체, -130vh 거리 유지).
     걸친 객체 재등장(JS 지연 ~0.4s)이 퇴장 ~62% 경과 시점에 붙어 오버랩 — 이미 화면에서
     거의 빠진 상태라 깜빡 없이 자연스럽게 이어진다. ease-in 가속 유지. */
  animation: heroDecoExit2 0.65s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
  animation-delay: 0s;
}

/* ──────────────────────────────────────────────
   [걸친 객체 재등장] heroDeco2(우하단 대형 그린)의 Mission 재진입 전용 상태.
   ── 배경: heroDeco2는 원래 [Hero, Mission] 2섹션에 걸쳐 보이도록 의도된 "걸친 객체"였다
      (main.js [0b] 주석: 기존 매핑에서 Mission 진입 후에도 화면 상단에 ~65% 남아 정착).
      현재는 Hero 이탈 시 위로 퇴장(heroDecoExit2)하고 Mission에서 사라진 채 끝난다.
   ── 사용자 요구: Hero에서 위로 퇴장한 뒤, Mission deco/텍스트 등장 타이밍에 맞춰
      "아래에서 다시 올라와 Mission에서의 위치를 잡는다". 즉 퇴장→재진입 2섹션 라이프사이클.
   ── 정착 위치 결정 근거 [v3 정합 2026-06-11 / 코비]: 사용자 지시에 따라 v3(renew_test_v3)의
      heroDeco2 정착값(heroDecoRise2 to: +595px,+486px)을 최종 정지 위치로 사용한다.
      이전엔 시안 없이 +540px(약간 더 아래)로 추정해 옮겼으나, v3 정답 기준으로 +486px 복원.
        · 수평 +595px = v3 동일. 수직 +486px = v3 동일.
   ── 모션 톤: 기존 deco 진입(missionDecoRise/heroDecoRise)과 동일하게 +100vh 아래에서
      올라와 정착(fade-in 포함). 퇴장(heroDecoExit2)의 "fade 없는 위치이동" 원칙과는 별개
      국면(등장)이므로 등장은 기존 deco 등장 방식과 일관되게 opacity 0→1 + translateY 사용. */
@keyframes heroDeco2MissionReturn {
  /* [v3 정합 2026-06-11 / 코비] 재등장 정착 좌표를 v3 heroDecoRise2 정착값(+595px,+486px)과
     일치시킴. (이전 +540px 은 시안 없는 추정값이었음) — 순차 전환 동작/타이밍은 유지. */
  from {
    opacity: 0;
    transform: translate(calc(-50% + 595px), calc(-50% + 486px + 100vh));
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + 595px), calc(-50% + 486px));
  }
}
.hero-deco-2.mission-return{
  /* [중요] .exiting/.animate 잔여 상태를 덮어쓰기 위해 opacity 강제 + 전용 키프레임.
     JS(initHeroDeco2MissionReturn)가 "퇴장 모션이 끝난 뒤"에만 .mission-return 을 부여하고,
     Mission 이탈(위로 Hero 복귀 / 아래 다음 섹션) 시 제거한다.
     ── [회귀 수정 2026-06-09 / 코비] animation-delay 를 0.3s→0s 로 변경.
        이전엔 .exiting 과 .mission-return 이 동시에 붙으면서 이 키프레임 from(opacity:0,
        화면 아래)이 퇴장 모션을 덮어 "깜빡 사라짐"이 발생했다. 이제 JS 가 퇴장 종료까지
        부여를 지연(시퀀싱)하므로 CSS 지연은 불필요하다. 두 모션 동시부착이 없어
        delay 0s 라도 충돌하지 않고, 퇴장 종료 직후 곧바로 재등장이 이어져 공백도 없다. */
  opacity: 1;
  /* 퇴장(위로, ~1.0s) 종료 후 0.85s 동안 아래에서 상승해 Mission 위치 정착. */
  animation: heroDeco2MissionReturn 0.85s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards;
}

/* ══════════════════════════════════════════════
   SECTION: MISSION
   ══════════════════════════════════════════════ */
.section-mission{
  background:transparent;
  flex-direction:column;
  align-items:center;
}
.mission-content{
  position:relative;z-index:2;text-align:center;
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin-inline:auto;
}

/* Amoeba cluster right side */
.deco-amoeba-cluster{
  position:absolute;top:5%;right:2%;z-index:0;
  width:clamp(150px,18vw,260px);
  opacity:0.8;
}
.deco-amoeba-cluster svg{width:100%;height:auto;}

/* Green pipe extending on left */
.deco-pipe-mission-left{
  width:clamp(100px,12vw,180px);
  bottom:-5%;left:-3%;
  opacity:0.5;
}

/* Promise cards */
.promise-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  width:100%;max-width:96rem;margin:4rem auto 0;
}
.promise-card{
  text-align:center;padding:2.8rem 1.4rem;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);
  transition:transform .2s,box-shadow .2s;
}
.promise-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(13,35,102,0.10)}
.promise-num{
  font-family:var(--font-title);font-size:clamp(2.4rem,2.5vw,3.4rem);
  font-weight:700;color:var(--ink);margin-bottom:0.4rem;letter-spacing:-0.02em;
}
.promise-label{
  font-family:var(--font-nav);
  font-size:1.1rem;letter-spacing:0.08rem;color:var(--ink-muted);
  text-transform:uppercase;font-weight:300;line-height:1.4;
}

/* ══════════════════════════════════════════════
   SECTION: SCIENCE
   ══════════════════════════════════════════════ */
.section-science{
  background:transparent;
  flex-direction:column;
  align-items:center;
  overflow:visible;
}
/* Science 3D TorusKnot 좌하단 (1/3 scale) */
.science-deco-wrap{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.science-deco-topleft{
  top:50%;left:50%;
  width:clamp(200px,22vw,380px);
  height:clamp(200px,22vw,380px);
  opacity:0;
  transform:translate(calc(-50% - 45vw), calc(-50% + 42vh));
}
.science-deco-topleft.animate{
  animation: scienceDecoRise 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes scienceDecoRise{
  from { opacity:0; transform:translate(calc(-50% - 45vw), calc(-50% + 42vh + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% - 45vw), calc(-50% + 42vh)); }
}
/* [옵션 C 범용화 / Science→Standard] science-deco-topleft(TorusKnot 좌하단) 퇴장.
   ── Science 단독 이탈(Science→Standard) 시 위로 퇴장(fade 없음, 위치 이동만).
   ── 정착 center 가 vh/2+42vh(하단)이므로 -130vh 로 상단 밖 완전 이탈.
   ── 이 객체는 "걸친(재등장) 대상이 아님" → 퇴장만 하고 Standard 에선 다시 안 보임. */
@keyframes scienceDecoTopleftExit{
  from { transform:translate(calc(-50% - 45vw), calc(-50% + 42vh)); }
  to   { transform:translate(calc(-50% - 45vw), calc(-50% + 42vh - 130vh)); }
}
.science-deco-topleft.exiting{
  opacity:1;
  /* [오버랩 조정 2026-06-09 / 코비] 1.0s→0.65s 단축(-130vh 거리 유지). 걸친 객체 아님(재등장 X). */
  animation: scienceDecoTopleftExit 0.65s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
}
#science-torusknot-canvas{
  width:100%;height:100%;display:block;
}
/* Science 9.png 우하단 반 걸침 */
.science-deco-bottomright{
  top:50%;left:50%;
  width:clamp(350px,40vw,650px);
  transform:translate(calc(-50% + 650px), calc(-50% + 50%));
  opacity:0;
}
.science-deco-bottomright.animate{
  animation: scienceDecoRise2 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.science-deco-bottomright.animate .science-deco-img{
  animation: scienceBreathe 4s ease-in-out 1.4s infinite;
  transform:scale(0.975);
}
@keyframes scienceBreathe{
  0%, 100% { transform:scale(0.975); }
  50%      { transform:scale(1); }
}
@keyframes scienceDecoRise2{
  from { opacity:0; transform:translate(calc(-50% + 650px), calc(-50% + 50% + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% + 650px), calc(-50% + 50%)); }
}
/* [옵션 C 범용화 / Science→Standard] science-deco-bottomright(9.png, 우하단 대형) 퇴장 + Standard 재등장.
   ── heroDeco2 / mission-deco 와 동일 "걸친 객체" 패턴(이 전환의 우하단 대형 = 재등장 대상).
   ── 퇴장: Science 단독 이탈 시 위로(fade 없음). 정착 center vh/2+50%(하단) → -130vh 로 완전 이탈. */
@keyframes scienceDecoBottomrightExit{
  from { transform:translate(calc(-50% + 650px), calc(-50% + 50%)); }
  to   { transform:translate(calc(-50% + 650px), calc(-50% + 50% - 130vh)); }
}
.science-deco-bottomright.exiting{
  opacity:1;
  /* [오버랩 조정 2026-06-09 / 코비] 1.0s→0.65s 단축(대형 객체 -130vh 유지). Standard 재등장 걸친 객체. */
  animation: scienceDecoBottomrightExit 0.65s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
}
/* 9.png 의 Standard 재등장 정착 위치 결정 근거 (2026-06-11 v3정합 / 코비):
     · [v3 정답 기준] 사용자 지시 — 각 정지 객체의 "최종 정착 위치"는 실서버 v3(renew_test_v3)와
       동일해야 한다. v3 에서 9.png(science-deco-bottomright)의 정착값은 scienceDecoRise2 의 to:
       translate(calc(-50% + 650px), calc(-50% + 50%)) 이다(v3 main.css 원문 확인).
     · 이전 추정값(+820px,+880px)은 시안 없이 '수직 연속성'을 가정해 옮긴 값으로 위치가 틀어졌다는
       사용자 지적을 받았다 → v3 정착값 그대로 복원한다.
     · 좌표계: 이 객체는 #section-science 자식(top:50% left:50% + transform translate). 재등장은
       JS(initStraddleReturn)가 Standard 진입 시 .standard-return 을 부여하며, 그 키프레임 to 가
       곧 최종 정지 위치다. 순차 전환(퇴장→재등장)·타이밍·breathe 는 그대로 두고 정지 좌표만 v3 로 맞춤. */
/* [v3 정합 2026-06-11 / 코비] 9.png 재등장 정착 좌표를 v3 scienceDecoRise2 정착값(+650px,+50%)과
   일치시킴. (이전 +820px,+880px 은 시안 없는 추정값으로 위치가 틀어졌다는 사용자 지적 → v3 정답 적용)
   순차 전환 동작(퇴장→재등장)·타이밍·breathe 모션은 그대로 유지, 최종 정지 위치만 v3 로 교정. */
@keyframes scienceDecoStandardReturn{
  from { opacity:0; transform:translate(calc(-50% + 650px), calc(-50% + 50% + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% + 650px), calc(-50% + 50%)); }
}
.science-deco-bottomright.standard-return{
  opacity:1;
  animation: scienceDecoStandardReturn 0.85s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards;
}
.science-deco-bottomright.standard-return .science-deco-img{
  /* 재등장 후 breathe 모션 유지. */
  animation: scienceBreathe 4s ease-in-out 1.4s infinite;
  transform:scale(0.975);
}
.science-deco-img{
  width:100%;display:block;
}
/* Science 숨쉬는 점들 */
.science-dots{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.sci-dot{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--size);height:var(--size);
  border-radius:50%;
  background:var(--color);
  animation:sciDotBreathe var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes sciDotBreathe{
  0%, 100% { opacity:0.2; }
  50%      { opacity:0.9; }
}
.science-content{
  position:relative;z-index:2;text-align:center;
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin-inline:auto;
}

/* Large green blob left */
.deco-green-blob-left{
  position:absolute;
  width:clamp(250px,35vw,500px);height:clamp(230px,32vw,460px);
  background:radial-gradient(ellipse at 40% 50%,rgba(60,179,113,0.22),rgba(144,238,144,0.10) 50%,transparent 75%);
  top:-5%;left:-10%;
  border-radius:55% 45% 50% 50%/45% 55% 45% 55%;
  pointer-events:none;z-index:0;
}

/* Stats row */
.stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  width:100%;max-width:96rem;margin:0 auto;
}
.stat-card{
  text-align:center;padding:3.2rem 2rem;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);
  transition:transform .2s;
}
.stat-card:hover{transform:translateY(-4px)}
.stat-num{
  font-family:var(--font-title);font-size:clamp(3.6rem,4vw,5.4rem);
  font-weight:400;color:var(--ink);margin-bottom:0.6rem;letter-spacing:-0.02em;
}
.stat-label{
  font-family:var(--font-body);
  font-size:clamp(1.4rem,1.2vw,1.8rem);color:var(--ink-muted);line-height:1.45;
  letter-spacing:0;font-weight:400;
}
.stat-source{
  font-family:var(--font-nav);
  font-size:1rem;color:#9a9a9a;margin-top:0.8rem;
  text-transform:uppercase;letter-spacing:0.1rem;font-weight:300;
}

/* ══════════════════════════════════════════════
   SECTION: INNOVATION
   ══════════════════════════════════════════════ */
.section-innovation{
  background:transparent;
  flex-direction:column;
  align-items:center;
  overflow:visible;
}
.innovation-content{
  position:relative;z-index:2;text-align:center;
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin-inline:auto;
}

/* Innovation 장식 이미지 */
.innov-deco-wrap{
  position:absolute;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.innov-deco{
  width:100%;
  display:block;
}
/* 11.png - 왼쪽 상단, 스크롤 진입 시 아래에서 올라옴 + 숨쉬는 scale */
.innov-deco-topleft{
  top:50%;left:50%;
  width:clamp(170px,18.7vw,323px);
  opacity:0;
  transform:translate(calc(-50% + 800px), calc(-50% - 380px));
}
.innov-deco-topleft.animate{
  animation: innovDecoRise1 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 0s forwards;
}
.innov-deco-topleft.animate .innov-deco{
  animation: innovBreathe 4s ease-in-out 1.4s infinite;
  transform:scale(0.95);
}
@keyframes innovDecoRise1{
  from { opacity:0; transform:translate(calc(-50% + 800px), calc(-50% - 380px + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% + 800px), calc(-50% - 380px)); }
}
@keyframes innovBreathe{
  0%, 100% { transform:scale(0.95); }
  50%      { transform:scale(1); }
}
/* 4.png - 오른쪽 하단, 스크롤 진입 시 아래에서 올라옴 + 회전 */
/* 6.png - 우상단 전체 보임 */
.innov-deco-topright{
  top:50%;left:50%;
  width:clamp(432px,48vw,816px);
  opacity:0;
  transform:translate(calc(-50% - 500px), calc(-50% + 0px));
}
.innov-deco-topright.animate{
  animation: innovDecoRise3 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s forwards;
}
@keyframes innovRock{
  0%, 100% { transform:rotate(0deg); }
  25%      { transform:rotate(10deg); }
  75%      { transform:rotate(-10deg); }
}
@keyframes innovDecoRise3{
  from { opacity:0; transform:translate(calc(-50% - 350px), calc(-50% + 0px + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% - 500px), calc(-50% + 0px)); }
}
/* 재진입형 fade-up 으로 전환되어 animate-done 클래스는 더 이상 사용하지 않음 */
.innov-deco-bottomright{
  top:50%;left:50%;
  width:clamp(200px,25vw,420px);
  opacity:0;
  transform:translate(calc(-50% + 600px), calc(-50% + 300px));
}
.innov-deco-bottomright.animate{
  animation: innovDecoRise2 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 1.0s forwards;
}
.innov-deco-bottomright.animate .innov-deco{
  transform:translate(40px, 0);
  animation: innovOrbit 30s linear 2.2s infinite;
}
@keyframes innovDecoRise2{
  from { opacity:0; transform:translate(calc(-50% + 600px), calc(-50% + 300px + 100vh)); }
  to   { opacity:1; transform:translate(calc(-50% + 600px), calc(-50% + 300px)); }
}
@keyframes innovOrbit{
  0%    { transform:translate(40px, 0) rotate(0deg); }
  12.5% { transform:translate(28px, -20px) rotate(45deg); }
  25%   { transform:translate(0, -28px) rotate(90deg); }
  37.5% { transform:translate(-28px, -20px) rotate(135deg); }
  50%   { transform:translate(-40px, 0) rotate(180deg); }
  62.5% { transform:translate(-28px, 20px) rotate(225deg); }
  75%   { transform:translate(0, 28px) rotate(270deg); }
  87.5% { transform:translate(28px, 20px) rotate(315deg); }
  100%  { transform:translate(40px, 0) rotate(360deg); }
}

/* Tech cards row */
.tech-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;
  width:100%;max-width:96rem;margin:0 auto;
}
.tech-card{
  text-align:center;padding:3.6rem 2rem;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);
  transition:transform .2s;
}
.tech-card:hover{transform:translateY(-4px)}
.tech-icon{
  margin-bottom:1.6rem;display:flex;align-items:center;justify-content:center;
}
.tech-card h3{
  font-size:1.65rem;font-weight:600;margin-bottom:0.8rem;
  font-family:var(--font-title);color:var(--ink);letter-spacing:-0.02em;
}
.tech-card p{
  font-family:var(--font-body);
  font-size:1.4rem;color:var(--ink-muted);line-height:1.45;font-weight:400;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer{
  font-family:var(--font-body),sans-serif;
  background:#0A1628;color:var(--text-light);
  padding:7.2rem var(--section-pad-x) 4.8rem;font-size:1.4rem;line-height:1.8;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;
}
.footer-inner{
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:4.8rem;
}
.footer-logo{
  font-family:var(--font-nav);font-size:1.6rem;
  letter-spacing:0.14rem;color:#fff;text-transform:uppercase;margin-bottom:2rem;
}
.footer-logo .site-logo-strong{font-weight:700;color:#fff;}
.footer-logo .site-logo-light{font-weight:300;color:rgba(255,255,255,0.92);}
.footer-col h4{
  font-family:var(--font-nav);font-size:1.15rem;font-weight:400;
  letter-spacing:0.12rem;text-transform:uppercase;color:#fff;margin-bottom:1.4rem;
}
.footer-col p,.footer-col address{font-style:normal;color:#a8b8d0;line-height:1.75;font-weight:400}
.footer-col address strong{color:#fff;font-weight:600}
.footer-col a{color:#a8b8d0;text-decoration:none;transition:color .2s;font-weight:400}
.footer-col a:hover{color:#fff}
.footer-nav{list-style:none}
.footer-nav li{margin-bottom:0.8rem}
.footer-nav a{
  font-family:var(--font-nav);font-size:1.25rem;font-weight:300;letter-spacing:0.06em;text-transform:uppercase;color:#c5d0e0;
}
.footer-nav a:hover{color:#fff}
.footer-bottom{
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin:3.2rem auto 0;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;
  font-family:var(--font-nav);font-size:1.05rem;font-weight:300;
  letter-spacing:0.04em;color:#6b7a90;
}

/* ══════════════════════════════════════════════
   SUB PAGE COMMON STYLES
   ══════════════════════════════════════════════ */
.sub-page-body{
  font-family:var(--font-body),-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
  margin:0;padding:0;overflow-x:hidden;
}
.sub-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:60px;
  background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(13,35,102,0.04);
}
.sub-nav .logo{
  font-size:13px;font-weight:800;letter-spacing:3px;color:var(--text);
  text-transform:uppercase;text-decoration:none;font-family:'Inter',sans-serif;
}
.sub-nav .nav-links{display:flex;gap:28px;list-style:none}
.sub-nav .nav-links a{
  color:var(--text-sub);text-decoration:none;font-size:10px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;transition:color .25s;
}
.sub-nav .nav-links a:hover,.sub-nav .nav-links a.active{color:var(--text)}
.sub-hero{
  background:var(--bg2);padding:12rem var(--section-pad-x) 6rem;text-align:center;
  position:relative;overflow:hidden;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;
}
.sub-hero h1{
  font-family:var(--font-title);font-size:clamp(3.2rem,4vw,5.6rem);
  font-weight:700;color:var(--text);margin-bottom:1.2rem;
  width:min(100%,var(--content-max));
}
.sub-hero p{font-size:1.8rem;color:var(--text-sub);max-width:var(--text-col-max);margin:0 auto;width:min(100%,var(--text-col-max))}
.sub-content{
  width:min(100%,var(--content-max));
  max-width:var(--content-max);
  margin:0 auto;
  padding:6rem var(--section-pad-x);
}
.sub-content h2{
  font-family:var(--font-title);font-size:3.6rem;font-weight:700;
  margin-bottom:1.2rem;color:var(--text);
}
.sub-footer{
  background:#0A1628;color:#7B9EBB;padding:4.8rem var(--section-pad-x);font-size:1.4rem;
  line-height:1.8;text-align:center;
}
.sub-footer a{color:#7B9EBB;text-decoration:none}
.sub-footer a:hover{color:#fff}

/* Newsroom cards */
.news-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;margin-top:32px;
}
.news-card{
  background:var(--bg-card);border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(13,35,102,0.10)}
.news-card a{text-decoration:none;color:inherit;display:block}

/* Career */
.career-intro{text-align:center;margin-bottom:48px}
.career-intro p{font-size:15px;color:var(--text-sub);line-height:1.8;max-width:700px;margin:12px auto 0}
.career-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin:40px 0}
.career-value-card{
  text-align:center;padding:32px 16px;background:var(--bg-card);
  border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .2s;
}
.career-value-card:hover{transform:translateY(-4px)}
.btn-primary{
  display:inline-block;padding:14px 36px;
  background:var(--accent);color:#fff;border:none;border-radius:8px;
  font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .2s,transform .2s;
}
.btn-primary:hover{background:#003ACC;transform:translateY(-2px)}

/* Store Locator */
.store-locator-wrap{display:grid;grid-template-columns:320px 1fr;gap:0;min-height:calc(100vh - 60px);margin-top:60px}
.store-sidebar{background:var(--bg2);padding:24px;overflow-y:auto;border-right:1px solid var(--border)}
.store-sidebar h2{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--text)}
.store-search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#fff;margin-bottom:16px;font-family:'Inter',sans-serif}
.store-list{list-style:none}
.store-list li{padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}
.store-list li:hover{background:rgba(0,85,255,0.04)}
.store-list li h4{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.store-list li p{font-size:11px;color:var(--text-sub);line-height:1.5}
.store-map{width:100%;height:100%;min-height:500px}

/* ══════════════════════════════════════════════
   RESPONSIVE (라이브 layout.css html 스케일과 동일 단계)
   ══════════════════════════════════════════════ */
@media (max-width:1199.98px){
  html{font-size:59.375%;}
}
@media (max-width:991.98px){
  html{font-size:56.25%;}
}
@media (max-width:767.98px){
  html{font-size:53.125%;}
}
@media (max-width:575.98px){
  html{font-size:50%;}
}

@media (max-width:768px){
  .site-nav{
    grid-template-columns:1fr auto;
    padding:0 20px;
  }
  .site-nav-links{display:none}
  .hero-scroll-hint{display:none}
  .story-scroll-hint{display:none}
  .hero-slide-ui{bottom:1.6rem;gap:0.8rem;}
  .hero-slide-nub{width:4rem;height:4rem;}
  .section{padding:6rem 2.4rem;min-height:auto;min-height:100svh;}
  html.snap-enabled .section{height:calc(100svh - var(--nav-h));min-height:calc(100svh - var(--nav-h));}
  html.snap-enabled .section.section-story{
    height:calc(100svh - var(--nav-h));
    min-height:calc(100svh - var(--nav-h));
    max-height:calc(100svh - var(--nav-h));
  }
  html.snap-enabled .site-footer{min-height:calc(100svh - var(--nav-h));}
  html.snap-enabled .main-scroll{height:calc(100svh - var(--nav-h));}
  .promise-row{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:1fr;max-width:32rem;}
  .specs-row{grid-template-columns:repeat(2,1fr);}
  .compare-wrap{grid-template-columns:1fr;gap:1.6rem;}
  .compare-vs{padding:0.6rem 0;font-size:1.4rem;}
  .process-row{grid-template-columns:repeat(2,1fr);}
  .badges-row{grid-template-columns:1fr;}
  .nongmo-wrap{grid-template-columns:1fr;}
  .tech-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .store-locator-wrap{grid-template-columns:1fr}
  .store-sidebar{max-height:300px}
  .news-grid{grid-template-columns:1fr}
  .deco-amoeba-cluster{display:none}

  /* ── Hero deco: 모바일 재배치 (애니메이션 유지) ── */
  .hero-deco-1{
    width:clamp(245px, 67vw, 420px);
    transform:translate(calc(-50% - 35vw),calc(-50% - 28vh + 100vh));
  }
  .hero-deco-2{
    width:clamp(350px, 97vw, 665px);
    transform:translate(calc(-50% + 20vw),calc(-50% + 45vh + 100vh));
  }
  .hero-content{
    margin-bottom:4vh;
  }

  /* ── Mission deco: 축소 + vw/vh 기반 배치 (애니메이션 유지) ── */
  .mission-deco-wrap{
    width:clamp(478px, 103vw, 853px);
    transform:translate(calc(-50% - 32vw), calc(-50% + 43vh));
  }
  .mission-deco-wrap-2{
    width:clamp(120px, 30vw, 240px);
    transform:translate(calc(-50% + 28vw), calc(-50% - 35vh));
  }

  /* ── Science deco: 축소 + 재배치 (애니메이션 유지) ── */
  .science-deco-topleft{
    width:clamp(229px, 45vw, 368px);
    height:clamp(229px, 45vw, 368px);
    transform:translate(calc(-50% - 40vw), calc(-50% + 43vh));
  }
  .science-deco-bottomright{
    width:clamp(400px, 75vw, 700px);
    transform:translate(calc(-50% + 30vw), calc(-50% + 45vh));
  }

  /* ── Innovation deco: 축소 + vw/vh 기반 재배치 (애니메이션 유지) ── */
  .innov-deco-topleft{
    width:clamp(128px, 26vw, 240px);
    transform:translate(calc(-50% + 34vw), calc(-50% - 42vh));
  }
  .innov-deco-topright{
    width:clamp(364px, 82vw, 683px);
    transform:translate(calc(-50% - 28vw), calc(-50% + 3vh));
  }
  .innov-deco-bottomright{
    width:clamp(162px, 36vw, 306px);
    transform:translate(calc(-50% + 28vw), calc(-50% + 36vh));
  }
  /* animate-done 클래스는 재진입형 전환으로 폐기 (위치는 일반 셀렉터에서 처리) */

  /* ── 모바일 @keyframes 재정의 (위치만 축소, 애니메이션 동일 유지) ── */
  @keyframes heroDecoRise1{
    from{opacity:0;transform:translate(calc(-50% - 35vw),calc(-50% - 28vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% - 35vw),calc(-50% - 28vh));}
  }
  @keyframes heroDecoRise2{
    from{opacity:0;transform:translate(calc(-50% + 20vw),calc(-50% + 45vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 20vw),calc(-50% + 45vh));}
  }
  /* [걸친 객체 재등장 / 모바일] heroDeco2 Mission 재진입 — vw/vh 기반 정착 좌표.
     데스크톱(+595px,+540px)에 대응. 수평은 Hero 모바일과 동일(+20vw),
     수직은 Hero 모바일 정착(+45vh)보다 약간 아래(+50vh)에 내려앉도록. */
  /* [v3 정합 2026-06-11 / 코비] 모바일 재등장 정착을 v3 heroDecoRise2 모바일 정착(+20vw,+45vh)과 일치. */
  @keyframes heroDeco2MissionReturn{
    from{opacity:0;transform:translate(calc(-50% + 20vw),calc(-50% + 45vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 20vw),calc(-50% + 45vh));}
  }
  @keyframes missionDecoRise1{
    from{opacity:0;transform:translate(calc(-50% - 32vw),calc(-50% + 43vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% - 32vw),calc(-50% + 43vh));}
  }
  @keyframes missionDecoRise2{
    from{opacity:0;transform:translate(calc(-50% + 28vw),calc(-50% - 35vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 28vw),calc(-50% - 35vh));}
  }
  @keyframes scienceDecoRise{
    from{opacity:0;transform:translate(calc(-50% - 40vw),calc(-50% + 43vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% - 40vw),calc(-50% + 43vh));}
  }
  @keyframes scienceDecoRise2{
    from{opacity:0;transform:translate(calc(-50% + 30vw),calc(-50% + 45vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 30vw),calc(-50% + 45vh));}
  }
  @keyframes innovDecoRise1{
    from{opacity:0;transform:translate(calc(-50% + 34vw),calc(-50% - 42vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 34vw),calc(-50% - 42vh));}
  }
  @keyframes innovDecoRise3{
    from{opacity:0;transform:translate(calc(-50% - 18vw),calc(-50% + 3vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% - 28vw),calc(-50% + 3vh));}
  }
  @keyframes innovDecoRise2{
    from{opacity:0;transform:translate(calc(-50% + 28vw),calc(-50% + 36vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 28vw),calc(-50% + 36vh));}
  }
  /* Innovation orbit 시작 위치 모바일 동기화 */
  .innov-deco-bottomright.animate .innov-deco{
    transform:translate(20px, 0);
  }
  @keyframes innovOrbit{
    0%   {transform:translate(20px,0) rotate(0deg);}
    12.5%{transform:translate(14px,-10px) rotate(45deg);}
    25%  {transform:translate(0,-14px) rotate(90deg);}
    37.5%{transform:translate(-14px,-10px) rotate(135deg);}
    50%  {transform:translate(-20px,0) rotate(180deg);}
    62.5%{transform:translate(-14px,10px) rotate(225deg);}
    75%  {transform:translate(0,14px) rotate(270deg);}
    87.5%{transform:translate(14px,10px) rotate(315deg);}
    100% {transform:translate(20px,0) rotate(360deg);}
  }

  /* ── [옵션 C 범용화 / 모바일] 신규 퇴장·재등장 키프레임 (vw/vh 기반, 데스크톱 대응) ──
     퇴장: 정착 위치에서 위로 -150vh(모바일은 객체가 더 커 화면 비율↑ → 충분히 클리어).
     재등장: 다음 섹션 뷰포트(현재 섹션 중심 +1 섹션 ≈ +vh)에 들어오도록 양(+) 큰 수직 오프셋.
            heroDeco2 모바일 재등장(+50vh)과 동일 톤. */
  @keyframes missionDecoExit{
    from{transform:translate(calc(-50% - 32vw),calc(-50% + 43vh));}
    to  {transform:translate(calc(-50% - 32vw),calc(-50% + 43vh - 150vh));}
  }
  /* [v3 정합 2026-06-11 / 코비] 모바일 재등장 정착을 v3 missionDecoRise1 모바일 정착(-32vw,+43vh)과 일치. */
  @keyframes missionDecoScienceReturn{
    from{opacity:0;transform:translate(calc(-50% - 32vw),calc(-50% + 43vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% - 32vw),calc(-50% + 43vh));}
  }
  @keyframes scienceDecoTopleftExit{
    from{transform:translate(calc(-50% - 40vw),calc(-50% + 43vh));}
    to  {transform:translate(calc(-50% - 40vw),calc(-50% + 43vh - 150vh));}
  }
  @keyframes scienceDecoBottomrightExit{
    from{transform:translate(calc(-50% + 30vw),calc(-50% + 45vh));}
    to  {transform:translate(calc(-50% + 30vw),calc(-50% + 45vh - 150vh));}
  }
  /* [v3 정합 2026-06-11 / 코비] 9.png Standard 재등장 모바일 정착을 v3 scienceDecoRise2 모바일
     정착(+30vw,+45vh)과 일치. (이전 +36vw,+85vh 은 시안 없는 추정값) — 동작/타이밍 유지, 위치만 교정. */
  @keyframes scienceDecoStandardReturn{
    from{opacity:0;transform:translate(calc(-50% + 30vw),calc(-50% + 45vh + 100vh));}
    to  {opacity:1;transform:translate(calc(-50% + 30vw),calc(-50% + 45vh));}
  }

  /* ── Story 횡스크롤 패널 모바일 보정 ── */
  .story-h-slide{
    padding-bottom:8vh;
    padding-left:2rem;
    padding-right:2rem;
  }
  html.snap-enabled .section.section-story{
    padding:1.2rem 0 0.8rem;
  }

  /* ── Story footer(도트/화살표) 모바일에서 숨김 ── */
  .story-h-footer{
    display:none;
  }

  /* ── 슬라이드 메뉴 모바일 너비 ── */
  .slide-menu{
    width:min(300px, 85vw);
    padding:24px 28px;
  }

  /* ── Dot indicator (태블릿: 축소 + 우측 안쪽) ── */
  .dot-indicator{right:12px;gap:10px;}
  .dot-indicator .dot{width:6px;height:6px;border-width:1.5px;}

  /* ── 기타 여백 조정 ── */
  .section-desc{margin-bottom:2.4rem;}
  .quote-block{padding:3rem 2rem;}
  .quote-block p{font-size:clamp(1.8rem,5vw,2.8rem);}
  .story-body{font-size:clamp(1.5rem,3.8vw,2rem);}
  .section-desc-prose{font-size:clamp(1.4rem,3.5vw,1.8rem);}
}

/* ── 480px 이하: 더 작은 화면 추가 보정 ── */
@media (max-width:480px){
  .hero-headline{font-size:clamp(3.2rem,10vw,4.8rem);}
  .section-title{font-size:clamp(2.6rem,7vw,4rem);}
  .section-title-story{font-size:clamp(2.4rem,6.5vw,3.6rem);}
  .story-heading{font-size:clamp(2.4rem,6.5vw,3.6rem);}
  .science-pullquote{font-size:clamp(2.4rem,6.5vw,3.6rem);}
  .process-row{grid-template-columns:1fr;}
  .specs-row{grid-template-columns:1fr;}
  .promise-row{grid-template-columns:repeat(2,1fr);gap:1rem;}
  .mission-tagline{font-size:clamp(1.4rem,4vw,1.8rem);}

  /* 장식 객체 (vw/vh 기반 자동 축소, 크기 추가 조정) */
  .hero-deco-1{width:clamp(250px,75vw,400px);}
  .hero-deco-2{width:clamp(375px,120vw,650px);}
  .hero-content{
    margin-bottom:2vh;
    padding:0 1.6rem;
  }
  .mission-deco-wrap{width:clamp(488px,117vw,878px);transform:translate(calc(-50% - 32vw),calc(-50% + 48vh));}
  .mission-deco-wrap-2{width:clamp(112px,30vw,225px);transform:translate(calc(-50% + 28vw),calc(-50% - 38vh));}
  .science-deco-topleft{
    width:clamp(233px,53vw,373px);
    height:clamp(233px,53vw,373px);
    transform:translate(calc(-50% - 38vw), calc(-50% + 44vh));
  }
  .science-deco-bottomright{width:clamp(360px,76vw,600px);}
  .innov-deco-topleft{width:clamp(150px,35vw,250px);}
  .innov-deco-topright{width:clamp(390px,91vw,715px);transform:translate(calc(-50% - 28vw),calc(-50% + 2vh));}
  .innov-deco-bottomright{width:clamp(175px,40vw,300px);}

  /* Story 패널 여백 더 축소 */
  .story-h-slide{
    padding-bottom:5vh;
    padding-left:1.6rem;
    padding-right:1.6rem;
  }

  /* 카드/그리드 간격 축소 */
  .spec-card{padding:2rem 1.2rem;}
  .step-circle{width:6.4rem;height:6.4rem;font-size:2rem;}
  .tech-card{padding:2.4rem 1.4rem;}
  .badge{padding:2rem 1.2rem;}
  .compare-card{padding:1.6rem 1.4rem;}

  /* 슬라이드 메뉴 */
  .slide-menu{
    width:min(280px, 90vw);
    padding:20px 22px;
  }
  .slide-menu-links a{
    padding:14px 0;
    font-size:1.15rem;
  }
  .slide-menu-shop-toggle{
    padding:14px 0;
    font-size:1.15rem;
  }
  .brand-logo{height:28px;max-width:70px;}
  .brand-name{font-size:0.85em;}

  /* 푸터 */
  .site-footer{padding:4.8rem 2rem 3.2rem;}
  .footer-inner{gap:2.4rem;}

  /* nav 패딩 */
  .site-nav{padding:0 16px;}

  /* ── Dot indicator (모바일 480px 이하: 더 축소) ── */
  .dot-indicator{right:8px;gap:8px;}
  .dot-indicator .dot{width:5px;height:5px;border-width:1px;}
}

/* ══════════════════════════════════════════════
   접근성: prefers-reduced-motion
   ── 모션 감소 설정 시 deco fade-up / 부가모션 정지, 즉시 최종 상태 표시
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* fade-up 자체 정지 + 즉시 최종 상태 노출 */
  .hero-deco-1,
  .hero-deco-1.animate,
  .hero-deco-1.exiting,
  .hero-deco-2,
  .hero-deco-2.animate,
  .hero-deco-2.exiting,
  .hero-deco-2.mission-return,
  .mission-deco-wrap,
  .mission-deco-wrap.animate,
  .mission-deco-wrap.exiting,
  .mission-deco-wrap.science-return,
  .science-deco-topleft,
  .science-deco-topleft.animate,
  .science-deco-topleft.exiting,
  .science-deco-bottomright,
  .science-deco-bottomright.animate,
  .science-deco-bottomright.exiting,
  .science-deco-bottomright.standard-return,
  .innov-deco-topright,
  .innov-deco-topright.animate,
  .innov-deco-bottomright,
  .innov-deco-bottomright.animate {
    animation: none !important;
    opacity: 1 !important;
  }
  /* 모션 감소 시 hero deco는 최종(정착) 위치로 즉시 표시 */
  .hero-deco-1, .hero-deco-1.animate, .hero-deco-1.exiting {
    transform: translate(calc(-50% - 672px), calc(-50% - 144px)) !important;
    opacity: 1 !important;
  }
  .hero-deco-2, .hero-deco-2.animate, .hero-deco-2.exiting {
    transform: translate(calc(-50% + 595px), calc(-50% + 486px)) !important;
    opacity: 1 !important;
  }
  /* [걸친 객체 재등장] 모션 감소 시 재진입 객체는 각자의 "다음 섹션 정착 위치"로 즉시 표시
     (.exiting/.animate 보다 셀렉터 뒤에 둬 우선 적용). 범용화된 세 걸친 객체 모두 처리. */
  /* [v3 정합 2026-06-11 / 코비] 모션 감소 시 재등장 객체 정착 좌표를 각 v3 Rise 정착값과 일치
     (키프레임 to 값과 동일). heroDeco2=+595/+486, mission-deco=-800/+378, 9.png=+650px/+50%. */
  .hero-deco-2.mission-return {
    transform: translate(calc(-50% + 595px), calc(-50% + 486px)) !important;
    opacity: 1 !important;
  }
  .mission-deco-wrap.science-return {
    transform: translate(calc(-50% - 800px), calc(-50% + 378px)) !important;
    opacity: 1 !important;
  }
  .science-deco-bottomright.standard-return {
    transform: translate(calc(-50% + 650px), calc(-50% + 50%)) !important;
    opacity: 1 !important;
  }
  /* 스토리 텍스트 등장 시퀀스 정지 — 시간차 없이 즉시 최종 상태 표시(세 섹션 공통, 접근성 일관) */
  .story-text-anim,
  .story-text-anim.in,
  .mission-text-anim,
  .mission-text-anim.in,
  .story-text-anim.section-label.in,
  .story-text-anim.section-title-story.in,
  .story-text-anim.mission-tagline.in,
  .story-text-anim.section-desc-prose.in {
    transition:none !important;
    transition-delay:0s !important;
    opacity:1 !important;
    transform:none !important;
  }
  /* 부가 모션(spin / breathe / orbit) 정지 — 재등장 변형(.science-return/.standard-return) 포함 */
  .mission-deco-wrap.animate .mission-deco,
  .mission-deco-wrap.science-return .mission-deco,
  .science-deco-bottomright.animate .science-deco-img,
  .science-deco-bottomright.standard-return .science-deco-img,
  .innov-deco-bottomright.animate .innov-deco {
    animation: none !important;
  }
}