/* =============================================
   TOKENS
   ============================================= */
:root {
  --font: 'Plus Jakarta Sans','Noto Sans KR',sans-serif;
  --c-0:   #ffffff;
  --c-50:  #fafaf9;
  --c-100: #f4f4f5;
  --c-200: #e4e4e7;
  --c-300: #d1d1d6;
  --c-400: #a1a1aa;
  --c-500: #71717a;
  --c-700: #3f3f46;
  --c-800: #27272a;
  --c-900: #09090b;
  --accent:      #00d4aa;
  --accent-dim:  rgba(0,212,170,0.10);
  --accent-glow: rgba(0,212,170,0.22);
  --hero-1: #07070e;
  --max-w: 1280px;
  --px: 2.5rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--c-900);background:var(--c-0);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);}

/* =============================================
   GNB
   ============================================= */
.gnb{
  position:fixed;top:0;left:0;right:0;height:58px;z-index:1000;
  background:#ffffff;
  border-bottom:1px solid var(--c-200);
  transition:box-shadow .2s;
}
.gnb.scrolled{box-shadow:0 2px 16px rgba(0,0,0,0.07);}
.gnb-row{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--px);
  height:100%;display:flex;align-items:center;gap:1.75rem;
}
.gnb-brand{font-size:1.0625rem;font-weight:800;color:var(--c-900);letter-spacing:-0.04em;flex-shrink:0;}
.gnb-brand:hover{color:var(--accent);}
.gnb-nav{display:flex;align-items:center;gap:.125rem;flex:1;}
.gnb-item{position:relative;}
.gnb-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.375rem .75rem;
  font-size:.875rem;font-weight:600;
  color:var(--c-800);background:none;border:none;
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
  letter-spacing:-0.02em;white-space:nowrap;
}
.gnb-btn:hover{color:var(--c-900);background:var(--c-100);}
.gnb-btn .ch{font-size:.6rem;opacity:.45;transition:transform .2s;}
.gnb-item:hover .ch{transform:rotate(180deg);}

/* ── Right util buttons (개인화) — visually distinct from nav ── */
.gnb-util-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.35rem .7rem;
  font-size:.8125rem;font-weight:500;
  color:var(--c-500);background:none;border:none;
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
  letter-spacing:-0.015em;white-space:nowrap;cursor:pointer;
}
.gnb-util-btn:hover{color:var(--c-800);background:var(--c-100);}
.gnb-util-btn.disabled{opacity:.32;cursor:not-allowed !important;pointer-events:none;}

/* Vertical rule between nav area and util area */
.gnb-sep{width:1px;height:16px;background:var(--c-200);margin:0 .375rem;flex-shrink:0;}

/* User dropdown menu */
.gnb-user-drop{
  min-width:160px;
  right:0;left:auto;
}
.gnb-user-drop .dd-link{
  display:flex;
  align-items:center;
  gap:.625rem;
  padding:.5rem .875rem;
  border-radius:var(--r-sm);
  font-size:.875rem;
  font-weight:500;
  color:var(--c-800);
  transition:background .12s;
  text-decoration:none;
}
.gnb-user-drop .dd-link:hover{
  background:var(--c-50);
  color:var(--c-900);
}
.gnb-user-drop .dd-link i{
  font-size:1rem;
  color:var(--c-500);
  width:18px;
  text-align:center;
  flex-shrink:0;
}
.gnb-user-drop .dd-link:hover i{
  color:var(--c-800);
}
.gnb-user-drop .dd-link.logout{
  color:var(--c-500);
}
.gnb-user-drop .dd-link.logout:hover{
  background:#fff1f1;
  color:#dc2626;
}
.gnb-user-drop .dd-link.logout:hover i{
  color:#dc2626;
}
.gnb-user-drop hr{
  margin:.375rem .75rem;
  border:none;
  border-top:1px solid var(--c-200);
}
/* User pill accent state — 테두리 제거 + 작은 사이즈 */
.gnb-user-pill{
  background:transparent;
  border:none;
  font-size:0.7rem;          /* 약 11.2px — 기존 16px의 70% */
  padding:.25rem .5rem;      /* 폰트 축소에 맞춰 패딩도 비례 축소 */
}
.gnb-user-pill:hover{
  background:var(--c-100);   /* 다른 gnb-btn과 동일한 hover (회색) — 녹색 border 제거 */
  color:var(--c-900);
}
.gnb-user-pill i.bi-person-circle{
  color:var(--accent);
  font-size:0.85rem;         /* 아이콘은 약간 더 크게 유지 (가독성) */
}

