﻿/* Hero, customer engine experience, three steps, examples, contact. */
.hero{background:radial-gradient(ellipse at 75% 50%,#fbdcc9 0,transparent 60%),#fff5ee;padding:116px 0 48px}
.hero-layout{display:grid;grid-template-columns:1fr 1.08fr;gap:24px;align-items:center;min-height:570px}
.hero-copy{padding-top:0}.hero h1{font-size:clamp(40px,4.45vw,64px);line-height:1.18}
.hero-line{font-size:18px;margin-top:22px}.hero .actions{margin-top:28px}
.hero .hero-launch{margin:12px 0 0}
.engine{padding-block:56px}
.engine-trust{font-size:17px;color:var(--plum);margin-top:14px}
.engine-cuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;margin:28px 0 0;list-style:none}
.engine-image{position:relative;height:232px;padding:16px 16px 42px;background:#fff;border:1px solid var(--line);border-radius:20px}
.engine-image img{width:100%;height:100%;object-fit:contain}
.engine-reference{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--plum);background:#fff1e8;border-radius:999px;padding:2px 10px}
.engine-cuts h3{font-size:24px;margin-top:18px}
.engine-cuts h3 span{font-size:14px;color:var(--plum);margin-right:8px}
.engine-cuts p{font-size:16px;margin-top:10px}
.engine .privacy-note{color:var(--muted)}
.process-title{font-size:32px;padding-top:16px}
.hero-showcase{position:relative;height:540px;isolation:isolate}
.hero-phone{position:absolute;top:48px;width:35%;border:4px solid #fffaf7;border-radius:22px;box-shadow:0 16px 36px #945f3521}
.hero-phone-a{left:0;transform:rotate(-7deg)}
.hero-phone-b{left:32.5%;top:8px;z-index:2}
.hero-phone-c{right:0;transform:rotate(7deg)}
.hero-media{left:30%;width:40%;aspect-ratio:720 / 1480;box-sizing:content-box;overflow:hidden;background:#fffaf7}
.hero-loop,.hero-still{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:720 / 1480;object-fit:contain}
@media(prefers-reduced-motion:reduce){.hero-loop{display:none}.hero-still[hidden]{display:block!important}}
.process{padding-block:64px}
/* body의 is-prelaunch 클래스 한 곳으로 모든 오픈 안내를 제어합니다. */
.launch-note{display:none;font-size:13px;color:var(--plum);padding:4px 10px;border:1px solid #e9c4b2;border-radius:999px;margin-bottom:12px;white-space:nowrap}
.is-prelaunch .launch-note{display:inline-block}
.step{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:64px;padding:40px 0}
.step+.step{border-top:1px solid var(--line);margin-top:24px}
.step h2{display:flex;align-items:center;gap:14px}
.step h2 span{font-size:13px;letter-spacing:0;color:var(--plum);border:1px solid #dca68f;border-radius:50%;width:34px;height:34px;display:inline-grid;place-items:center}
.step-copy p{max-width:430px;font-size:18px;margin-top:20px;line-height:1.8}
.step-copy .check-note{font-size:14px;color:var(--muted);line-height:1.7}
.step-visual{padding:24px;background:#fff1e8;border:1px solid var(--line);border-radius:24px}
.phone-visual{display:grid;place-items:center}
.phone-visual img{width:245px;border-radius:18px;box-shadow:0 10px 24px #85472d0c}
.console-visual{padding:12px}.console-visual img{width:100%;border-radius:14px}
.finished{background:#fff1e8;padding-block:64px;text-align:center}
.finished-examples{display:grid;grid-template-columns:repeat(3,minmax(0,245px));justify-content:center;gap:48px;margin-top:36px}
.finished-examples img{width:100%;border-radius:18px;box-shadow:0 12px 28px #85472d0c}
.finished-examples figcaption{font-size:15px;padding-top:16px;color:var(--plum);font-weight:650}
.contact{padding-block:64px;background:#fce6d9}
.contact h2{font-size:32px}.contact .actions{margin-top:18px}
.privacy-note{margin-top:28px;font-size:15px}.contact .notice{margin-top:12px;max-width:840px}
.company{margin-top:28px;font-size:12px;color:var(--muted)}

.demo-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin-top:32px}.demo-link .text-link{display:inline-flex;align-items:center;font-weight:700}
.try{padding-block:64px;text-align:center}.try h2{font-size:clamp(26px,3vw,34px)}.try-lead{margin-top:10px;font-size:16px;color:var(--muted)}
.try-frame{margin-top:28px;border-radius:24px;background:#fff7f2;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.try-start{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:56px 24px}.try-start .notice{flex-basis:100%;margin-top:4px}
.try-frame iframe{display:block;width:100%;height:min(820px,calc(100vh - 120px));border:0;background:#fff}
@media(max-width:760px){.try{padding-block:40px}.try-open{display:none}.try-start{padding:36px 16px}}
/* 10/28 만드는 과정 24초 영상 */
.process-film{margin-top:28px}
.process-film-v{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#2b211d;border:1px solid var(--line);border-radius:20px;box-shadow:0 16px 36px #945f3521}
.process-film figcaption{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}
@media(max-width:720px){.process-film{margin-top:20px}.process-film-v{border-radius:14px}.process-film figcaption{font-size:12px}}
.process-film figcaption .launch-note{margin:0 6px 0 0;vertical-align:middle}
