/* =========================================================================
   kye_promotion — 향후계획 및 비전 (책임 진급 발표 · 김계현)
   원본 PPT 디자인(네이비/골드)을 시맨틱 React 컴포넌트로 재현.
   색·타입·간격은 아래 토큰에서 한 곳으로 관리 → 편집/애니메이션 자유.
   ========================================================================= */
:root{
  /* palette (원본 PPT에서) */
  --navy:#0B2540;        /* 제목/짙은 배경 */
  --navy-2:#081A2E;      /* 커버 좌측 패널 */
  --gold:#C9962C;        /* 포인트 */
  --blue:#34558C;        /* 배지/헤더 바 */
  --blue-2:#5E79AC;
  --blue-3:#AEC0DE;
  --panel:#F1F3F6;       /* 밝은 카드 */
  --ink:#0B2540;         /* 본문 제목 */
  --slate:#54626F;       /* 본문 */
  --muted:#8A97A3;       /* 흐린 텍스트/푸터 */
  --line:#E3E8ED;
  /* 네이비 배경 위 */
  --n-white:#FFFFFF;
  --n-muted:#AEBCC9;
  --n-body:#C8D2DC;
  /* type scale (cqh = 화면 높이 1%) */
  --t-secno:2.3cqh;
  --t-title:6cqh;
  --t-sub:2.7cqh;
  --t-head:3.2cqh;       /* 카드/열 헤더 */
  --t-ctitle:2.9cqh;     /* 카드 제목 */
  --t-body:2.35cqh;
  --t-foot:1.7cqh;
  --kr:"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","Pretendard",-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0a0d12;overflow:hidden;font-family:var(--kr);word-break:keep-all;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#root{height:100vh;width:100vw}

/* ---- viewer shell ---- */
.viewer{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#12161d,#0a0d12)}
.stage{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;
  container-type:size;overflow:hidden;box-shadow:0 20px 70px -20px rgba(0,0,0,.7)}

/* ---- slide frame ---- */
.slide{position:absolute;inset:0;overflow:hidden}
.slide.white{background:#fff;color:var(--ink)}
.slide.navy{background:var(--navy);color:var(--n-white)}
.pad{position:relative;height:100%;padding:8cqh 5.2cqw;display:flex;flex-direction:column}

/* ---- reveal animation (요소별 등장; 슬라이드 전환마다 재생) ---- */
.reveal{opacity:0;animation:rvl .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--d,0)*70ms + 70ms)}
@keyframes rvl{from{opacity:0;transform:translateY(1.5cqh)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1}}
.nomotion .reveal{animation:none;opacity:1}
/* 항목 등장(.pop): 더 큰 이동 + 살짝 오버슈트 + 넉넉한 스태거 → 탁탁 힘있게 */
/* 항목 등장: 진중하게 — 오버슈트 없이 묵직한 감속, 넉넉한 텀·간격(모든 장 공통) */
.reveal.pop{animation-name:pop;animation-duration:.9s;
  animation-timing-function:cubic-bezier(.16,.55,.2,1);
  animation-delay:calc(1.15s + (var(--d,0) - 3)*.5s)}   /* 1.15s=헤드라인 뒤 텀, .5s=아이템 간격 */
@keyframes pop{from{opacity:0;transform:translateY(4cqh)}to{opacity:1;transform:none}}
.nomotion .reveal.pop{animation:none;opacity:1}

/* ---- section header (내용 슬라이드 공통) ---- */
.secno{font-family:var(--mono);font-size:var(--t-secno);font-weight:700;color:var(--gold);letter-spacing:.04em}
.eyebrow{font-family:var(--mono);font-size:var(--t-secno);font-weight:700;color:var(--gold);letter-spacing:.22em}
.title{font-size:var(--t-title);font-weight:800;line-height:1.14;letter-spacing:-.01em;color:var(--ink);margin-top:.6cqh}
.slide.navy .title{color:#fff}
.subtitle{font-size:var(--t-sub);color:var(--slate);margin-top:1.4cqh;line-height:1.4}
.slide.navy .subtitle{color:var(--n-muted)}

/* content region: 헤더 아래를 채워 세로 중앙정렬 */
.content{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:3cqh}

/* ---- footer ---- */
.foot{position:absolute;left:5.2cqw;bottom:3.4cqh;font-size:var(--t-foot);color:var(--muted)}
.slide.navy .foot{color:var(--n-muted)}
.pageno{position:absolute;right:4cqw;bottom:3.4cqh;font-size:var(--t-foot);color:var(--muted);font-variant-numeric:tabular-nums}
.slide.navy .pageno{color:var(--n-muted)}

/* ============================ per-slide ============================ */
/* cover */
.cover{position:absolute;inset:0}
/* 우측(리드 문구) — 패널 뒤에 깔려 있다가 패널이 줄면서 드러남 */
.cover .right{position:absolute;right:0;top:0;bottom:0;width:65.5%;z-index:1;
  display:flex;align-items:center;padding:0 5cqw}
.cover .lead{font-size:3cqh;line-height:1.5;color:var(--n-body);
  animation:lead-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:2.45s}
/* 금색 띠(패널)와 같은 방향: 오른쪽 → 왼쪽으로 슬라이드-인 */
@keyframes lead-in{from{opacity:0;transform:translateX(6cqw)}to{opacity:1;transform:none}}
.nomotion .cover .lead{animation:none}
/* 좌측 패널 — 처음엔 화면 전체(100%)를 덮고, 왼쪽 34.5%로 축소 */
.cover .panel{position:absolute;left:0;top:0;bottom:0;width:34.5%;z-index:2;overflow:hidden;
  background:var(--navy-2);padding:8cqh 3.6cqw;display:flex;flex-direction:column;
  animation:panel-shrink .9s cubic-bezier(.6,0,.15,1) both;animation-delay:1.7s}
.cover .panel::after{content:"";position:absolute;right:0;top:0;bottom:0;width:.42cqw;background:var(--gold)}
@keyframes panel-shrink{from{width:100%}to{width:34.5%}}
.nomotion .cover .panel{animation:none}
.cover .mid{margin-top:auto;margin-bottom:auto}
.cover .ttl{font-size:5.6cqh;font-weight:800;color:#fff;line-height:1.1}
.cover .subttl{font-size:var(--t-sub);color:var(--n-muted);margin-top:1.4cqh}
.cover .who .nm{font-size:3.3cqh;font-weight:800;color:#fff}
.cover .who .role{font-size:2cqh;color:var(--n-muted);margin-top:.8cqh}
/* 연도 휠: "20" 고정 + 뒤 두 자리 세로 롤 */
.yr{display:inline-flex;align-items:flex-start;font-family:var(--mono);font-size:var(--t-sub);
  font-weight:700;color:var(--gold);letter-spacing:.06em;line-height:1}
.yr .wheel{display:inline-block;height:1em;overflow:hidden}
.yr .strip{display:flex;flex-direction:column}
.yr-f{height:1em;display:flex;align-items:center;justify-content:center}
/* 일의 자리: 구간별 속도로 초반 느리게→갈수록 빠르게(가속). 각 구간=거리 기준이라
   10의 자리 톡 타이밍(일의 자리가 0을 지나는 45%)과 정확히 맞음 → 잘못된 조합 안 뜸. */
.yr.roll .units .strip{animation:units-roll 1.15s linear forwards}
.yr.roll .tens .strip{animation:tens-tick 1.15s linear forwards}
@keyframes units-roll{
  0%   {transform:translateY(0)}       /* 8 */
  45%  {transform:translateY(-2em)}    /* 0  (8→9→0, 느리게) */
  70%  {transform:translateY(-4em)}    /* 2 */
  100% {transform:translateY(-8em)}    /* 6  (막판 가속) */
}
@keyframes tens-tick{0%,42%{transform:translateY(0)}50%,100%{transform:translateY(-1em)}}
.nomotion .yr .strip{animation:none}

/* vision / growth — 컬럼(블루 헤더 + 밝은 본문) */
.cols{display:grid;gap:2cqw;flex:1;align-content:center}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.col{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:.3cqw;overflow:hidden;min-height:0}
.col .head{background:var(--blue);color:#fff;font-size:var(--t-head);font-weight:800;text-align:center;padding:2.2cqh 1cqw}
.col .body{background:var(--panel);flex:1;padding:3cqh 1.8cqw;display:flex;flex-direction:column;justify-content:center;gap:2cqh}
.col .body.center{text-align:center;font-size:var(--t-body);color:var(--slate);line-height:1.5}

/* business — 번호 배지 행 */
.rows{display:flex;flex-direction:column;gap:2cqh;flex:1;justify-content:center}
.row{display:flex;align-items:center;gap:2cqw;background:var(--panel);border-radius:.4cqw;padding:2.6cqh 2.4cqw}
.row .badge{flex:none;width:5.4cqh;height:5.4cqh;border-radius:50%;background:var(--blue);color:#fff;
  font-weight:800;font-size:2.5cqh;display:grid;place-items:center}
.row .rt{font-size:var(--t-ctitle);font-weight:800;color:var(--ink)}
.row .rd{font-size:var(--t-body);color:var(--slate);margin-top:.9cqh;line-height:1.4}

/* modernize — 콜아웃 + 골드바 카드 2x2 */
.callout{background:#E4EAF3;border-radius:.4cqw;padding:2.8cqh 2.4cqw;font-size:2.35cqh;line-height:1.6;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2cqh 2cqw;flex:1;align-content:center}
.gcard{background:var(--panel);border-radius:.4cqw;padding:2.6cqh 2cqw;display:flex;flex-direction:column}
.gcard .bar{width:3cqw;height:.5cqh;background:var(--gold);border-radius:2px;margin-bottom:1.6cqh}
.gcard .gt{font-size:var(--t-ctitle);font-weight:800;color:var(--ink);margin-bottom:1.4cqh}
.gcard .gd{font-size:var(--t-body);line-height:1.5;color:var(--slate)}
.slide.navy .gcard .gd{color:var(--n-body)}
.bul{display:flex;flex-direction:column;gap:1.1cqh}
.bul .li{display:flex;gap:1cqw;font-size:var(--t-body);color:var(--slate);line-height:1.4}
.bul .li::before{content:"▪";color:var(--muted);flex:none}

/* effects — 네이비 카드 3열 (흰 배경) */
.ncards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;flex:1;align-content:center}
.ncard{background:var(--navy);border-radius:.4cqw;padding:4cqh 2cqw;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:3cqh}
.ncard .nt{font-size:var(--t-head);font-weight:800;color:#fff}
.ncard .nd{font-size:var(--t-body);color:var(--n-body);line-height:1.5}

/* roadmap — 타임라인 */
.road{flex:1;display:flex;flex-direction:column;justify-content:center}
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.timeline .rail{position:absolute;left:2%;right:2%;top:1.1cqh;height:2px;background:var(--line)}
/* 로드맵: 선이 왼→오른쪽으로 그어지고, 선이 닿을 때 단계가 하나씩 등장 */
.slide.roadmap .rail{transform-origin:left center;animation:rail-draw 1.9s cubic-bezier(.4,0,.15,1) both;animation-delay:.7s}
@keyframes rail-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slide.roadmap .pop{animation-delay:calc(1s + (var(--d,0) - 3)*.63s)}   /* 선이 각 원(열 중앙)에 닿을 때 등장 */
.nomotion .slide.roadmap .rail{animation:none}
.phase{position:relative;padding-top:3.4cqh}
.phase .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2.2cqh;height:2.2cqh;border-radius:50%;border:.5cqh solid var(--blue-3);background:#fff}
.phase:nth-child(3) .dot{border-color:var(--blue-2)}
.phase:nth-child(4) .dot{border-color:var(--blue)}
.pbar{color:#fff;font-weight:800;font-size:var(--t-head);text-align:center;padding:1.6cqh 1cqw;border-radius:.3cqw;margin-bottom:2.4cqh}
.phase:nth-child(2) .pbar{background:var(--blue-3);color:var(--ink)}
.phase:nth-child(3) .pbar{background:var(--blue-2)}
.phase:nth-child(4) .pbar{background:var(--blue)}

/* role — 네이비 배경, 골드바 카드 2x2 */
.slide.navy .gcard{background:rgba(255,255,255,.06)}
.slide.navy .gcard .gt{color:#fff}
.slide.navy .bul .li{color:var(--n-body)}
.slide.navy .bul .li::before{color:var(--gold)}
.slide.navy .callout{background:rgba(255,255,255,.06);color:var(--n-body)}

/* closing */
.closing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqh;padding:0 10cqw;text-align:center}
.closing .quote{font-size:4.4cqh;font-weight:800;line-height:1.4;color:#fff}
.closing .commit{font-size:var(--t-sub);color:var(--n-muted);line-height:1.5}
.closing .thanks{font-size:3.2cqh;font-weight:800;color:var(--gold)}

/* ---- 대기 화면 (남색 패널색, "발표 준비중"만) ---- */
.standby{position:absolute;inset:0;background:var(--navy-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3.5cqh;cursor:pointer;user-select:none}
.sb-label{display:flex;align-items:center;gap:1.3cqw;font-family:var(--mono);font-size:3cqh;
  letter-spacing:.32em;color:var(--gold)}
.sb-label .pulse{width:1.4cqh;height:1.4cqh;border-radius:50%;background:var(--gold);animation:sb-pulse 1.6s ease-in-out infinite}
@keyframes sb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.8)}}
.sb-hint{font-family:var(--mono);font-size:1.9cqh;letter-spacing:.14em;color:var(--n-muted);
  animation:sb-blink 2s ease-in-out infinite}
@keyframes sb-blink{0%,100%{opacity:.8}50%{opacity:.32}}

/* ---- nav (호버 시 도트) ---- */
.hud{position:fixed;bottom:1.6vh;left:0;right:0;z-index:6;display:flex;justify-content:center;
  opacity:0;transition:opacity .3s;pointer-events:none}
.viewer:hover .hud{opacity:1}
.dots{display:flex;gap:8px;pointer-events:auto;padding:8px 14px;border-radius:99px;
  background:rgba(20,26,34,.55);backdrop-filter:blur(6px)}
.dot{width:20px;height:4px;border-radius:99px;background:rgba(255,255,255,.32);border:0;cursor:pointer;transition:all .3s;padding:0}
.dot.on{background:var(--gold);width:34px}
.dot:hover{background:rgba(255,255,255,.6)}
.edge{position:absolute;top:0;height:100%;width:12%;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;color:transparent;transition:color .2s;z-index:5}
.edge.prev{left:0;justify-content:flex-start;padding-left:1.4vw}
.edge.next{right:0;justify-content:flex-end;padding-right:1.4vw}
.edge:hover:not(:disabled){color:rgba(160,160,160,.5)}
.edge:disabled{cursor:default}
.edge span{font-size:5vh;font-weight:300}