/* ============================================================
   GLOVET — Landing
   KT Enterprise design language (navy/blue/red, Geist, the
   KT header + hero + footer band) applied to GLOVET's
   own content (features / how-it-works).
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --kt-navy:       oklch(0.28 0.06 264);
  --kt-navy-deep:  oklch(0.18 0.05 264);
  /* 포인트 컬러: 밝은 파랑 → 어두운 남색 계열 */
  --kt-blue:       oklch(0.34 0.095 262);
  --kt-blue-bright:oklch(0.44 0.11 260);
  /* 어두운 배경 위에서 쓰는 밝은 변형 (남색은 대비가 안 나오므로) */
  --kt-blue-on-dark: oklch(0.78 0.065 254);
  --kt-red:        oklch(0.58 0.21 22);
  --foreground:    oklch(0.205 0.02 264);
  --muted:         oklch(0.5 0.02 264);
  --border:        oklch(0.9 0.01 264);
  --bg-soft:       oklch(0.975 0.006 264);
  --background:    #ffffff;
  --success:       oklch(0.62 0.16 150);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* icons */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-xs { width: 14px; height: 14px; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }

.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; text-align: center;
  letter-spacing: -.3px; margin-bottom: 10px; text-wrap: balance;
}
.section-desc { text-align: center; color: var(--muted); font-size: 1rem; margin-bottom: 56px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .3s; background: transparent;
}
.site-header.solid { background: var(--background); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.main-row { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand-nav { display: flex; align-items: center; gap: 40px; }
/* 로고: 히어로 위(투명 헤더)에서는 흰색, 스크롤 후 solid 헤더에서는 네이비.
   두 이미지를 겹쳐두고 opacity 로 교차 페이드한다. */
.logo { position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { display: block; height: 30px; width: auto; }
.logo .logo-img-on-light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.logo .logo-img-on-dark { opacity: 1; transition: opacity .3s; }
.logo .logo-img-on-light { opacity: 0; transition: opacity .3s; }
.site-header.solid .logo-img-on-dark { opacity: 0; }
.site-header.solid .logo-img-on-light { opacity: 1; }
@media (max-width: 640px) { .logo-img { height: 25px; } }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  position: relative; padding: 8px 0; font-size: 15px; font-weight: 600;
  text-decoration: none; color: rgba(255,255,255,.9); transition: color .2s;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--kt-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { transform: scaleX(1); }
.site-header.solid .main-nav a { color: var(--foreground); }
.site-header.solid .main-nav a:hover { color: var(--kt-blue); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-inquiry {
  display: inline-flex; align-items: center; padding: 8px 16px; background: var(--kt-blue);
  color: #fff; font-size: 14px; font-weight: 700; border-radius: 0; text-decoration: none;
  transition: filter .2s;
}
.btn-inquiry:hover { filter: brightness(1.1); }
.btn-login {
  display: inline-flex; align-items: center; padding: 8px 16px;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 0; color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.btn-login:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); }
.site-header.solid .btn-login { border-color: var(--border); color: var(--foreground); }
.site-header.solid .btn-login:hover { border-color: var(--kt-blue); color: var(--kt-blue); background: transparent; }

.mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: #fff; }
.site-header.solid .mobile-toggle { color: var(--foreground); }

/* hover hamburger + white dropdown panel */
.header-menu-wrap { position: relative; display: flex; align-items: center; }
.header-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer; border-radius: 0;
  color: #fff; opacity: 0; visibility: hidden;
  transition: opacity .25s, color .3s, background .2s;
}
.site-header:hover .header-menu-toggle,
.header-menu-toggle.open { opacity: 1; visibility: visible; }
.header-menu-toggle:hover { background: rgba(255,255,255,.14); }
.site-header.solid .header-menu-toggle { color: var(--foreground); }
.site-header.solid .header-menu-toggle:hover { background: var(--bg-soft); }
.header-menu {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
  width: 260px; max-width: 82vw; z-index: 60;
  background: #fff; border-left: 1px solid var(--border);
  padding: 18px 14px 24px;
  display: flex; flex-direction: column; gap: 4px;
  animation: hm-slide .28s cubic-bezier(0.16,1,0.3,1) both;
}
.header-menu[hidden] { display: none; }
.header-menu a {
  padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--foreground);
  text-decoration: none; border-radius: 0; transition: background .15s, color .15s;
}
.header-menu a:hover { background: var(--bg-soft); color: var(--kt-blue); }
.header-menu-brand {
  padding: 6px 16px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.header-menu-brand:hover { background: transparent; }
.header-menu-brand .logo-img { height: 26px; }
@keyframes hm-slide { from { transform: translateX(100%); } to { transform: none; } }

.mobile-drawer { background: var(--background); border-top: 1px solid var(--border); }
.mobile-drawer ul { list-style: none; padding: 8px 20px; }
.mobile-drawer li a {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
  font-size: 16px; font-weight: 700; color: var(--foreground); text-decoration: none;
}
.mobile-drawer li a .ic { color: var(--muted); }
.drawer-utility {
  display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border);
}
.drawer-utility a {
  flex: 1; text-align: center; padding: 10px; border-radius: 0;
  font-size: 14px; font-weight: 700; text-decoration: none;
  border: 1.5px solid var(--border); color: var(--foreground);
}
.drawer-utility a:last-child { background: var(--kt-blue); color: #fff; border-color: var(--kt-blue); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 660px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-tint { position: absolute; inset: 0; background: oklch(0.16 0.05 264 / 0.74); }
.hero-grad { display: none; }
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 880px; padding: 96px 20px 0; text-align: center; }
.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.5px;
  color: #fff; text-wrap: balance;
}
.gradient-text { color: var(--kt-blue-on-dark); }
.hero-sub { margin-top: 20px; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; color: rgba(255,255,255,.85); line-height: 1.8; }
.hero-cta { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 0;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
  color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background .25s, border-color .25s, transform .15s;
}
.btn-hero:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
.btn-hero-primary {
  background: var(--kt-blue); border-color: var(--kt-blue);
}
.btn-hero-primary:hover { background: var(--kt-blue-bright); border-color: var(--kt-blue-bright); }
/* 메인 주요 CTA — HUD 코너 + 스캔 스윕 + 글로우 */
.btn-hero-start {
  position: relative; isolation: isolate; overflow: hidden;
  font-size: 19px; padding: 19px 52px; letter-spacing: -.2px;
  border: 1px solid rgba(255,255,255,.26);
  animation: btn-glow 3.4s ease-in-out infinite;
  transition: transform .25s cubic-bezier(0.16,1,0.3,1), border-color .25s;
}
/* HUD 코너 브래킷 */
.btn-hero-start::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 1; opacity: .5;
  background:
    linear-gradient(#fff,#fff) left  top    / 13px 1px no-repeat,
    linear-gradient(#fff,#fff) left  top    / 1px 13px no-repeat,
    linear-gradient(#fff,#fff) right top    / 13px 1px no-repeat,
    linear-gradient(#fff,#fff) right top    / 1px 13px no-repeat,
    linear-gradient(#fff,#fff) left  bottom / 13px 1px no-repeat,
    linear-gradient(#fff,#fff) left  bottom / 1px 13px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 13px 1px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 1px 13px no-repeat;
  transition: inset .3s cubic-bezier(0.16,1,0.3,1), opacity .3s;
}
/* 스캔 스윕 */
.btn-hero-start::after {
  content: ''; position: absolute; top: 0; left: -50%; z-index: 0;
  width: 38%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-22deg);
  animation: btn-sweep 3.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
.btn-hero-start > * { position: relative; z-index: 2; }
/* 라벨은 버튼 정중앙, 화살표는 오른쪽에 겹치지 않게 배치 */
.btn-hero-start { justify-content: center; gap: 0; }
.btn-hero-start-label { display: block; text-align: center; }
.btn-hero-start .ic { position: absolute; top: 50%; right: 22px; margin-top: -8px; }
.btn-hero-start:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.7); }
.btn-hero-start:hover::before { inset: 3px; opacity: .95; }
.btn-hero-start .ic { transition: transform .25s cubic-bezier(0.16,1,0.3,1); }
.btn-hero-start:hover .ic { transform: translateX(5px); }

@keyframes btn-sweep { 0% { left: -50%; } 60%, 100% { left: 135%; } }
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 1px oklch(0.62 0.10 256 / .28), 0 14px 40px -12px oklch(0.34 0.095 262 / .85); }
  50%      { box-shadow: 0 0 0 1px oklch(0.62 0.10 256 / .55), 0 20px 58px -10px oklch(0.38 0.10 260 / 1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hero-start { animation: none; box-shadow: 0 14px 40px -12px oklch(0.34 0.095 262 / .8); }
  .btn-hero-start::after { animation: none; opacity: 0; }
}

@media (min-width: 1024px) { .hero { min-height: 720px; } }

/* ============================================================
   Features
   ============================================================ */
.features { padding: 96px 0; background: var(--background); border-bottom: 1px solid var(--border); }
.features-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.features-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px;
}
.features-title {
  font-size: clamp(1.5rem, 3vw, 34px); font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}

/* 슬라이더 조작부 */
.slider-nav { display: flex; gap: 8px; flex: none; }
.sld-btn {
  display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  background: var(--background); border: 1px solid var(--border); color: var(--kt-navy-deep);
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.sld-btn:hover { background: var(--kt-blue); border-color: var(--kt-blue); color: #fff; transform: translateY(-2px); }
.sld-btn:disabled { opacity: .3; cursor: default; transform: none; background: var(--background); border-color: var(--border); color: var(--kt-navy-deep); }

/* 슬라이더 (스크롤 스냅 — 터치 스와이프 그대로 지원) */
.case-viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.case-viewport::-webkit-scrollbar { display: none; }
.case-track { display: flex; gap: 20px; }

.case-card {
  position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; overflow: hidden;
  scroll-snap-align: start; background: var(--kt-navy-deep);
}
@media (min-width: 640px)  { .case-card { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) {
  .case-track { gap: 24px; }
  .case-card { flex-basis: calc((100% - 48px) / 3); }
  .features-inner { padding: 0 40px; }
}

.case-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover img { transform: scale(1.07); }
/* 아래쪽만 어둡게 깔아 이미지가 죽지 않게 */
.case-overlay {
  position: absolute; inset: 0; transition: opacity .5s;
  background: linear-gradient(180deg,
    oklch(0.16 0.05 264 / .10) 0%,
    oklch(0.16 0.05 264 / .34) 42%,
    oklch(0.13 0.045 264 / .90) 100%);
}
.case-card:hover .case-overlay { opacity: .92; }
/* 하단 진행선 */
.case-card::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--kt-blue-on-dark); transition: width .5s cubic-bezier(0.16,1,0.3,1); z-index: 2;
}
.case-card:hover::after { width: 100%; }

.case-index {
  position: absolute; top: 16px; left: 20px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.55);
  transition: color .4s;
}
.case-card:hover .case-index { color: var(--kt-blue-on-dark); }

.case-text {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding: 22px 22px 24px; text-align: left;
}
.case-text h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 800; line-height: 1.4;
  color: #fff; letter-spacing: -.2px; text-wrap: balance;
}
.case-text p {
  margin-top: 0; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.86); text-wrap: pretty;
  transition: max-height .5s cubic-bezier(0.16,1,0.3,1), opacity .45s, margin-top .5s;
}
.case-card:hover .case-text p { margin-top: 10px; max-height: 9rem; opacity: 1; }

