/* =========================================================================
   Solidus v2 — 모바일 반응형 보완 (디자인 리뷰 반영)
   v2.css 뒤에 로드. v2.css는 수정하지 않음 — 되돌리려면 이 파일 링크만 제거.
   ========================================================================= */

:root {
  /* 밝은 배경 위 소형 텍스트 전용 딥골드. #cfa841 은 화이트 위 2.25:1 로 기준(4.5:1) 미달.
     #856a1f = 화이트 5.2:1, 연회색·크림 배경(#f3f4f6 / #f4f6f8 / #faf6ea) 4.7:1 (WCAG AA)
     — 기존 #8a6d20 은 #f3f4f6 위에서 4.45:1 로 살짝 모자라 한 단계 낮췄다. */
  --brand-text: #856a1f;
}

/* -------------------------------------------------------------------------
   FIX 01 — 히어로 카피 좌측 정렬 복구
   v2.css:136 이 h2/.hero-desc 에 margin-left:auto 를 걸어 우측 정렬시키는데,
   1100px 이하 미디어쿼리에서 align-items/text-align 만 되돌리고
   margin-left 는 해제하지 않아 텍스트만 우측에 남아 있었음.
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-solidus .hero-copy h2,
  .hero-solidus .hero-copy .hero-desc,
  .hero-solidus .hero-copy .eyebrow {
    margin-left: 0;
    margin-right: auto;
  }
  .hero-solidus .hero-copy .hero-desc { max-width: 100%; }
}

/* -------------------------------------------------------------------------
   FIX 02 — 히어로 CTA 모바일 복구
   v2.css:524 에서 720px 이하 display:none 처리되어 있었음.
   모바일이 트래픽 대부분인데 1차 진입 동선이 사라져 복구. 높이 소폭 확보.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero, .hero-solidus { height: 560px; min-height: 520px; }
  .hero-solidus .hero-ctas {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 22px;
  }
  .hero-solidus .hero-ctas a {
    min-height: 44px;
    padding: 0 18px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   FIX 03 — 통계 3개가 2열 그리드에서 2+1 로 깨지던 문제
   solidus.css:752 가 모바일에서 1fr 1fr 로 강제 → 세 번째 칸이 고아.
   데스크톱과 동일한 3열 구조로 통일.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .home-intro .stats { grid-template-columns: repeat(3, 1fr); }
  .home-intro .stat { padding-right: 6px; }
  .home-intro .stat b { font-size: 26px; }
}
@media (max-width: 400px) {
  .home-intro .stat b { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   FIX 04 — 투자분야 카드 5개가 2열에서 마지막 1개만 고아로 떨어지던 문제
   홀수 개일 때 마지막 카드를 전체 폭으로 확장해 그리드를 닫아줌.
   home(주요 투자분야) / strengths(주요분야) 양쪽 동일 적용.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .field-grid > .field-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .field-grid > .field-card:last-child:nth-child(odd) img {
    height: 150px;
  }
  /* 제목 1줄/2줄 혼재로 카드 높이가 어긋나던 것 정리 */
  .field-card { display: flex; flex-direction: column; }
  .field-card .fc-text { flex: 1; }
  .field-card .fc-title { min-height: 2.7em; }

  /* strengths 페이지의 '주요분야'는 .field-strip — 동일한 고아 문제 */
  .field-strip > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .field-strip > li:last-child:nth-child(odd) img { aspect-ratio: 16 / 7; }
}

