/* zittme 쇼핑몰 레이아웃. 공홈(official)과 같은 색 체계, 메뉴는 다섯 개 안쪽 */

:root {
    --zs-brand: #2677e3;
    --zs-brand-hover: #1c5fc0;
    --zs-brand-soft: rgba(38, 119, 227, 0.08);
    --zs-bg: #ffffff;
    --zs-surface: #f7f9fc;
    --zs-text: #222831;
    --zs-text-sub: #6b7280;
    --zs-border: #e5e9f0;
    --zs-ok: #15803d;
    --zs-ok-soft: rgba(22, 163, 74, 0.12);
    --zs-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --zs-w: 1120px;
}
[data-theme="dark"] {
    --zs-brand-soft: rgba(38, 119, 227, 0.16);
    --zs-bg: #14161a;
    --zs-surface: #1c1f26;
    --zs-text: #e4e7ec;
    --zs-text-sub: #9aa1ad;
    --zs-border: #2b3038;
    --zs-ok: #4ade80;
    --zs-ok-soft: rgba(74, 222, 128, 0.14);
}

body { margin: 0; background: var(--zs-bg); }
.zs { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--zs-font); color: var(--zs-text); word-break: keep-all; overflow-wrap: break-word; overflow-x: clip; }
.zs a { color: inherit; text-decoration: none; }
.zs-inner { width: 100%; max-width: var(--zs-w); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 720px) { .zs-inner { padding: 0 18px; } }

/* 공개 전 */
.zs-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px 20px; }
.zs-gate img { height: 28px; margin-bottom: 22px; }
.zs-gate h1 { margin: 0 0 8px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.zs-gate p { margin: 0 0 24px; color: var(--zs-text-sub); }
.zs-gate a { font-size: 14px; color: var(--zs-brand); }
.zs-preview { padding: 9px 16px; background: #fde68a; color: #7c5a00; font-size: 13px; font-weight: 700; text-align: center; }

/* 헤더 */
.zs-topline { background: #111827; color: #cbd5e1; font-size: 12.5px; }
.zs-topline-inner { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.zs-topline a { color: #cbd5e1; text-decoration: none; }
.zs-topline a:hover { color: #fff; }
.zs-topline-home { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff !important; }
.zs-topline-home::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--zs-brand); }
.zs-topline-links { display: flex; gap: 18px; }
@media (max-width: 720px) { .zs-topline-links a:nth-child(n+3) { display: none; } }
.zs-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--zs-bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--zs-border); }
.zs-header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.zs-logo { display: flex; align-items: center; gap: 8px; flex: none; }
.zs-logo img { height: 24px; }
.zs-logo span { padding: 2px 8px; border-radius: 6px; background: var(--zs-brand); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.zs-gnb { flex: 1 1 auto; min-width: 0; }
.zs-gnb ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.zs-gnb li a { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--zs-text-sub); }
.zs-gnb li a:hover { background: var(--zs-surface); color: var(--zs-text); }
.zs-gnb li.active a { color: var(--zs-brand); }
.zs-util { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.zs-util-link { padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--zs-text-sub); }
.zs-util-link:hover { color: var(--zs-text); }
.zs-burger { display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--zs-border); border-radius: 10px; background: var(--zs-bg); cursor: pointer; }
.zs-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--zs-text); }
.zs-mobile { border-top: 1px solid var(--zs-border); background: var(--zs-bg); }
.zs-mobile ul { margin: 0; padding: 8px 18px 14px; list-style: none; }
.zs-mobile li a { display: block; padding: 12px 4px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--zs-border); }
@media (max-width: 860px) {
    .zs-gnb, .zs-util-link { display: none; }
    .zs-burger { display: flex; }
    .zs-header-inner { gap: 12px; }
}