/* Login button */
.gnb-login-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .875rem;
  border:1.5px solid var(--c-200);border-radius:var(--r-sm);
  background:var(--c-0);font-size:.8125rem;font-weight:600;color:var(--c-800);
  text-decoration:none;transition:all .15s;
}
.gnb-login-btn:hover{border-color:var(--c-900);color:var(--c-900);background:var(--c-50);}

.gnb-drop{
  display:none;position:absolute;
  top:calc(100% + 10px);left:-8px;
  background:var(--c-0);
  border:1px solid var(--c-200);
  border-radius:var(--r-lg);
  box-shadow:0 16px 48px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.04);
  padding:.5rem;min-width:240px;z-index:200;
}
/* invisible hover bridge — 버튼과 드롭다운 사이 10px gap을 hover 영역으로 확장 */
.gnb-drop::before{
  content:"";position:absolute;
  top:-10px;left:0;right:0;height:10px;
  background:transparent;
}
.gnb-item:hover .gnb-drop{display:block;}
/* user drop: pill hover + click 모두 지원 */
/* User dropdown — pill 좌측 끝에 정렬 (기존 right:0 → left:0 변경) */
#gnb-user-area .gnb-drop{left:0;right:auto;}
#gnb-user-area:not(.open):not(:hover) .gnb-drop{display:none;}
#gnb-user-area.open .gnb-drop{display:block;}

.dd-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .75rem;border-radius:var(--r-md);
  transition:background .12s;
}
.dd-link:hover{background:var(--c-50);}
.dd-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.9375rem;
}
.dd-label{font-size:.8125rem;font-weight:600;color:var(--c-800);letter-spacing:-0.02em;line-height:1.2;}
.dd-sub{font-size:.75rem;color:var(--c-400);margin-top:1px;letter-spacing:-0.01em;}

.gnb-right{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0;}
.gnb-cta{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.4rem 1.125rem;
  background:var(--c-900);color:var(--c-0);
  font-size:.8125rem;font-weight:700;
  border:none;border-radius:var(--r-sm);letter-spacing:-0.01em;
  transition:all .2s;
}
.gnb-cta:hover{background:var(--accent);color:#000;transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow);}

.gnb-btn-disabled{
  opacity:.38;
  cursor:not-allowed !important;
}
.gnb-btn-disabled:hover{color:var(--c-500) !important;background:transparent !important;}
.gnb-soon{
  font-size:.55rem;font-weight:700;letter-spacing:.04em;
  padding:.1rem .35rem;border-radius:999px;
  background:var(--c-200);color:var(--c-500);
  margin-left:.25rem;text-transform:uppercase;
  vertical-align:middle;
}

/* =============================================
   HERO  (compact — ~420px)
   ============================================= */
.hero{
  position:relative;
  display:flex;align-items:center;
  /* 사용자 iteration final tune: 6rem 너무 아래 → 5.5rem (88px) / 2.5rem (40px)
     visual sweet spot 미세 조정 (0.5rem step) */
  padding:5.5rem 0 2.5rem;overflow:hidden;
  background:var(--hero-1);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 90% at 60% 50%,rgba(0,0,0,.65) 0%,transparent 80%);
}
.hero-glow-1{
  position:absolute;top:-15%;right:2%;
  width:560px;height:560px;
  background:radial-gradient(circle,rgba(0,212,170,0.05) 0%,transparent 60%);
  pointer-events:none;
}
.hero-glow-2{
  position:absolute;bottom:-25%;left:-5%;
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(99,102,241,0.035) 0%,transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  /* 1fr:1.55fr → 1fr:1.95fr — editor 10%↑ + 시작 x 좌표 왼쪽 이동 (left text 영역 줄어듦) */
  display:grid;grid-template-columns:1fr 1.95fr;
  gap:3rem;align-items:center;                     /* gap 3.5→3rem: 추가 확장 공간 */
}

