/* creator-os.app 랜딩 — 이 사이트에만 있는 레이아웃 (브랜드 v2, 2026-09-13).
   토큰·컴포넌트 SSOT: design-tokens.creator-os.app/tokens.css + components.css (v2.0.3).
   규칙: hex 없음 · 강제 지정(느낌표) 없음 · 그림자는 모달만 · 리프트 없음 · 장식은 ✦ 하나.
   옛 editorial.css(강제 지정 666회)·styles.css(다크 글래스)·vendor 2개를 접은 결과다 —
   여기 남은 건 섹션 리듬·격자·목업처럼 이 사이트 고유의 배치뿐이고, 색·서체·모서리·간격은
   전부 var(--…) 로 tokens.css 를 가리킨다. */
/* ── 1. 배치 바닥값 (옛 styles.css 에서 이 사이트 클래스만) ── */
.site-footer { flex-shrink: 0; }
.container { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--space-6); }
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); min-height: 64px; }
.nav-main { display: flex; align-items: center; gap: var(--space-6); }
.nav-main a { color: var(--text-secondary); font-size: var(--text-sm); }
.nav-main a:hover { color: var(--text-primary); }
.nav-main .cta-link { background: var(--color-accent); color: white; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); }
.nav-main .cta-link:hover { background: var(--accent-hover); color: white; }
.hero { padding: var(--space-20) 0 var(--space-16); position: relative; text-align: center; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.hero::after { content: ""; position: absolute; top: 10%; left: -10%; width: 60%; height: 50%; pointer-events: none; z-index: -2; filter: blur(20px); }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 2.5vw, var(--space-8)); position: relative; z-index: 1; }
.hero-title { font-size: clamp(var(--text-2xl), 6vw, var(--text-display)); line-height: var(--leading-display); font-weight: var(--font-weight-bold); margin: 0; }
.hero-title.hero-equation { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--text-primary); font-size: var(--text-display); font-weight: var(--font-weight-bold); line-height: var(--leading-none); letter-spacing: var(--tracking-display); }
.hero-label { flex: 0 0 100%; text-align: center; letter-spacing: 0; }
.hero-equation--v2 .hero-label { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-tight); word-break: keep-all; padding: 0 var(--space-2); }
.hero-title.hero-equation--v3 { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--space-5); font-weight: var(--font-weight-bold); line-height: var(--leading-none); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0; position: relative; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--text-primary); }
.hero-sub { font-size: var(--text-md); color: var(--text-secondary); max-width: 640px; margin: 0; }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-4); }
.hero-note { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-2); }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-8); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--text-base); border: 1px solid transparent; cursor: pointer; transition: all var(--duration-normal); text-decoration: none; }
.btn-primary.block, .btn-secondary.block { width: 100%; margin-top: var(--space-6); }
.depth-tiers { padding: var(--space-16) 0 var(--space-12); }
.section-sub { text-align: center; color: var(--text-secondary); font-size: var(--text-md); margin: calc(var(--space-12) * -1 + var(--space-2)) 0 var(--space-12); max-width: 640px; margin-left: auto; margin-right: auto; }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tier-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--duration-normal),
              background var(--duration-normal),
              box-shadow var(--duration-normal),
              transform var(--duration-normal) var(--ease-spring); }
.tier-card:hover { transform: translateY(var(--hover-lift)); }
.tier-num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); background: var(--gradient-accent); letter-spacing: var(--tracking-display); line-height: var(--leading-none); }
.tier-text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
@media (max-width: 1024px) {
  .tier-list { grid-template-columns: 1fr 1fr; }
  .tier-card:nth-child(3) { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .tier-list { grid-template-columns: 1fr; gap: var(--space-2); }
  .tier-card:nth-child(3) { grid-column: auto; max-width: none; }
  .tier-card { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .tier-num { font-size: var(--text-md); flex: 0 0 auto; min-width: 1.6em; }
}
.section-title { font-size: var(--text-2xl); text-align: center; margin: 0 0 var(--space-12); font-weight: var(--font-weight-bold); }
.pricing { padding: var(--space-16) 0 var(--space-12); }
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote,
.section-title, .section-sub { word-break: keep-all; overflow-wrap: break-word; }
.floating-cta { position: fixed; bottom: var(--space-7); right: var(--space-7); z-index: var(--z-panel); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-accent); color: var(--on-accent); font-weight: var(--font-weight-bold); font-size: var(--text-base); letter-spacing: var(--tracking-wide); border-radius: var(--radius-full); text-decoration: none; border: 0; opacity: 0; transform: translateY(24px) scale(0.96); pointer-events: none; transition: opacity 0.4s var(--ease-spring),
              transform 0.4s var(--ease-spring),
              box-shadow var(--duration-fast); }
.floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.floating-cta:hover { color: var(--on-accent); }
.floating-cta-arrow { display: inline-block; font-weight: var(--font-weight-bold); transition: transform var(--duration-fast); }
.floating-cta:hover .floating-cta-arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .floating-cta { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: opacity 0.2s linear; transform: none; }
  .floating-cta.visible { transform: none; }
  .floating-cta:hover { transform: none; }
}
.pricing-prereq { max-width: 720px; margin: 0 auto var(--space-6); background: var(--accent-bg); border: 1px solid var(--danger-line); border-left: 2px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.pricing-prereq-label { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--accent-text); }
.pricing-prereq-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-prereq-list li { font-size: var(--text-sm); color: var(--text-secondary); padding-left: var(--space-4); position: relative; line-height: var(--leading-normal); }
.pricing-prereq-list li::before { content: "·"; position: absolute; left: var(--space-2); color: var(--accent-text); font-weight: var(--font-weight-bold); }
.pricing-prereq-list strong { color: var(--text-primary); }
.pricing-prereq-foot { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-normal); padding-top: var(--space-3); border-top: 1px solid var(--danger-line); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.plan-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.plan-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); transition: border-color var(--duration-normal),
              background var(--duration-normal),
              box-shadow var(--duration-normal),
              transform var(--duration-normal) var(--ease-spring); }