/* -------------------------------------------------------------------------
   FIX 05 — TOP 버튼이 푸터 카피라이트 위에 겹치던 문제
   position:fixed FAB 이 페이지 최하단에서 저작권 문구를 가림 (실측 overlap).
   푸터 하단 여백으로 안전영역 확보.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .site-footer { padding-bottom: 78px; }
}

/* -------------------------------------------------------------------------
   FIX 06 — 포트폴리오 코버플로우 좌우 카드가 프레임 경계에서 그냥 잘리던 문제
   양끝 페이드 마스크로 "더 있음"을 시각적으로 전달.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cf-frame {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* -------------------------------------------------------------------------
   FIX 07 — 탭 타겟 44×44 미만 해소
   실측 미달: 드로어 내비 42px, icon-btn 36px, hero-step 36px,
   히어로 도트 10px, cf-nav 40px, more-link 21px.
   도트는 시각 크기는 유지하고 터치 영역만 패딩으로 확장.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .icon-btn,
  .menu-trigger,
  .lang-toggle,
  .hero-solidus .hero-step,
  .cf-nav {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-acc-item > a,
  .nav-acc-item > button,
  .nav-acc-item .group a,
  .full-nav-utils a,
  .more-link,
  a.site,
  .ft-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 도트: 보이는 크기는 그대로, 히트 영역만 44px 확보 */
  .hero-dots button {
    position: relative;
  }
  .hero-dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* FIX 08 — 태블릿(721~1024)도 터치 기기. 레이아웃은 두고 탭 타겟만 동일 적용 */
@media (min-width: 721px) and (max-width: 1024px) {
  .icon-btn,
  .menu-trigger,
  .lang-toggle,
  .hero-solidus .hero-step,
  .cf-nav {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-acc-item > a,
  .nav-acc-item > button,
  .nav-acc-item .group a,
  .full-nav-utils a,
  .more-link,
  a.site,
  .ft-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   FIX 09 — 브랜드 골드 텍스트 대비 (WCAG AA)
   #cfa841 은 화이트 위 2.25:1 로 소형 텍스트 기준 미달.
   골드는 다크 배경·구분선·대형 숫자 전용으로 두고,
   화이트 위 소형 텍스트는 딥골드(4.9:1)로 분리.
   ------------------------------------------------------------------------- */
.kicker { color: var(--brand-text); }
.more-link { color: var(--brand-text); }
.more-link::after { color: var(--brand-text); }

/* 다크 배경 위에서는 원래 골드 유지 (대비 충분).
   .home-fields 는 v2 에서 밝은 배경(#f3f4f6)이 되어 이 목록에서 뺐다 — 골드 그대로면 2.05:1. */
.hero .kicker,
.kv .kicker,
[class*="is-dark"] .kicker,
.sec-dark .kicker { color: var(--brand); }

/* -------------------------------------------------------------------------
   FIX 10 — 닫힌 Family Site 패널이 Tab 순서에 남아 포커스가 화면 밖으로
   이탈하던 문제 (WCAG 2.4.3). 열림 상태가 아닐 때 포커스 대상에서 제외.
   ------------------------------------------------------------------------- */
.panel:not(.is-on) {
  visibility: hidden;
  /* 슬라이드 아웃(transform .45s)이 끝난 뒤에 숨겨야 닫힘 모션이 살아남 */
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.panel.is-on {
  visibility: visible;
  transition: transform 0.45s var(--ease), visibility 0s linear 0s;
}

/* -------------------------------------------------------------------------
   FIX 11 — About us 퀵 네비게이션 표시 규칙
   · 스크롤 중에는 감추고, 멈추면 다시 표시 (js/v2-fix.js 가 클래스 토글)
   · KV 배너를 지나간 영역에서만 표시
   v2.css:415 의 body.kv-stage 규칙과 겹쳐도 지도록 동일 특이도로 함께 선언.
   ------------------------------------------------------------------------- */
.sec-quick,
body.kv-stage .sec-quick {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-10px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0s linear 0.28s;
}

/* KV 를 지났고(is-past-kv) 스크롤이 멈춘 상태(:not(.is-scrolling))에서만 노출 */
.sec-quick.is-past-kv:not(.is-scrolling),
body.kv-stage .sec-quick.is-past-kv:not(.is-scrolling) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0s linear 0s;
}

/* 모션 최소화 설정에서는 페이드만 남기고 이동 없음 */
@media (prefers-reduced-motion: reduce) {
  .sec-quick,
  body.kv-stage .sec-quick,
  .sec-quick.is-past-kv:not(.is-scrolling) {
    transform: none;
    transition: opacity 0.01s linear, visibility 0s linear;
  }
}

/* -------------------------------------------------------------------------
   FIX 12 — 고정 헤더 아래를 기준으로 서브 KV 정렬
   헤더 높이와 실제 콘텐츠 영역을 분리한다. 긴 번역·확대 화면은 높이가 늘어나며
   상하 여백을 보존한다. 메인 페이지의 영상 히어로에는 적용하지 않는다.
   ------------------------------------------------------------------------- */
.kv, .sub-hero {
  --kv-body-height: 405px;
  --kv-space: 48px;
  height: auto !important;
  min-height: calc(var(--header-h) + var(--kv-body-height));
}
.kv-sticky { position: relative; height: auto !important; min-height: inherit; }
.kv-card {
  position: relative;
  height: auto !important;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--kv-space)) 0 var(--kv-space);
}
.kv-text {
  position: relative;
  top: auto !important;
  bottom: auto;
  transform: none !important;
  display: block;
  width: 100%;
  padding: 0 24px;
}
.sub-hero { padding: calc(var(--header-h) + var(--kv-space)) 24px var(--kv-space); }
@media (max-width: 1100px) {
  .kv, .sub-hero { --kv-body-height: 340px; --kv-space: 40px; }
}
@media (max-width: 720px) {
  .kv, .sub-hero { --kv-body-height: 300px; }
}

