/* hero_table_probe.css (Final Cleanup) */

/* --- 기본 레이아웃 --- */

#heroTableProbe {
  position: absolute;
  z-index: 11;
  display: block !important;
  inset: auto;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
}

#heroTableProbe .probe-table-wrap {
  position: absolute;
  inset: 0;
  padding: 10px;
  box-sizing: border-box;
}

.card-animator {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateZ(0);
}

#heroTableProbe .probe-card {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}


/* --- 카드 헤더 타이틀 위치 조절 (PC) --- */
.card-header-title {
  position: static;
  flex-shrink: 0;
  color: #414449;
  font-size: 1.1rem;
  font-weight: 600;
  z-index: 10;
  padding: 20px 25px 0;
}


/* --- 4칸 레이아웃 및 경계선 스타일 --- */

/* 4개 항목 블록 전체의 상하 위치 조절 (PC) */
.probe-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  top: 30px;
  z-index: 1;
  flex-grow: 1;
  min-height: 0;
  top: 0;
  padding: 10px;
  box-sizing: border-box;
}
/* 내부 경계선 */
.probe-section:not(:last-child)::after {
  content: '';
  position: absolute;
  background-color: #193c93;
  width: 2px;
  height: 40%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* --- 팝업 애니메이션 실행 --- */

#heroTableProbe .card-animator.pop-in {
  animation: dramatic-popup 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}


/* --- SVG 끊김 없는 테두리 애니메이션 --- */

.border-anim-svg {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#border-path {
  fill: transparent;
  stroke: #333;
  stroke-width: 1px;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
}

#heroTableProbe .card-animator.pop-in .probe-card #border-path {
  animation: draw-border 1.5s ease-out 0.4s forwards;
}


/* --- Keyframes 애니메이션 정의 --- */

@keyframes dramatic-popup {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  70% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes draw-border {
  to {
    stroke-dashoffset: 0;
  }
}



/* --- 모바일 반응형 스타일 --- */
/* body에 .mobile-portrait 클래스가 있을 때만 모바일 스타일 적용 */

body.mobile-portrait #heroTableProbe .probe-card {
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 260px;
}

body.mobile-portrait .probe-content {
  flex-grow: 1;
  min-height: 0;
  flex-direction: column;
  height: auto;
  top: 0;
  overflow: visible;
}
/* --- 모바일 경계선 강제 적용 (해결책) --- */
body.mobile-portrait #heroTableProbe .probe-content .probe-section:not(:last-child)::after {
  content: '';
  position: absolute;
  background-color: #193c93;
  width: 40%;
  height: 2px;
  right: auto;
  left: 50%;
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
}

body.mobile-portrait #heroTableProbe .probe-card {
  padding-bottom: 25px; /* 문구와 카드 하단 사이 여백 */
  min-height: 400px;    /* 기본 200px → 여유 확보 */
}

/* ==== 공통: 카드 안쪽 여백/갭 늘리기 ==== */
#heroTableProbe .probe-table-wrap{
  padding: 16px; /* 기존 10px → 여유 확보 */
}
#heroTableProbe .probe-card{
  /* 카드 내부 전체 공간 조금 더 확보 */
  padding-bottom: 18px;
}
#heroTableProbe .card-header-title{
  padding: 22px 24px 6px; /* 타이틀과 콘텐츠 사이 간격 살짝 */
}
#heroTableProbe .probe-content{
  padding: 16px 18px;   /* 기존 10px → 넉넉히 */
  gap: 14px;            /* 섹션 간 간격(가로/세로 둘 다) */
  align-items: stretch; /* 섹션 높이 균등 */
}

/* 각 섹션 내부 여백 늘리기 (텍스트가 경계선에 달라붙지 않게) */
#heroTableProbe .probe-section{
  padding: 10px 14px;   /* 좌우 여백 추가 */
}

/* 세로 경계선이 텍스트랑 붙어 보이지 않게 조정 */
#heroTableProbe .probe-content .probe-section:not(:last-child){
  padding-right: 23px; /* 경계선 쪽으로 여유 */
}
#heroTableProbe .probe-content .probe-section:not(:last-child)::after{
  height: 36%;         /* 기존 40% → 살짝 줄여서 시각적 압박 완화 */
}

/* ==== 모바일(≤911px): 세로 스택 간격 강화 + 가로선과의 거리 확보 ==== */
body.mobile-portrait #heroTableProbe .probe-table-wrap{
  padding: 18px 16px 22px; /* 모바일은 하단 여백 더 */
}
body.mobile-portrait .probe-content{
  row-gap: 14px;           /* 세로 갭 확실히 */
}
body.mobile-portrait #heroTableProbe .probe-content .probe-section:not(:last-child){
  padding-bottom: 20px;    /* 가로 경계선 위 공간 */
  margin-bottom: 6px;      /* 경계선과 콘텐츠 분리 */
}
body.mobile-portrait #heroTableProbe .probe-content .probe-section:not(:last-child)::after{
  bottom: -4px;            /* 선이 텍스트에 닿지 않도록 살짝 내려줌 */
  width: 60%;              /* 선 길이도 조금 늘려서 시각 균형 */
}