/* 단추 */
.zs-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 12px; font-size: 15.5px; font-weight: 700; }
.zs a.zs-btn { background: var(--zs-brand); color: #fff; }
.zs a.zs-btn:hover { background: var(--zs-brand-hover); color: #fff; }
.zs a.zs-btn.is-ghost { background: none; border: 1px solid var(--zs-border); color: var(--zs-text); }
.zs a.zs-btn.is-ghost:hover { border-color: var(--zs-brand); color: var(--zs-brand); }
.zs a.zs-btn.is-light { background: #fff; color: var(--zs-brand); }
.zs a.zs-btn.is-light:hover { background: #f3f4f6; color: var(--zs-brand); }
.zs a.zs-btn.zs-btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

/* 본문 공통 */
.zs-main { flex: 1 0 auto; }
.zs-hero { padding: 72px 0 40px; text-align: center; }
.zs-eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: var(--zs-brand-soft); color: var(--zs-brand); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.zs-hero h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 46px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
.zs-hero h1 b { color: var(--zs-brand); }
.zs-hero p { margin: 0 auto; max-width: 660px; font-size: clamp(15px, 2vw, 17.5px); line-height: 1.8; color: var(--zs-text-sub); }
.zs-hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

.zs-pagehead { padding: 56px 0 8px; }
.zs-pagehead h1 { margin: 0 0 12px; font-size: clamp(28px, 4.4vw, 40px); font-weight: 900; letter-spacing: -0.03em; }
.zs-pagehead p { margin: 0; max-width: 720px; font-size: 15.5px; line-height: 1.75; color: var(--zs-text-sub); }

.zs-why { max-width: 760px; margin: 0 auto; padding: 8px 0 56px; }
.zs-why-box { padding: 30px 32px; border-left: 4px solid var(--zs-brand); border-radius: 0 18px 18px 0; background: var(--zs-surface); }
.zs-why-box h2 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.zs-why-box p { margin: 0 0 10px; font-size: 15px; line-height: 1.8; color: var(--zs-text-sub); }
.zs-why-box p:last-child { margin-bottom: 0; }

.zs-sec { padding: 40px 0; }
.zs-sec.is-first { padding-top: 28px; }
.zs-sec h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: -0.03em; }
.zs-sec > .zs-inner > p.zs-lead { margin: 0 0 26px; max-width: 720px; font-size: 15.5px; line-height: 1.75; color: var(--zs-text-sub); }

.zs ul.zs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zs ul.zs-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.7; color: var(--zs-text-sub); }
.zs ul.zs-list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--zs-brand); }
.zs ul.zs-list li b { color: var(--zs-text); font-weight: 700; }
.zs ul.zs-list li a { color: var(--zs-brand); text-decoration: underline; }
.zs ol.zs-ol { margin: 0 0 14px; padding-left: 22px; font-size: 14.5px; line-height: 1.9; color: var(--zs-text-sub); }
.zs-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--zs-text-sub); }
.zs-note b { color: var(--zs-text); }

/* 요금 */
.zs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .zs-plans { grid-template-columns: 1fr; } }
.zs-plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border: 1px solid var(--zs-border); border-radius: 20px; background: var(--zs-bg); }
.zs-plan.is-pick { border-color: var(--zs-brand); box-shadow: 0 16px 40px -24px rgba(17,22,30,.3); }
.zs-plan-tag { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--zs-brand); color: #fff; font-size: 12px; font-weight: 800; }
.zs-plan-tag.is-dark { background: var(--zs-text); color: var(--zs-bg); }
.zs-plan h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--zs-text-sub); }
.zs-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 4px; }
.zs-price b { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; }
.zs-price span { font-size: 14px; color: var(--zs-text-sub); }
.zs-plan-build { margin: 0 0 16px; font-size: 13.5px; font-weight: 700; color: var(--zs-brand); }
.zs-plan-for { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--zs-text-sub); }
.zs-go { margin-top: auto; padding-top: 22px; }
.zs-go a { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px; border: 1px solid var(--zs-border); font-size: 14.5px; font-weight: 700; color: var(--zs-text); }
.zs-go a:hover { border-color: var(--zs-brand); color: var(--zs-brand); }
.zs-plan.is-pick .zs-go a, .zs-go a.is-primary { background: var(--zs-brand); border-color: var(--zs-brand); color: #fff; }
.zs-plan.is-pick .zs-go a:hover, .zs-go a.is-primary:hover { background: var(--zs-brand-hover); color: #fff; }
.zs-vat { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--zs-text-sub); }
.zs-ent { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 24px 28px; border: 1px dashed var(--zs-border); border-radius: 16px; background: var(--zs-surface); }
@media (max-width: 720px) { .zs-ent { flex-direction: column; align-items: stretch; } }
.zs-ent h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; }
.zs-ent p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--zs-text-sub); }
.zs-ent a { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--zs-border); font-size: 14.5px; font-weight: 700; }
.zs-ent a:hover { border-color: var(--zs-brand); color: var(--zs-brand); }

/* 카드 */
.zs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .zs-cols { grid-template-columns: 1fr; } }
.zs-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--zs-border); border-radius: 20px; background: var(--zs-bg); }
.zs-card h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.zs-card.is-we h3::before, .zs-card.is-you h3::before { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; vertical-align: 2px; }
.zs-card.is-we h3::before { content: 'zittme'; background: var(--zs-brand-soft); color: var(--zs-brand); }
.zs-card.is-you h3::before { content: '고객'; background: var(--zs-ok-soft); color: var(--zs-ok); }