/* Left text */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.275rem .75rem .275rem .45rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  font-size:.7rem;font-weight:600;
  color:rgba(255,255,255,.4);letter-spacing:.025em;
  margin-bottom:1.25rem;
}
.eyebrow-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 7px var(--accent-glow);
  animation:blink-dot 2.4s ease-in-out infinite;
}
@keyframes blink-dot{0%,100%{opacity:1;box-shadow:0 0 7px var(--accent-glow)}50%{opacity:.3;box-shadow:none}}

.hero-h1{
  font-size:clamp(2rem,3.2vw,3.25rem);
  font-weight:800;color:#fff;
  line-height:1.08;letter-spacing:-0.042em;
  margin-bottom:1rem;
}
.hero-h1 em{
  font-style:normal;
  background:linear-gradient(110deg,var(--accent) 0%,#6efed8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-p{
  font-size:.9375rem;color:rgba(255,255,255,.35);
  line-height:1.7;max-width:380px;
  letter-spacing:-0.01em;margin-bottom:1.625rem;
}
.hero-p strong{color:rgba(255,255,255,.55);font-weight:500;}
.hero-actions{display:flex;align-items:center;gap:.75rem;}
/* renamed from .btn-primary → .btn-cta to avoid Bootstrap collision (.btn-primary는 Bootstrap 표준) */
.btn-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.625rem 1.5rem;
  background:var(--accent);color:#000;
  font-weight:700;font-size:.875rem;letter-spacing:-0.01em;
  border:none;border-radius:var(--r-md);transition:all .22s;
}
.btn-cta:hover{background:#00bfa0;transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-glow);}
.btn-ghost-light{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.625rem 1.125rem;
  background:transparent;color:rgba(255,255,255,.4);
  font-size:.875rem;font-weight:500;letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);transition:all .2s;
}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);}

/* =============================================
   WORKSPACE MOCKUP (hero right panel)
   ─ Moved to: dashboard_hero_editor.css
   ─ 별도 파일에서 관리 (디자이너 업데이트 격리)
   ============================================= */

/* =============================================
   WORKSPACE FEATURES SECTION
   ============================================= */
.features-section{padding:5rem 0;background:var(--c-0);}
.features-header{
  text-align:center;margin-bottom:3.5rem;
}
.features-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent);
  background:var(--accent-dim);padding:.25rem .75rem;
  border-radius:999px;margin-bottom:1rem;
}
.features-title{
  font-size:1.875rem;font-weight:800;
  color:var(--c-900);letter-spacing:-0.04em;
  margin-bottom:.625rem;
}
.features-sub{
  font-size:.9375rem;color:var(--c-500);
  letter-spacing:-0.01em;
}

/* Feature rows */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:center;margin-bottom:5rem;
}
.feature-row:last-child{margin-bottom:0;}
.feature-row.reverse{direction:rtl;}
.feature-row.reverse > *{direction:ltr;}

.feature-text{}
.feature-num{
  font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  color:var(--accent);margin-bottom:.75rem;display:block;
}
.feature-name{
  font-size:1.5rem;font-weight:800;
  color:var(--c-900);letter-spacing:-0.035em;
  line-height:1.15;margin-bottom:.75rem;
}
.feature-desc{
  font-size:.9375rem;color:var(--c-500);
  line-height:1.75;letter-spacing:-0.01em;margin-bottom:1.5rem;
  max-width:420px;
}
.feature-pills{display:flex;flex-wrap:wrap;gap:.375rem;}
.feature-pill{
  font-size:.75rem;font-weight:600;
  padding:.275rem .75rem;border-radius:999px;
  border:1.5px solid var(--c-200);color:var(--c-700);
  letter-spacing:-0.01em;
}

