/* ============================================================
   Syntitan page styles — scoped port of the standalone design.
   Custom properties namespaced --syn-*; every selector scoped
   under .syntitan-page so global header/footer/tokens stay intact.
   Fonts (Manrope/Pretendard) load globally via theme enqueue.
   ============================================================ */

.syntitan-page {
  /* Color tokens reference the theme design system (variables.css) so the
     page stays in sync with global brand colors. Literal fallbacks match. */
  --syn-c-primary:        var(--c-accent-violet, #8A77E0);
  --syn-c-primary-hover:  var(--c-accent-violet-strong, #6f5cd6);
  --syn-c-primary-deep:   #5a48b8;
  --syn-c-primary-soft:   #f3f0fc;
  --syn-c-primary-ghost:  #faf9fe;
  --syn-c-accent:         var(--c-accent-blue, #175dff);

  --syn-c-success:        var(--c-accent-green, #00c950);
  --syn-c-success-soft:   #d7f7e3;
  --syn-c-warn:           #d97706;
  --syn-c-warn-soft:      #fef3c7;
  --syn-c-critical:       var(--c-accent-pink, #ff266a);
  --syn-c-critical-soft:  #ffe1ea;

  --syn-c-ink:        var(--c-text-heading, #1c1c1c);
  --syn-c-ink-soft:   var(--c-text-body, rgba(28,28,28,0.82));
  --syn-c-muted:      var(--c-text-muted, #5f5f5d);
  --syn-c-line:       var(--c-border-light, rgba(28,28,28,0.08));
  --syn-c-line-soft:  var(--c-border-subtle, rgba(28,28,28,0.06));
  --syn-c-bg:         var(--c-bg-white, #ffffff);
  --syn-c-bg-soft:    var(--c-bg-light, #fafaf9);
  --syn-c-bg-deep:    var(--c-bg-dark, #1c1c1c);

  /* Inherit the site's actual font stack so the page matches global chrome */
  --syn-f-sans: var(--font-primary, 'Pretendard Variable', 'Pretendard', ui-sans-serif, system-ui, sans-serif);
  --syn-f-mono: var(--font-mono, 'Geist Mono', ui-monospace, monospace);

  --syn-s-page:    clamp(20px, 4vw, 80px);
  --syn-s-section: clamp(80px, 10vw, 144px);
  --syn-s-block:   clamp(40px, 5vw, 72px);

  --syn-r-sm: 6px;
  --syn-r-md: 8px;
  --syn-r-lg: 12px;
  --syn-r-xl: 16px;

  --syn-sh-sm: 0 1px 2px rgba(28,28,28,0.05);
  --syn-sh-md: 0 6px 20px rgba(28,28,28,0.06), 0 1px 2px rgba(28,28,28,0.04);
  --syn-sh-lg: 0 16px 48px rgba(28,28,28,0.08), 0 2px 6px rgba(28,28,28,0.04);
}
.syntitan-page * { box-sizing: border-box; margin: 0; padding: 0; }
.syntitan-page { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
.syntitan-page { scroll-behavior: auto; }
.syntitan-page *, .syntitan-page *::before, .syntitan-page *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.syntitan-page {
  font-family: var(--syn-f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--syn-c-ink);
  background: var(--syn-c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.syntitan-page a { color: var(--syn-c-primary); text-decoration: none; }
.syntitan-page a:hover { color: var(--syn-c-primary-hover); }
.syntitan-page button { font-family: inherit; cursor: pointer; }
.syntitan-page .skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--syn-c-ink); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 9999;
}
.syntitan-page .skip-link:focus { left: 12px; }
.syntitan-page .wrap { width: 100%; max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--container-px, 32px); }
.syntitan-page .site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--syn-c-line);
}
.syntitan-page .nav {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.syntitan-page .logo {
  display: inline-flex; align-items: center;
  color: var(--syn-c-ink); flex: 0 0 auto;
  transition: opacity .15s ease;
}
.syntitan-page .logo svg { display: block; height: 26px; width: auto; }
.syntitan-page .logo:hover { opacity: 0.72; }
.syntitan-page .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.syntitan-page .nav-link, .syntitan-page .nav-drop > button {
  font-size: 15px; color: var(--syn-c-ink); padding: 8px 14px;
  background: transparent; border: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s ease;
}
.syntitan-page .nav-link:hover, .syntitan-page .nav-drop > button:hover { color: var(--syn-c-primary); }
.syntitan-page .nav-drop { position: relative; }
.syntitan-page .nav-drop > button::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 3px;
  transition: transform .15s ease;
}
.syntitan-page .nav-drop:hover > button::after { transform: rotate(-135deg) translateY(2px); }
.syntitan-page .nav-menu {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 320px;
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: 14px;
  box-shadow: var(--syn-sh-lg);
  padding: 14px; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.syntitan-page .nav-drop:hover .nav-menu, .syntitan-page .nav-drop:focus-within .nav-menu {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.syntitan-page .nav-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--syn-c-ink); font-weight: 500;
}
.syntitan-page .nav-menu a:hover { background: var(--syn-c-primary-soft); }
.syntitan-page .nav-menu a b { font-size: 15px; font-weight: 600; color: var(--syn-c-ink); }
.syntitan-page .nav-menu a span { font-size: 13px; color: var(--syn-c-muted); font-weight: 400; }
.syntitan-page .nav-actions { display: flex; align-items: center; gap: 12px; }
.syntitan-page .nav-globe {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--syn-c-ink-soft);
}
.syntitan-page .nav-globe:hover { color: var(--syn-c-primary); }
.syntitan-page .nav-globe svg { width: 22px; height: 22px; }
.syntitan-page .btn-architect {
  display: inline-flex; align-items: center;
  background: #fff; color: var(--syn-c-ink);
  font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--syn-c-line);
  transition: border-color .15s ease, background .15s ease;
}
.syntitan-page .btn-architect:hover { border-color: var(--syn-c-ink); background: var(--syn-c-bg-soft); color: var(--syn-c-ink); }
.syntitan-page .nav-cta {
  display: inline-flex; align-items: center;
  background: var(--syn-c-ink); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--syn-c-ink);
  transition: background .15s ease, border-color .15s ease;
}
.syntitan-page .nav-cta:hover { background: var(--syn-c-primary); border-color: var(--syn-c-primary); color: #fff; }
.syntitan-page .mobile-toggle { display: none; }
.syntitan-page .hero {
  position: relative;
  padding: clamp(72px, 10vw, 132px) 0 clamp(64px, 9vw, 112px);
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(5,150,105,0.05), transparent 60%),
    linear-gradient(180deg, var(--syn-c-primary-ghost) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--syn-c-line);
  overflow: hidden;
}
.syntitan-page .hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.syntitan-page .eyebrow {
  display: inline-block;
  font-family: var(--syn-f-sans);
  /* eyebrow 보라 통일 (홈/캡슐/어바웃과 동일 --c-accent-violet) */
  font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--c-accent-violet);
  letter-spacing: 0.06em;
}
.syntitan-page .hero h1 {
  font-size: var(--fs-hero, 60px);
  line-height: var(--lh-tight, 1.05); letter-spacing: var(--ls-display-xl, -1.5px);
  font-weight: 700; color: var(--syn-c-ink);
  margin: 24px 0 22px;
  max-width: 640px;
}
.syntitan-page .hero h1 .turn { display: block; font-weight: 700 !important; color: var(--syn-c-primary); }
.syntitan-page .hero-sub {
  font-size: var(--fs-body-lg, 18px); line-height: var(--lh-body, 1.5); color: var(--syn-c-ink-soft);
  max-width: 580px; margin-bottom: 8px;
}
.syntitan-page .cta-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center;
}
.syntitan-page .hero .cta-row { margin-top: 44px; }
.syntitan-page .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.syntitan-page .btn-primary { background: var(--syn-c-primary); color: #fff; border-color: var(--syn-c-primary); box-shadow: var(--syn-sh-md); }
.syntitan-page .btn-primary:hover { background: var(--syn-c-primary-hover); border-color: var(--syn-c-primary-hover); color: #fff; }
.syntitan-page .btn-dark { background: var(--syn-c-ink); color: #fff; border-color: var(--syn-c-ink); box-shadow: var(--syn-sh-md); }
.syntitan-page .btn-dark:hover { background: #000; border-color: #000; color: #fff; }
.syntitan-page .btn-secondary { background: transparent; color: var(--syn-c-ink); border-color: var(--c-border-interactive, rgba(28,28,28,0.4)); }
.syntitan-page .btn-secondary:hover { border-color: var(--syn-c-ink); }
.syntitan-page .btn-ghost { background: transparent; color: var(--syn-c-ink-soft); border-color: transparent; padding: 14px 16px; }
.syntitan-page .btn-ghost:hover { color: var(--syn-c-primary); }
/* Hero CTAs: equal box for both buttons (10/18 + 1px border = same height). */
.syntitan-page .cta-row .btn { padding: 10px 18px; }
/* Match the header CTA hover exactly: subtle fill, no border-color shift. */
.syntitan-page .hero .cta-row .btn-secondary:hover {
  background: rgba(28,28,28,0.04);
  border-color: var(--c-border-interactive, rgba(28,28,28,0.4));
}
.syntitan-page .hero .cta-row .btn-dark:hover { background: #2a2a2a; border-color: #2a2a2a; }
.syntitan-page .hero-mock {
  position: relative;
}
.syntitan-page .hero-mock-img {
  display: block;
  width: 100%;
  height: auto;
}
.syntitan-page .mock-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.syntitan-page .mock-name {
  font-size: 13px; font-weight: 600; color: var(--syn-c-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.syntitan-page .mock-name::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--syn-c-warn); box-shadow: 0 0 0 3px rgba(217,119,6,0.2);
}
.syntitan-page .mock-pill {
  font-family: var(--syn-f-mono); font-size: 10px; font-weight: 600;
  color: var(--syn-c-primary); background: var(--syn-c-primary-soft);
  padding: 4px 9px; border-radius: 999px; letter-spacing: 0.06em;
}
.syntitan-page .score-block {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--syn-c-line-soft);
  align-items: center;
}
.syntitan-page .score-circle {
  position: relative; width: 124px; height: 124px;
}
.syntitan-page .score-circle svg { transform: rotate(-90deg); }
.syntitan-page .score-circle .rb { fill: none; stroke: var(--syn-c-line-soft); stroke-width: 10; }
.syntitan-page .score-circle .rf {
  fill: none; stroke: var(--syn-c-warn); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 345; stroke-dashoffset: 96;
}
.syntitan-page .score-circle .rn {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.syntitan-page .score-circle .rn b {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--syn-c-ink);
}
.syntitan-page .score-circle .rn span {
  font-size: 10px; font-family: var(--syn-f-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--syn-c-muted);
}
.syntitan-page .score-meta {
  display: flex; flex-direction: column; gap: 6px;
}
.syntitan-page .score-meta .sm-label {
  font-family: var(--syn-f-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--syn-c-muted);
}
.syntitan-page .score-meta .sm-status {
  font-size: 18px; font-weight: 700; color: var(--syn-c-warn);
  letter-spacing: -0.01em;
}
.syntitan-page .score-meta .sm-note { font-size: 13px; color: var(--syn-c-ink-soft); }
.syntitan-page .gap-list { padding: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.syntitan-page .gap-list h5 {
  font-family: var(--syn-f-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--syn-c-muted); margin-bottom: 4px;
}
.syntitan-page .gap-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--syn-c-ink); padding: 4px 0;
}
.syntitan-page .gap-row::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 6px;
}
.syntitan-page .gap-row.crit::before { background: var(--syn-c-critical); }
.syntitan-page .gap-row.warn::before { background: var(--syn-c-warn); }
.syntitan-page .gap-row.info::before { background: var(--syn-c-muted); }
.syntitan-page .mock-next {
  margin-top: 18px; padding: 14px 16px;
  background: var(--syn-c-primary-soft);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.syntitan-page .mock-next .mn-l {
  font-size: 13px; color: var(--syn-c-primary-deep);
}
.syntitan-page .mock-next .mn-l b { display: block; font-size: 11px; font-family: var(--syn-f-mono); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--syn-c-primary); margin-bottom: 2px; }
.syntitan-page .mock-next .mn-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--syn-c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.syntitan-page .release-ready-pill {
  position: absolute; top: -12px; right: 26px;
  font-family: var(--syn-f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--syn-c-success); background: #fff;
  border: 1px solid var(--syn-c-success-soft);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: var(--syn-sh-sm);
}
.syntitan-page .anchor-nav {
  position: sticky; top: 64px; z-index: 50;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--syn-c-line);
}
.syntitan-page .anchor-inner {
  display: flex; justify-content: center; gap: 18px; overflow-x: auto;
  scrollbar-width: none;
}
.syntitan-page .anchor-inner::-webkit-scrollbar { display: none; }
.syntitan-page .anchor-inner a {
  flex: 0 0 auto; padding: 14px 14px; font-size: 13px; color: var(--syn-c-muted);
  font-weight: 500; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.syntitan-page .anchor-inner a:hover { color: var(--syn-c-ink); }
.syntitan-page .anchor-inner a.active { color: var(--syn-c-primary); border-bottom-color: var(--syn-c-primary); }
.syntitan-page section { padding: var(--syn-s-section) 0; position: relative; scroll-margin-top: 128px; }
.syntitan-page section + section { border-top: 1px solid var(--syn-c-line-soft); }
.syntitan-page section.alt { background: var(--syn-c-bg-soft); border-top: 1px solid var(--syn-c-line); border-bottom: 1px solid var(--syn-c-line); }
/* .alt 경계 선 겹침(2px) 방지: alt 다음 섹션의 위선 제거 → alt의 아래선 하나로 1px */
.syntitan-page .alt + section { border-top: 0 !important; }
/* #workflow(그룹 마감 아래선 보유) 다음 .alt의 위선 제거 → #workflow 아래선 하나로 1px */
.syntitan-page #workflow + .alt { border-top: 0 !important; }
/* #first-value는 #blocked과 같은 섹션 — 구분선 제거 + 위 패딩 제거(간격 하나만) */
.syntitan-page #first-value { border-top: none; padding-top: 0; }
.syntitan-page section.dark {
  background: var(--syn-c-bg-deep); color: #fff;
  border-top: 1px solid #1c1c1c; border-bottom: 1px solid #1c1c1c;
}
.syntitan-page .sec-head { max-width: 760px; margin: 0 auto var(--syn-s-block); text-align: center; }
.syntitan-page .sec-head.left { margin-left: 0; text-align: left; }
.syntitan-page .sec-head .eyebrow { margin-bottom: 16px; }
.syntitan-page .sec-head h2 {
  font-size: var(--fs-section-title, 40px);
  line-height: var(--lh-section-title, 1.08); letter-spacing: var(--ls-section-title, -1px);
  font-weight: var(--fw-section-title, 600); color: var(--syn-c-ink);
}
.syntitan-page section.dark .sec-head h2 { color: #fff; }
.syntitan-page .sec-head p {
  margin-top: 18px; font-size: var(--fs-section-subtitle, 18px); line-height: var(--lh-section-subtitle, 1.5);
  color: var(--syn-c-ink-soft);
}
.syntitan-page section.dark .sec-head p { color: rgba(255,255,255,0.7); }

/* ----- Inside the workflow: left sub-nav ----- */
.syntitan-page .subnav-layout { display: grid; grid-template-columns: 264px 1fr; gap: 56px; align-items: start; }
.syntitan-page .subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 128px; }
.syntitan-page .subnav-btn {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: none; border: 0;
  padding: 10px 14px; font-family: var(--syn-f-sans); font-size: 14px;
  font-weight: 500; color: var(--syn-c-muted); cursor: pointer;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.syntitan-page .subnav-btn:hover { color: var(--syn-c-ink); background: rgba(28,28,28,0.04); }
.syntitan-page .subnav-btn.active {
  color: var(--syn-c-primary); font-weight: 600;
  background: var(--syn-c-primary-soft);
}
.syntitan-page .subnav-btn.active .subnav-step { color: var(--syn-c-primary); opacity: 1; }
.syntitan-page .subnav-step { font-family: var(--syn-f-mono); font-size: 12px; opacity: .55; }
.syntitan-page .subnav-panel { display: none; }
.syntitan-page .subnav-panel.active { display: block; animation: synFade .25s ease; }
.syntitan-page .subpanel-title { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.25; color: var(--syn-c-ink); margin-bottom: 12px; }
.syntitan-page .subpanel-lead { font-size: 15px; line-height: 1.6; color: var(--c-text-body); margin-bottom: 24px; }
@keyframes synFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.syntitan-page .hook-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
/* Korean-safe wrap + break long ·-joined English tokens (Privacy·Integrity·…) */
.syntitan-page .hook-card,
.syntitan-page .hook-card h3,
.syntitan-page .hook-card p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.syntitan-page .hook-card {
  background: #fff; border: 1px solid rgba(138,119,224,0.35) !important; border-radius: var(--syn-r-lg);
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 12px; min-height: 250px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.syntitan-page .hook-card:hover {
  transform: translateY(-3px); box-shadow: var(--syn-sh-md);
  border-color: rgba(138,119,224,0.6) !important;
}
/* 홈 .ai-models__card-icon 스타일 통일 — 배경 없이 굵은 stroke 아이콘만 */
.syntitan-page .hook-card .hc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: var(--syn-c-primary);
  margin-bottom: 12px;  /* 아이콘↔제목 간격 추가 (flex gap 12 + 12 = 24) */
}
.syntitan-page .hook-card .hc-icon svg { width: 100%; height: 100%; }
.syntitan-page .hook-card h3 {
  font-size: 22px !important; font-weight: 700 !important; line-height: 1.25; color: var(--syn-c-ink);
  letter-spacing: -0.3px;
}
.syntitan-page .hook-card p {
  font-size: 15px; line-height: 1.55; color: var(--c-text-subtle, rgba(28,28,28,0.5)); flex: 1;
}
.syntitan-page .hook-card .hc-cta {
  font-size: 14px; font-weight: 600; color: var(--syn-c-primary);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 20px;
}
.syntitan-page .hook-card .hc-cta::after { content: "\2193"; transition: transform .12s ease; }
.syntitan-page .hook-card:hover .hc-cta::after { transform: translateY(3px); }
.syntitan-page .preview-label {
  margin-top: 40px; margin-bottom: 14px;
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--syn-c-muted);
  text-align: center;
}
/* 홈 'Barriers to Reliable AI' 카드 패턴 — 흰색 wrapper(라운드 12, 1px border, padding 32) + 3-cell + 셀간 border-left */
.syntitan-page .hook-preview {
  margin-top: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background: #fff;
  border: 1px solid var(--syn-c-line);
  border-radius: var(--syn-r-lg);
  padding: 32px;
}
.syntitan-page .preview-card {
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 0 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left; align-items: flex-start;
  position: relative;
}
.syntitan-page .preview-card:first-child { padding-left: 0; }
.syntitan-page .preview-card:last-child { padding-right: 0; }
.syntitan-page .hook-preview .preview-card + .preview-card {
  border-left: 1px solid var(--syn-c-line) !important;
}
.syntitan-page .preview-card .pv-pill {
  align-self: flex-start;
  font-family: var(--syn-f-mono); font-size: 11px; text-transform: uppercase;
  color: var(--syn-c-primary);
}
.syntitan-page .preview-card h4 {
  font-size: 18px; font-weight: 700; color: var(--syn-c-ink); letter-spacing: -0.2px;
}
.syntitan-page .preview-card p {
  font-size: var(--fs-small, 14px); line-height: 1.55; color: var(--c-text-subtle, rgba(28,28,28,0.5));
}
/* Anchor-group internal seams = SMALL (--syn-s-block, clamp 40-72).
   Group boundaries keep default section padding (clamp 80-144) for breathing room. */

/* Group: "How it works" — #first-value ↔ #two-gaps ↔ #workflow (overview).
   #workflow-detail starts a new group ("Inside the workflow" deep dive). */
.syntitan-page #two-gaps {
  border-top: 0;  /* 그룹 내부 seam — 라인 없음 */
  padding-top: var(--syn-s-block);
  padding-bottom: var(--syn-s-block);
}
.syntitan-page #workflow {
  background: linear-gradient(180deg, var(--syn-c-bg) 0%, var(--syn-c-bg) 55%, #f8f6fd 80%, #f8f6fd 100%);
  border-top: 0;
  border-bottom: 1px solid var(--syn-c-line);
  padding-top: var(--syn-s-block);
}

/* Group: "Release & Run Binding" — #release-state ↔ #run-binding ↔ #agents */
.syntitan-page #release-state { padding-bottom: var(--syn-s-block); }
.syntitan-page #run-binding {
  border-top: 0;
  padding-top: var(--syn-s-block);
  padding-bottom: var(--syn-s-block);
}
.syntitan-page #agents { border-top: 0; padding-top: var(--syn-s-block); }

/* Group: "FAQ" — (learn-concepts 임시 숨김. 복구 시 아래 padding-bottom 원복) */
/* phase-1: learn-concepts 숨김 후 FAQ가 마지막 콘텐츠 섹션 → 상단(128)과 균형 잡힌 하단 여백
   (CTA 배너 자체 상단 패딩 64가 추가로 분리). 비대칭 51px → 균형 96px */
.syntitan-page #faq { padding-bottom: clamp(72px, 8vw, 96px); }
.syntitan-page #learn-concepts {
  border-top: 0;
  background: #fff;
  padding-top: var(--syn-s-block);
  padding-bottom: clamp(120px, 12vw, 160px);  /* FAQ 그룹 끝 ↔ CTA 배너 경계 — 큰 여백으로 영역 분리 */
}

/* Group: "Proof & fit" — #proof-path ↔ #fit. proof-path 흰색 + 그룹 경계로 상단선만 유지 */
.syntitan-page #proof-path {
  background: transparent;
  border-bottom: 0;
  /* padding-top: default(--syn-s-section) — Release&RunBinding 그룹 끝 ↔ Proof&fit 시작 boundary */
  padding-bottom: var(--syn-s-block);  /* proof-path → use-cases는 그룹 내부 small */
}
.syntitan-page #fit {
  padding-top: var(--syn-s-block);
  /* padding-bottom: 그룹 경계(→ #faq)라 default(--syn-s-section) 유지 */
  border-top: 0;
}
/* #use-cases: proof-path 그룹 내부 → small padding 양쪽 + seam 없음 */
.syntitan-page #use-cases {
  border-top: 0;
  padding-top: var(--syn-s-block);
  padding-bottom: var(--syn-s-block);
}
/* No card wrap — steps sit directly on the light section */
.syntitan-page .workflow-stepper {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  position: relative;
  background: none; border: 0; box-shadow: none;
  padding: 12px 0;
}
.syntitan-page .step {
  text-align: center;
  padding: 0 8px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
@keyframes syn-dots-flow {
  from { background-position: 0 center; }
  to   { background-position: 9px center; }
}
.syntitan-page .step:not(:last-child)::after {
  content: ""; position: absolute;
  top: 21px; right: -8%; width: 16%; height: 4px;
  background-image: radial-gradient(circle, rgba(28,28,28,0.22) 1.2px, transparent 1.6px);
  background-size: 9px 4px; background-repeat: repeat-x; background-position: center;
  animation: syn-dots-flow 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .syntitan-page .step:not(:last-child)::after { animation: none; }
}
.syntitan-page .step-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--syn-f-mono); font-size: 14px; font-weight: 700;
  background: #fff;
  color: var(--syn-c-ink);
  border: 1px solid rgba(28,28,28,0.14);
  box-shadow: 0 2px 6px rgba(28,28,28,0.06);
}
.syntitan-page .step h4 {
  font-size: 15px; font-weight: 600; color: var(--syn-c-primary); letter-spacing: -0.01em;
  margin-top: 6px;
}
.syntitan-page .step p {
  font-size: 12.5px; line-height: 1.45; color: var(--syn-c-muted);
}
.syntitan-page .split {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.syntitan-page .split.flip { grid-template-columns: 1.05fr 1fr; }
.syntitan-page .split.flip > .split-text { order: 2; }
.syntitan-page .split.flip > .split-visual { order: 1; }
.syntitan-page .split-text h2 {
  font-size: var(--fs-section-title, 40px); line-height: var(--lh-section-title, 1.08); letter-spacing: var(--ls-section-title, -1px);
  font-weight: var(--fw-section-title, 600); color: var(--syn-c-ink); margin-bottom: 18px;
}
.syntitan-page .split-text > p { font-size: 16px; line-height: 1.65; color: var(--syn-c-ink-soft); max-width: 480px; }
.syntitan-page .split-text > p + p { margin-top: 12px; }
.syntitan-page .firstv-link {
  display: block; max-width: 720px;
  border-radius: var(--syn-r-lg);
}
.syntitan-page .firstv-svg {
  display: block; width: 100%; height: auto; max-width: 720px;
  border-radius: var(--syn-r-lg);
}
/* #first-value: enlarge the diagnosis visual, narrow + center the text */
.syntitan-page #first-value .split.flip {
  grid-template-columns: 1.45fr 0.9fr; align-items: center;
}
.syntitan-page #first-value .split-text { text-align: center; }
.syntitan-page #first-value .split-text > p {
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.syntitan-page .def-block {
  margin: 0 0 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--syn-c-line);
  border-radius: var(--syn-r-lg);
}
.syntitan-page .def-block h5 {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  color: var(--syn-c-primary); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.syntitan-page .def-block p { font-size: 15px; line-height: 1.6; color: var(--c-text-body); font-weight: 400; }
.syntitan-page .qual-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.syntitan-page .q-card {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease, transform .18s ease;
}
.syntitan-page .q-card:hover { border-color: rgba(138,119,224,0.4); transform: translateY(-2px); }
.syntitan-page .q-card .q-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--syn-c-primary-soft); color: var(--syn-c-primary);
}
.syntitan-page .q-card .q-icon svg { width: 22px; height: 22px; }
.syntitan-page .q-card h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--syn-c-ink); letter-spacing: -0.2px; line-height: 1.25; }
.syntitan-page .q-card p { font-size: 14px; line-height: 1.6; color: var(--c-text-body); }
.syntitan-page .tabs-wrap { display: flex; justify-content: center; margin-bottom: 32px; }
.syntitan-page .tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #fff; border: 1px solid var(--syn-c-line);
  border-radius: 12px;
}
.syntitan-page .tab-btn {
  font-size: 14px; font-weight: 600; padding: 9px 18px;
  border: none; background: transparent; border-radius: 8px;
  color: var(--syn-c-ink-soft); transition: background .15s ease, color .15s ease;
}
.syntitan-page .tab-btn[aria-selected="true"] {
  background: var(--syn-c-primary); color: #fff;
}
.syntitan-page .tab-panel { display: none; }
.syntitan-page .tab-panel.active { display: block; }
.syntitan-page .enh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.syntitan-page .enh-card {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.syntitan-page .enh-card .enh-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--syn-c-primary-soft); color: var(--syn-c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.syntitan-page .enh-card .enh-icon svg { width: 22px; height: 22px; }
.syntitan-page .enh-card h4 { font-size: 18px !important; font-weight: 700 !important; color: var(--syn-c-ink); letter-spacing: -0.2px; line-height: 1.25; }
.syntitan-page .enh-card p { font-size: 14px; line-height: 1.6; color: var(--c-text-body); }
.syntitan-page .path-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.syntitan-page .path-card {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.syntitan-page .path-card .path-num {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--syn-c-primary);
}
.syntitan-page .path-card h3 {
  font-size: 22px !important; font-weight: 700 !important; color: var(--syn-c-ink);
  letter-spacing: -0.3px; line-height: 1.2;
  margin-bottom: 8px;
}
.syntitan-page .path-card .path-when {
  font-size: 14px; line-height: 1.6; color: var(--c-text-body);
}
.syntitan-page .path-card .path-out {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--syn-c-line-soft);
  font-size: 13px; color: var(--syn-c-ink);
}
.syntitan-page .path-card .path-out b {
  display: block; font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--syn-c-primary); margin-bottom: 4px;
}
.syntitan-page .release-grid {
  display: grid; grid-template-columns: 0.75fr 1fr; gap: 24px; align-items: stretch;
}
/* #release-state: 서브타이틀 한 줄 들어가도록 sec-head 폭 확장 */
.syntitan-page #release-state .sec-head { max-width: none; }
/* #release-state: 데모를 wrap padding 너머 가장자리까지 넓게 */
.syntitan-page #release-state .release-grid {
  margin-left: calc(-1 * var(--container-px, 32px));
  margin-right: calc(-1 * var(--container-px, 32px));
}
.syntitan-page .modal-mock {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  box-shadow: var(--syn-sh-md); padding: 22px 24px;
  display: flex; flex-direction: column;
}
.syntitan-page .modal-mock h4 {
  font-size: 17px; font-weight: 700; color: var(--syn-c-ink); margin-bottom: 4px;
}
.syntitan-page .modal-mock > p { font-size: 13.5px; color: var(--syn-c-muted); margin-bottom: 18px; }
.syntitan-page .field-label {
  font-size: 13px; font-weight: 600; color: var(--syn-c-ink);
  display: block; margin-bottom: 8px;
}
.syntitan-page .field-label .field-optional {
  color: var(--syn-c-muted); font-weight: 400; margin-left: 4px;
}
.syntitan-page .modal-mock textarea {
  width: 100%; min-height: 56px; flex: 1;
  border: 1px solid var(--syn-c-line); border-radius: 10px; padding: 12px 14px;
  font-family: var(--syn-f-sans); font-size: 13.5px; color: var(--syn-c-ink);
  resize: vertical; background: #fff;
}
.syntitan-page .modal-mock textarea::placeholder { color: var(--syn-c-muted); }
.syntitan-page .modal-mock .modal-act {
  margin-top: 16px; display: flex; gap: 10px; justify-content: flex-end;
}
.syntitan-page .modal-mock .modal-act .btn { padding: 10px 18px; font-size: 13.5px; }