.plan-card:hover { transform: translateY(var(--hover-lift)); }
.plan-card--featured { border-color: var(--accent-glow); }
.plan-card--featured::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius-2xl); padding: var(--space-px); background: var(--gradient-accent); -webkit-mask: linear-gradient(var(--bg-surface) 0 0) content-box, linear-gradient(var(--bg-surface) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gradient-accent); color: var(--on-accent); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); }
.plan-head { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-name { margin: 0; font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.plan-price { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--leading-none); letter-spacing: var(--tracking-display); font-family: var(--font-mono); }
.plan-price-unit { display: inline-block; margin-left: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-tertiary); font-family: var(--font-sans); letter-spacing: 0; }
.plan-period { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
.pricing-footnote { text-align: center; margin: var(--space-8) auto 0; max-width: 600px; font-size: var(--text-sm); color: var(--text-tertiary); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); }
.plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.plan-features li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); padding-left: var(--space-4); position: relative; }
.plan-features li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent-text); font-weight: var(--font-weight-bold); }
.plan-features li strong { color: var(--text-primary); }
.plan-cta { margin-top: auto; }
.plan-cta-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; }
@media (max-width: 1200px) {
  .plan-grid, .plan-grid--4, .plan-grid--2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .plan-grid, .plan-grid--4 { grid-template-columns: 1fr; }
  .plan-grid--2 { display: flex; grid-template-columns: none; max-width: none; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-block: var(--space-4) var(--space-2); scroll-padding-inline: var(--space-4); scrollbar-width: none; }
  .plan-grid--2::-webkit-scrollbar { display: none; }
  .plan-grid--2 .plan-card { flex: 0 0 80%; min-width: 0; scroll-snap-align: center; padding: var(--space-6) var(--space-4); }
  .plan-grid--2 .plan-badge { font-size: var(--text-2xs); padding-inline: var(--space-2); white-space: nowrap; }
  .plan-grid--2 .plan-name { white-space: nowrap; }
  .plan-grid--2 .plan-period { font-size: var(--text-2xs); }
  .plan-grid--2 .plan-features li { font-size: var(--text-xs); }
  .plan-grid--2 .plan-credit-list li { font-size: var(--text-2xs); }
  .plan-grid--2 .plan-cta { font-size: var(--text-sm); padding-inline: var(--space-2); white-space: nowrap; }
  .plan-grid--2 .plan-cta-note { font-size: var(--text-2xs); min-height: 2.6em; }
}
.page-hero { padding: var(--space-16) 0 var(--space-8); text-align: center; }
.page-hero h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.page-hero p { color: var(--text-secondary); font-size: var(--text-md); margin: 0; }
.counter-live { text-align: center; padding: var(--space-12) 0; }
.counter-big { display: inline-flex; align-items: baseline; gap: var(--space-3); padding: var(--space-12) var(--space-16); border-radius: var(--radius-2xl); border: 1px solid var(--border-subtle); }
.counter-num { font-size: var(--text-display); font-weight: var(--font-weight-bold); color: var(--accent-hover); }
.counter-label { font-size: var(--text-lg); color: var(--text-secondary); }
.counter-status { margin-top: var(--space-6); color: var(--text-secondary); font-size: var(--text-base); }
.counter-cta { margin-top: var(--space-8); }
.muted { color: var(--text-tertiary); }
.faq-content { padding-top: var(--space-8); padding-bottom: var(--space-16); max-width: 820px; }
.faq-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-12) 0 var(--space-6); }
.markdown-body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-primary); }
.markdown-body h1 { font-size: var(--text-lg); margin: var(--space-12) 0 var(--space-4); color: var(--text-primary); }
.markdown-body h2 { font-size: var(--text-md); margin: var(--space-12) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); color: var(--accent-hover); }
.markdown-body h3 { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); color: var(--text-primary); }
.markdown-body h4 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); color: var(--text-secondary); }
.markdown-body p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.markdown-body ul, .markdown-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); color: var(--text-secondary); }
.markdown-body li { margin-bottom: var(--space-2); }
.markdown-body li > p { margin: 0 0 var(--space-2); }
.markdown-body strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.markdown-body code { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-sm); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
.markdown-body pre { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }
.markdown-body pre code { background: none; border: 0; padding: 0; }
.markdown-body blockquote { border-left: 2px solid var(--color-accent); padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); color: var(--text-tertiary); background: var(--bg-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }
.markdown-body a { color: var(--accent-hover); text-decoration: underline; }
.markdown-body a:hover { color: var(--accent-text); }
.markdown-body h1 .toclink,
.markdown-body h2 .toclink,
.markdown-body h3 .toclink,
.markdown-body h4 .toclink { color: inherit; text-decoration: none; }
.markdown-body h1 .toclink:hover,
.markdown-body h2 .toclink:hover,
.markdown-body h3 .toclink:hover,
.markdown-body h4 .toclink:hover { color: var(--accent-hover); }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); }
.markdown-body th, .markdown-body td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); text-align: left; }
.markdown-body th { background: var(--bg-surface); color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.markdown-body .headerlink { color: var(--text-tertiary); margin-left: var(--space-2); opacity: 0; transition: opacity var(--duration-fast); }
.markdown-body h2:hover .headerlink,
.markdown-body h3:hover .headerlink { opacity: 1; }
.markdown-body details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin: 0 0 var(--space-3); transition: border-color var(--duration-fast), background var(--duration-fast); }
.markdown-body details:hover { border-color: var(--color-accent); }
.markdown-body details[open] { border-color: var(--color-accent); background: var(--bg-base); }
.markdown-body summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--text-primary); list-style: none; position: relative; padding-right: calc(var(--space-4) + 20px); user-select: none; line-height: var(--leading-normal); }
.markdown-body summary::-webkit-details-marker { display: none; }
.markdown-body summary::after { content: "+"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font-size: var(--text-md); color: var(--accent-hover); font-weight: var(--font-weight-normal); transition: transform var(--duration-fast); line-height: var(--leading-none); }
.markdown-body details[open] > summary::after { content: "−"; }
.markdown-body summary:hover { color: var(--accent-hover); }
.markdown-body summary strong { color: var(--accent-hover); font-weight: var(--font-weight-semibold); margin-right: var(--space-2); }
.markdown-body details[open] > *:not(summary) { padding-left: var(--space-4); padding-right: var(--space-4); }
.markdown-body details[open] > *:not(summary):first-of-type { padding-top: var(--space-3); margin-top: 0; }
.markdown-body details[open] > *:last-child { padding-bottom: var(--space-3); margin-bottom: 0; }
.markdown-body details[open] > ul,
.markdown-body details[open] > ol { padding-left: calc(var(--space-4) + var(--space-6)); }
.site-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: var(--space-12) 0 var(--space-6); margin-top: var(--space-16); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer-tag { color: var(--text-tertiary); font-size: var(--text-sm); margin: 0; }
.footer-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-nav a { color: var(--text-secondary); font-size: var(--text-sm); }
@media (max-width: 768px) {
  .nav-main { gap: var(--space-3); }
  .nav-main a:not(.cta-link) { display: none; }
  .hero { padding: var(--space-12) 0 var(--space-8); }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn-primary, .hero-cta .btn-secondary { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
}
.welcome-accordion { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease; }
.welcome-accordion.open { max-height: 560px; opacity: 1; }
.welcome-result-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.welcome-result-row:last-child { border-bottom: none; }
.welcome-result-row dt { font-size: var(--text-sm); color: var(--text-tertiary); flex-shrink: 0; }
.welcome-result-row dd { margin: 0; font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-weight-medium); text-align: right; word-break: break-all; }
.guide-img-wrap { position: relative; margin-top: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; border: 1px solid var(--border-subtle); transition: border-color var(--duration-normal),
              box-shadow var(--duration-normal),
              transform var(--duration-normal) var(--ease-spring); }
