/* 여행 콘텐츠의 이미지·본문 배치. 구간 리듬(public-content)·주제 탭·다이브오리 안내는 공개 공통(public.css)이 맡는다. */

/* 장면 카드(x-public.scene-cards, 여행 메인 풍경): 글은 사진 아래쪽 그늘 위에 얹고, 카드 전체가 분위기 고르기 버튼이다.
   좁은 화면은 옆으로 넘기는 줄, 넓은 화면은 한 줄에 모두 두고 접힌 카드는 사진만 보인다. 고른 카드(travel.js의 data-travel-scene-open)가 넓어진 뒤 글이 떠오른다.
   글 너비는 펼친 카드 너비로 고정해(--scene-count) 넓어지는 동안 줄바꿈이 흔들리지 않게 한다. */
.travel-scenes { display: flex; gap: var(--space-3); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-1) var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
.travel-scenes::-webkit-scrollbar { display: none; }
/* 옆으로 넘기는 줄의 조작 줄(travel.js). 휴대폰은 스크롤바를 숨기고 마우스는 가로로 굴리기 어려우므로, 이전·다음 버튼과 끌거나 눌러 옮기는 위치 막대를 둔다.
   막대는 누르기 쉽게 높이를 버튼만큼 잡고 가운데 선만 그린다. */
.travel-scenes__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-1); }
.travel-scenes__controls[hidden] { display: none; }
.travel-scenes__button { flex-shrink: 0; border-radius: var(--radius-pill); }
.travel-scenes__track { position: relative; height: var(--control-height-sm); flex: 0 1 12rem; cursor: pointer; touch-action: none; user-select: none; }
.travel-scenes__track::before, .travel-scenes__thumb { position: absolute; top: 50%; height: .25rem; border-radius: var(--radius-pill); content: ""; translate: 0 -50%; }
.travel-scenes__track::before { inset-inline: 0; background: var(--color-border); }
.travel-scenes__thumb { left: calc(var(--scenes-progress, 0) * (100% - var(--scenes-thumb, 100%))); width: var(--scenes-thumb, 100%); background: var(--color-brand); cursor: grab; transition: height var(--duration-fast) var(--ease-standard); }
.travel-scenes__track[data-dragging] { cursor: grabbing; }
.travel-scenes__track[data-dragging] .travel-scenes__thumb { height: .5rem; cursor: grabbing; }
.travel-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; flex: 0 0 min(80%, 20rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-brand); box-shadow: var(--shadow-sm); scroll-snap-align: start; }
.travel-scene > * { grid-area: 1 / 1; }
.travel-scene__image { height: 100%; border-radius: 0; }
.travel-scene__image img { height: 100%; object-fit: cover; transition: transform 900ms var(--ease-standard); }
.travel-scene__body { z-index: 1; display: grid; align-self: end; gap: var(--space-2); background: linear-gradient(to top, rgb(0 20 30 / .86), rgb(0 20 30 / .5) 62%, transparent); padding: var(--space-16) var(--space-5) var(--space-5); color: var(--color-surface); }
.travel-scene__region { color: rgb(255 255 255 / .9); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: .02em; word-break: keep-all; }
.travel-scene h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }
.travel-scene__more { display: grid; gap: var(--space-3); }
.travel-scene__more p { color: rgb(255 255 255 / .86); font-size: var(--font-size-sm); line-height: var(--line-height-loose); word-break: keep-all; }
.travel-scene__link { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-2); color: var(--color-surface); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.travel-scene__link::after { position: absolute; inset: 0; content: ""; }
.travel-scene__link:focus-visible { outline: none; }
.travel-scene:has(.travel-scene__link:focus-visible) { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: 3px; }

