/* ===== 공통: iframe 크롭 ===== */
.iframe-crop{
  position:relative; width:100%;
  height:var(--vh);                 /* 예: 7000px */
  overflow:hidden; background:#fff;
}
.iframe-crop > .iframe-shift{
  display:block; width:100%; border:0;
  height:calc(var(--vh) + var(--offset));
  transform:translateY(calc(var(--offset) * -1));
}

/* ===== 탭 행: 3등분(플렉스) ===== */
.tab-row{ display:flex; gap:12px; }

/* ===== 탭 카드: 기본(비활성) ===== */
.tab-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex:1 1 0%; min-width:0; padding:14px; border-radius:12px;
  transition:border-color .2s, box-shadow .2s, color .2s, opacity .2s;

  background:rgb(24 24 27 / .90);      /* zinc-900/90 */
  color:#cbd5e1;                        /* slate-300 */
  border:1px solid rgb(39 39 42 / 1);   /* zinc-800 */

  /* 네온 기본(비활성: 어둡게) + 중앙 비우는 폭 */
  --neon-c1:#4d7c0f;    /* lime-700 */
  --neon-c2:#5de150;    /* lime-600 */
  --neon-opacity:.45;   /* 어둡게 */
  --neon-gap:180px;     /* 텍스트/아이콘 아래 비움 */
}
html:not(.dark) .tab-card{ background:#111827; }

/* ===== 카드 배경 패턴(항상 아래 레이어) ===== */
.tab-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px);
}

/* ===== 네온 라인(좌/우만, 중앙 비움) — 단일 정의 ===== */
.tab-card::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:6px; pointer-events:none; z-index:0;
  opacity:var(--neon-opacity) !important;
  background-image:
    linear-gradient(90deg, var(--neon-c1), var(--neon-c2), var(--neon-c1)),
    linear-gradient(90deg, var(--neon-c1), var(--neon-c2), var(--neon-c1)) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:left center, right center !important;
  background-size:
    calc((100% - var(--neon-gap)) / 2) 100%,
    calc((100% - var(--neon-gap)) / 2) 100% !important;
}

/* ===== 내용은 항상 위 레이어 ===== */
.tab-card > *{ position:relative; z-index:1; }

/* ===== 하이라이트(호버=포커스=활성 동일 톤) ===== */
/* 이 규칙 하나로 모든 상태를 '완벽 동일'하게 맞춤 */
.tab-card:is(:hover, :focus-visible, [aria-selected="true"], [aria-selected="true"]:hover){
  border-color:#4add50 !important; /* lime-600 */
  box-shadow:0 0 0 1px rgba(101,163,13,.18), 0 8px 30px rgba(0,0,0,.25) !important;
  color:#cbd5e1 !important;        /* 텍스트 컬러 점프 방지 */

  /* 네온도 동일 톤으로 고정(밝게) */
  --neon-c1:#4add50 !important;    /* lime-600 */
  --neon-c2:#4add50 !important;    /* lime-500 */
  --neon-opacity:1 !important;   /* 밝기 고정 */
}

/* ===== 아이콘/라벨 슬롯 ===== */
.tab-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; margin-right:10px;
}
.tab-icon img{ display:block; }
.tab-label{ font-weight:600; white-space:nowrap; }

/* ===== 모바일 보정 ===== */
@media (max-width:420px){
  .tab-card{ padding:10px; --neon-gap:140px; }
  .tab-icon{ width:28px; height:28px; margin-right:8px; }
  .tab-label{ font-size:13px; }
}
/* === TAB HIGHLIGHT FINAL LOCK (put this at the very end) === */

/* 활성/호버 공통 톤 변수 */
:root{
  --tab-active-bc: #5de150; /* lime-600 */
  --tab-active-shadow: 0 0 0 1px rgba(101,163,13,.18), 0 8px 30px rgba(0,0,0,.25);
  --tab-active-neon1: #5de150; /* lime-600 */
  --tab-active-neon2: #4add50; /* lime-500 */
  --tab-active-neon-opacity: .85; /* 밝기 고정 */
  --tab-pattern-opacity: .35; /* 배경 패턴 불투명도 */
}

/* 혹시 상위에서 투명도/필터가 걸려도 무시 */
.tab-card{ opacity:1 !important; filter:none !important; }

/* 배경 패턴 투명도 고정(상태 동일) */
.tab-card::before{ opacity:var(--tab-pattern-opacity) !important; }

/* 네온 라인 정의를 변수 기반으로 강제 */
.tab-card::after{
  opacity: var(--neon-opacity, .45) !important;
  background-image:
    linear-gradient(90deg, var(--neon-c1, #4d7c0f), var(--neon-c2, #5de150), var(--neon-c1, #4d7c0f)),
    linear-gradient(90deg, var(--neon-c1, #4d7c0f), var(--neon-c2, #5de150), var(--neon-c1, #4d7c0f)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  /* background-size는 기존 정의 유지(중앙 비우기) */
}

/* 호버 = 포커스 = 활성 = 활성+호버 → 완전 동일 스타일로 잠금 */
.tab-card:is(:hover, :focus-visible, [aria-selected="true"], [aria-selected="true"]:hover){
  /* 테두리/그림자 동일 */
  border-color: var(--tab-active-bc) !important;
  box-shadow: var(--tab-active-shadow) !important;

  /* 텍스트 컬러 점프 방지 */
  color:#cbd5e1 !important;

  /* 네온 라인 동일(변수로 잠금) */
  --neon-c1: var(--tab-active-neon1) !important;
  --neon-c2: var(--tab-active-neon2) !important;
  --neon-opacity: var(--tab-active-neon-opacity) !important;
}

/* 링크 상태로 색이 변하는 것 방지 */
a.tab-card:link,
a.tab-card:visited,
a.tab-card:active{ color:inherit !important; }