@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--mint:#20b19a;--deep:#007964;--bg:#e9faf6;--text:#151b1a;--line:#d9e6e2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:'Noto Sans KR',sans-serif;color:var(--text);word-break:keep-all}.container{width:min(100% - 48px,1000px);margin:0 auto}.site-header{padding:36px 0 0}.brand{position:relative;width:66px;height:66px;padding:9px 4px;background:#16a68e;color:white;font-weight:900;font-size:23px;line-height:1.05;text-align:center;letter-spacing:-2px}.brand span{position:absolute;bottom:0;left:0;width:100%;height:7px;background:#ffb33b}.hero{text-align:center;padding:64px 0 28px}.eyebrow{display:inline-block;padding:8px 17px;border-radius:30px;background:#d2f3e9;color:#087d6c;font-size:15px;font-weight:800}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.33;letter-spacing:-2.5px;margin:22px 0 18px;font-weight:900}.hero h1 em{font-style:normal;color:var(--mint)}.hero>p{color:#4d5b57;font-size:18px;line-height:1.8;margin:0}.hero-visual{position:relative;height:240px;width:300px;margin:32px auto 0}.phone{position:absolute;left:91px;top:14px;width:128px;height:207px;border:8px solid #173e3a;border-radius:24px;background:#fff;box-shadow:0 15px 0 #c6e8dc,0 23px 30px #a7d8ca66;transform:rotate(-7deg)}.phone-top{width:40px;height:7px;background:#173e3a;border-radius:0 0 9px 9px;margin:-1px auto 27px}.qr{width:89px;height:89px;background:repeating-linear-gradient(90deg,#182d2a 0 5px,transparent 5px 10px),repeating-linear-gradient(0deg,#182d2a 0 4px,transparent 4px 11px);background-blend-mode:multiply;margin:auto;position:relative;border:6px solid white}.qr i{position:absolute;width:24px;height:24px;border:6px solid #173e3a;background:white}.qr i:nth-child(1){top:0;left:0}.qr i:nth-child(2){top:0;right:0}.qr i:nth-child(3){bottom:0;left:0}.qr b{position:absolute;bottom:9px;right:8px;width:15px;height:15px;background:white}.phone-label{font-size:12px;font-weight:900;color:var(--deep);margin-top:13px}.coin{position:absolute;top:98px;right:7px;width:76px;height:76px;border:7px solid #f6be3e;border-radius:50%;background:#ffdc6c;box-shadow:0 8px 0 #e3a92f;display:grid;place-items:center;color:#bd7a00;font-size:40px;font-weight:900;transform:rotate(14deg)}.sparkle{position:absolute;color:#ffbd43;font-size:40px}.s1{left:20px;top:55px}.s2{right:20px;top:24px;color:#7cbbeb}.steps{display:grid;gap:18px;padding:12px 0 80px}.card{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:32px 38px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px #1a8b7110}.card-icon{width:64px;height:64px;display:grid;place-items:center;background:#e2f7f0;color:#15a68f;font-size:25px;font-weight:900;border-radius:18px}.card h2{font-size:26px;letter-spacing:-1px;margin:5px 0 17px;font-weight:800}.card p,.card li{font-size:17px;line-height:1.8;color:#424b49}.card p{margin:8px 0}.card ul{margin:16px 0 0;padding-left:21px}.card li{padding-left:3px;margin:7px 0}.card strong{color:#098c76}.action{display:inline-flex;align-items:center;gap:18px;background:var(--mint);color:white;text-decoration:none;font-weight:800;font-size:17px;border-radius:10px;padding:13px 20px;margin:14px 0 8px;transition:background .2s,transform .2s}.action:hover,.action:focus-visible{background:var(--deep);transform:translateY(-2px)}.action span{font-size:21px}.card .note{font-size:14px;color:#7b8683;margin:8px 0 0}.callout{background:#f0faf6;border-left:4px solid var(--mint);border-radius:8px;padding:18px 20px;font-size:16px;line-height:1.85;margin-top:16px}.help{background:#20ae96;color:white;border-radius:50% 50% 0 0 / 70px 70px 0 0;padding:85px 0 70px;text-align:center}.help-symbol{font-size:37px;margin-bottom:8px}.help h2{font-size:34px;letter-spacing:-1px;margin:0 0 16px}.help p{font-size:17px;line-height:1.8;margin:0 0 26px}.phone-link{display:inline-flex;align-items:center;gap:20px;background:white;color:#06856e;text-decoration:none;font-size:32px;font-weight:900;padding:14px 34px;border-radius:12px}.phone-link span{font-size:21px}.help-caption{display:block;margin-top:12px;font-size:14px}footer{background:#007964;color:white;text-align:center;padding:24px;font-size:14px}@media(max-width:700px){.container{width:min(100% - 32px,540px)}.site-header{padding-top:20px}.brand{width:54px;height:54px;font-size:19px}.hero{padding-top:46px}.eyebrow{font-size:12px}.hero h1{font-size:clamp(29px,7vw,42px);letter-spacing:-1.8px;margin-top:18px}.hero>p{font-size:14px}.desktop-break{display:none}.hero-visual{transform:scale(.84);margin:12px auto -18px}.steps{gap:12px;padding-bottom:56px}.card{grid-template-columns:1fr;gap:9px;padding:24px 21px;border-radius:14px}.card-icon{width:46px;height:46px;border-radius:13px;font-size:18px}.card h2{font-size:21px;margin:0 0 12px}.card p,.card li{font-size:14px;line-height:1.75}.card ul{padding-left:18px}.card .note{font-size:12px}.action{font-size:14px;padding:12px 16px}.callout{font-size:14px;padding:14px}.help{border-radius:50% 50% 0 0 / 35px 35px 0 0;padding:65px 0 54px}.help h2{font-size:24px}.help p{font-size:14px}.phone-link{font-size:25px}footer{font-size:12px}}

