/* 차똑 랜딩 v16 — 밝은 민트틸 #00C8A8 을 페이지의 얼굴로.
   v13 에서는 민트를 마지막 블록에만 썼는데, 그 면이 제일 좋다는 판단이 나와
   히어로까지 민트로 깔았다. 민트가 처음과 끝을 잡고, 그 사이는 흰 바탕이다.
   어두운 블록은 '위험' 하나만 남겼다. 밝은 면이 계속되다 한 번 어두워지니
   그 장면이 훨씬 세게 온다. 어둠을 아껴 써야 무섭다.

   (아래는 v13 에서 정한 색 원칙 그대로)
   v12 는 같은 계열이되 너무 어둡고 채도가 낮아 칙칙했다. 세 가지를 고쳤다.
   (1) 시그니처를 탁한 딥그린에서 맑은 민트틸로 올렸다
   (2) 밝은 구간의 바탕을 회색 대신 흰색 + 옅은 민트로 바꿔 브랜드 색이 밝은 데도 살게 했다
   (3) 어두운 블록을 히어로·위험 둘로 줄이고, 마지막 신청 블록을 밝은 민트로 끝내
       페이지가 어둡게 닫히지 않게 했다
   버튼은 밝은 민트 바탕에 진한 청록 글자다(대비 7:1). 흰 글자를 쓰면 민트를 어둡게
   내려야 해서 다시 칙칙해진다.
   빨강은 브랜드 색이 아니라 오류·경고 표시 전용이다.
   구조(섹션마다 면 하나, 굵은 제목, 흐르는 띠, 진행바, 큰 숫자)는 v10 그대로 두고
   장식만 걷어냈다: 번짐 없는 오프셋 그림자 → 1px 선. 절제된 쪽이 이 서비스에 맞다.

   ⚠ 이 파일은 랜딩에만 적용된다. 서비스 화면(style.css)은 기존 크림·테라 팔레트 그대로다.
     /buy 로 넘어가면 색이 한 번 바뀐다. 서비스까지 확장할지는 회장님 확인 뒤에 정한다. */

.lp{
  --i-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.8' fill='%23000'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-7 7.5-7s7.5 2.9 7.5 7z' fill='%23000'/%3E%3C/svg%3E");
  width:100%;max-width:none;padding:0;display:block;overflow-x:clip;

  --bg:#FFFFFF;        /* 화면 바탕. 회색이 아니라 흰색이어야 숨통이 트인다 */
  --surf:#EFFAF6;      /* 옅은 민트 면. 밝은 구간에도 브랜드 색이 돈다 */
  --edge:#D9EDE6;      /* 얇은 선 */
  --tx:#0E1A1B;        /* 글자 */
  --tx2:#556866;       /* 보조 글자 */
  --tx3:#8CA5A1;       /* 더 옅은 글자 */
  --brand:#00C8A8;     /* ★ 브랜드 색. 밝은 민트틸 */
  --brand-ink:#04302A; /* 밝은 민트 위에 올리는 글자 (대비 7:1) */
  --ac:#00C8A8;        /* 버튼 바탕 */
  --ac-d:#00B294;      /* 눌렀을 때 */
  --ac-tx:#00806E;     /* 흰 바탕 위에 쓰는 청록 글자 (대비 4.9:1) */
  --ac-lt:#4FE3C8;     /* 어두운 면 위에서 쓰는 밝은 민트 */
  --dk:#05473E;        /* 어두운 블록 (히어로) */
  --dk2:#032E28;       /* 더 깊은 블록 (위험) */
  --on-dk:#EAFBF6;
  --on-dk2:#9EC7BE;
  --warn:#D7452E;      /* 브랜드 색 아님. 오류·경고 표시 전용 */

  --disp:"Pretendard Variable",Pretendard,var(--kr);
  --gut:clamp(20px,4vw,28px); --max:1180px;
  background:var(--bg);color:var(--tx);font-family:var(--kr)
}
.lp *{box-sizing:border-box}
.lp img{max-width:100%;display:block}
.lp a{color:inherit;text-decoration:none}
/* 버튼은 <a> 라서 위 inherit 규칙에 색을 뺏긴다. 아래 버튼 규칙은 전부 .lp 로 감싸 둘 것. */
.lp h1,.lp h2,.lp h3{margin:0;font-family:var(--disp);font-weight:900;letter-spacing:-.045em;line-height:1.1}
/* 워드마크 점도 포인트 색으로 (style.css 는 테라코타를 쓴다) */
.lp .wm-d i{background:var(--ac-tx)}
/* 컨테이너 이름은 .cw. .wrap 은 style.css 가 앱 화면 컨테이너로 쓰고 있어 쓰면 안 된다. */
.cw{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* 등장 효과. 기본값은 '보임'. 프레임이 실제로 도는 걸 확인한 뒤에야 숨겼다 켠다.
   이 순서를 뒤집으면 애니메이션이 멈춘 환경에서 본문이 투명한 채로 남는다. */
.js-anim .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1;transform:none;transition:none}
  .mq-track,.hero-art img{animation:none!important}
}

/* ── 위쪽 진행바 ── */
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0;background:var(--ac)}

/* ── 버튼 ── */
.lp .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font:700 16px/1 var(--kr);letter-spacing:-.02em;
  transition:transform .1s,background .16s,border-color .16s,color .16s}