/* Publish release toast — anchored bottom-center of version-panel */
.syntitan-page .syn-toast {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 10px;
  background: #303135; color: #fff;
  font-family: var(--syn-f-sans); font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9; white-space: nowrap;
}
.syntitan-page .syn-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.syntitan-page .syn-toast__icon { display: inline-flex; align-items: center; color: #00C950; }
.syntitan-page .syn-toast__icon svg { width: 22px; height: 22px; }
.syntitan-page .version-panel {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  overflow: hidden; position: relative;
}
.syntitan-page .version-panel h4 {
  font-size: 12px; font-weight: 700; color: var(--syn-c-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 16px 20px; border-bottom: 1px solid var(--syn-c-line-soft);
  background: var(--syn-c-bg-soft);
}
.syntitan-page .v-item {
  padding: 16px 20px; border-bottom: 1px solid var(--syn-c-line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.syntitan-page .v-item:last-child { border-bottom: none; }
/* 현재 Release State 행 강조 — 보라 테두리 카드 */
.syntitan-page .v-item:has(.v-pill--current) {
  border: 1.5px solid var(--syn-c-primary);
  border-radius: 12px;
  margin: 10px;
  background: #FBFAFE;
}
.syntitan-page .v-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.syntitan-page .v-head .v-time { font-family: var(--syn-f-mono); font-size: 12px; color: var(--syn-c-muted); }
/* v-item violet emphasis flash — applied on publish in parallel with expand */
@keyframes syn-vitem-flash {
  0%   { background: rgba(138,119,224,0.12); }
  100% { background: transparent; }
}
.syntitan-page .v-item.is-just-published { animation: syn-vitem-flash 0.85s cubic-bezier(.22,1,.36,1); }

/* Version pills — match actual product UI (Current outline + version filled) */
.syntitan-page .v-head .v-tags { display: inline-flex; gap: 4px; align-items: center; }
.syntitan-page .v-head .v-pill {
  font-family: var(--syn-f-sans); font-size: 12px; font-weight: 500;
  padding: 1px 8px; border-radius: 8px;
  letter-spacing: 0; line-height: 1.5;
  border: 1px solid transparent;
  background: #F0F0F2; color: #7B7E85;
}
.syntitan-page .v-head .v-pill--current {
  background: var(--syn-c-primary); color: #fff;
  border-color: transparent; font-weight: 600;
}

.syntitan-page .v-act { font-size: 13.5px; color: var(--syn-c-ink); font-weight: 500; }
.syntitan-page .v-meta { font-family: var(--syn-f-mono); font-size: 11px; color: var(--syn-c-muted); }
/* Run-binding 2-column: left = title + diff-list / right = 3 stacked def-mini cards */
.syntitan-page .bind-2col {
  display: grid; grid-template-columns: minmax(320px, 1fr) 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.syntitan-page .bind-left { display: flex; flex-direction: column; gap: 40px; min-height: 100%; }
.syntitan-page .bind-2col { align-items: stretch; }
.syntitan-page .bind-left .diff-list { margin-top: auto; }
.syntitan-page .bind-2col .sec-head {
  text-align: left; max-width: none; margin: 0;
}
.syntitan-page .bind-2col .sec-head h2 { text-align: left; }
.syntitan-page .bind-2col .sec-head p { text-align: left; margin-left: 0; margin-right: 0; }
.syntitan-page .bind-2col .def-row {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
/* Diff list — simple stacked items under subtitle */
.syntitan-page .diff-list .dl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 0;
  padding-bottom: 12px; border-bottom: 1px solid var(--syn-c-line);
}
.syntitan-page .diff-list .dl-head h4 {
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--syn-c-ink); letter-spacing: -0.1px;
}
.syntitan-page .diff-list .dl-head small {
  font-family: var(--syn-f-mono); font-size: 11px; color: var(--syn-c-muted);
}
.syntitan-page .diff-list ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.syntitan-page .diff-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--syn-c-line-soft);
}
.syntitan-page .diff-list li:last-child { border-bottom: 0; }
.syntitan-page .diff-list .dl-num {
  font-family: var(--syn-f-mono); font-size: 12px; font-weight: 600;
  color: var(--syn-c-primary);
  flex: 0 0 auto; min-width: 16px;
  line-height: 1.5;
}
.syntitan-page .diff-list .dl-text {
  font-size: 14px; line-height: 1.5; color: var(--syn-c-ink);
  display: flex; flex-direction: column; gap: 2px;
}
.syntitan-page .diff-list .dl-text small {
  font-size: 12px; color: var(--syn-c-muted);
}
.syntitan-page .def-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: var(--syn-s-block);
}
.syntitan-page .def-mini {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.syntitan-page .def-mini .dm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: var(--syn-c-primary);
  margin-bottom: 4px;
}
.syntitan-page .def-mini .dm-icon svg { width: 100%; height: 100%; stroke-width: 2; }
.syntitan-page .def-mini .dm-tag {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--syn-c-primary); display: block;
}
.syntitan-page .def-mini h4 {
  font-size: 18px !important; font-weight: 700 !important; color: var(--syn-c-ink);
  letter-spacing: -0.2px; line-height: 1.25;
}
.syntitan-page .def-mini p { font-size: 14px; line-height: 1.6; color: var(--c-text-body); }
/* Diff section header (sits OUTSIDE the card now) */
.syntitan-page .dc-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.syntitan-page .dc-head h4 { font-size: 18px !important; font-weight: 700 !important; color: var(--syn-c-ink); letter-spacing: -0.2px; line-height: 1.25; }
.syntitan-page .dc-head small { font-family: var(--syn-f-mono); font-size: 11px; color: var(--syn-c-muted); }
/* Diff card: 3-column grid with vertical dividers between items */
.syntitan-page .diff-card {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 24px; box-shadow: var(--syn-sh-sm);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.syntitan-page .diff-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 24px;
}
.syntitan-page .diff-item:first-child { padding-left: 0; }
.syntitan-page .diff-item:last-child { padding-right: 0; }
.syntitan-page .diff-item + .diff-item { border-left: 1px solid var(--syn-c-line-soft); }
.syntitan-page .diff-item .di-num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--syn-c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--syn-f-mono); font-size: 12px; font-weight: 700;
}
.syntitan-page .diff-item .di-text {
  font-size: 14px; font-weight: 500; color: var(--c-text-body); line-height: 1.6;
}
.syntitan-page .diff-item .di-text small {
  display: block; font-weight: 400; color: var(--syn-c-muted); margin-top: 4px;
  font-size: 12.5px;
}
/* agent-grid: 가로 스크롤 캐러셀 — 실제 제품 에이전트 갤러리.
   ac-visual(이미지) / ac-tag(pill) / ac-q(제목) / ac-desc / ac-foot|ac-link 세로 스택. */
