/* VENUPOP 소개 사이트 — 프레임워크 없이 가볍게 (모바일 우선) */
:root { --ink:#0f172a; --sub:#475569; --mute:#94a3b8; --line:#e2e8f0; --bg:#f8fafc; --brand:#6d28d9; --brand2:#db2777; --soft:#f5f3ff; --ok:#16a34a; --r:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif; color:var(--ink); background:#fff; line-height:1.6; word-break:keep-all; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.3rem; border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; font-size:1rem; transition:transform .15s, box-shadow .15s, background .15s; font-family:inherit; }
.btn:active { transform:scale(.98); }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 8px 24px -8px rgba(109,40,217,.55); }
.btn-primary:hover { box-shadow:0 12px 28px -8px rgba(109,40,217,.7); }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:#c4b5fd; }
.btn[disabled] { opacity:.6; cursor:wait; }

/* 상단 */
.top { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid rgba(226,232,240,.7); }
.top .wrap { display:flex; align-items:center; gap:16px; height:64px; }
.logo { font-weight:900; font-size:1.25rem; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:.45rem; }
.logo-mark { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:grid; place-items:center; color:#fff; font-size:.9rem; }
.top nav { display:flex; gap:22px; margin-left:auto; font-size:.95rem; color:var(--sub); }
.top nav a { text-decoration:none; }
.top nav a:hover { color:var(--brand); }
.top .btn { padding:.55rem 1rem; font-size:.9rem; }
.menu-btn { display:none; margin-left:auto; background:none; border:0; font-size:1.3rem; padding:8px; cursor:pointer; color:var(--ink); }
@media (max-width:820px) {
  .top nav { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:8px 20px 16px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px -12px rgba(15,23,42,.2); }
  .top nav a { padding:12px 0; border-bottom:1px solid #f1f5f9; color:var(--ink); }
  .top.open nav { display:flex; }
  .menu-btn { display:block; }
  .top .login-btn { display:none; }
}

/* 히어로 */
.hero { position:relative; overflow:hidden; padding:72px 0 64px; background:radial-gradient(900px 420px at 85% -10%,#fce7f3 0,transparent 60%),radial-gradient(800px 420px at 0% 0%,#ede9fe 0,transparent 60%); }
.eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; color:var(--brand); background:#fff; border:1px solid #ddd6fe; padding:.3rem .8rem; border-radius:999px; }
.hero h1 { font-size:clamp(2rem,5.4vw,3.5rem); line-height:1.2; letter-spacing:-.035em; margin:18px 0 16px; font-weight:900; }
.grad { background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:clamp(1.02rem,2.2vw,1.2rem); color:var(--sub); max-width:640px; margin:0 0 28px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; font-size:.85rem; color:var(--sub); }
.hero-tags span { background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; } .hero { padding:48px 0 44px; } }

/* 미리보기 카드 (가짜 대시보드 — 그림 대신 CSS) */
.mock { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 60px -30px rgba(76,29,149,.35); padding:18px; }
.mock-head { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--mute); margin-bottom:12px; }
.mock-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpi { background:var(--bg); border-radius:12px; padding:10px; }
.kpi b { display:block; font-size:1.25rem; }
.kpi small { color:var(--mute); font-size:.72rem; }
.bars { display:flex; align-items:flex-end; gap:6px; height:84px; margin:14px 0 10px; }
.bars i { flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#a78bfa,#7c3aed); opacity:.85; }
.mock-row { display:flex; gap:8px; align-items:flex-start; font-size:.82rem; padding:8px 0; border-top:1px solid #f1f5f9; }
.tag { flex:none; font-size:.7rem; font-weight:700; border-radius:6px; padding:.1rem .45rem; }
.tag-bad { background:#fee2e2; color:#b91c1c; } .tag-good { background:#dcfce7; color:#15803d; } .tag-staff { background:#fef3c7; color:#92400e; }

/* 섹션 공통 */
section.sec { padding:84px 0; }
section.alt { background:var(--bg); }
.sec-head { text-align:center; max-width:720px; margin:0 auto 44px; }
.sec-head .k { color:var(--brand); font-weight:800; font-size:.9rem; letter-spacing:.04em; }
.sec-head h2 { font-size:clamp(1.6rem,3.6vw,2.3rem); letter-spacing:-.03em; margin:.3rem 0 .6rem; line-height:1.3; }
.sec-head p { color:var(--sub); margin:0; }
@media (max-width:640px) { section.sec { padding:60px 0; } }

/* 서비스 */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px) { .svc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .svc-grid { grid-template-columns:1fr; } }
.svc { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; position:relative; }
.svc.main { border-color:#c4b5fd; box-shadow:0 18px 40px -26px rgba(109,40,217,.5); }
.svc .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem; margin-bottom:12px; }
.svc h3 { margin:0 0 4px; font-size:1.1rem; }
.svc .dom { font-size:.78rem; color:var(--mute); }
.svc p { color:var(--sub); font-size:.93rem; margin:.6rem 0 0; }
.pill { position:absolute; top:16px; right:16px; font-size:.72rem; font-weight:800; padding:.18rem .55rem; border-radius:999px; }
.pill-on { background:#dcfce7; color:#15803d; } .pill-soon { background:#f1f5f9; color:#64748b; }

/* 기능 */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px) { .feat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .feat-grid { grid-template-columns:1fr; } }
.feat { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.feat i.fa-solid { color:var(--brand); font-size:1.2rem; }
.feat h3 { margin:.7rem 0 .3rem; font-size:1.05rem; }
.feat p { margin:0; color:var(--sub); font-size:.93rem; }

/* 시작 단계 */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:st; }
@media (max-width:800px) { .steps { grid-template-columns:1fr; } }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative; }
.step::before { counter-increment:st; content:counter(st); width:34px; height:34px; border-radius:50%; background:var(--soft); color:var(--brand); font-weight:900; display:grid; place-items:center; margin-bottom:12px; }
.step h3 { margin:0 0 .3rem; font-size:1.05rem; }
.step p { margin:0; color:var(--sub); font-size:.93rem; }

/* 요금 */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
@media (max-width:900px) { .price-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.plan { background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 24px; display:flex; flex-direction:column; position:relative; }
.plan.hot { border:2px solid var(--brand); box-shadow:0 24px 50px -28px rgba(109,40,217,.6); }
.plan .badge { position:absolute; top:-13px; left:24px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-size:.78rem; font-weight:800; padding:.25rem .75rem; border-radius:999px; }
.plan h3 { margin:0; font-size:1.2rem; }
.plan .tl { color:var(--sub); font-size:.9rem; min-height:2.8em; margin:.3rem 0 .8rem; }
.plan .pr { font-size:2.1rem; font-weight:900; letter-spacing:-.03em; }
.plan .pr small { font-size:.95rem; font-weight:600; color:var(--sub); }
.plan .vat { font-size:.78rem; color:var(--mute); margin-bottom:16px; }
.plan ul { list-style:none; padding:0; margin:0 0 22px; flex:1; }
.plan li { padding:.32rem 0 .32rem 1.6rem; position:relative; font-size:.95rem; }
.plan li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:.38rem; color:var(--ok); font-size:.85rem; }
.addon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
@media (max-width:900px) { .addon-grid { grid-template-columns:1fr; } }
.addon { border:1px dashed #cbd5e1; border-radius:16px; padding:18px; background:#fff; }
.addon h4 { margin:0; font-size:1rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.addon .soon { font-size:.7rem; font-weight:800; background:#f1f5f9; color:#64748b; padding:.1rem .5rem; border-radius:999px; }
.addon p { margin:.35rem 0 0; color:var(--sub); font-size:.88rem; }
.addon .ap { font-weight:800; color:var(--brand); font-size:.9rem; margin-top:.4rem; }
.note { text-align:center; color:var(--mute); font-size:.85rem; margin-top:22px; }

/* FAQ */
.faq { max-width:780px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 18px; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--brand); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0 0 16px; color:var(--sub); }

/* 가입 신청 */
.signup { display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start; }
@media (max-width:900px) { .signup { grid-template-columns:1fr; } }
.signup-side h2 { font-size:clamp(1.6rem,3.6vw,2.2rem); letter-spacing:-.03em; margin:.3rem 0 .8rem; line-height:1.3; }
.signup-side ul { padding:0; list-style:none; color:var(--sub); }
.signup-side li { padding:.35rem 0; }
.signup-side li i { color:var(--brand); width:1.4rem; }
form.card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:0 24px 50px -36px rgba(15,23,42,.35); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px) { .row2 { grid-template-columns:1fr; } form.card { padding:20px; } }
.fld { display:block; margin-bottom:14px; font-size:.92rem; font-weight:600; }
.fld .opt { color:var(--mute); font-weight:500; font-size:.8rem; }
.fld input, .fld select, .fld textarea { display:block; width:100%; margin-top:6px; border:1px solid #cbd5e1; border-radius:12px; padding:.75rem .85rem; font-size:1rem; font-family:inherit; color:var(--ink); background:#fff; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px #ede9fe; }
.fld .hint { display:block; font-weight:400; color:var(--mute); font-size:.78rem; margin-top:4px; }
.plan-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
@media (max-width:560px) { .plan-pick { grid-template-columns:1fr; } }
.plan-pick label { border:1px solid #cbd5e1; border-radius:12px; padding:.6rem .7rem; cursor:pointer; font-weight:600; font-size:.9rem; display:flex; gap:.5rem; align-items:flex-start; }
.plan-pick label small { display:block; color:var(--sub); font-weight:500; }
.plan-pick input { margin-top:.25rem; accent-color:var(--brand); }
.plan-pick label:has(input:checked) { border-color:var(--brand); background:var(--soft); }
.chk { display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; margin:10px 0; color:var(--sub); font-weight:500; }
.chk input { margin-top:.3rem; accent-color:var(--brand); width:1rem; height:1rem; flex:none; }
.chk a { color:var(--brand); }
.addon-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.addon-pick label { border:1px solid #cbd5e1; border-radius:999px; padding:.35rem .8rem; font-size:.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.addon-pick label:has(input:checked) { border-color:var(--brand); background:var(--soft); color:var(--brand); }
.addon-pick input { accent-color:var(--brand); }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.msg { margin-top:12px; font-size:.92rem; min-height:1.2em; }
.msg.err { color:#dc2626; } .msg.ok { color:var(--ok); }
.done { text-align:center; padding:30px 10px; }
.done i { font-size:2.6rem; color:var(--ok); }
.done h3 { margin:.8rem 0 .4rem; font-size:1.3rem; }
.done p { color:var(--sub); margin:0; }
.closed { background:#fffbeb; border:1px solid #fde68a; border-radius:16px; padding:22px; color:#92400e; }

/* 하단 */
footer { background:#0f172a; color:#cbd5e1; padding:44px 0 36px; font-size:.88rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
footer a { color:#e2e8f0; text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer .links { display:flex; flex-wrap:wrap; gap:16px; }
footer .copy { color:#64748b; width:100%; font-size:.8rem; }

/* 문서 페이지 (개인정보처리방침) */
.doc { max-width:780px; margin:0 auto; padding:48px 20px 72px; }
.doc h1 { font-size:1.8rem; letter-spacing:-.02em; }
.doc h2 { font-size:1.1rem; margin-top:2rem; }
.doc p, .doc li { color:var(--sub); }
.doc table { border-collapse:collapse; width:100%; font-size:.9rem; margin:.5rem 0; }
.doc th, .doc td { border:1px solid var(--line); padding:.55rem .7rem; text-align:left; vertical-align:top; }
.doc th { background:var(--bg); }
/* 메뉴 안 '사장님 로그인'은 모바일 메뉴에서만 (데스크톱은 오른쪽 버튼) */
.top nav a.login-mobile { display:none; }
@media (max-width:820px) { .top nav a.login-mobile { display:block; color:var(--brand); font-weight:700; } }