.guide-img-wrap:hover { transform: translateY(var(--hover-lift)); }
.guide-img-wrap img { display: block; width: 100%; border-radius: calc(var(--radius-lg) - 1px); }
.guide-img-overlay { display: none; }
.guide-img-zoom-btn { display: none; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-8); background: var(--overlay); cursor: zoom-out; animation: lb-in 0.18s var(--ease-spring); }
.lightbox.open { display: flex; }
.lightbox-img { max-width: min(88vw, 860px); max-height: 84vh; width: auto; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); cursor: default; animation: lb-scale-in 0.2s var(--ease-spring); }
.lightbox-close { position: absolute; top: var(--space-5); right: var(--space-5); width: 40px; height: 40px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--bg-surface); font-size: var(--text-lg); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast); line-height: var(--leading-none); }
.lightbox-close:hover { background: var(--bg-surface); }
.usp-section, .voice-section, .meta-section, .privacy-section, .claude-section,
.trust-section, .shift-section, .tools-section, .workflow-section,
.vs-section, .final-cta-section, .agents, .day-flow, .pricing,
.depth-tiers, .hero { width: 100%; }
.meta-tools, .meta-quote, .meta-tools-pairs, .meta-update,
.usp-pitch, .usp-cases, .usp-foot,
.claude-compare, .claude-pitch,
.trust-grid, .privacy-pillars, .privacy-backup,
.shift-grid, .tools-grid, .workflow-grid, .vs-grid,
.tier-list, .plan-grid, .features-common, .agent-grid, .day-list,
.meta-foot, .final-cta-inner { margin-left: auto; margin-right: auto; }
.hero-sub,
.section-sub,
.tier-text,
.agent-example,
.usp-pitch-line,
.usp-output,
.usp-foot-line,
.usp-foot-close,
.meta-quote-text,
.meta-tools-sub,
.meta-tools-foot,
.meta-foot-line,
.meta-foot-close,
.meta-update-desc,
.meta-update-sub,
.privacy-pillar-desc,
.privacy-backup-result,
.trust-desc,
.final-cta-note,
.shift-message,
.workflow-foot,
.workflow-list li,
.wf-h2-sub,
.wf-mode-desc,
.wf-agent-ex,
.wf-tier-intro,
.wf-tier-foot,
.wf-coming-intro,
.wf-coming-foot,
.wf-matrix-foot,
.wf-status-sub { word-break: keep-all; text-wrap: balance; overflow-wrap: anywhere; }
.usp-section,
.voice-section,
.privacy-section,
.meta-section,
.claude-section,
.trust-section,
.shift-section,
.tools-section,
.workflow-section,
.vs-section,
.final-cta-section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.wf-container { padding: 0 var(--space-4) var(--space-20); }
.wf-wrap { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-16); }
.wf-block { padding: 0; }
.wf-h2 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); text-align: center; letter-spacing: var(--tracking-display); color: var(--text-primary); }
.wf-h2-sub { margin: 0 auto var(--space-8); max-width: 720px; text-align: center; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.wf-agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-8); }
.wf-agent { padding: var(--space-5); }
.wf-agent .mono-label { margin: 0 0 var(--space-2); color: var(--accent-text); }
.wf-agent-role { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.wf-agent-ex { margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-normal); }
.wf-tier-intro { margin: 0 0 var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.wf-system-card { padding: var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); word-break: keep-all; text-wrap: balance; }
.wf-matrix-wrap { padding: 0; overflow: hidden; }
.wf-matrix-foot { margin: var(--space-6) auto 0; max-width: 720px; text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.wf-cta-wrap { text-align: center; margin-top: var(--space-8); }
@media (max-width: 640px) {
  .wf-matrix { font-size: var(--text-xs); }
  .wf-matrix th, .wf-matrix td { padding: var(--space-2) var(--space-2); }
}
.wf-section { padding: var(--space-10) 0; }
.wf-section--live { border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-6); border: 1px solid var(--success-bg); }
.wf-section--coming { border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-6); border: 1px solid var(--warning-line); }
.wf-status-header { text-align: center; margin-bottom: var(--space-10); }
.wf-status-badge { display: inline-block; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-md); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.wf-status-badge--live { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-line); }
.wf-status-badge--coming { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-line); }
.wf-status-sub { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.wf-tier-block { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px dashed var(--border-subtle); }
.wf-tier-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.wf-tier-label { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-3) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); }
.wf-tier-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.wf-tier-dot--all { background: var(--success-text); }
.wf-tier-dot--creator { background: var(--color-accent); }
.wf-tier-name { flex: 1; font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.wf-tier-count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); font-weight: var(--font-weight-bold); }
.wf-tier-foot { margin: var(--space-6) 0 0; padding: var(--space-4); background: var(--accent-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); text-align: center; }
.wf-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.wf-cat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); }
.wf-cat-title { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.wf-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wf-cat-list li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); padding-left: var(--space-3); position: relative; }
.wf-cat-list li::before { content: "·"; position: absolute; left: 0; color: var(--text-tertiary); }
.wf-cat-list code { background: var(--accent-bg); color: var(--accent-text); padding: var(--space-px) var(--space-1); border-radius: var(--radius-xs); font-size: var(--text-xs); }
.wf-cat-mock { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.wf-cat-mock img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.wf-credit-pill { display: inline-block; margin-left: var(--space-1); padding: var(--space-0-5) var(--space-2); font-size: var(--text-2xs); font-family: var(--font-mono); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); background: var(--accent-bg-strong); color: var(--accent-text); border: 1px solid var(--danger-line); border-radius: var(--radius-full); white-space: nowrap; vertical-align: middle; }
.wf-credit-pill--free { background: var(--success-bg); color: var(--success-text); border-color: var(--success-line); }
.wf-cat-example { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-1); }
.wf-ex-user { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.wf-ex-user::before { content: "» "; color: var(--text-tertiary); }
.wf-ex-bot { margin: 0; font-size: var(--text-sm); color: var(--accent-text); line-height: var(--leading-normal); font-weight: var(--font-weight-medium); }
.wf-ex-bot::before { content: "↳ "; color: var(--text-tertiary); }
@media (max-width: 768px) {
  .wf-cat-grid { grid-template-columns: 1fr; }
}
.wf-coming-intro { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-normal); }
.wf-coming-intro strong { color: var(--accent-text); }
.wf-coming-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.wf-coming-card { background: var(--bg-surface); border: 1px solid var(--warning-line); border-radius: var(--radius-xl); padding: var(--space-6); position: relative; }
.wf-coming-cat { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--border-subtle); flex-wrap: wrap; }
.wf-coming-icon { font-size: var(--text-xl); }
.wf-coming-name { flex: 1; font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.wf-coming-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wf-coming-list li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); padding-left: var(--space-3); position: relative; }
.wf-coming-list li::before { content: "·"; position: absolute; left: 0; color: var(--text-tertiary); }
.wf-coming-list li strong { color: var(--text-primary); }
.wf-coming-foot { max-width: 720px; margin: var(--space-10) auto 0; text-align: center; padding: var(--space-5); background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-normal); }
@media (max-width: 768px) {
  .wf-coming-grid { grid-template-columns: 1fr; }
}
.wf-matrix { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wf-matrix thead tr { border-bottom: 1px solid var(--border-subtle); }
.wf-matrix th { padding: var(--space-4) var(--space-5); text-align: center; color: var(--text-tertiary); font-weight: var(--font-weight-medium); }
.wf-matrix th:first-child { text-align: left; width: 45%; }
.wf-matrix th.wf-matrix-creator { color: var(--accent-text); font-weight: var(--font-weight-bold); }
.wf-matrix tbody tr { border-bottom: 1px solid var(--border-subtle); }
.wf-matrix tbody tr:last-child { border-bottom: 0; }
.wf-matrix td { padding: var(--space-4) var(--space-5); text-align: center; color: var(--text-secondary); }
.wf-matrix td:first-child { text-align: left; }
.wf-matrix td strong { color: var(--text-primary); }
@media (max-width: 768px) {
  .wf-matrix { font-size: var(--text-xs); }
  .wf-matrix th,
  .wf-matrix td { padding: var(--space-3) var(--space-2); }
  .wf-matrix th:first-child,
  .wf-matrix td:first-child { width: auto; word-break: keep-all; overflow-wrap: anywhere; }
  .wf-matrix .wf-credit-pill { white-space: nowrap; }
}
.privacy-section { padding: var(--space-20) 0; }
.privacy-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 800px; margin: 0 auto var(--space-12); }
.privacy-section-sub { margin-bottom: var(--space-12); }
.privacy-storage { margin-top: var(--space-5); }
.privacy-pillar { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; display: flex; flex-direction: column; gap: var(--space-2); }
.privacy-pillar-icon { margin: 0; font-size: var(--text-2xl); }
.privacy-pillar-title { margin: 0; font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.privacy-pillar-desc { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
@media (max-width: 768px) {
  .privacy-pillars { grid-template-columns: 1fr; }
}
.privacy-backup { max-width: 800px; margin: 0 auto; padding: var(--space-8); background: var(--accent-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-2xl); }
.privacy-backup-title { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--text-primary); font-weight: var(--font-weight-bold); text-align: center; }
.privacy-backup-sub { margin: 0 0 var(--space-5); text-align: center; font-size: var(--text-sm); color: var(--text-secondary); }
.privacy-backup-cmd { background: var(--bg-elevated); border: 1px solid var(--danger-line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.privacy-backup-mention { color: var(--accent-text); font-weight: var(--font-weight-bold); margin-right: var(--space-2); }
.privacy-backup-text { color: var(--text-secondary); }
.privacy-backup-result { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-normal); }
.hero-proof { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) auto var(--space-2); padding: var(--space-3) var(--space-5); max-width: 560px; width: 100%; background: var(--accent-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-lg); }
.hero-proof-text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); text-align: left; }
.hero-proof-text strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.plan-credit-matrix { margin-top: var(--space-4); padding: var(--space-4); background: var(--accent-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-lg); }
.plan-credit-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--accent-text); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); }
.plan-credit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.plan-credit-list li { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); }
.trust-section { padding: var(--space-20) 0; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); max-width: 1000px; margin: 0 auto; }
.trust-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; display: flex; flex-direction: column; gap: var(--space-2); }
.trust-icon { margin: 0; font-size: var(--text-2xl); }
.trust-title { margin: 0; font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.trust-desc { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.final-cta-section { padding: var(--space-20) 0; }
.final-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.final-cta-buttons { display: flex; justify-content: center; gap: var(--space-3); margin: var(--space-8) 0 var(--space-6); flex-wrap: wrap; }
.final-cta-note { margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-relaxed); }
.final-cta-note a { color: var(--accent-text); }
.hero-title.hero-headline-v2 { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-display); text-align: center; margin: 0; }
.hero-title.hero-headline-v2 strong { background: var(--gradient-accent); font-weight: var(--font-weight-bold); }
.why-works .section-sub code { font-family: var(--font-mono); font-size: var(--text-base); padding: var(--space-px) var(--space-1); background: var(--accent-bg-strong); border-radius: var(--radius-sm); color: var(--accent-text); }