/* 국가 가이드 '한눈에'(_travel-glance): 슬레이트 한 판에 셈한 값(계기판 숫자)을 둔다(칸은 링크가 아니다, 구간 이동은 장 목록). 아래에 다이브오리 안내 한 번. */
.travel-glance__slate { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-5); }
.travel-glance__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; }
.travel-glance__facts li { display: grid; height: 100%; align-content: start; gap: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-soft); padding: var(--space-3) var(--space-4); }
.travel-glance__label { color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.travel-glance__value { color: var(--color-brand); font-family: var(--font-gauge); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: 1.05; font-variant-numeric: tabular-nums; }
.travel-glance__value small { margin-left: .2em; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--font-size-sm); }
.travel-glance__note { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-body); word-break: keep-all; }
.travel-glance__entry { font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.travel-glance__entry span { margin-right: var(--space-2); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.travel-glance__guide { margin-top: var(--space-5); }
@media (min-width: 48rem) {
    .travel-glance__facts { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* 국가 가이드 지역(_travel-regions): 모든 지역을 카드로 펼친다(넓은 화면 두 칸, 홀수면 마지막 카드는 가로로 두 칸). 맨 위 사진 칸(장면 수와 관계없이 16:9) → 이름·한 줄 → 이야기,
   종목 줄은 늘 스쿠버·프리다이빙 두 줄, 이동·예약 메모는 카드 맨 아래에 접어 두고 접힌 줄에 무엇이 들었는지 보인다. 여행 메인에서 장면을 골라 왔으면 그 지역 카드를 테두리로 짚는다. */
.travel-regions__list { display: grid; gap: var(--space-4); }
.travel-region { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.travel-region__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--space-4); }
/* 같은 줄 카드끼리 높이가 같으므로, 접힌 메모(또는 출처 한 줄)를 맨 아래에 붙여 접힌 줄 위치를 맞춘다. */
.travel-region__body > :last-child { margin-top: auto; }
.travel-region[data-travel-region-selected] { outline: var(--border-width-accent) solid var(--color-brand); outline-offset: 2px; }
/* 사진 칸: 카드 폭 16:9 한 덩어리를 장면 수만큼 같은 크기 칸으로 나눈다(1장 한 칸, 2·3장 세로로 나란히, 4장 2×2). 같은 카드 안 사진은 크기가 같아 AI 표시도 같은 모양이다.
   장면 제목은 왼쪽 위에 AI 표시와 같은 반투명 유리 칩으로 얹어, 아래쪽 AI 표시와 부딪치지 않고 사진을 가리는 면적을 줄인다. */
.travel-region__media { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); aspect-ratio: 16 / 9; overflow: hidden; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-brand-soft); list-style: none; }
.travel-region__media--4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.travel-region__media li, .travel-region__media figure { min-width: 0; min-height: 0; }
.travel-region__media figure { position: relative; height: 100%; }
.travel-region__media .generated-image, .travel-region__media img { height: 100%; }
.travel-region__media img { object-fit: cover; }
.travel-region__media figcaption { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); max-width: calc(100% - var(--space-4)); border: var(--border-width) solid rgb(255 255 255 / .18); border-radius: var(--radius-sm); background: rgb(0 20 30 / .42); padding: .3rem .55rem; box-shadow: 0 .0625rem .25rem rgb(0 10 16 / .16); backdrop-filter: blur(.375rem); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); text-wrap: balance; word-break: keep-all; pointer-events: none; }
.travel-region__title { display: grid; min-width: 0; gap: var(--space-2); }
.travel-region__title h3 { color: var(--color-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }
.travel-region__title .public-card__hook { color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); word-break: keep-all; }
/* 지역 카드의 종목별 경험: 스쿠버·프리다이빙을 같은 모양의 줄로 나란히 둔다(종목 이름 칸 + 경험 나열). */
.travel-region__disciplines { display: grid; font-size: var(--font-size-sm); }
.travel-region__disciplines > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3); border-top: var(--border-width) solid var(--color-border); padding-block: var(--space-2); }
.travel-region__disciplines dt { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.travel-region__disciplines dd { color: var(--color-text-secondary); line-height: var(--line-height-body); word-break: keep-all; }
.travel-region__story { color: var(--color-text); line-height: var(--line-height-loose); word-break: keep-all; }
.travel-region__disciplines > .is-empty dt, .travel-region__disciplines > .is-empty dd { color: var(--color-text-muted); }
.travel-region__more { border-top: var(--border-width) solid var(--color-border); }
.travel-region__more > summary { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); list-style: none; cursor: pointer; }
.travel-region__more > summary::-webkit-details-marker { display: none; }
.travel-region__more > summary .icon { flex-shrink: 0; transition: transform var(--duration-base) var(--ease-standard); }
.travel-region__more[open] > summary .icon { transform: rotate(180deg); }
.travel-region__more > .public-card__memo { padding-block: var(--space-2) var(--space-3); }
@media (min-width: 48rem) {
    .travel-regions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 지역 수가 홀수면 마지막 카드가 빈 칸 없이 두 칸을 차지한다. 사진 칸은 왼쪽에서 본문 높이만큼 늘어나고(비율 대신 높이를 따른다) 본문은 오른쪽에 둔다.
       사진과 본문은 카드 폭의 반반으로 나눠 공개 카드(.public-card)와 같은 세로줄에서 갈리고, 본문 글은 공개 카드 본문과 같은 안쪽 여백에서 시작한다. */
    .travel-region:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .travel-region:last-child:nth-child(odd):has(> .travel-region__media) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
    .travel-region:last-child:nth-child(odd) > .travel-region__body { padding-left: var(--space-6); }
    .travel-region:last-child:nth-child(odd) > .travel-region__media { aspect-ratio: auto; min-height: 18rem; margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); border-radius: var(--radius-card) 0 0 var(--radius-card); }
}