.lp .btn:active{transform:translateY(1px)}
.lp .btn.big{font-size:17px;padding:18px 32px}
.lp .btn-ac{background:var(--ac);border-color:var(--ac);color:var(--brand-ink)}
.lp .btn-ac:hover{background:var(--ac-d);border-color:var(--ac-d)}
.lp .btn-line{background:transparent;border-color:var(--edge);color:var(--tx)}
.lp .btn-line:hover{border-color:var(--tx)}
.lp .btn-deep{background:var(--dk);border-color:var(--dk);color:var(--on-dk)}
.lp .btn-deep:hover{background:#043C35;border-color:#043C35}
.lp .btn-line-dark{background:transparent;border-color:rgba(4,48,42,.3);color:var(--brand-ink)}
.lp .btn-line-dark:hover{border-color:var(--brand-ink);background:rgba(255,255,255,.35)}
.lp .btn-line-light{background:transparent;border-color:rgba(233,242,240,.32);color:var(--on-dk)}
.lp .btn-line-light:hover{border-color:var(--on-dk)}

/* ── 상단바 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:20px;
  padding:14px var(--gut);color:var(--brand-ink);transition:background .25s,color .25s,border-color .25s;
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);color:var(--tx);border-bottom-color:var(--edge)}
.nav-logo{display:inline-flex;align-items:center;gap:9px}
.nav-logo .wm{color:currentColor}
.nav-menu{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0;font:600 14px/1 var(--kr);letter-spacing:-.01em}
.nav-menu a{opacity:.72;transition:opacity .2s}
.nav-menu a:hover{opacity:1}
.lp .nav-cta{display:inline-flex;align-items:center;padding:10px 17px;border-radius:999px;
  background:var(--dk);color:var(--on-dk);font:700 14px/1 var(--kr);letter-spacing:-.02em;transition:background .16s}
.lp .nav-cta:hover{background:#043C35}
.nav-burger{display:none;background:none;border:0;width:42px;height:42px;flex-direction:column;
  justify-content:center;gap:5px;cursor:pointer;margin-left:auto;padding:0}
.nav-burger i{display:block;height:2px;background:currentColor;border-radius:2px}
@media (max-width:860px){
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dk);color:var(--on-dk);
    flex-direction:column;gap:0;padding:8px 0;margin:0}
  .nav-menu.open{display:flex}
  .nav-menu a{display:block;padding:15px var(--gut);font-size:16px;opacity:1}
  .nav-cta{display:none}
  .nav-burger{display:flex}
}

/* ── 히어로 ── */
.hero{position:relative;min-height:100dvh;background:var(--brand);color:var(--brand-ink);overflow:hidden;
  display:flex;align-items:center;padding:120px 0 90px}
.hero-ghost{position:absolute;left:-3vw;bottom:-7vw;font-family:var(--disp);font-weight:900;
  font-size:40vw;line-height:.78;color:#FFFFFF;opacity:.2;pointer-events:none;user-select:none;
  letter-spacing:-.06em;will-change:transform}
.hero-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--gut);width:100%;
  display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(28px,4vw,56px);align-items:center}
.kicker{margin:0 0 18px;font:600 14px/1.5 var(--kr);letter-spacing:-.01em;color:rgba(4,48,42,.72);
  display:inline-flex;align-items:center;gap:9px}
.kicker b{background:rgba(255,255,255,.55);color:var(--brand-ink);padding:4px 10px;border-radius:999px;font-weight:700;font-size:13px}
/* 제목이 다시 짧아져(9자/8자) 크기를 올렸다. 부제는 세 문장이라 폭은 넓힌 채로 둔다. */
.hero-title{font-size:clamp(38px,5.6vw,74px);color:var(--brand-ink)}
.hero-sub{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:rgba(4,48,42,.76);margin:24px 0 34px;max-width:40em;
  word-break:keep-all;text-wrap:pretty}
.hero-sub b{color:var(--brand-ink);font-weight:800}
.hero-facts{list-style:none;margin:26px 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-facts li{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.62);color:var(--brand-ink);
  font:700 13.5px/1 var(--kr);letter-spacing:-.02em;padding:9px 14px 9px 11px;border-radius:999px}
.hero-facts li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--brand-ink);
  -webkit-mask:center/9px 7px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7'%3E%3Cpath d='M1 3.6L3.4 6 8 1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:center/9px 7px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7'%3E%3Cpath d='M1 3.6L3.4 6 8 1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (max-width:860px){.hero-facts{margin-top:20px;gap:6px}.hero-facts li{font-size:12.5px;padding:8px 12px 8px 10px}}
.hero-sub b{color:var(--brand-ink);font-weight:700}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-note{margin:22px 0 0;font:500 13px/1.6 var(--kr);color:rgba(4,48,42,.6)}
.hero-art{position:relative;display:grid;place-items:center;isolation:isolate;margin:0}
.hero-art::before{content:"";position:absolute;top:46%;transform:translateY(-50%);
  width:min(108%,520px);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%)}
.hero-art img,.last-art img{height:auto}
.hero-art img{width:min(78%,340px);animation:hfloat 5.5s ease-in-out infinite;
  filter:drop-shadow(0 24px 40px rgba(4,48,42,.42))}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-art figcaption{margin-top:16px;font:600 13px/1 var(--kr);letter-spacing:-.01em;color:rgba(4,48,42,.58)}
.hero-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:24px;height:40px;border:1.5px solid rgba(4,48,42,.32);border-radius:14px;z-index:1}
.hero-scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;
  background:var(--brand-ink);border-radius:2px;animation:drop 1.5s infinite}
@keyframes drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(16px);opacity:0}}
@media (max-width:860px){
  .hero{padding:104px 0 72px}
  .hero-in{grid-template-columns:1fr;gap:24px}
  .hero-art{order:-1}
  .hero-art img{width:min(56%,210px)}
  .hero-art figcaption{display:none}
  .hero-ghost{font-size:64vw;bottom:-9vw}
  .hero-sub{max-width:none}
  .hero-scroll{display:none}
}

/* ── 흐르는 띠 ── */
.mq{background:var(--dk);color:var(--on-dk2);overflow:hidden;padding:14px 0}
.mq-track{display:flex;gap:26px;white-space:nowrap;width:max-content;
  font:700 clamp(14px,1.5vw,17px)/1 var(--kr);letter-spacing:-.02em;animation:mq 36s linear infinite}
.mq-track i{font-style:normal;color:var(--ac-lt);font-size:.55em;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 섹션 공통 ── */
.sec{padding:clamp(80px,9vw,120px) 0}
.sec-bg{background:var(--bg)}
.sec-surf{background:var(--surf)}
.sec-dark{background:var(--dk2);color:var(--on-dk)}
.eyebrow{margin:0 0 14px;font:700 13px/1 var(--kr);letter-spacing:.01em;color:var(--ac-tx)}
.sec-dark .eyebrow{color:var(--ac-lt)}
.h2{font-size:clamp(30px,4.4vw,54px)}
.sec-dark .h2{color:#FFFFFF}
.lead{font-size:clamp(15px,1.2vw,17px);line-height:1.85;max-width:56ch;margin:22px 0 0;color:var(--tx2)}
.sec-dark .lead{color:var(--on-dk2)}
.lead b{color:var(--tx);font-weight:600}
.sec-dark .lead b{color:var(--on-dk)}

/* ── 위험 ── */
.risk-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;
  margin-top:clamp(44px,5vw,68px)}
.shot{margin:0;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/5;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.05)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;
  font:500 13px/1.6 var(--kr);color:rgba(233,242,240,.82);
  background:linear-gradient(180deg,rgba(4,33,31,0),rgba(4,33,31,.94))}
