/* ═══════════════════════════════════════════════════════════
   AWC Workshop — Polish Layer v2 (base site sync)
   Source: https://agenticworkflows.club 측정 ground truth
   Plan: _design-sync/SYNC-PLAN.md
   ═══════════════════════════════════════════════════════════ */

/* 1. ROOT */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}

/* 2. TYPOGRAPHY — text wrap, tabular nums */
h1,h2,h3,.case-title,.page-title,.cta-title,.whatwe-title,.cases-label,.hiw-title,.hiw-label,.trio-title,.wf-title{
  text-wrap:balance;
}
p,.case-body p,.hero-desc,.page-sub,.cta-sub,.case-standfirst,.cc-standfirst,.case-card-standfirst,.hiw-desc,.brief-item-desc,.brief-item p,.trio-body,.wf-body{
  text-wrap:pretty;
}
.cr-val,.case-card-stat,.cc-stat,.case-meta,.page-num,.stat-val,.cc-date,.case-card-date,.price-val{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum","ss01";
}

/* 3. SCROLL PROGRESS — top 1px gradient bar above nav */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:1100;
  background:transparent;pointer-events:none;
}
.scroll-progress::before{
  content:"";display:block;height:100%;width:var(--scroll,0%);
  background:linear-gradient(90deg,#ff6b6b 0%,#ff8a5b 50%,#ffa500 100%);
  box-shadow:0 0 18px rgba(255,138,91,.55),0 0 6px rgba(255,107,107,.45);
  transition:width .12s linear;
}

/* 4. RV REVEAL — base ground truth: 0.7s cubic-bezier(0.16,1,0.3,1) */
.rv{
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity var(--dur-reveal,700ms) cubic-bezier(.16,1,.3,1),
    transform var(--dur-reveal,700ms) cubic-bezier(.16,1,.3,1),
    filter var(--dur-reveal,700ms) cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--rv-i, 0) * 60ms);
  filter:blur(4px);
}
.rv.vis{opacity:1;transform:translateY(0);filter:blur(0)}
.rv-slow{
  transition-duration:var(--dur-reveal-slow,900ms);
}