.syntitan-page .agent-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* snap/CSS smooth 제거 — 화살표 스크롤이 튕기던(흔들림) 원인 */
  -webkit-overflow-scrolling: touch;
  /* 하단 스크롤바 숨김 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.syntitan-page .agent-grid::-webkit-scrollbar { display: none; height: 0; }
.syntitan-page .agent-card {
  flex: 0 0 clamp(300px, 31%, 360px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  overflow: hidden;
}
.syntitan-page .agent-card .ac-visual {
  width: 100%;
  background: #F6F7F9; /* SVG 자체 배경과 동일 → 가장자리 흰 seam 방지 */
  overflow: hidden;
  font-size: 0; /* inline-svg 하단 여백 제거 */
}
/* SVG가 자체 배경을 포함해 박스를 꽉 채움 + 살짝 확대(1.06) */
.syntitan-page .agent-card .ac-visual svg {
  width: 100%; height: auto; display: block;
  transform: scale(1.06); transform-origin: center;
}
.syntitan-page .agent-card > .ac-tag,
.syntitan-page .agent-card > .ac-q,
.syntitan-page .agent-card > .ac-desc,
.syntitan-page .agent-card > .ac-pair,
.syntitan-page .agent-card > .ac-foot,
.syntitan-page .agent-card > .ac-link { padding-left: 24px; padding-right: 24px; }
/* tag: 둥근 네모 (결과 리포트 배지와 동일 라운드) */
.syntitan-page .agent-card .ac-tag {
  align-self: flex-start;
  margin: 24px 24px 0;
  padding: 5px 8px;
  font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--c-text-body);
  border: 1px solid var(--syn-c-line); border-radius: 7px;
  letter-spacing: 0; text-transform: none;
}
.syntitan-page .agent-card > .ac-tag { padding-left: 8px; padding-right: 8px; }
/* 제목 */
.syntitan-page .agent-card .ac-q {
  font-size: 17px !important; font-weight: 700 !important; line-height: 1.4;
  color: var(--syn-c-ink); letter-spacing: -0.2px;
  margin-top: 14px;
}
/* 설명 — 전체 표시(클램프 없음) */
.syntitan-page .agent-card .ac-desc {
  margin-top: 8px;
  font-size: 14px; line-height: 1.6; color: var(--c-text-body);
}
/* 필요 / 출력 — 위에 inset divider */
.syntitan-page .agent-card .ac-pair {
  position: relative;
  margin-top: 16px; padding-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.syntitan-page .agent-card .ac-pair::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px;
  height: 1px; background: var(--syn-c-line-soft);
}
.syntitan-page .agent-card .ac-row { font-size: 13.5px; line-height: 1.55; }
.syntitan-page .agent-card .ac-row b {
  display: block; font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  color: var(--syn-c-primary); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 3px;
}
.syntitan-page .agent-card .ac-row span { color: var(--c-text-body); }
/* footer (badge) — 하단 + 왼쪽 정렬 */
.syntitan-page .agent-card .ac-foot {
  margin-top: auto; padding-top: 18px; padding-bottom: 22px;
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
}
.syntitan-page .agent-card .ac-author {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-text-body);
}
.syntitan-page .agent-card .ac-author svg { width: 16px; height: 16px; }
.syntitan-page .agent-card .ac-badge {
  padding: 5px 10px;
  font-size: 12px; font-weight: 500; color: #2F62C4;
  background: #EAF1FE; border-radius: 8px; white-space: nowrap;
}
/* CTA 카드 링크 — 하단 정렬 */
.syntitan-page .agent-card--cta .ac-link {
  margin-top: auto; padding-top: 20px; padding-bottom: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--syn-c-ink);
  text-decoration: none; transition: color .15s, gap .15s;
}
.syntitan-page .agent-card--cta .ac-link svg { width: 18px; height: 18px; }
.syntitan-page .agent-card--cta .ac-link:hover { color: var(--syn-c-primary); gap: 10px; }
/* agent-carousel: 가로 스크롤 + 양옆 화살표 */
.syntitan-page .agent-carousel { position: relative; }
.syntitan-page .agent-nav__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px !important;
  /* 반투명 + 블러 (헤더 톤). 투명도 낮춰 카드 위에서 글래스가 보이게 */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(20, 16, 40, 0.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--syn-c-ink); cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.14);
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.syntitan-page .agent-nav__btn--prev { left: -22px; }
.syntitan-page .agent-nav__btn--next { right: -22px; }
/* 전역 [class*="__btn"]:hover { transform:none !important } 를 이겨 중앙정렬 유지 */
.syntitan-page .agent-nav__btn,
.syntitan-page .agent-nav__btn:hover:not(:disabled),
.syntitan-page .agent-nav__btn:active,
.syntitan-page .agent-nav__btn:focus {
  transform: translateY(-50%) !important;
}
.syntitan-page .agent-nav__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(138, 119, 224, 0.5);
  /* color는 그대로(ink) 유지 — hover 시 화살표 얇아 보이는 현상 방지 */
}
.syntitan-page .agent-nav__btn:disabled { opacity: 0; pointer-events: none; }
.syntitan-page .agent-nav__btn svg { width: 20px; height: 20px; }
/* Proof timeline — Linear changelog 패턴: 좌측정렬 + 풀폭 라인 + hollow/filled 점 */
.syntitan-page .proof-timeline {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  position: relative;
}
/* 풀폭 가로 라인 — 왼쪽 끝 fade-out (line top = pw-week 17.6 + row-gap 14 + row2_half 10 = 41.6 → 42) */
.syntitan-page .proof-timeline::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--syn-c-line) 0%,
    var(--syn-c-line) 92%,
    transparent 100%
  );
  z-index: 1;
}
.syntitan-page .proof-week {
  background: transparent; border: 0; border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 20px auto auto;
  row-gap: 14px;  /* pw-week가 dot보다 충분히 위로 올라가도록 breathing room */
  justify-items: start;
  align-items: center;
  align-content: start;
  text-align: left;
  position: relative;
}
.syntitan-page .proof-week h4 { margin-top: 8px; }
/* dot 1~3: halo의 LEFT EDGE를 텍스트 left:0과 정렬 (dot은 halo spread만큼 안쪽으로 밀어넣음) */
.syntitan-page .proof-week::before {
  content: "";
  grid-row: 2;
  width: 6px; height: 6px;
  margin-left: 5px;  /* halo spread 5px만큼 안으로 → halo 왼쪽 끝이 텍스트 왼쪽과 flush */
  border-radius: 50%;
  background: var(--syn-c-primary);
  border: 0;
  box-shadow:
    0 0 0 5px rgba(138,119,224,0.18),
    0 0 0 10px #fff;
  z-index: 2;
}
/* Week 4도 다른 dot과 동일 — 라인은 끝에서 fade out으로 흐름 마무리 */
.syntitan-page .proof-week .pw-week {
  grid-row: 1;
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syn-c-primary);
}
.syntitan-page .proof-week h4 {
  grid-row: 3;
  font-size: 18px !important; font-weight: 700 !important;
  color: var(--syn-c-ink); letter-spacing: -0.2px; line-height: 1.3;
}
.syntitan-page .proof-week .pw-flow {
  grid-row: 4;
  font-size: 13px; line-height: 1.55;
  color: var(--syn-c-muted);
  max-width: 100%;
}
/* Use cases: 6-col underlying grid. 1-3행 = 3장 (각 span 2), 마지막 2장은 span 3 으로 가운데 정렬 */
.syntitan-page .usecase-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
}
.syntitan-page .usecase { grid-column: span 2; }
.syntitan-page .usecase:nth-child(4) { grid-column: 2 / span 2; }
.syntitan-page .usecase:nth-child(5) { grid-column: 4 / span 2; }
.syntitan-page .usecase {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
/* 홈 .ai-models__card-icon 스타일 — 배경 없이 stroke 아이콘만, 큰 사이즈 */
.syntitan-page .usecase .uc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  color: var(--syn-c-primary);
  margin-bottom: 6px;
}
.syntitan-page .usecase .uc-icon svg {
  width: 100%; height: 100%; display: block;
}
/* svg root + 모든 자식의 stroke-width 강제 — viewBox별로 비율 보정 */
.syntitan-page .usecase .uc-icon svg,
.syntitan-page .usecase .uc-icon svg * { stroke-width: 2; }
/* 120x120 viewBox(financial-services 등)는 stroke-width 비례적으로 더 굵게
   (8→9: hook 카드 아이콘과 시각 굵기 맞춤) */