/* 가맹점플러스 OS별 설치 버튼 */
.app-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px}
.app-actions .action{margin:0;justify-content:center}
@media(max-width:420px){.app-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.app-actions .action{font-size:13px;padding:12px 8px;gap:5px}.app-actions .action span{font-size:16px}}

/* */
:root{--mint:#218e7b;--deep:#176e5e;--bg:#fff;--text:#193c32;--line:#e1ebe5}
body{background:#fff;color:var(--text);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.container{width:min(100% - 48px,1080px)}
.site-header{padding:26px 0 24px}.brand-logo{width:150px;height:auto;display:block}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:385px;padding:60px 44px 48px;text-align:left;border-radius:28px;background:linear-gradient(115deg,#e4f5e9 0%,#eef9e8 63%,#fff6d7 100%)}
.hero::before{content:"";position:absolute;z-index:-1;width:490px;height:490px;border:55px solid #ffffff60;border-radius:50%;right:-150px;bottom:-300px}
.hero .eyebrow{padding:0;background:transparent;color:#39735e;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.eyebrow-dot{width:7px;height:7px;background:#dfac37;border-radius:50%}
.hero h1{font-size:clamp(30px,4vw,43px);line-height:1.38;letter-spacing:-1.7px;margin:16px 0 17px;max-width:650px}
.hero h1 em{color:#218e7b}.hero>p{font-size:15px;color:#57705f;max-width:560px}
.hero-visual{position:absolute;right:46px;top:76px;transform:scale(.86);transform-origin:top right;margin:0}
.section-heading{display:flex;align-items:center;gap:13px;margin:44px 0 17px}.section-heading-bar{height:38px;width:7px;border-radius:6px;background:#218e7b}.section-heading small{display:block;color:#70867a;font-size:11px;letter-spacing:1px;font-weight:800}.section-heading h2{font-size:23px;letter-spacing:-.8px;margin:1px 0 0}
.steps{gap:12px;padding:0 0 34px}.card{grid-template-columns:58px 1fr;gap:18px;padding:27px 30px;border-radius:18px;box-shadow:none}.card-icon{width:42px;height:42px;border-radius:12px;background:#e8f5ed;font-size:14px}.card h2{font-size:21px;margin:4px 0 11px}.card p,.card li{font-size:15px;line-height:1.8}.card .note{font-size:12px}.action{background:#218e7b;font-size:14px;padding:11px 17px;border-radius:10px}.callout{background:#f3f8f4;font-size:14px}
.help{width:min(100% - 48px,1080px);margin:0 auto 28px;border-radius:18px;background:#f5f8f5;color:#193c32;padding:27px 0;text-align:left}.help-inner{width:calc(100% - 56px);display:grid;grid-template-columns:34px 1fr auto;align-items:center;column-gap:13px}.help-symbol{grid-row:1/4;align-self:start;color:#218e7b;font-size:25px;margin:0}.help h2{font-size:17px;margin:0}.help p{font-size:12px;color:#64786e;margin:4px 0 0;grid-column:2}.phone-link{grid-column:3;grid-row:1/4;padding:0;background:transparent;color:#218e7b;font-size:27px}.phone-link span{font-size:16px}.help-caption{grid-column:3;grid-row:3;margin:0;text-align:right;font-size:11px;color:#64786e}
@media(max-width:800px){.hero{padding:40px 30px;min-height:360px}.hero h1{font-size:34px}.hero>p{max-width:420px}.hero-visual{right:5px;top:95px;transform:scale(.67)} }
@media(max-width:600px){.container{width:calc(100% - 24px)}.site-header{padding:16px 0}.brand-logo{width:119px}.hero{padding:29px 23px 20px;min-height:0;border-radius:21px}.hero h1{font-size:clamp(27px,7.5vw,34px);letter-spacing:-1.2px}.hero>p{font-size:13px;line-height:1.8}.hero-visual{position:relative;right:auto;top:auto;transform:scale(.68);transform-origin:center center;height:170px;margin:-8px auto -26px}.section-heading{margin:33px 0 14px}.section-heading h2{font-size:19px}.steps{gap:9px;padding-bottom:20px}.card{grid-template-columns:1fr;gap:9px;padding:20px 19px;border-radius:16px}.card-icon{width:34px;height:34px;font-size:12px}.card h2{font-size:18px;margin:0 0 8px}.card p,.card li{font-size:13px}.card .note{font-size:11px}.app-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.app-actions .action{min-width:0;gap:5px;padding:12px 8px;font-size:12px}.help{width:calc(100% - 24px);margin-bottom:12px;padding:20px 0}.help-inner{width:calc(100% - 36px);grid-template-columns:24px 1fr;gap:4px 9px}.help-symbol{grid-row:1/3;font-size:21px}.help h2{font-size:15px}.help p{font-size:11px;grid-column:2}.phone-link{grid-column:2;grid-row:3;margin-top:8px;font-size:25px}.help-caption{grid-column:2;grid-row:4;text-align:left}}
@media(max-width:350px){.hero{padding-left:18px;padding-right:18px}.hero h1{font-size:26px}.app-actions .action{font-size:11px}}

/* App Store / Google Play official-style badge images */
.app-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0 12px}
.app-actions .store-badge{display:block;width:190px;max-width:calc(50% - 6px);line-height:0;border-radius:9px;transition:transform .18s ease,opacity .18s ease}
.app-actions .store-badge:hover{transform:translateY(-2px);opacity:.9}
.app-actions .store-badge:focus-visible{outline:3px solid #218e7b;outline-offset:4px}
.app-actions .store-badge img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain}
@media(max-width:600px){.app-actions{display:flex;gap:8px}.app-actions .store-badge{width:calc(50% - 4px);max-width:190px}}

/* 최종 히어로 */
.hero-visual{position:absolute;right:36px;top:43px;width:315px;height:auto;margin:0;transform:none;pointer-events:none}
.hero-visual img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:800px) and (min-width:601px){.hero-visual{width:235px;right:5px;top:95px}.hero h1{max-width:calc(100% - 190px)}.hero>p{max-width:calc(100% - 190px)}}
@media(max-width:600px){.hero-visual{position:relative;right:auto;top:auto;width:min(76%,275px);height:auto;transform:none;margin:12px auto -5px}.hero h1,.hero>p{max-width:none}}


html,body{min-width:0;background:#fff}
body{font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.65;color:#193c32;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
.guide{box-sizing:border-box;max-width:1080px;width:100%;margin:0 auto;padding:26px 24px 20px}
.guide>.container{width:100%;max-width:none;margin:0}
.site-header{padding:0;margin:0 0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{width:150px;height:auto}
.hero{min-height:460px;padding:44px 44px 36px;border-radius:28px}
.hero-visual{width:300px;right:30px;top:65px}
.section-heading{margin:46px 0 18px}
.steps{gap:12px;padding:0 0 24px}
.card{padding:25px 28px;border-radius:18px}
.help{width:100%;margin:0;border-radius:18px;padding:24px 0}
.help-inner{max-width:none;width:calc(100% - 56px);margin:0 auto}
@media(max-width:800px){
 .hero{min-height:400px;padding:34px 30px}
 .hero-visual{width:245px;right:4px;top:85px}
}
@media(max-width:520px){
 .guide{padding:16px 12px 12px}
 .site-header{margin-bottom:17px}
 .brand-logo{width:119px}
 .hero{min-height:0;padding:26px 22px 18px;border-radius:21px}
 .hero h1{font-size:30px;line-height:1.4}
 .hero>p{font-size:13px}
 .hero-visual{position:relative;right:auto;top:auto;width:min(76%,245px);margin:12px auto -5px}
 .section-heading{margin:32px 0 15px}
 .steps{gap:9px;padding-bottom:18px}
 .card{padding:20px 19px;border-radius:16px}
 .help{padding:20px 0;border-radius:16px}
 .help-inner{width:calc(100% - 36px)}
}
@media(max-width:350px){
 .hero{padding-left:19px;padding-right:19px}
 .hero h1{font-size:27px}
}