.tryit{list-style:none;counter-reset:t;margin:0;padding:0}
.tryit li{counter-increment:t;position:relative;padding:20px 0 20px 50px;
  border-top:1px solid rgba(233,242,240,.12);font-size:15px;line-height:1.7;color:var(--on-dk2)}
.tryit li:last-child{border-bottom:1px solid rgba(233,242,240,.12)}
.tryit li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:24px;
  font:600 12px/1 var(--kr);color:var(--ac-lt)}
.tryit b{display:block;color:var(--on-dk);font:800 clamp(16px,1.4vw,20px)/1.45 var(--kr);letter-spacing:-.03em;margin-bottom:5px}
.figs{display:grid;grid-template-columns:repeat(2,auto) 1fr;gap:clamp(24px,4vw,64px);align-items:end;
  margin-top:clamp(52px,6vw,84px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid rgba(233,242,240,.12)}
.fig b{display:block;font:900 clamp(40px,6vw,84px)/1 var(--disp);letter-spacing:-.05em;color:#FFFFFF;
  font-variant-numeric:tabular-nums}
.fig b small{font-size:.32em;letter-spacing:-.02em;margin-left:.1em;color:var(--ac-lt)}
.fig span{display:block;margin-top:12px;max-width:24ch;font-size:14px;line-height:1.65;color:var(--on-dk2)}
.figs-end{margin:0;max-width:30ch;font-size:15px;line-height:1.8;color:var(--on-dk2)}
.figs-end b{display:block;margin-top:8px;color:#FFFFFF;font:800 clamp(16px,1.4vw,19px)/1.5 var(--kr);letter-spacing:-.03em}
.src{grid-column:1/-1;margin:20px 0 0;font:500 12px/1.5 var(--kr);color:rgba(143,168,165,.6)}

/* ── 위험: 그 다음에 따라오는 것들 ── */
.also{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(233,242,240,.14)}
.also li{background:var(--dk2);padding:22px 20px}
.also b{display:block;font:800 15px/1.4 var(--kr);letter-spacing:-.03em;color:var(--on-dk);margin-bottom:6px}
.also span{font-size:13px;line-height:1.65;color:var(--on-dk2)}
@media (max-width:860px){.also{grid-template-columns:1fr}}

/* ── 시비: 전화가 어떻게 번지는가 ── */
.talk{list-style:none;margin:clamp(36px,4.5vw,56px) 0 0;padding:0;display:grid;gap:14px;max-width:760px}
.talk li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;justify-items:start}
.talk li.you{justify-items:end;text-align:right}
.t-who{font:700 12px/1 var(--kr);color:var(--tx3)}
.t-say{margin:0;background:var(--surf);border-radius:18px 18px 18px 5px;padding:16px 20px;
  font:800 clamp(17px,1.7vw,22px)/1.45 var(--kr);letter-spacing:-.035em;color:var(--tx);max-width:34ch}
.talk li.you .t-say{background:var(--dk);color:var(--on-dk);border-radius:18px 18px 5px 18px}
.talk em{font-style:normal;font-size:13px;line-height:1.6;color:var(--tx2);max-width:42ch}
/* 대사 + 대치 장면을 나란히 */
.fight-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(36px,4.5vw,56px)}
.fight-grid .talk{margin-top:0}
/* 차 두 대는 직접 그린 원본 도형이다. 엠블럼·번호판을 넣지 않아 특정 차종으로 안 보인다. */
.standoff{margin:0}
.standoff img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--edge);box-shadow:0 18px 44px -24px rgba(4,48,42,.34)}
/* 오른쪽 차는 밝다. 흰 바탕에 묻히지 않게 테두리를 준다 */
.closein{margin:44px 0 0}
.closein img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--edge);box-shadow:0 18px 44px -24px rgba(4,48,42,.34)}
.closein figcaption,.standoff figcaption{margin-top:16px;font:500 13px/1.6 var(--kr);color:var(--tx3);text-align:center}
@media (max-width:860px){.fight-grid{grid-template-columns:1fr;gap:32px}.standoff{order:-1}}

.friction{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(40px,5vw,64px)}
.fr{background:var(--surf);border-radius:16px;padding:26px 24px}
.fr h3{font-size:17px;margin-bottom:14px;color:var(--ac-tx)}
.fr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fr li{position:relative;padding-left:16px;font-size:14px;line-height:1.7;color:var(--tx2)}
.fr li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--ac)}
.fr-end{margin:clamp(28px,3.5vw,40px) 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.85;color:var(--tx2);max-width:60ch}
.fr-end b{color:var(--tx);font-weight:700}
@media (max-width:860px){
  .friction{grid-template-columns:1fr}
  .talk li.you{justify-items:start;text-align:left}
  .talk li.you .t-say{border-radius:18px 18px 18px 5px}
}

/* ── 딜레마 ── */
.s-trap{text-align:center}
.s-trap .h2{font-size:clamp(34px,6vw,74px);margin-bottom:8px}
.trap{max-width:54ch;margin:34px auto 0;text-align:left;display:grid;gap:18px}
.trap p{margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.9;color:var(--tx2)}
.trap-end{padding-top:20px;border-top:1px solid var(--tx);color:var(--tx)!important;font-weight:700}

