/* 내 브랜드 예약앱 — 메인 랜딩 (전달서 v5, 2026-10-15)
   바탕은 기존 런칭랩 톤(흰 바탕 · 밝은 파랑 · Pretendard). 유튜브 썸네일 v5에서는 세 가지만 가져옵니다:
   '개발자 네오 · 예약 서비스 8년' 태그, 노랑 강조, '남은 1회' 장면. */
@font-face{font-family:'Pretendard';font-weight:45 920;font-style:normal;font-display:swap;
  src:url('/assets/fonts/PretendardVariable.woff2') format('woff2-variations'),url('/assets/fonts/PretendardVariable.woff2') format('woff2')}
:root{
  --blue:#3562E4; --blue-d:#2A4FC0; --blue-s:#EBF0FD;
  --ink:#0B1D3A; --ink-2:#5A657C; --ink-3:#8A93A6;
  --bg:#FFFFFF; --bg-2:#F4F7FC; --line:#E4E9F2; --yellow:#FFD640; --yellow-s:#FFF6D6;
  --red:#E5484D; --red-s:#FFECEE; --green:#12A06A; --shadow:0 6px 24px rgba(15,35,90,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-weight:500;line-height:1.65;word-break:keep-all;overflow-x:hidden;letter-spacing:-.015em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
em{font-style:normal}
b{font-weight:700}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.3}

/* 버튼 · 태그 */
.cbtn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;border-radius:14px;
  background:var(--blue);color:#fff;font-weight:800;font-size:17.5px;text-decoration:none;
  box-shadow:0 8px 20px rgba(53,98,228,.25);transition:transform .15s,background .15s}
.cbtn:after{content:"→";margin-left:8px}
.cbtn:hover{transform:translateY(-1px);background:var(--blue-d)}
.tbtn{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:10px;font-size:13.5px;font-weight:800;
  text-decoration:none;background:var(--blue);color:#fff}
.tag{display:inline-block;padding:4px 12px;border:1.5px solid currentColor;border-radius:99px;font-size:13px;font-weight:700}
.lab{display:block;color:var(--blue);font-size:14px;font-weight:800;margin-bottom:10px}
.sec{padding:76px 0}
.sec.alt{background:var(--bg-2)}
.sec h2{font-size:clamp(26px,6.4vw,40px)}
.sec h2 em,.neo em{background:linear-gradient(transparent 58%,var(--yellow) 58%)}
.sec .p{color:var(--ink-2);font-size:16.5px;margin-top:14px;max-width:640px}

/* 머리 */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;justify-content:space-between;height:60px}
.top .logo img{width:132px}