.zs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 940px) { .zs-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .zs-grid4 { grid-template-columns: 1fr; } }
.zs-grid4 div { padding: 22px 20px; border: 1px solid var(--zs-border); border-radius: 16px; background: var(--zs-surface); }
.zs-grid4 b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 800; }
.zs-grid4 span { font-size: 13.5px; line-height: 1.65; color: var(--zs-text-sub); }

.zs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: zs; }
@media (max-width: 940px) { .zs-steps { grid-template-columns: 1fr; } }
.zs-steps div { padding: 22px 20px 20px; border: 1px solid var(--zs-border); border-radius: 16px; background: var(--zs-surface); counter-increment: zs; }
.zs-steps div::before { content: counter(zs, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--zs-brand); letter-spacing: .06em; }
.zs-steps b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 800; }
.zs-steps span { font-size: 13.5px; line-height: 1.65; color: var(--zs-text-sub); }

/* 사례 */
.zs-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .zs-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zs-cases { grid-template-columns: 1fr; } }
.zs-case { display: flex; flex-direction: column; border: 1px solid var(--zs-border); border-radius: 18px; overflow: hidden; background: var(--zs-bg); transition: transform .15s, box-shadow .15s; }
.zs-case:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(17,22,30,.35); }
.zs-case-img { display: block; aspect-ratio: 16 / 10; background: var(--zs-surface); }
.zs-case-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zs-case-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.zs-case-body em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--zs-brand); }
.zs-case-body b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.zs-case-body span { font-size: 13.5px; line-height: 1.6; color: var(--zs-text-sub); }
.zs-empty { padding: 40px 0; text-align: center; color: var(--zs-text-sub); }

/* FAQ */
.zs-faq { max-width: 860px; }
.zs-faq details { padding: 16px 0; border-top: 1px solid var(--zs-border); }
.zs-faq details:last-child { border-bottom: 1px solid var(--zs-border); }
.zs-faq summary { cursor: pointer; font-size: 15.5px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.zs-faq summary::-webkit-details-marker { display: none; }
.zs-faq summary::after { content: '+'; color: var(--zs-text-sub); font-weight: 400; }
.zs-faq details[open] summary::after { content: '\2212'; }
.zs-faq details p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--zs-text-sub); }

/* 마무리 띠 */
.zs-cta { margin: 40px 0 90px; padding: 44px 32px; border-radius: 24px; background: var(--zs-brand); color: #fff; text-align: center; }
.zs-cta h2 { margin: 0 0 10px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: -0.03em; }
.zs-cta p { margin: 0 auto 22px; max-width: 640px; font-size: 15px; line-height: 1.75; opacity: .92; }

/* 일반 본문 */
.zs-page-content { padding: 16px 0 80px; font-size: 15px; line-height: 1.8; }
.zs-page-content.is-plain { max-width: 860px; }
.zs-page-content h2 { font-size: 20px; margin: 32px 0 10px; }
.zs-page-content h3 { font-size: 16.5px; margin: 24px 0 8px; }
.zs-page-content p, .zs-page-content li { color: var(--zs-text-sub); }

/* 푸터 */
.zs-footer { border-top: 1px solid var(--zs-border); background: var(--zs-surface); }
.zs-footer-inner { padding: 40px 24px 36px; }
.zs-footer-brand { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.zs-footer-brand img { height: 20px; width: auto; align-self: flex-start; opacity: .8; }
.zs-footer-brand p { margin: 0; font-size: 13.5px; color: var(--zs-text-sub); }
.zs-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; }
.zs-footer-links a { color: var(--zs-text-sub); }
.zs-footer-links a:hover { color: var(--zs-text); }
.zs-footer-biz { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--zs-text-sub); }
.zs-copy { margin: 14px 0 0; font-size: 12.5px; color: var(--zs-text-sub); }

/* 사례 표기: 운영 중 / 데모 */
.zs-case-img { position: relative; }
.zs-case-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 22, 30, .72); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(4px); }
.zs-case-badge.is-live { background: var(--zs-brand); }
.zs-case.is-live { border-color: var(--zs-brand); }
.zs-case-body small { margin-top: 6px; font-size: 12.5px; color: var(--zs-text-sub); }
.zs-case.is-live .zs-case-body em { color: var(--zs-ok); }