/* MEGAM — One-page Video Scroll */
/* Gmarket Sans — 헤드라인 디스플레이 서체 (jsDelivr CDN) */
@font-face{font-family:'Gmarket Sans';font-weight:300;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff')}
@font-face{font-family:'Gmarket Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff')}
@font-face{font-family:'Gmarket Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff')}
:root{
  --accent:#F39907; /* ★ 메가엠 상징컬러(주황) — 이 코드 한 줄만 바꾸면 사이트 전체 주황색이 바뀝니다 */
  --ink:#fff;
  --dim:rgba(255,255,255,.68);
  --faint:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.22);
  --ease:cubic-bezier(.22,1,.36,1);
  /* 서체: 기본 본문 프리텐다드 / 헤드라인 지마켓 산스(모던 디스플레이) / 숫자·라벨 고로테스크 */
  --sans:'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --display:'Gmarket Sans','Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --nums:'Space Grotesk','Pretendard',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:#0a0a0b;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- scroll container ---------- */
.scroller{
  height:100vh;height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y proximity; /* 내용이 긴 섹션도 끝까지 스크롤 가능 */
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none}
section{
  position:relative;
  min-height:100vh;min-height:100dvh; /* 내용이 화면보다 길면 섹션이 늘어남 — 위쪽 잘림 방지 */
  scroll-snap-align:start;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* ---------- video ---------- */
.bg{position:absolute;inset:0;overflow:hidden}
.bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.bg video.on{opacity:1}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* 배경 이미지 — 영상 대신 사용 가능 */
.bg::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,#181b20 0%,#0a0a0b 62%)}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.62) 100%)}

/* ---------- fixed chrome ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px clamp(24px,4vw,56px);
  mix-blend-mode:difference;
}
.brand{font-weight:800;letter-spacing:.42em;font-size:15px;color:#fff;text-decoration:none}
.top .tag{font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.7);text-transform:uppercase}

/* left indicator */
.rail{
  position:fixed;right:clamp(18px,2.6vw,40px);top:50%;transform:translateY(-50%);z-index:50; /* 우측 고정 — 본문과 겹침 방지 */
  display:flex;flex-direction:column;gap:18px;
}
.rail a{
  display:flex;flex-direction:row-reverse;align-items:center;gap:12px;text-decoration:none;
  color:var(--faint);transition:color .25s;
}
.rail .dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;transition:all .25s var(--ease);
  position:relative;
}
/* 호버/현재 섹션: 주황 글로우 점 + 확장 */
.rail .lbl{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transform:translateX(6px);transition:all .35s var(--ease);
  white-space:nowrap;
}
.rail a:hover .dot{
  background:#ffb52e;transform:scale(1.35);
  box-shadow:0 0 10px rgba(243,153,7,.8),0 0 22px rgba(243,153,7,.4);
}
.rail a.on{color:var(--accent)} /* 현재 섹션 표시는 브랜드 주황 */
.rail a.on .dot{
  background:#ffb52e;transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(243,153,7,.2),0 0 12px rgba(243,153,7,.9),0 0 28px rgba(243,153,7,.45);
}
.rail a:hover{color:#ffb52e}
.rail a.on .lbl,.rail a:hover .lbl{opacity:1;transform:none;text-shadow:0 0 14px rgba(243,153,7,.5)}

/* ---------- copy ---------- */
.copy{
  position:relative;z-index:5;
  padding:clamp(100px,13vh,150px) clamp(24px,5vw,72px) clamp(84px,13vh,140px); /* 상단 여백 — 긴 섹션도 제목이 헤더에 가려지지 않음 */
  max-width:none; /* 카피 영역 좌우를 끝까지 사용 — 제목이 불필요하게 두 줄로 끊기지 않게 */
}
/* 커버리지 설명은 한 줄로 쭉 나열 */
#coverage .sub{max-width:1050px}

.kicker{
  font-family:var(--nums);font-weight:500;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;
}
h1,h2{font-family:var(--display);font-weight:300;line-height:1.18;letter-spacing:-.01em;word-break:keep-all} /* 줄바꿈은 단어 단위로 — 글자 하나만 떨어지는 현상 방지 */
h1{font-size:clamp(26px,2.6vw,46px)}
h2{font-size:clamp(38px,6vw,84px)}
/* 굵은 줄은 같은 서체의 볼드로 — 라이트와 대비 */
h1 b,h2 b{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.sub{
  margin-top:26px;max-width:940px;
  font-size:clamp(14px,1.35vw,17px);line-height:1.78;color:var(--dim);font-weight:300;
}
/* 팀 섹션 설명은 한 줄로 */
@media (min-width:1100px){ #team .sub{max-width:none;white-space:nowrap} }
.cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
/* 판매 섹션: 주요 고객사(윗줄) / 브랜드 사례 3개(아랫줄) 2단 배치 */
#sales .cta{flex-direction:column;align-items:flex-start;gap:12px}
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;
  padding:16px 32px;font-size:14.5px;letter-spacing:.01em;font-weight:600;
  text-decoration:none;border-radius:8px;transition:all .22s var(--ease);
}
/* 메인 버튼: 브랜드 주황 그라디언트 + 호버 시 부상/글로우/광택 스윕 */
.btn-solid{background:linear-gradient(120deg,#ffb52e,var(--accent) 60%,#e07f00);color:#fff}
.btn-solid::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-14deg);transition:left .45s ease .05s;pointer-events:none;
}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(243,153,7,.42)}
.btn-solid:hover::after{left:130%}
.btn-ghost{color:#ffd58f;box-shadow:inset 0 0 0 1px rgba(243,153,7,.5)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(243,153,7,.12);transform:translateY(-3px)}
/* 브랜드 사례 버튼: 로고 칩 + 호버 반전/부상 */
.btn-case{font-family:var(--nums);font-weight:500;gap:16px;padding-left:14px;transition:transform .3s,background .3s,color .3s,box-shadow .3s}
.btn-case:hover{background:#fff;color:#0a0a0b;box-shadow:inset 0 0 0 1px #fff;transform:translateY(-4px)}
.bc-logo{
  background:#fff;border-radius:4px;padding:6px 10px;height:42px;width:126px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.bc-logo img{max-height:24px;max-width:106px;object-fit:contain;display:block}
/* 문자형 로고 칩 (주요 고객사 버튼의 MEGAM) */
.bc-mega{font-size:14px;font-weight:800;letter-spacing:.22em;color:#0a0a0b;padding:0 12px}
.btn-case:hover .bc-logo{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* section reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
section.shown .rv{opacity:1;transform:none}
section.shown .d1{transition-delay:.15s}
section.shown .d2{transition-delay:.32s}
section.shown .d3{transition-delay:.5s}
section.shown .d4{transition-delay:.66s}

/* hero extras */
.scroll-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;
  font-size:10px;letter-spacing:.34em;color:var(--dim);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint::after{
  content:'';width:1px;height:44px;
  background:linear-gradient(180deg,var(--dim),transparent);
  animation:drip 2s var(--ease) infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* 내부 섹션 스크롤 힌트: 하단 콘텐츠와 겹치지 않는 콤팩트 버전 (히어로는 기존 크기 유지) */
section:not(#hero) .scroll-hint{bottom:22px;gap:8px;font-size:9px}
section:not(#hero) .scroll-hint::after{height:28px}

/* ---------- team 5대 팀별 체계 (프리미엄 카드 리스트) ---------- */
.t-teams{
  margin:clamp(22px,3.2vh,34px) auto 0;
  max-width:1060px;counter-reset:team;
  display:flex;flex-direction:column;gap:12px;
}
.t-row{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(150px,210px) 1fr;gap:clamp(14px,2vw,26px);
  padding:clamp(14px,1.9vh,20px) clamp(16px,2vw,26px);
  align-items:center;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  backdrop-filter:none;
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),background .25s,border-color .25s,box-shadow .3s;
}
/* 좌측 번호 배지 — 원형, 호버 시 주황으로 채워짐 */
.t-row::before{
  counter-increment:team;content:'0' counter(team);
  width:clamp(44px,4.4vw,56px);height:clamp(44px,4.4vw,56px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--nums);font-weight:700;font-size:clamp(14px,1.3vw,18px);
  color:var(--accent);border:1.5px solid rgba(243,153,7,.5);
  background:rgba(243,153,7,.08);
  transition:all .3s var(--ease);
}
/* 상단 주황 드로잉 라인 */
.t-row::after{
  content:'';position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),rgba(243,153,7,.45) 55%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
section.shown .t-row{opacity:1;transform:none}
section.shown .t-row::after{transform:scaleX(1)}
section.shown .t-row:nth-child(1){transition-delay:.55s}
section.shown .t-row:nth-child(2){transition-delay:.63s}
section.shown .t-row:nth-child(3){transition-delay:.71s}
section.shown .t-row:nth-child(4){transition-delay:.79s}
section.shown .t-row:nth-child(5){transition-delay:.87s}
section.shown .t-row:nth-child(1)::after{transition-delay:.65s}
section.shown .t-row:nth-child(2)::after{transition-delay:.73s}
section.shown .t-row:nth-child(3)::after{transition-delay:.81s}
section.shown .t-row:nth-child(4)::after{transition-delay:.89s}
section.shown .t-row:nth-child(5)::after{transition-delay:.97s}
/* 호버: 부상 + 주황 그라데이션 + 번호 배지 채움 + 팀명 글로우 */
.t-row:hover{
  background:linear-gradient(90deg,rgba(243,153,7,.16),rgba(243,153,7,.04) 60%,transparent);
  border-color:rgba(243,153,7,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  transform:translateY(-3px);
}
.t-row:hover::before{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 0 22px rgba(243,153,7,.55);
}
.t-row:hover .t-name{transform:translateX(6px);text-shadow:0 0 22px rgba(243,153,7,.5)}
.t-name{
  font-size:clamp(18px,1.9vw,25px);font-weight:800;letter-spacing:.02em;
  color:var(--accent);white-space:nowrap;transition:transform .3s var(--ease),text-shadow .3s;
}
/* 업무 목록: 칩 형태 — 항목당 2줄(세로 스택)로 전 부서 통일 */
.t-works{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;transition:transform .3s var(--ease)}
.t-works li{
  position:relative;
  font-size:clamp(11.5px,1.05vw,13.5px);line-height:1.5;font-weight:400;letter-spacing:.005em;
  color:rgba(255,255,255,.82);word-break:keep-all;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:7px 14px;
  transition:border-color .25s,background .25s;
}
.t-row:hover .t-works li{border-color:rgba(243,153,7,.35);background:rgba(243,153,7,.08)}
@media (max-width:720px){
  .t-teams{max-width:none;gap:10px}
  .t-row{
    grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    gap:6px 12px;padding:14px 16px 16px;
  }
  .t-row::before{width:38px;height:38px;font-size:12.5px}
  .t-name{font-size:16.5px;align-self:center}
  .t-works{grid-column:1/-1;margin-top:8px;flex-wrap:wrap} /* 모바일은 2줄 허용 */
  .t-works li{font-size:11px;padding:6px 11px;white-space:normal}
}

/* stats band */
.stats{
  position:relative;z-index:5;
  display:flex;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  padding:0 clamp(24px,5vw,72px) clamp(84px,11vh,120px);
}
/* 수치 카드: 기본 글래스 카드 — 호버 시 주황 그라디언트 채움 + 광택 스윕 */
.stat{
  position:relative;overflow:hidden;
  min-width:clamp(150px,14vw,210px);
  padding:22px 26px 20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.stat::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#ffb52e,var(--accent) 55%,#e07f00);
  opacity:0;transform:translateY(101%);
  transition:transform .26s var(--ease),opacity .2s;
}
.stat::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:36%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-14deg);transition:left .45s ease .06s;pointer-events:none;
}
.stat:hover{transform:translateY(-5px);border-color:rgba(255,181,46,.75);box-shadow:0 18px 42px rgba(0,0,0,.45),0 0 26px rgba(243,153,7,.35)}
.stat:hover::before{opacity:1;transform:translateY(0)}
.stat:hover::after{left:130%}
.stat .n,.stat .t{position:relative;z-index:2}
.stat:hover .n,.stat:hover .n span,.stat:hover .t{color:#fff}
.stat .n{font-family:var(--nums);font-size:clamp(34px,4vw,56px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .2s}
.stat .n .cv{font-style:normal}
.stat .n span{font-size:.5em;font-weight:300;color:var(--dim);margin-left:4px;transition:color .2s}
.stat .t{margin-top:8px;font-size:12px;letter-spacing:.1em;line-height:1.5;color:var(--faint);transition:color .2s}

/* 모바일: 수치 카드 3개 가로 1줄 */
@media (max-width:720px){
  .stats,.b-stats{flex-wrap:nowrap;gap:6px;padding-left:10px;padding-right:10px}
  .stat{min-width:0;flex:1 1 0;padding:14px 8px 12px}
  .stat .n{font-size:clamp(18px,5.5vw,26px);white-space:nowrap}
  .stat .n span{font-size:.46em;margin-left:2px}
  .stat .t{margin-top:6px;font-size:9.5px;letter-spacing:.03em;line-height:1.45;word-break:keep-all}
}

/* 강조(주황) — 문구 안에서 <em>…</em> 로 감싸면 이 색으로 표시 */
h1 em,h2 em,.sub em,.kicker em{font-style:normal;color:var(--accent)}
h1 em,h2 em{font-weight:700}
/* 주황 채움 버튼 — 호버 시 검정 테두리 투명 박스 + 검정 글씨 */
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#ffae1f;color:#0a0a0b;box-shadow:0 8px 22px rgba(243,153,7,.45);transform:translateY(-2px)}
/* 보조 설명 안의 리드 라벨 / 굵은 흰 줄 */
.sub .lead{font-family:var(--nums);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);display:inline-block;margin-bottom:8px}
.sub b.w{color:#fff;font-weight:600}

/* ── 판매 역량: 브랜드 보텍스 갤러리 (3D 원형 궤도 회전) ── */
.vx{
  position:relative;z-index:5;width:100%;overflow:visible;
  height:calc(var(--vx-item,116px)*2 + clamp(16px,2.6vh,28px) + 30px); /* 2줄 궤도 + 하단 DRAG 힌트 전용 영역 */
  margin:0 0 clamp(2px,.6vh,6px);
  perspective:1200px;perspective-origin:50% 50%;
  cursor:grab;touch-action:pan-y; /* 세로 스크롤은 통과, 좌우 드래그로 회전 */
  opacity:0;transform:scale(.92);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
/* sales: 다른 페이지처럼 자연스럽게 상하 스크롤 — 억지로 한 화면에 우겨넣지 않음 */
#sales h2{font-size:clamp(28px,3.6vw,64px)}
#sales .copy{padding-bottom:clamp(24px,4vh,44px)}
#sales .stats{padding-bottom:clamp(90px,12vh,130px);margin-top:clamp(34px,5vh,56px)} /* 하단 SCROLL 힌트·보텍스 원과 충분한 간격 */
.vx.in{opacity:1;transform:none}
.vx.grabbing{cursor:grabbing}
.vx-row{
  position:absolute;left:0;right:0;height:0;
  transform-style:preserve-3d;
}
.vx-row.top{top:calc(var(--vx-item,116px)*.5)}
.vx-row.bot{top:calc(var(--vx-item,116px)*1.5 + clamp(16px,2.6vh,28px))}
.vx-item{
  position:absolute;left:50%;top:0;
  width:var(--vx-item,116px);height:var(--vx-item,116px);
  transform-style:preserve-3d;
  transition:opacity .3s;
  text-decoration:none;
  will-change:transform;
}
.vx-face{
  width:100%;height:100%;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:box-shadow .3s var(--ease);
}
.vx-face img{max-width:64%;max-height:64%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
/* 호버: 주황 링 + 글로우 (확대는 JS가 부드럽게 처리) */
.vx-item.hov .vx-face{
  box-shadow:0 22px 46px rgba(0,0,0,.5),0 0 0 3px var(--accent),0 0 26px rgba(243,153,7,.5);
}
.vx-hint{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font-family:var(--nums);font-size:9px;letter-spacing:.4em;color:var(--faint);
  pointer-events:none;opacity:.8;white-space:nowrap;
}
/* 로고 전체 화면 보기 (링크 없는 로고 클릭 시) */
.vx-light{
  position:fixed;inset:0;z-index:300;background:rgba(6,6,8,.9);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .35s var(--ease);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.vx-light.on{opacity:1}
.vx-light-in{
  width:min(46vmin,420px);height:min(46vmin,420px);border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 4px var(--accent);
  transform:scale(.7);transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.vx-light.on .vx-light-in{transform:none}
.vx-light-in img{max-width:62%;max-height:62%;object-fit:contain}
@media (max-width:720px){
  .vx{perspective:750px}
  .vx-hint{display:none} /* 모바일에선 하단 수치 카드와 겹쳐 숨김 */
}

/* ── 연혁 섹션: 세로 타임라인 ── */
#history .h-ghost{
  position:absolute;right:1vw;bottom:4vh;z-index:1;pointer-events:none;
  font-family:var(--nums);font-weight:700;font-size:clamp(90px,15vw,230px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);
}
.h-mini{position:relative;margin-top:clamp(22px,3.4vh,36px);margin-left:4px;padding-left:clamp(24px,2.8vw,40px);max-width:820px}
.h-mini::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(243,153,7,.06))}
.h-mini .hm{
  position:relative;display:grid;grid-template-columns:clamp(92px,11vw,140px) 1fr;
  gap:clamp(14px,2.4vw,36px);padding:clamp(10px,1.5vh,15px) clamp(8px,1vw,16px);
  border-radius:8px;align-items:baseline;
  opacity:0;transform:translateX(-18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .35s;
}
section.shown .h-mini .hm{opacity:1;transform:none}
section.shown .h-mini .hm:nth-child(1){transition-delay:.55s}
section.shown .h-mini .hm:nth-child(2){transition-delay:.63s}
section.shown .h-mini .hm:nth-child(3){transition-delay:.71s}
section.shown .h-mini .hm:nth-child(4){transition-delay:.79s}
section.shown .h-mini .hm:nth-child(5){transition-delay:.87s}
section.shown .h-mini .hm:nth-child(6){transition-delay:.95s}
section.shown .h-mini .hm:nth-child(7){transition-delay:1.03s}
section.shown .h-mini .hm:nth-child(8){transition-delay:1.11s}
section.shown .h-mini .hm:nth-child(9){transition-delay:1.19s}
section.shown .h-mini .hm:nth-child(10){transition-delay:1.27s}
.h-mini .hm::before{
  content:'';position:absolute;left:calc(-1 * clamp(24px,2.8vw,40px) - 4px);top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#0a0a0b;border:2px solid var(--accent);
  transition:background .3s,box-shadow .3s;
}
.h-mini .hm:hover{background:rgba(243,153,7,.12)}
.h-mini .hm:hover::before{background:var(--accent);box-shadow:0 0 12px rgba(243,153,7,.7)}
/* 등장이 끝난 뒤(.settled)에는 호버 반응이 즉각 + 호버한 행만 확대 */
.h-mini .hm.settled{transition:opacity .3s var(--ease),transform .22s var(--ease),background .16s}
section.shown .h-mini .hm:hover{
  transform:scale(1.5);transform-origin:left center;z-index:2;
  background:rgba(12,12,14,.94);
  box-shadow:0 16px 42px rgba(0,0,0,.55),0 0 0 1px rgba(243,153,7,.4);
}
@media (max-width:720px){
  /* 모바일은 화면이 좁아 1.5배 시 옆으로 잘려서 확대폭만 줄임 */
  section.shown .h-mini .hm:hover{transform:scale(1.12)}
}
.h-mini .y{font-family:var(--nums);font-weight:700;font-size:clamp(15px,1.5vw,21px);color:var(--accent);white-space:nowrap}
.h-mini .t{font-size:clamp(12.5px,1.15vw,15px);font-weight:300;color:rgba(255,255,255,.8);word-break:keep-all;line-height:1.6}
@media (max-width:720px){
  #history .h-ghost{font-size:26vw;right:-4vw;bottom:2vh}
}

/* typographic (non-video) sections */
.solid{background:#0a0a0b}
.solid::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 85% 15%,rgba(255,255,255,.05),transparent 60%),
    radial-gradient(60% 50% at 10% 90%,rgba(255,255,255,.04),transparent 60%);
}
.logo-wall{
  position:relative;z-index:5;
  padding:0 clamp(24px,5vw,72px) clamp(70px,10vh,110px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin:0 clamp(24px,5vw,72px) clamp(84px,12vh,130px);
  background-clip:padding-box;
}
.logo-wall .cell{
  background:rgba(10,10,11,.9);padding:30px 22px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
  transition:background .4s var(--ease);
}
.logo-wall .cell:hover{background:rgba(255,255,255,.06)}
.logo-wall .cell .nm{font-size:15px;font-weight:600;letter-spacing:.04em}
.logo-wall .cell .tp{font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}

/* ---------- hamburger + slide menu ---------- */
.menu-btn{
  display:flex;align-items:center;gap:21px;
  background:none;border:none;cursor:pointer;color:#fff;
  font-family:inherit;
}
.menu-btn .bars{width:33px;display:flex;flex-direction:column;gap:7.5px}
.menu-btn .bars i{display:block;height:3px;background:#fff;transition:all .35s var(--ease)}
.menu-btn .bars i:nth-child(2){width:70%}
.menu-btn .bars i:nth-child(3){width:45%}
.menu-btn:hover .bars i{width:100%}
.menu-btn .m-label{font-size:13px;letter-spacing:.3em}
body.menu-open .top{z-index:95} /* 메뉴가 열려 있을 때도 닫기 버튼이 오버레이 위에 보이도록 (mix-blend-mode가 색 반전 처리) */
body.menu-open .menu-btn .bars i:nth-child(1){transform:translateY(10.5px) rotate(45deg)}
body.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
body.menu-open .menu-btn .bars i:nth-child(3){width:100%;transform:translateY(-10.5px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:rgba(0,0,0,0);transition:background .5s var(--ease);
}
.menu-panel{
  position:absolute;top:0;left:0;height:100%;
  width:min(520px,92vw);
  background:#fafaf8;color:#121214;
  transform:translateX(-102%);
  transition:transform .55s var(--ease);
  overflow-y:auto;
  padding:clamp(84px,12vh,120px) clamp(32px,5vw,64px) 48px;
}
body.menu-open .menu-overlay{pointer-events:auto;background:rgba(0,0,0,.45)}
body.menu-open .menu-panel{transform:none}
.menu-group{
  padding:24px 0;border-bottom:1px solid rgba(0,0,0,.08);
  /* 메뉴 열릴 때 그룹별 시차 등장 */
  opacity:0;transform:translateX(-18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
body.menu-open .menu-group{opacity:1;transform:none}
body.menu-open .menu-group:nth-child(1){transition-delay:.1s}
body.menu-open .menu-group:nth-child(2){transition-delay:.18s}
body.menu-open .menu-group:nth-child(3){transition-delay:.26s}
body.menu-open .menu-group:nth-child(4){transition-delay:.34s}
.menu-group:first-child{padding-top:0}
.menu-group .g-title{
  font-family:var(--nums);font-weight:500;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(0,0,0,.42);
  display:flex;align-items:baseline;gap:10px;
}
.menu-group .g-num{font-size:10px;color:var(--accent);font-weight:700}
.menu-links{margin-top:14px;display:flex;flex-direction:column;gap:3px}
.menu-links a{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 14px;margin:0 -14px;border-radius:6px;
  color:#121214;text-decoration:none;
  transition:background .25s,color .25s,transform .3s var(--ease);
}
.menu-links a .m-label{font-family:var(--display);font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.menu-links a .m-note{font-size:11.5px;color:rgba(0,0,0,.42);letter-spacing:.02em}
.menu-links a:hover{background:var(--accent);color:#fff;transform:translateX(4px)}
.menu-links a:hover .m-note{color:rgba(250,250,248,.6)}
.menu-foot{
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(0,0,0,.08);
  font-family:var(--nums);font-size:11px;color:rgba(0,0,0,.4);letter-spacing:.12em;line-height:2;
}

/* ---------- performance chart (SVG) ---------- */
.chart-wrap{
  position:relative;z-index:5;
  padding:0 clamp(24px,5vw,72px) clamp(84px,11vh,120px);
  display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:center;
}
.chart{
  width:100%;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:clamp(10px,1.4vw,22px);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.chart svg{width:100%;height:auto;display:block}
.c-base{stroke:rgba(255,255,255,.32);stroke-width:1}
.c-grid{stroke:rgba(255,255,255,.08);stroke-width:1;stroke-dasharray:2 6}
.c-unit{fill:rgba(255,255,255,.42);font-size:10px;letter-spacing:.16em}
.c-est{fill:rgba(255,255,255,.55);font-size:9.5px;letter-spacing:.08em;opacity:0;transition:opacity .5s var(--ease)}
section.shown .c-est{opacity:1}
.c-bar{
  fill:url(#cgBar);
  transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
  transition:transform 1s var(--ease);
}
.c-bar.hl{fill:url(#cgBarH)}
section.shown .c-bar{transform:scaleY(1)}
.c-area{fill:url(#cgArea);opacity:0;transition:opacity 1.2s ease .9s}
section.shown .c-area{opacity:1}
.c-line{
  fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) .4s;
}
section.shown .c-line{stroke-dashoffset:0}
.c-line.g{stroke:rgba(255,255,255,.55);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
section.shown .c-line.g{stroke-dashoffset:0}
.c-dot.g{fill:#0a0a0b;stroke:rgba(255,255,255,.65);stroke-width:2;r:3.5px}
.c-val.g{fill:rgba(255,255,255,.62);font-size:11px;font-weight:600}
.c-dot{
  fill:#0a0a0b;stroke:#fff;stroke-width:2.5;
  opacity:0;transition:opacity .5s var(--ease);
}
section.shown .c-dot{opacity:1}
.c-val{
  font-family:var(--nums);
  fill:#fff;font-size:13px;font-weight:700;
  opacity:0;transition:opacity .5s var(--ease);
}
section.shown .c-val{opacity:1}
.c-yr{font-family:var(--nums);fill:rgba(255,255,255,.5);font-size:11px;letter-spacing:.08em}
.c-yr.hl{fill:#fff;font-weight:600}
.c-dot.hl{filter:drop-shadow(0 0 6px rgba(255,255,255,.85))}
.c-val.hl{font-size:14px}
.chart-legend{display:flex;gap:22px;margin-bottom:18px;font-size:11.5px;letter-spacing:.1em;color:var(--dim)}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.chart-side .big{
  font-family:var(--nums);
  font-size:clamp(38px,4.6vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.02em;
  border-top:1px solid rgba(255,255,255,.4);padding-top:20px;
}
.chart-side .big span{font-family:var(--sans);font-weight:200;color:var(--dim)}
.chart-side .big em{font-style:normal;color:var(--accent)}
#performance .copy{padding-bottom:clamp(24px,3.5vh,44px)} /* 카피-차트 간극 축소 */
.chart-side p{margin-top:16px;font-size:13px;line-height:1.9;color:var(--dim);font-weight:300;letter-spacing:.01em}

/* ---------- channel coverage (호버·드래그 확장 패널) ---------- */
.acc-wrap{
  position:relative;z-index:5;
  padding:0 clamp(24px,5vw,72px) clamp(84px,11vh,120px);
}
.acc{display:flex;gap:clamp(8px,1vw,14px);height:clamp(320px,48vh,520px);cursor:grab;user-select:none;-webkit-user-select:none}
.acc:active{cursor:grabbing}
.acc-panel{
  position:relative;flex:1;min-width:0;
  border-radius:14px;overflow:hidden;cursor:pointer;
  background:#15161a;border:1px solid rgba(255,255,255,.08);
  transition:flex .55s var(--ease),height .55s var(--ease),border-color .4s,box-shadow .4s;
}
/* 확장 폭을 절반 이하로 — 접힌 패널도 내용이 보일 만큼 넓게 유지 */
.acc-panel.on{flex:1.75;border-color:rgba(243,153,7,.45);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.acc-panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.66);
  transition:filter .5s var(--ease),transform 1.2s var(--ease);
}
.acc-panel.on img{filter:grayscale(0) brightness(.88);transform:scale(1.06)}
.acc-panel .shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.88) 100%);
}
/* 상단 라벨: 칩 스타일 + 주황 번호 */
.acc-tag{
  position:absolute;top:16px;left:16px;right:16px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.24em;color:#fff;white-space:nowrap;
}
.acc-tag span:first-child{
  background:rgba(10,10,11,.55);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow:hidden;text-overflow:ellipsis;
}
.acc-panel.on .acc-tag span:first-child{border-color:rgba(243,153,7,.65);color:#ffcf7d}
.acc-tag .acc-no{font-family:var(--nums);font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.1em}
.acc-panel.on .acc-tag .acc-no{color:var(--accent)}
.acc-cap{position:absolute;left:20px;right:18px;bottom:20px}
.acc-cap h3{
  font-size:clamp(16px,1.55vw,23px);font-weight:700;letter-spacing:-.01em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.acc-cap p{
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.85);font-weight:300;
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .45s var(--ease),opacity .4s var(--ease) .06s,margin-top .4s var(--ease);
}
/* 자세히 보기 — 확장 시 표시되는 프리미엄 필 버튼 */
.acc-more{
  display:inline-flex;align-items:center;margin-top:12px;padding:8px 16px;
  background:rgba(243,153,7,.14);
  border:1px solid rgba(243,153,7,.55);border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.16em;color:#ffd58f;
  max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;margin-top:0;border-width:0;
  transition:max-height .45s var(--ease),opacity .4s var(--ease) .08s,margin .4s var(--ease),padding .4s var(--ease),background .25s,color .25s;
}
.acc-panel.on .acc-more{
  max-height:60px;opacity:1;margin-top:12px;padding:8px 16px;border-width:1px;
}
.acc-panel.on:hover .acc-more{background:var(--accent);color:#fff}
.acc-panel.on .acc-cap p{max-height:120px;opacity:1;margin-top:12px}
/* 접힌 패널: 제목 세로쓰기 */
.acc-panel:not(.on) .acc-cap{right:auto}
.acc-panel:not(.on) .acc-cap h3{
  writing-mode:vertical-rl;text-orientation:mixed;
  white-space:nowrap;letter-spacing:.06em;
  font-size:clamp(13px,1.2vw,17px);
}
/* 모바일·태블릿: 좌우 스와이프 스트립 — 모든 패널이 크게 보임 */
@media (max-width:900px){
  .acc{
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;height:clamp(300px,44vh,380px);
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .acc::-webkit-scrollbar{display:none}
  .acc-panel,.acc-panel.on{
    flex:0 0 76%;height:auto;scroll-snap-align:center;
  }
  .acc-panel img{filter:grayscale(.15) brightness(.8)}
  .acc-panel.on img{transform:none}
  .acc-panel:not(.on) .acc-cap h3{writing-mode:horizontal-tb}
  .acc-panel .acc-cap p{max-height:none;opacity:1;margin-top:10px}
  .acc-panel .acc-more{max-height:60px;opacity:1;margin-top:12px;padding:8px 16px;border-width:1px}
}

/* ---------- services (운영 방식 카드) ---------- */
.svc-cards{
  position:relative;z-index:5;
  padding:0 clamp(24px,5vw,72px) clamp(84px,11vh,120px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
}
.svc-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .22s var(--ease),border-color .22s,background .22s,box-shadow .22s;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#ffb52e,var(--accent));
  transition:width .32s var(--ease);
}
.svc-card::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:32%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent);
  transform:skewX(-14deg);transition:left .5s ease .05s;pointer-events:none;
}
.svc-card:hover{
  transform:translateY(-6px);
  border-color:rgba(243,153,7,.55);
  background:linear-gradient(165deg,rgba(243,153,7,.12),rgba(255,255,255,.03));
  box-shadow:0 18px 38px rgba(0,0,0,.4),0 0 24px rgba(243,153,7,.12);
}
.svc-card:hover::before{width:100%}
.svc-card:hover::after{left:130%}
.svc-no{
  font-size:clamp(34px,3.2vw,50px);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,181,46,.4);
  transition:color .22s,-webkit-text-stroke-color .22s,filter .22s;
}
.svc-card:hover .svc-no{color:var(--accent);-webkit-text-stroke:1px transparent;filter:drop-shadow(0 6px 16px rgba(243,153,7,.4))}
.svc-card h3{font-size:clamp(18px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;transition:color .22s}
.svc-card:hover h3{color:#ffcf7d}
.svc-desc{font-size:13px;line-height:1.7;color:var(--dim);font-weight:300;letter-spacing:-.01em}
.svc-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.svc-card li{
  font-size:12.5px;color:rgba(255,255,255,.78);font-weight:300;
  padding-left:16px;position:relative;transition:color .22s;
}
.svc-card li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:1px;background:rgba(255,181,46,.6);transition:width .22s}
.svc-card:hover li::before{width:12px}
.svc-target{
  margin-top:auto;padding-top:14px;border-top:1px dashed rgba(255,255,255,.16);
  font-size:11.5px;line-height:1.6;color:var(--faint);letter-spacing:.02em;
}
@media (max-width:900px){
  .svc-cards{grid-template-columns:1fr}
}

/* ---------- logistics detail cards ---------- */
.dt-cards{
  position:relative;z-index:5;
  margin:0 clamp(24px,5vw,72px) clamp(84px,11vh,120px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,22px);
}
.dt-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px) clamp(16px,1.8vw,22px);
  transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s;
}
.dt-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#ffb52e,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.dt-card::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:32%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-14deg);transition:left .45s ease .05s;pointer-events:none;
}
.dt-card:hover{
  transform:translateY(-5px);
  background:linear-gradient(160deg,rgba(243,153,7,.15),rgba(255,255,255,.04));
  border-color:rgba(243,153,7,.6);
  box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 20px rgba(243,153,7,.14);
}
.dt-card:hover::before{transform:scaleX(1)}
.dt-card:hover::after{left:130%}
.dt-head{grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,24px);color:var(--accent);letter-spacing:-.01em;margin-bottom:2px}
.dt-no{font-family:var(--nums);font-size:clamp(20px,1.9vw,28px);font-weight:700;color:var(--accent);margin-bottom:12px;opacity:.9;transition:filter .2s}
.dt-card:hover .dt-no{filter:drop-shadow(0 4px 10px rgba(243,153,7,.5))}
.dt-card h4{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.dt-card p{font-size:12px;line-height:1.65;color:var(--dim);font-weight:300}
/* 물류지 주소 — 화면 맨 아래 한 줄 */
.logi-addr{
  position:relative;z-index:5;
  margin:0 clamp(24px,5vw,72px) clamp(40px,6vh,64px);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px;letter-spacing:.06em;color:var(--dim);
}
@media (max-width:900px){
  .dt-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .dt-cards{grid-template-columns:1fr}
}

/* ---------- process (진행 절차 스텝) ---------- */
.steps{
  position:relative;z-index:5;
  margin:0 clamp(24px,5vw,72px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,30px);
}
.step{
  position:relative;
  border-top:1px solid rgba(255,255,255,.28);
  padding-top:clamp(18px,2.2vh,26px);
  transition:border-color .22s;
}
.step::before{
  content:'';position:absolute;top:-1px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,#ffb52e,var(--accent));
  transition:width .32s var(--ease);
}
.step:hover{border-top-color:rgba(243,153,7,.5)}
.step:hover::before{width:100%}
/* 단계 사이 연결 화살표 (그리드 간격 중앙에 배치) */
.step:not(:last-child)::after{
  content:'→';position:absolute;top:-6px;
  right:calc(-1 * clamp(16px,2vw,30px) / 2);transform:translateX(50%);
  font-size:11px;color:rgba(255,181,46,.55);line-height:1;
}
.step-no{
  font-family:var(--nums);
  font-size:clamp(30px,3vw,46px);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,181,46,.42);
  margin-bottom:clamp(12px,1.8vh,20px);
  transition:color .22s,-webkit-text-stroke-color .22s,filter .22s;
}
.step:hover .step-no{color:var(--accent);-webkit-text-stroke:1px transparent;filter:drop-shadow(0 6px 14px rgba(243,153,7,.45))}
.step h3{font-size:clamp(15px,1.35vw,19px);font-weight:700;letter-spacing:-.01em;margin-bottom:9px;transition:color .22s}
.step:hover h3{color:#ffcf7d}
.step p{font-size:12px;line-height:1.7;color:var(--dim);font-weight:300;letter-spacing:-.01em}
.proc-cta{
  position:relative;z-index:5;
  margin:clamp(34px,5.5vh,52px) clamp(24px,5vw,72px) 0;
  padding-bottom:clamp(84px,11vh,120px); /* 하단 스크롤 힌트와 겹침 방지 */
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{
    border-top:none;border-left:1px solid rgba(255,255,255,.28);
    padding:0 0 clamp(26px,4vh,38px) 22px;
  }
  /* 모바일: 세로 라인 따라 아래로 이어지는 화살표 */
  .step:not(:last-child)::after{
    content:'↓';top:auto;bottom:2px;left:-7px;right:auto;transform:none;
  }
  .step:last-child{padding-bottom:0}
  .step-no{margin-bottom:8px}
}

/* ---------- contact 응답 약속 한 줄 ---------- */
.c-promise{
  position:relative;z-index:5;
  margin-top:18px;padding-left:22px;
  font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.72);font-weight:300;
  word-break:keep-all;line-height:1.65; /* 모바일에서 단어 중간이 끊기지 않게 */
}
.c-promise::before{
  content:'✓';position:absolute;left:0;top:-1px;
  font-weight:700;color:var(--accent);
}

/* ---------- contact (2단: 문구 + 폼) ---------- */
.contact-grid{
  position:relative;z-index:5;width:100%;
  padding:110px clamp(24px,5vw,72px) clamp(48px,7vh,80px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,90px);
  align-items:end;
}
.c-form{
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.c-form h3{font-size:clamp(19px,1.8vw,25px);font-weight:700}
.c-form>p{font-size:12.5px;color:var(--dim);font-weight:300;margin-top:-8px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field label{font-size:10.5px;letter-spacing:.16em;color:var(--faint)}
.f-field input,.f-field textarea{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:3px;color:#fff;font-family:inherit;
  font-size:13.5px;padding:12px 14px;outline:none;
  transition:border-color .3s,background .3s;resize:vertical;
}
.f-field input:focus,.f-field textarea:focus{border-color:var(--accent);background:rgba(243,153,7,.07);box-shadow:0 0 0 3px rgba(243,153,7,.15)}
.f-field ::placeholder{color:rgba(255,255,255,.32)}
.c-form .btn{align-self:flex-start;border:none;cursor:pointer;font-family:inherit}
.f-hint{font-size:10.5px;color:var(--faint);letter-spacing:.04em}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;align-items:start;padding-top:110px}
  .f-row{grid-template-columns:1fr}
}
.foot-info{line-height:2}

/* ---------- logo marquee ---------- */
.marquee{
  position:relative;z-index:5;width:100%;
  align-self:flex-start;
  margin-top:clamp(84px,12vh,120px);
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);
  padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:clamp(40px,5vw,80px);width:max-content;animation:mq 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:30px;object-fit:contain;opacity:.75;transition:opacity .3s}
.marquee-track img:hover{opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .chart-wrap{grid-template-columns:1fr}
}

/* ---------- floating contact badge (회전 원형 텍스트) ---------- */
.c-badge{
  position:fixed;right:clamp(24px,4vw,56px);bottom:clamp(26px,5vh,48px);z-index:60;
  width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  transition:opacity .4s var(--ease),transform .4s var(--ease),bottom .4s var(--ease);
  filter:drop-shadow(0 0 10px rgba(243,153,7,.35));
}
.c-badge:hover{filter:drop-shadow(0 0 20px rgba(243,153,7,.7))}
.c-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:cbspin 14s linear infinite}
.c-badge text{font-family:var(--nums);font-size:10px;font-weight:600;letter-spacing:.14em;fill:#ffb52e}
.c-badge .cb-arrow{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:#fff;
  background:linear-gradient(135deg,#ffb52e,var(--accent));
  box-shadow:0 6px 18px rgba(243,153,7,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.c-badge:hover .cb-arrow{transform:translate(1px,-1px) scale(1.12);box-shadow:0 10px 26px rgba(243,153,7,.65),inset 0 1px 0 rgba(255,255,255,.35)}
@keyframes cbspin{to{transform:rotate(360deg)}}
/* 문의 섹션 도착 시 / 메뉴 오픈 시 숨김 */
.c-badge.hide,body.menu-open .c-badge{opacity:0;pointer-events:none;transform:translateY(12px)}
/* 모바일: 64px 소형으로 우하단 고정 — 모든 섹션에서 동일 위치 */
@media (max-width:720px){
  .c-badge{right:16px;bottom:16px;width:64px;height:64px}
  .c-badge .cb-arrow{width:28px;height:28px;font-size:13px}
}

/* footer section */
.foot{
  position:relative;z-index:5;width:100%;
  padding:0 clamp(24px,5vw,72px) 46px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;color:var(--faint);letter-spacing:.08em;line-height:1.9;
}

/* ---------- partners (다크 섹션 — 다른 화면과 톤 통일) ---------- */
#partners{height:auto;min-height:100vh;min-height:100dvh} /* 내용이 길어지면 아래로 스크롤됨 */
#partners .copy{padding-top:clamp(120px,17vh,170px);padding-bottom:clamp(26px,4vh,44px)}
.p-wrap{
  position:relative;z-index:5;width:100%;
  padding:0 clamp(24px,5vw,72px);
  display:flex;flex-direction:column;gap:clamp(24px,4vh,40px);
}
.p-group .g-label{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
}
.p-group .g-label b{font-size:12px;color:#fff;letter-spacing:.04em;text-transform:none}
/* 운영 채널 라벨: 우하단 플로팅 배지와 겹치지 않도록 우측 여백 */
#partners .p-group:last-of-type .g-label{padding-right:clamp(90px,8vw,130px)}
@media (max-width:720px){
  #partners .p-group:last-of-type .g-label{padding-right:84px}
}
.p-cards{display:grid;gap:12px}
.p-cards.brands{grid-template-columns:repeat(3,1fr)}
/* ── 파트너: 핵심 브랜드 대형 카드 — 좌우 드래그 슬라이더 (왼쪽 로고·문구 / 오른쪽 넓은 모델컷) ── */
.p-cards.brands.big.slider{
  display:flex;gap:clamp(16px,2vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;
  padding:4px 2px 10px;
  user-select:none;-webkit-user-select:none;
}
.p-cards.brands.big.slider::-webkit-scrollbar{display:none}
.p-cards.brands.big.slider.grabbing{cursor:grabbing;scroll-snap-type:none}
.p-cards.brands.big .p-link{flex:0 0 min(600px,82%);scroll-snap-align:center;text-decoration:none;color:inherit} /* 정보열 공란을 줄이도록 카드 폭을 내용에 맞게 슬림화 */
.pb-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,290px); /* 정보열은 내용만큼, 이미지는 세로형 모델컷 고정폭 */
  width:100%;height:clamp(380px,52vh,470px);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02) 55%);
  border:1px solid var(--line);border-radius:18px;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .35s;
}
.pb-card:hover{transform:translateY(-5px);border-color:rgba(243,153,7,.6);box-shadow:0 26px 64px rgba(0,0,0,.55),0 0 0 1px rgba(243,153,7,.16)}
.pb-info{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:14px;padding:clamp(24px,2.8vw,44px);min-width:0;
}
/* 로고 존: 3개 카드 동일 크기의 컴팩트한 가로형 흰 박스 */
.pb-logo{
  width:clamp(150px,11vw,190px);height:clamp(46px,4vw,54px);
  background:#fff;border-radius:8px;padding:10px 18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pb-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pb-cap{font-size:12.5px;line-height:1.55;color:var(--dim);letter-spacing:.02em;word-break:keep-all}
/* 운영 사례 보기: 주황 그라데이션 필 + 빛 스캔 */
.p-go{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;
  margin-top:6px;padding:11px 22px;border-radius:999px;
  background:linear-gradient(120deg,#ffb52e,var(--accent));
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#fff;
  box-shadow:0 8px 22px rgba(243,153,7,.32);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.p-go em{font-style:normal;position:relative;z-index:1}
.p-go::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-16deg);transition:left .55s var(--ease);
}
.pb-card:hover .p-go{transform:translateY(-2px);box-shadow:0 14px 32px rgba(243,153,7,.5)}
.pb-card:hover .p-go::after{left:130%}
.pb-img{position:relative;overflow:hidden}
.pb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .9s var(--ease)}
.pb-card:hover .pb-img img{transform:scale(1.06)}
/* 슬라이더 진행 바 + 드래그 힌트 */
.p-slide-ui{
  display:flex;align-items:center;gap:18px;margin-top:14px;
}
.p-drag-hint{font-family:var(--nums);font-size:9px;letter-spacing:.32em;color:var(--faint);white-space:nowrap}
.p-prog{position:relative;flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.p-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffb52e,var(--accent));border-radius:2px;transition:width .15s linear}
@media (max-width:1000px){
  .p-cards.brands.big .p-link{flex:0 0 88%}
  .pb-card{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:0}
  .pb-info{padding:20px 20px 18px}
  .pb-img{aspect-ratio:4/4.4;min-height:0} /* 세로형 모델컷 — 위아래가 잘리지 않게 세로로 긴 영역 */
}
.p-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:5px;
  display:flex;flex-direction:row;align-items:center;gap:16px;
  padding:20px 22px;
  transition:transform .35s var(--ease),border-color .35s,background .35s;
}
.p-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.p-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.p-card:hover::before{transform:scaleX(1)}
/* 로고 흰 칩: 가로세로 통일, 로고는 중앙 정렬 */
.p-logo{
  background:#fff;border-radius:4px;padding:8px 12px;
  width:126px;height:52px;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.p-logo img{max-height:30px;max-width:104px;object-fit:contain;display:block}
.p-card:hover .p-logo{box-shadow:0 8px 24px rgba(255,255,255,.16);transform:scale(1.04)}
/* 로고 우측 텍스트 블록 */
.p-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* 브랜드명: Space Grotesk + 호버 시 빛 스캔 이펙트 */
.p-name{
  font-family:var(--nums);font-size:13.5px;font-weight:700;letter-spacing:.07em;
  white-space:nowrap;
  background:linear-gradient(105deg,#fff 42%,rgba(170,205,255,.45) 50%,#fff 58%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-card:hover .p-name{animation:namesheen 1.1s var(--ease)}
@keyframes namesheen{from{background-position:100% 0}to{background-position:0 0}}
.p-cap{margin-top:6px;font-size:11px;color:var(--faint);letter-spacing:.02em;white-space:nowrap;word-break:keep-all}
/* 운영 사례 보기: 사각 박스 버튼 (호버 시 반전) */
.p-go{
  margin-top:12px;padding:7px 14px;
  border:1px solid rgba(255,255,255,.28);border-radius:3px;
  font-size:10px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.6);
  transition:all .35s var(--ease);
}
.p-card.linked:hover .p-go{background:#fff;color:#0a0a0b;border-color:#fff}
.p-card.more{
  background:transparent;border-style:dashed;border-color:rgba(255,255,255,.2);
  flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.6);gap:5px;
}
.p-card.more::before{display:none}
.p-card.more small{font-size:10.5px;font-weight:400;color:var(--faint);letter-spacing:.05em}
.p-link{text-decoration:none;color:inherit;display:block}
/* 채널 로고 롤링 배너: 좌→우 무한 루프, 호버 시 일시정지 */
.ch-marquee{
  position:relative;z-index:5;width:100%;
  margin-top:clamp(18px,3vh,30px);
  padding:0 0 clamp(84px,11vh,120px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ch-track{display:flex;gap:14px;width:max-content;animation:chmq 36s linear infinite}
.ch-marquee:hover .ch-track{animation-play-state:paused}
@keyframes chmq{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* 좌→우 이동 */
.ch-chip{
  flex:0 0 auto;background:#fff;border-radius:5px;
  width:150px;height:72px;display:flex;align-items:center;justify-content:center;
  padding:12px 18px;
}
.ch-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:1050px){
  .p-cards.brands{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .p-cards.brands{grid-template-columns:1fr}
  .p-card{gap:14px;padding:16px 18px}
  .p-logo{width:118px;height:48px}
  .p-logo img{max-width:98px;max-height:28px}
  .p-name{font-size:13.5px}
  .ch-chip{width:120px;height:58px}
  section{height:auto;min-height:100vh}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .bg video{opacity:1}.rv{opacity:1;transform:none}
}
/* ── 섹션 제목 크기 통일 ──
   모든 섹션 h2를 하나의 크기로 맞춤 (히어로 h1은 별도).
   카피 영역 실폭 약 1176px 기준, 가장 긴 줄(굵은 14자)이 한 줄에 들어가는 상한 74px. */
#partnership h2,#sales h2,#coverage h2,#performance h2,
#logistics h2,#team h2,#services h2,#partners h2,#contact h2{font-size:clamp(30px,4.2vw,81px)}

@media (max-width:900px){
  /* 태블릿·모바일: 제목 크기를 줄여 각 줄이 끊기지 않고 한 줄씩 보이게 */
  h1{font-size:clamp(26px,7.2vw,42px)}
  h2{font-size:clamp(26px,7vw,40px)}
  /* 모바일: 섹션 제목 크기 통일 — 가장 긴 줄(굵은 14자) 기준 상한 */
  #partnership h2,#sales h2,#coverage h2,#performance h2,
  #logistics h2,#team h2,#services h2,#partners h2,#contact h2{font-size:clamp(17px,5.9vw,23px)}
}
@media (max-width:720px){
  .rail{display:none} /* 폰에서는 점 네비 숨김 — 본문과 겹침 방지 */
  /* 모바일 헤더: 로고 중앙 정렬 + 텍스트 라벨 숨김 — 햄버거/로고/슬로건 겹침 방지 */
  .top{justify-content:center;padding-top:16px;padding-bottom:16px}
  .top .tag{display:none}
  .menu-btn{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
  .menu-btn .m-label{display:none}
  /* 모바일: 주요 고객사 버튼 컴팩트화 — 꽉 찬 박스처럼 보이지 않게 */
  #sales .btn-case{padding:10px 20px 10px 10px;gap:12px}
  #sales .btn-case .bc-logo{height:34px;width:104px;font-size:12px}
  .copy{padding-top:92px;padding-bottom:104px} /* 긴 섹션도 라벨이 상단에 붙지 않게 */
  #sales .cta{margin-top:26px}
  .kicker{font-size:10px;letter-spacing:.14em;word-break:keep-all}
  .sub{word-break:keep-all;line-height:1.7}
  h1,h2{line-height:1.22}
}

/* ── 상단 스크롤 진행 바 (브랜드 주황) ── */
#scrollbar{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,#ffb52e,var(--accent));box-shadow:0 0 14px rgba(243,153,7,.95),0 1px 4px rgba(0,0,0,.6);z-index:96;transition:width .08s linear;pointer-events:none}

/* ── 로딩 인트로 ── */
#loader{position:fixed;inset:0;z-index:200;background:#0a0a0b;display:flex;align-items:center;justify-content:center;
  transition:opacity .4s var(--ease),visibility .4s}
/* 실제 로딩이 길어질 때만 표시 — 기본은 완전히 숨김 (JS가 .idle을 제거하면 나타남) */
#loader.idle{opacity:0;visibility:hidden;pointer-events:none}
#loader.done{opacity:0;visibility:hidden}
#loader .ld-in{display:flex;flex-direction:column;align-items:center;gap:20px}
#loader .ld-logo{font-weight:800;letter-spacing:.5em;font-size:clamp(16px,2.2vw,24px);color:#fff;animation:ldFade .7s var(--ease) both}
#loader .ld-bar{width:120px;height:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;border-radius:2px}
#loader .ld-bar::after{content:'';position:absolute;inset:0;background:var(--accent);animation:ldBar .95s var(--ease) infinite}
@keyframes ldFade{from{opacity:0;letter-spacing:.85em}to{opacity:1;letter-spacing:.5em}}
@keyframes ldBar{0%{transform:scaleX(0);transform-origin:left}55%{transform:scaleX(1);transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ── 퍼포먼스 차트 호버 툴팁 ── */
.chart{position:relative}
.chart-tip{
  position:absolute;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;
  background:rgba(10,10,11,.93);border:1px solid rgba(243,153,7,.45);border-radius:10px;
  padding:10px 14px;min-width:160px;z-index:6;
  opacity:0;transition:opacity .18s;
  display:flex;flex-direction:column;gap:4px;
}
.chart-tip.on{opacity:1}
.chart-tip b{font-family:var(--nums);font-size:13.5px;color:var(--accent);letter-spacing:.06em}
.chart-tip span{font-size:11.5px;color:rgba(255,255,255,.72);display:flex;justify-content:space-between;gap:14px}
.chart-tip em{font-style:normal;color:#fff;font-weight:600;font-family:var(--nums)}