/* 히어로 (파랑 바탕 · 노랑 강조) */
.hero{position:relative;overflow:hidden;padding:40px 0 64px;background:var(--blue);color:#fff}
.hero .tag{color:#fff;border-color:rgba(255,255,255,.7)}
.hero-g{display:grid;gap:40px}
.hero h1{font-size:clamp(31px,8.6vw,50px);margin-top:18px}
.hero h1 em{color:var(--yellow)}
.hero .sub{color:rgba(255,255,255,.88);font-size:17px;margin-top:16px;max-width:540px}
.hero .sub b{color:#fff}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.chips li{padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.14);font-size:14px}
.chips b{color:var(--yellow)}
.hero .cbtn{width:100%;background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px rgba(8,30,90,.25)}
.hero .cbtn:hover{background:#FFCC1A}
.hero .trust{color:rgba(255,255,255,.8);font-size:13.5px;margin-top:12px}

/* 화면 예시: 회원님 앱 + 관리자 (피터스 회원앱 tutee 톤: 흰 화면 · 회색 단계 · 파스텔 상태칩 · 둥근 8~12px)
   앱 안의 강조색(--acc)은 '운영하시는 곳의 색' 예시로 딥그린을 씁니다. */
.vis{--acc:#2F6B57;--acc-s:#E6F0EC;--g50:#F7F7FD;--g100:#EFEFF5;--g200:#E4E4EA;--g400:#AEAEB4;--g500:#8E8E93;--k:#09101D;
  position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.vis-in{display:flex;align-items:flex-start;gap:12px;zoom:.54}
@media(min-width:340px){.vis-in{zoom:.58}}
.hero-g > *{min-width:0}
@media(min-width:375px){.vis-in{zoom:.64}}
@media(min-width:400px){.vis-in{zoom:.68}}
.vis .col{display:flex;flex-direction:column;gap:12px;width:228px;flex:none}
.web{position:relative;border-radius:12px;background:#fff;color:var(--k);box-shadow:0 24px 48px rgba(5,20,70,.28);overflow:visible}
.wb{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--g100);border-radius:12px 12px 0 0;background:var(--g50)}
.wb i{width:7px;height:7px;border-radius:50%;background:var(--g200)}
.wb span{margin-left:8px;flex:1;font-size:10.5px;color:var(--g500);background:#fff;border-radius:6px;padding:2px 8px}
.wc{padding:12px 14px 14px}
.wl{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12px;letter-spacing:.1em}
.wl .lg,.ah .lg{width:22px;height:22px;border-radius:7px;background:var(--acc);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:0}
.wh{font-size:16px;font-weight:800;margin:8px 0 8px;letter-spacing:-.03em}
.wcl{display:flex;flex-wrap:wrap;gap:5px}
.wcl span{font-size:10.5px;font-weight:700;background:var(--acc-s);color:var(--acc);padding:3px 7px;border-radius:6px}
.wbtn{display:block;margin-top:10px;border-radius:8px;background:var(--acc);color:#fff;text-align:center;font-weight:700;font-size:12px;padding:8px 0}
.ann{position:absolute;z-index:3;font-style:normal;white-space:nowrap;font-size:12px;font-weight:800;color:#0B1D3A;background:#FFD640;border-radius:8px;padding:4px 9px;box-shadow:0 6px 14px rgba(5,20,70,.25)}
.ann:before{content:"";position:absolute;width:8px;height:8px;background:#FFD640;transform:rotate(45deg)}
.phone{position:relative}
.ann.a1{right:-14px;top:44px}.ann.a1:before{left:-3px;top:9px}
.ann.a2{right:-14px;top:122px}.ann.a2:before{left:-3px;top:9px}
.ann.a3{right:-14px;bottom:44px}.ann.a3:before{left:-3px;top:9px}
.ann.a-web{left:-10px;top:-12px}.ann.a-web:before{left:12px;bottom:-3px}
.ann.a-adm{left:-10px;top:-12px}.ann.a-adm:before{left:12px;bottom:-3px}
.vis svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st{flex:none;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.st.red{background:#FFE0DE;color:#E5372C}.st.gry{background:#ECECEC;color:#66666B}.st.org{background:#FFF1D6;color:#C77700}.st.blu{background:#E0EEFC;color:#2F6FD8}.st.grn{background:#E0F3DD;color:#2E9A3A}

.phone{width:262px;flex:none;border-radius:40px;padding:10px;background:#111827;box-shadow:0 30px 60px rgba(5,20,70,.35),inset 0 0 0 1.5px #39404D}
.scr{border-radius:31px;background:#fff;color:var(--k);padding:0 16px 10px;overflow:hidden;font-size:13px}
.sb{display:flex;justify-content:space-between;align-items:center;height:30px;font-size:12px}
.sb span{width:62px;height:18px;border-radius:10px;background:#111827;margin-right:84px}
.ah{display:flex;align-items:center;gap:8px;padding:6px 0 4px}
.ah .lg{width:28px;height:28px;border-radius:9px;font-size:14px}
.ah b{flex:1;letter-spacing:.1em;font-weight:800;font-size:14px}
.ah svg{color:var(--g500)}

.adm{position:relative;width:228px;flex:none;border-radius:16px;background:#fff;color:var(--k);padding:14px;box-shadow:0 24px 48px rgba(5,20,70,.28)}

.cap{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:99px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.92);font-size:12.5px}
.cap b{font-weight:800;color:#fff}
.cap .sw{display:inline-flex}
.cap .sw i{width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;margin-left:-4px}
.cap .sw i:first-child{margin-left:0;background:#2F6B57}.cap .sw i:nth-child(2){background:#E8826B}.cap .sw i:nth-child(3){background:#1B2A4A}


/* 앱 예시 — 피터스 앱 톤(평평한 흰 화면 · 큰 제목 + 숫자 · 왼쪽 색 막대 목록 · 선 아이콘 탭) */
.ttl{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px}
.ttl b{font-size:20px;font-weight:800;letter-spacing:-.03em}
.ttl svg{width:20px;height:20px;color:var(--k)}
.wk{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--g100)}
.wk span{width:30px;text-align:center;font-size:10.5px;color:var(--g500)}
.wk b{display:grid;place-items:center;width:28px;height:28px;margin:3px auto 0;border-radius:50%;font-size:13.5px;color:var(--k)}
.wk .sun,.wk .sun b{color:#E5372C}.wk .sat,.wk .sat b{color:#2F6FD8}
.wk .on{color:var(--acc);font-weight:700}.wk .on b{background:var(--acc);color:#fff}
.lst{padding:4px 0}
.it{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--g100)}
.it > i{width:3px;height:30px;border-radius:2px;flex:none;background:var(--acc)}
.it.c2 > i{background:#FFB87C}.it.c3 > i{background:#9B88DF}
.it div{flex:1;line-height:1.35}.it b{font-size:13.5px}.it small{display:block;font-size:11px;color:var(--g500)}
.rs{font-size:11.5px;font-weight:700;color:var(--g400)}
.rs.on{color:#fff;background:var(--acc);border-radius:6px;padding:3px 8px}
.rs.pick{color:var(--acc)}
.pass{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:11px 12px;border-radius:10px;background:var(--g50)}
.pass small{display:block;font-size:11px;color:var(--g500)}
.pass b{font-size:15px;font-weight:800}.pass b em{color:#E5372C;font-size:19px}
.pass > span{text-align:right;font-weight:800;color:#E5372C;font-size:15px;line-height:1.2}
.pass > span small{color:var(--g500);font-weight:500}
.scr .cta{display:block;margin-top:10px;height:42px;line-height:42px;border-radius:8px;background:var(--acc);color:#fff;text-align:center;font-weight:700;font-size:14px}
.tab{display:flex;justify-content:space-around;margin:12px -16px 0;padding:10px 8px 4px;border-top:1px solid var(--g100);color:var(--g400)}
.tab span{display:flex}.tab .on{color:var(--acc)}
.tab svg{width:20px;height:20px}

.adm-h{display:flex;justify-content:space-between;align-items:center}
.adm-h b{font-size:19px;font-weight:800;letter-spacing:-.03em}.adm-h b em{color:var(--acc);margin-left:3px}
.adm-h svg{color:var(--k)}
.tabs2{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12px;color:var(--g400)}
.tabs2 b{color:var(--k)}.tabs2 small{margin-left:auto;font-size:11px}
.m{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--g100)}
.m:last-of-type{border-bottom:0}
.m div{flex:1;line-height:1.3;min-width:0}
.m b{font-size:13.5px}.m small{display:block;font-size:10.5px;color:var(--g500);white-space:nowrap}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;color:#3A3A40;flex:none}
.av.a1{background:#FFD3DB}.av.a2{background:#FFEDCA}.av.a3{background:#E0E9FF}.av.a4{background:#C6F8D0}
.rem{flex:none;font-size:11.5px;font-weight:700;color:var(--g500)}
.rem.red{color:#E5372C}.rem.org{color:#C77700}

/* 이렇게 쓰입니다 (결정적 장면: 홈 화면의 브랜드 앱) */
.use{padding:56px 0;background:var(--bg-2)}
.use-g{display:grid;gap:28px;align-items:center}
.use .big{font-size:clamp(24px,6.4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.32}
.use .big em{background:linear-gradient(transparent 58%,var(--yellow) 58%)}
.use .s{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:520px}
.hs{justify-self:center;width:300px;border-radius:32px;padding:26px 22px;background:linear-gradient(160deg,#C9D6F7,#E9D9F2 55%,#FBE3D3);box-shadow:var(--shadow)}
.hs-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 10px}
.hs-g span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#3A3F55;font-weight:600}
.hs-g i{width:52px;height:52px;border-radius:14px;display:block;background:#fff;opacity:.75}
.hs-g .c1{background:#FFE3A3}.hs-g .c2{background:#BDE7D2}.hs-g .c3{background:#B9E4C4}.hs-g .c4{background:#fff}.hs-g .c5{background:#C9D6F7}.hs-g .c6{background:#F7C6D3}.hs-g .c7{background:#FFD8B8}
.hs-g .me i{opacity:1;background:#2F6B57;color:#fff;font-style:normal;font-weight:900;font-size:24px;display:grid;place-items:center;box-shadow:0 0 0 3px #FFD640,0 10px 20px rgba(47,107,87,.35)}
.hs-g .me{color:#0B1D3A;font-weight:800}

/* 네오 소개 */
.neo{padding:40px 0;border-bottom:1px solid var(--line)}
.neo .w{display:grid;gap:10px}
.neo .tag{color:var(--blue);justify-self:start}
.neo p.big{font-size:clamp(19px,4.8vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.45}
.neo p.s{color:var(--ink-2);font-size:15.5px}

/* 문제 장면 */
.scenes{display:grid;gap:14px;margin-top:30px}
.scene{border-radius:18px;background:#fff;border:1px solid var(--line);padding:20px;box-shadow:var(--shadow)}
.scene .mock{border-radius:12px;background:var(--bg-2);padding:12px;margin-bottom:16px}
.scene{position:relative}
.scene .tg{display:inline-block;font-size:12px;font-weight:800;border-radius:6px;padding:2px 8px;margin-bottom:10px}
.tg.new{background:var(--blue-s);color:var(--blue)}.tg.re{background:var(--yellow-s);color:#A27400}
.scene h3{font-size:17px;line-height:1.45}
.mock .mt{font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
.chat{display:flex;flex-direction:column;gap:6px}
.chat .b{max-width:78%;font-size:13.5px;font-weight:600;padding:7px 11px;border-radius:14px}
.chat .r{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.chat .l{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.chat .q{background:#C9D2E3;color:var(--ink)}
.scene p{color:var(--ink-2);font-size:15px;margin-top:6px}
.bar2{display:flex;justify-content:space-between;align-items:center;border-radius:9px;padding:9px 12px;font-size:14px;font-weight:700;margin-top:6px;background:#fff;border:1px solid var(--line)}
.bar2:first-child{margin-top:0}
.bar2.gold{background:var(--yellow-s);border-color:#F2D36B}.bar2.gold b{color:var(--red)}
.bar2.red{background:var(--red-s);border-color:#F7C9CD}.bar2.red b{color:var(--red)}
.bar2 b.g{color:var(--blue)}.bar2 b.ok{color:var(--green)}.bar2 b.mut{color:var(--ink-3)}

/* 왜 지금 */
.why .stats{display:grid;gap:12px;margin-top:26px}
.stat{border-radius:16px;background:#fff;border:1px solid var(--line);padding:18px}
.stat b{display:block;font-size:30px;color:var(--blue);letter-spacing:-.03em;line-height:1.2}
.stat b small{font-size:15px;color:var(--ink);margin-left:4px}
.stat p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.why .src{color:var(--ink-3);font-size:12px;margin-top:14px}

/* 근거 */
.dg{display:grid;gap:14px;margin-top:26px}
.dc{border-radius:18px;background:#fff;border:1px solid var(--line);padding:22px;box-shadow:var(--shadow)}
.dq{font-size:15.5px;color:var(--ink-2)}.dq b{color:var(--ink)}
.vs{display:flex;gap:18px;align-items:flex-end;height:190px;margin-top:18px;padding:0 6px}
.vb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.vb b{font-size:34px;font-weight:900;letter-spacing:-.04em;color:var(--ink-3);line-height:1}
.vb b i{font-style:normal;font-size:.55em}
.vb .col{display:block;width:100%;max-width:120px;height:calc(var(--h) * 1.9);min-height:12px;border-radius:10px 10px 4px 4px;background:#C9D2E3}
.vb span{font-size:13px;text-align:center;color:var(--ink-2);line-height:1.4}
.vb.on b{color:var(--blue)}.vb.on .col{background:var(--blue)}
.dn{font-size:12px;color:var(--ink-3);margin-top:10px;text-align:center}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.big2 b{display:block;font-size:44px;font-weight:900;letter-spacing:-.04em;color:var(--blue);line-height:1}
.big2 b i{font-style:normal;font-size:.55em}
.big2 span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.stack{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:20px}
.stack i{width:var(--w);background:var(--blue)}.stack i:nth-child(2){background:#8FA9F0}.stack i:nth-child(3){background:#DCE3F2}
.sl{display:flex;font-size:11.5px;color:var(--ink-3);margin-top:6px}
.sl span:nth-child(1){width:61%}.sl span:nth-child(2){width:24%}
.mkt{display:grid;gap:10px;margin-top:14px}
.mkt div{display:flex;align-items:baseline;gap:12px;border-radius:14px;background:#fff;border:1px solid var(--line);padding:14px 18px}
.mkt b{font-size:20px;font-weight:900;color:var(--ink);white-space:nowrap}
.mkt span{font-size:14px;color:var(--ink-2)}
.data .src{color:var(--ink-3);font-size:12px;margin-top:12px}
.data .link{margin-top:26px;font-size:clamp(18px,4.6vw,23px);font-weight:700;letter-spacing:-.03em;line-height:1.5}
.data .link b{font-weight:800;background:linear-gradient(transparent 58%,var(--yellow) 58%)}

/* 만들어 드리는 것 */
.feat{display:grid;gap:12px;margin-top:26px}
.feat > div{border-radius:18px;background:#fff;border:1px solid var(--line);padding:20px;box-shadow:var(--shadow)}
.feat .ft{font-weight:800;font-size:18px}
.feat ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.feat li{font-size:15px;color:var(--ink-2);padding-left:22px;position:relative}
.feat li:before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.switch{margin-top:18px;border-radius:20px;background:var(--blue-s);padding:22px}
.sw-t{font-weight:800;font-size:18px}
.sw-g{display:grid;gap:12px;margin-top:14px}
.sw-g > div{border-radius:14px;background:#fff;padding:16px}
.sw-h{font-weight:800;font-size:14.5px}.sw-h em{background:var(--yellow);padding:0 5px;border-radius:4px;margin-left:2px}
.pk{list-style:none;display:flex;gap:6px;margin-top:10px}
.pk li{font-size:14px;font-weight:800;background:var(--yellow);border-radius:8px;padding:5px 12px}
.sw-n{font-size:13.5px;color:var(--ink-2);margin-top:10px}
.msg{margin-top:10px;border-radius:14px;background:var(--bg-2);padding:12px;font-size:13.5px;display:flex;align-items:center;gap:10px}
.msg p{flex:1}.msg span{flex:none;background:#2F6B57;color:#fff;font-weight:700;font-size:12.5px;border-radius:8px;padding:6px 10px}
.rel{display:grid;gap:10px;margin-top:18px}
.rel div{border-radius:14px;border:1px solid var(--line);padding:16px;background:#fff}
.rel b{display:block;color:var(--blue);font-size:14px}
.rel span{font-size:15px;font-weight:600}
.more{margin-top:18px;border-radius:16px;border:1.5px dashed var(--line);padding:18px}
.more .t{font-weight:800;font-size:15.5px}
.more .t small{color:var(--ink-3);font-weight:600;margin-left:6px;font-size:13px}
.more ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.more li{padding:6px 11px;border-radius:9px;background:var(--bg-2);color:var(--ink-2);font-size:14px}

/* (v4) */
.gets{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.gets li{border-radius:14px;background:var(--blue-s);padding:14px;font-weight:800;font-size:15px}
.gets li small{display:block;color:var(--ink-2);font-weight:500;font-size:13px;margin-top:2px}
.gets li:last-child{grid-column:1/-1}
.pros{display:grid;gap:14px;margin-top:30px}
.pro{border-radius:18px;background:#fff;border:1px solid var(--line);padding:22px;box-shadow:var(--shadow)}
.pro .n{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;font-size:13px;padding:1px 8px;border-radius:6px}
.pro h3{font-size:21px;margin-top:8px}
.pro p{color:var(--ink-2);font-size:15px;margin-top:6px}
.pro p b{color:var(--ink)}
.menu{display:grid;gap:12px;margin-top:22px}
.menu > div{border-radius:16px;border:1px solid var(--line);padding:18px}
.menu .base{background:var(--blue-s);border-color:#C9D9FF}
.menu .more{border-style:dashed;background:#fff}
.menu p.t{font-weight:800;font-size:15.5px}
.menu p.t small{color:var(--ink-3);font-weight:600;margin-left:6px;font-size:13px}
.menu ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.menu li{padding:6px 11px;border-radius:9px;background:#fff;font-size:14px;font-weight:600}
.menu .more li{background:var(--bg-2);color:var(--ink-2);font-weight:500}
.slogan{padding:56px 0;text-align:center;background:var(--blue);color:#fff}
.slogan p{font-size:clamp(24px,6.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.35}
.slogan em{color:var(--yellow)}

/* 가격 · 비교 */
.ours{border-radius:20px;background:var(--blue);color:#fff;padding:24px;margin-top:26px}
.ours .on{font-weight:800;font-size:15px;opacity:.9}
.ours .pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:6px}
.ours .pr b{font-size:clamp(28px,7.6vw,40px);font-weight:900;letter-spacing:-.04em;color:var(--yellow)}
.ours .pr span{font-weight:700;font-size:15px}
.ours .inc{font-size:14px;font-weight:600;margin-top:8px;opacity:.88}
.pct{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.pct div{border-radius:16px;background:#fff;border:1px solid var(--line);padding:16px 8px;text-align:center;box-shadow:var(--shadow)}
.pct b{display:block;font-size:clamp(28px,8vw,44px);font-weight:900;color:var(--blue);letter-spacing:-.04em;line-height:1.1}
.pct b i{font-style:normal;font-size:.6em;margin-left:1px}
.pct b.t{font-size:clamp(20px,5.4vw,30px);padding:6px 0 4px}
.pct span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:6px;line-height:1.45}
.cmp{display:grid;gap:10px;margin-top:22px}
.cm{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border-radius:14px;background:#fff;border:1px solid var(--line);padding:16px 18px}
.cm .k{font-weight:700;font-size:15px}
.cm .k small{display:block;color:var(--ink-3);font-weight:500;font-size:12.5px}
.cm .v{text-align:right;font-weight:800;font-size:17px;color:var(--red)}
.cm .v small{display:block;color:var(--ink-2);font-weight:600;font-size:12.5px}
.cm .v.na{color:var(--ink-2);font-size:15px}
.cm.us{background:var(--blue-s);border:1.5px solid var(--blue)}
.cm.us .v{color:var(--blue)}
.bars{display:grid;gap:12px;margin-top:22px}
.bar-g{border-radius:16px;background:#fff;border:1px solid var(--line);padding:18px}
.bar-t{font-weight:800;font-size:15px;margin-bottom:6px}
.bar{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.bar i{grid-column:1/-1;display:block;height:14px;border-radius:7px;background:#C9D2E3;width:var(--v);min-width:10px;order:2}
.bar b{color:var(--ink);font-size:15px}
.bar.us i{background:var(--blue)}
.bar.us b{color:var(--blue)}
.fine{color:var(--ink-3);font-size:12.5px;margin-top:16px;line-height:1.6}

/* 진행 · 출시 후 */
.steps{list-style:none;counter-reset:s;display:grid;gap:10px;margin-top:26px}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:2px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);padding:16px}
.steps li:before{content:counter(s);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;display:grid;place-items:center}
.steps b{font-size:16.5px}
.steps p{color:var(--ink-2);font-size:14.5px}
.after{display:grid;gap:10px;margin-top:16px}
.after div{border-radius:14px;background:var(--blue-s);padding:16px;font-size:15px}
.after b{display:block;font-size:16px}
.after span{color:var(--ink-2)}

/* FAQ */
.faq{margin-top:24px;display:grid;gap:10px}
.faq details{border-radius:14px;background:#fff;border:1px solid var(--line);padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--blue);font-weight:800}
.faq details[open] summary:after{content:"−"}
.faq p{color:var(--ink-2);font-size:15px;padding-bottom:16px}

/* 마지막 */
.final{padding:80px 0 90px;text-align:center;background:var(--blue);color:#fff}
.final .slo{color:var(--yellow);font-weight:800;font-size:16px}
.final h2{font-size:clamp(28px,7.6vw,46px);margin-top:12px}
.final h2 em{color:var(--yellow)}
.final .ask{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 26px}
.final .ask li{padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.14);font-size:14px}
.final .cbtn{width:100%;max-width:420px;background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px rgba(8,30,90,.25)}
.final .note{color:rgba(255,255,255,.82);font-size:14px;margin-top:14px}

.foot{padding:36px 0 110px;background:var(--bg-2);font-size:13px;color:var(--ink-3)}
.foot img{width:118px;margin-bottom:14px}
.foot p{margin-top:4px}.foot a{color:var(--ink-2)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.dock.show{transform:none}
.dock .cbtn{width:100%}

/* 넓은 화면 */
@media(min-width:520px){.vis-in{zoom:.9}}
@media(min-width:720px){
  .scenes{grid-template-columns:repeat(2,1fr)}
  .dg,.sw-g,.use-g{grid-template-columns:1fr 1fr}.feat,.rel{grid-template-columns:repeat(3,1fr)}.mkt{grid-template-columns:1fr 1fr}
  .gets{grid-template-columns:repeat(5,1fr)}.gets li:last-child{grid-column:auto}
  .menu{grid-template-columns:1.2fr 1fr}
  .cmp{grid-template-columns:repeat(2,1fr)}
  .bars{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(5,1fr)}.steps li{grid-template-columns:1fr}.steps li:before{grid-row:auto;margin-bottom:6px}
  .after{grid-template-columns:1fr 1fr}
  .hero .cbtn{width:auto}
}
@media(min-width:960px){
  .hero{padding:72px 0 96px}
  .hero-g{grid-template-columns:1.2fr 1fr;align-items:center;gap:32px}
  .vis-in{zoom:.94}
  .vis{align-items:flex-end}
  .sec{padding:100px 0}
  .neo .w{grid-template-columns:auto 1fr;align-items:center;gap:28px}
  .dock{display:none}.foot{padding-bottom:40px}
  .top .logo img{width:150px}
}