@charset "UTF-8";
/* 괌ETA신청센터 전용 보충 스타일 — style.css(캐나다판 복제·남색 치환) 위에 얹는다. 2026-10-21 */

/* 메인 히어로: 공식 무료 신청 보조 링크 + 첫 화면 고지(원고 07장) */
/* 히어로 여행자별 목록: 항목명 한 줄(소유자 지시) — 가장 긴 '대상국 여권 · 45일 이하'에 맞춘 폭. 560px 이하는 원래대로 위아래로 쌓인다 */
@media (min-width:561px){ .ca-hero .ca-route b{flex:0 0 13.4em; white-space:nowrap} }

/* 01 여행 유형 — 사진 위 + 글 아래 카드 2×2 (캐나다판 2×2 사진 타일 배치 유지, 원고 H3·P 전문 노출) */
.gu-cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.gu-case{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:var(--paper); transition:transform .25s var(--e-out), box-shadow .25s var(--e-out)}
.gu-case:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(6,14,34,.10)}
.gu-case__img{position:relative; display:block; aspect-ratio:16/8; overflow:hidden}
.gu-case__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out)}
.gu-case:hover .gu-case__img img{transform:scale(1.05)}
.gu-case__tag{position:absolute; left:14px; bottom:14px; padding:5px 11px; border-radius:99px;
  background:rgba(18,42,87,.86); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em}
.gu-case__body{display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1}
.gu-case__no{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--accent)}
.gu-case__body h3{margin:0; font-size:clamp(17.5px,1.45vw,20px); font-weight:800; line-height:1.4; color:var(--ink)}
.gu-case__body p{margin:0; font-size:15px; line-height:1.75; color:var(--ink-2)}
.gu-case__go{margin-top:auto; padding-top:6px; font-size:14.5px; font-weight:700; color:var(--accent); text-decoration:none}
.gu-case__go:hover{color:var(--accent-deep); text-decoration:underline; text-underline-offset:4px}
@media (max-width:760px){ .gu-cases{grid-template-columns:1fr} .gu-case__body{padding:18px 18px 20px} }

/* 섹션 제목 아래 설명 */
.gu-sec-lead{margin:12px 0 0; max-width:760px; font-size:16px; line-height:1.75; color:var(--ink-2)}

/* 02 비교표 4열 — 좁은 화면에서는 행마다 카드로 쌓는다(가로 스크롤 없음) */
.gu-cmp4 .ca-cmp__tbl tbody th{width:16%}
@media (max-width:760px){
  .gu-cmp4{overflow:visible !important}
  .gu-cmp4 .ca-cmp__tbl{min-width:0 !important}
  .gu-cmp4 .ca-cmp__tbl thead{display:none}
  .gu-cmp4 .ca-cmp__tbl, .gu-cmp4 .ca-cmp__tbl tbody, .gu-cmp4 .ca-cmp__tbl tr{display:block; width:100%}
  .gu-cmp4 .ca-cmp__tbl tr{border-bottom:1px solid var(--line)}
  .gu-cmp4 .ca-cmp__tbl tbody tr:last-child{border-bottom:0}
  .gu-cmp4 .ca-cmp__tbl tbody th{display:block; width:auto; padding:12px 16px; border-bottom:0}
  .gu-cmp4 .ca-cmp__tbl td{display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px;
    padding:9px 16px; border-bottom:0; font-size:14.5px}
  .gu-cmp4 .ca-cmp__tbl td::before{content:attr(data-th); font-weight:700; color:var(--ink-3); font-size:13px}
  .gu-cmp4 .ca-cmp__tbl td.is-lead::before{color:var(--accent-deep)}
}

/* 제목 태그로 바꾼 자리(숫자 칸 이름·FAQ 질문) — 기존 span 모양 그대로 */
.numbers .cell h3.nm{margin:12px 0 0}
.faq .qa summary h3.q{margin:0; font-family:inherit; letter-spacing:inherit}

