/* 진심모바일 키즈폰 랜딩 공통 (landing-page-design 스킬 규칙: 글꼴 하나·굵기 700까지·Tailwind 크기·간격 토큰·배경 그라데이션 없음) */
:root{
  --ink:#14263f; --ink2:#46586e; --ink3:#8193a6; --line:#dbe3ea;
  --paper:#ffffff; --mist:#f2f6f8; --navy:#14263f; --teal:#1f7a72;
  --orange:#ff6a1f; --yellow:#ffd23f; --kakao:#fee500;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;color:var(--ink);background:#e7edf0;word-break:keep-all;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;font-weight:700;letter-spacing:-.03em}
p,li,dd{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.page{max-width:520px;margin:0 auto;background:var(--paper);min-height:100vh;padding-bottom:120px;overflow:hidden}
.sec{padding:64px 24px}
.sec.mist{background:var(--mist)}
.sec.navy{background:var(--navy);color:#fff}
.sec.teal{background:var(--teal);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:700;color:var(--teal)}
.navy .eyebrow,.teal .eyebrow{color:var(--yellow)}
.h2{margin-top:12px;font-size:30px;line-height:36px}
.h2 em{font-style:normal;color:var(--orange)}
.navy .h2 em,.teal .h2 em{color:var(--yellow)}
.lead{margin-top:16px;font-size:16px;line-height:24px;color:var(--ink2)}
.navy .lead,.teal .lead{color:#c9d6e2}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:700}
/* 버튼 */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:8px 12px;border-radius:16px;font-size:16px;line-height:24px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn.kakao{background:var(--kakao);color:#191919}
.btn.kakao:hover{background:#f5dc00}
.btn.tel{background:var(--navy);color:#fff}
.btn.tel:hover{background:#1d3352}
.btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn i{font-size:20px}
.cta2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* 하단 고정 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.dock .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
.dock .btn{min-height:52px;border-radius:12px}
/* 카드 */
.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 0 rgba(20,38,63,.06),0 8px 24px rgba(20,38,63,.06)}
.mist .card{box-shadow:none}
/* 영수증 */
.rcpt{margin-top:24px;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(20,38,63,.08);overflow:hidden;color:var(--ink)}
.rcpt .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--orange);color:#fff;font-size:16px;line-height:24px;font-weight:700}
.rcpt .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px 24px;border-top:1px dashed var(--line)}
.rcpt .row:first-of-type{border-top:0}
.rcpt .l b{display:block;font-size:16px;line-height:24px}
.rcpt .l span{display:block;font-size:14px;line-height:20px;color:var(--ink3)}
.rcpt .r{text-align:right}
.rcpt .r s{display:block;font-size:14px;line-height:20px;color:var(--ink3)}
.rcpt .r b{font-size:18px;line-height:28px;color:var(--orange)}
.rcpt .tot{display:grid;grid-template-columns:1fr auto;align-items:center;padding:24px;background:var(--navy);color:#fff}
.rcpt .tot b{display:block;font-size:18px;line-height:28px}
.rcpt .tot span{display:block;font-size:14px;line-height:20px;color:#a9bacb}
.rcpt .tot .v{font-size:30px;line-height:36px;font-weight:700;color:var(--yellow)}
/* 시간 막대 */
.tl{margin-top:24px}
.tl .bar{display:grid;grid-template-columns:8fr 4fr 3fr;border-radius:12px;overflow:hidden;font-size:12px;line-height:16px;font-weight:700;color:#fff;text-align:center}
.tl .bar div{padding:12px 4px}
.tl .a{background:#95a4b3}.tl .b{background:var(--teal)}.tl .c{background:var(--navy)}
.tl .sc{display:grid;grid-template-columns:8fr 4fr 3fr;margin-top:8px;font-size:12px;line-height:16px;color:var(--ink3)}
.tl .sc div{padding-left:4px;box-shadow:inset 2px 0 0 #c3cdd6}
/* 체크 목록 */
.checks{margin-top:24px;display:grid;gap:12px}
.check{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.check .ic{width:40px;height:40px;border-radius:12px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.check b{display:block;font-size:18px;line-height:28px}
.check span{display:block;font-size:14px;line-height:20px;color:var(--ink2)}
.navy .check span,.teal .check span{color:#c9d6e2}
/* 단계 */
.steps{margin-top:24px;display:grid;gap:12px}
.step{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.step .n{width:48px;height:48px;border-radius:9999px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:28px;font-weight:700}
.step b{display:block;font-size:16px;line-height:24px}
.step span{display:block;font-size:14px;line-height:20px;color:var(--ink2)}
/* 조건표 */
.terms{margin-top:24px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.terms div{display:grid;grid-template-columns:96px 1fr;border-top:1px solid var(--line)}
.terms div:first-child{border-top:0}
.terms dt{padding:12px 16px;background:var(--mist);font-size:14px;line-height:20px;font-weight:700}
.terms dd{padding:12px 16px;font-size:14px;line-height:20px;color:var(--ink2)}
/* FAQ */
.faq{margin-top:24px;display:grid;gap:8px}
.faq details{background:#fff;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:16px;line-height:24px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;font-size:20px;color:var(--ink3);transition:transform .5s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink2)}
.faq summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:8px}
/* 태그라인(단어별로 켜짐) */
.tag-reveal{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.035em;max-width:680px;text-wrap:balance}
.tag-reveal .w{color:rgba(20,38,63,.28);transition:color .6s var(--ease)}
.navy .tag-reveal .w,.teal .tag-reveal .w{color:rgba(255,255,255,.28)}
.tag-reveal .w.on{color:var(--ink)}
.navy .tag-reveal .w.on,.teal .tag-reveal .w.on{color:#fff}
.tag-reveal .w.hl.on{color:var(--orange)}
.navy .tag-reveal .w.hl.on,.teal .tag-reveal .w.hl.on{color:var(--yellow)}
/* 작은 글씨 */
.fine{margin-top:24px;display:grid;gap:4px;font-size:12px;line-height:16px;color:var(--ink3);list-style:none}
footer{background:var(--navy);color:#a9bacb;padding:32px 24px 40px;font-size:14px;line-height:20px}
footer b{display:block;color:#fff;font-size:20px;line-height:28px;margin-bottom:8px}
/* 등장 */
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transform:none;transition:opacity .3s}.btn,.faq summary i{transition:none}}
/* 안내 창 */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet .box{width:100%;max-width:520px;background:#fff;border-radius:24px 24px 0 0;padding:32px 24px calc(24px + env(safe-area-inset-bottom));text-align:center}
.sheet .box b{display:block;font-size:20px;line-height:28px}
.sheet .box p{margin-top:8px;font-size:16px;line-height:24px;color:var(--ink2)}
.sheet .box .btn{margin-top:24px;width:100%}
/* 신뢰 구역(매장 사진·사전승낙·지도) 2026-11-03 */
.trust-sec{background:#fff;color:var(--ink)}
.trust-sec .eyebrow{color:var(--teal)}
.trust-sec .h2 em{color:var(--orange)}
.tgrid{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tgrid>div{background:var(--mist);border-radius:16px;padding:16px}
.tgrid i{font-size:24px;color:var(--teal)}
.tgrid b{display:block;margin-top:8px;font-size:16px;line-height:24px}
.tgrid span{display:block;margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2)}
.tphotos{margin-top:24px;display:grid;gap:8px}
.tphotos figure{margin:0;border-radius:16px;overflow:hidden;position:relative}
.tphotos img{width:100%;height:auto}
.tphotos figcaption{position:absolute;left:12px;bottom:12px;background:rgba(20,38,63,.8);color:#fff;font-size:12px;line-height:16px;font-weight:700;padding:4px 8px;border-radius:8px}
.taddr{margin-top:16px;display:grid;gap:12px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.taddr b{display:block;font-size:16px;line-height:24px}
.taddr span{display:block;margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2)}
.tbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbtns .btn{min-height:48px}
/* 추가 선물·선착순(손실 회피) 2026-11-03 */
.gift-sec{background:#fff7e8;color:var(--ink)}
.gift-sec .eyebrow{color:var(--orange)}
.gift-sec .h2 em{color:var(--orange)}
.gift-sec .lead{color:var(--ink2)}
.glist{margin-top:24px;display:grid;gap:8px}
.glist>div{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto auto;column-gap:16px;align-items:center;background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 0 rgba(20,38,63,.06)}
.glist .gno{grid-column:2;font-size:12px;line-height:16px;font-weight:700;color:var(--orange)}
.glist i{grid-row:1/4;grid-column:1;width:48px;height:48px;border-radius:12px;background:#fff1e6;color:var(--orange);font-size:24px;display:flex;align-items:center;justify-content:center}
.glist b{grid-column:2;font-size:18px;line-height:28px}
.glist>div>span:last-child{grid-column:2;font-size:14px;line-height:20px;color:var(--ink2)}
.first{margin-top:24px;border-radius:16px;background:var(--navy);color:#fff;padding:24px;position:relative;overflow:hidden}
.fhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fhead .badge{background:#e8352b;color:#fff;font-size:14px;line-height:20px;font-weight:700;padding:4px 12px;border-radius:9999px}
.fhead b{font-size:20px;line-height:28px}
.fpick{margin-top:16px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;text-align:center}
.fpick>div:not(.or){background:rgba(255,255,255,.1);border-radius:12px;padding:16px 8px}
.fpick i{font-size:30px;color:var(--yellow)}
.fpick b{display:block;margin-top:8px;font-size:16px;line-height:24px}
.fpick span{display:block;font-size:12px;line-height:16px;color:#a9bacb}
.fpick .or{font-size:12px;line-height:16px;font-weight:700;color:#a9bacb}
.fnote{margin-top:16px;display:flex;gap:8px;font-size:14px;line-height:20px;color:#dbe4ec}
.fnote i{flex:none;font-size:20px;color:var(--yellow)}
.fnote b{color:var(--yellow)}
.dock-note{max-width:520px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;line-height:16px;font-weight:700;color:#e8352b}
.dock-note i{font-size:16px}