/* doc4 — 마케팅·로그인·안내 화면 공통 스타일.
   크림색 캔버스 + 진한 잉크 글자 + 채도 높은 기능 카드. 어두운 푸터는 쓰지 않는다.
   글자 자(2026-09-05): 본문 17 · 보조 15 · 잔글 14 · 최소 13 — KRDS(본문 16 이상, Pretendard 는 17 권장)·토스 TDS(본문 17·작은 본문 15·잔글 13). */
:root {
  color-scheme: light;
  --canvas: #fffaf0;
  --soft: #faf5e8;
  --card: #f5f0e0;
  --strong: #ebe6d6;
  --hair: #e5e5e5;
  --ink: #0a0a0a;
  --body-strong: #1a1a1a;
  --body: #3a3a3a;
  --muted: #6a6a6a;
  --muted-soft: #9a9a9a;
  --pink: #ff4d8b;
  --teal: #1a3a3a;
  --lav: #b8a4ed;
  --peach: #ffb084;
  --ochre: #e8b94a;
  --mint: #a4d4c5;
  --coral: #ff6b5a;
  --on-dark: #ffffff;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px;
  --section: 72px; /* 섹션 위아래 여백. 붙는 두 섹션 사이는 이 값의 2배(144px) */
  --page-w: 1120px; /* 상단바·본문·푸터·대시보드가 함께 쓰는 한 폭. app.css 와 같은 값 */
  --font: 'Pretendard Variable', Pretendard, Inter, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; scrollbar-width: thin; }
