/* responsive-scale-fix.css
   작동 원리:
   1) PC '작은 모니터(예: 1280~1366 폭, 720~800 높이)'에서 폰트/여백이 과하게 커지는 문제를 줄임
   2) rem·vw 고정값 대신 clamp()와 vmin 기반으로 '부드럽게' 축소
   3) 반드시 모든 기존 CSS '맨 마지막'에 로드하세요 (우선순위 확보)
*/

/* ====== 기본: 전체 타이포 살짝 유연화 ====== */
html {
  /* 너무 큰 모니터에서 과도 확대 방지, 작은 모니터에서 자동 축소 */
  font-size: clamp(14px, 0.9vmin + 0.35rem, 17px);
}

/* 컨테이너 가로폭 상한선(양옆 여백 확보) */
.container, .container.header-wrapper, .band-extra .container, .about .container {
  max-width: min(1280px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* ====== 히어로 영역(텍스트) ====== */
/* hero_virtual_scale.js가 참조하는 기준값 완화 */
#heroVirtualGroup{
  /* 더 큰 기준폭을 주어 작은 모니터에서 스케일이 자연스럽게 내려가게 함 */
  --hvg-base-w: 1440;      /* 기존 1200 → 1440 */
  --hvg-min-scale: 0.62;   /* 기존 0.70 → 0.62 */
  --hvg-max-scale: 0.94;   /* 기존 1.00 → 0.94 */
}

/* v10 캡션 라인의 PC 기준 크기를 clamp로 치환 */
:root {
  /* 원래: 5rem / 7rem → 작은 데스크톱에서 자동 감쇄 */
  --cap-line1-size-pc: clamp(2.8rem, 2.9vw, 4.2rem);
  --cap-line2-size-pc: clamp(3.4rem, 3.6vw, 5.0rem);
  /* 간격도 조금 타이트하게 */
  --gap-1-to-2-pc: clamp(12px, 1.4vmin, 28px);
}

/* ====== 밴드엑스트라(둥근 네모 박스) ====== */
.band-extra{
  /* 세로 패딩이 vw로 너무 커지는 걸 방지: vmin 기반 */
  --be-pad-pc: clamp(24px, 2.2vmin, 48px);
}
.band-extra .extra-pill{
  max-width: min(1000px, 90vw);
  /* 과도한 세로 비율 방지 (작은 모니터에서 높이 과대화 방지) */
  aspect-ratio: 8 / 3;
}
/* pill 내부 타이포 유연화 */
:root{
  --pill-l1-size-pc: clamp(20px, 1.6vmin + 0.4rem, 28px);
  --pill-l2-size-pc: clamp(16px, 1.2vmin + 0.35rem, 22px);
  --pill-gap-pc: clamp(4px, 0.8vmin, 10px);
}

/* ====== 어바웃 영역 ====== */
/* 텍스트 크기와 우측 이미지 높이 상한을 보수적으로 조절 */
.about-profile-text .name-ko { font-size: clamp(1.4rem, 2.2vmin, 2.0rem); }
.about-profile-text .name-en { font-size: clamp(1.0rem, 1.8vmin, 1.5rem); }
.about-profile-text .title-kor { font-size: clamp(1.0rem, 1.8vmin, 1.4rem); }
.about-profile-text .bio-item { font-size: clamp(0.9rem, 1.6vmin, 1.1rem); }

.about-profile-image .inner-image-wrap{
  /* 작은 데스크톱에서 이미지가 과소/과대하지 않게 범위 고정 */
  max-height: clamp(320px, 52vmin, 520px);
}

/* ====== 작은 데스크톱/짧은 화면에 특화 보정 ====== */
@media (max-width: 1366px), (max-height: 800px){
  /* 히어로 간격 소폭 축소 */
  :root{
    --probe-card-gap-pc: clamp(1.2rem, 1.6vmin, 2.2rem);
  }
  /* 내비 폰트 살짝 축소 */
  .container.header-wrapper .navigation a {
    font-size: clamp(14px, 1.0vw, 18px) !important;
  }
  /* 밴드엑스트라 여백/텍스트 축소 */
  .band-extra{ --be-pad-pc: clamp(20px, 1.8vmin, 40px); }
  .band-extra .extra-pill{ aspect-ratio: 9 / 3.2; }
  /* 어바웃 블록 하단 여백 제거 및 가로줄 기준 5px 시작 */
  .about-extra-block { 
    margin-bottom: 0 !important; 
    padding-top: 5px !important; /* 가로줄 기준으로 아래로 5px에서 시작 */
  }
}

/* ====== 정말 짧은 화면(<=700px 높이) 추가 세이프가드 ====== */
@media (max-height: 700px) and (min-width: 992px){
  :root{
    --cap-line1-size-pc: clamp(2.4rem, 2.5vw, 3.6rem);
    --cap-line2-size-pc: clamp(3.0rem, 3.2vw, 4.2rem);
    --gap-1-to-2-pc: clamp(8px, 1.0vmin, 18px);
  }
  .band-extra{ --be-pad-pc: clamp(16px, 1.4vmin, 32px); }
}