/* 시기·예보: 날씨 카드 아래 지역을 골라 보는 출발 메모(_travel-departure). */
.travel-forecast-pick { margin-top: var(--space-8); }
.travel-forecast-pick__title { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.travel-departure { margin-top: var(--space-4); }
/* 넓은 화면의 예보 지역 탭은 줄을 꽉 채워 지역 카드·예보 카드와 같은 폭으로 읽히게 한다(넘치면 줄을 바꿔 다시 채운다). */
@media (min-width: 64rem) {
    .travel-departure > .public-tabs__list > button { flex: 1 0 auto; justify-content: center; }
}

/* 가는 길: 경로마다 한 칸(출발 → 도착 · 설명 · 공식 안내). 넓은 화면은 두 칸. */
.travel-routes { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.travel-routes > div { display: grid; min-width: 0; align-content: start; gap: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.travel-routes dt { color: var(--color-brand); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.travel-routes dd { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-loose); word-break: keep-all; }
@media (min-width: 48rem) {
    .travel-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 입국·현지 구간의 주제 카드 묶음(휴대폰 한 줄에 하나, 태블릿부터 두 칸). 그림은 위, 아이콘 주제는 제목 앞 아이콘. */
.travel-local { display: grid; gap: var(--space-4); }
.travel-local__card { align-content: start; }
.travel-local__icon { margin-right: var(--space-2); color: var(--color-brand); vertical-align: -.15em; }
@media (min-width: 48rem) {
    .travel-local { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    /* 두 칸 묶음 안에서는 공개 카드의 좌우 배치 대신 그림을 위에 둔다. */
    .travel-local__card { grid-template-columns: minmax(0, 1fr); }
    .travel-local__card .public-card__figure { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (hover: hover) {
    .travel-scenes__track:hover .travel-scenes__thumb { height: .5rem; }
    .travel-scene:hover .travel-scene__image img { transform: scale(1.04); }
}
@media (min-width: 40rem) {
    .travel-scene { flex-basis: min(45%, 22rem); }
}
@media (min-width: 64rem) {
    .travel-scenes__controls { display: none; }
    .travel-scenes { container-type: inline-size; height: 28rem; overflow: visible; margin-inline: 0; padding: 0; }
    .travel-scene { flex: 1 1 0; aspect-ratio: auto; transition: flex-grow 640ms var(--ease-spring); }
    .travel-scene[data-travel-scene-open] { flex-grow: 3; }
    .travel-scene__body { width: calc((100cqi - (var(--scene-count) - 1) * var(--space-3)) * 3 / (var(--scene-count) + 2)); justify-self: start; padding: var(--space-16) var(--space-6) var(--space-6); opacity: 0; transform: translateY(var(--space-3)); transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard); }
    .travel-scene[data-travel-scene-open] .travel-scene__body { opacity: 1; transform: none; transition-duration: 480ms; transition-delay: 380ms; }
    /* 접힌 카드는 사진만 보이도록 AI 라벨도 숨기고, 펼친 카드에서 글과 함께 나타난다. */
    .travel-scene .generated-image__label { visibility: hidden; opacity: 0; transition: opacity 160ms var(--ease-standard), visibility 0s 160ms; }
    .travel-scene[data-travel-scene-open] .generated-image__label { visibility: visible; opacity: 1; transition: opacity 480ms var(--ease-standard) 380ms, visibility 0s 380ms; }
}

/* 여행 메인: 분위기 장면 카드(바다 특징과 같은 .travel-scene)와 나라 탭(지역과 같은 .public-card). 국가 소개와 링크는 모두 남겨 둔다. */
.travel-discovery { scroll-margin-top: var(--space-24); }
.travel-scene[data-travel-discovery-selected] { outline: var(--border-width-accent) solid var(--color-brand); outline-offset: 3px; }
.travel-discovery__feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.travel-discovery__feedback[data-travel-discovery-active] { margin-bottom: var(--space-5); }
.travel-discovery__status { color: var(--color-brand); font-size: var(--font-size-sm); line-height: var(--line-height-loose); }
/* 고른 분위기와 어울리지 않는 나라는 탭 글자 톤만 낮춘다. 눌러서 읽는 것은 그대로다. */
.public-tabs__list > button[data-travel-discovery-match="false"][aria-selected="false"] { color: var(--color-text-muted); }
.travel-discovery__result[data-travel-discovery-match="false"] .public-card__figure img { opacity: .7; }

/* 출발 메모(x-public.forecast-companion, 국가 가이드 '시기·예보' 구간): 지역 카드와 같은 흰 카드 하나에 다이브오리 요약(말풍선 겉모양을 풀어 카드 머리로)과
   날짜마다 한 칸인 주간 예보 줄을 둔다. 넓은 화면은 한 줄에 모든 날짜, 좁은 화면은 칸을 가로로 넘긴다. 비 소식 날은 드라이 장갑 파랑으로 짚는다. */
.forecast-companion { display: grid; min-width: 0; gap: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.forecast-companion > .forecast-companion__guide { max-width: var(--container-md); border-radius: 0; background: none; box-shadow: none; padding: 0; }
.forecast-companion__guide strong { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.forecast-companion__preview { color: var(--color-memory); font-size: var(--font-size-xs); line-height: var(--line-height-body); }
.forecast-week { display: grid; grid-auto-columns: minmax(6.75rem, 1fr); grid-auto-flow: column; gap: var(--space-2); overflow-x: auto; margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); scroll-padding-inline: var(--space-5); scroll-snap-type: x proximity; scrollbar-width: none; }
.forecast-week::-webkit-scrollbar { display: none; }
.forecast-week__day { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-1); border-radius: var(--radius-md); background: var(--color-sky); padding: var(--space-4) var(--space-2); text-align: center; scroll-snap-align: start; }
.forecast-week__date { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.forecast-week__date span { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.forecast-week__icon { margin-block: var(--space-2) var(--space-1); color: var(--color-brand); font-size: 1.5rem; }
.forecast-week__sky { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.forecast-week__temp { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.forecast-week__temp small, .forecast-week__sea small { margin-inline-start: .125em; color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); }
.forecast-week__none { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
/* 바다 값은 칸 아래에 붙여, 육상 예보가 없는 날도 다른 날과 같은 높이에서 읽히게 한다. */
.forecast-week__sea { display: grid; width: 100%; gap: var(--space-1); margin-top: auto; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-2); font-size: var(--font-size-xs); }
.forecast-week__sea > div { display: flex; justify-content: space-between; gap: var(--space-2); }
.forecast-week__sea dt { color: var(--color-text-secondary); }
.forecast-week__sea dd { color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.forecast-week__day--rain { background: color-mix(in srgb, var(--color-glove) 9%, var(--color-surface)); }
.forecast-week__day--rain :is(.forecast-week__icon, .forecast-week__sky) { color: var(--color-glove); }
.forecast-companion__context { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-loose); }
.forecast-companion__context > p { max-width: var(--container-md); }
.forecast-companion__context > p:last-child { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.forecast-companion__context a { color: var(--color-brand); text-decoration: underline; text-underline-offset: .2em; }

/* 국가 가이드 '준비'의 체크리스트(x-preparation.checklist, 2026-10-29 준비 페이지를 국가 가이드에 합쳤다). */
.prepare-checklist summary { cursor: pointer; list-style: none; }
.prepare-checklist summary::-webkit-details-marker { display: none; }
.prepare-checklist summary .icon { flex-shrink: 0; color: var(--color-brand); transition: transform var(--duration-base) var(--ease-standard); }
.prepare-checklist details[open] > summary .icon { transform: rotate(180deg); }

/* 체크리스트: 먼저 볼 항목 → 자료 출처(접기) → 구간 카드(아이콘·제목·개수). 먼저 볼 항목과 자료 출처는 구간 머리와 같은 왼쪽 선에 둔다. 같은 항목은 처음 나온 구간에만 있고 뒤 구간은 '앞에서 본 항목'으로 잇는다. */
.prepare-priority h3 { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.prepare-priority ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); list-style: none; }
.prepare-priority a, .prepare-earlier a { display: inline-flex; min-height: var(--control-height-sm); align-items: center; gap: var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); padding: var(--space-1) var(--space-4); color: var(--color-brand); font-size: var(--font-size-sm); line-height: var(--line-height-body); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.prepare-evidence { max-width: var(--container-md); margin-top: var(--space-5); }
.prepare-evidence > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: var(--control-height-sm); color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-body); }
.prepare-evidence__sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); padding-bottom: var(--space-4); }

.prepare-section { margin-top: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.prepare-evidence + .prepare-section { margin-top: var(--space-6); }
.prepare-section__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); }
/* 구간 아이콘: 연한 브랜드 원 안에 구간 성격(이동·입국·장비…)을 보인다. 설명 문단은 아래 본문과 같은 왼쪽 선에서 시작한다. */
.prepare-section__icon { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); font-size: var(--font-size-lg); }
.prepare-section__header h3 { color: var(--color-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); word-break: keep-all; }
.prepare-section__count { border-radius: var(--radius-pill); background: var(--color-brand-soft); padding: var(--space-1) var(--space-3); color: var(--color-brand); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.prepare-section__header p { grid-column: 1 / -1; max-width: var(--container-md); color: var(--color-text-secondary); line-height: var(--line-height-loose); }
/* 구간 접기: 머리 전체가 누르는 줄이다. 접힌 동안은 개수 옆 화살표와 앞 항목 이름 한 줄(peek)로 안에 무엇이 있는지 보인다. */
.prepare-section__count { display: inline-flex; align-items: center; gap: var(--space-1); }
.prepare-section__peek { grid-column: 1 / -1; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.prepare-section__fold[open] .prepare-section__peek { display: none; }
.prepare-section__fold > summary:focus-visible { border-radius: var(--radius-md); outline: var(--border-width-accent) solid var(--color-focus); outline-offset: var(--space-2); }
.prepare-section__paragraph { max-width: var(--container-md); margin-top: var(--space-4); color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.prepare-regions { margin-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.prepare-regions > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); padding-block: var(--space-3); }
.prepare-regions dt { color: var(--color-brand); font-weight: var(--font-weight-semibold); word-break: keep-all; }
.prepare-regions dd { color: var(--color-text-secondary); line-height: var(--line-height-loose); }
.prepare-regions + .text-link { display: inline-flex; margin-top: var(--space-4); font-size: var(--font-size-sm); }
.prepare-section__sources { margin-top: var(--space-4); }
.prepare-section__group { margin-top: var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.prepare-items { margin-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); list-style: none; }
.prepare-section__group + .prepare-items { margin-top: var(--space-2); }
/* 항목 한 줄: 제목·한 줄 설명, 오른쪽 위 '자세히'가 아래로 설명과 출처를 펼친다. 먼저 볼 항목·앞에서 본 항목 링크로 오면 연한 면으로 짚는다. */
.prepare-item { position: relative; border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-4) calc(var(--space-20) + var(--space-2)) var(--space-4) var(--space-3); transition: background-color var(--duration-slow) var(--ease-standard); }
.prepare-item:focus { outline: none; background: var(--color-brand-soft); }
.prepare-item__copy { display: grid; gap: var(--space-1); }
.prepare-item__copy strong { color: var(--color-text); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); word-break: keep-all; }
.prepare-item__copy > span { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }
.prepare-item__detail > summary { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; min-height: var(--control-height-sm); align-items: center; gap: var(--space-1); border-radius: var(--radius-pill); padding: 0 var(--space-2) 0 var(--space-3); color: var(--color-brand); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); transition: background-color var(--duration-base) var(--ease-standard); }
.prepare-item__detail > div { max-width: var(--container-md); margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-loose); }
.prepare-earlier { margin-top: var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-soft); padding: 0 var(--space-4); }
.prepare-earlier > summary { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.prepare-earlier ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-4); list-style: none; }