/* ── 차똑: 스티커 + 3단계 ── */
.fix-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.fix-art{display:grid;justify-items:center;gap:18px;margin:0}
.sticker{width:min(72%,290px);aspect-ratio:1;background:#fff;border:1px solid var(--edge);
  border-radius:22px;display:grid;grid-template-rows:auto 1fr auto;place-items:center;text-align:center;
  padding:clamp(18px,2.4vw,28px);gap:10px;transform:rotate(-2.5deg);
  box-shadow:0 20px 40px -24px rgba(16,17,19,.3);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sticker:hover{transform:rotate(0)}
.st-top{font:900 19px/1 var(--disp);letter-spacing:-.05em;display:inline-flex;align-items:flex-start;gap:3px}
.st-top i{width:4px;height:4px;border-radius:50%;background:var(--ac-tx);display:block;margin-top:2px}
.st-qr{width:64%;aspect-ratio:1;display:grid;place-items:center}
.st-qr svg{width:100%;height:100%;display:block}
.st-b{font:500 12px/1.5 var(--kr);color:var(--tx2)}
.fix-art figcaption{font:600 13px/1 var(--kr);color:var(--tx3)}
.steps{display:grid;gap:10px;margin:34px 0 0;padding:0;list-style:none}
.step{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;
  transition:border-color .18s}
.step:hover{border-color:var(--tx3)}
.step b{grid-row:1/3;align-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--tx);color:#fff;font:800 15px/1 var(--disp)}
.step h3{font-size:18px}
.step p{margin:0;font-size:14px;line-height:1.65;color:var(--tx2)}
@media (max-width:860px){.fix-grid,.risk-grid{grid-template-columns:1fr}.fix-art{order:-1}.sticker{width:min(62%,230px)}}

/* ── 작동: 폰 두 대 ── */
.work-head{max-width:46ch}
.stage{display:grid;grid-template-columns:1fr 54px 1fr;align-items:stretch;max-width:860px;
  margin:clamp(40px,5vw,60px) auto 0}
.phone{background:var(--tx);border-radius:28px;padding:8px;display:flex;
  box-shadow:0 24px 48px -28px rgba(16,17,19,.5)}
.phone-in{background:#fff;border-radius:21px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.phone-cap{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;
  border-bottom:1px solid var(--edge);font:700 12px/1 var(--kr);color:var(--tx3)}
.phone-cap i{width:32px;height:3px;border-radius:2px;background:var(--edge);display:block}
.pane-body{display:grid;gap:8px;align-content:start;min-height:300px}
.seam{position:relative}
.seam i{position:absolute;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--ac);top:8%;opacity:0}
.seam i.go{animation:down 1100ms cubic-bezier(.2,.8,.2,1) forwards}
.seam i.up{animation:up 1100ms cubic-bezier(.2,.8,.2,1) forwards}
@keyframes down{0%{opacity:0;top:8%}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:90%}}
@keyframes up{0%{opacity:0;top:90%}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:8%}}
.work-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:860px;margin:22px auto 0}
#demo-hint{font:600 14px/1 var(--kr);color:var(--ac-tx)}
#demo-replay{background:transparent;border:1px solid var(--edge);color:var(--tx2);border-radius:10px;
  font:600 13px/1 var(--kr);padding:11px 17px;cursor:pointer;transition:border-color .18s,color .18s}
#demo-replay:hover{border-color:var(--tx);color:var(--tx)}
@media (max-width:860px){.stage{grid-template-columns:1fr;gap:10px}.seam{display:none}.pane-body{min-height:0}}

/* 폰 안쪽 미니 UI (app.js 의 Landing.demo 가 그린다) */
.u-greet{display:flex;gap:8px;align-items:flex-start}
.u-av{width:28px;height:28px;flex:none}
.u-av img{width:100%;height:100%;object-fit:contain}
.u-say{font-size:12px;line-height:1.6;color:var(--tx);background:var(--surf);padding:8px 11px;border-radius:12px 12px 12px 3px}
.u-lab{font:700 12px/1 var(--kr);color:var(--tx3);margin-top:6px}
.u-opt{border:1px solid var(--edge);border-radius:11px;background:#fff;color:var(--tx);
  font:600 13px/1.3 var(--kr);letter-spacing:-.02em;text-align:left;padding:12px 14px;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:8px;transition:background .2s,border-color .2s,color .2s}
.u-opt::after{content:"";margin-left:auto;width:6px;height:6px;border:1.5px solid var(--tx3);
  border-left:0;border-bottom:0;transform:rotate(45deg)}