[hidden] { display: none !important; }
html { scrollbar-color: #d8d2c0 transparent; }

html, body { margin: 0; }
body.site {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 한글은 어절 단위로만 끊는다. 두 규칙이 한 짝이다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
p { margin: 0; }
button, input { font-family: inherit; }

.wrap { width: min(var(--page-w), 100% - 48px); margin: 0 auto; }
.wrap.narrow { width: min(760px, 100% - 48px); }

/* ── 글꼴 위계 (display 는 500, 절대 더 굵게 쓰지 않는다) ── */
.display-xl { font-size: clamp(40px, 6vw, 72px); font-weight: 500; line-height: 1.0; letter-spacing: -0.035em; }
.display-lg { font-size: clamp(32px, 4.5vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.display-md { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
.display-sm { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.title-lg { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.title-md { font-size: 19px; font-weight: 600; line-height: 1.4; }
.label {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.label.on-dark { color: rgba(255,255,255,.7); }
.lead { font-size: 19px; line-height: 1.65; color: var(--body); max-width: 34em; }
.lead b { color: var(--ink); font-weight: 600; }
.fine { font-size: 14px; color: var(--muted); line-height: 1.6; }
.fine a { color: var(--muted); }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-lg { height: 54px; padding: 0 26px; font-size: 17px; }
.btn-primary { background: var(--ink); color: var(--on-dark); }
.btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--hair); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-on-dark { background: var(--on-dark); color: var(--ink); }
.btn-google { background: #fff; color: var(--ink); border-color: var(--hair); width: 100%; height: 50px; font-size: 16px; }
.btn-google .g-mark { width: 18px; height: 18px; flex: none; }
.btn-google.is-disabled { color: var(--muted-soft); cursor: not-allowed; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── 상단 내비 ── */
.site-nav { height: 64px; background: var(--canvas); position: sticky; top: 0; z-index: 20; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.wm-img { display: block; height: 28px; width: auto; }
.wordmark.small .wm-img { height: 22px; }
.nav-menu { display: flex; gap: 26px; margin-left: 12px; }
.nav-menu a { font-size: 16px; font-weight: 500; color: var(--body); text-decoration: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-link { font-size: 16px; font-weight: 500; text-decoration: none; color: var(--ink); }

/* ── 히어로 ── */
.hero { padding: 72px 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); background: var(--card);
  font-size: 13px; font-weight: 600; letter-spacing: 1.2px; color: var(--body); margin-bottom: 22px;
}
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .fine { margin-top: 14px; }
.hero-visual { background: var(--soft); border-radius: var(--r-xl); padding: 20px; min-height: 360px; display: grid; place-items: center; }
.hero-art { width: 100%; height: auto; display: block; }

/* ── 띠(섹션) 리듬 ── */
.band { padding: var(--section) 0; }
.band .display-lg, .band .display-md { margin-bottom: 40px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--card); border-radius: var(--r-lg); padding: 28px; }
.step-no {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 18px;
}
.step h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.step p { color: var(--body); font-size: 16px; }

/* ── 기능 카드 (채도 높은 단색 카드 · 그림자 없음) ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcard { border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.fcard h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fcard p { font-size: 16px; line-height: 1.6; }
.fcard .frag { margin-top: auto; }
.fcard-pink { background: var(--pink); color: rgba(10,10,10,.82); } .fcard-pink h3 { color: var(--ink); }
.fcard-teal { background: var(--teal); color: rgba(255,255,255,.82); } .fcard-teal h3 { color: #fff; }
.fcard-lav { background: var(--lav); color: var(--body-strong); }
.fcard-peach { background: var(--peach); color: var(--body-strong); }
.fcard-ochre { background: var(--ochre); color: var(--body-strong); }
.fcard-cream { background: var(--card); color: var(--body); }
.fcard-lav h3, .fcard-peach h3, .fcard-ochre h3, .fcard-cream h3 { color: var(--ink); }

/* 카드 안 제품 조각 */
.frag { background: rgba(255,255,255,.92); color: var(--ink); border-radius: var(--r-lg); padding: 16px; font-size: 14px; margin-top: 14px; }
.fcard-teal .frag, .fcard-pink .frag { background: rgba(255,255,255,.96); }
.frag-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { padding: 4px 9px; border-radius: var(--r-pill); background: var(--card); font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.frag-arrow { width: 100%; text-align: center; color: var(--muted-soft); font-size: 14px; line-height: 1; }
.frag-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .1px; }
.frag-link i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); flex: none; }
.frag-stats { display: grid; gap: 8px; }
.frag-row { display: grid; grid-template-columns: 32px 1fr 56px; align-items: center; gap: 8px; font-size: 13px; }
.frag-row b { display: block; height: 10px; border-radius: 5px; background: var(--teal); }
.frag-row em { font-style: normal; color: var(--muted); text-align: right; }
.frag-chat { display: grid; gap: 8px; }
.fb { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; max-width: 90%; }
.fb.me { background: var(--ink); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.fb.bot { background: var(--card); border-bottom-left-radius: 4px; }
.fcite { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--hair); font-size: 12px; font-weight: 600; }
.frag-orient { display: flex; gap: 14px; align-items: flex-end; justify-content: center; padding: 10px 16px 14px; }
.fo { background: var(--card); border: 1px solid var(--hair); border-radius: 8px; padding: 8px; display: grid; gap: 5px; }
.fo.land { width: 128px; height: 74px; }
.fo.port { width: 62px; height: 88px; }
.fo i { display: block; height: 6px; border-radius: 3px; background: var(--strong); }
.fo i:first-child { background: var(--ink); width: 60%; }
.frag-team { display: grid; gap: 8px; }
.ftm { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.ftm small { margin-left: auto; color: var(--muted); font-weight: 500; }
.fav { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; }
.fav.a { background: var(--teal); } .fav.b { background: var(--pink); } .fav.c { background: #8b73d9; }
.fpol { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--hair); color: var(--muted); font-size: 13px; }
.frag-secure { display: grid; gap: 10px; }
.fsw { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.fsw i { width: 32px; height: 18px; border-radius: 9px; background: var(--strong); position: relative; }
.fsw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.fsw i.on { background: var(--ink); } .fsw i.on::after { left: 16px; }
.fsw i.off-locked { background: var(--strong); opacity: .6; }

/* ── 팀 띠 ── */
.team-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--teal); border-radius: var(--r-xl); padding: 64px; color: rgba(255,255,255,.82); }
.team-copy h2 { color: #fff; margin-bottom: 18px; }
.team-copy p { font-size: 17px; }
.check-list { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.check-list li { padding-left: 26px; position: relative; font-size: 16px; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); }
.team-mock { background: #fff; border-radius: var(--r-lg); padding: 20px; color: var(--ink); }
.tm-head { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 16px; }
.tm-head b { margin-left: 8px; font-weight: 600; }
.tm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--strong); }
.tm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.tm-tiles div { background: var(--card); border-radius: var(--r-md); padding: 10px 12px; }
.tm-tiles small { display: block; font-size: 12px; color: var(--muted); }
.tm-tiles b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.tm-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.tm-bars i { flex: 1; background: var(--teal); border-radius: 4px 4px 0 0; }

/* ── FAQ ── */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--card); border-radius: var(--r-lg); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-size: 18px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { padding: 0 0 22px; color: var(--body); font-size: 16px; line-height: 1.7; }

/* ── CTA 띠 ── */
.cta-band-wrap { padding-top: 0; }
.cta-band { background: var(--soft); border-radius: var(--r-xl); padding: 64px 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--muted); font-size: 18px; }
.cta-band .btn-row { margin-top: 0; }

/* ── 푸터 (크림색 · 어둡지 않다) ── */
.site-footer { background: var(--soft); padding: 80px 0 0; position: relative; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 14px; font-size: 15px; color: var(--muted); max-width: 26em; }
.foot-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.foot-col a { display: block; font-size: 15px; color: var(--body); text-decoration: none; margin-bottom: 10px; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding: 20px 0 30px; border-top: 1px solid var(--strong); font-size: 13.5px; color: var(--muted); }
.foot-hills { display: block; width: 100%; height: 90px; }

/* ── 로그인·초대·잠금 ── */
.auth { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 48px 24px; }
.gate-body .auth { min-height: 100vh; }
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--strong); border-radius: var(--r-xl); padding: 40px 36px; display: grid; gap: 16px; }
.auth-card h1 { margin-bottom: 0; }
.auth-sub { color: var(--muted); font-size: 16px; margin-top: -6px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted-soft); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.auth-form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.input-row { display: flex; gap: 8px; }
.input-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--hair); border-radius: var(--r-md);
  background: var(--canvas); color: var(--ink); font-size: 16px;
}
.input-row input:focus { outline: none; border-color: var(--ink); }
.notice { padding: 12px 14px; border-radius: var(--r-md); background: var(--card); font-size: 15px; color: var(--body); }
.notice.is-error { background: #fdecec; color: #9b1c1c; }
.sent-box h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.sent-box p { font-size: 16px; color: var(--body); }
.sent-box .fine { margin-top: 10px; }
.dev-form { padding-top: 12px; border-top: 1px dashed var(--hair); }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--strong); vertical-align: top; }
.legal-table th { font-weight: 600; color: var(--ink); }