.syntitan-page .usecase .uc-icon svg[viewBox="0 0 120 120"] * { stroke-width: 9; }
/* 홈에서 가져온 SVG의 hardcoded stroke="black" → currentColor */
.syntitan-page .usecase .uc-icon svg [stroke="black"],
.syntitan-page .usecase .uc-icon svg [stroke="#000"],
.syntitan-page .usecase .uc-icon svg [stroke="#000000"] { stroke: currentColor; }
/* SVG 내부의 흰색 bg rect 숨기기 */
.syntitan-page .usecase .uc-icon svg > g > rect[fill="white"]:first-child,
.syntitan-page .usecase .uc-icon svg > rect[fill="white"]:first-child { display: none; }
.syntitan-page .usecase .uc-tag {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 700;
  color: var(--syn-c-primary); letter-spacing: 0.1em; text-transform: uppercase;
}
.syntitan-page .usecase h3 {
  font-size: 18px !important; font-weight: 700 !important; line-height: 1.3;
  color: var(--syn-c-ink); letter-spacing: -0.2px;
}
.syntitan-page .usecase p { font-size: 14px; line-height: 1.6; color: var(--syn-c-ink-soft); }
.syntitan-page .gaps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: stretch; /* 두 카드 동일 높이 */
  position: relative;
  margin-bottom: 36px;
  /* container query unit basis → + 위치를 카드 width 기반으로 계산 */
  container-type: inline-size;
}
.syntitan-page .gaps-grid::before {
  content: "+";
  position: absolute; left: 50%;
  /* phase-1: 카드 비주얼 제거 → 두 텍스트 카드 사이 수직 가운데 정렬 */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff; color: var(--syn-c-primary);
  border: 1px solid var(--syn-c-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; line-height: 1;
  z-index: 2;
  box-shadow: var(--syn-sh-sm);
}
.syntitan-page .gap-card {
  background: #fff; border: 1px solid var(--syn-c-line); border-radius: var(--syn-r-lg);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.syntitan-page .gap-card .gap-visual {
  width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #F6F4FB 0%, #EDE9F8 100%);
}
.syntitan-page .gap-card-body {
  /* class contains "-card" → ibm [class*="-card"] forces border/bg/radius; kill it */
  border: 0 !important; background: transparent !important; border-radius: 0 !important;
  padding: 28px 28px 24px; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.syntitan-page .gap-card h3 {
  font-size: 22px !important; font-weight: 700 !important; color: var(--syn-c-ink);
  letter-spacing: -0.3px; line-height: 1.25;
}
.syntitan-page .gap-card-body > p {
  font-size: 15px; line-height: 1.6; color: var(--syn-c-ink-soft);
}
.syntitan-page .gap-card .gap-anchor {
  margin-top: auto; /* 카드 바닥에 고정 → 두 카드 anchor 정렬, 여백은 문단↔구분선 사이로 */
  padding: 16px 0 0;
  border-top: 1px solid rgba(28,28,28,0.08);
  background: none;
}
.syntitan-page .gap-card .gap-anchor b {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--syn-c-muted);
  margin-bottom: 10px;
}
.syntitan-page .gap-card .gap-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.syntitan-page .gap-card .gap-chip {
  font-family: var(--syn-f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: -0.02em;
  padding: 5px 7px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--syn-c-primary);
  border: 1px solid rgba(138,119,224,0.28);
}
/* Inline text utility: primary(violet) highlight inside running copy.
   font-weight: inherit !important beats ibm-overrides' `span { weight: 400 !important }` */
.syntitan-page .t-primary { color: var(--syn-c-primary); font-weight: inherit !important; }

/* Section closer pattern: muted summary line + full-ink bold takeaway.
   Reuse for any "wrap-up" line under a section. See DESIGN-SYSTEM.md. */
.syntitan-page .section-closer {
  max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center;
  font-size: 16px; line-height: 1.6; color: var(--syn-c-muted);
}
/* Emphasis callout: 보라 카드 + 풀잉크 takeaway. 섹션 강조용. */
.syntitan-page .callout {
  max-width: 880px; margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 28px 32px;
  background: var(--syn-c-primary-soft);
  border: 1px solid rgba(138,119,224,0.22);
  border-radius: var(--syn-r-lg);
  text-align: center;
  font-size: 16px; line-height: 1.6; color: var(--syn-c-ink-soft);
}
.syntitan-page .callout b, .syntitan-page .callout strong {
  font-weight: 700; color: var(--syn-c-ink);
}
.syntitan-page .section-closer b { color: var(--syn-c-ink); font-weight: 600; }
.syntitan-page .preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  /* row tracks shared by both cards via subgrid → 행 별 상단 정렬 보장 */
  grid-template-rows: auto 1fr auto auto;
  max-width: 1080px; margin: 0 auto;
}
.syntitan-page .preview-deep {
  background: #fff;
  border: 1px solid var(--syn-c-line);
  border-radius: var(--syn-r-lg);
  padding: 28px;
  display: grid; grid-template-rows: subgrid;
  grid-row: span 4; row-gap: 12px;
}
.syntitan-page .preview-deep .pd-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.syntitan-page .preview-deep .pd-tag {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--syn-c-primary);
  align-self: flex-start;
}
.syntitan-page .preview-deep h3 {
  font-size: 22px !important; font-weight: 700 !important; color: var(--syn-c-ink);
  letter-spacing: -0.3px; line-height: 1.25;
}
.syntitan-page .preview-deep > p { font-size: 14px; line-height: 1.6; color: var(--c-text-body); }
.syntitan-page .preview-deep .pd-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; background: var(--syn-c-primary-soft); border-radius: 10px;
  border: 1px solid rgba(138,119,224,0.18);
}
.syntitan-page .preview-deep .pd-list li {
  font-size: 13px; color: var(--syn-c-ink); padding-left: 18px; position: relative;
  line-height: 1.6;
}
.syntitan-page .preview-deep .pd-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--syn-c-primary); border-bottom: 1.5px solid var(--syn-c-primary);
  transform: rotate(-45deg);
}
.syntitan-page .preview-deep .pd-note {
  font-size: 12.5px; color: var(--syn-c-muted);
  padding-top: 8px; border-top: 1px solid var(--syn-c-line-soft); margin-top: 4px;
}
/* #fit: 2-col (좌 sec-head + conclusion 하단정렬 / 우 비교 리스트) */
.syntitan-page .fit-2col {
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.6fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}
.syntitan-page .fit-left { display: flex; flex-direction: column; gap: 40px; min-height: 100%; }
.syntitan-page .fit-left .fit-conclusion { margin-top: auto; }
.syntitan-page .fit-2col .sec-head {
  text-align: left; max-width: none; margin: 0;
}
.syntitan-page .fit-2col .sec-head h2 { text-align: left; }
.syntitan-page .fit-2col .sec-head p { text-align: left; margin-left: 0; margin-right: 0; }
.syntitan-page .fit-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.syntitan-page .fit-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--syn-c-line-soft);
}
.syntitan-page .fit-list li:first-child { padding-top: 0; }
.syntitan-page .fit-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.syntitan-page .fit-list .fl-cat {
  font-size: 16px; font-weight: 700;
  color: var(--syn-c-ink); letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.syntitan-page .fit-list .fl-they {
  font-size: 14px; line-height: 1.55; color: var(--syn-c-muted);
  margin: 0;
}
.syntitan-page .fit-list .fl-syn {
  font-size: 14px; line-height: 1.55; color: var(--syn-c-ink);
  margin: 6px 0 0;
}
.syntitan-page .fit-list .fl-syn b {
  font-family: var(--syn-f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--syn-c-primary);
  margin-right: 8px;
}
/* 좌측 컬럼 하단 결론 — hairline divider 아래 soft violet radial glow로 emphasize */
.syntitan-page .fit-conclusion {
  position: relative;
  padding: 24px 0 0;
  border-top: 1px solid var(--syn-c-line);
  display: flex; flex-direction: column; gap: 8px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    rgba(138,119,224,0.09) 0%,
    rgba(138,119,224,0) 75%
  );
}
.syntitan-page .fit-conclusion .fc-tag {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syn-c-primary);
}
.syntitan-page .fit-conclusion p {
  font-size: 15px; line-height: 1.6;
  color: var(--syn-c-ink-soft); margin: 0;
}
.syntitan-page .glossary-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
  max-width: 1080px; margin: 0 auto;
}
.syntitan-page .gl-item {
  padding: 18px 0; border-bottom: 1px solid var(--syn-c-line-soft);
}
.syntitan-page .gl-item:nth-last-child(-n+2) { border-bottom: none; }
.syntitan-page .gl-item dt {
  font-size: 15px; font-weight: 700; color: var(--syn-c-ink); letter-spacing: -0.005em;
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 8px;
}
.syntitan-page .gl-item dt small {
  font-family: var(--syn-f-mono); font-size: 10px; font-weight: 600;
  color: var(--syn-c-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.syntitan-page .gl-item dd { font-size: 14px; line-height: 1.55; color: var(--syn-c-ink-soft); }
.syntitan-page section.learn-strip {
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--syn-c-bg-soft);
  border-top: 1px solid var(--syn-c-line);
  border-bottom: 1px solid var(--syn-c-line);
}
.syntitan-page .learn-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.syntitan-page .learn-head .eyebrow { margin-bottom: 0; }
.syntitan-page .learn-head h2 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700; color: var(--syn-c-ink);
  letter-spacing: -0.015em;
  flex: 1; min-width: 280px;
}
/* Reading list 패턴 — hairline divider, 행마다 kicker / 제목+설명 / → */
.syntitan-page .learn-grid {
  display: flex; flex-direction: column;
  max-width: 880px; margin: 0 auto;
}
.syntitan-page .learn-link {
  background: transparent; border: 0; border-radius: 0;
  padding: 22px 12px 22px 24px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: center;
  color: var(--syn-c-ink);
  border-top: 1px solid var(--syn-c-line);
  transition: background .15s ease;
}
.syntitan-page .learn-link:last-child { border-bottom: 1px solid var(--syn-c-line); }
.syntitan-page .learn-link:hover {
  background: rgba(138,119,224,0.04);
  color: var(--syn-c-ink);
}
.syntitan-page .learn-link .ll-kicker {
  grid-column: 1; grid-row: 1 / 3;
  align-self: center;
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--syn-c-muted);
}
.syntitan-page .learn-link h4 {
  grid-column: 2; grid-row: 1;
  font-size: 17px !important; font-weight: 700 !important;
  color: var(--syn-c-ink); letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0 0 4px;
}
.syntitan-page .learn-link p {
  grid-column: 2; grid-row: 2;
  font-size: 14px; line-height: 1.55; color: var(--syn-c-muted);
  margin: 0;
}
.syntitan-page .learn-link::after {
  content: "\2192";
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
  font-size: 18px; color: var(--syn-c-muted);
  transition: transform .18s ease, color .15s ease;
}
.syntitan-page .learn-link:hover::after {
  color: var(--syn-c-primary);
  transform: translateX(4px);
}
/* Pillar 강조 — 첫 행에 좌측 violet 액센트 바 + kicker violet */
.syntitan-page .learn-link:first-child {
  border-left: 3px solid var(--syn-c-primary);
  padding-left: 21px;
}
.syntitan-page .learn-link:first-child .ll-kicker {
  color: var(--syn-c-primary);
}
.syntitan-page .faq-list { max-width: 880px; margin: 0 auto; }
.syntitan-page .faq-item { border-bottom: 1px solid var(--syn-c-line); }
.syntitan-page .faq-item:first-child { border-top: 1px solid var(--syn-c-line); }
.syntitan-page .faq-q {
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 22px 4px;
  font-size: 16px; font-weight: 600; color: var(--syn-c-ink); letter-spacing: -0.005em;
  position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.syntitan-page .faq-q::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--syn-c-primary);
  transition: transform .2s ease;
  flex: 0 0 22px; line-height: 1;
}
.syntitan-page .faq-item.open .faq-q::after { content: "\2212"; }
.syntitan-page .faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.syntitan-page .faq-item.open .faq-a { max-height: 400px; }
.syntitan-page .faq-a p {
  padding: 0 4px 22px;
  font-size: 15px; line-height: 1.6; color: var(--syn-c-ink-soft);
  max-width: 760px;
}
/* Final CTA — light violet 그라데이션 (learn-concepts 그라데이션 톤을 자연스럽게 이어받음) */
.syntitan-page .final-cta {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(138,119,224,0.30), transparent 70%),
    #fff;
  color: var(--syn-c-ink);
  padding: clamp(64px, 8vw, 104px) 0;  /* 5페이지 배너 통일 = cap-cta 대칭 패딩 */
  text-align: center;
  position: relative;
  overflow: hidden;
}
.syntitan-page .final-cta h2 {
  /* 5페이지 하단 배너 통일 규칙 = cap-cta 표준 (clamp 28-3.4vw-42 / 600 / lh1.15) */
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 600 !important;
  color: var(--syn-c-ink);
  margin: 0 auto 16px;
  max-width: 760px;
}
.syntitan-page .final-cta p {
  font-size: 19px; line-height: 1.55;
  color: var(--syn-c-ink-soft);
  max-width: 640px; margin: 0 auto 40px;
}
.syntitan-page .final-cta .cta-row { justify-content: center; gap: 12px; }
/* Primary = 검정 (CUBIG 헤더 'Make AI-Ready' 패턴 일치) */
.syntitan-page .final-cta .btn-dark {
  background: var(--syn-c-ink);
  color: #fff;
  border: 1px solid var(--syn-c-ink);
}
.syntitan-page .final-cta .btn-dark:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
/* Secondary = outline ink */
.syntitan-page .final-cta .btn-secondary {
  background: transparent; color: var(--syn-c-ink);
  border-color: rgba(28,28,28,0.25);
}
.syntitan-page .final-cta .btn-secondary:hover {
  border-color: var(--syn-c-ink);
  background: rgba(255,255,255,0.5);
  color: var(--syn-c-ink);
}
.syntitan-page footer {
  background: var(--syn-c-bg-deep); color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
}
.syntitan-page .footer-grid {
  display: grid; grid-template-columns: 1.6fr 0.9fr 0.9fr 1.2fr 0.9fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.syntitan-page .footer-logo { display: inline-flex; align-items: center; color: #fff; margin-bottom: 16px; transition: opacity .15s ease; }
.syntitan-page .footer-logo svg { display: block; height: 24px; width: auto; }
.syntitan-page .footer-logo:hover { opacity: 0.72; }
.syntitan-page .footer-brand p { font-size: 13.5px; line-height: 1.6; max-width: 320px; color: rgba(255,255,255,0.55); }
.syntitan-page .footer-col h6 {
  font-family: var(--syn-f-mono); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.syntitan-page .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.syntitan-page .footer-col a { color: rgba(255,255,255,0.7); font-size: 14px; }
.syntitan-page .footer-col a:hover { color: #fff; }
.syntitan-page .footer-legal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px;
  padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.syntitan-page .footer-entity { display: flex; flex-direction: column; gap: 3px; }
.syntitan-page .footer-entity strong { color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.syntitan-page .footer-entity span { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.45); }
.syntitan-page .footer-bottom {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
}
.syntitan-page .footer-policy { display: inline-flex; gap: 20px; }
.syntitan-page .footer-policy a { color: rgba(255,255,255,0.55); }
.syntitan-page .footer-policy a:hover { color: #fff; }
@media (max-width: 1100px) {
.syntitan-page .hook-grid { grid-template-columns: repeat(2, 1fr); }
.syntitan-page .hook-preview { grid-template-columns: 1fr; }
.syntitan-page .qual-grid { grid-template-columns: repeat(2, 1fr); }
.syntitan-page .enh-grid { grid-template-columns: repeat(2, 1fr); }
.syntitan-page .path-grid { grid-template-columns: 1fr; }
.syntitan-page .agent-card { flex-basis: 82%; }
  /* 모바일은 화살표를 카드 위로 살짝 들여서 화면 밖 클리핑 방지 */
  .syntitan-page .agent-nav__btn--prev { left: 6px; }
  .syntitan-page .agent-nav__btn--next { right: 6px; }
  .syntitan-page .agent-nav__btn { width: 40px; height: 40px; }
.syntitan-page .proof-timeline { grid-template-columns: repeat(2, 1fr); }
.syntitan-page .workflow-stepper { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
.syntitan-page .workflow-stepper .step:nth-child(n+5)::after { display: none; }
.syntitan-page .workflow-stepper .step:nth-child(4)::after { display: none; }
.syntitan-page .hero-grid { grid-template-columns: 1fr; }
.syntitan-page .release-grid { grid-template-columns: 1fr; }
.syntitan-page .def-row { grid-template-columns: 1fr; }
.syntitan-page .bind-2col { grid-template-columns: 1fr; gap: var(--syn-s-block); }
.syntitan-page .split, .syntitan-page .split.flip { grid-template-columns: 1fr; }
.syntitan-page .split.flip > .split-text, .syntitan-page .split.flip > .split-visual { order: initial; }
.syntitan-page .usecase-grid { grid-template-columns: 1fr; }
.syntitan-page .usecase, .syntitan-page .usecase:nth-child(4), .syntitan-page .usecase:nth-child(5) { grid-column: 1 / -1; }
.syntitan-page .preview-grid { grid-template-columns: 1fr; }
.syntitan-page .fit-grid { grid-template-columns: repeat(2, 1fr); }
.syntitan-page .fit-2col { grid-template-columns: 1fr; gap: var(--syn-s-block); }
.syntitan-page .glossary-grid { grid-template-columns: 1fr; }
.syntitan-page .gaps-grid { grid-template-columns: 1fr; gap: 36px; }
.syntitan-page .gaps-grid::before { display: none; }
/* learn-grid는 flex column이라 그대로 — 모바일에서 kicker → 제목 stack */
.syntitan-page .learn-link { grid-template-columns: 100px 1fr auto; gap: 16px; }
}
@media (max-width: 900px) {
.syntitan-page .nav-links { display: none; }
.syntitan-page .nav-globe { display: none; }
.syntitan-page .btn-architect { display: none; }
.syntitan-page .mobile-toggle {
    display: inline-flex; background: transparent; border: 1px solid var(--syn-c-line);
    padding: 8px 12px; border-radius: 8px; color: var(--syn-c-ink); font-weight: 600;
  }
}
@media (max-width: 720px) {
.syntitan-page .hook-grid { grid-template-columns: 1fr; }
.syntitan-page .hook-preview { grid-template-columns: 1fr; }
.syntitan-page .qual-grid { grid-template-columns: 1fr; }
.syntitan-page .enh-grid { grid-template-columns: 1fr; }
/* learn-link: 모바일은 본문(키커→타이틀→설명) 좌측 세로스택 + 화살표(::after) 우측 세로중앙 */
.syntitan-page .learn-link {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  column-gap: 16px; align-items: start;
}
.syntitan-page .learn-link .ll-kicker { grid-column: 1; grid-row: 1; align-self: flex-start; margin: 0 0 2px; text-align: left; }
.syntitan-page .learn-link h4 { grid-column: 1; grid-row: 2; text-align: left; }
.syntitan-page .learn-link p { grid-column: 1; grid-row: 3; text-align: left; }
.syntitan-page .learn-link::after { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.syntitan-page .workflow-stepper { grid-template-columns: 1fr 1fr; padding: 24px 16px; row-gap: 24px; }
.syntitan-page .workflow-stepper .step::after { display: none !important; }
/* split(좌우 2열) 모바일 1열 — 1100 미디어 규칙이 안 먹는 케이스 보강 */
.syntitan-page .split, .syntitan-page .split.flip { grid-template-columns: 1fr !important; }
/* hook-preview 3카드: 1열로 쌓일 때 세로 구분선(border-left) → 가로 구분선으로 */
.syntitan-page .hook-preview .preview-card + .preview-card { border-left: 0 !important; border-top: 1px solid var(--syn-c-line) !important; padding-top: 22px; margin-top: 22px; }
.syntitan-page .hook-preview .preview-card { padding-left: 0; padding-right: 0; }
/* proof 타임라인: 1열 스택에선 가로레일·닷 제거 + grid gap 제거 → 주차 구분선 상하 여백 대칭 */
.syntitan-page .proof-timeline { grid-template-columns: 1fr; gap: 0; }
.syntitan-page .proof-timeline::before { display: none !important; }
.syntitan-page .proof-week::before { display: none !important; }
.syntitan-page .proof-week { display: block; padding: 22px 0; border-top: 1px solid var(--syn-c-line); }
.syntitan-page .proof-week:first-child { border-top: 0; padding-top: 0; }
.syntitan-page .proof-week .pw-week { display: block; margin: 0 0 6px; }
.syntitan-page .proof-week h4 { margin: 0 0 6px; }
.syntitan-page .proof-week .pw-flow { margin: 0; }
.syntitan-page .fit-grid { grid-template-columns: 1fr; }
/* agent 캐러셀: 모바일은 좌우 화살표 숨김(카드 텍스트 가림 방지) → 스와이프 + 옆 카드 peek로 네비게이션 */
.syntitan-page .agent-nav__btn { display: none !important; }
.syntitan-page .footer-grid { grid-template-columns: 1fr; }
/* anchor-nav: 모바일에선 좌측정렬(활성 탭부터) + 오른쪽 페이드로 '더 있음' 힌트 */
.syntitan-page .anchor-inner { justify-content: flex-start; padding-left: 20px; padding-right: 0; gap: 14px; }
.syntitan-page .anchor-nav::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95)); pointer-events: none; z-index: 2; }
.syntitan-page .subnav-layout { grid-template-columns: 1fr; gap: 24px; }
.syntitan-page .subnav { flex-direction: row; gap: 6px; position: static; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.syntitan-page .subnav-btn { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--syn-r-sm) var(--syn-r-sm) 0 0; white-space: nowrap; }
/* release 데모: 모바일에선 가장자리 bleed(음수 마진) 해제 → wrap 좌우 여백 유지 */
.syntitan-page #release-state .release-grid { margin-left: 0 !important; margin-right: 0 !important; }
.syntitan-page .subnav-btn.active { border-left: 0; border-bottom-color: var(--syn-c-primary); }
.syntitan-page .subnav-btn .subnav-step { display: none; }
.syntitan-page .hero h1 { font-size: 40px !important; }
.syntitan-page .sec-head h2 { font-size: 30px !important; }
/* final-cta h2 모바일 override 제거 — 통일 clamp(28-42)가 처리 */
.syntitan-page .gap-card h3 { font-size: 22px; }
.syntitan-page .score-block { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.syntitan-page .modal-mock .modal-act { flex-direction: column-reverse; }
.syntitan-page .modal-mock .modal-act .btn { width: 100%; justify-content: center; }
}