.u-opt.on{background:var(--tx);border-color:var(--tx);color:#fff}
.u-opt.alert{color:var(--ac)}
.u-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.u-grid .u-opt{justify-content:center;text-align:center;font-size:12px;padding:11px 6px}
.u-grid .u-opt::after{display:none}
.u-grid .u-opt.pick{background:var(--ac);border-color:var(--ac);color:var(--brand-ink)}
.u-line{display:flex;gap:8px;align-items:center;font-size:12px;padding:10px 12px;border-radius:9px;
  background:var(--surf);color:var(--tx3)}
.u-line.on{background:var(--surf);color:var(--ac-tx);font-weight:600}
.u-line i{width:6px;height:6px;border-radius:50%;background:var(--edge);flex:none}
.u-line.on i{background:var(--ac)}
.u-answer{margin-top:8px;background:var(--tx);border-radius:12px;padding:17px 14px;text-align:center;
  font:800 16px/1.3 var(--kr);letter-spacing:-.03em;color:#fff}
.u-msg{background:var(--dk);color:var(--on-dk);border-radius:12px;padding:14px;display:grid;gap:6px}
.u-msg .u-from{font:700 11px/1 var(--kr);color:var(--ac-lt)}
.u-msg .u-body{font-size:12px;line-height:1.65;color:var(--on-dk2)}
.u-msg .u-body b{font-weight:700;font-size:14px;color:var(--on-dk)}
.u-req{background:var(--surf);border-radius:12px;padding:14px;display:grid;gap:8px}
.u-req .u-h{font:800 15px/1.3 var(--kr);letter-spacing:-.03em}
.u-req .u-h.alert{color:var(--ac)}
.u-req .u-meta{display:flex;gap:5px;flex-wrap:wrap}
.u-req .u-meta span{font:600 11px/1 var(--kr);color:var(--tx2);background:#fff;padding:4px 7px;border-radius:5px}
.u-req .u-q{font-size:12px;line-height:1.65;color:var(--tx)}
.u-idle{display:grid;place-items:center;gap:10px;padding:56px 0;color:var(--tx3);
  font:600 12px/1 var(--kr);text-align:center}
.u-idle .u-av{width:44px;height:44px;opacity:.45}
.u-ring{display:flex;gap:6px;padding:8px 0;justify-content:center}
.u-ring i{width:6px;height:6px;border-radius:50%;background:var(--ac);animation:blink 1.4s ease infinite}
.u-ring i:nth-child(2){animation-delay:.2s}.u-ring i:nth-child(3){animation-delay:.4s}
.u-note{font:500 12px/1.6 var(--kr);color:var(--tx3);text-align:center}
.fade-in{animation:fadein .5s cubic-bezier(.2,.8,.2,1)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 요금 ── */
.price-top{display:grid;grid-template-columns:1fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.won{display:flex;align-items:baseline;gap:8px;font:900 clamp(60px,10vw,128px)/1 var(--disp);letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:var(--tx)}
.won small{font-size:.28em;letter-spacing:-.03em;color:var(--tx3)}
.won-cap{margin:8px 0 0;font:600 15px/1.6 var(--kr);color:var(--tx2)}
.rows{display:grid;gap:10px}
.row2{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:20px 22px;
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline}
.row2 span{font:700 14px/1 var(--kr);color:var(--tx2)}
.row2 b{font:900 clamp(21px,2.3vw,28px)/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.row2 em{grid-column:1/-1;font-style:normal;font-size:13px;line-height:1.6;color:var(--tx2);margin-top:3px}
.row2.hot{border-color:var(--ac-tx);background:var(--surf)}
.row2.hot b{color:var(--ac-tx)}
.row2.hot em{color:var(--ac-tx)}
.rows .btn{width:100%;margin-top:4px}
@media (max-width:860px){.price-top{grid-template-columns:1fr}}

/* ── 비교표 ── */
.vs{margin-top:clamp(60px,7vw,100px)}
.vs-t{width:100%;border-collapse:collapse;margin-top:18px}
.vs-t td{padding:18px 18px 18px 0;vertical-align:top;border-bottom:1px solid var(--edge);font-size:14px;line-height:1.7}
.vs-t td.k{font-weight:700;width:20%;letter-spacing:-.02em}
.vs-t td.a{color:var(--tx3);width:40%}
.vs-t td.b{width:40%;font-weight:600;padding-right:0}
.vs-t td.b::before{content:"차똑";font:700 11px/1 var(--kr);color:var(--brand-ink);background:var(--ac);
  padding:4px 7px;border-radius:5px;margin-right:9px;vertical-align:1px}
@media (max-width:860px){
  .vs-t,.vs-t tbody,.vs-t tr,.vs-t td{display:block;width:auto}
  .vs-t tr{padding:14px 0;border-bottom:1px solid var(--edge)}
  .vs-t td{border:0;padding:3px 0;width:auto}
  .vs-t td.a::before{content:"일반";font:700 11px/1 var(--kr);color:var(--tx3);background:var(--surf);
    padding:4px 7px;border-radius:5px;margin-right:9px;vertical-align:1px}
}

/* ── FAQ ── */
.faq{display:grid;border-top:1px solid var(--tx);max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--edge);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  font:700 clamp(16px,1.4vw,18px)/1.5 var(--kr);letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--disp);color:var(--tx3)}
.faq details[open] summary::after{content:"−";color:var(--ac-tx)}
.faq p{margin:12px 0 0;font-size:14px;line-height:1.85;color:var(--tx2);max-width:64ch}

/* ── 마지막 신청 블록 ── */
.last{position:relative;background:var(--brand);color:var(--brand-ink);padding:clamp(84px,9vw,124px) 0;
  text-align:center;overflow:hidden}
.last::after{content:"차똑";position:absolute;right:-5vw;bottom:-9vw;font-family:var(--disp);font-weight:900;
  font-size:30vw;line-height:1;color:#FFFFFF;opacity:.15;letter-spacing:-.06em;pointer-events:none}
.last-art{position:relative;width:126px;margin:0 auto 24px}
.last-art img{width:100%;filter:drop-shadow(0 18px 26px rgba(4,48,42,.35))}
.last h2{position:relative;font-size:clamp(30px,5vw,58px);color:var(--brand-ink);margin-bottom:16px}
.last p{position:relative;color:rgba(4,48,42,.78);max-width:44ch;margin:0 auto 32px;font-size:16px;line-height:1.8}
.last .btn{position:relative}
.last-note{position:relative;margin:20px 0 0;font:500 13px/1.6 var(--kr);color:rgba(4,48,42,.62)}

/* ── 푸터 ── */
.lp .biz{background:var(--dk2);color:rgba(234,251,246,.5);padding:44px var(--gut) 52px;margin:0;
  font:400 12px/1.9 var(--kr)}
.lp .biz > *{max-width:var(--max);margin-inline:auto}
.lp .biz .policy{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-weight:600}
.lp .biz .policy a{color:var(--ac-lt)}

/* ══ v15 — 판매 시나리오 개편으로 생긴 블록 ═══════════════════════════
   지금 30초(.try) · 반론 즉답(.objection) · 누구에게(.who) · 약속(.promise)
   '그럼 지우면'(.trap) 섹션은 .objection 으로 흡수됐다. 옛 규칙은 위에 남아 있지만 쓰는 곳이 없다. */

/* 지금 30초: 한 화면에 순서 셋. 카드가 아니라 큰 번호 하나씩 */
.try{max-width:760px}
.try-steps{list-style:none;counter-reset:s;margin:36px 0 0;padding:0;display:grid;gap:0}
.try-steps li{counter-increment:s;position:relative;padding:22px 0 22px 64px;border-top:1px solid var(--edge)}
.try-steps li:last-child{border-bottom:1px solid var(--edge)}
.try-steps li::before{content:counter(s);position:absolute;left:0;top:18px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--tx);color:#fff;font:800 17px/1 var(--disp)}
.try-steps b{display:block;font:800 clamp(17px,1.5vw,21px)/1.4 var(--kr);letter-spacing:-.03em;color:var(--tx);margin-bottom:4px}
.try-steps span{font-size:14px;line-height:1.6;color:var(--tx2)}
.try-steps em{font-style:normal;font-weight:700;color:var(--tx);background:#fff;border:1px solid var(--edge);border-radius:6px;padding:2px 7px}
.try-end{margin:30px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.8;color:var(--tx2)}
.try-end b{color:var(--tx);font-weight:800}

/* 반론 즉답: 해답 섹션 첫머리. 질문은 크게, 답은 본문 굵기로 */
.objection{max-width:62ch;margin:0 0 clamp(56px,7vw,96px);padding:0 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--edge)}
.obj-q{margin:0;font:800 clamp(22px,2.8vw,36px)/1.35 var(--kr);letter-spacing:-.035em;color:var(--tx)}
.obj-a{margin:18px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.85;color:var(--tx2)}
.obj-a b{color:var(--ac-tx);font-weight:800}

/* 누구에게: 셋이 나란히. 카드 안에 큰 글자 하나, 설명, 그리고 그 사람에게 주는 한 줄 */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.who{background:var(--surf);border:1px solid var(--edge);border-radius:18px;padding:28px 26px 24px;display:grid;gap:12px;align-content:start}
.who b{font:800 clamp(19px,1.7vw,24px)/1.35 var(--kr);letter-spacing:-.035em;color:var(--tx)}
.who p{margin:0;font-size:14.5px;line-height:1.75;color:var(--tx2)}
.who span{margin-top:6px;padding-top:14px;border-top:1px solid var(--edge);font:700 13px/1.5 var(--kr);color:var(--ac-tx)}
@media (max-width:860px){.who-grid{grid-template-columns:1fr}}

/* 약속: 숫자 넷을 한 줄에. 섹션 여백은 반으로 */
.promise-sec{padding:clamp(36px,4vw,56px) 0}
.promise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--edge);border-radius:18px;overflow:hidden}
.promise li{padding:24px 22px;border-left:1px solid var(--edge);display:grid;gap:6px}
.promise li:first-child{border-left:0}
.promise b{font:900 clamp(24px,2.4vw,32px)/1 var(--disp);letter-spacing:-.04em;color:var(--tx);font-variant-numeric:tabular-nums}
.promise span{font-size:13.5px;line-height:1.55;color:var(--tx2)}
@media (max-width:860px){
  .promise{grid-template-columns:1fr 1fr}
  .promise li{border-left:0;border-top:1px solid var(--edge)}
  .promise li:nth-child(-n+2){border-top:0}
  .promise li:nth-child(2n){border-left:1px solid var(--edge)}
}

/* ══ v16 — '번호 하나로' 여섯 장면 (.expose) ═══════════════════════════
   '지금 30초'(.try) 와 '위험'(.risk-grid/.tryit/.also/.figs) 두 섹션을 이 하나로 합쳤다.
   옛 규칙은 위에 남아 있지만 쓰는 곳이 없다. */
.expose{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;counter-reset:none}
.ex{position:relative;display:flex;flex-direction:column;
  background:rgba(255,255,255,.035);border:1px solid rgba(233,242,240,.1);border-radius:18px;overflow:hidden}
.ex .shot{aspect-ratio:16/10;border-radius:0;margin:0;flex:none}
.ex .shot img{filter:grayscale(.3) contrast(1.05)}
.ex .shot figcaption{padding:40px 20px 14px;font-size:12px}
/* 사진 아래 글. 번호는 작게 민트, 제목은 굵게 */
.ex > b{margin:22px 22px 0;font:800 12px/1 var(--disp);letter-spacing:.06em;color:var(--ac-lt)}
.ex h3{margin:8px 22px 0;font:800 clamp(18px,1.5vw,21px)/1.35 var(--kr);letter-spacing:-.03em;color:var(--on-dk)}
.ex p{margin:10px 22px 22px;font-size:14px;line-height:1.7;color:var(--on-dk2)}
.ex p em{font-style:normal;color:var(--on-dk);font-weight:700}
.ex-src{margin:-10px 22px 22px;font:500 12px/1.5 var(--kr);color:rgba(143,168,165,.7);text-decoration:none}
a.ex-src{text-decoration:underline;text-underline-offset:3px}
a.ex-src:hover{color:var(--ac-lt)}
/* 06: 사진 대신 숫자 둘 */
/* 06 은 사진 자리가 없어 카드가 허전했다. 배경 사진을 깔고 그 위에 숫자를 얹는다.
   글이 먼저 읽혀야 하므로 어둡게 덮는다. */
.ex-figs{justify-content:flex-start;position:relative;isolation:isolate}
.ex-figs::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,46,40,.80),rgba(3,46,40,.94)),url("/img/expose-bg.jpg") center/cover no-repeat}
.ex-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 22px 0}
.ex-nums strong{display:block;font:900 clamp(34px,3.6vw,52px)/1 var(--disp);letter-spacing:-.05em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.ex-nums strong small{font-size:.34em;letter-spacing:-.02em;margin-left:.1em;color:var(--ac-lt)}
.ex-nums > div > span{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--on-dk2)}
/* 사진이 아직 없는 자리(로컬 SHOW_SLOTS=1 에서만). 프롬프트가 그 자리에 보인다 */
.shot.empty{background:rgba(255,255,255,.03);border:1px dashed rgba(233,242,240,.3);aspect-ratio:auto;min-height:200px}
.shot-p{padding:14px 16px 48px;display:grid;gap:8px;align-content:start}
.shot-p b{font:800 12px/1 var(--lat);color:var(--ac-lt)}
.shot-p span{font:400 11px/1.5 var(--lat);color:rgba(233,242,240,.72);word-break:break-word}
@media (max-width:860px){.expose{grid-template-columns:1fr}}