/* 공식 정보·다이브오리 팁(x-preparation.note)과 프리셋 출처 한 줄(x-preparation.source). */
.prepare-note { margin-top: var(--space-4); border-left: .1875rem solid var(--color-brand-light); padding: var(--space-4) var(--space-6); }
.prepare-section .prepare-note { margin-top: var(--space-5); }
.prepare-note--official { border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-soft); padding: var(--space-5); }
.prepare-note .section-eyebrow-caps { color: var(--color-brand); }
.prepare-note h3 { margin-top: var(--space-2); color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.prepare-note > p:not(.section-eyebrow-caps) { max-width: var(--container-md); margin-top: var(--space-2); color: var(--color-text-secondary); line-height: var(--line-height-loose); }
.prepare-source { display: block; margin-top: var(--space-3); font-size: var(--font-size-sm); }
.prepare-source a { color: var(--color-brand); text-decoration: underline; text-underline-offset: .25em; overflow-wrap: anywhere; }
.prepare-source small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* 체크리스트 만들기의 종목 선택: 버튼 폭 안팎으로 둔다. */
.prepare-checklist__discipline { display: grid; gap: var(--space-3); width: min(100%, 22rem); }
.prepare-checklist__discipline-lead { color: var(--color-text); font-weight: var(--font-weight-semibold); }
/* 체크리스트 만들기의 혜택: 긴 안내 문단 대신 만들면 생기는 페이지의 성격 세 가지를 체크 줄로 보인다. */
.prepare-checklist__perks { display: grid; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.prepare-checklist__perks li { display: flex; align-items: center; gap: var(--space-2); }
.prepare-checklist__perks .icon { color: var(--color-brand); }
/* 체크리스트 만들기 옆 미리보기: 만들면 열리는 페이지의 첫 항목들을 슬레이트처럼 보이고, 아래로 흐려 목록이 이어짐을 보인다. 누를 수 없다. */
.prepare-preview { position: relative; overflow: hidden; max-height: 22rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-slate); padding: var(--space-6) var(--space-6) 0; color: var(--color-pencil); }
.prepare-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 5rem; background: linear-gradient(transparent, var(--color-surface)); }
.prepare-preview__eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--color-brand); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.prepare-preview__eyebrow > span { margin-left: auto; border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-text-muted); padding: 0 var(--space-2); font-weight: var(--font-weight-medium); }
.prepare-preview__title { margin: var(--space-2) 0 var(--space-4); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.prepare-preview li { display: flex; align-items: center; gap: var(--space-3); border-top: var(--border-width) solid var(--color-border); padding-block: var(--space-3); font-size: var(--font-size-sm); }
.prepare-preview li.is-checked { color: var(--color-text-muted); text-decoration: line-through; }
@media (max-width: 55.999rem) { .prepare-preview { max-height: 15rem; } }

@media (hover: hover) {
    .prepare-priority a:hover, .prepare-earlier a:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
    .prepare-item__detail > summary:hover { background: var(--color-brand-soft); }
    .prepare-earlier > summary:hover, .prepare-evidence > summary:hover { color: var(--color-brand); }
}
@media (max-width: 39.999rem) {
    .prepare-section__icon { width: 2.5rem; font-size: var(--font-size-base); }
    .prepare-evidence__sources { grid-template-columns: 1fr; }
    .prepare-regions > div { grid-template-columns: 1fr; gap: var(--space-1); }
    .prepare-item { padding-right: var(--space-3); }
    .prepare-item__detail > summary { position: static; margin-top: var(--space-2); margin-left: calc(-1 * var(--space-3)); }
}
@media (max-width: 47.999rem) {
    /* 휴대폰의 국가 가이드 현지 정보 그림은 낮게 둬 글이 먼저 이어지게 한다. */
    .travel-country .public-card__figure { aspect-ratio: 2 / 1; }
}