/* ==== 모바일 가로선 길이/위치 최종 오버라이드 ==== */
body.mobile-portrait #heroTableProbe .probe-card .probe-content .probe-section:not(:last-child)::after {
  content: '';
  position: absolute;
  background-color: #193c93;
  /* 길이 변수로 관리 (기본 20%) */
  width: var(--mobile-divider-width, 20%);
  height: 2px;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
}

/* 필요하면 전체 카드에서 한 번에 길이만 바꿔치기 */
body.mobile-portrait #heroTableProbe .probe-card {
  --mobile-divider-width: 40%; /* 여기 숫자만 바꾸면 전체 변경 */
}

/* =========================
   PC 버전(>911px) 반응형 타이포
   - 카드 높이에 비례(cqh)해서 폰트 커짐
   - cqh 미지원 브라우저는 vw 기반 fallback
   ========================= */


/* 1) 카드 자체를 컨테이너로 선언 (cqh 사용 위해) */
body:not(.mobile-portrait) #heroTableProbe .probe-card {
  container-type: size;
}

/* 2) cqh 지원 시: 카드 높이 비례로 '베이스' 크게 */
@supports (font-size: 1cqh) {
  body:not(.mobile-portrait) #heroTableProbe .probe-svg {
    /* 베이스 자체를 크게: 최소 18px ~ 최대 36px 사이에서 카드높이 비례 */
    font-size: clamp(18px, 2.6cqh, 36px) !important;
  }
  /* px 고정값 덮어쓰기: 모두 em 비율로 확대 */
  body:not(.mobile-portrait) #heroTableProbe .stat-title { font-size: 1.25em !important; }
  body:not(.mobile-portrait) #heroTableProbe .stat-value .num-large { font-size: 3.6em !important; }
  body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-main,
  body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-sub { font-size: 1.05em !important; }
}

/* 3) cqh 미지원 시: 화면 너비 기반 폴백(그래도 크게) */
@supports not (font-size: 1cqh) {
  body:not(.mobile-portrait) #heroTableProbe .probe-svg {
    font-size: clamp(18px, 1.8vw, 36px) !important;
  }
  body:not(.mobile-portrait) #heroTableProbe .stat-title { font-size: 1.25em !important; }
  body:not(.mobile-portrait) #heroTableProbe .stat-value .num-large { font-size: 3.6em !important; }
  body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-main,
  body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-sub { font-size: 1.05em !important; }
}


/* =========================
   [FINAL OVERRIDE] PC(>911px) 타이포 & 간격 튜닝용 변수
   - 아래 변수 숫자만 바꾸면 즉시 반영
   ========================= */
:root {
  /* 크기 스케일 */
  --pc-font-base: 5cqh;     /* 카드 높이 비례 베이스 (키우면 전체 커짐) */
  --pc-title-em: 2;        /* 타이틀 배수(em) */
  --pc-number-em: 3.5;        /* 숫자 배수(em) */
  --pc-unit-em: 1.05;         /* 단위 배수(em) */

  /* 글자 간격(자간) — px 또는 em 모두 가능 */
  --pc-title-letter: 0px;     /* '중소기업' 같은 타이틀 자간 */
  --pc-number-letter: 0px;    /* 숫자 자간 */
  --pc-unit-letter: 0px;      /* 단위 자간 */

  /* 블록 간격/레이아웃 */
  --pc-section-gap: 14px;     /* 4칸 섹션 사이 gap */
  --pc-title-number-gap: 40px;/* 타이틀 ↔ 숫자 사이 공백(↓로 벌리기) */
  --pc-section-pad-x: 14px;   /* 섹션 좌우 패딩 */
  --pc-section-pad-y: 10px;   /* 섹션 상하 패딩 */
}

/* 카드 컨테이너 선언: cqh 사용 위해 필수 */
body:not(.mobile-portrait) #heroTableProbe .probe-card {
  container-type: size;
}

/* PC 공통: 레이아웃 여백 확장 */
body:not(.mobile-portrait) #heroTableProbe .probe-content {
  gap: var(--pc-section-gap) !important;
  padding: 16px 18px !important;
}
body:not(.mobile-portrait) #heroTableProbe .probe-section {
  padding: var(--pc-section-pad-y) var(--pc-section-pad-x) !important;
}

/* PC 폰트 베이스(카드 높이 비례) + px고정 덮기 */
@supports (font-size: 1cqh) {
  body:not(.mobile-portrait) #heroTableProbe .probe-svg {
    font-size: clamp(18px, var(--pc-font-base), 36px) !important;
  }
}
@supports not (font-size: 1cqh) {
  body:not(.mobile-portrait) #heroTableProbe .probe-svg {
    font-size: clamp(18px, 1.8vw, 36px) !important;
  }
}