/* 히어로 똑이 말풍선 (회장님 지시). style.css 의 .ddoki-say 는 서비스 화면용(왼쪽 위 절대배치·한 줄)이라
   랜딩에서는 흐름 배치로 바꿔 똑이 머리 위에 세운다. 모양은 동글동글하게, 살짝 기울여서, 통통 튀어나오게. */
.hero-art .ddoki-wrap{display:grid;place-items:center;height:auto;width:100%}
.hero-art .ddoki-say{position:relative;order:-1;margin:0 0 22px 8px;max-width:min(92%,330px);
  background:#fff;color:var(--brand-ink);font:800 clamp(14px,1.15vw,16.5px)/1.5 var(--kr);letter-spacing:-.025em;
  padding:16px 22px;border-radius:26px;text-align:left;white-space:pre-line;word-break:keep-all;
  box-shadow:0 18px 34px -16px rgba(4,48,42,.5),0 2px 0 rgba(4,48,42,.06);
  transform:rotate(-2.5deg);transform-origin:20% 100%;animation:sayPop .7s cubic-bezier(.34,1.56,.64,1) .35s both}
/* 꼬리: 모서리 둥근 네모를 돌려 통통한 삼각형으로 */
.hero-art .ddoki-say::after{content:"";position:absolute;left:26px;bottom:-11px;width:24px;height:24px;
  background:#fff;border-radius:6px;transform:rotate(45deg);box-shadow:4px 4px 8px -6px rgba(4,48,42,.35)}
@keyframes sayPop{0%{opacity:0;transform:rotate(-2.5deg) scale(.6) translateY(10px)}100%{opacity:1;transform:rotate(-2.5deg) scale(1) translateY(0)}}
@media (max-width:860px){.hero-art .ddoki-say{margin:0 0 16px;font-size:14.5px;padding:14px 18px;border-radius:22px}}
@media (prefers-reduced-motion:reduce){.hero-art .ddoki-say{animation:none}}

/* 06 막대그래프. 값은 landing_new.js 의 STALK. 등장할 때 아래에서 자라난다 */
.ex-chart{margin:16px 18px 10px}
.ex-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ex-chart .axis{stroke:rgba(233,242,240,.18);stroke-width:1}
.ex-chart .bar{fill:rgba(233,242,240,.28);transform-box:fill-box;transform-origin:bottom center}
.ex-chart .bar.hot{fill:var(--ac-lt)}
.ex-chart .val{font:700 12px var(--disp);fill:var(--on-dk2);letter-spacing:-.02em}
.ex-chart .val.hot{fill:#fff;font-size:13px}
.ex-chart .yr{font:600 11px var(--disp);fill:var(--on-dk2)}
.js-anim .reveal .ex-chart .bar{transform:scaleY(0)}
.js-anim .reveal.in .ex-chart .bar{animation:barUp .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i,0) * .08s)}
@keyframes barUp{to{transform:scaleY(1)}}

