/* 신문 스크랩 헤드라인용 */
:root{--serif:"Noto Serif KR",var(--kr)}

/* 차똑 랜딩 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}
  .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}
/* 제목이 다시 짧아져(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-sub b{color:var(--brand-ink);font-weight:700}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.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{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)}
@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}
}

/* ── 흐르는 띠 ── */

/* ── 섹션 공통 ── */
.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)}

/* ── 위험 ── */
.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))}
.src{grid-column:1/-1;margin:20px 0 0;font:500 12px/1.5 var(--kr);color:rgba(143,168,165,.6)}

/* ── 시비: 전화가 어떻게 번지는가 ── */
.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 em{font-style:normal;font-size:13px;line-height:1.6;color:var(--tx2);max-width:42ch}
/* 오른쪽 차는 밝다. 흰 바탕에 묻히지 않게 테두리를 준다 */
.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)}

/* ── 차똑: 스티커 + 3단계 ── */
/* 위아래로 쌓는다 (회장님 지시). 좌우로 두면 스티커가 곁다리로 읽힌다 — 주인공은 스티커다 */
.fix-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);justify-items:center;text-align:center}
.fix-grid .lead{margin-left:auto;margin-right:auto}
.fix-art{display:grid;justify-items:center;gap:18px;margin:0}
.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{grid-template-columns:1fr}.fix-art{order:-1}.sticker{width:min(62%,230px)}}

/* ── 작동: 폰 두 대 ── */
.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 가 그린다) */

/* ── 요금 ── */
.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)}
.rows{display:grid;gap:10px}
.rows .btn{width:100%;margin-top:4px}

/* ── 비교표 ── */
.vs{margin-top:clamp(60px,7vw,100px)}

/* ── 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 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}

/* ── 푸터 ── */
.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}

/* 누구에게: 셋이 나란히. 카드 안에 큰 글자 하나, 설명, 그리고 그 사람에게 주는 한 줄 */
.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}}

/* ══ 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}
/* 사진이 아직 없는 자리(로컬 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 는 회장님 지시로 걷어냈다. 섹션 끝 똑이만 남긴다) */

/* ══ v17 — 시비 섹션을 페인포인트로 (.pains) ═══════════════════════════
   옛 .fight-grid / .friction / .fr / .standoff / .closein 은 쓰는 곳이 없어졌다.
   불편만 늘어놓던 걸 '불편 → 차똑은 이렇게' 짝으로 바꿨고,
   두 사진을 각 칸의 얼굴로 올렸다(밖에서 따지는 쪽 / 차 안에서 당하는 쪽). */
.talk{max-width:760px;margin-inline:auto}

/* 통화라는 신호 (회장님 지적: 말풍선만 있으니 문자로 보인다).
   위에 통화 표시줄을 얹고, 말풍선마다 음성 파형을 넣는다.
   --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}
/* 좌우에 통화 중인 사람 (회장님 지적: 누가 누구인지 표시가 있어야 한다) */
@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}
/* 음성 파형 — 말풍선이 '보낸 글' 이 아니라 '나온 말' 로 읽히게 한다 */

/* ══ 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-go{display:grid;gap:7px;justify-items:center}
.fl-go 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}
@media (max-width:860px){
  /* 세로로 세운다. 화살표도 세로로 눕힌다 */
  .flow{grid-template-columns:1fr;gap:10px}
  .fl-go{grid-template-columns:auto 1fr;align-items:center;justify-items:start;gap:12px}
  .fl-go{grid-template-areas:"line text"}
  .fl-go p{grid-area:text;text-align:left}
  .fl-go 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}
}

/* 통화 카드 양옆에 통화 중인 두 사람 (회장님 지적: 전화하는 사람이 보여야 한다).
   뉴스 화상연결처럼 동그란 틀에 넣는다. 왼쪽 똑이는 좌우를 뒤집어 카드를 보게 한다. */
.cs{display:grid;justify-items:center;gap:9px;width:clamp(92px,10.5vw,144px)}
.cs b{font:700 12px/1.3 var(--kr);letter-spacing:-.02em;color:var(--tx2);text-align:center}
/* 통화 중이라는 신호 — 테두리가 천천히 번진다 */

/* ══ 실제 보도 스크랩 ═══════════════════════════════════════════════
   지어낸 기사는 쓰지 않는다. 헤드라인·매체·날짜가 전부 실물이고 링크로 확인된다.
   어두운 카드로 두면 그냥 UI 박스로 읽힌다 — 신문은 흰 종이에 검은 글씨다.
   종이색 바탕 + 세리프 헤드라인 + 제호 아래 굵은 괘선 + 살짝 기운 각도로
   '오려 붙인 신문 조각' 이 되게 한다. */
.news{margin:52px auto 0;max-width:1020px}

