/* tg-page-hero.css — [화면 통일 2026-09-08, 대표 지시 — "내여행 히어로·추천코스 히어로를 같은
   규격으로"] 하위 탭 스트립 바로 아래에 놓이는 남색 제목 밴드. SPA(views/index.html 내여행)와
   정적 추천 코스(scripts/generate_city_pages.js 인덱스, 도시별·테마별·지도 3패널)가 이 한 파일만
   참조한다 — 화면별 CSS 복제 금지(tg-segtabs.css와 같은 원칙).

   출처 대조(qa/specs/screen_unify_20260908.md §1): 배경·글씨체·정렬은 기존 공통 남색 밴드
   (.tg-comm-hero, app.css:1148 / #resultHero, T464)와 같은 값 — 새 색 없음. 정적 페이지는
   app.css를 안 불러오므로 T464 토큰(--tg-card-navy, --tg-card-gold)을 이 파일 상단 :root 에
   같은 값으로 한 번 더 정의한다(SPECS §48-1: 팔레트 게이트가 보는 리터럴은 토큰 정의 줄에만).

   안쪽 컬럼 폭은 화면이 --tg-page-content-width로 넘긴다(내 여행 760px / 추천 코스 900px —
   tg-segtabs.css의 .tg-segtabs-strip-inner와 정확히 같은 파라미터·같은 20px 인셋이라 히어로
   컬럼 경계가 탭 스트립·본문과 같다 — 2026-09-08 마지막 보완으로 글은 컬럼 안 가운데 정렬). 긴 번역·모바일은 줄바꿈으로
   높이가 자연히 늘어난다(min-height만 있고 max-height 없음). */
:root{
--tg-card-navy:#1F3A5F;
--tg-card-gold:#E2C27A;
}
.tg-page-hero{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--tg-card-navy);
  color:#FFFFFF;
  box-sizing:border-box;
}
.tg-page-hero-inner{
  max-width:var(--tg-page-content-width, 1240px);
  margin:0 auto;
  padding:24px 20px;
  min-height:120px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* [화면 통일 마지막 보완 2026-09-08, 대표 지시 — "승인 스크린샷1 기준 중앙 정렬"] 제목·설명·통계 가운데 정렬.
     전폭 배경·내부 폭(--tg-page-content-width)·min-height·줄바꿈은 그대로. 좌측 정렬 규칙(원장 R4)은 §7에서 정정. */
  align-items:center;
  text-align:center;
}
.tg-page-hero-title{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:22px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:#FFFFFF;
  margin:0;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.tg-page-hero-sub{
  font-size:13.5px;
  line-height:1.5;
  color:rgba(250,247,242,.78);
  margin:6px 0 0;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 내 여행 통계 줄(기존 #mytripStatsBadges가 이 안으로 이동, 집계·표시 조건은 기존 함수 그대로) */
.tg-page-hero-stats{
  font-size:13px;
  font-weight:700;
  color:var(--tg-card-gold);
  margin:12px 0 0;
}
@media (max-width:767px){
  .tg-page-hero-inner{ padding:20px 20px; min-height:104px; }
  .tg-page-hero-title{ font-size:20px; }
}