/* =========================
   pyinfo.css
   평형안내 탭 – 프리미엄 스타일 (type-tabs 전용 스코프)
   ========================= */

/* 스코프 루트: 페이지와 충돌 방지 */
.type-tabs{
  /* 테마 컬러: 외부에서 --theme-color나 --tap-color 주입 시 상속, 없으면 기본 */
  --theme-color: var(--theme-color, var(--tap-color, #58c4a7));
  --tab-fg: #111;
  --tab-bg: #fff;
  --tab-muted: #6b7280;
}

/* 래퍼 */
.type-tabs .tab-wrp{
  max-width:1120px;
  margin:0 auto;
  padding:24px 16px;
  text-align:center;
  box-sizing:border-box;
}

/* 탭 메뉴 바(PC: 내용만큼, 중앙) */
.type-tabs .tab-menus,
.type-tabs .tab-menus.tab-menus-theme{
  display:flex;
  flex-wrap:nowrap;
  width:fit-content;                 /* PC에서는 내용만큼 */
  justify-content:center;            /* 중앙 정렬 */
  align-items:center;
  box-sizing:border-box;             /* 패딩 포함 계산 */
  margin:0 auto 18px;
  gap:16px;                          /* 버튼 사이 거리 */
  list-style:none;
  padding:10px 16px;                 /* 캡슐 바 안쪽 여백 */
  background:linear-gradient(180deg,#fafafa,#f5f5f5);
  border:1px solid #e5e7eb;
  border-radius:9999px;
  box-shadow:0 6px 18px rgba(207,206,206,.06) inset;
  overflow:auto;                     /* 항목 많으면 가로 스크롤 (모바일에서 사용) */
  -webkit-overflow-scrolling:touch;
}
.type-tabs .tab-menus::-webkit-scrollbar{ height:8px; }
.type-tabs .tab-menus::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }

/* 각 탭 버튼 */
.type-tabs .tab-menus li{ position:relative; flex:0 0 auto; }
.type-tabs .tab-menus li a{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px;                       /* 크게 */
  padding:0 28px;                    /* 좌우 여백 */
  border-radius:9999px; text-decoration:none; white-space:nowrap;
  font-weight:800; letter-spacing:.01em; font-size:17px; line-height:1;
  color:var(--tab-fg); background:transparent; border:1px solid transparent;
  transition: transform .1s ease, color .2s ease,
              background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* 호버 */
.type-tabs .tab-menus li a:hover{
  background:#fff; color:var(--theme-color);
  border-color:color-mix(in oklab, var(--theme-color) 30%, #ffffff);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

/* 포커스 접근성 */
.type-tabs .tab-menus li a:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--theme-color) 28%, transparent);
}

/* 활성 탭 */
.type-tabs .tab-menus li.is_on a{
  color:#fff;
  background:var(--theme-color);
  border-color:var(--theme-color);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in oklab, var(--theme-color) 40%, transparent) inset;
  transform:translateY(-1px);
}

/* 활성 탭 글로우 */
.type-tabs .tab-menus li.is_on::after{
  content:""; position:absolute; inset:-4px; pointer-events:none;
  border-radius:9999px;
  background:radial-gradient(60% 60% at 50% 50%,
              color-mix(in oklab, var(--theme-color) 35%, transparent), transparent 70%);
  filter:saturate(110%) blur(6px); opacity:.65;
}

/* 콘텐츠 래퍼는 중앙 고정폭 */
.type-tabs .tab-contents{
  max-width:1120px;
  margin:0 auto 18px;            /* 중앙 */
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* 각 콘텐츠 */
.type-tabs .tab-contents .content{ display:none; }
.type-tabs .tab-contents .content.is_on{ display:block; }

/* 이미지 & 텍스트 */
.type-tabs .tab-contents .content figure{ margin:0 0 16px; }
.type-tabs .tab-contents .content img{
  max-width:100%; height:auto; display:block; margin:0 auto;
  border-radius:12px; border:1px solid #eee;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.type-tabs .tab-contents .content > div{
  color:#374151; line-height:1.75; font-size:15px;
}

/* -------------------------
   반응형 (모바일 보완)
   - 가로 스크롤 바로 전환
   - 좌측 정렬
   - 스크롤 가장자리에 페이드
   ------------------------- */
@media (max-width: 768px){
  .type-tabs .tab-wrp{
    padding:14px 12px;                   /* 좌우 여백 축소: 끝단 잘림 방지 */
  }

  .type-tabs .tab-menus,
  .type-tabs .tab-menus.tab-menus-theme{
    width:100%;                          /* fit-content → 100% */
    justify-content:flex-start;          /* 중앙 → 왼쪽 정렬 */
    overflow-x:auto;                     /* 가로 스크롤 */
    overflow-y:visible;
    gap:10px; padding:8px 10px;
    scrollbar-width:none;                /* Firefox 스크롤바 숨김 */
    -webkit-overflow-scrolling:touch;
    /* 가장자리 페이드 효과 */
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  }
  .type-tabs .tab-menus::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  /* 버튼 사이즈 다운 */
  .type-tabs .tab-menus li a{
    height:44px;
    padding:0 16px;
    font-size:15px;
    font-weight:700;
    scroll-margin-inline:20px;           /* 스크롤 중앙 정렬 여유 */
  }

  .type-tabs .tab-contents{ padding:18px; }
}

/* -------------------------
   데스크톱 약간 보강
   ------------------------- */
@media (min-width:1024px){
  .type-tabs .tab-contents{ padding:28px; }
  .type-tabs .tab-menus{ gap:30px; padding:8px 10px; }
  .type-tabs .tab-menus li a{ padding:0 22px; }
}

/* -------------------------
   (선택) 탭이 정말 많다면
   2줄 래핑 레이아웃으로 바꾸고 싶을 때
   .type-tabs .tab-menus--wrap 클래스를 추가해 사용
   ------------------------- */
.type-tabs .tab-menus--wrap{
  width:100%;
  flex-wrap:wrap;
  overflow:visible;
  justify-content:center;
  gap:8px 10px;
}