/* 도트 + 자동재생 진행바 */
.slider-foot { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.slider-dots { display: flex; gap: 8px; flex: none; }
.slider-dots button {
  width: 22px; height: 3px; padding: 0; border: none; cursor: pointer;
  background: var(--border); transition: background .3s, width .3s;
}
.slider-dots button:hover { background: oklch(0.34 0.095 262 / .5); }
.slider-dots button[aria-selected="true"] { width: 40px; background: var(--kt-blue); }
.slider-progress { flex: 1; height: 1px; background: var(--border); overflow: hidden; }
.slider-progress i { display: block; height: 100%; width: 0; background: var(--kt-blue); }

@media (max-width: 640px) {
  .features-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .slider-nav { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .case-viewport { scroll-behavior: auto; }
}

/* 45,000 전문용어 섹션 (라이트 · 풀폭 마퀴) */
.features .features-inner { max-width: none; padding: 0; }
.glossary-feature {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 96px) 0; background: var(--background);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.glossary-showcase { padding-inline: max(24px, calc((100vw - 1320px) / 2)); display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.28fr); gap: clamp(32px, 3.5vw, 56px); align-items: center; }
.glossary-copy { max-width: 760px; }
.glossary-proof { margin: 0; }
.glossary-proof img { width: 100%; height: auto; display: block; border: 1px solid var(--border); box-shadow: 0 26px 60px -28px rgba(4,13,34,.55); }
.glossary-proof figcaption { margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.glossary-proof figcaption b { color: var(--kt-navy-deep); font-weight: 700; }
.glossary-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--kt-blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.glossary-copy h2 { color: var(--kt-navy-deep); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.38; letter-spacing: -.035em; white-space: nowrap; }
.glossary-copy > p { max-width: 620px; margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.glossary-stats { display: flex; gap: clamp(20px, 4vw, 42px); margin: 34px 0; }
.glossary-stats div { display: flex; flex-direction: column; gap: 4px; }
.glossary-stats strong { color: var(--kt-navy-deep); font-size: clamp(1.45rem, 2.5vw, 30px); letter-spacing: -.03em; }
.glossary-stats span { color: var(--muted); font-size: 11px; }
.glossary-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; color: #fff; background: var(--kt-blue); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; }
.glossary-cta:hover { transform: translateY(-2px); background: var(--kt-navy-deep); box-shadow: 0 14px 30px -16px rgba(4,13,34,.5); }
/* 라이트 섹션 내부 마퀴 칩 (배경보다 살짝 진한 카드로 대비) */
.glossary-feature .term-marquee { margin-top: clamp(34px, 4.5vw, 52px); }
.glossary-feature .term-chip { background: var(--bg-soft); border-color: var(--border); padding: 13px 18px; }
@media (min-width: 1024px) {
  .glossary-showcase { padding-inline: max(40px, calc((100vw - 1320px) / 2)); }
}
@media (max-width: 1320px) {
  .glossary-copy h2 { white-space: normal; }
}
@media (max-width: 900px) {
  .glossary-showcase { grid-template-columns: 1fr; }
  .glossary-proof { max-width: 620px; }
}
@media (max-width: 560px) {
  .features { padding: 64px 0; }
  .glossary-showcase { padding: 32px 24px; gap: 38px; }
  .glossary-stats { justify-content: space-between; gap: 10px; }
  .catalog-grid { grid-template-columns: 1fr; }
}

/* 강의자료 전문용어 자동 추출 */
.lecture-glossary { padding: clamp(72px, 9vw, 116px) 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.lecture-glossary-inner {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr); gap: clamp(54px, 8vw, 108px); align-items: center;
}
.lecture-glossary-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--kt-blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.lecture-glossary-copy h2 { color: var(--kt-navy-deep); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.38; letter-spacing: -.035em; }
.lecture-glossary-copy > p { max-width: 560px; margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.lecture-glossary-steps { display: grid; gap: 0; margin: 30px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lecture-glossary-steps li { display: flex; align-items: center; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--foreground); font-size: 13px; font-weight: 650; }
.lecture-glossary-steps b { color: var(--kt-blue); font-size: 10px; letter-spacing: .08em; }
.lecture-glossary-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; color: #fff; background: var(--kt-blue); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; }
.lecture-glossary-cta:hover { transform: translateY(-2px); background: var(--kt-navy-deep); box-shadow: 0 14px 28px -16px rgba(4,13,34,.7); }
.lecture-upload-demo { padding: 22px; color: var(--foreground); background: var(--background); border: 1px solid var(--border); box-shadow: 0 26px 70px -46px rgba(15,35,72,.55); }
.lecture-upload-head,.lecture-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.lecture-upload-head b { color: #1c7a48; }
.lecture-file-card { display: flex; align-items: center; gap: 13px; margin: 16px 0 24px; padding: 15px; background: var(--bg-soft); border: 1px solid var(--border); }
.lecture-file-icon { display: block; width: 42px; height: 48px; flex: none; object-fit: contain; }
.lecture-file-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lecture-file-info strong { overflow: hidden; color: var(--kt-navy-deep); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lecture-file-info span { color: var(--muted); font-size: 11px; }
.lecture-file-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; color: #fff; background: #1c7a48; font-size: 13px; }
.lecture-result-head { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.lecture-result-head b { color: var(--kt-blue); }
.lecture-term-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.lecture-term-list span { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); color: #5a6b86; font-size: 11px; }
.lecture-term-list b { color: var(--kt-navy-deep); white-space: nowrap; }
.lecture-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; color: var(--muted); background: rgba(47,111,224,.07); font-size: 11px; }
.lecture-save-bar b { color: var(--kt-blue); white-space: nowrap; }

/* 약어 섹션은 45,000 섹션(.glossary-feature)과 동일 디자인을 재사용 */

/* 용어집 홍보 컴포넌트 공통 타이포그래피 */
.term-eyebrow,.glossary-kicker,.lecture-glossary-kicker {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .15em;
}
.term-demo-title,.glossary-copy h2,.lecture-glossary-copy h2 {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.38; letter-spacing: -.035em;
}
.term-demo-sub,.glossary-copy > p,.lecture-glossary-copy > p {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.85;
}
@media (max-width: 900px) {
  .lecture-glossary-inner { grid-template-columns: 1fr; }
  .lecture-glossary-copy > p { max-width: 680px; }
}
@media (max-width: 560px) {
  .lecture-glossary { padding: 64px 24px; }
  .lecture-upload-demo { padding: 16px; }
  .lecture-term-list { grid-template-columns: 1fr; }
  .lecture-term-list span:nth-child(n+7) { display: none; }
  .lecture-save-bar span { max-width: 170px; }
}

/* ============================================================
   How It Works
   ============================================================ */
.howto { padding: 96px 0; background: var(--bg-soft); }
.features-sub { margin: -28px 0 40px; font-size: 1rem; color: var(--muted); }
.step-badge {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #fff;
  background: var(--kt-blue); padding: 4px 11px; border-radius: 0;
}

/* ============================================================
   Footer — KT CTA band + GLOVET info
   ============================================================ */
.footer-cta { position: relative; overflow: hidden; background: var(--kt-navy-deep); }
.footer-wave {
  position: absolute; inset: 0 0 0 auto; height: 100%; width: 66%;
  object-fit: cover; opacity: .65; pointer-events: none;
}
.footer-cta-grad {
  position: absolute; inset: 0;
  background: oklch(0.18 0.05 264 / 0.82);
}
.footer-cta-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 64px 24px; }
.footer-cta-inner h2 { font-size: clamp(1.25rem, 2.4vw, 26px); font-weight: 700; color: #fff; text-wrap: balance; }
.btn-consult {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 13px 26px;
  border-radius: 0; background: #fff; color: var(--kt-navy-deep); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background .2s;
}
.btn-consult:hover { background: rgba(255,255,255,.9); }
.btn-consult .ic { transition: transform .25s; }
.btn-consult:hover .ic { transform: translateX(4px); }

.footer-info { background: oklch(0.13 0.03 264); }
.footer-info-inner {
  max-width: 1280px; margin: 0 auto; padding: 44px 24px;
  display: flex; flex-direction: column; gap: 28px;
}
.footer-logo { display: inline-block; text-decoration: none; }
.footer-logo .logo-img { height: 28px; }
.footer-tagline { margin-top: 12px; font-size: .9rem; color: rgba(255,255,255,.6); }
.copyright { margin-top: 16px; font-size: .8rem; color: rgba(255,255,255,.4); }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-btn {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 0;
  border: 1px solid rgba(255,255,255,.2); background: none; color: #fff; font-size: 14px;
  font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s;
}
.footer-btn:hover { background: rgba(255,255,255,.1); }
/* 남색 푸터 위에서는 남색 버튼이 묻히므로 테두리로 분리 */
.footer-btn-primary { background: var(--kt-blue-bright); border-color: rgba(255,255,255,.34); }
.footer-btn-primary:hover { filter: brightness(1.15); background: var(--kt-blue-bright); }

@media (min-width: 768px) {
  .footer-info-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (min-width: 1024px) { .footer-cta-inner { padding: 80px 40px; } .footer-info-inner { padding: 52px 40px; } }

/* ============================================================
   Reveal + fade-up motion
   ============================================================ */
@keyframes fade-up { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }
.fade-up { opacity: 0; animation: fade-up .7s cubic-bezier(0.16,1,0.3,1) both; }
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ============================================================
   Login modal (inline popup)
   ============================================================ */
.login-modal { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; align-items: flex-start; }
.login-modal[hidden] { display: none; }
.login-modal-backdrop { position: absolute; inset: 0; background: oklch(0.16 0.05 264 / 0.12); }
.login-modal-card {
  position: relative; z-index: 1; margin: 70px 40px 0; width: 340px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 24px 22px;
  animation: lm-in .2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes lm-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .login-modal { justify-content: center; }
  .login-modal-card { margin: 64px 16px 0; }
}
.login-modal-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: none; background: none; color: var(--muted); font-size: 15px; cursor: pointer; border-radius: 0;
}
.login-modal-close:hover { background: var(--bg-soft); color: var(--foreground); }
.login-modal-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.login-modal-sub { font-size: .85rem; color: var(--muted); margin: 4px 0 16px; }
.login-alert { font-size: .82rem; padding: 9px 12px; border-radius: 0; margin-bottom: 12px; border: 1px solid transparent; }
.login-alert[hidden] { display: none; }
.login-alert.error   { background: oklch(0.58 0.21 22 / 0.1);  border-color: oklch(0.58 0.21 22 / 0.35);  color: oklch(0.5 0.2 22); }
.login-alert.success { background: oklch(0.62 0.16 150 / 0.1); border-color: oklch(0.62 0.16 150 / 0.35); color: oklch(0.42 0.14 150); }
#loginForm { display: flex; flex-direction: column; gap: 10px; }
#loginForm input {
  padding: 11px 13px; font-size: .95rem; font-family: inherit; color: var(--foreground);
  background: #fff; border: 1.5px solid var(--border); border-radius: 0;
}
#loginForm input::placeholder { color: var(--muted); }
#loginForm input:focus { outline: none; border-color: var(--kt-blue); }
.login-submit {
  margin-top: 4px; padding: 12px; font-size: .95rem; font-weight: 700; font-family: inherit;
  color: #fff; background: var(--kt-blue); border: none; border-radius: 0; cursor: pointer;
  transition: background .2s;
}
.login-submit:hover { background: var(--kt-blue-bright); }
.login-submit:disabled { opacity: .7; cursor: default; }

/* ============================================================
   전문 용어 스트림 (Glossary engine) — 자동 스크롤 마퀴
   ============================================================ */
.term-demo {
  position: relative; overflow: hidden;
  padding: 88px 0 92px; background: var(--bg-soft);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* 은은한 도트 그리드 — 위쪽만 보이도록 마스크 */
.term-demo-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, oklch(0.34 0.095 262 / .20) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, transparent 72%);
}
.term-demo-inner { position: relative; z-index: 1; width: 100%; padding-inline: 24px; }

.term-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: 12px; font-weight: 800; letter-spacing: .15em; color: var(--kt-blue);
}
.pulse-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pulse-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: pulse-ring 1.9s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }

.term-demo-title {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.38; letter-spacing: -.035em;
  color: var(--kt-navy-deep); text-wrap: balance;
}
.term-demo-sub { max-width: 920px; margin-top: 20px; font-size: 15px; line-height: 1.85; color: var(--muted); white-space: nowrap; }
.term-demo-sub b { color: var(--kt-blue); font-variant-numeric: tabular-nums; }

/* 마퀴 (양끝 페이드) */
.term-marquee {
  position: relative; z-index: 1; margin-top: 40px; display: grid; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.term-row { overflow: hidden; }
.term-track { display: flex; gap: 12px; width: max-content; }
/* JS가 한 벌 복제한 뒤에만 흐른다 (복제 전 -50% 이동은 어긋나므로) */
.term-marquee.is-ready .term-track { animation: term-scroll var(--dur, 52s) linear infinite; }
.term-track-rev { animation-direction: reverse !important; }
.term-marquee:hover .term-track { animation-play-state: paused; }
@keyframes term-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.term-chip {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; background: var(--background); border: 1px solid var(--border);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.term-chip::after {
  content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--kt-blue); transition: width .4s cubic-bezier(0.16,1,0.3,1);
}
.term-chip:hover {
  border-color: oklch(0.34 0.095 262 / .45); transform: translateY(-3px);
  box-shadow: 0 12px 28px -14px oklch(0.28 0.06 264 / .5);
}
.term-chip:hover::after { width: 100%; }
.term-chip .en { font-size: .9rem; font-weight: 600; color: #5a6b86; white-space: nowrap; }
.term-chip .arrow { font-size: .85rem; font-weight: 700; color: oklch(0.34 0.095 262 / .55); }
.term-chip .ko { font-size: 1rem; font-weight: 800; color: var(--kt-blue); white-space: nowrap; }

@media (min-width: 1024px) { .term-demo-inner { padding-inline: max(40px, calc((100vw - 1200px) / 2)); } }
@media (max-width: 900px) { .term-demo-sub { white-space: normal; } }
@media (max-width: 640px) { .term-demo { padding: 64px 0 68px; } .term-demo-sub br { display: none; } .term-chip { padding: 12px 16px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  /* 마퀴는 장식용 브랜드 요소라 동작 유지 (사용자 요청) */
  .pulse-dot::after { animation: none; }
}

/* ============================================================
   메인 플랫 & 각지게 (빛번짐/광채·둥근 모서리 제거, 배경 이미지는 유지)
   ============================================================ */
.btn-hero { backdrop-filter: none !important; background: rgba(255,255,255,.12); }
.btn-hero-primary { background: var(--kt-blue); }
/* 주요 CTA만 그라디언트 유지 (플랫 규칙에서 제외) */
.btn-hero-start {
  background: linear-gradient(118deg, oklch(0.22 0.06 264) 0%, var(--kt-blue) 48%, oklch(0.45 0.11 258) 100%) !important;
}
.btn-hero, .btn-hero-primary, .btn-hero-start, .btn-consult, .btn-login, .btn-inquiry, .footer-btn,
.case-card, .step-badge, .header-menu, .header-menu a, .mobile-drawer, .drawer-utility a,
.mobile-toggle, .header-menu-toggle, .login-modal-card, .login-modal-card input,
.login-modal-close, .login-alert, .login-submit, .title-input { border-radius: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .header-inner { padding: 0 20px; }
  .main-nav, .btn-login, .btn-inquiry, .header-menu-wrap { display: none; }
  .mobile-toggle { display: block; }
  .steps { flex-direction: column; align-items: center; }
  .step-arrow { transform: rotate(90deg); margin: 0; }
}

/* ── 농림축산검역본부 「새로운 수의학용어집」 학습 — 히어로 배경 위에 이어서 배치 ── */
.hero { flex-direction: column; }
/* 첫 화면 문구는 예전처럼 한 화면 높이를 차지하고, 용어집 소개는 그 아래로 이어진다 */
.hero > .hero-content { min-height: 660px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .hero > .hero-content { min-height: 720px; } }
.official-glossary {
  position: relative; z-index: 1; width: 100%;
  padding: clamp(72px, 9vw, 120px) 24px clamp(80px, 10vw, 128px);
  color: #fff;
}
.official-glossary-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.og-book { margin: 0; display: flex; flex-direction: column; align-items: center; }
.og-book-cover {
  position: relative; width: min(100%, 360px);
  transform: perspective(1400px) rotateY(-14deg) rotateX(2deg);
  transform-origin: left center; transition: transform .6s cubic-bezier(.2,.8,.25,1);
  box-shadow: 28px 34px 60px -18px rgba(0,0,0,.65), 2px 2px 0 rgba(255,255,255,.06);
}
.og-book-cover::before { /* 책등 그림자 */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 14px; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.12) 55%, transparent);
}
.og-book:hover .og-book-cover { transform: perspective(1400px) rotateY(-4deg); }
.og-book-cover img { display: block; width: 100%; height: auto; }
.og-book figcaption { margin-top: 26px; color: rgba(255,255,255,.6); font-size: 12.5px; text-align: center; }

.og-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  color: #f2d36b; font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .15em;
}
.og-copy h2 { color: #fff; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.38; letter-spacing: -.035em; }
.og-copy h2 span { color: #f2d36b; }
.og-copy > p { max-width: 600px; margin-top: 22px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.85; }
.og-copy > p b { color: #fff; font-weight: 700; }
.og-stats { display: flex; gap: clamp(28px, 5vw, 56px); margin-top: 34px; }
.og-stats div { display: flex; flex-direction: column; gap: 4px; }
.og-stats strong { color: #fff; font-size: clamp(1.45rem, 2.5vw, 30px); letter-spacing: -.03em; white-space: nowrap; }
.og-stats span { color: rgba(255,255,255,.6); font-size: 11.5px; }

@media (max-width: 900px) {
  .official-glossary-inner { grid-template-columns: 1fr; }
  .og-book-cover { width: min(70%, 300px); transform: perspective(1400px) rotateY(-10deg); }
}
@media (max-width: 560px) {
  .official-glossary { padding: 56px 16px 72px; }
  .og-stats { gap: 14px 28px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .og-book-cover, .og-book:hover .og-book-cover { transition: none; transform: none; }
}