/* 5. SCALE-ON-PRESS */
.btn,.nav-cta,.modal-submit,.filter-btn,.case-card,.cta-block,a.cases-link,.back-link,.chip,.lg-cta{
  transition-property:scale,background,color,border-color,box-shadow,transform;
  transition-duration:.18s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.btn:active,.nav-cta:active,.modal-submit:active,.filter-btn:active,.chip:active,.lg-cta:active{scale:.96}
.case-card:active{scale:.985}

/* 6. LIQUID GLASS — base site signature
 * SVG filter는 landing.html head에 inline 정의 (id="glass-filter")
 * 적용 대상: nav 메뉴 컨테이너, hero CTA, sticky bar
 */
.lg-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(0,0,0,.05);
  border-radius:9999px;
  backdrop-filter:url(#glass-filter) saturate(1.5);
  -webkit-backdrop-filter:url(#glass-filter) saturate(1.5);
  box-shadow:
    inset 0 0 2px 1px rgba(255,255,255,.35),
    inset 0 0 10px 4px rgba(255,255,255,.15),
    0 4px 16px rgba(17,17,26,.05),
    0 8px 24px rgba(17,17,26,.05);
}
.lg-pill::before{
  /* fallback for browsers without SVG filter support: subtle backdrop-blur */
  content:"";position:absolute;inset:0;border-radius:inherit;
  backdrop-filter:saturate(1.5) blur(12px);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  z-index:-1;
}

/* nav 메뉴 컨테이너 (800×48 base) */
.lg-nav{
  composes:lg-pill;
  height:48px;
  padding:0 8px;
  gap:4px;
}

/* hero / inline CTA */
.lg-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 28px;
  min-height:56px;
  color:#fff;                          /* explicit white over bloom */
  font-size:15px;
  font-weight:500;
  letter-spacing:-.01em;
  background:rgba(0,0,0,.18);          /* slight darker tint for text contrast */
  border:none;
  border-radius:9999px;
  backdrop-filter:url(#glass-filter) saturate(1.5);
  -webkit-backdrop-filter:url(#glass-filter) saturate(1.5);
  box-shadow:
    inset 0 0 2px 1px rgba(255,255,255,.35),
    inset 0 0 10px 4px rgba(255,255,255,.15),
    0 4px 16px rgba(17,17,26,.05),
    0 8px 24px rgba(17,17,26,.05);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  cursor:pointer;
  text-decoration:none;
}
.lg-cta:hover{
  box-shadow:
    inset 0 0 2px 1px rgba(255,255,255,.45),
    inset 0 0 14px 4px rgba(255,255,255,.22),
    0 8px 32px rgba(255,138,76,.10),
    0 12px 48px rgba(255,107,107,.06);
}
.lg-cta.lg-cta--sm{
  min-height:36px;
  padding:8px 16px;
  font-size:13px;
}

/* 7. MARQUEE — base keyframe + 2-row pattern */
@keyframes awc-marquee-x {
  0% { transform:translate(0); }
  100% { transform:translate(-50%); }
}
.awc-marquee{
  overflow:hidden;
  width:100%;
}
.awc-marquee-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:60s linear infinite awc-marquee-x;
}
.awc-marquee-track-reverse{
  display:flex;
  gap:12px;
  width:max-content;
  animation:75s linear infinite reverse awc-marquee-x;
}
@media (min-width:768px){
  .awc-marquee-track,.awc-marquee-track-reverse{ gap:20px; }
}
.awc-marquee:hover .awc-marquee-track,
.awc-marquee:hover .awc-marquee-track-reverse{
  animation-play-state:paused;
}
.awc-marquee-card{
  position:relative;
  flex-shrink:0;
  width:220px;
  height:140px;
  background:var(--bg-card);
  border-radius:var(--r-card);
  overflow:hidden;
}
.awc-marquee-card video,
.awc-marquee-card img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (min-width:768px){
  .awc-marquee-card{ width:320px; height:200px; }
}
/* portrait variant (miumiu 같은 9:16) */
.awc-marquee-card.is-portrait{
  width:140px;
  height:200px;
}
@media (min-width:768px){
  .awc-marquee-card.is-portrait{ width:180px; height:260px; }
}

/* marquee fade edges — base 패턴 */
.awc-marquee-fade{
  position:relative;
}
.awc-marquee-fade::before,
.awc-marquee-fade::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;
  pointer-events:none;
}
.awc-marquee-fade::before{
  left:0;
  background:linear-gradient(to right,var(--bg-section) 0%,transparent 100%);
}
.awc-marquee-fade::after{
  right:0;
  background:linear-gradient(to left,var(--bg-section) 0%,transparent 100%);
}

/* 8. CHIP — base 카테고리 필터 */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  font-size:var(--fs-chip);
  font-weight:400;
  color:var(--text-1);
  background:var(--bg-chip);
  border:1px solid var(--border-strong);
  border-radius:9999px;
  white-space:nowrap;
  cursor:pointer;
}
.chip:hover{ color:var(--fg); border-color:var(--border-h); }
.chip.is-active{
  color:#000;
  background:var(--fg);
  border-color:var(--fg);
}
.chip-count{
  margin-left:2px;
  font-size:11px;
  font-weight:500;
  opacity:.55;
}
.chip.is-active .chip-count{ opacity:.7; }