/* ══ 안심번호와의 차이 ═════════════════════════════════════════════ */
#safe u{text-decoration:none;background:linear-gradient(transparent 62%,var(--gold-lt) 62%);padding:0 2px}

/* ══ "단돈 27원으로 나와 소중한 가족을" ═══════════════════════════
   값 설명에 묻혀 있던 줄. 이게 이 섹션에서 제일 하고 싶은 말이라 따로 세운다. */
.won-punch{margin:22px 0 18px;font:600 22px/1.55 var(--kr);color:var(--ink);
  word-break:keep-all;letter-spacing:-.03em}
.won-punch b{font-weight:800;color:var(--brand-deep);font-size:1.28em;letter-spacing:-.04em}
.won-punch u{text-decoration:none;background:linear-gradient(transparent 60%,var(--gold-lt) 60%);
  padding:0 3px}
@media(min-width:760px){.won-punch{font-size:27px;margin-top:26px}}

/* 다 내려온 순간 한 번 툭. 멈춘 게 아니라 '여기까지' 라고 못 박는 느낌 */
.won span.settled{animation:wonSettle .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes wonSettle{0%{transform:translateY(0)}38%{transform:translateY(5px) scale(.97)}100%{transform:translateY(0)}}
.won span{display:inline-block}
@media (prefers-reduced-motion:reduce){.won span.settled{animation:none}}

/* '이런 차에 먼저' 카드 위 사진. 글만 있으면 남 얘기로 읽힌다.
   .shot 은 노출 섹션용이라 4:5 세로 + 검은 바탕이다. 그대로 쓰면 사진 아래가
   검은 빈칸으로 남는다 — 비율을 img 가 아니라 .shot 에 걸어야 한다. */
.who{padding:0 0 24px;overflow:hidden}
.who > .shot{margin:0;border-radius:0;aspect-ratio:16/10;background:transparent}
.who > .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
  filter:grayscale(.12) contrast(1.02)}   /* 이 섹션은 따뜻해야 해서 탈색을 줄인다 */
.who > .shot figcaption{padding:40px 22px 14px;font:600 12.5px/1.5 var(--kr);color:rgba(255,255,255,.92)}
.who > b,.who > p,.who > span{margin-left:26px;margin-right:26px}
.who > b{margin-top:20px}



/* ══ 실물 스티커 (클로드 디자인 A안 2a) ═══════════════════════════════
   인쇄용 63x88mm 원본을 화면에 비례 축소한다. 1u = 스티커 폭 / 63 = 원본 1mm.
   pt 값은 mm 로 바꿔 적었다(1pt = 0.3528mm). 인쇄 페이지(print.css .stk)와 같은 설계다.
   화면에서만 살짝 기울여 '붙이는 물건' 으로 보이게 한다. */