/* Feature UI mockups */
.f-mockup{
  background:var(--c-50);
  border:1px solid var(--c-200);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.05);
}
.f-mock-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.625rem 1rem;
  border-bottom:1px solid var(--c-200);
  background:var(--c-0);
}
.f-mock-title{
  font-size:.75rem;font-weight:700;color:var(--c-700);
  letter-spacing:.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:.375rem;
}
.f-mock-title i{color:var(--accent);font-size:.8125rem;}
.f-mock-body{padding:1rem;}

/* TM mockup */
.tm-result-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .75rem;
  border-radius:var(--r-sm);
  margin-bottom:.375rem;
  background:var(--c-0);
  border:1px solid var(--c-200);
}
.tm-pct-badge{
  font-size:.7rem;font-weight:800;
  min-width:42px;text-align:center;
  padding:.175rem .375rem;border-radius:4px;
  flex-shrink:0;
}
.tm-pct-badge.full{background:rgba(0,212,170,.1);color:#00a080;}
.tm-pct-badge.high{background:#eff6ff;color:#3b82f6;}
.tm-pct-badge.mid {background:#fff7ed;color:#ea580c;}
.tm-bar-wrap{flex:1;}
.tm-bar-track{height:4px;background:var(--c-100);border-radius:2px;margin-bottom:.25rem;}
.tm-bar-fill{height:100%;border-radius:2px;}
.tm-text{font-size:.75rem;color:var(--c-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm-action-badge{
  font-size:.6rem;font-weight:700;
  padding:.125rem .45rem;border-radius:999px;
  background:var(--accent-dim);color:var(--accent);
  flex-shrink:0;white-space:nowrap;
}

/* Style QA mockup */
.qa-score-ring{
  width:72px;height:72px;margin:0 auto 1rem;
  position:relative;display:flex;align-items:center;justify-content:center;
}
.qa-score-num{
  font-size:1.25rem;font-weight:800;
  color:var(--c-900);letter-spacing:-0.04em;
  position:relative;z-index:1;
}
.qa-result-row{
  display:flex;align-items:center;gap:.625rem;
  padding:.45rem .75rem;border-radius:var(--r-sm);
  margin-bottom:.3rem;background:var(--c-0);border:1px solid var(--c-200);
  font-size:.7875rem;color:var(--c-700);
}
.qa-result-row i{font-size:.875rem;flex-shrink:0;}
.qa-result-row .err{color:#ef4444;}
.qa-result-row .warn{color:#f59e0b;}
.qa-result-row .ok{color:#10b981;}
.qa-badges{display:flex;gap:.5rem;margin-bottom:.875rem;}
.qa-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.75rem;font-weight:700;
  padding:.25rem .625rem;border-radius:6px;
}
.qa-badge.pass{background:#dcfce7;color:#16a34a;}
.qa-badge.warn{background:#fef3c7;color:#d97706;}
.qa-badge.err {background:#fee2e2;color:#dc2626;}

/* RAG mockup */
.rag-query{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;
  background:var(--c-0);border:1.5px solid var(--c-200);
  border-radius:var(--r-sm);margin-bottom:.875rem;
  font-size:.8125rem;color:var(--c-500);
}
.rag-query i{color:var(--c-400);font-size:.875rem;}
.rag-result-card{
  padding:.625rem .875rem;
  background:var(--c-0);border:1px solid var(--c-200);
  border-radius:var(--r-sm);margin-bottom:.375rem;
  border-left:3px solid var(--c-300);
}
.rag-result-card.top{border-left-color:var(--accent);}
.rag-result-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.25rem;
}
.rag-result-name{font-size:.75rem;font-weight:600;color:var(--c-800);}
.rag-sim{
  font-size:.65rem;font-weight:700;
  padding:.1rem .4rem;border-radius:4px;
}
.rag-sim.top{background:rgba(0,212,170,.1);color:#00a080;}
.rag-sim.mid{background:#eff6ff;color:#3b82f6;}
.rag-result-text{font-size:.7rem;color:var(--c-500);line-height:1.5;}

/* =============================================
   TOOL DIVIDER
   ============================================= */
.tool-divider{
  padding:3rem 0 0;
  background:var(--c-0);
}
.tool-divider-inner{
  display:flex;align-items:center;gap:1.5rem;
  padding-bottom:0;
  border-bottom:2px solid var(--c-900);
  padding-bottom:1.25rem;
}
.tool-divider-label{
  font-size:.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--c-400);white-space:nowrap;
}
.tool-divider-line{flex:1;height:1px;background:var(--c-200);}
.tool-divider-cta{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:.8125rem;font-weight:700;
  color:var(--c-900);letter-spacing:-0.02em;
  white-space:nowrap;
}
.tool-divider-cta i{font-size:.75rem;}

/* Tool zone wrapper */
.tool-zone{
  background:var(--c-50);
  border-bottom:1px solid var(--c-200);
}
.tool-zone .tc{background:var(--c-0);}
.tool-zone .tc.hot{background:linear-gradient(135deg,rgba(0,212,170,.04) 0%,var(--c-0) 55%);}

/* =============================================
   STATS BAND
   ============================================= */
.stats-band{border-top:1px solid var(--c-200);border-bottom:1px solid var(--c-200);}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max-w);margin:0 auto;}
.stat{padding:1.875rem var(--px);border-right:1px solid var(--c-200);}
.stat:last-child{border-right:none;}
.stat-n{font-size:2rem;font-weight:800;letter-spacing:-0.05em;line-height:1;margin-bottom:.25rem;color:var(--c-900);}
.stat-n em{font-style:normal;background:linear-gradient(110deg,var(--accent),#6efed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-l{font-size:.8125rem;color:var(--c-400);font-weight:500;letter-spacing:-0.01em;}

/* =============================================
   SECTIONS
   ============================================= */
.section{padding:5.5rem 0;}
.section-alt{background:var(--c-50);}
.s-header{display:flex;align-items:center;gap:.875rem;margin-bottom:2rem;}
.s-tag{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);background:var(--accent-dim);
  padding:.25rem .625rem;border-radius:999px;flex-shrink:0;
}
.s-title{font-size:1.5rem;font-weight:700;color:var(--c-900);letter-spacing:-0.03em;line-height:1;}

/* =============================================
   TOOL CARDS
   ============================================= */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.625rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;}

.tc{
  display:flex;align-items:center;gap:1.125rem;
  padding:1.125rem 1.25rem;
  background:var(--c-0);
  border:1px solid var(--c-200);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s;
  position:relative;overflow:hidden;
}
.tc:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim),0 8px 28px rgba(0,0,0,.05);
  transform:translateY(-2px);
}
.tc.hot{border-color:rgba(0,212,170,.35);background:linear-gradient(135deg,rgba(0,212,170,.04) 0%,var(--c-0) 55%);}
.tc-icon{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--c-100);color:var(--c-500);font-size:1.0625rem;
  flex-shrink:0;transition:background .18s,color .18s;
}
.tc:hover .tc-icon,.tc.hot .tc-icon{background:var(--accent-dim);color:var(--accent);}
.tc-body{flex:1;min-width:0;}
.tc-title{
  font-size:.9375rem;font-weight:600;color:var(--c-900);
  letter-spacing:-0.025em;margin-bottom:2px;
  display:flex;align-items:center;gap:.5rem;
}
.tc-desc{font-size:.8125rem;color:var(--c-500);line-height:1.5;letter-spacing:-0.01em;}
.tc-chip{
  font-size:.6rem;font-weight:700;padding:.125rem .45rem;
  border-radius:999px;background:rgba(234,88,12,.08);color:#c2410c;
  letter-spacing:.02em;flex-shrink:0;
}
.tc-arrow{color:var(--c-300);font-size:.875rem;flex-shrink:0;transition:transform .18s,color .18s;}
.tc:hover .tc-arrow{transform:translateX(3px);color:var(--accent);}
.hot-badge{
  position:absolute;top:.6875rem;right:.875rem;
  background:linear-gradient(120deg,#ff5f57,#ff3b30);color:#fff;
  font-size:.5625rem;font-weight:800;padding:.175rem .5rem;
  border-radius:999px;letter-spacing:.04em;text-transform:uppercase;
}

/* =============================================
   FOOTER
   ============================================= */
.footer{background:var(--c-900);padding:3.75rem 0 2rem;}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:1.75rem;
}
.f-brand{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-0.04em;margin-bottom:.5rem;}
/* footer 텍스트 가독성 향상 — dark bg(#09090b) 대비 opacity 상향 (.2~.3 → .5~.75) */
.f-tagline{font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.6);margin-bottom:1rem;}
.f-email{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;color:rgba(255,255,255,.7);transition:color .15s;}
.f-email:hover{color:var(--accent);}
.f-col-head{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.85);margin-bottom:.875rem;}
.f-links{list-style:none;display:flex;flex-direction:column;gap:.5625rem;}
.f-links a{font-size:.875rem;color:rgba(255,255,255,.65);letter-spacing:-0.01em;transition:color .15s;}
.f-links a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;}
.f-copy{font-size:.8125rem;color:rgba(255,255,255,.55);}
.f-socials{display:flex;gap:.875rem;}
.f-socials a{font-size:1rem;color:rgba(255,255,255,.6);transition:color .15s;}
.f-socials a:hover{color:#fff;}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1060px){
  :root{--px:1.5rem;}
  .hero-inner{grid-template-columns:1fr;gap:3.5rem;}
  .rb-2,.rb-3,.rb-5,.rb-6{display:none;}
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .hero-h1{font-size:2.75rem;}
  .stats-inner{grid-template-columns:1fr 1fr;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gnb-nav{display:none;}
}


/* =============================================
   FEATURED VIDEO SECTION (Phase 0a — dashboard hero 아래)
   ============================================= */
.featured-video-section {
  padding: 4rem 0;
  background: var(--c-50, #fafaf9);
}
.featured-video-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.featured-video-header .features-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .35rem .75rem;
  background: rgba(0,212,170,0.10);
  color: var(--accent, #00d4aa);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .875rem;
}
.featured-video-header .features-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-900, #09090b);
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
}

.featured-video-list {
  display: grid;
  /* 정확히 한 줄 2개 (사용자 요청), mobile에서 1 column */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .featured-video-list { grid-template-columns: 1fr; }
}

.featured-video-card {
  /* 가로 grid → 세로 stacked: thumb 위 + body 아래 */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-200, #e4e4e7);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}
.featured-video-card:hover {
  background: #fff;  /* main.css의 button:hover (0,1,1) override — specificity (0,2,0) */
  border-color: var(--c-900, #09090b);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.featured-video-thumb {
  position: relative;
  /* 16:9 aspect-ratio 강제 — 카드 폭에 비례한 높이 */
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--c-100, #f4f4f5);
  overflow: hidden;
}
.featured-video-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.featured-video-thumb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: rgba(0,0,0,.7);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: all .2s;
}
.featured-video-card:hover .featured-video-thumb-play {
  background: var(--accent, #00d4aa);
  color: #000;
  transform: translate(-50%, -50%) scale(1.1);
}
.featured-video-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.25rem 1.5rem;  /* thumb는 카드 가장자리까지 = body가 padding 책임 */
}
.featured-video-cat {
  display: inline-flex;
  align-self: flex-start;
  padding: .15rem .5rem;
  background: rgba(0,212,170,0.10);
  color: #00a080;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.featured-video-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-900, #09090b);
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}
.featured-video-desc {
  font-size: .8125rem;
  color: var(--c-500, #6b7280);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 2 → 3 line: 주요 기능 설명 충분히 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-video-footer {
  text-align: center;
  margin-top: 2rem;
}
.featured-video-more {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .55rem 1.25rem;
  background: transparent;
  color: var(--c-700, #3f3f46);
  border: 1px solid var(--c-200, #e4e4e7);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.featured-video-more:hover {
  border-color: var(--c-900, #09090b);
  color: var(--c-900, #09090b);
}

/* mobile media query는 위 .featured-video-list에서 이미 처리됨 */