/* 요소별 크기 배수 + 자간 */
body:not(.mobile-portrait) #heroTableProbe .stat-title {
  font-size: calc(var(--pc-title-em) * 1em) !important;
  letter-spacing: var(--pc-title-letter) !important;
}
body:not(.mobile-portrait) #heroTableProbe .stat-value .num-large {
  font-size: calc(var(--pc-number-em) * 1em) !important;
  letter-spacing: var(--pc-number-letter) !important;
}
body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-main,
body:not(.mobile-portrait) #heroTableProbe .stat-value .unit-sub {
  font-size: calc(var(--pc-unit-em) * 1em) !important;
  letter-spacing: var(--pc-unit-letter) !important;
}

/* ===== 타이틀 ↔ 숫자 사이 공백(수직 간격) 조절 =====
   probe_content.js에서 타이틀 y=35, 숫자 y=80으로 박혀 있음:contentReference[oaicite:2]{index=2}.
   CSS로 SVG 텍스트에 Y축 이동을 걸어 간격을 키움(아래로 밀기).
*/
body:not(.mobile-portrait) #heroTableProbe .stat-title,
body:not(.mobile-portrait) #heroTableProbe .stat-value {
  transform-box: fill-box;
  transform-origin: center;
}
body:not(.mobile-portrait) #heroTableProbe .stat-value {
  /* 숫자 블록을 아래로 내려 타이틀과의 간격 확보 */
  transform: translateY(var(--pc-title-number-gap)) !important;
}

/* PC: 섹션 flex 중앙, svg는 JS가 translateY로 미세 조정 */
body:not(.mobile-portrait) #heroTableProbe .probe-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.mobile-portrait) #heroTableProbe .probe-section .probe-svg {
  height: auto;
  width: 90%;
  /* transform 초기화 금지: JS가 translateY(...) 넣을 것 */
}
/* PC 전용: 중앙선 디버그 토글 */
body:not(.mobile-portrait) #heroTableProbe.show-centers .probe-content {
  position: relative; /* 스택 기준 */
  z-index: 3;
}
body:not(.mobile-portrait) #heroTableProbe .border-anim-svg {
  z-index: 1; /* 가이드선이 위로 오도록 */
  position: absolute; inset: 0;
}
body:not(.mobile-portrait) #heroTableProbe.show-centers .probe-section {
  position: relative; /* 각 칸 기준 */
}
body:not(.mobile-portrait) #heroTableProbe.show-centers .probe-section::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  border-left: 1px dashed rgba(25,60,147,0.8);
  pointer-events: none;
  z-index: 5; /* SVG 위 */
}
/* =========================
   PC 전용 메인 타이틀 위치 조절 (% 기반)
   ========================= */
:root {
  /* 카드 높이 대비 0.5% 위치 */
  --pc-header-top: 0.1cqh;
}
body:not(.mobile-portrait) #heroTableProbe .card-header-title {
  position: absolute;
  top: var(--pc-header-top);
  left: 50%;
  transform: translateX(-50%);
}
/* 카드 자체를 기준점으로 만듦 */
#heroTableProbe .probe-card {
  position: relative;
}

/* PC 전용: 타이틀을 카드 우측 하단에 고정 */
body:not(.mobile-portrait) #heroTableProbe .card-header-title {
  position: absolute;
  bottom: 2%;   /* 카드 아래쪽에서 간격 */
  right: 2%;    /* 카드 오른쪽에서 간격 */
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  color: #000;        /* 단색 */
  background: transparent;
  z-index: 10;
}


/* PC 전용: 타이틀을 카드 우측 하단에 고정 (단색 텍스트) */
body:not(.mobile-portrait) #heroTableProbe .card-header-title {
  position: absolute;
  bottom: 2%;    /* 카드 아래쪽에서 간격 */
  right: 2%;     /* 카드 오른쪽에서 간격 */
  transform: none;
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  color: #000;       /* 원하는 단색 */
  background: transparent;
  z-index: 10;
}

/* 카드가 위치 기준점이 되도록 (강제) */
body:not(.mobile-portrait) #heroTableProbe .probe-card {
  position: relative !important;
}

/* 타이틀: 우측 하단 고정 (기존 top/left/transform 완전 무력화) */
body:not(.mobile-portrait) #heroTableProbe .card-header-title {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: 2% !important;   /* 더 내려가게는 값↑ */
  right: 2% !important;    /* 더 오른쪽으로는 값↓ (예: 1% 또는 0) */
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: max-content;       /* 줄바꿈 방지 */
  background: transparent;
  color: #000;
  z-index: 10;
}
@media (max-width: 911px){
  section.hero{ overflow: visible !important; } /* 잘림 방지 */
}