/* tg-segtabs.css — [T308-5 재작업 v2, 대표 확정 — "고스트 필로 교체(세그먼트 트레이 폐기),
   정렬은 본문 콘텐츠 컬럼과 픽셀 단위로 일치"] 추천 코스(도시별·테마별·지도)/도시 상세(코스·지도)/
   내 여행(예정된·다녀온·공유받은)/커뮤니티(사진·내 후기) 4곳이 전부 이 한 파일만 참조한다 —
   물리적으로 하나의 파일, 화면별 CSS 복제 금지 원칙은 v1과 동일하게 유지.

   [v1 → v2 변경 이유, 대표 실측 지적] v1은 좌측 정렬 기준을 뷰포트 폭 기준 1240px 고정폭으로
   잡았는데, 실제 화면의 "본문 콘텐츠 컬럼"은 화면마다 폭이 다르다(도시 상세/추천 코스는
   main{max-width:900px}, 내 여행/커뮤니티는 .screen-inner{max-width:760px}, app.css) - 그래서
   탭 좌측선이 본문 제목·카드 좌측선과 안 맞았다(예: 커뮤니티에서 탭 x≈20px인데 "여행 사진"
   제목은 x≈248px). 이번엔 스트립 안쪽 폭을 CSS 변수(--tg-page-content-width)로 파라미터화해
   각 화면이 자기 본문 컬럼 폭을 그대로 넘긴다 - 규칙 자체(패딩·정렬 수식)는 여전히 이 한 곳
   뿐이고가, 화면마다 다른 "숫자"만 호출부(각 화면의 스트립 엘리먼트 inline style)에서 준다 -
   이건 "화면별 CSS 재정의"가 아니라 컴포넌트가 원래 받아야 하는 파라미터 하나일 뿐이다. */

:root{
  --tg-segtab-inactive: #8b857f;
  --tg-segtab-inactive-hover-bg: #f7f5f3;
  --tg-segtab-inactive-hover-text: #57534e;
  --tg-segtab-active-bg: #e4f4f8;
  --tg-segtab-strip-border: #e3edf1;
  /* [정적 페이지 대응] public/css/app.css가 --tg-accent-dark를 이미 정의하지만(#0881a0), 정적
     페이지(scripts/generate_city_pages.js)는 그 파일을 안 불러온다 - 여기서 같은 이름·같은 값을
     한 번 더 정의해 두 계열 어디서든 var(--tg-accent-dark) 하나로 참조 가능하게 한다(SPA에서
     로드되면 app.css 쪽 정의와 값이 100% 같아 충돌 없음). */
  --tg-accent-dark: #0881a0;
}

.tg-segtabs-strip{
  width:100%;
  box-sizing:border-box;
  border-bottom:1px solid var(--tg-segtab-strip-border);
}
/* [실측 정렬] --tg-page-content-width는 각 화면의 스트립 엘리먼트가 inline style로 준다
   (city 페이지 계열=900px, SPA 내 여행/커뮤니티=760px) - 값을 안 주면 1240px로 폴백(이 컴포넌트를
   쓰는 새 화면이 생겨도 조용히 깨지지 않게). padding-left/right 20px은 각 화면의 본문 컨텐츠가
   실제로 쓰는 좌우 인셋과 동일값(main{padding:24px 20px}/.body-pad{padding:20px}/각 화면
   콘텐츠 블록의 padding:0 20px 등, generate_city_pages.js·views/index.html 실측 확인). */
.tg-segtabs-strip-inner{
  max-width: var(--tg-page-content-width, 1240px);
  margin:0 auto;
  padding:11px 20px;
  box-sizing:border-box;
  overflow-x:auto;
  scrollbar-width:none;
}
.tg-segtabs-strip-inner::-webkit-scrollbar{display:none}

.tg-segtabs{
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  gap:4px;
  box-sizing:border-box;
}

.tg-segtab{
  position:relative; /* ::before 터치 히트박스 확장의 기준 */
  appearance:none;
  border:none;
  background:none;
  font:inherit;
  flex:none;
  white-space:nowrap;
  cursor:pointer;
  color:var(--tg-segtab-inactive);
  font-size:13px;
  font-weight:500;
  padding:6px 14px;
  border-radius:999px;
  box-sizing:border-box;
  transition:background-color .12s ease, color .12s ease;
}
@media (prefers-reduced-motion: reduce){
  .tg-segtab{ transition:none; }
}
/* [44px 터치 대상, 대표 지시 — "::before 확장으로 보정"] 알약 자체는 spec대로 작게(6px 14px
   패딩) 두고, 보이지 않는 ::before가 세로로만 44px까지 확장해 클릭/탭 히트박스를 키운다 -
   가로는 알약 폭 그대로(형제 탭과 겹치지 않음, gap 4px는 시각 간격일 뿐 히트박스는 안 건드림). */
.tg-segtab::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:44px;
  transform:translateY(-50%);
}
.tg-segtab:hover{
  background:var(--tg-segtab-inactive-hover-bg);
  color:var(--tg-segtab-inactive-hover-text);
}
.tg-segtab.active{
  background:var(--tg-segtab-active-bg);
  color:var(--tg-accent-dark);
  font-weight:700;
}
.tg-segtab.active:hover{
  background:var(--tg-segtab-active-bg);
  color:var(--tg-accent-dark);
}