.stk{--w:min(76vw,320px);--u:calc(var(--w) / 63);position:relative;width:var(--w);height:calc(var(--u) * 88);
  border-radius:calc(var(--u) * 3);background:#EFF8F5;overflow:hidden;color:#0E1A1B;
  font-family:"Gothic A1",var(--kr);transform:rotate(-2.5deg);
  box-shadow:0 26px 44px -22px rgba(16,17,19,.34);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stk:hover{transform:rotate(0)}
.stk-border{position:absolute;inset:0;border:calc(var(--u) * 1.5) solid #00C8A8;border-radius:calc(var(--u) * 3);pointer-events:none}
.stk-head{position:absolute;left:0;right:0;top:calc(var(--u) * 3.4);height:calc(var(--u) * 6);
  display:flex;justify-content:center;align-items:center;gap:calc(var(--u) * 1.6)}
.stk-face{display:block;width:calc(var(--u) * 5.8);height:calc(var(--u) * 5.8);flex:none}
.stk-face img.ddoki{width:100%;height:100%;object-fit:contain;filter:none}
.stk-wm{display:inline-flex;align-items:flex-start;font-weight:900;letter-spacing:-.05em;line-height:.9;
  font-size:calc(var(--u) * 6);margin-top:calc(var(--u) * 1.1)}
.stk-dots{display:flex;gap:calc(var(--u) * .374);padding-top:calc(var(--u) * .36);margin-left:calc(var(--u) * .494)}
.stk-dots i{display:block;width:calc(var(--u) * .75);height:calc(var(--u) * .75);border-radius:50%;background:#00C8A8}
.stk-pad{position:absolute;left:calc(var(--u) * 3.5);top:calc(var(--u) * 11.5);width:calc(var(--u) * 56);height:calc(var(--u) * 56);
  background:#fff;border-radius:calc(var(--u) * 2)}
.stk-qr{position:absolute;left:calc(var(--u) * 4);top:calc(var(--u) * 4);width:calc(var(--u) * 48);height:calc(var(--u) * 48)}
.stk-qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.stk-msg{position:absolute;left:calc(var(--u) * 3);right:calc(var(--u) * 3);top:calc(var(--u) * 69.6);text-align:center;
  font-size:calc(var(--u) * 3.528);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stk-alt{position:absolute;left:calc(var(--u) * 3);right:calc(var(--u) * 3);top:calc(var(--u) * 74.6);text-align:center;
  font-size:calc(var(--u) * 2.47);font-weight:700;color:#3E504C;line-height:1}
.stk-tel{position:absolute;left:calc(var(--u) * 3);right:calc(var(--u) * 3);top:calc(var(--u) * 77.4);display:flex;justify-content:center;line-height:1}
.stk-tel b{font-size:calc(var(--u) * 6.703);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#0E1A1B;white-space:nowrap}
.stk-code{position:absolute;right:calc(var(--u) * 3.4);bottom:calc(var(--u) * 3.4);font-size:calc(var(--u) * 2.117);font-weight:600;
  font-family:ui-monospace,Menlo,monospace;color:#5C7570;letter-spacing:.04em}
.stk.long-tel .stk-code{top:calc(var(--u) * 3.4);bottom:auto}   /* 인쇄와 같은 규칙 */
@media (prefers-reduced-motion:reduce){.stk{transform:none;transition:none}}

/* ══ 랜딩 모바일 터치 영역 (2026-10-02) ═══════════════════════════════════════
   갤럭시 360 · 아이폰 SE · Pro Max 점검에서 44px 미만으로 걸린 것들.
   보이는 모양은 그대로 두고 누르는 범위만 넓힌다. */
.nav-logo{min-height:44px}
.lp .nav-cta{min-height:44px;padding:12px 18px}
.nav-burger{width:44px;height:44px}
#demo-replay{min-height:44px}
/* 자주 묻는 질문 — 누르는 줄이 글자 높이(24px)뿐이었다 */
.faq summary{min-height:44px;padding:10px 0}
/* 신문 스크랩 '기사 보기' · 노출 카드 출처 — 따로 떨어진 링크라 손가락이 닿게.
   밑줄이 박스 바닥에 붙어 있어 높이를 늘리면 모양이 바뀐다. 보이지 않는 판을 덧댄다. */
a.ex-src{position:relative}
a.ex-src::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
/* ══ 끝: 랜딩 모바일 터치 영역 ══ */

/* ══ 가격 한 방 — 범죄로부터 지킨다 (2026-10-02) ════════════════════════════════
   회장님: "더 직관적으로 범죄로부터 지킬 수 있다는 거 넣어줘". 위 문장이 약속, 이 띠가 이유. */
/* '범죄' 는 형광펜 대신 붉은 굵은 글씨 — 형광펜 여백 때문에 '범죄 로부터' 처럼 떨어져 보였다 */
.won-punch u{background:none;padding:0;color:#C4321C;font-weight:800}
/* ══ 끝: 가격 한 방 ══ */
/* ══ 써보기 — 실제 서비스 화면 그대로 (2026-10-05, 디자이너) — 회장님: "실제 서비스랑 다른 화면, 실제 화면 참고해서 다시" ══
   폰 두 대를 세로 폰 비율로. 안쪽은 진짜 문의자 대화방(민트 배경·똑이 말풍선·아래 답 판)과 차주 화면(수신 전화 → 번호 답 버튼). */
.demo .stage{max-width:720px;grid-template-columns:minmax(0,320px) 54px minmax(0,320px);justify-content:center}
.demo .phone{border-radius:40px;padding:9px;background:#0E1513}
.demo .phone-in{position:relative;height:600px;padding:0;gap:0;border-radius:32px;overflow:hidden;background:#EEF7F4}
.demo .phone-cap{position:absolute;top:8px;left:50%;z-index:3;transform:translateX(-50%);padding:5px 12px;border:0;border-radius:999px;
  background:rgba(4,48,42,.78);color:#fff;font:700 11px/1 var(--kr);letter-spacing:-.01em}
.demo .phone-cap i{display:none}
.demo .phone.owner .phone-cap{background:rgba(227,169,59,.92);color:#3D2A05}
.demo .pane-body{display:flex;flex-direction:column;height:100%;min-height:0;gap:0}
.dm-top{display:flex;align-items:center;gap:9px;padding:36px 14px 10px;background:#fff;border-bottom:1px solid rgba(4,48,42,.06);flex:none}
.dm-top img,.dm-top .dm-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:#FDFAF2}
.dm-top b{display:block;font:800 14px/1.2 var(--kr);color:#0F1B19;letter-spacing:-.02em}
.dm-top em{display:block;margin-top:2px;font:500 10.5px/1.3 var(--kr);color:#6B807B;font-style:normal}
.dm-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 12px;overflow:hidden}
.dm-row{display:flex;gap:7px;align-items:flex-start;animation:dmIn .32s cubic-bezier(.2,.8,.2,1) both}
.dm-row.me{justify-content:flex-end}
.dm-av{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:#FDFAF2}
.dm-av.ow{display:inline-block;background:#12A68D url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8.6' r='4.1' fill='%23fff'/%3E%3Cpath d='M3.8 20.4c.4-4 3.9-6.6 8.2-6.6s7.8 2.6 8.2 6.6' fill='%23fff'/%3E%3C/svg%3E") center/62% no-repeat}
.dm-b{max-width:200px;padding:8px 11px;border-radius:4px 14px 14px 14px;background:#fff;font:400 12px/1.5 var(--kr);color:#0F1B19;letter-spacing:-.02em;
  box-shadow:0 1px 0 rgba(4,48,42,.05)}
.dm-b b{font-weight:700}
.dm-row.me .dm-b{border-radius:14px 4px 14px 14px;background:#00C8A8;color:#04302A;font-weight:600}
.dm-row.ow .dm-b{background:#fff;border:1.5px solid rgba(0,200,168,.5);font-weight:700;font-size:13px}
.dm-nm{margin:0 0 3px;font:600 10.5px/1 var(--kr);color:#6B807B}
.dm-sys{display:flex;justify-content:center;animation:dmIn .32s both}
.dm-sys span{padding:5px 11px;border-radius:999px;background:rgba(4,48,42,.07);font:600 10.5px/1.3 var(--kr);color:#38524C}
.dm-sys.hit span{background:rgba(0,200,168,.16);color:#007A66}
/* 통화 카드 — 실제 대화방의 검은 폰 카드 축소판 */
.dm-call{display:flex;flex-direction:column;align-items:center;gap:3px;width:176px;padding:14px 10px 12px;border-radius:16px;background:#071A17;color:#fff}
.dm-call b{font:800 15px/1.2 var(--kr)}
.dm-call small{font:500 10px/1.2 var(--kr);color:rgba(255,255,255,.6)}
.dm-call em{margin-top:4px;font:700 10.5px/1.2 var(--kr);color:#3EE0C4;font-style:normal;display:flex;align-items:center;gap:3px}
.dm-call em i{width:3px;height:3px;border-radius:50%;background:#3EE0C4;animation:dmDot 1.1s infinite}
.dm-call em i:nth-child(2){animation-delay:.18s}.dm-call em i:nth-child(3){animation-delay:.36s}
.dm-cav{position:relative;display:block;width:54px;height:54px;margin-bottom:4px;border-radius:50%;overflow:hidden;background:#EAF6F2;box-shadow:0 0 0 3px rgba(62,224,196,.25)}
.dm-cav img{width:100%;height:100%;object-fit:cover}
.dm-call.ring .dm-cav{animation:dmRing 1.2s ease-in-out infinite}
.dm-cav.big{width:84px;height:84px;margin:10px 0 12px}
.dm-eta{align-self:center;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 18px;border-radius:14px;background:#fff;animation:dmIn .32s .1s both}
.dm-eta span{font:600 10.5px/1 var(--kr);color:#6B807B}
.dm-eta b{font:800 22px/1.15 var(--lat,inherit);color:#04302A}
.dm-eta small{font:500 10px/1.2 var(--kr);color:#6B807B}
/* 아래 답 판 (찍은 분) — 실제 .vc-pick */
.dm-pick{flex:none;display:grid;gap:6px;padding:10px 10px 14px;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 20px -14px rgba(4,48,42,.35);animation:dmUp .38s cubic-bezier(.2,.8,.2,1) both}
.dm-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;border:0;border-radius:13px;background:#F1F7F5;text-align:left;cursor:pointer;
  font-family:var(--kr);transition:transform .12s,background .15s}
.dm-opt:hover{background:#E3F4EF}.dm-opt:active{transform:scale(.98)}
.dm-opt i{flex:none;width:22px;font:17px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;text-align:center}
.dm-opt b{display:block;font:700 13px/1.25 var(--kr);color:#0F1B19;letter-spacing:-.02em}
.dm-opt small{display:block;margin-top:1px;font:500 10.5px/1.2 var(--kr);color:#6B807B}
.dm-opt.alert b{color:#C2410C}
.dm-bar{flex:none;display:flex;align-items:center;gap:8px;padding:9px 10px 14px;background:#fff;border-top:1px solid rgba(4,48,42,.06)}
.dm-bar span{flex:1;padding:9px 12px;border-radius:999px;background:#EEF7F4;font:500 10.5px/1 var(--kr);color:#8BA19B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-bar i{flex:none;width:30px;height:30px;border-radius:50%;background:#0B3A33}
/* 차주 — 잠금 화면 · 수신 전화 · 답하기 */
.dm-lock{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:96px;background:linear-gradient(180deg,#1B2B28,#0B1412);color:#fff}
.dm-lock b{font:300 54px/1 var(--lat,inherit);letter-spacing:-.02em}
.dm-lock span{margin-top:6px;font:500 12px/1 var(--kr);opacity:.7}
.dm-lock p{margin:auto 0 40px;font:500 11px/1 var(--kr);opacity:.45}
.dm-incall{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:64px;background:linear-gradient(180deg,#0F2A25,#061210);color:#fff;text-align:center;animation:dmFade .3s both}
.dm-incall small{font:500 11px/1 var(--kr);opacity:.65}
.dm-incall b{font:800 16px/1.35 var(--kr);letter-spacing:-.02em}
.dm-incall em{margin-top:6px;font:500 11px/1 var(--lat,inherit);font-style:normal;opacity:.6}
.dm-incall .dm-cav.big{animation:dmRing 1.2s ease-in-out infinite}
.dm-btns{display:flex;gap:64px;margin-top:auto;margin-bottom:44px}
.dm-btns span,.dm-take{display:flex;flex-direction:column;align-items:center;gap:6px}
.dm-btns small{font:600 10.5px/1 var(--kr);color:rgba(255,255,255,.75)}
.dm-btns i{display:block;width:52px;height:52px;border-radius:50%;background:#E5484D center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.956.956 0 0 1 0-1.36C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.72c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E")}
.dm-btns i.ok{background-color:#22C55E;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21a.96.96 0 0 0 .25-1A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E")}
.dm-take{padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dm-take i.ok{animation:dmTake 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(34,197,94,.6)}
.dm-take:hover i.ok{transform:scale(1.08)}
.dm-take small{color:#fff;font-weight:700}
@keyframes dmTake{0%{box-shadow:0 0 0 0 rgba(34,197,94,.65)}70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.dm-req{display:grid;gap:4px;padding:11px 12px;border-radius:14px;background:#fff;animation:dmIn .32s both}
.dm-req b{font:800 13.5px/1.3 var(--kr);color:#0F1B19;letter-spacing:-.02em}
.dm-req b.alert{color:#C2410C}
.dm-req span{font:600 10.5px/1.2 var(--kr);color:#6B807B}
.dm-req p{margin:2px 0 0;padding:7px 9px;border-radius:9px;background:#F1F7F5;font:500 11.5px/1.45 var(--kr);color:#0F1B19}
.dm-ask{flex:none;display:grid;gap:5px;padding:11px 10px 14px;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 20px -14px rgba(4,48,42,.35);animation:dmUp .38s cubic-bezier(.2,.8,.2,1) both}
.dm-ask p{margin:0 2px 3px;font:800 12.5px/1.3 var(--kr);color:#0F1B19}
.dm-ask p small{font:500 9.5px/1 var(--kr);color:#8BA19B;margin-left:2px}
.dm-ans{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:11px;background:#E8F7F2;text-align:left;cursor:default;
  font:700 12px/1.2 var(--kr);color:#04302A;transition:background .2s,transform .2s}
.dm-ans span{flex:1}
.dm-ans em{flex:none;padding:3px 7px;border-radius:999px;background:#fff;font:700 9.5px/1 var(--kr);color:#38524C;font-style:normal}
.dm-ans.terra{background:#FFF3E4;color:#7A4A12}
.dm-ans.hint{cursor:pointer;box-shadow:0 0 0 2px #00C8A8;animation:dmPulse 1.3s ease-in-out infinite}
.dm-ans.pick{background:#00C8A8;color:#04302A;box-shadow:none}
.dm-ans.pick em{background:#04302A;color:#fff}
.dm-ans i{flex:none;width:18px;font:13px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;text-align:center}
.dm-ans.gray{background:#F1F3F2;color:#0F1B19}
.dm-ans.gold{background:#FFF3DC;color:#6B4A0E}
/* 폰 화면 — 탭으로 한 대씩 */
.dm-tabs{display:none}
@media (max-width:860px){
  .dm-tabs{display:flex;gap:6px;max-width:320px;margin:28px auto 0;padding:4px;border-radius:14px;background:rgba(4,48,42,.07)}
  .dm-tabs button{flex:1;min-height:44px;border:0;border-radius:11px;background:none;font:700 14px/1 var(--kr);color:#38524C;cursor:pointer;transition:background .2s,color .2s}
  .dm-tabs button.on{background:#fff;color:#04302A;box-shadow:0 2px 8px -4px rgba(4,48,42,.3)}
  .demo .stage{margin-top:14px}
  .demo .stage[data-show="v"] .phone.owner,.demo .stage[data-show="o"] .phone:not(.owner){display:none}
}
.dm-cam{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:#0B1210;cursor:pointer}
.dm-glass{position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(160deg,#2E4743 0%,#1B2B29 45%,#0E1716 100%)}
.dm-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 38%,transparent 46%)}
.dm-wiper{position:absolute;left:-10%;right:-10%;bottom:9%;height:3px;border-radius:2px;background:rgba(0,0,0,.55);transform:rotate(-8deg)}
.dm-stk-wrap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg) scale(.62);transform-origin:center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:dmZoom 2.6s ease-out both}
.dm-stk-wrap .stk{margin:0}
.dm-frame{position:absolute;left:50%;top:44%;width:150px;height:150px;transform:translate(-50%,-56%);border-radius:18px;
  background:linear-gradient(#FFD43B,#FFD43B) top left/22px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) top left/3px 22px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) top right/22px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) top right/3px 22px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) bottom left/22px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) bottom left/3px 22px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) bottom right/22px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) bottom right/3px 22px no-repeat;
  animation:dmLock .9s .9s cubic-bezier(.2,.8,.2,1) both}
.dm-laser{position:absolute;left:50%;top:44%;width:130px;height:2px;margin-left:-65px;background:rgba(255,212,59,.85);box-shadow:0 0 10px #FFD43B;animation:dmScan 1.1s ease-in-out 2 alternate}
.dm-cam-t{position:relative;margin:44px 0 0;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);font:600 11px/1 var(--kr);color:#fff}
.dm-link{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:999px;
  background:#fff;color:#0F1B19;font:700 12.5px/1 var(--kr);white-space:nowrap;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);animation:dmPop .4s 1.6s cubic-bezier(.2,1.4,.4,1) both}
.dm-shutter{position:absolute;left:50%;bottom:22px;width:54px;height:54px;margin-left:-27px;border-radius:50%;border:3px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.dm-shutter i{width:42px;height:42px;border-radius:50%;background:#fff}
.dm-stk-ph{width:120px;height:160px;border-radius:12px;background:#fff;display:grid;place-items:center;font:800 24px/1 var(--kr)}
@keyframes dmZoom{from{transform:translate(-50%,-50%) rotate(-4deg) scale(.5)}to{transform:translate(-50%,-50%) rotate(-4deg) scale(.62)}}
@keyframes dmLock{from{transform:translate(-50%,-56%) scale(1.5);opacity:0}to{transform:translate(-50%,-56%) scale(1);opacity:1}}
@keyframes dmScan{from{transform:translateY(-70px)}to{transform:translateY(40px)}}
@keyframes dmPop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dmUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes dmFade{from{opacity:0}to{opacity:1}}
@keyframes dmDot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes dmRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-3deg)}}
@keyframes dmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (max-width:860px){
  .demo .stage{grid-template-columns:minmax(0,320px);justify-content:center;gap:18px}
  .demo .phone-in{height:560px}
}
@media (prefers-reduced-motion:reduce){.dm-stk-wrap,.dm-frame,.dm-laser,.dm-link,.dm-row,.dm-sys,.dm-pick,.dm-ask,.dm-eta,.dm-incall,.dm-call.ring .dm-cav,.dm-incall .dm-cav.big,.dm-take i.ok,.dm-ans.hint,.dm-call em i{animation:none}}
/* ══ 끝: 써보기 ══ */
/* ══ 랜딩 v2 (2026-10-05, 디자이너) — 12구역 → 6구역 ══ */
.v2-strip{background:var(--bg,#fff);padding:clamp(22px,3vw,36px) 0}
.v2-promise{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.v2-promise li{padding:18px 18px 16px;border-radius:18px;background:var(--surf,#F1F7F5)}
.v2-promise b{display:block;font:800 clamp(20px,2.4vw,26px)/1.1 var(--disp,var(--kr));letter-spacing:-.03em;color:var(--tx)}
.v2-promise span{display:block;margin-top:6px;font:500 13px/1.45 var(--kr);color:var(--tx2)}
@media (max-width:860px){.v2-promise{grid-template-columns:1fr 1fr;gap:8px}.v2-promise li{padding:14px}}
.v2-most{max-width:40ch}
.v2-ex{grid-template-columns:repeat(2,1fr)}   /* 4장 — 2×2 (가족사진 카드 포함) */
.v2-ex .ex p b{color:var(--on-dk,#fff)}
@media (max-width:860px){.v2-ex{grid-template-columns:1fr}}
.v2-card{padding:22px 22px 20px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.v2-tag{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.10);font:700 12px/1 var(--kr);color:var(--on-dk2,#c9cfcd)}
.v2-card b{display:block;margin-top:12px;font:800 20px/1.35 var(--kr);letter-spacing:-.03em;color:var(--on-dk,#fff)}
.v2-card p{margin:8px 0 0;font:400 15px/1.65 var(--kr);color:var(--on-dk2,#c9cfcd)}
.v2-card p b{display:inline;margin:0;font-size:inherit;font-weight:700;color:var(--on-dk,#fff)}
.v2-news{margin-top:22px;font:500 13px/1.8 var(--kr);color:var(--on-dk3,#9aa3a0)}
.v2-news a{color:var(--on-dk2,#c9cfcd);text-decoration:underline;text-underline-offset:3px}
.v2-fix{margin-bottom:clamp(24px,4vw,40px);grid-template-columns:1fr!important}
.v2-fix .fix-art{display:none}   /* 스티커는 써보기 첫 장면(카메라)에서 보여 준다 — 같은 그림을 두 번 안 보이게. 장면이 이 스티커를 복사해 쓴다 */
.v2-fix > div{max-width:560px;margin:0 auto;text-align:left}
.v2-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.v2-steps li{display:flex;gap:12px;align-items:flex-start}
.v2-steps i{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tx);color:#fff;font:800 14px/1 var(--disp,var(--kr));font-style:normal}
.v2-steps p{margin:4px 0 0;font:400 17px/1.5 var(--kr);color:var(--tx2);letter-spacing:-.02em}
.v2-steps b{color:var(--tx);font-weight:700}
.v2-price{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.v2-price .h2 u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(0,200,168,.35) 62%)}
.v2-terms{list-style:none;margin:0;padding:22px;display:grid;gap:12px;border-radius:24px;background:#fff;box-shadow:0 1px 0 rgba(16,17,19,.04),0 24px 48px -30px rgba(16,17,19,.35)}
.v2-terms li{display:flex;gap:12px;align-items:flex-start}
.v2-terms i{flex:none;width:26px;font:20px/1.3 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;text-align:center}
.v2-terms p{margin:0;font:400 15.5px/1.55 var(--kr);color:var(--tx2);letter-spacing:-.02em}
.v2-terms p b{color:var(--tx);font-weight:700}
.v2-terms li:last-child{display:block;margin-top:6px}
.v2-terms .btn{display:flex;width:100%;justify-content:center}
@media (max-width:860px){.v2-price{grid-template-columns:1fr}}
/* 문신 똑이 — 전화로 시작하면 싸움 */
.v2-fight{display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin-top:clamp(20px,3vw,32px);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.v2-fight figure{margin:0;min-height:240px}
.v2-fight img{display:block;width:100%;height:100%;object-fit:cover}
.v2-fight > div{padding:clamp(20px,3vw,32px);align-self:center}
.v2-fight b{display:block;margin-top:12px;font:800 clamp(20px,2.4vw,26px)/1.3 var(--kr);letter-spacing:-.03em;color:var(--on-dk,#fff)}
.v2-fight p{margin:10px 0 0;font:400 15.5px/1.7 var(--kr);color:var(--on-dk2,#c9cfcd)}
.v2-fight p b{display:inline;margin:0;font-size:inherit;font-weight:700}
.v2-safe{margin-top:12px}
@media (max-width:860px){.v2-fight{grid-template-columns:1fr}.v2-fight figure{min-height:0;aspect-ratio:16/9}}
/* 마지막 — 똑이가 번호 쪽지를 쪼아 치우고 QR 을 붙인다 */
.last .peck{position:relative;width:min(100%,400px);height:230px;margin:0 auto 34px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.peck-glass{position:absolute;left:0;top:18px;width:200px;height:190px;border-radius:26px 26px 14px 14px;
  background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(4,48,42,.12));box-shadow:inset 0 0 0 3px rgba(4,48,42,.35),0 20px 36px -22px rgba(4,48,42,.6);overflow:hidden}
.peck-shine{position:absolute;inset:-20% auto -20% 30%;width:26px;background:rgba(255,255,255,.45);transform:rotate(18deg)}
.peck-note{position:absolute;left:22px;top:52px;width:150px;padding:16px 10px 12px;border-radius:6px;background:#FFF7D6;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);transform:rotate(-4deg);text-align:center}
.peck-tape{position:absolute;left:50%;top:-8px;width:46px;height:16px;margin-left:-23px;background:rgba(255,255,255,.7);transform:rotate(3deg)}
.peck-note b{display:block;font:800 16px/1.2 var(--kr);letter-spacing:.01em;color:#2B2B2B;white-space:nowrap}
.peck-note b i{display:inline-block;font-style:normal}
.peck-note em{display:block;margin-top:4px;font:600 11px/1 var(--kr);font-style:normal;color:#7A6A3A}
.peck-chip{position:absolute;left:150px;top:96px;width:8px;height:6px;border-radius:2px;background:#FFF7D6;opacity:0}
.peck-stk{position:absolute;left:46px;top:22px;opacity:0;transform:translateY(-30px) rotate(-8deg) scale(.6)}
.peck-stk .stk{--w:104px;margin:0}
.peck-bird{position:absolute;bottom:6px;height:170px;width:auto;filter:drop-shadow(0 14px 18px rgba(4,48,42,.35))}
.peck-bird.knock{left:180px;transform-origin:70% 90%}
.peck-bird.cheer{left:200px;height:176px;opacity:0}
.peck-say{position:absolute;left:auto;right:-30px;top:-34px;width:max-content;margin:0!important;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:#04302A!important;
  font:500 13px/1.45 var(--kr)!important;text-align:left;box-shadow:0 10px 24px -12px rgba(4,48,42,.5);opacity:0;transform:translateY(8px);max-width:none}
.peck-say b{font-weight:800}
.last .peck.in .peck-bird.knock{animation:pkHit .32s ease-in-out 7 both,pkOut .3s 2.5s forwards}
.last .peck.in .peck-note b i{animation:pkGone .25s calc(.3s + var(--i) * .16s) forwards}
.last .peck.in .peck-note{animation:pkShake .32s ease-in-out 7,pkFall .7s 2.3s cubic-bezier(.5,0,.8,.5) forwards}
.last .peck.in .peck-chip{animation:pkChip .5s ease-out forwards}
.last .peck.in .peck-chip.c1{animation-delay:.35s;--x:-34px;--y:-30px}.last .peck.in .peck-chip.c2{animation-delay:.9s;--x:-20px;--y:26px}
.last .peck.in .peck-chip.c3{animation-delay:1.5s;--x:-44px;--y:-4px}.last .peck.in .peck-chip.c4{animation-delay:2s;--x:-26px;--y:-36px}
.last .peck.in .peck-stk{animation:pkStk .6s 2.9s cubic-bezier(.2,1.3,.4,1) forwards}
.last .peck.in .peck-bird.cheer{animation:pkIn .4s 2.7s forwards,pkHop .7s 3.2s ease-in-out 2}
.last .peck.in .peck-say{animation:pkSay .35s 3.4s forwards}
@keyframes pkHit{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(-14deg) translateX(-12px)}}
@keyframes pkOut{to{opacity:0}}
@keyframes pkIn{to{opacity:1}}
@keyframes pkGone{to{opacity:0;transform:translateY(-6px) scale(.6)}}
@keyframes pkShake{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-1deg) translateX(-2px)}}
@keyframes pkFall{to{transform:translateY(170px) rotate(-28deg);opacity:0}}
@keyframes pkChip{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(90deg)}}
@keyframes pkStk{to{opacity:1;transform:none}}
@keyframes pkHop{0%,100%{transform:none}50%{transform:translateY(-10px)}}
@keyframes pkSay{to{opacity:1;transform:none}}
@media (max-width:860px){.last .peck{width:330px;height:220px}.peck-glass{width:180px}.peck-bird.knock{left:156px}.peck-bird.cheer{left:172px}.peck-say{right:-8px;top:-40px;font-size:12px!important}}
@media (prefers-reduced-motion:reduce){.last .peck.in *{animation:none!important}.peck-note{display:none}.peck-stk{opacity:1;transform:none}.peck-bird.knock{opacity:0}.peck-bird.cheer,.peck-say{opacity:1;transform:none}}
/* 마지막 — 글자 다듬기 (회장님: "폰트랑 설명도 구려") */
.last h2{font-weight:800;letter-spacing:-.035em;line-height:1.22;font-size:clamp(32px,5vw,56px)}
.last > .cw > p{font:500 clamp(16px,1.6vw,19px)/1.7 var(--kr);color:rgba(4,48,42,.86);margin-bottom:28px}
.last > .cw > p b{font-weight:800;color:#04302A}
.last-links{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.last-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.28);
  font:600 14px/1 var(--kr);color:#04302A;text-decoration:none;transition:background .18s}
.last-links a:hover{background:rgba(255,255,255,.45)}
/* 1분 영상 '나는 아니겠지' */
.film-grid{display:grid;grid-template-columns:1fr minmax(0,340px);gap:clamp(28px,6vw,72px);align-items:center;max-width:980px}
.film-phone{position:relative;width:min(340px,82vw);aspect-ratio:9/16;margin:0 auto;padding:9px;border-radius:42px;background:#0E1513;box-shadow:0 30px 60px -30px rgba(16,17,19,.55)}
.film-phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:33px;background:#000;cursor:pointer}
.film-snd{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);min-height:44px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.94);
  font:700 14px/1 var(--kr);color:#04302A;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);white-space:nowrap}
.film-snd.on{background:rgba(4,48,42,.82);color:#fff}
.film-bar{position:absolute;left:28px;right:28px;bottom:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.film-bar b{display:block;width:0;height:100%;background:#00C8A8}
.film-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.film-ch button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,17,19,.08);
  font:600 14px/1 var(--kr);color:var(--tx);cursor:pointer;transition:background .15s}
.film-ch button:hover{background:#E8F7F2}
@media (max-width:860px){.film-grid{grid-template-columns:1fr;text-align:center}.film-ch{justify-content:center}.film-tx .lead{margin-left:auto;margin-right:auto}}
.v2-later{font-size:.86em;color:var(--tx2)}
/* ══ 끝: 랜딩 v2 ══ */