/* (사진 위에 얹던 .ex-ddoki 는 회장님 지시로 걷어냈다. 섹션 끝 똑이만 남긴다) */
/* 섹션 끝 — 무서운 얘기에서 해답으로 넘어가는 다리 */
.ex-end{display:flex;align-items:center;gap:clamp(14px,2vw,24px);margin:clamp(34px,4vw,52px) auto 0;
  max-width:640px;padding:22px 26px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(233,242,240,.12)}
.ex-end img{width:clamp(64px,6vw,84px);height:auto;flex:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.ex-end p{margin:0;font-size:clamp(14px,1.15vw,16px);line-height:1.75;color:var(--on-dk2);word-break:keep-all}
.ex-end b{display:block;color:var(--on-dk);font-weight:800;font-size:1.08em;margin-bottom:4px;letter-spacing:-.02em}
@media (max-width:860px){.ex-end{flex-direction:column;text-align:center;gap:12px}}

/* ══ v17 — 시비 섹션을 페인포인트로 (.pains) ═══════════════════════════
   옛 .fight-grid / .friction / .fr / .standoff / .closein 은 쓰는 곳이 없어졌다.
   불편만 늘어놓던 걸 '불편 → 차똑은 이렇게' 짝으로 바꿨고,
   두 사진을 각 칸의 얼굴로 올렸다(밖에서 따지는 쪽 / 차 안에서 당하는 쪽). */
.talk{max-width:760px;margin-inline:auto}
.pains-head{margin:clamp(56px,7vw,88px) 0 0;text-align:center}
.pains-head h3{margin:0;font:800 clamp(22px,2.6vw,34px)/1.35 var(--kr);letter-spacing:-.035em;color:var(--tx)}
.pains{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,3.5vw,44px)}
.pain{background:var(--surf);border:1px solid var(--edge);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.pain figure{margin:0;flex:none}
.pain figure img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.pain h4{margin:22px 24px 0;font:800 clamp(18px,1.7vw,23px)/1.35 var(--kr);letter-spacing:-.035em;color:var(--tx)}
.pain ul{list-style:none;margin:16px 24px 26px;padding:0;display:grid;gap:16px}
.pain li{padding-left:0}
.pain li b{display:block;font:700 15px/1.55 var(--kr);letter-spacing:-.02em;color:var(--tx);word-break:keep-all}
/* 차똑의 답. 민트 화살표를 달아 '불편' 과 '해결' 이 눈으로 갈리게 한다 */
.pain li span{display:block;margin-top:5px;padding-left:18px;position:relative;
  font-size:13.5px;line-height:1.7;color:var(--ac-tx);word-break:keep-all}
.pain li span::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:2px;border-radius:1px;background:var(--ac)}
@media (max-width:860px){
  .pains{grid-template-columns:1fr}
  .pains-head h3 br{display:none}
}

/* 통화라는 신호 (회장님 지적: 말풍선만 있으니 문자로 보인다).
   위에 통화 표시줄을 얹고, 말풍선마다 음성 파형을 넣는다.
   --i-phone 은 style.css 가 정의한 수화기 아이콘이다(랜딩도 style.css 를 같이 읽는다). */
.call{max-width:760px;margin:clamp(34px,4vw,48px) auto 0;border:1px solid var(--edge);
  border-radius:20px;overflow:hidden;background:#fff}
.call-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;
  background:var(--dk);color:var(--on-dk);font:700 13px/1 var(--kr);letter-spacing:-.02em}
/* 좌우에 통화 중인 사람 (회장님 지적: 누가 누구인지 표시가 있어야 한다) */
.call-bar .cp{display:inline-flex;align-items:center;gap:8px;min-width:0}
.call-bar .cp-r{flex-direction:row}
.call-bar .av{width:26px;height:26px;flex:none;border-radius:50%;background:rgba(233,242,240,.18);
  display:inline-block;position:relative}
.call-bar .av::after{content:"";position:absolute;inset:0;background:var(--on-dk);
  -webkit-mask:center/15px 15px no-repeat var(--i-person);mask:center/15px 15px no-repeat var(--i-person)}
.call-bar .av-you{background:var(--ac)}
.call-bar .av-you::after{background:var(--brand-ink)}
.call-bar .cx{display:inline-flex;align-items:center;gap:7px;flex:none}
.call-bar .call-ic{width:16px;height:16px;flex:none;background:var(--ac-lt);
  -webkit-mask:var(--i-phone) center/contain no-repeat;mask:var(--i-phone) center/contain no-repeat;
  animation:ring 2.4s ease-in-out infinite;transform-origin:50% 60%}
.call-bar b{margin-left:auto;font:600 13px/1 var(--disp);color:var(--on-dk2);font-variant-numeric:tabular-nums}
@keyframes ring{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}72%{transform:rotate(14deg)}
  78%{transform:rotate(-9deg)}84%{transform:rotate(6deg)}90%{transform:rotate(0)}}
.call .talk{margin:24px 22px 26px;max-width:none}
/* 음성 파형 — 말풍선이 '보낸 글' 이 아니라 '나온 말' 로 읽히게 한다 */
.t-say .wave{display:inline-flex;align-items:center;gap:2.5px;height:15px;margin-right:10px;vertical-align:-2px}
.t-say .wave s{display:block;width:2.5px;border-radius:2px;background:currentColor;opacity:.4;
  animation:wv 1.15s ease-in-out infinite}
.t-say .wave s:nth-child(1){height:6px}
.t-say .wave s:nth-child(2){height:13px;animation-delay:.13s}
.t-say .wave s:nth-child(3){height:8px;animation-delay:.26s}
.t-say .wave s:nth-child(4){height:15px;animation-delay:.39s}
.t-say .wave s:nth-child(5){height:7px;animation-delay:.52s}
@keyframes wv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.call-bar .call-ic,.t-say .wave s{animation:none}}