/* ── 2. 에디토리얼 배치 (옛 editorial.css — 팔레트·서체·그림자 재정의는 걷어냄) ── */
.site-header { background: var(--bg-base); border-bottom: 1px solid var(--border-emphasis); }
.header-inner { padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); padding-bottom: var(--space-4); }
.nav-main a { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.nav-main a:hover { color: var(--text-primary); }
.nav-main a.cta-link { font-family: var(--font-sans); background: var(--text-primary); color: var(--bg-base); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: none; font-weight: var(--font-weight-semibold); }
.tabbar { display: none; }
@media (max-width: 768px) {
  .nav-main { display: none; }
  .floating-cta { display: none; }
  .tabbar { display: flex; position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)); z-index: var(--z-panel); align-items: stretch; background: transparent; padding: var(--space-1) var(--space-1); }
  .tabbar::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-2xl); background: var(--bg-base); border: 1px solid var(--border-strong); pointer-events: none; }
  .tabbar > * { position: relative; z-index: 1; }
  .tabbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-tertiary); padding: var(--space-2) var(--space-0-5); border-radius: var(--radius-md); position: relative; }
  .tabbar a.active { color: var(--text-primary); font-weight: var(--font-weight-bold); }
  .tabbar a.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; border-radius: 0 0 var(--radius-xs) var(--radius-xs); background: var(--color-accent); }
  .tabbar a.tabbar-cta { flex: 0 0 auto; background: var(--text-primary); color: var(--bg-base); font-weight: var(--font-weight-bold); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); margin-left: var(--space-1); }
  .tabbar a.tabbar-cta.active::before { display: none; }
}
.depth-tiers,
.origin-section,
.shift-section,
.usp-section,
.voice-section,
.agents,
.tools-section,
.workflow-section,
.meta-section,
.day-flow,
.vs-section,
.pricing,
.claude-section,
.privacy-section,
.trust-section,
.final-cta-section { padding: var(--space-20) 0; border-top: 1px solid var(--border-emphasis); background: var(--bg-base); }
.origin-section--alt,
.shift-section,
.agents,
.workflow-section,
.day-flow,
.pricing,
.privacy-section,
.final-cta-section { background: var(--bg-elevated); }
.section-title { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-display); letter-spacing: var(--tracking-display); line-height: var(--leading-none); color: var(--text-primary); text-align: center; }
.section-sub { font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 640px; margin: var(--space-5) auto 0; text-align: center; }
.origin-inner { max-width: 720px; }
.origin-section .eyebrow { text-align: center; }
.origin-title { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); text-align: center; margin: var(--space-3) auto var(--space-8); }
.origin-body { max-width: 600px; margin: 0 auto; }
.origin-body p { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.origin-body p:last-child { margin-bottom: 0; }
.origin-body strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.origin-bill { max-width: 460px; margin: 0 auto var(--space-8); }
.origin-bill-scroll { max-height: 540px; overflow: hidden; border: 1px solid var(--border-emphasis); border-radius: var(--radius-md); background: var(--bg-surface); -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0) 70%, transparent 100%); mask-image: linear-gradient(180deg, rgb(0 0 0) 70%, transparent 100%); }
.origin-bill-scroll img { width: 100%; display: block; }
.origin-bill figcaption { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-tertiary); text-align: center; line-height: var(--leading-normal); }
.origin-note { color: var(--text-tertiary); font-size: var(--text-sm); }
.origin-proof { max-width: 600px; margin: var(--space-10) auto 0; }
.origin-proof-frame { border: 1px solid var(--border-emphasis); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-base); }
.origin-proof-frame img { width: 100%; display: block; }
.origin-proof figcaption { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-tertiary); text-align: center; line-height: var(--leading-normal); }
.proof-card { text-align: left; border: 1px solid var(--border-emphasis); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: var(--space-5) var(--space-5) var(--space-6); }
.proof-card-head { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); color: var(--text-tertiary); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-emphasis); }
.proof-card-head::before { content: "#"; color: var(--text-ghost); margin-right: var(--space-1); }
.proof-msg { display: flex; gap: var(--space-3); }
.proof-msg + .proof-msg { margin-top: var(--space-4); }
.proof-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--bg-base); }
.proof-avatar--user { background: var(--color-accent); }
.proof-avatar--bot { background: var(--text-primary); }
.proof-msg-body { flex: 1 1 auto; min-width: 0; }
.proof-msg-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0 0 var(--space-1); }
.proof-msg-name span { font-weight: var(--font-weight-semibold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-ghost); margin-left: var(--space-2); vertical-align: middle; }
.proof-msg-text { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0; }
.proof-result { margin-top: var(--space-3); border-left: 2px solid var(--color-accent); background: var(--bg-elevated-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3) var(--space-4); }
.proof-result-title { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0 0 var(--space-2); }
.proof-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
.proof-result-row .score { flex: 0 0 auto; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.proof-result-row .best { flex: 0 0 auto; color: var(--color-accent); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.proof-flow { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-6); padding: var(--space-8) var(--space-4) var(--space-7); border: 1px solid var(--border-emphasis); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.proof-flow-node { flex: 0 0 auto; width: clamp(92px, 26%, 138px); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-tertiary); }
.proof-flow-glyph { height: 64px; display: flex; align-items: center; justify-content: center; color: var(--text-primary); }
.proof-flow-link { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.proof-flow-link .proof-flow-glyph { color: var(--color-accent); }
.proof-flow-link-label { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.proof-flow-status { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); }
.proof-flow-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); display: inline-block; }
.wf-cat-mock .proof-mini { border: 1px solid var(--border-emphasis); border-radius: var(--radius-md); background: var(--bg-elevated); padding: var(--space-3) var(--space-3); text-align: left; }
.proof-mini-cmd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.proof-mini-at { flex: 0 0 auto; font-family: var(--font-mono); font-weight: var(--font-weight-bold); color: var(--color-accent); }
.proof-mini-out { border-left: 2px solid var(--color-accent); background: var(--bg-elevated-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
.proof-mini-out strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.proof-mini-out .tag { color: var(--color-accent); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.proof-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0 auto; }
.proof-ba-frame { aspect-ratio: 3 / 4; border: 1px solid var(--border-emphasis); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated-2); }
.proof-ba-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-ba-cap { margin-top: var(--space-2); text-align: center; }
.proof-ba-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-bold); margin: 0; }
.proof-ba-item--before .proof-ba-label { color: var(--text-tertiary); }
.proof-ba-item--after .proof-ba-label { color: var(--color-accent); }
.proof-ba-sub { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--text-tertiary); margin-top: var(--space-0-5); }
.proof-video { max-width: 300px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-emphasis); background: var(--text-primary); line-height: var(--leading-none); }
.proof-video video { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16; object-fit: cover; }
.proof-vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 460px; margin: 0 auto; }
.proof-vs-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-emphasis); background: var(--text-primary); line-height: var(--leading-none); }
.proof-vs-frame video { width: 100%; display: block; aspect-ratio: 9 / 16; object-fit: cover; }
.howflow { display: flex; align-items: stretch; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.howflow-node { flex: 1 1 0; min-width: 130px; border: 1px solid var(--border-emphasis); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: var(--space-4) var(--space-3); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.howflow-node-icon { color: var(--text-primary); line-height: var(--leading-none); }
.howflow-node-title { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; }
.howflow-node-desc { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-normal); margin: 0; }
.howflow-arrow { align-self: center; color: var(--color-accent); font-size: var(--text-lg); flex: 0 0 auto; }
.howflow-arrow--return { flex-basis: 100%; text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.howstep { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.howstep-card { border: 1px solid var(--border-emphasis); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: var(--space-4) var(--space-4); }
.howstep-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.howstep-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: var(--bg-base); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); flex: 0 0 auto; }
.howstep-icon { color: var(--text-primary); line-height: var(--leading-none); }
.howstep-title { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--text-primary); margin: 0; }
.howstep-desc { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; }
.depth-foot { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); text-align: center; margin: var(--space-10) auto 0; }
.hero { background: var(--bg-base); padding: var(--space-20) 0 var(--space-16); border-bottom: 1px solid var(--border-emphasis); position: relative; }
.hero::before { content: "ISSUE 01 · 2026 EDITION"; display: block; font-family: var(--font-serif-en); font-style: italic; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); text-align: center; margin-bottom: var(--space-8); background: none; position: static; inset: auto; z-index: auto; }
.hero::after { content: ""; display: block; width: 48px; height: 1px; background: var(--border-strong); margin: var(--space-10) auto 0; }
.hero-inner { text-align: center; }
.badge-positioning { font-family: var(--font-serif-en); font-style: italic; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); padding: var(--space-2) var(--space-4); border-radius: 0; }
.hero-title,
.hero h1 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-display); line-height: var(--leading-none); letter-spacing: var(--tracking-display); color: var(--text-primary); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--text-primary); margin: var(--space-6) 0; }
.hero-icon { color: var(--text-primary); }
.hero-icon-claude,
.hero-icon-mac { fill: var(--text-primary); }
.hero-op { color: var(--text-tertiary); font-family: var(--font-display); }
.hero-label { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.hero-sub-block { margin: var(--space-8) auto var(--space-8); max-width: 620px; }
.hero-pain { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-normal); }
.hero-divider { font-family: var(--font-serif-en); color: var(--text-ghost); margin: var(--space-4) 0; }
.hero-resolve { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); }
.hero-resolve strong { color: var(--text-primary); }
.hero-lifetime { font-family: var(--font-display); font-size: var(--text-md); color: var(--text-primary); }
.hero-lifetime strong { color: var(--color-accent); }
.hero-identity { margin: var(--space-6) auto 0; max-width: 640px; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); }
.hero-identity strong { color: var(--color-accent); font-weight: var(--font-weight-bold); }
.hero-cta { margin: var(--space-8) 0 var(--space-6); }
.hero-note { font-family: var(--font-serif-en); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); line-height: var(--leading-relaxed); }
.glass-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.glass-card--glow { border-color: var(--border-strong); }
.glass-card--hi { background: var(--bg-base); }
.depth-tiers .container > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.depth-tiers .section-sub { margin-bottom: var(--space-10); }
.depth-tier,
.depth-block { border-bottom: 1px solid var(--border-emphasis); padding: var(--space-10) 0; }
.depth-tier:last-child,
.depth-block:last-child { border-bottom: 0; }
.depth-tier-q,
.depth-tier h3,
.depth-block h3 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-primary); margin: 0 0 var(--space-4); }
.depth-tier-a,
.depth-tier p,
.depth-block p { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.shift-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.shift-before { background: var(--bg-elevated-2); }
.shift-after { background: var(--bg-base); border-color: var(--border-strong); }
.shift-label { font-family: var(--font-serif-en); font-style: italic; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.shift-list li { font-family: var(--font-sans); color: var(--text-secondary); border-bottom: 1px solid var(--border-emphasis); }
.shift-arrow { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text-tertiary); }
.shift-message { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-primary); }
.shift-foot { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.usp-input,
.voice-input { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-normal); border-left: 2px solid var(--color-accent); padding-left: var(--space-5); margin: var(--space-4) 0; }
.agent-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.agent-name { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.agent-role { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.agent-example { font-family: var(--font-sans); color: var(--text-secondary); }
.tool-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.tool-cat { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-base); color: var(--text-primary); }
.tool-cmd { font-family: var(--font-mono); color: var(--color-accent); }
.tool-cmd code { background: transparent; color: var(--color-accent); }
.tool-desc { color: var(--text-secondary); }
.workflow-col { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.workflow-live { border-top: 2px solid var(--color-accent); }
.workflow-coming { border-top: 2px solid var(--color-accent); }
.workflow-status { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.workflow-list li { color: var(--text-secondary); border-bottom: 1px dotted var(--border-emphasis); padding-bottom: var(--space-3); }
.workflow-list li::before { color: var(--text-tertiary); }
.wf-cmd { font-family: var(--font-mono); color: var(--color-accent); background: transparent; }
.wf-cmd-desc { color: var(--text-secondary); }
.workflow-foot { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.meta-quote { background: var(--bg-elevated-2); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); position: relative; }
.meta-quote::before { content: "“"; font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-none); color: var(--color-accent); position: absolute; top: var(--space-2); left: var(--space-6); opacity: 0.3; }
.day-flow-item { border-bottom: 1px solid var(--border-emphasis); padding: var(--space-6) 0; }
.day-flow-time { font-family: var(--font-serif-en); font-style: italic; color: var(--text-tertiary); letter-spacing: var(--tracking-wide); }
.vs-card,
.vs-creator,
.vs-grid > * { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.vs-creator { border-color: var(--border-strong); background: var(--bg-elevated-2); }
.vs-label { font-family: var(--font-serif-en); font-style: italic; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.vs-title { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.vs-desc { color: var(--text-secondary); }
.pricing { background: var(--bg-elevated); }
.plan-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.plan-card--featured { border: 2px solid var(--text-primary); }
.plan-badge { font-family: var(--font-serif-en); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--text-primary); border: none; color: var(--bg-base); padding: var(--space-1) var(--space-3); }
.plan-name { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.plan-price { font-family: var(--font-serif-en); font-weight: var(--font-weight-display); font-size: var(--text-display); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: var(--space-2) 0; line-height: var(--leading-none); }
.plan-price-unit { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-normal); color: var(--text-tertiary); margin-left: var(--space-2); }
.plan-tagline,
.plan-lifetime,
.plan-period { font-family: var(--font-sans); color: var(--text-secondary); }
.plan-features li { font-family: var(--font-sans); line-height: var(--leading-relaxed); color: var(--text-secondary); padding-bottom: var(--space-0-5); }
.plan-features li strong { color: var(--text-primary); }
.plan-features code { background: transparent; color: var(--color-accent); font-family: var(--font-mono); }
.plan-credit-matrix { background: var(--bg-elevated-2); border: 1px solid var(--border-emphasis); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xs); }
.plan-credit-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0; color: var(--text-tertiary); }
.plan-credit-list li { border-bottom: 0; color: var(--text-secondary); }
.plan-cta { margin-top: var(--space-4); }
.pricing-prereq { background: var(--bg-elevated-2); border: 1px solid var(--border-emphasis); border-left: 2px solid var(--color-accent); border-radius: var(--radius-xs); }
.pricing-prereq-label { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-base); color: var(--text-primary); }
.pricing-prereq-list li { color: var(--text-secondary); }
.pricing-prereq-list strong { color: var(--text-primary); }
.pricing-prereq-list li::before { color: var(--color-accent); }
.pricing-prereq-foot { color: var(--text-tertiary); border-top-color: var(--border-emphasis); }
.features-common { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.features-common-label { font-family: var(--font-serif-en); font-style: italic; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); }
.features-common-list li { color: var(--text-secondary); }
.features-common-list li::before { color: var(--color-accent); }
.features-common-list strong { color: var(--text-primary); }
.features-common-foot { color: var(--text-tertiary); border-top-color: var(--border-emphasis); }
.pricing-footnote { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.claude-col { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.claude-col-api { background: var(--bg-elevated-2); }
.claude-col-sub { border: 2px solid var(--text-primary); }
.claude-col-label { font-family: var(--font-serif-en); font-style: italic; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.claude-col-price { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-3xl); color: var(--text-primary); }
.claude-col-price strong { color: var(--text-primary); }
.claude-col-detail { color: var(--text-secondary); }
.claude-col-note { color: var(--text-tertiary); font-family: var(--font-serif-en); }
.claude-vs { font-family: var(--font-display); font-weight: var(--font-weight-normal); color: var(--text-tertiary); }
.claude-pitch { background: var(--bg-elevated-2); border-left: 2px solid var(--color-accent); padding: var(--space-6) var(--space-8); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.claude-pitch p { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-primary); }
.claude-pitch p strong { color: var(--color-accent); }
.claude-pitch-sub { font-style: normal; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-secondary); }
.privacy-pillar { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.privacy-pillar-title { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.privacy-pillar-desc { color: var(--text-secondary); }
.privacy-backup { background: var(--bg-elevated-2); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.privacy-backup-title { font-family: var(--font-display); font-weight: var(--font-weight-display); color: var(--text-primary); }
.privacy-backup-sub,
.privacy-backup-result { color: var(--text-secondary); }
.privacy-backup-cmd { background: var(--bg-base); border: 1px solid var(--border-emphasis); }
.privacy-backup-mention { color: var(--color-accent); }
.privacy-backup-text { color: var(--text-secondary); }
.trust-card { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.trust-title { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.trust-desc { color: var(--text-secondary); }
.final-cta-section { background: var(--bg-base); border-top: 2px solid var(--text-primary); }
.final-cta-section .section-title { font-family: var(--font-display); font-weight: var(--font-weight-display); }
.final-cta-note { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.wf-cat,
.wf-coming-card,
.wf-agent,
.wf-system-card,
.wf-matrix-wrap { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.wf-cat-title,
.wf-coming-name { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.wf-tier-name { font-family: var(--font-display); font-weight: var(--font-weight-display); color: var(--text-primary); }
.wf-tier-count { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.wf-status-badge { font-family: var(--font-serif-en); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--text-primary); color: var(--bg-base); border-radius: 0; }
.wf-status-badge--coming { background: var(--color-accent); }
.wf-status-sub { color: var(--text-secondary); }
.wf-h2 { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-3xl); color: var(--text-primary); }
.wf-h2-sub { font-family: var(--font-sans); color: var(--text-secondary); }
.wf-agent .mono-label { font-family: var(--font-mono); color: var(--color-accent); background: transparent; text-transform: none; padding: 0; font-size: var(--text-base); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.wf-agent-role { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); color: var(--text-primary); }   /* 14px 한글 세리프는 뭉갠다 */
.wf-agent-ex { color: var(--text-secondary); }
.wf-cat-list li { color: var(--text-secondary); border-bottom: 1px dotted var(--border-emphasis); }
.wf-cat-list code { background: transparent; color: var(--color-accent); }
.wf-cat-intro,
.wf-tier-intro,
.wf-tier-foot,
.wf-coming-intro,
.wf-coming-foot { color: var(--text-secondary); }
.wf-credit-pill { font-family: var(--font-mono); background: var(--bg-elevated-2); color: var(--text-primary); border: 1px solid var(--border-emphasis); border-radius: var(--radius-full); }
.wf-credit-pill--free { background: var(--accent-bg); color: var(--color-accent); border-color: var(--border-emphasis); }
.wf-cmd-list li { color: var(--text-secondary); border-bottom: 1px dotted var(--border-emphasis); }
.wf-matrix { color: var(--text-secondary); }
.wf-matrix th { font-family: var(--font-serif-en); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); border-bottom-color: var(--border-emphasis); }
.wf-matrix-creator { font-family: var(--font-display); font-weight: var(--font-weight-display); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.wf-matrix tr { border-bottom-color: var(--border-emphasis); }
.wf-matrix td { color: var(--text-secondary); }
.wf-matrix td strong { color: var(--text-primary); }
.wf-matrix-foot { color: var(--text-tertiary); }
.wf-cta-wrap { text-align: center; }
.page-hero { background: var(--bg-base); padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--border-emphasis); }
/* `.page-hero p` 가 `.eyebrow` 보다 특이도가 높아 머리말이 18px 회색 문단으로 렌더됐다
   (라이언 2026-09-13 «랜딩 스페이싱이 엉망»). 머리말은 작은 캡션이다 — 되돌린다. */
.page-hero .eyebrow { font-size: var(--text-sm); color: var(--accent-text); margin: 0 0 var(--space-3); }
.page-hero .eyebrow:empty { margin: 0; }
.page-hero h1 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); text-align: center; }
.page-hero p { font-family: var(--font-sans); font-size: var(--text-md); color: var(--text-secondary); text-align: center; }
.markdown-body { color: var(--text-secondary); }
.markdown-body h2 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-display); color: var(--text-primary); border: 0; border-bottom: 1px solid var(--border-emphasis); padding-bottom: var(--space-2); margin: var(--space-12) 0 var(--space-6); }
.markdown-body h3 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-lg); color: var(--text-primary); }
.markdown-body details { border-bottom: 1px solid var(--border-emphasis); padding: var(--space-5) 0; }
.markdown-body summary { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-base); color: var(--text-primary); cursor: pointer; }
.markdown-body p,
.markdown-body li { font-family: var(--font-sans); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.markdown-body strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.markdown-body a { color: var(--color-accent); border-bottom: 1px solid var(--border-strong); }
.markdown-body code { background: var(--bg-elevated-2); color: var(--color-accent); padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-xs); font-family: var(--font-mono); }
.markdown-body hr { border: 0; border-top: 1px solid var(--border-emphasis); }
.faq-content { max-width: 880px; }
.faq-divider { border: 0; border-top: 1px solid var(--border-strong); margin: var(--space-12) 0 var(--space-6); }
.muted { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.install-step,
.welcome-step,
.glass-card[id^="discord"],
.glass-card[id^="bot"],
.glass-card[id^="sleep"] { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.mono-label { font-family: var(--font-serif-en); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--text-primary); color: var(--bg-base); border-radius: 0; }
.glass-input { background: var(--bg-base); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: var(--radius-xs); font-family: var(--font-sans); }
.glass-input:focus { border-color: var(--text-primary); outline: none; }
.form-label { font-family: var(--font-serif-en); letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.hint-line { color: var(--text-tertiary); }
.welcome-result-row { border-bottom: 1px solid var(--border-emphasis); }
.welcome-result-row dt { font-family: var(--font-serif-en); color: var(--text-tertiary); }
.welcome-result-row dd { color: var(--text-primary); }
.modal-title { font-family: var(--font-display); font-weight: var(--font-weight-display); color: var(--text-primary); }
.site-footer { background: var(--bg-elevated-2); border-top: 1px solid var(--border-emphasis); }
.footer-tag { font-family: var(--font-serif-en); font-style: italic; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.footer-nav a { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.footer-nav a:hover { color: var(--text-primary); }
.drop-cap::first-letter { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-display); line-height: var(--leading-none); float: left; margin: var(--space-1) var(--space-2) 0 0; color: var(--color-accent); }
.pull-quote { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); color: var(--text-primary); border-left: 2px solid var(--color-accent); padding-left: var(--space-6); margin: var(--space-8) 0; max-width: 720px; }
.editorial-rule { width: 60px; height: 1px; background: var(--border-strong); margin: var(--space-6) auto; border: 0; }
.hint-line { font-family: var(--font-serif-en); }
.form-error { color: var(--color-accent); }
@media (max-width: 768px) {
  .hero { padding: var(--space-12) 0 var(--space-10); }
  .hero::before { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); margin-bottom: var(--space-6); }
  .hero::after { margin-top: var(--space-8); }
  .plan-price { font-size: var(--text-display); }
  .plan-grid--2 .plan-price { white-space: nowrap; }
  .plan-grid--2 .plan-badge { letter-spacing: var(--tracking-caps); font-size: var(--text-2xs); font-style: normal; font-family: var(--font-sans); white-space: nowrap; }
  .plan-grid--2 .plan-cta { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); white-space: nowrap; }
  .plan-grid--2 .plan-name { font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
}
.mock-ui { border: 1px solid var(--border-strong); }
.mock-ui--web { background: var(--bg-surface); }
.mock-browser-bar { background: var(--bg-elevated-2); border-bottom: 1px solid var(--border-emphasis); }
.mock-browser-url { color: var(--text-tertiary); background: var(--bg-elevated); }
.mock-web-body pre { background: var(--bg-elevated); border: 1px solid var(--border-emphasis); }
.mock-web-body pre code { color: var(--text-secondary); }
.mock-web-submit { background: var(--bg-elevated-2); color: var(--text-secondary); border: 1px solid var(--border-emphasis); }
.mock-ui--discord,
.hero-mockup .mock-ui--discord { background: var(--bg-surface); border: 1px solid var(--accent-bg); }
.mock-discord-channel,
.hero-mockup .mock-discord-channel { background: var(--bg-elevated-2); border-bottom: 1px solid var(--border-emphasis); }
.mock-discord-icon { color: var(--text-tertiary); }
.mock-discord-channelname { color: var(--text-primary); }
.mock-discord-user { color: var(--text-primary); }
.mock-discord-time { color: var(--text-ghost); }
.mock-discord-text { color: var(--text-primary); }
.mock-discord-reply { color: var(--text-tertiary); }
.mock-discord-reply::before { border-top-color: var(--text-ghost); border-left-color: var(--text-ghost); }
.mock-discord-reply-user { color: var(--color-accent); }
.mock-discord-reply-text { color: var(--text-tertiary); }
.compare-result--coscale .compare-result-stats li > strong { color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); }
.compare-result--coscale .compare-result-stats li > span { color: var(--text-tertiary); }
.compare-col--general .compare-stage { background: var(--bg-elevated-2); color: var(--text-tertiary); }
.cost-summary-tag--out { background: var(--bg-elevated-2); color: var(--text-tertiary); }
::selection { background: var(--color-accent); color: var(--bg-base); }
.crew-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--space-2); }
.crew-card { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-3) var(--space-4); background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); }
.crew-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); color: var(--color-accent); }
.crew-role { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-secondary); opacity: 0.78; }
.allgrid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.allcard { display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--bg-surface); min-width: 0; }
.allcard img { width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: left top; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); display: block; }
@media (min-width:900px) {
  .allcard img { max-height: 300px; }
}
.allcard--text { justify-content: center; align-items: flex-start; }
.allnote { margin: 0; font-size: var(--text-2xs); color: var(--text-tertiary); line-height: var(--leading-normal); }
.allnote strong { color: var(--text-secondary); }
.allcap { font-size: var(--text-2xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); color: var(--accent-text); }
.alltext { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); }
@media (min-width:620px) {
  .allgrid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width:900px) {
  .allgrid { width: min(96vw, 1040px); margin-left: 50%; transform: translateX(-50%); gap: var(--space-4); }
  .allcard { padding: var(--space-4); }
  .alltext { font-size: var(--text-sm); }
}
.tier-card { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.tier-card:hover { border-color: var(--color-accent); background: var(--bg-base); transform: none; }
.cloud-disclaimer { max-width: 640px; margin: var(--space-8) auto 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cloud-disclaimer-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); text-align: left; }
.cloud-disclaimer-mark { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--font-weight-bold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); white-space: nowrap; }
.cloud-disclaimer-mark--yes { background: var(--color-accent); color: var(--on-accent); }
.cloud-disclaimer-mark--no { background: var(--bg-elevated-2); color: var(--text-secondary); border: 1px solid var(--border-emphasis); }
.share-proof { width: 100%; }
.share-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-5); align-items: stretch; text-align: left; }
@media (max-width: 720px) {
  .share-grid { grid-template-columns: 1fr; }
}
.share-grid:has(> .share-shot:only-child) { grid-template-columns: 1fr; }
.share-bio, .share-analytics { background: var(--bg-base); border: 1px solid var(--border-emphasis); border-radius: var(--radius-md); padding: var(--space-6); }
.share-bio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); }
.share-bio-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--color-accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.share-bio-name { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-md); color: var(--text-primary); }
.share-bio-handle { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.share-bio-tag { margin: var(--space-0-5) 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.share-bio-link { display: block; width: 100%; padding: var(--space-2) var(--space-3); margin-top: var(--space-2); background: var(--bg-elevated); border: 1px solid var(--border-emphasis); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.share-analytics-head { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.share-analytics-top { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-4); }
.share-analytics-num { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-2xl); color: var(--text-primary); letter-spacing: var(--tracking-display); }
.share-analytics-lbl { font-size: var(--text-sm); color: var(--text-tertiary); }
.share-analytics-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.share-bar-row { display: grid; grid-template-columns: 68px 1fr 38px; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.share-bar { height: 8px; background: var(--bg-elevated-2); border-radius: var(--radius-full); overflow: hidden; }
.share-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); }
.share-bar-val { text-align: right; font-weight: var(--font-weight-bold); color: var(--text-primary); }
.share-cta { text-align: center; margin-top: var(--space-6); }
.wf-section--web { background: var(--bg-elevated); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xs); padding: var(--space-10) var(--space-6); margin-bottom: var(--space-10); }
.wf-web-grid { display: grid; grid-template-columns: 1fr minmax(0, 320px); gap: var(--space-8); align-items: center; max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) {
  .wf-web-grid { grid-template-columns: 1fr; }
}
.wf-web-title { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-lg); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0 0 var(--space-3); }
.wf-web-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0 0 var(--space-4); }
.wf-web-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.wf-web-list li { font-size: var(--text-sm); color: var(--text-secondary); padding-left: var(--space-7); position: relative; line-height: var(--leading-normal); }
.wf-web-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: var(--font-weight-bold); }
.share-grid--real { grid-template-columns: 1fr 1fr; align-items: start; max-width: 600px; margin: 0 auto; }
@media (max-width: 600px) {
  .share-grid--real { grid-template-columns: 1fr; max-width: 320px; }
}
@media (min-width: 900px) {
  .share-grid--wide { max-width: none; width: min(94vw, 1000px); margin-left: 50%; transform: translateX(-50%); }
}
.share-shot { border: 1px solid var(--border-emphasis); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-base); }
.share-shot img { display: block; width: 100%; height: auto; }
.wf-web-mock .share-shot { max-width: 280px; margin: 0 auto; }
.edited-reels { background: var(--bg-base); padding: var(--space-8) 0 var(--space-8); border-bottom: 1px solid var(--border-emphasis); }
.edited-reels .reels-label { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.edited-reels .reels-title { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-display); line-height: var(--leading-tight); color: var(--text-primary); }
.edited-reels .reels-strip { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); max-width: 960px; }
.edited-reels .reel-card { min-width: 0; }
.edited-reels .reel-link { display: block; position: relative; text-decoration: none; color: inherit; transition: transform 200ms ease; }
.edited-reels .reel-poster { display: block; position: relative; aspect-ratio: 9 / 16; background-color: var(--text-primary); border: 1px solid var(--danger-line); border-radius: var(--radius-md); overflow: hidden; }
.edited-reels .reel-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.edited-reels .reel-rank { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--bg-base); font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-sm); border-radius: var(--radius-xs); }
.edited-reels .reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--overlay); color: var(--bg-base); font-size: var(--text-base); padding-left: var(--space-0-5); }
.edited-reels .reel-info { display: block; padding-top: var(--space-3); }
.edited-reels .reel-metric { display: block; font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--color-accent); }
.edited-reels .reel-metric em { font-style: normal; font-weight: var(--font-weight-medium); font-size: var(--text-xs); color: var(--text-tertiary); }
.edited-reels .reel-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); }
.edited-reels .reel-card.is-top .reel-poster { border-color: var(--color-accent); }
@media (max-width: 640px) {
  .edited-reels .reels-strip { display: flex; grid-template-columns: none; max-width: none; gap: var(--space-3); scroll-padding-inline: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--space-1); }
  .edited-reels .reels-strip::-webkit-scrollbar { display: none; }
  .edited-reels .reel-card { flex: 0 0 auto; min-width: 64vw; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .edited-reels .reel-link { transition: none; }
  .edited-reels .reel-link:hover { transform: none; }
}
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border-subtle); }
.step { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.step-n { flex: none; font-family: var(--font-mono); font-weight: var(--font-weight-bold); font-size: var(--text-xs); color: var(--accent-text); letter-spacing: var(--tracking-wide); }
.step-t { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); min-width: 0; word-break: keep-all; }
.step-t strong { color: var(--text-primary); }
@media (min-width:760px) {
  .steps { grid-template-columns: repeat(2,1fr); column-gap: var(--space-6); }
  .step { padding: var(--space-4) var(--space-1); }
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .step-t { font-size: var(--text-base); }
  .step-n { font-size: var(--text-sm); }
}
.orbit { position: relative; margin: var(--space-5) 0 0; padding-left: var(--space-6); }
.orbit-loopline { position: absolute; left: 0; top: var(--space-2); bottom: var(--space-8); width: 16px; border: 2px dashed var(--accent-text); border-right: 0; opacity: .4; border-radius: var(--radius-lg) 0 0 var(--radius-lg); pointer-events: none; }
.orbit-loopline::after { content: ""; position: absolute; right: -2px; top: -6px; border-left: 8px solid var(--accent-text); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.orbit-band { margin: 0; }
.orbit-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-secondary); }
.orbit-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-text); color: var(--bg-surface); font-size: var(--text-2xs); font-weight: var(--font-weight-bold); line-height: var(--leading-none); }
.orbit-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); align-items: start; }
.chev { position: relative; display: block; height: 20px; }
.chev::before { content: ""; position: absolute; left: 50%; top: var(--space-0-5); bottom: var(--space-2); width: 2px; background: var(--text-tertiary); transform: translateX(-50%); }
.chev::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-top: 8px solid var(--text-tertiary); border-left: 6px solid transparent; border-right: 6px solid transparent; }
.chev--band { height: 30px; margin: var(--space-2) 0; }
.chev--band::before { background: var(--accent-text); width: 3px; }
.chev--band::after { border-top-color: var(--accent-text); border-top-width: 10px; border-left-width: 7px; border-right-width: 7px; }
.orbit-return { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-secondary); }
.orbit-return strong { color: var(--text-primary); }
.orbit-return-text { min-width: 0; }
.loop-mark { flex: none; font-size: var(--text-md); color: var(--accent-text); line-height: var(--leading-none); }
.node { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); min-width: 0; }
.node>summary { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3); cursor: pointer; list-style: none; min-width: 0; }
.node>summary::-webkit-details-marker { display: none; }
.node-cap { flex: none; font-size: var(--text-2xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); color: var(--accent-text); }
.node-t { flex: 1 1 0; min-width: 0; font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-normal); word-break: keep-all; }
.node-more { flex: none; font-size: var(--text-2xs); color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-2); white-space: nowrap; }
.node[open]>summary .node-more { color: var(--accent-text); }
.more-b { display: none; }
.node[open]>summary .more-a { display: none; }
.node[open]>summary .more-b { display: inline; }
.node-shot { padding: 0 var(--space-3) var(--space-3); }
.node-shot img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.node-note { margin: 0; padding: 0 var(--space-3) var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-normal); }
.node-note strong { color: var(--text-secondary); }
.node--soon .node-more { border-style: dashed; }
@media (min-width:760px) {
  .orbit { width: min(94vw, 1000px); margin-left: 50%; transform: translateX(-50%); padding-left: var(--space-8); }
  .orbit-loopline { width: 22px; }
  .orbit-label { font-size: var(--text-sm); }
  .orbit-step { width: 24px; height: 24px; font-size: var(--text-xs); }
  .orbit-row--3 { grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-3); }
  .orbit-row--3 .node[open] { grid-column: 1 / -1; }
  .orbit-row--2 { grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
  .chev { align-self: center; height: auto; width: 26px; min-height: 16px; }
  .chev::before { left: var(--space-0-5); right: var(--space-2); top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
  .chev::after { left: auto; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--text-tertiary); border-right: 0; }
  .chev--band { width: auto; height: 34px; }
  .chev--band::before { left: 50%; right: auto; top: var(--space-0-5); bottom: var(--space-2); width: 2px; height: auto; transform: translateX(-50%); }
  .chev--band::after { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--accent-text); border-bottom: 0; }
  .node>summary { padding: var(--space-4); }
  .node-t { font-size: var(--text-base); }
  .node-more { font-size: var(--text-xs); }
  .node-shot img { max-width: 360px; }
  .orbit-return { font-size: var(--text-base); }
}
.nowrap { white-space: nowrap; }
.disclaimer-line { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-normal); word-break: keep-all; }
.disclaimer-line strong { color: var(--text-secondary); }