/* 9. ACCENT-FG INLINE LINK — base "진단 받아보기" 류 */
.accent-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent-fg);
  font-size:var(--fs-cta-inline);
  font-weight:500;
  text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition:color .18s ease;
}
.accent-link:hover{ color:var(--accent-fg-hover); }
/* hero 안에서는 bloom 위 가독성 위해 흰색 + accent dot */
.hero-v2 .accent-link{
  color:rgba(255,255,255,.85);
}
.hero-v2 .accent-link::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-fg);
  margin-right:4px;
  box-shadow:0 0 8px rgba(255,138,76,.6);
}
.accent-link::after{
  content:"→";
  display:inline-block;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.accent-link:hover::after{ transform:translateX(3px); }

/* 10. HERO ACCENT — thesis text (gradient text, 페이지당 max 2회) */
.thesis-text{
  background:var(--a-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* 11. CARDS — subtle layered shadow baseline (trio·workflow·case 공용) */
.case-card,.cta-block,.case-cta,.hiw-item,.modal,.trio-card,.wf-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(255,255,255,.01),
    0 1px 2px rgba(0,0,0,.4);
}
.case-card:hover,.trio-card:hover,.wf-card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 48px -12px rgba(0,0,0,.7),
    0 8px 24px -8px rgba(255,107,107,.18),
    0 0 0 1px rgba(255,138,91,.18);
}

/* 12. CASE-CARD overlay — richer warm-tinted gradient */
.case-card-overlay{
  background:linear-gradient(to top,
    rgba(8,4,2,.92) 0%,
    rgba(20,8,4,.55) 30%,
    rgba(40,20,10,.10) 55%,
    transparent 80%) !important;
}
.case-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 110%,rgba(255,138,91,.18),transparent 55%);
  opacity:0;transition:opacity .35s cubic-bezier(.22,1,.36,1);
  z-index:1;
}
.case-card:hover::after{opacity:1}

/* 13. NAV — fixed top, transparent (base 패턴, glass는 inner pill에) */
.nav-v2{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:20px 20px 0;
  background:transparent;
}
@media (min-width:768px){
  .nav-v2{ padding:24px 24px 0; }
}
.nav-v2-inner{
  max-width:1240px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
@media (min-width:640px){
  .nav-v2-inner{ gap:16px; }
}
/* mobile 좁은 화면: WORKSHOP suffix 숨김 (logo만) */
@media (max-width:480px){
  .nav-v2-logo > span:last-child{ display:none; }
}
.nav-v2-logo{
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--fg);
  font-size:18px;
  text-decoration:none;
}
.nav-v2-menu{
  display:flex;
  align-items:center;
  gap:0;
  padding:0 8px;
}
.nav-v2-menu a{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 8px;
  font-size:12px;
  color:var(--fg-55);
  border-radius:9999px;
  transition:color .25s ease;
}
@media (min-width:640px){
  .nav-v2-menu a{ padding:0 14px; font-size:14px; }
}
.nav-v2-menu a:hover{ color:var(--fg); }

/* 14. LINK underline — animated on hover */
.cases-link,.footer-links a,.modal-alt a{
  position:relative;
}
.cases-link::after,.footer-links a::after,.modal-alt a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.4;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.cases-link:hover::after,.footer-links a:hover::after,.modal-alt a:hover::after{
  transform:scaleX(1);transform-origin:left center;
}

/* 15. IMAGE OUTLINE */
.nav-logo img,.footer img{
  outline:1px solid rgba(255,255,255,.04);
  outline-offset:-1px;
}

/* 16. FOCUS RING */
:focus-visible{
  outline:2px solid rgba(255,138,91,.7);
  outline-offset:3px;
  border-radius:6px;
}

/* 17. SECTION DEFAULT — base 패턴 */
.section-v2{
  position:relative;
  background:var(--bg-section);
  padding:var(--s-10) var(--container-pad);
}
@media (min-width:768px){
  .section-v2{ padding:var(--s-11) var(--container-pad); }
}
.section-v2.is-faq{ background:var(--bg-faq); border-top:1px solid var(--border-hairline); }
.section-v2 .container-v2{
  max-width:var(--container-max);
  margin:0 auto;
}

/* 18. HERO — base pattern (h-svh + WebGL canvas) */
.hero-v2{
  position:relative;
  background:var(--bg-section);
  height:100vh;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0 var(--container-pad);
}
/* Vignette overlay — radial dark fade for depth + focus (after::after sits above canvas, below content) */
.hero-v2::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 70% 70% at center, transparent 0%, transparent 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%);
}
.hero-v2-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-v2-canvas canvas{
  width:100%;
  height:100%;
  display:block;
}
.hero-v2-fallback{
  /* WebGL 미지원 환경: CSS radial bloom */
  position:absolute;
  inset:0;
  background:var(--grad-hero-bloom);
  z-index:0;
  pointer-events:none;
}
.hero-v2-inner{
  position:relative;
  z-index:2;
  max-width:1240px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
}

