/* =========================================================================
   MOREE 발표자료 — 스타일 (PC 전용 / 1920×1080 고정 스테이지 스케일링)
   ========================================================================= */

/* ---------- Paperlogy ---------- */
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Paperlogy';src:url('../fonts/Paperlogy-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:block}

:root{
  /* 메인 색: #0C32FF(파랑) → #5C8A3C(그린) — 변수 이름은 그대로 */
  --blue:#5C8A3C;
  --blue-lt:#6C9C4A;
  --blue-dk:#4C7631;
  --g-25:#F8FBF5;
  --g-50:#F2F7EE;
  --g-100:#E6EFDD;
  --g-200:#D2E2C3;
  --g-300:#B4CE9C;
  --g-on-dark:#A6CE84;
  --ink:#16161C;
  --ink-sub:#5A5B66;
  --ghost:#E8E8E8;
  --stage-w:1920px;
  --stage-h:1080px;
  --ease-slide:cubic-bezier(.70,0,.20,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#0A0A0C;
  font-family:'Paperlogy','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 스테이지 ---------- */
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{
  position:absolute;left:50%;top:50%;
  width:var(--stage-w);height:var(--stage-h);
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(1);
  background:#fff;
  overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.6);
}

/* --- 가로 슬라이드 전환 (깜빡임 없음) --- */
.slide{
  position:absolute;inset:0;overflow:hidden;
  visibility:hidden;
  transform:translate3d(100%,0,0);
  transition:transform .66s var(--ease-slide), visibility 0s linear .66s;
  will-change:transform;
  backface-visibility:hidden;
}
.slide.is-active{
  visibility:visible;z-index:2;
  transform:translate3d(0,0,0);
  transition:transform .66s var(--ease-slide), visibility 0s linear 0s;
}
.slide.is-prev{
  visibility:hidden;
  transform:translate3d(-100%,0,0);
  transition:transform .66s var(--ease-slide), visibility 0s linear .66s;
}
body.booting .slide{transition:none!important}

/* --- 같은 배경끼리 넘어갈 때: 가로 이동 대신 교차 전환 (깜빡임 0) --- */
.slide.xfade{
  opacity:0;
  transform:translate3d(0,0,0)!important;
  transition:opacity .5s ease, visibility 0s linear .5s!important;
}
.slide.xfade.is-active{
  opacity:1;
  transition:opacity .5s ease, visibility 0s linear 0s!important;
}

/* --- 공유 요소(제목 블록) 모프 레이어 --- */
.no-head-anim .head,
.no-head-anim .head *{animation:none!important;opacity:1!important;transform:none!important}

.morph-layer{
  position:absolute;inset:0;z-index:30;pointer-events:none;
  display:block!important;overflow:hidden;
}

/* --- 내용 등장 애니메이션 --- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpSm{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseBox{from{opacity:0;transform:translateY(96px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseSm{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes decoIn{from{opacity:0}to{opacity:.098}}
@keyframes fadeCenter{from{opacity:0;transform:translateX(-50%) translateY(26px)}to{opacity:.999;transform:translateX(-50%) translateY(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.slide.is-active .anim{animation:rise .8s var(--ease-out) both}

/* 표지 */
.slide.is-active.s-cover .head{text-align:center}
.s-cover .eyebrow{animation:rise .8s var(--ease-out) both .18s}
.slide.is-active.s-cover .title  {animation:rise .8s var(--ease-out) both .26s}
.slide.is-active.s-cover .lines  {animation:rise .8s var(--ease-out) both .40s}
.slide.is-active.s-cover .big-quote{animation:fadeCenter 1s var(--ease-out) both .34s}

/* 숫자 */
.slide.is-active.s-stats .head{animation:rise .8s var(--ease-out) both .18s}
.slide.is-active.s-stats .tile{animation:riseBox .78s var(--ease-out) both}
.slide.is-active.s-stats .tile:nth-child(1){animation-delay:.30s}
.slide.is-active.s-stats .tile:nth-child(2){animation-delay:.42s}
.slide.is-active.s-stats .tile:nth-child(3){animation-delay:.54s}
.slide.is-active.s-stats .tile:nth-child(4){animation-delay:.66s}
.slide.is-active.s-stats .deco{animation:decoIn 1.2s ease both .05s}

/* 6가지 기능 */
.slide.is-active.s-overview .head{animation:rise .8s var(--ease-out) both .18s}
.slide.is-active.s-overview .f-card{animation:rise .7s var(--ease-out) both}
.slide.is-active.s-overview .f-card:nth-child(1){animation-delay:.30s}
.slide.is-active.s-overview .f-card:nth-child(2){animation-delay:.37s}
.slide.is-active.s-overview .f-card:nth-child(3){animation-delay:.44s}
.slide.is-active.s-overview .f-card:nth-child(4){animation-delay:.51s}
.slide.is-active.s-overview .f-card:nth-child(5){animation-delay:.58s}
.slide.is-active.s-overview .f-card:nth-child(6){animation-delay:.65s}

/* 기능 섹션 */
.slide.is-active.s-section .bignum{animation:drop .85s var(--ease-out) both .16s}
.slide.is-active.s-section .lead  {animation:rise .8s var(--ease-out) both .26s}
.slide.is-active.s-section .big   {animation:rise .8s var(--ease-out) both .34s}
.slide.is-active.s-section .list li{animation:riseSm .7s var(--ease-out) both}
.slide.is-active.s-section .list li:nth-child(1){animation-delay:.42s}
.slide.is-active.s-section .list li:nth-child(2){animation-delay:.50s}
.slide.is-active.s-section .list li:nth-child(3){animation-delay:.58s}

/* 기능 상세 */
.slide.is-active.s-detail .side h3{animation:rise .8s var(--ease-out) both .20s}
.slide.is-active.s-detail .side li{animation:riseSm .7s var(--ease-out) both}
.slide.is-active.s-detail .side li:nth-child(1){animation-delay:.30s}
.slide.is-active.s-detail .side li:nth-child(2){animation-delay:.37s}
.slide.is-active.s-detail .side li:nth-child(3){animation-delay:.44s}
.slide.is-active.s-detail .side .wm{animation:fade .9s ease both .55s}
.slide.is-active.s-detail .media-desktop{animation:zoomIn .85s var(--ease-out) both .26s}
.slide.is-active.s-detail .phone{animation:rise .8s var(--ease-out) both}
.slide.is-active.s-detail .phone:nth-child(1){animation-delay:.28s}
.slide.is-active.s-detail .phone:nth-child(2){animation-delay:.38s}

/* =========================================================================
   같은 기능 안에서 상세끼리 이동
   : 페이지는 전혀 움직이지 않고 .side 의 li.on 만 바뀐다
   ========================================================================= */
@keyframes triMove{from{transform:translateY(var(--triDy,0px))}to{transform:translateY(0)}}
@keyframes liOn {from{color:rgba(255,255,255,.42)}to{color:#fff}}
@keyframes liOff{from{color:#fff}to{color:rgba(255,255,255,.42)}}
@keyframes mediaIn{from{opacity:0}to{opacity:1}}

/* 페이지 자체는 제자리 — 이동/페이드 없음 */
.slide.tabshift{transform:translate3d(0,0,0)!important;transition:none!important}

/* 사이드바는 통째로 고정 (등장 애니메이션 전부 해제) */
.slide.tabshift.is-active .side h3,
.slide.tabshift.is-active .side ul,
.slide.tabshift.is-active .side li,
.slide.tabshift.is-active .side .wm{animation:none}

/* on 이 옮겨 가는 것만 보이게 */
.slide.tabshift.is-active .side li.on {animation:liOn  .45s ease both}
.slide.tabshift.is-active .side li.was{animation:liOff .45s ease both}
.slide.tabshift.is-active .side li.on .tri{animation:triMove .52s cubic-bezier(.45,0,.15,1) both}

/* 오른쪽 내용만 교체 (위치 이동 없이 페이드) */
.slide.tabshift.is-active .media-desktop{animation:mediaIn .5s ease both .05s}
.slide.tabshift.is-active .phone{animation:mediaIn .5s ease both}
.slide.tabshift.is-active .phone:nth-child(1){animation-delay:.05s}
.slide.tabshift.is-active .phone:nth-child(2){animation-delay:.14s}

/* =========================================================================
   2페이지 → 3페이지 : 파란 화면이 쓸려 나가며 01~06 카드가 차례로 등장
   ========================================================================= */
@keyframes wipeL{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes wipeR{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes cardPop{
  0%  {opacity:0;transform:translateY(42px) scale(.9)}
  55% {opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes numIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* 전환 중에는 두 장 모두 제자리 고정 */
.slide.wipe{transform:translate3d(0,0,0)!important;transition:none!important}

/* 나가는 장이 커튼 역할 — 잘려 나가며 아래 장을 드러낸다 */
.slide.wipe-l,.slide.wipe-r{visibility:visible!important;z-index:5}
.slide.wipe-l{animation:wipeL .62s cubic-bezier(.72,0,.2,1) both}   /* 앞으로: 왼→오 */
.slide.wipe-r{animation:wipeR .55s cubic-bezier(.72,0,.2,1) both}   /* 뒤로:  오→왼 */

/* 머리글은 커튼이 지나가며 그대로 드러남 */
.slide.wipe.is-active.s-overview .head{animation:none}

/* 카드 01 → 06 순차 등장 */
.slide.wipe.is-active.s-overview .f-card{
  animation:cardPop .52s cubic-bezier(.18,.86,.28,1) both
}
.slide.wipe.is-active.s-overview .f-card:nth-child(1){animation-delay:.60s}
.slide.wipe.is-active.s-overview .f-card:nth-child(2){animation-delay:.69s}
.slide.wipe.is-active.s-overview .f-card:nth-child(3){animation-delay:.78s}
.slide.wipe.is-active.s-overview .f-card:nth-child(4){animation-delay:.87s}
.slide.wipe.is-active.s-overview .f-card:nth-child(5){animation-delay:.96s}
.slide.wipe.is-active.s-overview .f-card:nth-child(6){animation-delay:1.05s}

/* 고스트 번호는 카드가 자리잡은 뒤 옆에서 밀려 들어옴 */
.slide.wipe.is-active.s-overview .f-card .num{animation:numIn .46s var(--ease-out) both}
.slide.wipe.is-active.s-overview .f-card:nth-child(1) .num{animation-delay:.78s}
.slide.wipe.is-active.s-overview .f-card:nth-child(2) .num{animation-delay:.87s}
.slide.wipe.is-active.s-overview .f-card:nth-child(3) .num{animation-delay:.96s}
.slide.wipe.is-active.s-overview .f-card:nth-child(4) .num{animation-delay:1.05s}
.slide.wipe.is-active.s-overview .f-card:nth-child(5) .num{animation-delay:1.14s}
.slide.wipe.is-active.s-overview .f-card:nth-child(6) .num{animation-delay:1.23s}

@media (prefers-reduced-motion:reduce){
  .slide,.slide *{animation:none!important;transition:transform .01s!important}
}
.slide.is-blue{background:var(--blue)}
.slide.is-white{background:#fff}

/* =========================================================================
   공통 요소
   ========================================================================= */
.quote{
  color:transparent;
  -webkit-text-stroke:2.5px rgba(255,255,255,.42);
  font-weight:900;line-height:.8;user-select:none;
}

/* =========================================================================
   1) 표지
   ========================================================================= */
.s-cover{display:flex;flex-direction:column;align-items:center;justify-content:center}
.s-cover .big-quote{
  position:absolute;left:50%;top:600px;transform:translateX(-50%);
  font-size:360px;color:transparent;
  -webkit-text-stroke:4px rgba(255,255,255,.17);
  font-weight:900;line-height:.72;letter-spacing:.02em;
}
.s-cover .head{text-align:center}
.s-cover .eyebrow{font-size:60px;font-weight:400;letter-spacing:-.01em;margin-bottom:10px}
.s-cover .title{font-size:104px;font-weight:900;letter-spacing:-.02em}
.s-cover .lines{
  position:relative;z-index:2;margin-top:170px;text-align:center;
  font-size:34px;font-weight:400;line-height:1.72;color:rgba(255,255,255,.97)
}

/* =========================================================================
   2) 숫자
   ========================================================================= */
.s-stats{display:flex;flex-direction:column;align-items:center}
/* 배경 장식: 원본 시안에서 추출한 리본 그래픽 */
.s-stats .deco{
  position:absolute;inset:0;pointer-events:none;
  background:url('../img/stats-deco.png') center/100% 100% no-repeat;
  opacity:.098;
}

.s-stats .head{position:relative;z-index:2;text-align:center;margin-top:196px}
.s-stats .head .eyebrow{font-size:38px;font-weight:400;margin-bottom:6px}
.s-stats .head .title{font-size:66px;font-weight:900;letter-spacing:-.02em}

.s-stats .tiles{position:absolute;left:50%;top:447px;transform:translateX(-50%);z-index:2;display:flex;gap:131px}
.s-stats .tile{width:229px;text-align:center}
.s-stats .box{
  width:229px;height:229px;background:#fff;border-radius:34px;
  display:flex;align-items:center;justify-content:center;
}
.s-stats .box span{font-size:92px;font-weight:900;color:var(--blue);letter-spacing:-.03em}
.s-stats .box span.sm{font-size:62px}
.s-stats .cap{margin-top:36px;font-size:32px;font-weight:500;line-height:1.38;white-space:pre-line}

/* =========================================================================
   3) 6가지 기능 개요
   ========================================================================= */
.s-overview{background:#fff;color:var(--ink)}
.s-overview .bar{position:absolute;left:0;top:0;width:60px;height:100%;background:var(--blue)}
.s-overview .glow-a,
.s-overview .glow-b{position:absolute;border-radius:50%;pointer-events:none}
.s-overview .glow-a{left:-180px;top:-200px;width:760px;height:700px;background:var(--blue);opacity:.75;filter:blur(130px)}
.s-overview .glow-b{right:-120px;bottom:-240px;width:860px;height:780px;background:var(--blue);opacity:.85;filter:blur(140px)}
.s-overview .mask{position:absolute;inset:0;background:radial-gradient(ellipse 120% 120% at 50% 50%,#fff 38%,rgba(255,255,255,0) 100%)}

.s-overview .head{position:absolute;left:272px;top:128px;z-index:3}
.s-overview .head .eyebrow{font-size:38px;font-weight:400;color:#2C2D34;letter-spacing:-.01em}
.s-overview .head .title{font-size:62px;font-weight:700;color:var(--ink);letter-spacing:-.025em;margin-top:8px}

.s-overview .grid{
  position:absolute;left:272px;top:306px;z-index:3;
  display:grid;grid-template-columns:repeat(3,496px);grid-template-rows:repeat(2,322px);
  gap:28px;
}
.f-card{position:relative;border-radius:22px;perspective:1800px}
/* 카드 앞뒤 — 앞(fc-sol)=모리 기능, 뒤(fc-prob)=기존 문제점 사진. .is-prob 이면 뒤집혀 문제점이 보임 */
.f-card .fc-in{position:absolute;inset:0;transform-style:preserve-3d}
/* 전환은 !important — '동작 줄이기'(윈도우 애니메이션 효과 끔) PC 에서도 뒤집히게(숫자 릴과 같은 이유) */
.s-overview .f-card .fc-in{transition:transform .95s cubic-bezier(.5,.05,.2,1) calc(var(--d,0) * 70ms)!important}
.f-card .fc-face{position:absolute;inset:0;overflow:hidden;background:#fff;border-radius:22px;
  box-shadow:0 10px 34px rgba(40,70,25,.15);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.f-card .fc-prob{transform:rotateY(180deg);background:#1B1F1A}
.s-overview.is-prob .fc-in{transform:rotateY(180deg)}
.fc-prob img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fc-prob::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,12,0) 32%,rgba(14,18,12,.8) 100%)}
.fc-prob .pn{position:absolute;left:26px;top:24px;z-index:2;padding:6px 16px;border-radius:999px;background:rgba(14,18,12,.55);
  font-size:24px;font-weight:800;color:#fff;letter-spacing:.04em;line-height:1.2}
.fc-prob .pt{position:absolute;left:32px;right:28px;bottom:30px;z-index:2;font-size:38px;font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1.22;word-break:keep-all;
  text-shadow:0 2px 12px rgba(0,0,0,.35)}
/* 제목 — 문제점 ↔ 해결 방식 교차 */
.s-overview .head .hd-prob{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .45s ease!important}
.s-overview .head .hd-sol{transition:opacity .45s ease .3s!important}
.s-overview.is-prob .head .hd-prob{opacity:1;transition:opacity .45s ease .3s!important}
.s-overview.is-prob .head .hd-sol{opacity:0;transition:opacity .45s ease!important}
/* 장에 들어올 땐 뒤집기·교차 없이 바로 */
.s-overview.fc-instant .f-card .fc-in,
.s-overview.fc-instant .head > div{transition:none!important}
/* 고스트 번호: 카드 좌상단 모서리에서 잘려 나가도록 */
.f-card .num{
  position:absolute;left:-20px;top:-20px;
  font-size:100px;font-weight:900;color:var(--ghost);line-height:1;
  letter-spacing:-.02em
}
.f-card .ic{position:absolute;left:0;top:88px;width:100%;text-align:center;z-index:2;color:#15161B}
.f-card .ic svg{width:80px;height:80px;stroke-width:1.8}
.f-card .nm{
  position:absolute;left:0;top:186px;width:100%;text-align:center;z-index:2;
  font-size:42px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2
}

/* =========================================================================
   4) 기능 섹션 (대제목)
   ========================================================================= */
.s-section .bignum{
  position:absolute;right:104px;top:-14px;
  font-size:258px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1
}
.s-section .lead{position:absolute;left:150px;top:228px}
.s-section .lead .q{font-size:118px;position:absolute;left:4px;top:-66px}
.s-section .lead p{position:relative;z-index:2;font-size:42px;font-weight:400;line-height:1.52;letter-spacing:-.015em}
.s-section .big{
  position:absolute;left:150px;bottom:216px;
  font-size:92px;font-weight:900;letter-spacing:-.03em;line-height:1
}
.s-section .list{position:absolute;right:150px;bottom:216px;width:700px}
.s-section .list li{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  height:94px;border-top:1.6px solid rgba(255,255,255,.55);
}
.s-section .list li:last-child{border-bottom:1.6px solid rgba(255,255,255,.55)}
.s-section .list .nm{font-size:32px;font-weight:500}
.s-section .list .ix{font-size:26px;font-weight:400;color:rgba(255,255,255,.72)}

/* =========================================================================
   5) 기능 상세 (사이드바 + 미디어)
   ========================================================================= */
.s-detail{display:flex;background:#fff}
.side{
  width:500px;flex:0 0 500px;background:var(--blue);position:relative;
  padding:196px 56px 0;
}
.side h3{font-size:46px;font-weight:900;letter-spacing:-.03em;line-height:1.2}
.side ul{margin-top:88px}
.side li{
  list-style:none;display:flex;align-items:center;gap:14px;
  min-height:98px;padding:18px 0;line-height:1.3;border-top:1.5px solid rgba(255,255,255,.55);
  font-size:32px;font-weight:500;color:rgba(255,255,255,.42);
}
.side li .lt{flex:1;min-width:0;word-break:keep-all}
.side li .sd{flex:none;display:flex;gap:6px;margin-left:6px}
.side li .sd i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.side li .sd i.on{background:#fff}
.slide.tabshift.same-item.is-active .side li.on,
.slide.tabshift.same-item.is-active .side li.on .tri{animation:none}
.side li:last-child{border-bottom:1.5px solid rgba(255,255,255,.55)}
.side li.on{color:#fff;font-weight:800}
.side li .tri{width:0;height:0;opacity:0;flex:0 0 auto}
.side li.on .tri{
  opacity:1;border-left:15px solid #fff;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.side .wm{
  position:absolute;left:50%;bottom:62px;transform:translateX(-50%);
  width:196px;opacity:.42
}
/* 메뉴 아래 안내 상자(data.js features[].note) */
.side .side-note{margin-top:44px;padding:30px 24px 32px;text-align:center;border-radius:22px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.side .side-note .sn-t{display:flex;align-items:center;justify-content:center;gap:10px;font-size:29px;font-weight:800;color:#fff;letter-spacing:-.02em}
.side .side-note .sn-t svg{width:30px;height:30px;stroke-width:2}
.side .side-note p{margin-top:18px;font-size:27px;font-weight:500;line-height:1.56;color:rgba(255,255,255,.82);letter-spacing:-.02em;word-break:keep-all}
.side .side-note em{font-style:normal;font-weight:700;color:#fff}
.slide.is-active.s-detail .side .side-note{animation:riseSm .7s var(--ease-out) both .5s}
.slide.tabshift.is-active .side .side-note{animation:none}

.pane{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:124px;background:#fff}

/* --- PC 화면 영상 --- */
.media-desktop{width:1340px;height:850px;position:relative}

/* --- 휴대폰 목업 --- */
.media-mobile{display:flex;gap:150px;align-items:center}
.phone{
  width:396px;height:812px;border-radius:52px;background:#141414;padding:13px;
  position:relative;box-shadow:0 24px 60px rgba(0,0,0,.26);flex:0 0 auto
}
.phone::before,.phone::after{content:'';position:absolute;background:#141414;border-radius:3px}
.phone::before{left:-5px;top:148px;width:5px;height:58px}
.phone::after{left:-5px;top:222px;width:5px;height:92px}
.phone .rbtn{position:absolute;right:-5px;top:196px;width:5px;height:118px;background:#141414;border-radius:3px}
.phone .screen{
  width:100%;height:100%;border-radius:41px;background:#F4F4F4;
  overflow:hidden;position:relative
}
.phone .sbar{
  position:absolute;left:0;top:0;width:100%;height:50px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;padding:0 30px;
  font-size:15px;font-weight:700;color:#111
}
.phone .notch{
  position:absolute;left:50%;top:15px;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;background:#141414;z-index:5
}
.phone .sbar .icons{display:flex;align-items:center;gap:6px}
.phone .sbar .icons svg{width:17px;height:17px;stroke-width:2.2;color:#111}

/* --- 미디어 박스 공통 (video + 재생 오버레이) --- */
.mbox{position:absolute;inset:0;overflow:hidden;background:#F4F4F4}
.media-desktop .mbox{border-radius:10px;box-shadow:0 18px 50px rgba(30,50,20,.16)}
.mbox video{width:100%;height:100%;object-fit:cover;display:block;background:#F4F4F4}
.mbox .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:transparent;transition:background .2s
}
.mbox .play:hover{background:rgba(0,0,0,.04)}
.mbox .play .tri{
  width:0;height:0;
  border-left:150px solid #7B7B7B;
  border-top:95px solid transparent;border-bottom:95px solid transparent;
  border-radius:12px;transition:transform .2s, border-left-color .2s;
}
.media-mobile .mbox .play .tri{
  border-left-width:88px;border-top-width:56px;border-bottom-width:56px
}
.mbox .play:hover .tri{transform:scale(1.06);border-left-color:#5E5E5E}
.mbox.is-playing .play{display:none}
.mbox .slot{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:14px;font-weight:500;color:#A6A8B4;letter-spacing:.01em;pointer-events:none
}
.media-mobile .mbox .slot{bottom:60px;font-size:12px}
.mbox.is-playing .slot{display:none}

/* =========================================================================
   컨트롤 바 / 진행바
   ========================================================================= */
#bar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  background:rgba(14,15,22,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  opacity:.25;transition:opacity .25s;z-index:50
}
#bar:hover,#bar.show{opacity:1}
#bar button{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .15s
}
#bar button:hover{background:rgba(255,255,255,.14)}
#bar button svg{width:19px;height:19px}
#bar button:disabled{opacity:.3;cursor:default}
#bar button:disabled:hover{background:none}
#counter{
  min-width:66px;text-align:center;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.65);letter-spacing:.04em
}
#counter b{color:#fff;font-weight:700}
#counter span{margin:0 5px;opacity:.5}
#counter i{font-style:normal}
.bar-sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 4px}

#progress{position:fixed;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.08);z-index:50}
#progressFill{display:block;height:100%;width:0;background:var(--blue-lt);transition:width .35s ease}

/* =========================================================================
   목차 오버레이
   ========================================================================= */
#indexPanel{
  position:fixed;inset:0;z-index:80;background:rgba(9,10,16,.95);backdrop-filter:blur(6px);
  padding:56px 72px;display:none;flex-direction:column
}
#indexPanel.open{display:flex}
.ip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.ip-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.ip-head button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ip-head button:hover{background:rgba(255,255,255,.12)}
.ip-head button svg{width:20px;height:20px}
.ip-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-content:start}
.ip-item{
  text-align:left;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
  display:flex;gap:12px;align-items:baseline;transition:background .15s,border-color .15s
}
.ip-item:hover{background:rgba(255,255,255,.12)}
.ip-item.cur{border-color:var(--blue-lt);background:rgba(92,138,60,.25)}
.ip-item .n{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);min-width:22px}
.ip-item .t{font-size:15px;font-weight:500;line-height:1.35}
.ip-item .t small{display:block;font-size:12px;font-weight:400;color:rgba(255,255,255,.5);margin-top:3px}
.ip-help{margin-top:22px;font-size:13px;color:rgba(255,255,255,.4);text-align:center}

/* =========================================================================
   PC 전용 안내
   ========================================================================= */
#pcOnly{position:fixed;inset:0;z-index:200;background:var(--blue);display:none;align-items:center;justify-content:center;text-align:center}
#pcOnly img{width:160px;filter:brightness(0) invert(1);margin-bottom:34px}
#pcOnly h1{font-size:26px;font-weight:900;margin-bottom:14px}
#pcOnly p{font-size:15px;font-weight:400;line-height:1.75;color:rgba(255,255,255,.88)}
@media (max-width:1099px){
  #pcOnly{display:flex}
  #viewport,#bar,#progress,#indexPanel{display:none!important}
}


/* =========================================================================
   presentation_01 에서 가져온 오른쪽 화면 (이미지 · 영상 · 휴대폰 줄 · 설명 화면)
   ========================================================================= */
.m-box{position:relative;width:1340px;height:830px}
.slide.is-active.s-detail .m-box{animation:zoomIn .85s var(--ease-out) both .26s}
.slide.tabshift.is-active .m-box{animation:mediaIn .5s ease both .05s}

.m-shot{overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(20,30,15,.08),0 26px 60px -30px rgba(30,50,20,.45)}
.m-shot img,.m-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-shot.fit-contain video{object-fit:contain;object-position:center}
.m-shot.fit-cover video{object-position:center}

.m-row{display:flex;justify-content:center;align-items:center}
.m-mini{position:relative;flex:none;overflow:hidden;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(20,30,15,.08),0 24px 50px -28px rgba(30,50,20,.45)}
.m-mini.is-video{background:#111}
.m-mini img,.m-mini video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* 화면 안 설명 박스(우하단) */
.m-cap{
  position:absolute;right:32px;bottom:32px;z-index:3;
  padding:30px 42px 32px 46px;border-radius:24px;
  background:rgba(255,255,255,.96);color:var(--ink);
  box-shadow:inset 7px 0 0 var(--blue),0 0 0 1px rgba(20,30,15,.06),0 30px 60px -26px rgba(30,50,20,.55);
}
.m-cap .lbl{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:600;color:var(--ink-sub)}
.m-cap .lbl .n{font-weight:800;color:var(--blue)}
.m-cap p{margin-top:12px;font-size:38px;font-weight:800;line-height:1.36;letter-spacing:-.035em;white-space:nowrap}
.m-cap p em{font-style:normal;color:var(--blue)}
.m-cap small{display:block;margin-top:14px;padding-top:12px;border-top:1px solid #E4E7E0;font-size:21px;font-weight:500;color:var(--ink-sub);white-space:nowrap}

/* 화면 안 뱃지(장지 형태) */
.m-badge{
  position:absolute;left:28px;top:28px;z-index:3;display:flex;align-items:center;gap:14px;
  height:72px;padding:0 32px 0 12px;border-radius:999px;background:var(--blue);color:#fff;white-space:nowrap;
  box-shadow:0 18px 36px -16px rgba(30,50,20,.75),0 0 0 5px rgba(255,255,255,.7)
}
.m-badge .bi{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.m-badge .bi svg{width:27px;height:27px;stroke-width:1.9}
.m-badge b{font-size:32px;font-weight:800;letter-spacing:-.03em}
.m-badge small{font-size:22px;font-weight:500;color:rgba(255,255,255,.8)}

/* --- 설명 화면 공통 --- */
.m-panel{display:flex;flex-direction:column;padding:64px 76px 60px;border-radius:24px;overflow:hidden;color:var(--ink)}
.m-panel .pk{display:inline-flex;align-items:center;gap:12px;font-size:22px;font-weight:700;letter-spacing:.12em}
.m-panel .pk::before{content:'';width:10px;height:10px;border-radius:50%;background:currentColor}
.m-panel h3{margin-top:16px;font-size:56px;font-weight:800;line-height:1.24;letter-spacing:-.04em;white-space:nowrap}
.m-panel h3 em{font-style:normal}

/* 확장성: 큰 단계 카드 */
.m-panel .flow{margin-top:auto;display:flex;align-items:stretch}
.m-panel .fc{flex:1;height:300px;padding:40px 36px 44px;border-radius:22px;display:flex;flex-direction:column;justify-content:space-between;background:#fff}
.m-panel .fc .ib{width:92px;height:92px;border-radius:50%;display:grid;place-items:center}
.m-panel .fc .ib svg{width:46px;height:46px;stroke-width:1.8}
.m-panel .fc b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.15;white-space:nowrap}
.m-panel .fa{flex:none;width:64px;display:grid;place-items:center}
.m-panel .fa svg{width:34px;height:34px;stroke-width:2.2}

.p-erp-old{background:#F5F4F0}
.p-erp-old .pk{color:#8A877D}
.p-erp-old h3{color:#45463F}
.p-erp-old h3 em{color:#B0654F}
.p-erp-old .fc{box-shadow:inset 0 0 0 1px #E9E7E0,0 18px 34px -26px rgba(60,55,40,.5)}
.p-erp-old .fc .ib{background:#F5F4F0;color:#8A877D}
.p-erp-old .fc b{color:#45463F}
.p-erp-old .fa{color:#B3B0A6}
.p-erp-old .loop{position:relative;height:110px;margin-top:0}
.p-erp-old .lp-line{position:absolute;left:10%;right:10%;top:0;height:64px;border:2.5px dashed #C3C0B6;border-top:0;border-radius:0 0 30px 30px}
.p-erp-old .lp-line::before{content:'';position:absolute;left:-9px;top:0;width:14px;height:14px;border-top:3px solid #A9A69C;border-left:3px solid #A9A69C;transform:rotate(45deg)}
.p-erp-old .lp-lbl{position:absolute;left:50%;top:36px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;height:58px;padding:0 30px 0 24px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E9E7E0,0 12px 26px -16px rgba(60,55,40,.5);font-size:26px;font-weight:800;color:#5E5D56;white-space:nowrap}
.p-erp-old .lp-lbl svg{width:28px;height:28px;color:#B0654F;stroke-width:2.2}

.p-erp-new{background:radial-gradient(900px 520px at 100% 0%,rgba(92,138,60,.13),rgba(92,138,60,0) 70%),linear-gradient(180deg,#fff 0%,var(--g-25) 100%);box-shadow:inset 0 0 0 1.5px var(--g-200)}
.p-erp-new::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--blue)}
.p-erp-new .pk,.p-erp-new h3 em{color:var(--blue)}
.p-erp-new .fc{box-shadow:inset 0 0 0 1.5px var(--g-200),0 20px 40px -28px rgba(30,50,20,.6)}
.p-erp-new .fc .ib{background:var(--g-50);color:var(--blue)}
.p-erp-new .fa{color:var(--g-300)}
.p-erp-new .fc.solid{color:#fff;background:linear-gradient(150deg,var(--blue-lt) 0%,var(--blue) 55%,var(--blue-dk) 100%);box-shadow:0 26px 48px -26px rgba(30,50,20,.9)}
.p-erp-new .fc.solid .ib{background:rgba(255,255,255,.16);color:#fff}
.p-erp-new .msg{margin-top:46px;height:64px;display:flex;align-items:center;gap:22px;font-size:34px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.p-erp-new .msg::before{content:'';width:48px;height:3px;background:var(--ink);flex:none}
.p-erp-new .msg em{font-style:normal;color:var(--blue)}

/* 데이터 보안 */
.p-security{color:#fff;background:radial-gradient(760px 420px at 100% 0%,rgba(120,170,80,.3),rgba(120,170,80,0) 70%),radial-gradient(520px 320px at 0% 100%,rgba(120,170,80,.16),rgba(120,170,80,0) 70%),#1D231B}
.p-security .pk,.p-security h3 em{color:var(--g-on-dark)}
.p-security .cipher{margin-top:40px;display:grid;grid-template-columns:auto 96px 1fr;align-items:center;gap:26px;padding:30px 34px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.p-security .cp-src{display:flex;gap:10px}
.p-security .cp-src span{padding:14px 22px;border-radius:12px;background:#fff;color:var(--ink);font-size:24px;font-weight:700;white-space:nowrap}
.p-security .cp-lock{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;box-shadow:0 0 0 9px rgba(120,170,80,.18)}
.p-security .cp-lock svg{width:44px;height:44px}
.p-security .cp-out{min-width:0}
.p-security .cp-out small{display:block;font-size:18px;font-weight:700;letter-spacing:.1em;color:var(--g-on-dark)}
.p-security .cp-out code{display:block;margin-top:6px;overflow:hidden;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;font-weight:600;color:rgba(255,255,255,.62);-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.p-security .sp-cards{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.p-security .sp-card{display:flex;flex-direction:column;min-height:270px;padding:34px 32px 36px;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.p-security .sp-card .ib{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;background:rgba(120,170,80,.2);color:var(--g-on-dark)}
.p-security .sp-card .ib svg{width:42px;height:42px}
.p-security .sp-card b{margin-top:auto;font-size:30px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.p-security .sp-card > span:last-child{margin-top:10px;font-size:21px;font-weight:500;color:rgba(255,255,255,.66)}

/* 수익 확장: 오른쪽으로 갈수록 진해지는 단계 카드 */
.p-revenue{background:#fff}
.p-revenue .pk,.p-revenue h3 em{color:var(--blue)}
.p-revenue .rv-steps{margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:end}
.p-revenue .rs{position:relative;display:flex;flex-direction:column;padding:34px 30px 36px;border-radius:22px}
.p-revenue .rs1{height:380px;background:#F5F4F0}
.p-revenue .rs2{height:420px;background:linear-gradient(180deg,#fff 0%,var(--g-50) 100%);box-shadow:inset 0 0 0 1px var(--g-100)}
.p-revenue .rs3{height:460px;background:linear-gradient(180deg,var(--g-50) 0%,var(--g-100) 100%);box-shadow:inset 0 0 0 1px var(--g-200)}
.p-revenue .rs4{height:500px;color:#fff;background:linear-gradient(160deg,var(--blue-lt) 0%,var(--blue) 50%,var(--blue-dk) 100%);box-shadow:0 30px 56px -30px rgba(30,50,20,.9)}
.p-revenue .rs .ib{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);box-shadow:0 8px 18px -12px rgba(30,50,20,.6)}
.p-revenue .rs .ib svg{width:36px;height:36px}
.p-revenue .rs1 .ib{color:#8C8A80}
.p-revenue .rs4 .ib{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.p-revenue .rs > small{margin-top:auto;font-size:17px;font-weight:700;letter-spacing:.14em;color:var(--blue)}
.p-revenue .rs1 > small{color:#8C8A80}
.p-revenue .rs4 > small{color:rgba(255,255,255,.72)}
.p-revenue .rs > b{margin-top:8px;font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.2;white-space:nowrap}
.p-revenue .rs > span:last-child{margin-top:12px;font-size:21px;font-weight:500;line-height:1.45;color:var(--ink-sub)}
.p-revenue .rs4 > span:last-child{color:rgba(255,255,255,.82)}
.p-revenue .zero{position:absolute;left:0;top:-82px;display:flex;align-items:baseline;gap:10px;height:62px;padding:0 26px;border-radius:999px;align-items:center;color:#fff;background:linear-gradient(120deg,var(--blue-lt),var(--blue) 55%,var(--blue-dk));box-shadow:0 0 0 5px #fff,0 18px 34px -14px rgba(30,50,20,.85);white-space:nowrap}
.p-revenue .zero small{font-size:19px;font-weight:600;color:rgba(255,255,255,.85)}
.p-revenue .zero b{font-size:40px;font-weight:900;line-height:1}
.p-revenue .zero b i{font-style:normal;font-size:22px;margin-left:2px}

/* =========================================================================
   표지 · 회사 소개 — presentation_01 과 같은 구성(글꼴만 Paperlogy)
   .p1 안에서만 쓰는 색 토큰 — presentation_01 값 그대로
   ========================================================================= */
.p1{
  --g:#5C8A3C;--g-300:#B4CE9C;--acc:#5C8A3C;--acc-50:#F2F7EE;--acc-200:#D2E2C3;
  --acc-rgb:92,138,60;--acc-sh:60,90,40;--acc-glow:120,170,80;--acc-on-dark:#A6CE84;
  --ink:#1B1F1A;--ink-2:#3A3F38;--mute:#6A6F67;--mute-2:#9B9F97;--line:#E4E7E0;--dark:#1D231B;
  display:flex;flex-direction:column;padding:64px 112px 60px;background:#fff;color:var(--ink);
  word-break:keep-all;letter-spacing:-.02em
}
.p1::before{content:'';position:absolute;pointer-events:none;width:1100px;height:800px;
  background:radial-gradient(closest-side,rgba(92,138,60,.065),rgba(92,138,60,0))}
.p1 > *:not(.top){position:relative}
.p1 em{font-style:normal}
.p1 p,.p1 h1,.p1 h3{margin:0}

/* 등장(위로 살짝) — 가로 슬라이드가 거의 들어온 뒤 */
.p1 .rv{opacity:0;transform:translateY(14px);transition:opacity 0s linear .66s,transform 0s linear .66s}
.p1.is-active .rv{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms + 300ms)}
.p1.xfade.is-active .rv{transition-delay:calc(var(--i,0) * 70ms + 120ms)}

/* --- 표지 --- */
.p1-cover{padding:0;align-items:center;justify-content:center}
.p1-cover::before{left:50%;top:50%;width:1500px;height:1000px;transform:translate(-50%,-54%);
  background:radial-gradient(closest-side,rgba(92,138,60,.085),rgba(92,138,60,0))}
.p1-cover .cv-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.p1-cover .cv-kick{display:flex;align-items:center;gap:22px;font-size:30px;font-weight:700;letter-spacing:.14em;margin-right:-.14em;color:var(--g)}
.p1-cover .cv-kick::before,.p1-cover .cv-kick::after{content:'';width:64px;height:2px;background:var(--g-300)}
.p1-cover .cv-kick::after{margin-left:-.14em}
.p1-cover .cv-logo{margin-top:52px;height:150px;width:auto;display:block}
.p1-cover .cv-line{margin-top:64px;width:72px;height:3px;border-radius:2px;background:var(--ink)}
.p1-cover .cv-title{margin-top:56px;font-size:68px;font-weight:800;line-height:1.32;letter-spacing:-.045em;color:var(--ink)}
.p1-cover .cv-title em{color:var(--g)}

/* --- 회사 소개: 머리(제목 · 설명 · 로고) --- */
.p1-about::before{left:-460px;top:-420px}
.p1-about .top{position:absolute;top:92.5px;right:112px;z-index:2}
.p1-about .brand{height:24px;width:auto;display:block}
.p1-about .hd{display:flex;align-items:flex-end;gap:40px;min-height:74px;padding-right:260px}
.p1-about .hd h1{font-size:60px;line-height:1.12;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.p1-about .hd h1 em{color:var(--acc)}
.p1-about .hd-lead{margin-bottom:7px;padding-left:34px;border-left:1.5px solid var(--line);font-size:23px;line-height:1.45;font-weight:500;color:var(--ink-2)}
.p1-about .hd-lead b{color:var(--acc);font-weight:700}
.p1-about .body{flex:1;min-height:0;margin-top:60px;display:flex;flex-direction:column}

/* --- 회사 소개: 15 · 10 · 3 · N --- */
.p1-about .about{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto}
.p1-about .about.is-detail{grid-template-columns:560px 1fr;grid-template-rows:1fr;column-gap:56px}
.p1-about .kv-list{min-height:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.p1-about .kv{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.p1-about .kv + .kv::before{content:'';position:absolute;left:0;top:50%;height:360px;margin-top:-180px;width:1.5px;
  background:linear-gradient(transparent,var(--line) 18%,var(--line) 82%,transparent)}
.p1-about .kv-n{display:block;font-size:280px;font-weight:800;line-height:1.24;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.p1-about .kv-now .kv-n{color:var(--acc)}
.p1-about .reel{display:inline-block;height:1.24em;overflow:hidden;vertical-align:top;
  -webkit-mask-image:linear-gradient(transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 18%,#000 82%,transparent 100%)}
.p1-about .reel-in{display:block;transition:transform 1.9s cubic-bezier(.16,.84,.22,1);will-change:transform}
.p1-about .reel-in i{display:block;height:1.24em;line-height:1.24em;font-style:normal;text-align:center;letter-spacing:0;padding:0 .02em}
.p1-about .reel + .reel{margin-left:-.1em}
.p1-about .reel.reel-lead{max-width:1em;transition:max-width 1.9s cubic-bezier(.16,.84,.22,1),margin-right 1.9s cubic-bezier(.16,.84,.22,1)}
.p1-about .reel.reel-lead.is-folded{max-width:0;margin-right:.1em}
.p1-about .reel-in i.blank{visibility:hidden}
.p1-about .kv-m{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:8px;white-space:nowrap}
.p1-about .kv-m small{font-size:18px;font-weight:800;letter-spacing:.24em;color:var(--acc)}
.p1-about .kv-m b{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--ink-2)}
.p1-about .about-tag{justify-self:center;margin:0 0 6px;padding:18px 0;font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--ink-2)}
.p1-about .about-tag b{font-weight:800;color:var(--ink)}
.p1-about .about-tag em{font-weight:800;color:var(--acc)}
.p1-about .kv-detail{display:none;position:relative;min-width:0;min-height:0}

/* [다음] 이후: 왼쪽 세로 목록 + 오른쪽 의미 */
.p1-about .about.is-detail .about-tag{display:none}
.p1-about .about.is-detail .kv-detail{display:block}
.p1-about .about.is-detail .kv-list{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);align-items:stretch}
.p1-about .about.is-detail .kv{flex-direction:row;justify-content:center;gap:34px}
.p1-about .about.is-detail .kv + .kv::before{left:0;right:0;top:0;width:auto;height:1.5px;margin-top:0;
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent)}
.p1-about .about.is-detail .kv-n{width:200px;text-align:center;font-size:104px;color:var(--mute-2);opacity:.55}
.p1-about .about.is-detail .kv-m{width:230px;margin-top:0;align-items:flex-start;gap:6px}
.p1-about .about.is-detail .kv-m small{color:var(--mute-2)}
.p1-about .about.is-detail .kv-m b{font-size:30px;color:var(--mute-2)}
.p1-about .about.is-detail .kv.is-done .kv-n{color:var(--ink-2);opacity:.8}
.p1-about .about.is-detail .kv.is-done .kv-m b{color:var(--ink-2)}
.p1-about .about.is-detail .kv.is-on .kv-n{font-size:124px;color:var(--acc);opacity:1}
.p1-about .about.is-detail .kv.is-on .kv-m small{color:var(--acc)}
.p1-about .about.is-detail .kv.is-on .kv-m b{font-size:36px;color:var(--ink)}

.p1-about .kd{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;padding:64px 72px 60px;border-radius:24px;
  background:linear-gradient(160deg,#fff 0%,var(--acc-50) 100%);
  box-shadow:inset 0 0 0 1px var(--acc-200),0 36px 64px -44px rgba(var(--acc-sh),.55);visibility:hidden}
.p1-about .kd.is-on{visibility:visible}
.p1-about .kd-wm{position:absolute;right:-10px;bottom:-120px;font-size:560px;font-weight:800;line-height:1;letter-spacing:-.07em;color:rgba(var(--acc-rgb),.07);pointer-events:none}
.p1-about .kd > *:not(.kd-wm){position:relative}
.p1-about .kd-k{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:800;letter-spacing:.2em;color:var(--acc)}
.p1-about .kd-k::before{content:'';width:40px;height:2px;background:currentColor}
.p1-about .kd h3{margin-top:22px;font-size:62px;font-weight:800;line-height:1.2;letter-spacing:-.05em}
.p1-about .kd h3 em{color:var(--acc)}
.p1-about .kd p{margin-top:30px;max-width:900px;font-size:27px;font-weight:500;line-height:1.65;letter-spacing:-.03em;color:var(--ink-2)}
.p1-about .kd-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.p1-about .kd-now{color:#fff;background:radial-gradient(760px 460px at 100% 0%,rgba(var(--acc-glow),.32),rgba(var(--acc-glow),0) 70%),var(--dark);box-shadow:0 40px 70px -40px rgba(20,30,15,.8)}
.p1-about .kd-now .kd-wm{color:rgba(255,255,255,.05)}
.p1-about .kd-now .kd-k,.p1-about .kd-now h3 em{color:var(--acc-on-dark)}
.p1-about .kd-now p{color:rgba(255,255,255,.8)}
.p1-about .kd-logo{height:40px;width:auto;flex:none}

/* 단계 전환은 View Transition(지원 안 하는 브라우저는 즉시 전환) */
.p1-about .kv[data-k="1"]{view-transition-name:kv1}
.p1-about .kv[data-k="2"]{view-transition-name:kv2}
.p1-about .kv[data-k="3"]{view-transition-name:kv3}
.p1-about .kv[data-k="4"]{view-transition-name:kv4}
.p1-about .kv[data-k="1"] .kv-n{view-transition-name:kvn1}
.p1-about .kv[data-k="2"] .kv-n{view-transition-name:kvn2}
.p1-about .kv[data-k="3"] .kv-n{view-transition-name:kvn3}
.p1-about .kv[data-k="4"] .kv-n{view-transition-name:kvn4}
.p1-about .kv[data-k="1"] .kv-m{view-transition-name:kvm1}
.p1-about .kv[data-k="2"] .kv-m{view-transition-name:kvm2}
.p1-about .kv[data-k="3"] .kv-m{view-transition-name:kvm3}
.p1-about .kv[data-k="4"] .kv-m{view-transition-name:kvm4}
.p1-about .kv-detail{view-transition-name:kvdetail}
::view-transition-group(*){animation-duration:.62s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-old(kv1),::view-transition-old(kv2),::view-transition-old(kv3),::view-transition-old(kv4),
::view-transition-new(kv1),::view-transition-new(kv2),::view-transition-new(kv3),::view-transition-new(kv4){height:100%}


/* =========================================================================
   상세 화면 오른쪽 위 — 6단계 진행 바 (01 관리비 … 06 디지털 영정)
   ========================================================================= */
.chap-bar{position:absolute;left:50%;top:42px;transform:translateX(-50%);width:1340px;height:52px;
  display:flex;align-items:center;justify-content:space-between;list-style:none;white-space:nowrap}
.chap-bar .cb{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;
  font-size:19px;font-weight:600;letter-spacing:-.02em;color:#A3A79F}
.chap-bar .cb .n{font-size:17px;font-weight:800;letter-spacing:.02em}
.chap-bar .cb.done{color:var(--blue)}
.chap-bar .cb.on{background:var(--blue);color:#fff;font-weight:800;box-shadow:0 12px 24px -14px rgba(30,50,20,.8)}
.chap-bar .sep{display:flex;align-items:center;color:#C9CDC5}
.chap-bar .sep svg{width:18px;height:18px;stroke-width:2.4}
.slide.is-active.s-detail .chap-bar{animation:fade .6s ease both .2s}
.slide.tabshift.is-active .chap-bar{animation:none}

/* =========================================================================
   06 디지털 영정 — presentation_01 6장처럼 한 화면
   ========================================================================= */
.m-six{display:flex;align-items:flex-end;gap:28px;word-break:keep-all}
.m-six .six-imgs{display:flex;gap:24px;flex:none}
/* 같은 소메뉴 안 단계 이동 땐 이미지만 바뀌고 카드는 제자리 */
.slide.tabshift.same-item.is-active .m-box.m-six{animation:none}
.slide.tabshift.same-item.is-active .m-six .six-imgs{animation:mediaIn .5s ease both .05s}
/* 두 장 겹친 이미지 — 장에 들어오고 swap 뒤 .is-swapped 로 다음 이미지가 스르륵(두 자리 동시).
   !important = '동작 줄이기' PC 에서도 페이드 */
[data-swap] .sw-b{opacity:0}
[data-swap].is-swapped .sw-b{opacity:1}
.m-six [data-swap] .sw-b{transition:opacity 1.3s ease-in-out!important}
.m-six [data-swap].sw-instant .sw-b{transition:none!important}
.m-six .six-img{border-radius:20px}
.m-six .six-img img{object-fit:cover;object-position:center top}
.m-six .six-steps{position:relative;flex:1;min-width:0;list-style:none;display:grid;grid-template-rows:repeat(4,1fr);gap:14px}
.m-six .st{position:relative;display:flex;align-items:center;gap:18px;padding:0 24px;border-radius:18px}
.m-six .st .ib{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);box-shadow:0 8px 18px -12px rgba(30,50,20,.6)}
.m-six .st .ib svg{width:28px;height:28px}
.m-six .st .tx{display:flex;flex-direction:column;min-width:0}
.m-six .st .tx small{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--blue)}
.m-six .st .tx b{margin-top:4px;font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1.2;white-space:nowrap;color:var(--ink)}
.m-six .st .tx > span{margin-top:6px;font-size:17px;font-weight:500;line-height:1.4;color:var(--ink-sub)}
.m-six .st1{background:#F5F4F0}
.m-six .st1 .ib,.m-six .st1 .tx small{color:#8C8A80}
.m-six .st2{background:linear-gradient(90deg,#fff 0%,var(--g-50) 100%);box-shadow:inset 0 0 0 1px var(--g-100)}
.m-six .st3{background:linear-gradient(90deg,var(--g-50) 0%,var(--g-100) 100%);box-shadow:inset 0 0 0 1px var(--g-200)}
.m-six .st4{background:linear-gradient(120deg,var(--blue-lt) 0%,var(--blue) 50%,var(--blue-dk) 100%);box-shadow:0 26px 48px -28px rgba(30,50,20,.9)}
.m-six .st4 .ib{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.m-six .st4 .tx small{color:rgba(255,255,255,.7)}
.m-six .st4 .tx b{color:#fff}
.m-six .st4 .tx > span{color:rgba(255,255,255,.82)}
.m-six .zero{position:absolute;right:16px;top:-22px;display:flex;align-items:center;gap:8px;height:50px;padding:0 20px;border-radius:999px;color:#fff;
  background:linear-gradient(120deg,var(--blue-lt),var(--blue) 55%,var(--blue-dk));box-shadow:0 0 0 4px #fff,0 16px 30px -14px rgba(30,50,20,.85);white-space:nowrap}
.m-six .zero small{font-size:16px;font-weight:600;color:rgba(255,255,255,.85)}
.m-six .zero b{font-size:32px;font-weight:900;line-height:1}
.m-six .zero b i{font-style:normal;font-size:18px;margin-left:2px}
.m-six .lk{position:absolute;left:32px;width:32px;height:32px;margin-top:-16px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);
  box-shadow:0 0 0 1px var(--g-200),0 6px 14px -8px rgba(30,50,20,.6);z-index:2}
.m-six .lk svg{width:16px;height:16px;stroke-width:2.4}
.m-six .lk.k1{top:calc((100% - 42px) / 4 + 7px)}
.m-six .lk.k2{top:calc((100% - 42px) / 2 + 21px)}
.m-six .lk.k3{top:calc((100% - 42px) * 3 / 4 + 35px)}


/* 설명 박스 + 위에 얹는 문서 목록 박스 — 같은 너비(문서 박스는 너비를 정하지 않고 설명 박스를 따라감) */
.m-caps{position:absolute;right:32px;bottom:32px;z-index:3;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.m-caps .m-cap{position:static}
.m-sample{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 22px 22px;border-radius:22px;
  background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(20,30,15,.06),0 30px 60px -26px rgba(30,50,20,.55)}
.m-sample .lbl{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--g-50);
  box-shadow:inset 0 0 0 1px var(--g-200);font-size:18px;font-weight:700;color:var(--ink-sub);letter-spacing:-.01em}
.m-sample .lbl svg{width:20px;height:20px;stroke-width:2;color:var(--blue)}
.m-shot .m-sample img{position:static;inset:auto;display:block;height:400px;width:auto;object-fit:contain}
.m-docs{
  width:0;min-width:100%;
  padding:26px 42px 28px 46px;border-radius:24px;
  background:rgba(255,255,255,.96);color:var(--ink);
  box-shadow:inset 7px 0 0 var(--blue),0 0 0 1px rgba(20,30,15,.06),0 30px 60px -26px rgba(30,50,20,.55);
}
.m-docs .lbl{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;color:var(--ink-sub)}
.m-docs .lbl svg{width:24px;height:24px;color:var(--blue);stroke-width:2}
.m-docs .chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.m-docs .chips span{padding:8px 15px;border-radius:10px;background:var(--g-50);box-shadow:inset 0 0 0 1px var(--g-200);
  font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--blue-dk);white-space:nowrap}
.m-docs p{margin-top:16px;font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1.35;word-break:keep-all}
.m-docs p em{font-style:normal;color:var(--blue)}


/* 휴대폰 프레임 안 스크린샷 — 프레임 화면 칸(상태표시줄 아래 ~ 화면 끝)에 폭 맞춤·위쪽 기준 */
.m-phone{position:relative;flex:none;filter:drop-shadow(0 26px 40px rgba(20,30,15,.28))}
.m-phone .pf{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-phone .scr{position:absolute;left:3.70%;width:92.63%;top:6.39%;height:92.02%;overflow:hidden;background:#fff}
.m-phone .scr img,.m-phone .scr video{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
/* 휴대폰 화면 안 좌상단 설명 뱃지(data.js row 의 badges) */
.m-pbadge{position:absolute;left:calc(3.7% + 14px);top:calc(6.39% + 14px);z-index:3;display:flex;align-items:center;gap:9px;
  height:48px;padding:0 20px 0 8px;border-radius:999px;background:var(--blue);color:#fff;white-space:nowrap;
  box-shadow:0 14px 28px -14px rgba(30,50,20,.75),0 0 0 4px rgba(255,255,255,.75)}
.m-pbadge .bi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.m-pbadge .bi svg{width:19px;height:19px;stroke-width:2}
.m-pbadge b{font-size:23px;font-weight:800;letter-spacing:-.03em;word-spacing:.12em}
.m-tablet{position:relative;flex:none;filter:drop-shadow(0 26px 40px rgba(20,30,15,.28))}
.m-tablet .pf{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-tablet .scr{position:absolute;left:1.444%;width:97.112%;top:5.622%;height:92.105%;overflow:hidden;background:#fff}
.m-tablet .scr img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}

/* =========================================================================
   마지막 장 — 현장 참석자 혜택(쿠폰). .p1 색 토큰·등장 효과 그대로 씀
   ========================================================================= */
.p1-benefit{padding:0;align-items:center;justify-content:center}
.p1-benefit::before{left:50%;top:50%;width:1700px;height:1100px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(92,138,60,.095),rgba(92,138,60,0))}
.p1-benefit .top{position:absolute;top:92.5px;right:112px;z-index:2}
.p1-benefit .brand{height:24px;width:auto;display:block}
.p1-benefit .bn-in{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-24px}
.p1-benefit .bn-kick{display:inline-flex;align-items:center;gap:14px;height:60px;padding:0 30px 0 9px;border-radius:999px;
  background:var(--acc-50);box-shadow:inset 0 0 0 1.5px var(--acc-200);font-size:26px;font-weight:700;color:var(--g);letter-spacing:-.01em}
.p1-benefit .bn-kick .ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff}
.p1-benefit .bn-kick .ib svg{width:22px;height:22px;stroke-width:2}
.p1-benefit .bn-title{margin-top:44px;font-size:76px;font-weight:800;line-height:1.2;letter-spacing:-.045em;color:var(--ink)}
.p1-benefit .bn-title em{color:var(--g)}
.p1-benefit .bn-body{margin-top:34px;font-size:29px;line-height:1.62;font-weight:500;color:var(--ink-2)}
.p1-benefit .bn-body em{color:var(--ink);font-weight:700;box-shadow:inset 0 -.38em 0 rgba(92,138,60,.18)}

/* 쿠폰 — 바깥(.coupon)이 그림자(가까운 윤곽 + 넓은 그림자), 안(.cp-ticket)이 위아래 반원 홈 */
.p1-benefit .coupon{margin-top:56px;filter:drop-shadow(0 1px 2px rgba(40,70,25,.22)) drop-shadow(0 26px 38px rgba(40,70,25,.26))}
.p1-benefit .cp-ticket{--stub:360px;display:flex;width:1200px;height:390px;border-radius:32px;overflow:hidden;
  -webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 26px,#000 26.5px) top/100% 51% no-repeat,
               radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 26px,#000 26.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 26px,#000 26.5px) top/100% 51% no-repeat,
               radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 26px,#000 26.5px) bottom/100% 51% no-repeat}
.p1-benefit .cp-main{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 76px;
  background:linear-gradient(120deg,#6C9C4A 0%,#5C8A3C 48%,#4C7631 100%);color:#fff;overflow:hidden}
.p1-benefit .cp-main::after{content:'';position:absolute;right:-170px;top:50%;width:540px;height:540px;transform:translateY(-50%);border-radius:50%;
  border:2px solid rgba(255,255,255,.13);box-shadow:0 0 0 50px rgba(255,255,255,.045),0 0 0 100px rgba(255,255,255,.03)}
.p1-benefit .cp-lbl{position:relative;font-size:22px;font-weight:700;letter-spacing:.34em;color:rgba(255,255,255,.72)}
.p1-benefit .cp-val{position:relative;margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 24px;white-space:nowrap}
.p1-benefit .cp-pre{flex-basis:100%;margin-top:6px;text-align:left;font-size:50px;font-weight:700;letter-spacing:-.03em}   /* 앞 문구(현장지원업체)는 금액 위 한 줄 */
.p1-benefit .cp-amt{font-size:184px;font-weight:900;line-height:1;letter-spacing:-.045em}
.p1-benefit .cp-amt small{margin-left:8px;font-size:74px;font-weight:800;letter-spacing:-.03em}
.p1-benefit .cp-post{font-size:64px;font-weight:800;letter-spacing:-.03em}
/* 꼬리표 — 흰 배경과 갈리게 연두 바탕 + 테두리 */
.p1-benefit .cp-stub{width:var(--stub);flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:#E9F2E0;border-left:3px dashed #A9C78E;box-shadow:inset -2px 0 0 #CFE0BE,inset 0 2px 0 #CFE0BE,inset 0 -2px 0 #CFE0BE;border-radius:0 32px 32px 0}
.p1-benefit .cp-stub img{height:30px;width:auto;display:block}
.p1-benefit .cp-code{display:flex;flex-direction:column;align-items:center;gap:10px}
.p1-benefit .cp-code small{font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.p1-benefit .cp-code b{display:block;padding:12px 26px;border-radius:12px;background:#fff;border:2px dashed var(--g);
  font-size:30px;font-weight:800;letter-spacing:.1em;margin-right:-.1em;color:var(--ink);white-space:nowrap}
.p1-benefit .cp-note{font-size:20px;font-weight:700;color:var(--g);letter-spacing:-.01em}