/* 소형 단말의 긴 영문 문구는 여백을 유지하며 자연스럽게 줄바꿈한다. */
@media (max-width: 400px) {
  .kv-main { margin-top: 16px; }
  .kv-main::before { margin-bottom: 14px; }
  .kv-sub { margin-top: 12px; line-height: 1.65; }
}


/* -------------------------------------------------------------------------
   FIX 13 — 메인 히어로 KV 를 이미지에서 영상으로 교체
   .hero-slide .bg 는 이미 position:absolute / inset:0 / object-fit:cover 라
   <video class="bg"> 가 그대로 얹힌다. 아래는 video 에만 필요한 보정.
   ------------------------------------------------------------------------- */
.hero-slide video.bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 로딩 전 배경이 검게 보이지 않도록 히어로 바탕색과 맞춘다 */
  background: #e8edf1;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   FIX 14 — 영상 KV 위 카피 가독성
   히어로 본문색은 #2e3d47(어두운 잉크)인데 v2.css:117 의 기존 오버레이는
   rgba(255,255,255,.08~.12) 로 거의 투명하다. 정지 이미지에서는 버텼지만
   영상은 밝고 디테일이 많아 소형 텍스트(.hero-desc)가 묻힌다.
   → 카피가 놓인 쪽에만 흰색 스크림을 깔아 영상은 살리고 글자만 띄운다.
     (데스크톱은 카피가 우측, 1100px 이하는 좌측 — FIX 01 참고)
   ------------------------------------------------------------------------- */
.hero-solidus .hero-slide::after {
  background:
    linear-gradient(270deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.80) 26%,
      rgba(255,255,255,0.42) 52%,
      rgba(255,255,255,0.00) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.00) 28%);
}
@media (max-width: 1100px) {
  .hero-solidus .hero-slide::after {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.94) 0%,
        rgba(255,255,255,0.88) 46%,
        rgba(255,255,255,0.70) 74%,
        rgba(255,255,255,0.48) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 30%);
  }
}


/* =========================================================================
   고객사 1차 수정사항 반영 (홈페이지 수정사항(1차)_261006)
   문구·데이터는 tools/build.js, tools/data.json, js/main.js 에서 변경.
   아래는 그 결과로 필요해진 스타일 보정.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FIX 15 — 메인 About 소개문이 1문단 → 2문단으로 변경
   .desc 는 여백이 0 이라 문단이 붙어 보여 간격만 추가.
   ------------------------------------------------------------------------- */