/* 19. TRIO CARD — base 40px H3 transparent layout */
.trio-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:center;
}
@media (min-width:1024px){
  .trio-grid{ grid-template-columns:repeat(2,1fr); }
}
.trio-card{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:0;
  background:transparent;
}
.trio-card-num{
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--fg-55);
}
.trio-card-title{
  font-size:var(--fs-trio);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-h2);
  color:var(--fg);
}
.trio-card-body{
  font-size:17px;
  line-height:1.6;
  color:var(--fg-75);
  max-width:60ch;
}

/* 20. WORKFLOW CARD — base 26px H3 minimal, transparent */
.wf-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
@media (min-width:768px){
  .wf-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .wf-grid{ grid-template-columns:repeat(4,1fr); }
}
.wf-card{
  position:relative;
  padding:36px 8px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:transparent;
  border-top:1px solid var(--border-hairline);
  border-right:1px solid var(--border-hairline);
}
.wf-card:nth-child(3n){ border-right:1px solid var(--border-hairline); }
.wf-card-title{
  font-size:var(--fs-card-h);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-h3);
  color:var(--fg);
  margin-bottom:8px;
}
.wf-card-body{
  font-size:14px;
  line-height:1.55;
  color:var(--fg-55);
}
.wf-card-meta{
  display:flex;
  gap:6px;
  margin-top:14px;
  font-size:11px;
  color:var(--fg-40);
}

/* ═══════════════════════════════════════════════════════════
   BASE TONE SECTION SYNC (override layer)
   기존 components.css 카드 시스템 → base site 미니멀 톤으로 통일
   ═══════════════════════════════════════════════════════════ */

/* B1. Section padding — base ground truth: py-20 md:py-28 (80/112) */
.section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.section--tight {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 768px) {
  .section { padding-top: 112px; padding-bottom: 112px; }
  .section--tight { padding-top: 88px; padding-bottom: 88px; }
}

/* B2. Section title — base 48px ground truth, force max */
.section > .container > .sh > .h1,
.section > .container > .sh > h2.h1,
section .sh .h1,
section .sh h2.h1 {
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}
/* H2 thesis word (final-cta) — slightly contained */
section .sh + * { margin-top: 32px; }
@media (min-width: 768px) {
  section .sh + * { margin-top: 48px; }
}

/* B3. Container 1240px */
.container {
  max-width: 1240px;
}

/* B4. Body text opacity tier — base ground truth */
section p,
section .body {
  color: var(--fg-75);
}
section .small {
  color: var(--fg-55);
}
section .small.mute,
section .mute {
  color: var(--fg-40);
}
section .fg-1 {
  color: var(--fg);
}

/* B5. Compare cards — base 톤 transparent + hairline */
.compare > div {
  background: transparent;
  border: 1px solid var(--border-hairline);
  box-shadow: none;
  padding: 32px;
}
@media (min-width: 768px) {
  .compare > div { padding: 48px; }
}
.compare-before {
  background: transparent;
  box-shadow: none;
}
.compare-after {
  background: transparent;
  border-color: var(--border-soft);
  box-shadow: none;
}
.compare-after::before {
  /* 한 코너만 매우 약한 ambient (base는 final-cta에만) */
  background: radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,165,0,0.04), transparent 70%);
}
.compare-label {
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--fg-55);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare-after .compare-label {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* B6. Compare 내부 H3 — base trio 40px 톤 */
.compare h3.h2 {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* B7. Curriculum rows — base 24-card 톤 (larger spacing, hairline only) */
.curri-row {
  padding: 32px 0;
  border-bottom-color: var(--border-hairline);
  gap: 32px;
}
@media (min-width: 768px) {
  .curri-row { padding: 40px 0; gap: 48px; }
}
.curri-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.curri-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-55);
}
.curri-mod, .curri-meta {
  color: var(--fg-40);
  font-size: 13px;
}

