@font-face {
      /* 옛한글(첫가끝 조합형, 아래아 ㆍ 등) 표시용 — 함초롬돋움.
         아래 unicode-range(옛한글 자모)에 해당하는 글자가 페이지에 있을 때만 다운로드됨
         → 옛한글 없는 일반 페이지엔 부하·표시 영향 없음.
         Noto 계열은 이 조합형 자모를 합치지 못해 흩어져 보이므로(=깨짐) 반드시 필요. */
      font-family: 'HCRYet';
      src: url('/assets/vendor/HCRDotum.woff') format('woff');
      font-display: swap;
      unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF;
    }
    * { font-family: 'Noto Sans KR', 'HCRYet', sans-serif; }
    .font-gothic { font-family: 'Noto Serif KR', 'HCRYet', 'Georgia', serif; }
    /* 영상 자막(VTT 트랙) 캡션에도 옛한글 조합 적용 */
    ::cue { font-family: 'Noto Sans KR', 'HCRYet', sans-serif; }

    /* Scrollbar styling */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f8fafc; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

    /* Hero gradient overlay */
    .hero-overlay {
      background: linear-gradient(
        135deg,
        rgba(15,23,42,0.88) 0%,
        rgba(15,23,42,0.60) 50%,
        rgba(15,23,42,0.40) 100%
      );
    }

    /* Card hover */
    .card-hover {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(15,23,42,0.12);
    }

    /* Nav link underline animation */
    .nav-link { display: inline-flex; flex-direction: column; align-items: center; }
    .nav-link::after {
      content: '';
      display: block;
      height: 2px;
      background: #f8fafc;
      width: 0;
      transition: width 0.3s ease;
      margin-top: 2px;
    }
    .nav-link:hover::after,
    .nav-link.active::after { width: 100%; }

    /* Modal backdrop */
    .modal-backdrop {
      backdrop-filter: blur(6px);
      background: rgba(15,23,42,0.65);
    }

    /* Video thumbnail overlay */
    .video-thumb-overlay {
      background: rgba(15,23,42,0.45);
      transition: background 0.3s;
    }
    .video-thumb-overlay:hover { background: rgba(15,23,42,0.25); }

    /* Tab active */
    .tab-active { border-bottom: 3px solid #0f172a; color: #0f172a; font-weight: 700; }
    .tab-inactive { border-bottom: 3px solid transparent; color: #64748b; }
    .tab-inactive:hover { color: #0f172a; border-bottom-color: #cbd5e1; }

    /* Tag badge */
    .badge { letter-spacing: 0.06em; }

    html { scroll-behavior: smooth; }

    /* ── Notice / Archive page ── */
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Prose — 모달 본문 HTML 렌더링 */
    .prose { line-height: 1.75; color: #374151; }
    .prose h1, .prose h2, .prose h3, .prose h4 {
      font-family: 'Noto Serif KR', 'HCRYet', serif;
      font-weight: 700; margin: 1.25em 0 0.5em; color: #111827;
    }
    .prose h1 { font-size: 1.5em; }
    .prose h2 { font-size: 1.25em; }
    .prose h3 { font-size: 1.1em; }
    .prose p  { margin: 0.75em 0; }
    .prose ul { list-style: disc; padding-left: 1.5em; margin: 0.75em 0; }
    .prose ol { list-style: decimal; padding-left: 1.5em; margin: 0.75em 0; }
    .prose li { margin: 0.3em 0; }
    .prose a  { color: #0f172a; text-decoration: underline; }
    .prose a:hover { color: #1e3a5f; }
    .prose img {
      max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0;
    }
    .prose blockquote {
      border-left: 3px solid #0f172a; padding-left: 1em;
      color: #6b7280; font-style: italic; margin: 1em 0;
    }
    .prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.875em; }
    .prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; }
    .prose th { background: #f9fafb; font-weight: 600; }
    .prose pre, .prose code {
      background: #f3f4f6; border-radius: 4px; font-size: 0.85em;
      padding: 0.15em 0.4em;
    }

    /* notice table row hover */
    .notice-row:hover { background: #f8fafc; }

    /* bg-navy-900/3 custom (Tailwind CDN 미지원) */
    .bg-navy-3 { background: rgba(15,23,42,0.03); }
    .bg-navy-8 { background: rgba(15,23,42,0.08); }

    /* modal scroll */
    .modal-body { scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9; }

    /* Lang toggle */
    .lang-toggle { letter-spacing: 0.08em; }
    .lang-toggle .lang-active { color: #fff; font-weight: 700; }
    .lang-toggle .lang-inactive { color: rgba(255,255,255,0.4); font-weight: 400; }

    /* ── Custom Video Player ── */
    .video-player-wrap { position: relative; background: #000; border-radius: 0; }
    .video-player-wrap video { display: block; width: 100%; max-height: 480px; object-fit: contain; }

    /* spinner overlay */
    .vp-spinner-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.55);
      z-index: 10;
    }
    .vp-spinner {
      width: 48px; height: 48px;
      border: 4px solid rgba(255,255,255,0.2);
      border-top-color: #fff;
      border-radius: 50%;
      animation: vp-spin 0.8s linear infinite;
    }
    @keyframes vp-spin { to { transform: rotate(360deg); } }

    /* controls bar */
    .vp-controls {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.85));
      padding: 32px 16px 14px;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .video-player-wrap:hover .vp-controls,
    .video-player-wrap.vp-paused .vp-controls { opacity: 1; }

    /* progress bar */
    .vp-progress-wrap {
      position: relative; height: 4px; background: rgba(255,255,255,0.25);
      border-radius: 2px; cursor: pointer; margin-bottom: 12px;
      transition: height 0.15s;
    }
    .vp-progress-wrap:hover { height: 6px; }
    .vp-progress-fill {
      height: 100%; background: #f8fafc;
      border-radius: 2px; pointer-events: none;
      transition: width 0.1s linear;
    }
    .vp-progress-thumb {
      position: absolute; top: 50%; right: -6px;
      width: 12px; height: 12px; background: #fff;
      border-radius: 50%; transform: translateY(-50%);
      box-shadow: 0 0 4px rgba(0,0,0,0.4);
      opacity: 0; transition: opacity 0.15s;
      pointer-events: none;
    }
    .vp-progress-wrap:hover .vp-progress-thumb { opacity: 1; }
    .vp-buffered {
      position: absolute; top: 0; left: 0; height: 100%;
      background: rgba(255,255,255,0.2); border-radius: 2px;
      pointer-events: none;
    }

    /* volume slider */
    .vp-volume-slider {
      -webkit-appearance: none; appearance: none;
      width: 64px; height: 3px;
      background: rgba(255,255,255,0.3); border-radius: 2px;
      outline: none; cursor: pointer;
    }
    .vp-volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 12px; height: 12px;
      border-radius: 50%; background: #fff; cursor: pointer;
    }
    .vp-volume-slider::-moz-range-thumb {
      width: 12px; height: 12px; border: none;
      border-radius: 50%; background: #fff; cursor: pointer;
    }

    /* big play button (center) */
    .vp-bigplay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5;
    }
    .vp-bigplay-btn {
      width: 64px; height: 64px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(6px);
      border: 2px solid rgba(255,255,255,0.5);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s, background 0.2s;
    }
    .vp-bigplay:hover .vp-bigplay-btn {
      transform: scale(1.1);
      background: rgba(255,255,255,0.25);
    }
  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* ── 트랜스크립트 ── */
  #transcript-container { scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
  #transcript-container::-webkit-scrollbar { width: 4px; }
  #transcript-container::-webkit-scrollbar-track { background: transparent; }
  #transcript-container::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
  .active-script { scroll-margin: 60px; }

    /* ── 사업소개(About) 페이지 컴포넌트 ── */
    .ab-title { font-family:'Noto Serif KR','HCRYet',serif; font-size:19px; font-weight:700; color:#0f172a; margin:0 0 18px; display:flex; align-items:center; gap:10px; }
    .ab-title::before { content:''; width:22px; height:3px; background:#2438a8; border-radius:2px; display:inline-block; }
    .ab-title.mt { margin-top:38px; }

    /* Overview */
    .ab-list { display:flex; flex-direction:column; gap:14px; }
    .ab-item { display:flex; gap:16px; padding:20px 22px; background:#f8fafc; border:1px solid #eef2f7; border-radius:14px; transition:box-shadow .2s, transform .2s; }
    .ab-item:hover { box-shadow:0 8px 22px rgba(15,23,42,.07); transform:translateY(-1px); }
    .ab-ico { flex-shrink:0; width:42px; height:42px; border-radius:11px; background:#eef2ff; color:#2438a8; display:flex; align-items:center; justify-content:center; font-size:17px; }
    .ab-lbl { font-size:11px; font-weight:700; color:#2438a8; letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px; }
    .ab-val { font-size:16px; color:#111827; line-height:1.6; }
    .ab-val strong { font-weight:700; }
    .prose .ab-sub { margin:8px 0 0; padding-left:0; list-style:none; color:#4b5563; font-size:14.5px; line-height:1.9; }
    .prose .ab-sub li { position:relative; padding-left:15px; margin:0; }
    .ab-sub li::before { content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:#a5bfff; }
    .ab-sub li .note { color:#8a94a6; font-size:13px; }

    /* Greeting */
    .ab-badge { display:inline-flex; flex-direction:column; gap:3px; padding:14px 22px; background:#0f172a; color:#fff; border-radius:12px; margin-bottom:26px; }
    .ab-badge .k { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#a5bfff; }
    .ab-badge .v { font-size:15px; font-weight:600; line-height:1.5; }
    .ab-letter { max-width:680px; word-break:keep-all; word-wrap:break-word; }
    .ab-letter p { margin:0 0 18px; line-height:2.05; color:#3d4653; font-size:15.5px; letter-spacing:-0.015em; }
    .ab-letter p:first-child { font-size:17px; color:#1f2937; font-weight:500; letter-spacing:-0.022em; margin-bottom:20px; }
    .ab-letter p:last-child { margin-bottom:0; }
    .ab-sign { margin-top:26px; padding-top:18px; border-top:1px solid #eef2f7; text-align:right; color:#0f172a; font-weight:700; font-size:15px; }
    .ab-sign span { display:block; font-size:13px; font-weight:400; color:#6b7280; margin-top:3px; }

    /* Timeline */
    .ab-tl { margin:0; }
    .ab-tl-item { position:relative; display:grid; grid-template-columns:130px 1fr; gap:18px; padding:0 0 22px 22px; border-left:2px solid #e5e7eb; }
    .ab-tl-item:last-child { padding-bottom:2px; }
    .ab-tl-item::before { content:''; position:absolute; left:-7px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid #2438a8; box-sizing:border-box; }
    .ab-tl-date { font-weight:700; color:#2438a8; font-size:13.5px; padding-top:1px; }
    .ab-tl-event { color:#1f2937; font-size:15px; line-height:1.55; }
    .ab-ref-h { font-size:14px; font-weight:700; color:#334155; margin:22px 0 12px; padding-left:2px; }
    .ab-ref .ab-tl-item { grid-template-columns:110px 1fr; padding-bottom:14px; }
    .ab-ref .ab-tl-item::before { border-color:#94a3b8; }
    .ab-ref .ab-tl-date { color:#475569; }

    /* Org chart */
    .org { display:flex; flex-direction:column; align-items:center; gap:0; }
    .org-box { background:#fff; border:1.5px solid #c7d2e5; border-radius:10px; overflow:hidden; text-align:center; min-width:150px; }
    .org-box .h { background:#233876; color:#fff; font-weight:600; padding:7px 12px; font-size:13px; }
    .org-box .h.lt { background:#8390bf; }
    .org-box .b { padding:9px 12px; color:#1f2937; line-height:1.7; font-size:13px; }
    .org-lead { font-weight:700; color:#0f172a; }
    .org-note { font-size:10px; color:#8a94a6; display:block; margin-top:2px; }
    .org-conn { width:2px; height:16px; background:#c7d2e5; }
    .org-top { background:#0f172a; color:#fff; border-color:#0f172a; }
    .org-top .h { background:transparent; font-size:12px; color:#a5bfff; padding-bottom:0; }
    .org-top .b { color:#fff; }
    .org-gov { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; width:100%; margin-top:16px; }
    .org-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; width:100%; }
    .org-center { background:#eef2ff; border:1.5px solid #c7d2e5; border-radius:10px; padding:9px 14px; text-align:center; font-weight:700; color:#233876; margin-top:16px; }
    .org-cap { font-size:13px; font-weight:700; color:#334155; align-self:flex-start; margin:26px 0 4px; }