/* ══ 앱 데모 — 휴대폰 안에서 실제로 누르는 것처럼 움직인다 ══
   화면 문구는 실제 앱 문구를 그대로 쓴다(면회 「예약 하였습니다.」, 제증명 「구비서류 안내」 등).
   랜딩이 앱보다 많은 것을 약속하면 안 된다 — 제증명은 «발급 알림 → 병원에서 수령» 까지만 보여 준다. */

.demo{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(77,179,59,.28), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(39,100,121,.45), transparent 60%),
    #13264F;
}
.demo .shell{display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:center}
@media (max-width:900px){
  /* 좁은 화면: 제목 → 고르기 → «휴대폰» → 단계. 휴대폰이 단계 목록 아래에 있으면
     설명을 다 내려 읽은 뒤에야 움직임이 보인다. 글 묶음을 풀어(display:contents) 순서를 다시 짠다. */
  .demo .shell{grid-template-columns:1fr; gap:0}
  .demo-copy{display:contents}
  .demo-copy > *{order:1}
  .demo .phone{order:2; margin:6px auto 28px}
  .demo .steps{order:3}
  .demo .note{order:4}
}
.demo .tag{color:#9EE08F}
.demo h2{margin:0 0 14px; font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.3}
.demo .sub{margin:0 0 30px; color:#C9D6EA; font-size:17px}

/* 흐름 고르기 */
.flows{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.flows button{
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:#E6EEF8; font:inherit; font-size:15px; font-weight:700; padding:10px 18px; border-radius:999px; cursor:pointer;
}
.flows button[aria-selected="true"]{background:#fff; color:#13264F; border-color:#fff}
.flows button .bar{position:absolute; left:0; bottom:0; height:3px; width:0; background:#4DB33B}
.flows button[aria-selected="true"] .bar{animation:flowbar var(--dur,9s) linear forwards}
@keyframes flowbar{to{width:100%}}

/* 단계 목록 */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s}
.steps li{
  counter-increment:s; display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#AFC0D8;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.steps li::before{
  content:counter(s); flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:800; background:rgba(255,255,255,.1); color:#C9D6EA; transition:background .3s,color .3s;
}
.steps li b{display:block; color:#fff; font-size:16.5px; margin-bottom:2px}
.steps li span{font-size:14.5px; line-height:1.55}
.steps li.on{background:rgba(255,255,255,.12); border-color:rgba(158,224,143,.55); color:#E6EEF8; transform:translateX(4px)}
.steps li.on::before{background:#4DB33B; color:#fff}
.demo .note{margin:18px 0 0; font-size:13px; color:#8FA3C2}

/* ── 휴대폰 ── */
.phone{
  justify-self:center; width:320px; height:660px; border-radius:50px; padding:11px; background:#0B0F14;
  box-shadow:0 0 0 2px #2B3A55, 0 40px 80px rgba(0,0,0,.45), 0 0 0 10px rgba(158,224,143,.08);
  position:relative;
}
.screen{
  position:relative; width:298px; height:638px; border-radius:40px; overflow:hidden; background:#fff; color:#1A1F1C;
  font-size:13px; letter-spacing:-.02em; line-height:1.45;
}
.island{position:absolute; top:10px; left:50%; width:92px; height:26px; margin-left:-46px; border-radius:14px; background:#0B0F14; z-index:30}
.view{position:absolute; inset:0; padding-top:44px; background:#fff; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s}
.view.off-r{transform:translateX(100%)}
.view.off-l{transform:translateX(-30%); opacity:0}
.view.hidden{opacity:0; pointer-events:none}

/* 화면 조각 */
.s-head{height:44px; display:flex; align-items:center; padding:0 16px; font-size:20px; font-weight:800}
.s-head .ico{margin-left:auto; display:flex; gap:12px; color:#222}
.s-head .ico svg{width:17px; height:17px}
.s-back{height:44px; display:flex; align-items:center; justify-content:center; position:relative; font-size:15px; font-weight:600}
.s-back::before{content:"‹"; position:absolute; left:14px; font-size:22px; font-weight:400}
.grad{background:linear-gradient(90deg,#25D329,#283C86); color:#fff}
.pcard{padding:14px 16px}
.pcard .h{display:flex; gap:10px; align-items:center}
.pcard .h i{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); color:#00945F; font-style:normal; font-size:10px; font-weight:800; display:grid; place-items:center}
.pcard .n{margin-top:10px; font-size:17px; font-weight:800}
.tabs{display:flex; border-bottom:1px solid #EEE}
.tabs div{flex:1; text-align:center; padding:9px 0; color:#9A9A9A; font-size:13.5px}
.tabs div.on{color:#00945F; font-weight:700; box-shadow:inset 0 -3px #00945F}
.tabs.k div.on{color:#111; box-shadow:inset 0 -3px #111}
.cal-h{display:flex; justify-content:space-between; padding:10px 22px 6px; font-size:14px}
.cal-h span:first-child,.cal-h span:last-child{color:#5B4EA0}
.cal{display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px; padding:0 8px}
.cal span{height:32px; width:32px; justify-self:center; display:grid; place-items:center; border-radius:50%; font-size:13px; transition:background .25s,color .25s}
.cal .w{height:22px; color:#777; font-size:11.5px}
.cal .sun{color:#E53935}
.cal .past{color:#C4C4C4}
.cal .sel{background:#00945F; color:#fff; font-weight:800}
.slots{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 12px; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s}
.slots.show{opacity:1; transform:none}
.slots span{border:1px solid #DDD; border-radius:6px; text-align:center; padding:7px 0; font-size:12.5px; transition:background .2s,color .2s,border-color .2s}
.slots span.full{color:#B0B0B0; background:#F5F5F5}
.slots span.sel{background:#00945F; border-color:#00945F; color:#fff; font-weight:700}
.slots-label{padding:2px 14px 0; font-size:12px; color:#555; opacity:0; transition:opacity .35s}
.slots-label.show{opacity:1}

.rcard{margin:14px 14px 0; border:1px solid #E7E7E7; border-radius:12px; padding:14px; transition:box-shadow .4s, border-color .4s}
.rcard.hl{border-color:#00945F; box-shadow:0 0 0 4px rgba(0,148,95,.14)}
.rcard .top{display:flex; justify-content:space-between; align-items:center}
.rcard .top b{font-size:15px}
.chip{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; color:#fff; background:#00945F}

.list .row{display:flex; align-items:center; padding:13px 18px; border-bottom:1px solid #EFEFEF; font-size:14.5px}
.list .row em{font-style:normal; color:#00945F; width:22px}
.list .row::after{content:"›"; margin-left:auto; color:#999; font-size:18px}
.banner-pink{margin:14px 16px 6px; border-radius:10px; background:#ECD2D9; padding:18px; font-weight:700; font-size:15px; line-height:1.4}
.banner-pink small{display:block; font-weight:400; color:#777; font-size:11.5px; margin-top:4px}
.sec{padding:12px 18px 4px; font-weight:700; font-size:15px}

.detail{padding:4px 18px}
.detail h4{margin:6px 0 2px; font-size:19px}
.detail .cost{color:#666; font-size:12.5px}
.detail .lab{margin:16px 0 8px; font-size:12.5px; color:#666}
.purp{display:flex; flex-wrap:wrap; gap:6px}
.purp span{border:1px solid #DDD; border-radius:999px; padding:5px 11px; font-size:12px; transition:background .2s,color .2s,border-color .2s}
.purp span.sel{background:#00945F; color:#fff; border-color:#00945F; font-weight:700}
.memo{border:1px solid #E3E3E3; border-radius:8px; height:56px; color:#AAA; font-size:12px; padding:8px 10px}
.btn-app{position:absolute; left:16px; right:16px; bottom:22px; height:46px; border-radius:10px; background:#00945F; color:#fff; font-weight:700; font-size:15px; display:grid; place-items:center}

.hist{background:#FBF6FB; height:100%}
.hist .row{display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid #EEE; background:transparent; transition:background .4s}
.hist .row i{width:32px; height:32px; border-radius:50%; background:#E8F5EE; flex:none}
.hist .row b{display:block; font-size:14.5px}
.hist .row small{color:#777; font-size:12.5px}
.hist .row .st{margin-left:auto; font-size:12.5px; font-weight:600; color:#E5484D; transition:color .3s}
.hist .row .st.done{color:#00945F}
.hist .row.new{background:#fff}

.home-h{height:44px; display:flex; align-items:center; gap:8px; padding:0 16px; font-size:15.5px}
.home-h img{width:20px; height:25px}
.strip{margin:2px 16px 0; height:46px; border:1px solid #00955F; border-radius:10px; display:flex; align-items:center; padding:0 12px; font-size:12px; color:#666}
.hero-img{margin-top:12px; height:150px; background:linear-gradient(160deg,#cfe9dc,#a9d3c0); padding:0 16px 16px; display:flex; flex-direction:column; justify-content:flex-end; color:#0F3D2B}
.hero-img small{font-size:11.5px}
.hero-img b{font-size:18px; line-height:1.3}
.stat{margin:16px; padding:16px; border-radius:10px}
.stat .t1{font-size:16px}
.stat .t2{font-size:13.5px}
.stat hr{border:0; height:1px; background:rgba(255,255,255,.5); margin:14px 0}
.stat .ic{display:flex; justify-content:space-between; padding:0 6px}
.stat .ic div{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; transition:transform .3s}
.stat .ic img{width:28px; height:26px}
.stat .ic div.pulse{transform:scale(1.18)}
.nav-b{position:absolute; left:0; right:0; bottom:0; height:62px; background:#F4F6F8; display:flex; justify-content:space-around; align-items:center; padding-bottom:10px; font-size:10.5px; color:#C4C4C4}
.nav-b span.on{color:#00945F; font-weight:700}

/* AI 챗봇 상담 — 앱의 ChatbotRouter 모양(초록 헤더·로봇 아이콘·빠른 질문 칩) */
.bot-h{height:46px; background:#00945F; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:600; position:relative}
.bot-h::before{content:"‹"; position:absolute; left:14px; font-size:22px; font-weight:400}
.bot-h i{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; font-style:normal; font-size:12px}
.chat{position:absolute; top:90px; left:0; right:0; bottom:104px; overflow:hidden; padding:10px 12px; display:flex; flex-direction:column; gap:8px; justify-content:flex-end; background:#F6F8F7}
.msg{max-width:78%; padding:9px 12px; border-radius:14px; font-size:12.5px; line-height:1.5; word-break:keep-all; white-space:pre-line; animation:msgin .25s ease-out}
.msg.bot{align-self:flex-start; background:#fff; border:1px solid #E5EBE8; border-top-left-radius:4px}
.msg.me{align-self:flex-end; background:#00945F; color:#fff; border-top-right-radius:4px}
.msg.typing{color:#9AA5A0; letter-spacing:2px}
@keyframes msgin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.quick{position:absolute; left:0; right:0; bottom:58px; display:flex; gap:6px; overflow:hidden; padding:6px 10px; background:#fff; border-top:1px solid #EEF2F0}
.quick span{flex:none; border:1px solid #00945F; color:#00945F; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:500; transition:background .2s,color .2s}
.quick span.sel{background:#00945F; color:#fff}
.bot-in{position:absolute; left:0; right:0; bottom:0; height:58px; background:#fff; display:flex; align-items:center; gap:8px; padding:0 10px 10px}
.bot-in div{flex:1; height:36px; border-radius:18px; background:#F1F4F3; display:flex; align-items:center; padding:0 14px; font-size:12.5px; color:#9AA5A0; white-space:nowrap; overflow:hidden}
.bot-in div.typed{color:#1A1F1C}
.bot-in b{width:36px; height:36px; border-radius:50%; background:#00945F; color:#fff; display:grid; place-items:center; font-size:15px}

/* 공용: 대화상자 · 토스트 · 푸시 · 손가락 */
.dim{position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:opacity .25s; z-index:15}
.dim.show{opacity:1}
.dialog{
  position:absolute; left:28px; right:28px; top:50%; z-index:16; background:#fff; border-radius:14px; padding:18px 18px 14px;
  transform:translateY(-40%) scale(.94); opacity:0; transition:transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .2s; pointer-events:none;
}
.dialog.show{transform:translateY(-50%) scale(1); opacity:1}
.dialog b{display:block; font-size:15px; margin-bottom:6px}
.dialog p{margin:0; font-size:12.5px; color:#444; line-height:1.55}
.dialog .acts{display:flex; gap:8px; margin-top:14px}
.dialog .acts span{flex:1; text-align:center; padding:8px 0; border-radius:999px; background:#9E9E9E; color:#fff; font-size:13px; font-weight:700}
.dialog .acts span.ok{background:#4A90E2}
.toast{
  position:absolute; left:50%; bottom:90px; z-index:18; transform:translate(-50%,12px); opacity:0;
  background:rgba(30,30,30,.86); color:#fff; font-size:12.5px; padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.push{
  /* 아일랜드(위 10~36px) 아래에서 내려온다 — 위에 두면 까만 아일랜드가 앱 이름을 가린다(10/3) */
  position:absolute; left:10px; right:10px; top:44px; z-index:25; background:rgba(250,250,250,.96); backdrop-filter:blur(10px);
  border-radius:18px; padding:11px 13px; box-shadow:0 10px 30px rgba(0,0,0,.22); display:flex; gap:10px;
  transform:translateY(-200%); transition:transform .45s cubic-bezier(.2,.9,.3,1.1);
}
.push.show{transform:none}
.push img{width:30px; height:30px; border-radius:8px; background:#fff; padding:3px; box-shadow:0 0 0 1px #EEE}
.push > div{flex:1; min-width:0}
.push b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.push p{margin:1px 0 0; font-size:12px; color:#444; line-height:1.4; word-break:keep-all}
.push small{flex:none; white-space:nowrap; color:#999; font-size:11px}
.finger{
  position:absolute; z-index:40; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  background:rgba(255,255,255,.35); border:2px solid rgba(255,255,255,.95); box-shadow:0 2px 10px rgba(0,0,0,.35);
  left:0; top:0; transform:translate(220px,520px); opacity:0;
  transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .25s;
  pointer-events:none;
}
.finger.show{opacity:1}
.finger.tap::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #fff; animation:ripple .5s ease-out}
.finger.tap{background:rgba(255,255,255,.65)}
@keyframes ripple{from{transform:scale(1); opacity:1} to{transform:scale(2.1); opacity:0}}

/* ── 히어로 선 일러스트 ──
   네 장면이 28초에 한 바퀴(장면당 7초). 선이 위에서부터 약 4초에 걸쳐 그려지고, 다 그려진 뒤
   약 1.5초 머물렀다가 장면째 사라진다(10/4 — 머무는 시간을 줄여 달라는 의견. 전엔 3초 넘게 머물렀다).
   선은 그려진 뒤 24%(≈6.7초)까지 남았다가 «안 그려진 상태로» 되돌아간다 — 장면이 숨은 뒤라 보이지 않는다.
   stroke-dasharray 1 + pathLength 1 이라 선 길이와 상관없이 같은 속도. */
.hero .shell.with-art{max-width:var(--shell); display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center}
.hero-art{width:100%; max-width:470px; justify-self:center; color:#fff; overflow:visible; filter:drop-shadow(0 6px 18px rgba(10,30,60,.22))}
.hero-art .scene{opacity:0; animation:art-scene 28s linear infinite both}
.hero-art .s2{animation-delay:7s}
.hero-art .s3{animation-delay:14s}
.hero-art .s4{animation-delay:21s}
.hero-art .scene path{stroke-dasharray:1; stroke-dashoffset:1; animation:art-line 28s ease-out infinite both; animation-delay:var(--d)}
@keyframes art-scene{0%{opacity:0} 1%{opacity:1} 21.8%{opacity:1} 23.2%,100%{opacity:0}}
@keyframes art-line{0%{stroke-dashoffset:1} 2.1%{stroke-dashoffset:0} 24%{stroke-dashoffset:0} 24.3%,100%{stroke-dashoffset:1}}
@media (max-width:900px){
  .hero .shell.with-art{grid-template-columns:1fr}
  .hero-art{max-width:340px; margin:12px auto 0}
}
@media (prefers-reduced-motion:reduce){
  /* 움직이지 않을 때는 첫 장면을 완성된 채로 */
  .hero-art .scene, .hero-art .scene path{animation:none}
  .hero-art .scene path{stroke-dashoffset:0}
  .hero-art .s1{opacity:1}
}

/* ── 스크린샷 흐름(마퀴) ── */
.marquee{overflow:hidden; margin:0 -24px 56px; padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex; gap:22px; width:max-content; animation:marq 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{width:230px; height:auto; border-radius:22px; display:block; box-shadow:0 12px 30px rgba(22,32,28,.12)}
@keyframes marq{to{transform:translateX(calc(-50% - 11px))}}
@media (max-width:620px){ .marquee img{width:180px} }

@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none; overflow-x:auto}
  .marquee{overflow-x:auto}
  .flows button .bar{display:none}
  .view,.finger,.dialog,.push,.toast,.slots{transition:none}
  .msg{animation:none}
}