/* B8. VS table — base 톤: transparent + hairline borders only */
.vs-table {
  border-collapse: collapse;
}
.vs-table th,
.vs-table td {
  background: transparent !important;
  border-color: var(--border-hairline) !important;
  padding: 20px 24px;
}
.vs-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-55);
}
.vs-table .vs-us {
  background: transparent !important;
  position: relative;
}
.vs-table .vs-us::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--a-grad);
  border-radius: 1px;
}
.vs-table tbody th[scope="row"] {
  color: var(--fg-55);
  font-size: 13px;
  font-weight: 500;
}
.vs-table .vs-us-col {
  color: var(--fg);
  font-weight: 500;
}
.vs-cards .vs-card {
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 24px;
}

/* B9. Pain stats — transparent (donut/bar 시각 우선) */
.pain-grid {
  gap: 64px;
}
.pain-cell {
  background: transparent;
  border: 0;
  padding: 0;
}
.pain-label {
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pain-source {
  color: var(--fg-40);
  font-size: 12px;
  margin-top: 8px;
}

/* B10. Checklist — base 미니멀 톤 */
.checklist {
  gap: 16px;
}
.checklist-item {
  color: var(--fg);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding: 4px 0;
}

/* B11. Host section — base trio 톤 (transparent + larger spacing) */
.host-grid {
  gap: 48px;
}
.host-photo {
  border-radius: 16px;
}
.host-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-55);
  font-weight: 500;
}
.host-name {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 4px;
}
.host-role {
  color: var(--fg-55);
  font-size: 14px;
  margin-bottom: 32px;
}
.host-bio p {
  color: var(--fg-75);
  line-height: 1.6;
  font-size: 16px;
}

/* B12. Info section (참가 안내) — transparent flat */
.info-cell,
.info-grid > div {
  background: transparent;
  border: 0;
}
.info-cell .label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-55);
  font-weight: 500;
}
.info-cell .value {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.info-cell .sub {
  color: var(--fg-55);
  font-size: 13px;
}

/* B13. Matrix (방식 × 직군) — base 톤 */
.matrix-card,
.matrix-card-track,
.matrix-card-mode,
.matrix-card-workflow {
  background: transparent !important;
  border-color: var(--border-hairline) !important;
}

/* B14. Week-list / week-num — base 24-card 톤 */
.week-list {
  gap: 0;
}
.week-list > * + * {
  border-top: 1px solid var(--border-hairline);
  padding-top: 24px;
  margin-top: 24px;
}

/* B15. FAQ — base #050505 already applied via inline; ensure summary 톤 */
.faq-item {
  border-bottom-color: var(--border-hairline);
}
.faq-item summary {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--fg);
  font-weight: 500;
  padding: 24px 0;
}
.faq-body {
  color: var(--fg-75);
  line-height: 1.65;
}

/* B16. Apply card / D-7 — base 시각 (transparent + hairline + 큰 H2) */
#apply .container {
  max-width: 1240px;
}
#apply .display,
#apply h2.display {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* B17. Final CTA — base 시각 매우 큰 H2 + 글래스 CTA */
.final-cta-section .display,
.final-cta-section h2 {
  font-size: clamp(32px, 5vw, 58px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700;
}
.final-cta-section {
  padding-top: 144px;
  padding-bottom: 144px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-section::before {
  /* 푸터 근처 warm orange ambient — base 패턴 */
  content: "";
  position: absolute;
  inset: auto 0 -200px 0;
  height: 600px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,138,76,0.18), rgba(255,107,107,0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.final-cta-section > * { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .final-cta-section { padding-top: 192px; padding-bottom: 192px; }
}

/* B18. Sticky CTA (bottom) — keep but tone match */
.sticky-cta {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid var(--border-hairline);
}

/* B19. thesis-text — base font-weight 700 (was 800) */
.thesis-text {
  font-weight: 700;
}

/* B20. Cases marquee — base awc-marquee 패턴 더 가깝게 */
.cases-marquee {
  /* fade edges 추가 */
}
.cases-marquee::before,
.cases-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.cases-marquee {
  position: relative;
}
.cases-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-section) 0%, transparent 100%);
}
.cases-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-section) 0%, transparent 100%);
}