/* ── 3. 브랜드 v2 손질 — 헤더 록업 · ✦ 아이브로우 · 버튼 · 폼 · 카페24 ─────────
   components.css 가 .brand/.btn/.wrap/.lead 를 그리고, 여기선 이 사이트의 자리만 정한다. */
body { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1 0 auto; }
.site-header { background: var(--nav-bg); backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur)); border-bottom: 1px solid var(--border-subtle); }
.header-inner { min-height: var(--header-height); padding: var(--space-2) var(--space-6); padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); }
@media (min-width: 769px) { .nav-main { display: flex; gap: var(--space-0-5); align-items: center; } }
.nav-main a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; background: none; border: 0; }
.nav-main a.cta-link { background: var(--color-accent); color: var(--on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); margin-left: var(--space-2); }
.nav-main a.cta-link:hover { background: var(--accent-hover); color: var(--on-accent); }
.tabbar a.tabbar-cta { background: var(--color-accent); color: var(--on-accent); }
/* 챕터 라벨 — 빨간 선 대신 ✦ 하나. 글자 없는 라벨(:empty)은 ✦ 만 남는다. */
.eyebrow { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); text-transform: none; color: var(--accent-text); text-align: center; }
.eyebrow::before { content: var(--divider-glyph); color: var(--brand-mark); font-size: var(--text-sm); line-height: var(--leading-none); }
.eyebrow:empty { margin: 0 0 var(--space-5); }
/* 제목 위계 — 랜딩 히어로 44 · 섹션 36 · 소제목 24. 굵기는 display(500) 하나. */
.hero-title, .hero h1 { font-size: var(--text-display); font-weight: var(--font-weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: var(--space-4) 0; }
.hero-label { font-size: var(--text-base); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-wide); color: var(--text-tertiary); font-family: var(--font-sans); }
.section-title { font-size: var(--text-3xl); font-weight: var(--font-weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.origin-title { font-size: var(--text-2xl); font-weight: var(--font-weight-display); }
@media (max-width: 640px) {
  .hero-title, .hero h1 { font-size: var(--text-3xl); }
  .section-title { font-size: var(--text-2xl); }
  .origin-title { font-size: var(--text-xl); }
}
.hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin: var(--space-8) 0 var(--space-5); }
.block { display: flex; width: 100%; justify-content: center; }
.form-group { display: grid; gap: var(--space-2); }
.footer-brand .brand { --wordmark-size: var(--text-base); --brand-mark-size: var(--space-5); }
/* 카페24 앱 랜딩 — 스토어 1:1 매칭 화면. 전역 내비 없이 록업만, 680 읽기 컬럼 */
.c24 section { padding: var(--space-16) 0; border-bottom: 1px solid var(--border-subtle); }
.c24 section:last-of-type { border-bottom: 0; }
.c24 h1 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: var(--space-5) 0 0; text-wrap: balance; }
.c24 h2 { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-xl); line-height: var(--leading-snug); margin: 0 0 var(--space-3); }
.c24 h3 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); }
.c24 p { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.c24 .lead { margin-top: var(--space-4); }
.c24 .cta { margin-top: var(--space-6); }
.c24 .feat { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
.c24 .feat > div { padding: var(--space-5) var(--space-6); border: 1px solid var(--border-emphasis); border-radius: var(--card-radius); background: var(--bg-surface); }
.c24 .feat p { margin-top: var(--space-1); font-size: var(--text-sm); }
.c24 ol { margin: var(--space-5) 0 0; padding-left: var(--space-6); color: var(--text-secondary); }
.c24 ol li { margin: var(--space-2) 0; }
.c24 ol li b { color: var(--text-primary); }
.c24 .free { padding: var(--space-5) var(--space-6); border-radius: var(--card-radius); background: var(--bg-surface); border: 1px solid var(--border-emphasis); margin-top: var(--space-2); }
.c24 .free p:first-child { margin-top: 0; }
.c24 .colophon { padding: var(--space-8) 0 var(--space-12); font-size: var(--text-sm); color: var(--text-secondary); }
.c24 .colophon a { color: inherit; }
/* 내비·탭바·버튼·록업은 본문 링크가 아니다 — components.css 의 본문 밑줄이 새지 않게. */
.nav-main a, .tabbar a, .btn, .brand, .footer-nav a, .reel-link { text-decoration: none; }
.form-error { min-height: 1.25rem; }

/* ── 4. 안내 화면 (welcome · install · discord-bot-diy) — 인라인 스타일 261개를 접은 자리 ─────
   카드 한 장 = .glass-card.guide-card > .guide-row > [.guide-step-tag | .guide-body]. 값은 전부 토큰. */
.guide { padding-bottom: var(--space-20); }
.guide-col { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.guide-col--wide { max-width: 760px; }
.guide-col--loose { max-width: 720px; gap: var(--space-10); }
.guide-card { padding: var(--space-6) var(--space-8); }
.guide-card--lg { padding: var(--space-8); }
.guide-card--warn { border-color: var(--color-warning); }
.guide-card[id] { scroll-margin-top: var(--space-20); }
.guide-row { display: flex; align-items: flex-start; gap: var(--space-5); }
.guide-body { flex: 1 1 0; min-width: 0; }
.guide-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.guide-head h2 { margin: 0; font-size: var(--text-xl); }
.guide-step-tag { flex-shrink: 0; margin-top: var(--space-0-5); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-accent); color: var(--on-accent); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); white-space: nowrap; line-height: var(--leading-normal); }
.guide-step-tag--done { background: var(--color-success); }
.guide-step-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--on-accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.guide-h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.guide-p { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.guide-p--lead { font-size: var(--text-base); margin-bottom: var(--space-5); }
.guide-p:last-child { margin-bottom: 0; }
.guide-label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.guide-list { margin: 0 0 var(--space-3); padding-left: var(--space-6); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.guide-list li { margin: 0 0 var(--space-1); }
.guide-list:last-child { margin-bottom: 0; }
.guide-p strong, .guide-list strong, .guide-note strong, .guide-h2 strong { color: var(--text-primary); }
.guide-p a, .guide-list a { color: var(--text-primary); text-decoration: underline; }
.guide-link { font-weight: var(--font-weight-semibold); }
.guide-note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--info-bg); border-left: 2px solid var(--color-info); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.guide-note--warn { background: var(--warning-bg); border-left-color: var(--color-warning); }
.guide-note--danger { background: var(--danger-bg); border-left-color: var(--color-danger); }
.guide-note-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-caps); color: var(--info-text); }
.guide-note--warn .guide-note-label { color: var(--warning-text); }
.guide-note--danger .guide-note-label { color: var(--danger-text); }
.guide-status-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-1); border-radius: 50%; background: var(--color-success); vertical-align: middle; }
.guide-divider { margin: var(--space-6) 0; text-align: center; }
.guide-divider .hint-line { margin: 0; }
.guide-foot { margin-top: var(--space-8); padding: var(--space-6); text-align: center; }
.guide-foot .hint-line { margin: 0 0 var(--space-3); }
.guide-foot a { color: var(--accent-text); }
.page-hero .guide-hero-em { margin-top: var(--space-2); color: var(--accent-text); font-weight: var(--font-weight-semibold); }
.guide-details { margin-top: var(--space-6); }
.guide-summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--bg-elevated); font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.guide-summary::-webkit-details-marker { display: none; }
.guide-details-body { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
/* 재발송 요청 */
.resend-title { margin: 0 0 var(--space-5); font-size: var(--text-lg); text-align: center; color: var(--text-secondary); }
.resend-card { padding: var(--space-10) var(--space-8); }
.resend-hint { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.resend-hint .hint-line { margin: 0; text-align: center; }
.resend-form { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-emphasis); }
.resend-form .hint-line { margin: 0 0 var(--space-5); }
.resend-result { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-emphasis); }
.resend-result--center { text-align: center; }
.resend-receipt { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
.resend-receipt-label { margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); }
.resend-rows { margin: 0; padding: 0; }
.resend-msg { margin: 0 0 var(--space-2); color: var(--text-primary); font-size: var(--text-base); }
.resend-result .hint-line { margin: 0 0 var(--space-5); }
/* 팝업 — components.css 의 .modal-overlay 는 기본 표시(flex)라 hidden 속성으로 닫는다 */
.popup-card { width: 100%; max-width: 400px; padding: var(--space-10) var(--space-8); text-align: center; }
.popup-card .hint-line { margin: 0 0 var(--space-6); font-size: var(--text-sm); line-height: var(--leading-normal); }