.home-intro .desc + .desc { margin-top: 14px; }

/* -------------------------------------------------------------------------
   FIX 16 — History KV 의 메인 문구("솔리더스가 걸어온 발자취") 삭제
   골드 라인이 .kv-main::before 에 붙어 있어 문구와 함께 사라지므로,
   메인 문구가 없는 KV(.is-no-main)는 설명 문구가 라인과 여백을 대신 갖는다.
   설명이 대표 문구 역할을 하므로 줄 길이도 제목류처럼 고르게 맞춘다(balance).
   "~이어오며" 뒤 강제 개행이 있어, pretty 그대로면 390~430px 에서
   "…성공적인 / 회수를 이어오며 / Global VC로 …" 로 가운데 줄만 짧아진다.
   ------------------------------------------------------------------------- */
.kv.is-no-main .kv-sub { margin-top: clamp(22px, 2.4vw, 40px); text-wrap: balance; }
.kv.is-no-main .kv-sub::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--brand);
}
@media (max-width: 400px) {
  .kv.is-no-main .kv-sub { margin-top: 16px; }
  .kv.is-no-main .kv-sub::before { margin-bottom: 14px; }
}

/* -------------------------------------------------------------------------
   FIX 17 — Strengths 강점 1~3 내용 교체
   불릿 목록 → 영문 라벨 / 제목 / 설명 / (구분선) 근거 · 역량 구조.
   번호(.no)·제목(h3)은 기존 스타일 그대로 사용.
   ------------------------------------------------------------------------- */
.str-item .cont .no { margin-bottom: 6px; }
.str-item .cont .en {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.str-item .cont .desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: #444;
}
.str-item .proof {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.str-item .proof p { margin: 0 0 4px; font-size: 15px; color: #555; }
.str-item .proof strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
  .str-item .cont .desc { font-size: 16px; }
  .str-item .proof { margin-top: 20px; padding-top: 16px; }
}

/* -------------------------------------------------------------------------
   FIX 18 — Portfolio 배경(3D 로고 월) 삭제
   목록 박스(.pf-list)는 로고 월 위로 80% 겹치도록 음수 margin 이 걸려 있었음
   (solidus.css:700). 월이 빠졌으므로 겹침만 해제하고 박스는 그대로 둔다.
   ------------------------------------------------------------------------- */
.pf-list { margin-top: 0; }

/* -------------------------------------------------------------------------
   FIX 19 — 메인 히어로 2번 설명문이 "BIO · 의약 · 헬스케어 ~" 로 길어지며
   520px(v2.css:163)을 넘겨 두 줄로 떨어짐 (실측 538px).
   국문 설명 3개는 모두 한 줄 구성이었으므로 국문 데스크톱만 폭을 넓힌다.
   1100px 이하는 FIX 01 의 max-width:100% 가 그대로 적용.
   ------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  html[lang="ko"] .hero-solidus .hero-copy .hero-desc { max-width: 580px; }
}

/* -------------------------------------------------------------------------
   FIX 20 — Portfolio 탭이 3개 → 4개(BIO / 헬스케어 분리)
   한 줄 가로 스크롤 구조(solidus.css:650)에서 375px 기준 4번째 탭이
   컨테이너 밖으로 완전히 밀려나 "더 있음"을 알 수 없게 됨 (3번째 탭 끝 = 우측 끝).
   줄바꿈으로 전환해 모든 탭이 항상 보이도록 한다.
   처음에는 720px 이하에만 적용했으나, 첫 탭 명칭이 "BIO" → "BIO/의약"
   (영문 "BIO / Pharmaceutical")으로 길어지면서 영문 태블릿 폭(721~900px대)에서도
   마지막 탭이 잘려 전 구간으로 확대. 한 줄에 다 들어가는 폭에서는 기존처럼 한 줄.
   ------------------------------------------------------------------------- */
.pf-tabs { flex-wrap: wrap; overflow-x: visible; }

/* -------------------------------------------------------------------------
   FIX 21 — Team 사진 교체(어두운 정장 → 흰 셔츠) 후 사진 위 이름·직급이
   밝은 배경에 묻히던 문제.
   이름 뒤 다크 그라데이션(solidus.css:560 .cg-card::before)은 원래부터 있었지만
   뒤따르는 <img> 에 덮여 한 번도 보이지 않았음 — 정장 사진에서는 티가 안 났을 뿐.
   사진 위 → 그라데이션 → 이름 → 비활성 딤 순서로 쌓이도록 z-index 를 지정하고,
   얼굴·가슴까지 어두워지지 않도록 시작점만 35% → 45% 로 늦춘다.
   ------------------------------------------------------------------------- */
.cg-card::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
}
.cg-title { z-index: 2; }
.cg-card::after { z-index: 3; }


