@charset "utf-8";
/* ============================================================
   GAON USA 섹션 (gaon_usa.php · gaon_us_tour.php) 전용 스타일
   - 미국 후원자·기관 대상 영문 콘텐츠. 밝은 배경(donate 페이지 계열) + 헤딩 Big Caslon(.caslon) +
     본문 EB Garamond(lang-en.css @font-face, 언어 모드와 무관하게 이 섹션에서는 항상 사용)
   ============================================================ */
.usa-container { background: #fff; color: #1a1a1a; }
.usa-wrap { padding: 80px 0 130px; }
.usa-wrap .inner { max-width: 1100px; padding: 0 24px; box-sizing: border-box; }
.usa-serif { font-family: 'EB Garamond', Garamond, 'Palatino Linotype', Georgia, 'Times New Roman', serif; }

/* 상단 미디어 (히어로 이미지 / 유튜브) */
/* 사진 위 제목 밴드 (About): 큰 제목 + 작은 부제 */
.usa-title-band { text-align: center; padding: 72px 24px 56px; }
.usa-title-band .usa-main-title { font-size: 84px; line-height: 1; padding-bottom: 0; letter-spacing: -.01em; }
.usa-title-band .usa-main-title i { font-style: italic; }
.usa-title-band .usa-meta { margin-top: 22px; }
.usa-title-band .usa-eyebrow { font-size: 20px; letter-spacing: .12em; color: #555; margin-bottom: 22px; } /* About 부제와 동일 크기 */
.usa-subtitle { margin-top: 20px; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: #555; line-height: 1.6; }
.usa-subtitle i { font-style: italic; text-transform: none; letter-spacing: .06em; font-size: 1.1em; }
.usa-title-wrap.usa-lead-only .usa-lead { margin-top: 0; }

/* 상단 미디어 밴드: 서브 메뉴바 바로 아래 여백 없이, 사이트 콘텐츠 폭(1360px)으로. 모바일은 화면 가득 */
.usa-hero-band { max-width: 1360px; margin: 0 auto; }
.usa-hero { margin: 0; }
.usa-hero img { display: block; width: 100%; height: auto; }
.usa-video-wrap { position: relative; background: #000; }
.usa-hero .usa-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
/* 영상 컨트롤 (우하단 원형 아이콘 2개: 재생/일시정지 · 소리 켜기/끄기) */
.usa-video-ctrl { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.usa-vbtn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s ease, border-color .25s ease; }
.usa-vbtn:hover, .usa-vbtn:focus-visible { background: rgba(0,0,0,.72); border-color: #fff; }
.usa-vbtn svg { display: none; }
.usa-vbtn .ic-play, .usa-vbtn .ic-off { display: block; }
.usa-vbtn.is-playing .ic-play { display: none; }
.usa-vbtn.is-playing .ic-pause { display: block; }
.usa-vbtn.is-on .ic-off { display: none; }
.usa-vbtn.is-on .ic-on { display: block; }

/* 타이틀 */
.usa-title-wrap { text-align: center; margin-bottom: 72px; }
.usa-eyebrow { display: block; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: #6a6a6a; margin-bottom: 22px; }
.usa-title-wrap .sub_title { font-size: 76px; line-height: 1.02; padding-bottom: 0; letter-spacing: -.01em; }
.usa-title-wrap .sub_title i { font-style: italic; }
.usa-meta { margin-top: 26px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #444; line-height: 1.9; word-break: keep-all; overflow-wrap: normal; }
.usa-meta .dot { margin: 0 12px; color: #aaa; }
.usa-meta .nb { white-space: nowrap; } /* 지역명 단위로만 줄바꿈 */
.usa-meta .dot { display: inline-block; } /* 구분점 앞뒤를 줄바꿈 지점으로 */
.usa-lead { max-width: 820px; margin: 34px auto 0; font-size: 24px; line-height: 1.55; color: #222; word-break: keep-all; }

/* 본문 섹션: 왼쪽 소제목 · 오른쪽 본문 (프로그램 북 스타일) */
.usa-section { display: grid; grid-template-columns: 280px 1fr; gap: 24px 48px; border-top: 1px solid #d9d9d9; padding: 54px 0; }
.usa-section:last-of-type { border-bottom: 1px solid #d9d9d9; }
.usa-section[id] { scroll-margin-top: 176px; } /* 고정 헤더 80px + 서브 메뉴바 80px + 여유 */
.usa-section h3 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; line-height: 1.6; color: #111; padding-top: 6px; }
.usa-body { font-size: 20px; line-height: 1.75; color: #222; word-break: keep-all; }
.usa-body p + p { margin-top: 20px; }
.usa-body strong { font-weight: 600; }
.usa-body a { color: #111; border-bottom: 1px solid #111; }
.usa-body ul { padding-left: 0; }
.usa-body li { position: relative; padding-left: 26px; }
.usa-body li + li { margin-top: 12px; }
.usa-body li::before { content: '—'; position: absolute; left: 0; color: #888; }

/* 후원 계좌 */
.usa-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #111; margin-top: 28px; }
.usa-bank > div { padding: 22px 26px; border-bottom: 1px solid #ddd; }
.usa-bank > div:nth-child(odd) { border-right: 1px solid #ddd; }
.usa-bank > div:nth-last-child(-n+2) { border-bottom: none; }
.usa-bank dt { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #777; margin-bottom: 8px; }
.usa-bank dd { font-size: 22px; line-height: 1.3; color: #111; font-variant-numeric: tabular-nums; }
.usa-note { margin-top: 24px; font-size: 18px; color: #555; font-style: italic; }

/* 투어 일정 표 */
.usa-itinerary { width: 100%; border-collapse: collapse; margin-top: 8px; font-family: inherit; } /* common.css의 table 서체 지정 대신 .usa-serif 상속 */
.usa-itinerary th { text-align: left; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: #777; padding: 0 16px 14px 0; border-bottom: 1px solid #111; }
.usa-itinerary td { vertical-align: top; padding: 22px 16px 22px 0; border-bottom: 1px solid #e2e2e2; font-size: 19px; line-height: 1.5; }
.usa-itinerary td:last-child, .usa-itinerary th:last-child { padding-right: 0; }
.usa-itinerary .date { width: 110px; white-space: nowrap; font-size: 20px; letter-spacing: .04em; }
.usa-itinerary .what { width: 42%; }
.usa-itinerary .what strong, .usa-itinerary .where strong { display: block; font-weight: 600; color: #111; }
.usa-itinerary small { display: block; font-size: 16px; color: #666; margin-top: 4px; line-height: 1.5; }
.usa-itinerary .where strong + small + strong { margin-top: 12px; }
.usa-itinerary-note { margin-top: 18px; font-size: 15px; color: #777; }

/* 하단 상호 이동 링크 (gaon_usa.pager.php) */
.usa-pager { margin-top: 64px; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; display: flex; }
.usa-section + .usa-pager { border-top: none; margin-top: 0; } /* 마지막 섹션 하단선과 이중선 방지 */
.usa-pager-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; text-align: center; color: #111; text-decoration: none; transition: background .25s ease; }
.usa-pager-link + .usa-pager-link { border-left: 1px solid #d9d9d9; }
.usa-pager-link:hover { background: #f6f6f6; text-decoration: none; }
.usa-pager-eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #888; }
.usa-pager-title { font-size: 22px; letter-spacing: .02em; }
.usa-pager-title i { font-style: normal; margin-left: 10px; transition: transform .25s ease; display: inline-block; }
.usa-pager-link:hover .usa-pager-title i { transform: translateX(4px); }

/* CTA */
.usa-cta { text-align: center; padding: 72px 0 0; }
.usa-cta .usa-body { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.usa-btn { display: inline-block; border: 1px solid #111; border-radius: 30px; padding: 15px 40px; font-size: 16px; font-weight: 600; color: #111; margin: 6px; transition: all .3s ease; background: #fff; }
.usa-btn:hover { background: #111; color: #fff; }
.usa-btn.primary { background: #111; color: #fff; }
.usa-btn.primary:hover { background: #fff; color: #111; }
.usa-foot { margin-top: 64px; text-align: center; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #777; line-height: 2; }
.usa-foot a { color: #111; }

/* 페이지 바로가기 QR (표시는 작게, 원본 파일은 인쇄용 1800px) */
.usa-qr { margin-top: 72px; text-align: center; }
.usa-qr img { display: block; width: 132px; height: auto; margin: 0 auto; padding: 8px; border: 1px solid #d9d9d9; background: #fff; image-rendering: -webkit-optimize-contrast; }
.usa-qr-caption { margin-top: 14px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #111; }
.usa-qr-links { margin-top: 6px; font-size: 12px; letter-spacing: .06em; color: #999; }
.usa-qr-links a { display: inline-block; padding: 6px 0; color: #777; border-bottom: 1px solid #ccc; }
.usa-qr-links a:hover { color: #111; border-bottom-color: #111; }

@media all and (max-width: 1099.99px) {
  .usa-title-wrap .sub_title { font-size: 60px; }
  .usa-section { grid-template-columns: 220px 1fr; gap: 20px 32px; }
}
@media all and (max-width: 769.99px) {
  .usa-wrap { padding: 44px 0 90px; }
  .usa-video-ctrl { right: 10px; bottom: 10px; gap: 6px; }
  .usa-vbtn { width: 36px; height: 36px; }
  .usa-title-wrap { margin-bottom: 44px; }
  .usa-title-band { padding: 40px 20px 32px; }
  .usa-title-band .usa-main-title { font-size: 46px; }
  .usa-subtitle { font-size: 13px; letter-spacing: .1em; margin-top: 14px; }
  .usa-title-band .usa-eyebrow { font-size: 13px; letter-spacing: .1em; margin-bottom: 14px; }
  .usa-title-wrap .sub_title { font-size: 42px; }
  .usa-meta { font-size: 13px; }
  .usa-meta .dot { margin: 0 6px; }
  .usa-meta { letter-spacing: .08em; line-height: 1.8; }
  .usa-lead { font-size: 20px; margin-top: 24px; }
  .usa-section { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
  .usa-body { font-size: 18px; }
  .usa-bank { grid-template-columns: 1fr; }
  .usa-bank > div { border-right: none !important; border-bottom: 1px solid #ddd !important; }
  .usa-bank > div:last-child { border-bottom: none !important; }
  .usa-bank dd { font-size: 20px; }
  /* 일정표: 카드형으로 전환 */
  .usa-itinerary thead { display: none; }
  .usa-itinerary, .usa-itinerary tbody, .usa-itinerary tr, .usa-itinerary td { display: block; width: auto; }
  .usa-itinerary .date, .usa-itinerary .what { width: auto; } /* PC용 110px/42% 폭이 카드형에도 적용돼 좁게 줄바꿈되던 문제 */
  .usa-itinerary tr { border-bottom: 1px solid #e2e2e2; padding: 20px 0; }
  .usa-itinerary td { border: none; padding: 0; font-size: 18px; }
  .usa-itinerary td + td { margin-top: 10px; }
  .usa-itinerary .date { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: #777; }
  .usa-cta { padding-top: 48px; }
  .usa-btn { display: block; margin: 10px auto 0; max-width: 320px; }
  .usa-qr { margin-top: 48px; }
  .usa-qr img { width: 112px; }
  .usa-pager { margin-top: 44px; }
  .usa-pager-link { padding: 22px 12px; gap: 6px; }
  .usa-pager-eyebrow { font-size: 11px; letter-spacing: .16em; }
  .usa-pager-title { font-size: 18px; }
  /* 모바일 상단 탭바: layout.css가 770px 이하에서 .sub-lnav를 숨기지만, GAON USA 두 페이지는 햄버거 없이 오가야 하므로 컴팩트 탭으로 노출 */
  .sub-lnav.usa-lnav { display: block; height: 48px; top: 56px; }
  .sub-lnav.usa-lnav .lnav-inner { height: 48px; overflow: visible; }
  .sub-lnav.usa-lnav .lnav-list { height: 48px; padding: 0 12px; margin: 0; justify-content: center; gap: 0; white-space: nowrap; }
  .sub-lnav.usa-lnav li { margin: 0; }
  .sub-lnav.usa-lnav a { height: 48px; line-height: 48px; padding: 0 10px; font-size: 12px; letter-spacing: .06em; }
  .sub-lnav.usa-lnav li:first-child a { padding-left: 4px; }
  .sub-lnav.usa-lnav a:after { left: -2px; width: 4px; height: 4px; }
  .sub-lnav.usa-lnav a .nav-home { width: 18px; height: 18px; font-size: 11px; padding: 4px; }
  .sub-lnav.usa-lnav .active a span:after { bottom: -2px; }
  .usa-foot { font-size: 12px; letter-spacing: .08em; overflow-wrap: anywhere; }
  .usa-foot a { display: inline-block; padding: 6px 0; } /* 탭 타겟 확보 */ /* 좁은 폭에서 URL 어색한 줄바꿈 방지 */
}