@media (max-width:560px){
  .call-bar{font-size:12px;padding:10px 12px;gap:6px}
  .call-bar .av{width:22px;height:22px}
  .call-bar .av::after{-webkit-mask-size:13px 13px;mask-size:13px 13px}
}

/* ══ 3자 도식 — 낯선이 · 똑이 · 차주 (회장님 지시) ═══════════════════
   똑이가 가운데서 옮긴다는 게 이 서비스의 전부인데 글로만 있었다.
   가는 길(위, 1·2)과 오는 길(아래, 4·3)을 화살표로 그린다.
   옛 .steps 는 이 도식이 대신하므로 쓰는 곳이 없어졌다. */
.flow{margin:clamp(20px,2.4vw,34px) 0 0;display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) minmax(150px,1.2fr) minmax(0,1.5fr) minmax(120px,1fr);
  align-items:center;gap:clamp(8px,1.4vw,18px)}
/* 세 당사자 */
.fl-p{text-align:center;display:grid;justify-items:center;gap:6px;
  background:var(--surf);border:1px solid var(--edge);border-radius:18px;padding:22px 14px}
.fl-p b{font:800 clamp(15px,1.4vw,19px)/1.3 var(--kr);letter-spacing:-.03em;color:var(--tx)}
.fl-p span{font:500 12.5px/1.55 var(--kr);color:var(--tx2);word-break:keep-all}
.fl-av{width:46px;height:46px;border-radius:50%;background:var(--edge);position:relative;display:block}
.fl-av::after{content:"";position:absolute;inset:0;background:var(--tx2);
  -webkit-mask:center/26px 26px no-repeat var(--i-person);mask:center/26px 26px no-repeat var(--i-person)}
.fl-av-o{background:var(--ac-lt)}
.fl-av-o::after{background:var(--brand-ink)}
/* 가운데 똑이 — 이 도식의 주인공이라 더 크고 진하게 */
.fl-mid{background:var(--dk);border-color:var(--dk);padding:20px 16px}
.fl-mid img{width:clamp(56px,6vw,82px);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.fl-mid b{color:#fff}
.fl-mid span{color:var(--on-dk2)}
/* 화살표 두 줄 */
.fl-c{display:grid;gap:14px}
.fl-go,.fl-back{display:grid;gap:7px;justify-items:center}
.fl-c p{margin:0;font:600 12px/1.45 var(--kr);color:var(--tx2);text-align:center;word-break:keep-all}
.fl-c em{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;margin-right:6px;
  background:var(--tx);color:#fff;font:700 10px/1 var(--disp);font-style:normal;vertical-align:1px}
.fl-back p{color:var(--ac-tx)}
.fl-back em{background:var(--ac);color:var(--brand-ink)}
.fl-c i{display:block;width:100%;height:2px;border-radius:1px;background:var(--tx3);position:relative}
.fl-back i{background:var(--ac)}
.fl-go i::after,.fl-back i::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  border:5px solid transparent}
.fl-go i::after{right:-1px;border-left-color:var(--tx3);border-right:0}
.fl-back i::after{left:-1px;border-right-color:var(--ac);border-left:0}
@media (max-width:860px){
  /* 세로로 세운다. 화살표도 세로로 눕힌다 */
  .flow{grid-template-columns:1fr;gap:10px}
  .fl-c{gap:10px;padding:2px 0}
  .fl-go,.fl-back{grid-template-columns:auto 1fr;align-items:center;justify-items:start;gap:12px}
  .fl-go{grid-template-areas:"line text"}
  .fl-back{grid-template-areas:"line text"}
  .fl-go p,.fl-back p{grid-area:text;text-align:left}
  .fl-go i,.fl-back i{grid-area:line;width:2px;height:40px;margin-left:22px}
  .fl-go i::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%);
    border-top-color:var(--tx3);border-left-color:transparent;border-bottom:0}
  .fl-back i::after{left:50%;top:-1px;bottom:auto;transform:translateX(-50%);
    border-bottom-color:var(--ac);border-right-color:transparent;border-top:0}
}

/* 통화 카드 양옆에 통화 중인 두 사람 (회장님 지적: 전화하는 사람이 보여야 한다).
   뉴스 화상연결처럼 동그란 틀에 넣는다. 왼쪽 똑이는 좌우를 뒤집어 카드를 보게 한다. */
.call-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(10px,2.2vw,30px);margin:clamp(34px,4vw,48px) auto 0;max-width:1060px}
.call-stage .call{margin:0;max-width:none}
.cs{display:grid;justify-items:center;gap:9px;width:clamp(92px,10.5vw,144px)}
.cs-fig{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  background:var(--surf);border:1px solid var(--edge);display:grid;place-items:end center}
.cs-fig img{width:74%;height:auto;display:block;margin-bottom:4%}
.cs-l .cs-fig img{transform:scaleX(-1)}
.cs-r .cs-fig{background:var(--ac-lt);border-color:var(--ac)}
.cs b{font:700 12px/1.3 var(--kr);letter-spacing:-.02em;color:var(--tx2);text-align:center}
/* 통화 중이라는 신호 — 테두리가 천천히 번진다 */
.cs-fig::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(0,200,168,.5);animation:csRing 2.6s ease-out infinite}
.cs-r .cs-fig::after{animation-delay:1.3s}
@keyframes csRing{0%{box-shadow:0 0 0 0 rgba(0,200,168,.45)}70%,100%{box-shadow:0 0 0 12px rgba(0,200,168,0)}}
@media (max-width:1000px){
  .call-stage{grid-template-columns:1fr 1fr;grid-template-areas:"l r" "card card";gap:14px;justify-items:center}
  .cs-l{grid-area:l}
  .cs-r{grid-area:r}
  .call-stage .call{grid-area:card;width:100%}
}
@media (prefers-reduced-motion:reduce){.cs-fig::after{animation:none}}

/* 도식 밑 — 새 화면을 또 넣지 않고 이미 있는 데모(#work)로 보낸다 */
.flow-more{margin:clamp(18px,2vw,26px) 0 0;text-align:center}
.flow-more a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:700 13.5px/1 var(--kr);letter-spacing:-.02em;color:var(--ac-tx);
  background:var(--surf);border:1px solid var(--edge);border-radius:999px;padding:11px 18px;
  transition:border-color .18s,transform .18s}
.flow-more a::after{content:"";width:6px;height:6px;border:2px solid currentColor;border-left:0;border-top:0;
  transform:rotate(45deg) translate(-1px,-1px)}
.flow-more a:hover{border-color:var(--ac);transform:translateY(-1px)}