/* =========================================================================
   운영 반영 전 점검 반영 (UI/UX · 접근성 · 성능)
   마크업·동작은 tools/build.js 와 js/main.js 에서 변경. 아래는 그에 따른 스타일.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FIX 22 — 푸터 바로가기 링크
   PC(1101px~)에서는 햄버거 메뉴가 숨어, 그 안에만 있던 오시는 길·사이트맵·
   Family Site 로 갈 방법이 없었고 개인정보처리방침은 어디에도 링크가 없었음.
   .ft-top 은 원래 좌우 배치(space-between)라 로고 반대편에 링크를 둔다.
   ------------------------------------------------------------------------- */
.ft-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
}
.ft-links a,
.ft-links button {
  font-size: 13px;
  font-weight: 500;
  color: #ddd;
  transition: color 0.2s;
}
.ft-links a:hover,
.ft-links button:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ft-links .is-policy { font-weight: 700; color: #fff; }
@media (max-width: 720px) {
  .ft-top { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 14px; }
  .ft-links { gap: 0 20px; }
  .ft-links a,
  .ft-links button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* -------------------------------------------------------------------------
   FIX 23 — 본문 바로가기 링크 + 스크린리더 전용 텍스트
   키보드 사용자가 매 페이지 헤더 메뉴를 다 지나야 본문에 닿던 문제.
   포커스를 받을 때만 화면에 나온다. .sr-only 는 메인의 h1(사이트명)에 사용.
   ------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;                       /* 헤더(80)·패널(91) 위 */
  padding: 12px 18px;
  background: #1c1c1c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
#content { scroll-margin-top: var(--header-main); }

/* -------------------------------------------------------------------------
   FIX 24 — 메인 히어로 자동 넘김 멈춤/재생 버튼
   모양은 이전·다음 버튼(.hero-step)을 그대로 쓰고 아이콘만 상태에 따라 바꾼다.
   hover 색은 흰색(v2.css:217)이었는데, 히어로가 밝은 영상이라 올리는 순간 버튼이
   사라져 보였음 — 누른 뒤 상태 확인이 안 되므로 세 버튼 모두 딥골드로 바꾼다.
   ------------------------------------------------------------------------- */
.hero-toggle .ic-play,
.hero-toggle.is-paused .ic-pause { display: none; }
.hero-toggle.is-paused .ic-play { display: inline; }
.hero-solidus .hero-step:hover { color: var(--brand-deep); }

/* -------------------------------------------------------------------------
   FIX 25 — 보이지 않는 TOP 버튼에 키보드 포커스가 가던 문제
   opacity 0 상태에서도 Tab 으로 닿았음. 사라지는 모션이 끝난 뒤 visibility 로 뺀다.
   ------------------------------------------------------------------------- */
.float-btns .top-btn:not(.is-on) {
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}

/* -------------------------------------------------------------------------
   FIX 26 — 골드 소형 텍스트 대비 (FIX 09 의 연장)
   FIX 09 는 .kicker 와 .more-link 만 딥골드로 바꿨고, 같은 조건(밝은 배경 위
   12~22px)인 아래 항목들은 골드(2.25:1)·브랜드딥(3.4:1) 그대로 남아 있었음.
   대형 숫자(메인 통계, 연혁 연도)는 FIX 09 의 기준대로 골드를 유지한다.
   ------------------------------------------------------------------------- */
.str-item .cont .no,
.aff-card .yr,
.aff-holding strong,
.aff-card a.site,
.tc-col h4,
.tc-title,
.tc-count b,
.cf-count b,
.pf-count b,
.contact-info dt,
.contact-map a.map-link,
.hist-lead em,
.page .lead em,
.way-item .en,
.promise-card .stage,
.gnb-drop a:hover,
.gnb-drop a.is-on,
.lang-drop a:hover,
.lang-drop a.is-on,
.lang-drop a.is-on small,
.sec-quick li a.is-on { color: var(--brand-text); }

/* -------------------------------------------------------------------------
   FIX 27 — 태블릿(721~1100px) 투자분야 카드 5장이 3+2 로 놓여 우측이 비던 문제
   FIX 04(모바일)와 같은 방식으로 그리드를 닫는다: 윗줄 3장, 아랫줄 2장을 넓게.
   ------------------------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 1100px) {
  .field-grid { grid-template-columns: repeat(6, 1fr); }
  .field-grid > .field-card { grid-column: span 2; }
  .field-grid > .field-card:nth-child(n+4) { grid-column: span 3; }
}

/* -------------------------------------------------------------------------
   FIX 28 — 점(dot) 버튼 간격
   10px 점이 8px 간격으로 붙어 있어 옆 점이 잘못 눌리기 쉬웠음 (WCAG 2.5.8).
   점 크기는 그대로 두고 간격과 눌리는 영역(24px)만 넓힌다.
   간격은 전 구간 공통, 히어로 점의 24px 영역은 1101px 이상만 —
   그 아래는 FIX 07 의 44px 영역을 그대로 쓴다.
   ------------------------------------------------------------------------- */
.tc-dots,
.hero-solidus .hero-dots { gap: 14px; }
/* 1100px 이하에서 점 아래로 작은 혹이 붙어 보이던 것: style.css:650 의 ::before 점(v1 방식)이
   v2 의 버튼 자체 점과 겹쳐 그려지고 있었음. v2 히어로에서는 쓰지 않으므로 끈다. */
.hero-solidus .hero-dots button::before { content: none; }
.tc-dots button { position: relative; }
.tc-dots button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
@media (min-width: 1101px) {
  .hero-solidus .hero-dots button { position: relative; }
  .hero-solidus .hero-dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }
}

/* -------------------------------------------------------------------------
   FIX 29 — 모바일 메뉴·패널 보완
   · 마지막 메뉴 아래 구분선과 유틸 링크 위 구분선이 겹쳐 빈 줄처럼 보이던 것 정리
   · 메뉴가 열린 동안 뒤 페이지가 같이 스크롤되던 문제 (body 만 잠겨 있었음)
   · 지도 링크 터치 높이 22px → 44px
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-acc-item:last-child { border-bottom: 0; }
}
html:has(body.nav-open) { overflow: hidden; }
.full-nav,
.panel { overscroll-behavior: contain; }
@media (max-width: 720px) {
  .contact-map a.map-link { min-height: 44px; align-items: center; }
}

/* -------------------------------------------------------------------------
   FIX 30 — 메인 첫 화면에서 헤더 메뉴 글자가 흐리던 문제
   투명 헤더의 다크 그라데이션(v2.css:36, 0.42→0.14)은 어두운 서브 KV 기준이라
   밝은 히어로 영상 위에서는 흰 글자 대비가 2.3~3.1:1 에 그쳤음 (기준 4.5:1).
   메인의 투명 상태에서만 띠를 더 어둡게 해 5:1 안팎으로 맞춘다.
   hover·스크롤 후(흰 헤더)와 메뉴가 열린 상태는 건드리지 않는다.
   ------------------------------------------------------------------------- */
body[data-page="home"]:not(.nav-open) .site-header:not(:hover):not(:focus-within):not(.is-solid):not(.is-on) {
  background: linear-gradient(180deg, rgba(12, 18, 26, 0.70) 0%, rgba(12, 18, 26, 0.44) 100%) !important;
}

/* Round 2: portraits reveal their profiles in place. */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.team-card { position: relative; aspect-ratio: 800 / 900; border-radius: 8px; background: #d3d0d2; isolation: isolate; }
.team-card.is-open { z-index: 4; }
.team-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: inherit; }
.team-card > img.team-placeholder { object-position: center; }
.team-card[data-group-start] { grid-column: 1; }
.team-badge { position: absolute; top: 18px; left: 20px; z-index: 3; max-width: calc(100% - 40px); padding: 0; border: 0; background: transparent; color: #39424b; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; overflow-wrap: anywhere; pointer-events: none; }
.team-card.is-open .team-badge { color: #e6c35e; }
.team-card:has(.team-badge) .team-detail { padding-top: 48px; }
.team-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.team-trigger:focus-visible { outline: 3px solid #ddba4b; outline-offset: -4px; z-index: 3; }
/* Profiles never scroll: a long profile extends the panel below the portrait. */
.team-detail { position: absolute; inset: 0 0 auto; min-height: 100%; z-index: 2; padding: 24px 24px 20px; border-radius: inherit; background: rgba(13, 24, 34, .92); color: #fff; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1), visibility 180ms; pointer-events: none; }
.team-card.is-open .team-detail { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.team-detail h3 { color: #fff; font-size: 23px; line-height: 1.25; margin: 0 0 6px; }
.team-detail .team-position { color: #e6c35e; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.team-detail section + section { margin-top: 14px; }
.team-detail h4 { color: #e6c35e; font-size: 12px; letter-spacing: .06em; margin: 0 0 6px; }
.team-detail ul { padding-left: 16px; list-style: disc; }
.team-detail li { font-size: 14px; line-height: 1.5; margin: 0 0 3px; overflow-wrap: anywhere; word-break: keep-all; }
.team-card:has(.team-trigger:focus-visible) .team-detail { transition: none; }

/* Native dialog handles focus containment, Escape and the modal backdrop. */
html.notice-open { overflow: hidden; }
.investment-notice { padding: 0; border: 0; border-radius: 8px; width: min(490px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; color: #30363a; background: #f1f1f1; box-shadow: 0 24px 80px #0005; }
.investment-notice::backdrop { background: rgba(10, 18, 26, .5); }
.notice-content { padding: 26px 18px 18px; text-align: center; }
.notice-content h2 { margin: 0 0 22px; font-size: 28px; font-weight: 500; line-height: 1.3; color: #c43838; }
.notice-copy { padding: 22px; background: white; font-size: 16px; line-height: 1.85; word-break: keep-all; }
.notice-copy p { margin: 0; }
.notice-copy p + p { margin-top: 24px; }
.notice-copy strong { font-weight: 600; }
.notice-company { margin: 20px 0 0; font-size: 15px; font-weight: 600; }
.notice-actions { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; background: #373c40; padding: 0 8px; }
.notice-actions button { border: 0; background: none; color: white; padding: 12px 8px; min-height: 48px; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.notice-actions button:focus-visible { outline: 2px solid #e6c35e; outline-offset: -4px; }
.notice-actions button:active { opacity: .75; }
/* Columns change before portraits get too narrow for a full profile. */
@media (max-width: 1199px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 759px) {
  .team-grid { grid-template-columns: minmax(0, 480px); gap: 20px; }
  /* Single column: an open card grows in place instead of covering the next portrait. */
  .team-card.is-open > img { position: absolute; inset: 0; }
  .team-card.is-open .team-detail { position: relative; min-height: auto; aspect-ratio: 800 / 900; }
}
@media (max-width: 560px) {
  .notice-copy { padding: 18px 14px; font-size: 14px; }
  .notice-content h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-detail { transition: none; transform: none; }
}