/* 본문 맥락 링크 한 줄 · 사실확인 줄 */
.gu-inline-link{margin:22px 0 0; text-align:center; font-size:15px; color:var(--ink-2)}
.gu-inline-link a, .gu-factline a{color:var(--accent); font-weight:700}
.gu-factline{margin:26px 0 0; text-align:center; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3)}

/* 서브페이지 머리 '출처' 링크 (어두운 사진 위) */
.page-head .page-meta a{color:#fff; text-decoration:underline; text-underline-offset:3px}

/* 푸터 고지 문단 */
.colophon .cf-brand .gov-note{margin:14px 0 0; max-width:420px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.72)}

/* 문의폼 선택 표시 */
.cform label small{font-weight:500; color:var(--ink-3)}

/* 좁은 화면: 2열 표(항목·내용)는 최소폭을 풀어 줄바꿈으로 맞춘다 — 3열 이상 표는 캐나다판처럼 표 안에서 가로 스크롤 */
@media (max-width:560px){
  .doc-body table:not(:has(tr > :nth-child(3))){min-width:0}
  .doc-body table:not(:has(tr > :nth-child(3))) th{white-space:normal; width:34%}
  .doc-body table:not(:has(tr > :nth-child(3))) td{overflow-wrap:anywhere}
}

/* 히어로 설명 문단: 캐나다판 48ch 제한을 풀어 왼쪽 칸 폭을 다 쓴다 — 원고 문단이 길어 5줄 → 줄 수를 줄여 사진 높이에 맞춤(소유자 "히어로가 너무 길어") */
.ca-hero .ca-hero__lead{max-width:none}

/* PC(901px~): 사진 카드를 왼쪽 글 높이에 맞춰 늘린다 — "세로가 그림은 짧은데"(소유자) */
@media (min-width:901px){
  .ca-hero .ca-hero__side{align-self:stretch}
  .ca-hero .ca-hero__media{aspect-ratio:auto; height:100%; min-height:420px}
}

/* 메인 FAQ 2열 — 칸마다 따로 쌓기(한 칸을 열어도 옆 칸 선이 안 움직인다). 선 = 각 칸 안 질문 사이만, 칸 맨 아래는 없음 */
.faq .qa.gu-qa2{align-items:start}
.gu-qcol{display:flex; flex-direction:column; min-width:0}
.gu-qa2 .gu-qcol details{border-bottom:1px solid var(--line)}
.gu-qa2 .gu-qcol details:last-child{border-bottom:0}
@media (max-width:820px){
  .gu-qa2 .gu-qcol{display:contents}
  .faq .qa.gu-qa2{display:flex; flex-direction:column}
  .gu-qa2 .gu-qcol details:last-child{border-bottom:1px solid var(--line)}
  .gu-qa2 .gu-qcol details.gu-last{border-bottom:0}
}

/* 로고 = 성조기(19:10) — 캐나다 국기(2:1) 칸 크기를 높이는 그대로 두고 폭만 맞춘다 (2026-10-21 소유자 지시) */
.brand-mark.is-flag.is-us{width:51px; height:27px}
@media (max-width:560px){ .brand-mark.is-flag.is-us{width:44px; height:23px} }
html.nav-tight .brand-mark.is-flag.is-us{width:38px; height:20px}
.colophon .cf-brand img.is-flag.is-us{width:61px; height:32px}

/* 메인 05 띠: 원고 H2 '여행 전 알아둘 핵심 주의사항' 아래 H3 2개 (2열, 900px 이하 1열) */
.etacheck .gu-tips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 34px; margin-top:18px}
.etacheck .gu-tips h3{margin:0 0 8px; font-size:clamp(16.5px,1.35vw,19px); font-weight:800; line-height:1.45; color:#fff}
.etacheck .gu-tips p{margin:0; font-size:15px; line-height:1.75; color:rgba(255,255,255,.8); max-width:none}
.etacheck .h2{max-width:none}
@media (max-width:900px){ .etacheck .gu-tips{grid-template-columns:1fr} }