/* B21. Cases card titles — base 26px 톤 */
.case-card-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* B22. Apply form — transparent + base 톤 */
.apply-card,
.apply-form,
.apply-head {
  background: transparent;
  border-color: var(--border-hairline);
}

/* B24. Pain narrative — 2-col layout (좌 stats + 우 checklist 통합) */
.pain-narrative {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 1024px) {
  .pain-narrative {
    grid-template-columns: 1.4fr 1fr;
    gap: 96px;
  }
}
.pain-narrative .pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin: 0;
}
@media (min-width: 640px) {
  .pain-narrative .pain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  .pain-narrative .pain-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (min-width: 1280px) {
  .pain-narrative .pain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.pain-narrative-aside {
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--border-hairline);
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .pain-narrative-aside {
    border-top: 0;
    border-left: 1px solid var(--border-hairline);
    padding-top: 0;
    padding-left: 48px;
  }
}
.pain-aside-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
}
.pain-aside-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: -8px 0 12px;
}
.pain-narrative-aside .checklist {
  gap: 12px;
}
.pain-narrative-aside .checklist-item {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-75);
}

/* B26. Workflow catalog — 신규 산출물 5종 카드 그리드 (v8.1) */
.workflow-catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--s-9);
  border-top: 1px solid var(--border-hairline);
}
@media (min-width: 768px) {
  .workflow-catalog {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .workflow-catalog {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wc-card {
  position: relative;
  padding: 36px 28px;
  background: transparent;
  border-bottom: 1px solid var(--border-hairline);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background var(--dur-2) var(--ease);
}
.wc-card:hover {
  background: rgba(255, 255, 255, 0.015);
}
/* 마지막 행 border 정리 — mobile/tablet/desktop 분기 */
@media (min-width: 1024px) {
  .wc-card:nth-child(3n) { border-right: 0; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .wc-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 767px) {
  .wc-card { border-right: 0; }
}

.wc-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-40);
  font-variant-numeric: tabular-nums;
}
.wc-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.wc-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.wc-meta-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.wc-meta-label {
  flex-shrink: 0;
  width: 44px;
  color: var(--fg-40);
  font-weight: 500;
}
.wc-meta-val {
  color: var(--fg-75);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.wc-result {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-75);
  letter-spacing: -0.005em;
}

.workflow-catalog-tail {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
  color: var(--fg);
  font-weight: 500;
  max-width: 60ch;
}
.workflow-catalog-tail .accent-mark {
  color: var(--accent-fg);
}

/* B25. Pain stat numbers — base 강조 (큰 number, 그라디언트) */
.pain-num,
.pain-donut-num {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
}
/* donut number 그라디언트 — accent 슬롯 (whitelist 추가) */
.pain-donut-num {
  background: var(--a-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
.pain-donut-num span {
  -webkit-text-fill-color: var(--fg-55) !important;
  color: var(--fg-55) !important;
}
.pain-num {
  /* 일반 number는 white solid (그라디언트 1슬롯만 — donut에만) */
  color: var(--fg);
}
.pain-bar-track {
  height: 4px;
  background: var(--border-hairline);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 16px;
}
.pain-bar-fill {
  height: 100%;
  background: var(--a-grad);
  border-radius: 2px;
}
.pain-donut {
  width: 88px;
  height: 88px;
}
@media (min-width: 768px) {
  .pain-donut { width: 104px; height: 104px; }
}
.pain-donut-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.pain-donut-wrap .pain-donut-num {
  position: static;
  transform: none;
}

/* B23. Section background unify — bg-base / bg-elevated 둘 다 #000
 *      (FAQ는 inline style로 #050505 override, final-cta는 #000 유지) */
.bg-base { background: #000; }
.bg-elevated { background: #000; }
.bg-surface { background: #000; }
.bg-wash { background: #000; }
.bg-soft-grad { background: #000; }
/* FAQ 단독 #050505 (inline style 그대로 둠) */

/* 21. REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  .rv{transition-duration:.01s !important;filter:none;transform:none}
  .scroll-progress::before{transition:none}
  .awc-marquee-track,.awc-marquee-track-reverse{animation:none}
}