/* ── 약관 ── */
.legal { padding: 64px 0 var(--section); }
.legal h1 { margin-bottom: 8px; }
.legal h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.75; color: var(--body); }
.legal ul { padding-left: 20px; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .team-band { grid-template-columns: 1fr; padding: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  :root { --section: 48px; }
  .nav-menu { display: none; }
  .hero { padding-top: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { min-height: 0; }
  .cards { grid-template-columns: 1fr; }
  .fcard { min-height: 0; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal { flex-direction: column; }
  .auth-card { padding: 32px 22px; }
  .tm-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── AI 읽기 띠 ── */
.ai-band { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
.ai-band .lead { margin-top: 18px; }
.ai-agents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ai-agents span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--card); font-size: 14px; font-weight: 600; color: var(--body); }
.ai-mock { background: #fff; border: 1px solid var(--strong); border-radius: var(--r-xl); padding: 18px 20px 20px; box-shadow: 0 24px 60px rgba(91,58,26,.10); display: grid; gap: 12px; }
.am-head { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--strong); font-size: 14px; color: var(--muted); }
.am-head b { margin-left: 8px; color: var(--ink); font-weight: 600; }
.am-msg { border-radius: 16px; padding: 12px 14px; font-size: 15px; line-height: 1.6; max-width: 92%; }
.am-msg.me { background: var(--ink); color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
.am-msg.bot { background: var(--card); color: var(--body); border-bottom-left-radius: 6px; }
.am-msg.bot p { margin: 6px 0 0; }
.am-msg.bot em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.am-read { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.am-read i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(255,77,139,.18); }
.am-input { border: 1px solid var(--hair); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--muted); }

/* ── 요금제 카드 ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { position: relative; background: #fff; border: 1px solid var(--strong); border-radius: var(--r-xl); padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 6px; }
.plan.is-hot { border-color: var(--ink); box-shadow: 0 24px 60px rgba(10,10,10,.08); }
.plan-flag { position: absolute; top: -13px; left: 28px; background: var(--pink); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); }
.plan-name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .2px; }
.plan-tag { font-size: 14.5px; color: var(--muted); }
.plan-price { margin: 14px 0 10px; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.plan-price span { font-size: 15px; color: var(--muted); }
.plan-year { font-size: 14px; color: var(--muted); margin: -4px 0 8px; }
.plan-year b { color: var(--ink); }
.plan-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.plan-feats li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--body); }
.plan-feats li::before { content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--mint); }
.plan-cta { margin-top: auto; }
.plan-cta .btn { width: 100%; }
.plans.compact .plan-feats li:nth-child(n+4) { display: none; }
.pricing-hero { padding-bottom: 48px; }

/* ── 비교표 ── */
.cmp-wrap { overflow: auto; background: #fff; border: 1px solid var(--strong); border-radius: var(--r-lg); }
.cmp { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--strong); vertical-align: middle; }
.cmp thead th { font-size: 15px; font-weight: 700; color: var(--ink); background: var(--soft); }
.cmp tbody th { font-weight: 500; color: var(--body); width: 42%; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-yes { color: var(--ink); font-weight: 600; }
.cmp-no { color: var(--muted-soft); }

@media (max-width: 1024px) {
  .ai-band { grid-template-columns: 1fr; gap: 32px; }
  .plans { grid-template-columns: 1fr; }
}

/* ═══ 도움말 (2026-09-06) ═══ */
.hhero { padding: 56px 0 36px; }
.hhero .lead { margin-top: 6px; }
.htabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.htab { padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: #fff; font-size: 15px; font-weight: 600; color: var(--body); text-decoration: none; }
.htab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hcard { display: flex; flex-direction: column; gap: 12px; padding: 34px; border-radius: var(--r-xl); background: var(--card); color: var(--body); text-decoration: none; min-height: 300px; transition: transform .15s; }
.hcard:hover { transform: translateY(-2px); }
.hcard.dark { background: var(--teal); color: rgba(255,255,255,.85); }
.hcard.dark h2, .hcard.dark .hcard-go { color: #fff; }
.hcard-k { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pink); }
.hcard h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.hcard p { font-size: 16px; line-height: 1.65; }
.hcard-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hcard-mini span { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; color: var(--ink); }
.hcard.dark .hcard-mini span { background: rgba(255,255,255,.14); color: #fff; }
.hcard-go { margin-top: auto; font-size: 16px; font-weight: 700; color: var(--ink); }
.hdemo { margin-top: 40px; padding: 28px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--strong); }
.hdemo > b { display: block; font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.hdemo > p { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.hdemo-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hdemo-item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--strong); text-decoration: none; color: var(--body); background: var(--canvas); }
.hdemo-item:hover { border-color: var(--ink); }
.hdemo-item img { width: 96px; aspect-ratio: 16/10; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--hair); flex: none; }
.hdemo-item span { display: grid; gap: 3px; min-width: 0; }
.hdemo-item b { font-size: 15.5px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdemo-item small { font-size: 13.5px; color: var(--muted); }
.hquick { margin-top: 40px; }
.hquick h3 { font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.hquick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.hquick-grid a { font-size: 16px; color: var(--body); text-decoration: none; padding: 10px 14px; border-radius: var(--r-md); background: var(--card); }
.hquick-grid a:hover { background: var(--strong); }
.hguide { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.htoc { position: sticky; top: 84px; display: grid; gap: 2px; font-size: 14.5px; }
.htoc b { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.htoc a { color: var(--body); text-decoration: none; padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
.htoc a:hover { background: var(--card); color: var(--ink); }
.hsteps { display: grid; gap: 40px; grid-column: 2; min-width: 0; }
.hsteps ~ .hdemo, .hsteps ~ .fine { grid-column: 2; }
.hanchor { display: block; position: relative; top: -84px; visibility: hidden; height: 0; }
.hstep { padding: 32px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--strong); scroll-margin-top: 90px; }
.hstep-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hno { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; flex: none; }
.hstep h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.012em; }
.hstep-body { font-size: 16.5px; line-height: 1.75; color: var(--body); }
.hstep-body p + p, .hstep-body ul { margin-top: 10px; }
.hstep-body ul { padding-left: 20px; display: grid; gap: 6px; }
.hstep-body b { color: var(--ink); font-weight: 600; }
.hstep-body kbd, .htable kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 6px; background: var(--canvas); font-family: inherit; font-size: 13.5px; color: var(--ink); }
.hnote { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--card); font-size: 15px; }
.hshots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.hshot { margin: 0; }
.hshot.wide { grid-column: 1 / -1; }
.hshot img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--strong); cursor: zoom-in; background: var(--card); min-height: 120px; }
.hshot figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.htable { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.htable td { padding: 9px 10px; border-bottom: 1px solid var(--strong); vertical-align: top; }
.htable td:first-child { white-space: nowrap; width: 46%; }
.hlb { position: fixed; inset: 0; background: rgba(10,10,10,.9); display: none; flex-direction: column; z-index: 90; }
.hlb.on { display: flex; }
.hlb-top { display: flex; align-items: center; gap: 14px; color: #fff; padding: 14px 20px; font-size: 15px; }
.hlb-top b { font-weight: 700; } .hlb-top .n { color: #aaa; margin-left: auto; font-variant-numeric: tabular-nums; }
.hlb button { border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; border-radius: 10px; font: inherit; }
.hlb .x { width: 38px; height: 38px; font-size: 22px; }
.hlb-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 60px 16px; position: relative; }
.hlb-body img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; }
.hlb .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 26px; }
.hlb .prev { left: 10px; } .hlb .next { right: 10px; }
.hlb-cap { color: #ddd; text-align: center; font-size: 15px; padding: 0 20px 18px; }
@media (max-width: 900px) {
  .hcards, .hdemo-list, .hquick-grid, .hshots { grid-template-columns: 1fr; }
  .hguide { grid-template-columns: 1fr; }
  .htoc { position: static; }
  .hsteps, .hsteps ~ .hdemo, .hsteps ~ .fine { grid-column: 1; }
  .hstep { padding: 22px 18px; }
}

/* ═══ 랜딩 — 받는 사람의 뷰어 띠 (HTML 로 그린 화면 조각) ═══ */
.viewer-band .display-lg { margin-bottom: 16px; }
.vb-lead { max-width: 40em; margin-bottom: 40px; }
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vcard { border-radius: var(--r-xl); background: #fff; border: 1px solid var(--strong); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.vcard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.vcard p { font-size: 15px; line-height: 1.6; color: var(--body); }
.vcard .vmock { margin-top: 12px; }
.vmock { position: relative; border-radius: 14px; background: var(--soft); border: 1px solid var(--strong); padding: 14px; min-height: 150px; overflow: hidden; font-size: 12.5px; color: var(--ink); }
.vm-page { background: #fff; border: 1px solid var(--hair); border-radius: 6px; padding: 10px; display: grid; gap: 6px; }
.vm-page i { display: block; height: 6px; border-radius: 3px; background: var(--strong); }
.vm-page i.t { height: 9px; width: 55%; background: var(--ink); }
.vm-page i.s { width: 80%; } .vm-page i.m { width: 92%; }
/* 이어서 읽기 */
.vm-scroll { display: grid; gap: 8px; max-height: 150px; }
.vm-scroll .vm-page { transform: translateY(-14px); }
.vm-scroll .vm-page:first-child { opacity: .6; }
.vm-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--soft)); }
.vm-toggle { position: absolute; right: 12px; top: 12px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); font-size: 11px; font-weight: 600; }
.vm-toggle span { padding: 3px 8px; border-radius: 6px; color: var(--muted); }
.vm-toggle span.on { background: var(--ink); color: #fff; }
/* 확대 + 글자 고르기 */
.vm-zoom .vm-page { transform: scale(1.35); transform-origin: 30% 30%; }
.vm-lens { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); font-size: 12px; font-weight: 600; }
.vm-sel { position: absolute; left: 34px; top: 58px; width: 55%; height: 12px; background: rgba(59,91,219,.28); border-radius: 3px; }
.vm-copy { position: absolute; left: 34px; top: 76px; padding: 4px 9px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }
/* 찾기 */
.vm-search { display: grid; gap: 8px; }
.vm-input { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--ink); font-weight: 600; }
.vm-input i { width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid var(--muted); }
.vm-hit { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); }
.vm-hit i { display: block; aspect-ratio: 16/10; border-radius: 4px; background: var(--strong); }
.vm-hit small { display: block; color: var(--muted); font-size: 11px; }
.vm-hit mark { background: rgba(255,198,40,.5); color: inherit; border-radius: 2px; padding: 0 2px; }
/* 끝 카드 */
.vm-end { display: grid; place-items: center; }
.vm-endcard { width: 82%; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 12px; text-align: center; display: grid; gap: 6px; box-shadow: 0 16px 40px -20px rgba(0,0,0,.35); }
.vm-endcard small { color: var(--pink); font-weight: 700; font-size: 11px; }
.vm-endcard b { font-size: 13px; }
.vm-endcard span { display: block; padding: 6px; border-radius: 7px; background: var(--card); font-size: 11.5px; font-weight: 600; }
.vm-endcard span.pri { background: var(--ink); color: #fff; }
/* 이어서 보기 · QR */
.vm-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--hair); white-space: nowrap; font-size: 12px; box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); }
.vm-toast b { padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11.5px; }
.vm-qr { position: absolute; right: 14px; top: 14px; width: 56px; height: 56px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px; }
.vm-qr i { background: var(--ink); border-radius: 1px; } .vm-qr i:nth-child(3n) { background: transparent; } .vm-qr i:nth-child(7n) { background: transparent; }
/* 물어보기 스트리밍 */
.vm-chat { display: grid; gap: 6px; }
.vm-b { padding: 7px 10px; border-radius: 10px; max-width: 88%; line-height: 1.45; }
.vm-b.me { background: var(--ink); color: #fff; justify-self: end; border-bottom-right-radius: 3px; }
.vm-b.bot { background: #fff; border: 1px solid var(--hair); border-bottom-left-radius: 3px; }
.vm-b .cursor { display: inline-block; width: 6px; height: 12px; background: var(--muted); vertical-align: -2px; margin-left: 2px; animation: vm-blink 1s infinite; }
@keyframes vm-blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.vm-cites { display: flex; gap: 4px; margin-top: 4px; }
.vm-cites span { padding: 2px 7px; border-radius: 99px; border: 1px solid var(--hair); font-size: 11px; font-weight: 600; }
.vm-tools { display: flex; gap: 6px; font-size: 11px; color: var(--muted); }
.vm-tools span.on { background: var(--ink); color: #fff; padding: 1px 7px; border-radius: 99px; }
/* 브랜딩 */
.vm-brand { background: #15161a; color: #eee; }
.vm-brand .vm-page { background: #fff; }
.vm-logo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.vm-logo i { width: 12px; height: 12px; border-radius: 3px; background: #3b5bdb; }
.vm-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 4px; border-radius: 2px; background: #333; }
.vm-bar i { display: block; width: 46%; height: 100%; border-radius: 2px; background: #3b5bdb; }
.vm-ask { position: absolute; right: 14px; bottom: 24px; padding: 5px 10px; border-radius: 99px; background: #3b5bdb; color: #fff; font-size: 11.5px; font-weight: 700; }
/* 연락하기 쪽 */
.vm-contact { display: grid; gap: 7px; }
.vm-field { height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; padding: 0 9px; color: var(--muted-soft); font-size: 11.5px; }
.vm-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--body); }
.vm-check i { width: 13px; height: 13px; border-radius: 3px; background: var(--ink); position: relative; }
.vm-check i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vm-check b { color: var(--pink); }
.vb-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vb-cta .fine { margin-left: 4px; }
@media (max-width: 1024px) { .vcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vcards { grid-template-columns: 1fr; } }

/* ═══ 랜딩 — 「최근에 더해졌어요」 띠 (보내는 사람 쪽 조각 6장) ═══ */
.wow-band .display-lg { margin-bottom: 16px; }
.wcard { scroll-margin-top: 84px; }
.wtag { display: inline-block; align-self: flex-start; padding: 3px 9px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .4px; margin-bottom: 2px; }
.wcard p b { color: var(--ink); font-weight: 600; }
/* 스캔 + OCR 글자 층 */
.vm-scan .vm-page.scan { background: #f3f1ea; border-color: #d9d5c8; transform: rotate(-.6deg); filter: contrast(.92); }
.vm-scan .vm-page.scan i { background: #b8b2a2; opacity: .8; }
.vm-scan .vm-page.scan i.t { background: #5a564c; }
.vm-scan .scan-sel { left: 26px; top: 46px; width: 62%; height: 11px; }
.vm-scan .scan-copy { left: 26px; top: 64px; }
.vm-ocr { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--hair); font-size: 11.5px; font-weight: 600; }
.vm-ocr i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
/* 문서 위 메모 */
.vm-notes .vm-page { width: 60%; }
.vn-area { position: absolute; border: 2px solid; border-radius: 4px; }
.vn-area b, .vn-pin b { position: absolute; left: -2px; top: -16px; padding: 1px 6px; border-radius: 4px 4px 4px 0; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.vn-area.a { left: 22px; top: 42px; width: 46%; height: 22px; border-color: var(--pink); background: rgba(255,77,139,.12); } .vn-area.a b { background: var(--pink); }
.vn-area.b { left: 22px; top: 82px; width: 46%; height: 30px; border-color: #3b5bdb; background: rgba(59,91,219,.12); } .vn-area.b b { background: #3b5bdb; }
.vn-pin { position: absolute; left: 44%; top: 112px; width: 12px; height: 12px; border-radius: 50%; background: var(--ochre); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ochre); }
.vn-pin b { left: 14px; top: -3px; background: var(--ochre); color: var(--ink); border-radius: 4px; }
.vn-list { position: absolute; right: 12px; top: 12px; bottom: 12px; width: 34%; background: #fff; border: 1px solid var(--hair); border-radius: 8px; padding: 8px; display: grid; gap: 5px; align-content: start; font-size: 10.5px; }
.vn-list small { color: var(--muted); font-size: 10px; font-weight: 600; }
.vn-list span { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-list i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .vn-list i.a { background: var(--pink); } .vn-list i.b { background: #3b5bdb; } .vn-list i.c { background: var(--ochre); }
/* 문서 버전 */
.vm-ver { display: grid; gap: 5px; align-content: start; }
.vv-row { display: grid; grid-template-columns: 1fr 44px 48px; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 7px; background: #fff; border: 1px solid var(--hair); font-size: 11.5px; }
.vv-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-row span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; color: var(--body); }
.vv-row.head { background: transparent; border: 0; padding: 0 8px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.vv-row.cur { border-color: var(--ink); }
.vv-row b { font-weight: 700; margin-right: 4px; }
.vv-row em { font-style: normal; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--card); font-size: 10px; font-weight: 600; white-space: nowrap; }
.vv-row em.hot { background: var(--pink); color: #fff; }
.vv-toast { margin-top: 2px; justify-self: center; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600; }
/* 연동 */
.vm-int { display: grid; gap: 8px; align-content: start; }
.vi-ev { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-ev i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; box-shadow: 0 0 0 3px rgba(255,77,139,.18); }
.vi-arrows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12%; }
.vi-arrows span { height: 14px; border-left: 1.5px dashed var(--muted-soft); justify-self: center; position: relative; }
.vi-arrows span::after { content: ''; position: absolute; left: -4px; bottom: -1px; width: 6px; height: 6px; border: solid var(--muted-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.vi-dst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vi-dst span { padding: 6px 4px; border-radius: 7px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.vi-dst .slack { background: #4a154b; } .vi-dst .notion { background: #191919; } .vi-dst .sheet { background: #188038; }
.vi-code { padding: 6px 9px; border-radius: 7px; background: #fff; border: 1px solid var(--hair); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 회사 도메인 */
.vd-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--hair); font-size: 12px; color: var(--body); }
.vd-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex: none; }
.vd-bar b { color: var(--ink); }
.vd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.vd-steps div { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #fff; border: 1px solid var(--hair); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.vd-steps i { width: 14px; height: 14px; border-radius: 50%; background: var(--success); color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; flex: none; }
/* 이메일 남기고 보기 */
.vm-gate { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; align-items: start; }
.vg-form { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 10px; display: grid; gap: 7px; }
.vg-form small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.vg-form b { padding: 6px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11px; text-align: center; }
.vg-list { display: grid; gap: 6px; }
.vg-list div { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; background: #fff; border: 1px solid var(--hair); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.vg-list em { font-style: normal; margin-left: auto; color: var(--muted); font-weight: 500; font-size: 10.5px; }
.vg-list .fav { width: 18px; height: 18px; font-size: 10px; }

/* ═══ 랜딩 — 기업 도입(제품소개서) 띠 ═══ */
.ent-band { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; background: var(--teal); color: rgba(255,255,255,.85); border-radius: var(--r-xl); padding: 64px; }
.ent-copy h2 { color: #fff; margin-bottom: 18px; }
.ent-copy p { font-size: 17px; }
.ent-copy p b { color: #fff; font-weight: 600; }
.ent-copy .check-list li::before { background: var(--mint); }
.ent-copy .btn-row { margin-top: 8px; }
.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-dark:hover { border-color: #fff; }
.fine.on-dark { color: rgba(255,255,255,.6); margin-top: 14px; }
.ent-visual { position: relative; display: grid; place-items: center; min-height: 320px; }
.ent-doc { position: relative; width: 78%; aspect-ratio: 16 / 9.4; }
.ent-doc > div { position: absolute; inset: 0; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); padding: 14px 16px; display: grid; gap: 7px; align-content: start; }
.ed-cover { transform: translate(-12%, 8%) rotate(-6deg); background: var(--canvas) !important; z-index: 3; }
.ed-cover span { font-size: 12px; font-weight: 700; color: var(--pink); letter-spacing: 1px; }
.ed-cover b { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-top: 18px; }
.ed-cover small { font-size: 11px; color: var(--muted); }
.ed-page:nth-child(2) { transform: translate(8%, -2%) rotate(3deg); z-index: 2; }
.ed-page:nth-child(3) { transform: translate(20%, -10%) rotate(9deg); z-index: 1; }
.ed-page i { display: block; height: 6px; border-radius: 3px; background: var(--strong); }
.ed-page i.t { height: 9px; width: 50%; background: var(--ink); } .ed-page i.m { width: 88%; }
.ed-shot { margin-top: 6px; height: 46%; border-radius: 6px; background: linear-gradient(135deg, var(--lav), var(--peach)); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.ed-grid i { height: 34px; border-radius: 6px; background: var(--card); }
.ent-dl { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.ent-dl i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
@media (max-width: 1024px) { .ent-band { grid-template-columns: 1fr; padding: 48px 32px; } .ent-visual { min-height: 260px; } }
@media (max-width: 640px) { .vv-row em { display: none; } .ent-band { padding: 36px 22px; } .vm-gate { grid-template-columns: 1fr; } .vn-list { display: none; } .vm-notes .vm-page { width: 100%; } }

/* ═══ 제품소개서 관문(/brochure) ═══ */
.bgate { padding: 56px 0 var(--section); }
.bgate-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: start; }
.bgate-copy h1 { margin: 10px 0 18px; }
.bgate-toc { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.bgate-toc li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--body); }
.bgate-toc b { font-size: 12px; font-weight: 700; letter-spacing: .8px; color: var(--pink); }
.bgate-doc { margin-top: 36px; width: 300px; aspect-ratio: 16 / 9; position: relative; }
.bgate-doc .ed-cover { position: absolute; inset: 0; border-radius: 12px; background: var(--canvas); border: 1px solid var(--strong); box-shadow: 0 24px 60px -30px rgba(0,0,0,.4); padding: 16px 18px; display: grid; gap: 7px; align-content: start; transform: rotate(-3deg); }
.bgate-form { background: #fff; border: 1px solid var(--strong); border-radius: var(--r-xl); padding: 32px; display: grid; gap: 14px; position: sticky; top: 84px; }
.bgate-form h2 { margin-bottom: -6px; }
.bg-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bg-field { display: grid; gap: 6px; }
.bg-field > span { font-size: 14px; font-weight: 600; color: var(--ink); }
.bg-field > span i { color: var(--pink); font-style: normal; }
.bg-field input, .bg-field textarea { width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; color: var(--ink); font-family: inherit; }
.bg-field textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.bg-field input:focus, .bg-field textarea:focus { outline: none; border-color: var(--ink); }
.bg-field input.is-bad, .bg-field textarea.is-bad { border-color: var(--error); }
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-chip { padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: #fff; color: var(--body); font-size: 14px; font-weight: 500; cursor: pointer; }
.bg-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bg-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bg-consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; text-align: left; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--soft); cursor: pointer; font: inherit; font-size: 14px; line-height: 1.55; color: var(--body); }
.bg-consent i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--muted-soft); background: #fff; position: relative; margin-top: 1px; }
.bg-consent.on i { background: var(--ink); border-color: var(--ink); }
.bg-consent.on i::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bg-consent.is-bad { border-color: var(--error); }
.bg-consent a { color: var(--ink); }
.bg-submit { width: 100%; margin-top: 2px; }
@media (max-width: 1024px) { .bgate-grid { grid-template-columns: 1fr; gap: 32px; } .bgate-form { position: static; } .bgate-doc { display: none; } }
@media (max-width: 640px) { .bg-row.two { grid-template-columns: 1fr; } .bgate-form { padding: 22px; } }

/* 문서 위에 붙이기(2026-09-16) — 넓은 첫 카드 */
.wcard-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.wcard-wide .vmock { margin-top: 0; min-height: 250px; }
.wcard-wide .wtag em { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.ww-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ww-kinds span { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--hair); background: #fff; font-size: 12px; font-weight: 600; color: var(--ink); }
.vm-attach .vm-page { width: 58%; }
.va-video { position: absolute; left: 14px; top: 14px; width: 42%; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(135deg, #1b2a52, #3b5bdb); box-shadow: 0 10px 24px -10px rgba(20,22,30,.5); display: grid; place-items: center; }
.va-video b { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); position: relative; }
.va-video b::after { content: ''; position: absolute; left: 13px; top: 9px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #1b2a52; }
.va-video small { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 10px; font-weight: 600; opacity: .85; }
.va-btn { position: absolute; left: 14px; bottom: 44px; padding: 7px 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(20,22,30,.6); }
.va-doc { position: absolute; right: 14px; top: 22px; width: 32%; border-radius: 10px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 10px 28px -12px rgba(20,22,30,.4); overflow: hidden; display: grid; grid-template-rows: 64px auto; }
.va-doc i { display: block; background: repeating-linear-gradient(135deg, #eef0f4 0 8px, #e4e7ee 8px 16px); }
.va-doc span { display: grid; gap: 2px; padding: 8px 10px; font-size: 10.5px; color: var(--muted); }
.va-doc span b { color: var(--ink); font-size: 11.5px; }
.va-hint { position: absolute; right: 14px; bottom: 14px; padding: 5px 9px; border-radius: 8px; background: rgba(59,91,219,.1); color: #2f4bc4; font-size: 10.5px; font-weight: 700; border: 1.5px dashed #3b5bdb; }
@media (max-width: 1024px) { .wcard-wide { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .va-doc { display: none; } .vm-attach .vm-page { width: 100%; } }

/* 자료실(2026-09-16) — 「문서 여러 개를 폴더로 묶어 링크 하나로」 카드 목업 */
.wtag em { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.vm-rooms { display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: #fff; border-radius: 12px; border: 1px solid var(--hair); box-shadow: 0 16px 40px -24px rgba(20,22,30,.35); }
.vmr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vmr-head b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.vmr-head span { font-size: 10.5px; color: var(--muted); }
.vmr-chips { display: flex; gap: 4px; }
.vmr-chips i { font-style: normal; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--hair); color: var(--body); }
.vmr-chips i.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vmr-sec { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.vmr-sec span { font-size: 9px; font-weight: 800; color: var(--pink); letter-spacing: .5px; }
.vmr-sec b { font-size: 12px; font-weight: 700; color: var(--ink); }
.vmr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vmr-grid i { display: block; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--card); position: relative; overflow: hidden; }
.vmr-grid i::before { content: ''; position: absolute; left: 22%; right: 22%; top: 12%; bottom: 12%; border-radius: 2px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.vmr-grid i::after { content: ''; position: absolute; left: 30%; right: 30%; top: 22%; height: 4px; border-radius: 2px; background: var(--strong); box-shadow: 0 8px 0 var(--strong), 0 16px 0 var(--strong); }

/* 히어로 「새 기능」 띠(2026-09-17) — 자료실 · 문서 위에 붙이기 */
.hero-new { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-new a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--hair); text-decoration: none; color: var(--body); font-size: 14px; transition: border-color .15s, transform .15s; }
.hero-new a:hover { border-color: var(--ink); transform: translateY(-1px); }
.hero-new em { font-style: normal; padding: 2px 6px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.hero-new b { color: var(--ink); font-weight: 700; }
.hero-new span { color: var(--muted); }
@media (max-width: 640px) { .hero-new span { display: none; } }

.hdemo-room { display: grid; place-items: center; width: 96px; height: 60px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; flex: none; }