/* Public and shared-dive surfaces. The dive record remains the first focus. */
.public-header__inner { position: relative; }
.public-navigation { position: absolute; left: 50%; transform: translateX(-50%); }
/* 공개 헤더 드롭다운은 MY 헤더와 같은 공통 .header-nav-dropdown(한 칸 목록, 왼쪽 정렬)이다. 나라가 많은 여행만 --grid로 두 칸을 쓰고, 맨 위 "전체 여행지 보기"(__all)는 한 줄을 다 쓰며 구분선과 화살표로 나라 목록과 나눈다. */
.public-navigation .header-nav-dropdown--grid { min-width: 19rem; column-gap: var(--space-1); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-navigation .header-nav-dropdown__all { position: relative; grid-column: 1 / -1; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.public-navigation .header-nav-dropdown__all::after { position: absolute; right: var(--space-3); bottom: calc(-1 * var(--space-1) - var(--border-width)); left: var(--space-3); height: var(--border-width); background: var(--color-border); content: ""; }
.mobile-menu { position: relative; display: block; flex: 0 0 auto; }
.mobile-menu summary { list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
/* 메뉴 버튼 크기는 MY 헤더 햄버거 메뉴(my.css .my-account__trigger)와 같고, 펼친 목록은 공통 .header-menu(common.css)다. */
.mobile-menu__trigger { display: flex; width: var(--control-height); height: var(--control-height); align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--header-icon-color, var(--color-brand)); }

/* Public subpage layout and header transitions. Shared backgrounds live in common.css. */
.site-shell:not(.site-shell--fullscreen) { display: flex; flex-direction: column; }
.site-shell:not(.site-shell--fullscreen) > main { flex: 1 0 auto; }
/* 사진 히어로를 지난 헤더의 유리 배경은 바다 배경 위 헤더와 같은 ::before다(common.css .ocean-header::before). 여기서는 아래 선만 전환한다. */
.site-shell--public:not(.site-shell--fullscreen) .public-header--overlay { transition: border-color .3s var(--ease-standard); }
/* 다른 여행지 카드(x-public.destination-card, 국가 가이드 끝의 비슷한 나라)와 다음 단계(x-public.next-step, 배우기 종목 화면의 강사 찾기). */
.public-destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.public-destination-card { display: flex; min-width: 0; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.public-destination-card > .generated-image { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.public-destination-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.public-destination-card__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: var(--space-5); }
.public-destination-card__body h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.public-destination-card__summary { margin-top: var(--space-3); color: var(--color-text-secondary); line-height: var(--line-height-loose); }
.public-destination-card__actions { margin-top: auto; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); }
.public-destination-card__link { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--radius-md); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.public-destination-card__link > span { min-width: 0; }
.public-destination-card__link > .icon { flex-shrink: 0; }
.public-next-step { margin-top: var(--space-10); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); text-align: center; }
.public-next-step h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); text-wrap: balance; }
.public-next-step > p { max-width: var(--container-md); margin: var(--space-4) auto 0; color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.public-next-step__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.public-next-step__actions > .text-link { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }

@media (hover: hover) {
    .public-destination-card__link:hover > span { text-decoration: underline; text-underline-offset: .25em; }
}
@media (max-width: 39.999rem) {
    .public-destination-grid { grid-template-columns: 1fr; }
}

/* Fullscreen home */
.site-shell--fullscreen { overflow-x: clip; background: #062a38; }
.public-header--overlay { --header-nav-color: var(--color-surface); --header-nav-current-color: var(--color-surface); --header-nav-hover-color: var(--color-surface); --header-icon-color: var(--color-surface); position: fixed; inset: 0 0 auto; border: 0; border-bottom: var(--border-width) solid rgb(255 255 255 / .2); background: transparent; color: var(--color-surface); backdrop-filter: none; }
.public-header--overlay .brand-mark__icon { filter: drop-shadow(0 .125rem .35rem color-mix(in srgb, var(--color-brand-hover) 58%, transparent)) drop-shadow(0 0 .0625rem var(--color-brand)); }
.public-header--overlay .brand-mark__name { color: var(--color-surface); }
.site-shell--public:not(.site-shell--fullscreen) .public-header--overlay.public-header--scrolled {
    /* initial: 사진 위 색을 지우고 바다 배경 위 헤더와 같은 기본색(common.css .header-nav-link)으로 돌아간다. */
    --header-nav-color: initial;
    --header-nav-current-color: initial;
    --header-nav-hover-color: initial;
    --header-icon-color: initial;
    border-bottom-color: transparent;
    color: var(--color-text);
}
.public-header--overlay.public-header--scrolled .brand-mark__name { color: var(--color-text); }
.public-header--overlay.public-header--scrolled .brand-mark__icon { filter: drop-shadow(0 .125rem .35rem color-mix(in srgb, var(--color-sky) 75%, transparent)) drop-shadow(0 0 .0625rem var(--color-sky)); }
.public-header--overlay .brand-mark__name, .public-header--overlay .mobile-menu__trigger { transition: color .3s var(--ease-standard); }
.public-header--overlay .brand-mark__icon { transition: filter .3s var(--ease-standard); }
.home-fullscreen { position: relative; display: grid; min-height: 100svh; min-height: 100dvh; place-items: center; isolation: isolate; padding: clamp(6rem, 12dvh, 9rem) var(--gutter) clamp(4rem, 8dvh, 6rem); background: #062a38; }
.home-fullscreen__backgrounds,
.home-fullscreen__background,
.home-fullscreen__shade { position: absolute; inset: 0; }
.home-fullscreen__backgrounds { z-index: -3; }
.home-fullscreen__background { background-position: center; background-size: cover; }
.home-fullscreen__background--1 { background-image: url('/images/home/diveory-ocean-01.webp'); }
.home-fullscreen__background--2 { background-image: url('/images/home/diveory-ocean-02.webp'); }
.home-fullscreen__background--3 { background-image: url('/images/home/diveory-ocean-03.webp'); }
.home-fullscreen__background--4 { background-image: url('/images/home/diveory-ocean-04.webp'); }
.home-fullscreen__background--5 { background-image: url('/images/home/diveory-ocean-05.webp'); }
.home-fullscreen__shade { z-index: -2; background: linear-gradient(180deg, rgb(2 22 30 / .42), rgb(3 28 39 / .52)), radial-gradient(circle at center, transparent 0, rgb(2 21 29 / .32) 74%); }
.generated-image__label.home-fullscreen__image-label { right: var(--gutter); bottom: var(--space-4); }
.home-entry { width: min(100%, var(--container-xl)); color: var(--color-surface); text-align: center; }
.home-entry h1 { font-size: clamp(2rem, 4vw, 4rem); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tightest); line-height: var(--line-height-tight); }
.home-entry h1 span { display: block; }
.home-entry h1 em { color: var(--color-brand-light); font-style: normal; }
.home-entry__intro { margin-top: clamp(var(--space-3), 2dvh, var(--space-5)); color: rgb(255 255 255 / .9); font-size: clamp(var(--font-size-sm), 1.35vw, var(--font-size-lg)); line-height: var(--line-height-body); }
.home-entry__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(var(--space-10), 8dvh, var(--space-24)); }
.home-entry__link { display: flex; min-width: 0; min-height: 12rem; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-3) clamp(var(--space-3), 2.5vw, var(--space-8)); border-radius: var(--radius-md); color: var(--color-surface); text-decoration: none; transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
.home-entry__link + .home-entry__link { border-left: var(--border-width) solid rgb(255 255 255 / .3); border-radius: 0; }
.home-entry__icon.icon { width: 1.75rem; height: 1.75rem; color: var(--color-brand-light); font-size: 1.5rem; }
.home-entry__eyebrow.section-eyebrow-caps { margin-top: var(--space-3); color: rgb(255 255 255 / .8); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-widest); }
.home-entry__label-mobile { display: none; }
.home-entry__title { margin-top: var(--space-2); font-size: clamp(var(--font-size-base), 1.65vw, var(--font-size-xl)); font-weight: var(--font-weight-semibold); line-height: 1.4; word-break: keep-all; text-wrap: balance; }
.home-entry__meta { margin-top: var(--space-2); color: rgb(255 255 255 / .78); font-size: var(--font-size-xs); }
.home-entry__cta { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); border-bottom: var(--border-width) solid currentColor; padding-bottom: var(--space-1); color: var(--color-brand-light); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.home-entry__cta > span { font-size: 1.2em; line-height: 1; }
.home-entry__link:focus-visible { outline: .1875rem solid var(--color-brand-light); outline-offset: .1875rem; }
@media (hover: hover) { .home-entry__link:hover { background: rgb(255 255 255 / .05); transform: translateY(-.125rem); } .home-entry__link:hover .home-entry__cta { color: var(--color-surface); } }
@media (max-width: 44.999rem) {
    .home-fullscreen { padding-block: clamp(4.75rem, 11dvh, 6rem) clamp(3.25rem, 7dvh, 4rem); }
    .home-entry { max-width: 34rem; }
    .home-entry h1 { font-size: clamp(1.375rem, 5.5vw, 2rem); }
    .home-entry__intro { max-width: 28rem; margin-inline: auto; font-size: var(--font-size-sm); line-height: 1.45; }
    .home-entry__links { grid-template-columns: minmax(0, 1fr); margin-top: clamp(var(--space-5), 4dvh, var(--space-8)); text-align: left; }
    .home-entry__link { display: grid; min-height: 4.75rem; grid-template-columns: 1.75rem minmax(0, 1fr); align-content: center; justify-items: start; column-gap: var(--space-3); padding: var(--space-3) var(--space-1); }
    .home-entry__link + .home-entry__link { border-top: var(--border-width) solid rgb(255 255 255 / .3); border-left: 0; }
    /* 글은 늘 둘째 칸에 두고, 아이콘은 줄 수(설명 유무)와 상관없이 글 전체 높이에 걸친다. */
    .home-entry__link > * { grid-column: 2; }
    .home-entry__icon.icon { grid-row: 1 / span 4; grid-column: 1; align-self: center; width: 1.5rem; height: 1.5rem; font-size: 1.3rem; }
    .home-entry__eyebrow.section-eyebrow-caps { margin-top: 0; font-size: .6875rem; letter-spacing: var(--letter-spacing-wide); }
    .home-entry__label-desktop { display: none; }
    .home-entry__label-mobile { display: inline; }
    .home-entry__title { margin-top: var(--space-1); font-size: var(--font-size-base); }
    .home-entry__meta { margin-top: 0; }
    .home-entry__cta { width: 100%; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); border-bottom: 0; padding-bottom: 0; font-size: var(--font-size-xs); }
}
@media (max-width: 44.999rem) and (max-height: 35rem) {
    .home-fullscreen { padding-block: 4.5rem 3rem; }
    .home-entry__links { margin-top: var(--space-4); }
    .home-entry__link { padding-block: var(--space-2); }
}

/* 헤더 메뉴는 MY 헤더 메뉴처럼 태블릿·PC(48rem 이상)에서 보인다. 폰은 메뉴 버튼만 쓴다. */
@media (max-width: 47.999rem) {
    .public-navigation { display: none; }
}

/* 생성 이미지 표시(x-public.generated-image-label). 버튼은 투명한 누르는 영역이고, 보이는 배경은 pill 하나다.
   pill 안에 닫힌 면('AI ⓘ')과 열린 면(안내 문구 ×)을 오른쪽에 맞춰 겹쳐 두고, 열고 닫을 때 pill 폭이 바뀌는 동안 두 면이 교차로 사라지고 나타난다.
   폭은 JS가 두 면을 재서 --label-closed-width·--label-open-width로 넘긴다(JS 전에는 닫힌 면 폭 그대로).
   작은 이미지(폭 12rem 미만, 지역 카드 썸네일·모바일 장면 사진)에서는 오른쪽 아래 모서리에 붙는 작은 'AI' 스티커로 줄이고 펼친 안내도 짧은 문구로 바꾼다. 누르는 영역은 그대로다. */
.generated-image { position: relative; display: block; overflow: hidden; container-type: inline-size; }
.generated-image > img { display: block; width: 100%; }
.generated-image:has(> img[data-image-state="loading"]) > .generated-image__label { visibility: hidden; }
.generated-image__label { position: absolute; z-index: 2; right: .75rem; bottom: .75rem; display: flex; align-items: center; justify-content: flex-end; min-width: 2.75rem; max-width: calc(100% - 1.5rem); min-height: 2.75rem; margin: 0 !important; border: 0; background: none; padding: 0; color: rgb(255 255 255 / .92) !important; font-size: .7rem; font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer; }
.generated-image__label-pill { position: relative; display: block; width: var(--label-closed-width, auto); max-width: 100%; height: 1.5rem; overflow: hidden; border-radius: var(--radius-pill); background: rgb(0 20 30 / .42); box-shadow: 0 .0625rem .25rem rgb(0 10 16 / .16); backdrop-filter: blur(.2rem); transition: width .24s ease, background-color .2s ease; }
.generated-image__label[aria-expanded="true"] > .generated-image__label-pill { width: var(--label-open-width, auto); }
.generated-image__label-face { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; height: 100%; padding-inline: .6rem; transition: opacity .2s ease, transform .24s ease; }
/* 열린 면은 닫힌 면 위에 오른쪽을 맞춰 겹치고 펼친 폭을 미리 가져, pill이 넓어지는 동안 문구가 줄바꿈·말줄임 없이 드러난다. 이미지 폭이 모자라면 문구 끝을 말줄임한다. */
.generated-image__label-face--closed { width: max-content; }
.generated-image__label-face--open { position: absolute; top: 0; right: 0; width: var(--label-open-width, max-content); opacity: 0; transform: translateX(.5rem); }
.generated-image__label[aria-expanded="true"] .generated-image__label-face--closed { opacity: 0; transform: translateX(-.5rem); }
.generated-image__label[aria-expanded="true"] .generated-image__label-face--open { opacity: 1; transform: none; }
.generated-image__label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--font-weight-medium); }
.generated-image__label-icon { flex: none; font-size: .75rem; opacity: .85; }
.generated-image__label-short { display: none; }
@media (hover: hover) { .generated-image__label:hover > .generated-image__label-pill { background-color: rgb(0 20 30 / .56); } }
/* 밀집형 카드·휴대폰 폭 이미지(24rem 미만)는 알약 모양은 두고 높이·글자·여백을 줄이고 정보 아이콘을 뺀다(본문 읽기를 가리지 않게). */
@container (max-width: 23.999rem) {
    .generated-image__label { right: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); font-size: .625rem; }
    .generated-image__label-pill { height: 1.125rem; }
    .generated-image__label-face { padding-inline: .45rem; }
    .generated-image__label-info { display: none; }
    .generated-image__label-icon { font-size: .625rem; }
}
@container (max-width: 11.999rem) {
    .generated-image__label { right: 0; bottom: 0; align-items: flex-end; max-width: 100%; font-size: .625rem; }
    .generated-image__label-pill { height: 1.125rem; border-radius: var(--radius-sm) 0 0 0; box-shadow: none; }
    .generated-image__label-face { padding-inline: .4rem; }
    .generated-image__label-info, .generated-image__label-long { display: none; }
    .generated-image__label-short { display: inline; }
    .generated-image__label-icon { font-size: .625rem; }
}

/* 다이브오리의 안내(x-public.guide): 지역 카드와 같은 흰 카드에 다이브오리 아이콘·이름표·본문(본문 글자 크기)을 둔다. 구간 제목 아래에서 소개·권유를 건넨다. */
.public-guide { display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-5); text-align: left; }
.public-guide__voice { width: 3rem; height: auto; }
.public-guide__bubble { display: grid; gap: var(--space-2); color: var(--color-text); font-size: var(--font-size-base); line-height: var(--line-height-loose); word-break: keep-all; overflow-wrap: anywhere; }
.public-guide__name { color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); }
/* 좁은 화면은 아이콘 옆에 이름표만 두고 본문은 카드 전체 폭으로 내린다. */
@media (max-width: 39.999rem) {
    .public-guide { align-items: center; gap: var(--space-3); padding: var(--space-4); }
    .public-guide__voice { width: 2.5rem; }
    .public-guide__bubble { display: contents; }
    .public-guide__bubble > :not(.public-guide__name) { grid-column: 1 / -1; }
}

/* 장 목록(x-public.chapters): 히어로 바로 아래 붙은 흰 띠가 헤더 밑에 붙어 따라오는 한 줄. 붙기 전에도 띠(흰 바탕·아래 선)를 그대로 보여 탭 줄로 읽히게 한다.
   지금 장은 물결 밑줄(헤더 현재 메뉴와 같은 시그니처), 아래 진행선은 드라이 장갑 파랑. 넓은 화면은 본문과 같은 왼쪽 선에서 시작한다.
   줄이 넘치면 넘친 쪽(data-more-start·data-more-end) 끝을 피커처럼 옅고 흐리게 하고 가벼운 화살표를 둔다(public.js). */
@property --chapters-fade-start { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --chapters-fade-end { syntax: "<number>"; inherits: true; initial-value: 1; }
.public-chapters { --chapters-fade: 5rem; position: sticky; top: var(--header-height); z-index: calc(var(--z-sticky) - 1); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); box-shadow: 0 2px 6px rgb(23 40 45 / .06); transition: --chapters-fade-start var(--duration-base) var(--ease-standard), --chapters-fade-end var(--duration-base) var(--ease-standard); }
.public-chapters[data-more-start] { --chapters-fade-start: .08; }
.public-chapters[data-more-end] { --chapters-fade-end: .08; }
.public-chapters__rail { position: relative; width: min(100%, var(--container-lg)); margin-inline: auto; }
/* 첫 탭 글자가 본문 왼쪽 선(--gutter)에 서도록 탭 좌우 여백만큼 덜 띄운다. */
.public-chapters__list { display: flex; gap: var(--space-1); overflow-x: auto; padding-inline: calc(var(--gutter) - var(--space-4)); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / var(--chapters-fade-start)), #000 var(--chapters-fade), #000 calc(100% - var(--chapters-fade)), rgb(0 0 0 / var(--chapters-fade-end))); mask-image: linear-gradient(to right, rgb(0 0 0 / var(--chapters-fade-start)), #000 var(--chapters-fade), #000 calc(100% - var(--chapters-fade)), rgb(0 0 0 / var(--chapters-fade-end))); }
.public-chapters__list::-webkit-scrollbar { display: none; }
.public-chapters__list > a { position: relative; display: inline-flex; min-height: var(--chapters-height); flex-shrink: 0; align-items: center; padding: 0 var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.public-chapters__list > a[aria-current]::after { position: absolute; top: var(--wave-line-top); right: var(--space-4); left: var(--space-4); height: .3125rem; background: var(--color-brand); content: ""; -webkit-mask: var(--wave-line); mask: var(--wave-line); }
.public-chapters__list > a[aria-current] { color: var(--color-brand); }
.public-chapters__list > a:focus-visible { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: -2px; }
/* 넘친 쪽 끝: 흐림 막(뒤 글자를 번지게)과 그 위 화살표. 넘치지 않는 쪽은 둘 다 숨기고 누르지 못하게 한다. */
.public-chapters__more { position: absolute; top: 0; bottom: 0; display: inline-flex; width: var(--chapters-fade); align-items: center; border: 0; background: none; padding: 0 var(--space-3); color: var(--color-brand); font-size: var(--font-size-xs); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); cursor: pointer; }
.public-chapters__more--start { left: 0; justify-content: flex-start; -webkit-mask-image: linear-gradient(to left, transparent, #000 70%); mask-image: linear-gradient(to left, transparent, #000 70%); }
.public-chapters__more--end { right: 0; justify-content: flex-end; -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%); }
.public-chapters[data-more-start] .public-chapters__more--start,
.public-chapters[data-more-end] .public-chapters__more--end { opacity: .8; pointer-events: auto; }
.public-chapters__progress { position: absolute; bottom: calc(-1 * var(--border-width)); left: 0; width: 100%; height: 2px; background: var(--color-glove); opacity: 0; transform: scaleX(var(--chapters-progress, 0)); transform-origin: left; transition: opacity var(--duration-base) var(--ease-standard); }
/* 진행선은 장 목록이 헤더 밑에 붙어 따라올 때만 보인다(맨 위에서는 0이라 그리지 않는다). */
.public-chapters[data-stuck] > .public-chapters__progress { opacity: 1; }
@media (hover: hover) {
    .public-chapters__list > a:not([aria-current]):hover { color: var(--color-brand); }
    .public-chapters__more:hover { opacity: 1; }
}

/* 구간 안 주제 탭(x-public.tabs): 알약 모양 탭을 골라 패널 하나만 본다. 좁은 화면에서는 탭 줄을 가로로 넘기고, 넓은 화면에서는 줄을 바꿔 모두 보인다.
   패널 교차 전환은 app.js DiveoryTabs, 고른 탭을 탭 줄 가운데로 미는 것은 public.js. */
.public-tabs { min-width: 0; }
.public-tabs__list { position: relative; display: flex; gap: var(--space-2); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-1) var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.public-tabs__list::-webkit-scrollbar { display: none; }
.public-tabs__list > :is(button, a) { display: inline-flex; min-height: var(--control-height); flex-shrink: 0; align-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); padding: 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); white-space: nowrap; transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.public-tabs__list > button[aria-selected="true"], .public-tabs__list > a[aria-current="page"] { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-surface); }
.public-tabs__list > :is(button, a):focus-visible { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: 2px; }
.public-tabs__stage { position: relative; overflow: clip; overflow-clip-margin: var(--space-3); margin-top: var(--space-4); }
.public-tabs__panel { min-width: 0; }
.public-tabs__panel:focus { outline: none; }
.public-tabs__panel.is-leaving { position: absolute; inset: 0 0 auto; pointer-events: none; }
@media (hover: hover) {
    .public-tabs__list > button[aria-selected="false"]:hover, .public-tabs__list > a:not([aria-current]):hover { border-color: var(--color-brand-mid); color: var(--color-brand); }
}
@media (min-width: 64rem) {
    .public-tabs__list { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}



/* 공개 서브페이지(여행·준비·다이브오리)의 구간 리듬: 가운데 본문 줄, 구간 사이 여백, 구간 제목·eyebrow·본문 문단. 떠 있는 구간 목차의 이동 대상은 헤더 아래에 멈춘다. */

.public-content { min-height: 70svh; padding-bottom: var(--space-20); }

.public-content [id] { scroll-margin-top: var(--space-24); }

.public-content__inner { width: min(100%, var(--container-lg)); margin: clamp(var(--space-12), 6vw, var(--space-20)) auto 0; padding-inline: var(--gutter); }

.public-content__section { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }

/* 구간 머리(x-public.section-head): eyebrow → 제목 → 설명(또는 다이브오리 안내)을 아래 카드·목록·FAQ와 같은 왼쪽 선에 둔다(2026-10-30 읽기 흐름 개편:
   읽는 구간은 왼쪽, 행동을 권하는 끝맺음·다음 단계 카드만 가운데). 제목 줄은 너무 길지 않게 본문 폭(container-md)까지만 쓴다.
   머리와 본문 사이 간격은 머리의 아래 여백 하나가 맡는다. 머리 뒤에 숨은 요소(여행 메인 분위기 결과 안내)가 와도 간격이 같도록 다음 형제 선택자 대신 아래 여백을 쓰고, 본문 부품은 위 여백을 두지 않는다. */
.public-section-head { display: grid; justify-items: start; margin-bottom: var(--space-6); }
.public-section-head > .section-eyebrow-caps { margin-bottom: var(--space-3); color: var(--color-brand); }
.public-section-head > :is(h1, h2) { width: 100%; max-width: var(--container-md); min-width: 0; color: var(--color-text); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); text-wrap: balance; }
.public-section-head > .public-guide { margin-top: var(--space-5); }
/* 구간 설명 한 줄(말풍선 없이): 다이브오리 안내 말풍선은 한 페이지에 한 번(guide prop)만 쓰고, 나머지 구간은 이 문단으로 둔다. */
.public-section-head__lead { 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; }
.public-section-head__lead > p + p { margin-top: var(--space-2); }


/* 공개 카드(.public-card): 여행 지역·현지 정보, 다이브오리 소개가 함께 쓴다. 그림 면과 본문이 넓은 화면에서 마주 보고, 휴대폰에서는 그림 아래로 본문이 이어진다.
   그림 면은 생성 이미지, 이미지가 없는 주제의 아이콘 면(--icon), 서비스 예시를 띄운 면(--preview) 중 하나다. --content-first는 넓은 화면에서 본문을 왼쪽에 둔다(글이 주인공인 준비·소개). */
.public-card { display: grid; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); scroll-margin-top: var(--space-24); }
.public-card__figure { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-brand-soft); }
.public-card__figure .generated-image { height: 100%; border-radius: 0; }
.public-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.public-card__figure--icon { display: grid; place-items: center; background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--color-brand-light) 45%, transparent), transparent 55%), linear-gradient(160deg, var(--color-brand-soft), color-mix(in srgb, var(--color-brand-light) 40%, var(--color-brand-soft))); color: var(--color-brand); }
.public-card__figure--icon > .icon { font-size: clamp(4rem, 9vw, 6.5rem); filter: drop-shadow(0 .75rem 1.5rem color-mix(in srgb, var(--color-brand) 22%, transparent)); }
.public-card__figure--preview { display: grid; align-items: center; aspect-ratio: auto; background: linear-gradient(160deg, var(--color-brand-soft), color-mix(in srgb, var(--color-brand-light) 35%, var(--color-brand-soft))); padding: clamp(var(--space-5), 4vw, var(--space-10)); }
.public-card__body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
.public-card__body > .section-eyebrow-caps { color: var(--color-brand); }
.public-card__body 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; }
.public-card__body > p { color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.public-card__body > .public-card__hook { color: var(--color-brand); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); }
/* 한 문장으로 요점을 말하는 카드의 첫 문단. 본문보다 크고 진하게 둔다. */
.public-card__body > .public-card__lead { color: var(--color-text); font-size: var(--font-size-lg); line-height: var(--line-height-loose); }
.public-card__memo { display: grid; width: 100%; gap: var(--space-3); font-size: var(--font-size-sm); }
/* 본문 문단 뒤의 메모만 구분선으로 나눈다. 제목 바로 아래 메모(날씨·식사)는 선 없이 이어진다. */
.public-card__body > p + .public-card__memo { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); }
.public-card__memo > div { display: grid; gap: var(--space-1); }
.public-card__memo dt { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.public-card__memo dd { color: var(--color-text-secondary); line-height: var(--line-height-loose); }
/* 이동 카드의 소제목(다이빙 거점까지·관광·쇼핑): 앞 내용과 구분선으로 나누고, 경로마다 공식 안내 링크를 붙인다. */
.public-card__subhead { width: 100%; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.public-card__route-link { color: var(--color-brand); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
/* 현지 정보의 '그럼 챙길 것': 본문(현지에선 이게 보통) 다음에 연한 면으로 묶는다. 자세한 체크는 같은 화면의 준비 체크리스트다. */
.public-card__prep { display: grid; width: 100%; justify-items: start; gap: var(--space-2); border-radius: var(--radius-md); background: var(--color-brand-soft); padding: var(--space-4); font-size: var(--font-size-sm); }
.public-card__prep p { color: var(--color-text-secondary); line-height: var(--line-height-loose); }
.public-card__prep strong { display: block; margin-bottom: var(--space-1); color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.public-card__body > .public-card__note { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-body); }
.public-card__body > .text-link { font-size: var(--font-size-sm); }
.public-card__body > .public-source-note { margin-top: auto; padding-top: var(--space-2); }
@media (min-width: 40rem) {
    .public-card__body { padding: var(--space-6); }
}
@media (min-width: 64rem) {
    /* 그림 면과 본문은 반반이다. 같은 화면의 두 칸 카드(지역 카드 등)와 나뉘는 선이 같은 세로줄에 온다. */
    .public-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-card__figure { min-height: 22rem; aspect-ratio: auto; }
    .public-card--content-first > .public-card__figure { order: 2; }
    .public-card--content-first > .public-card__body { justify-content: center; padding: var(--space-10); }
    /* 그림 면 없이 본문만 있는 카드(교육 과정 확인 화면): 넓은 화면에서도 한 칸이다. */
    .public-card--text { grid-template-columns: minmax(0, 1fr); }
}

/* 마주 보는 글 카드 한 쌍(.public-card-pair, 배우기 종목 비교·다이브오리 다이버/강사): 휴대폰은 위아래, 태블릿부터 두 칸.
   같은 줄이 같은 높이에 오도록 카드를 늘리고, 메모가 남는 높이를 채워 끝 버튼이 바닥에 맞는다. */
.public-card-pair { display: grid; gap: var(--space-4); }
.public-card-pair > .public-card > .public-card__body { height: 100%; }
.public-card-pair .public-card__memo { flex: 1; align-content: start; }
.public-card-pair__action { margin-top: var(--space-2); }
@media (min-width: 48rem) {
    .public-card-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 구간 끝의 짧은 한계 안내(.public-note): 찾기 목록의 정렬·보증 안내, 배우기의 교육 대체 불가 안내, 다이브오리의 찾기 안내. */
.public-note { max-width: var(--container-md); margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); word-break: keep-all; }

/* 강사에 대해 확인된 사실(x-instructor.facts): 강사 찾기·투어 찾기 카드, 투어 공유 화면의 강사 카드. 배지는 같은 무게로 줄 바꿈해 늘어놓는다. */
.instructor-facts { display: grid; min-width: 0; gap: var(--space-2); }
.instructor-facts__badges { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; }
.instructor-facts__activity { display: inline-flex; align-items: baseline; gap: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-body); }
.instructor-facts__activity > .icon { color: var(--color-text-muted); }

/* 번호 단계 카드(.public-steps): 준비 순서·배우는 순서. 휴대폰·태블릿은 한 줄에 하나, 넓은 화면은 단계 수만큼 한 줄에 놓는다. */
.public-steps { display: grid; gap: var(--space-4); counter-reset: public-steps; list-style: none; }
.public-steps > li { min-width: 0; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-5); counter-increment: public-steps; }
.public-steps > li::before { display: block; color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; content: counter(public-steps, decimal-leading-zero); }
.public-steps :is(h3, h4) { 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); word-break: keep-all; }
.public-steps p { margin-top: var(--space-2); color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.public-steps .public-steps__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.public-steps__links > .text-link { display: inline-flex; min-height: var(--control-height-sm); align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
@media (min-width: 64rem) {
    .public-steps { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
}

/* 자주 묻는 질문(x-public.faq-section → x-public.faq): 여행 첫 화면·나라 가이드·다이브오리 소개가 같은 구간을 쓴다.
   질문마다 흰 카드(물속 그림자)이고 앞에 Q 표시를 둔다. 답은 질문 글자와 같은 왼쪽 선에서 시작한다.
   넓은 화면(64rem~)은 왼쪽에 구간 머리, 오른쪽에 카드를 두어 본문 폭을 비우지 않는다. */
.public-faq { --faq-pad: var(--space-5); --faq-mark: 1.75rem; display: grid; gap: var(--space-3); }
.public-faq > details { border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); }
.public-faq > details > summary { display: grid; min-height: 4rem; grid-template-columns: var(--faq-mark) minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); border-radius: inherit; padding: var(--space-4) var(--faq-pad); color: var(--color-text); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); word-break: keep-all; cursor: pointer; list-style: none; }
.public-faq > details > summary::-webkit-details-marker { display: none; }
.public-faq > details > summary::before { align-self: start; color: var(--color-brand); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-body); content: "Q"; }
.public-faq > details > summary:focus-visible { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: 2px; }
.public-faq > details > summary > .icon { flex-shrink: 0; color: var(--color-brand); transition: transform var(--duration-base) var(--ease-standard); }
.public-faq > details[open] > summary > .icon { transform: rotate(180deg); }
.public-faq > details > div { display: grid; gap: var(--space-3); padding: 0 var(--faq-pad) var(--faq-pad) calc(var(--faq-pad) + var(--faq-mark) + var(--space-2)); color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
@media (hover: hover) {
    .public-faq > details > summary:hover { color: var(--color-brand); }
}
@media (max-width: 39.999rem) {
    .public-faq { --faq-pad: var(--space-4); --faq-mark: 1.25rem; }
}
@media (min-width: 64rem) {
    .public-faq-section { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; column-gap: clamp(var(--space-10), 5vw, var(--space-16)); }
    .public-faq-section > .public-section-head { margin-bottom: 0; }
}

/* 구간 끝의 행동 카드(.public-ending, 준비 저장하기·다이브오리 시작하기): 나침반 시그니처 아래 가운데 정렬로 제목·안내·버튼을 모은다.
   --aside는 만들면 생기는 결과를 옆에 보이는 2단(글 __copy·입력 __form 왼쪽, 미리보기 __aside 오른쪽, 좁은 화면은 글 → 미리보기 → 입력). */
.public-ending { display: grid; justify-items: center; gap: var(--space-4); margin-top: var(--space-10); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: clamp(var(--space-6), 5vw, var(--space-16)) clamp(var(--space-5), 4vw, var(--space-12)); text-align: center; }
:is(.public-ending, .public-ending__copy) > .section-ending-signature { margin-bottom: calc(var(--section-ending-gap) - var(--space-4)); }
:is(.public-ending, .public-ending__copy) > .section-eyebrow-caps { color: var(--color-brand); }
.public-ending h2 { color: var(--color-text); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); text-wrap: balance; }
:is(.public-ending, .public-ending__copy) > p:not(.section-eyebrow-caps, .form-alert) { max-width: var(--container-md); color: var(--color-text-secondary); line-height: var(--line-height-loose); word-break: keep-all; }
.public-ending > .form-alert { max-width: var(--container-md); text-align: left; }
.public-ending__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
:is(.public-ending, .public-ending__form) > .public-ending__note { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.public-ending > .text-link { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.public-ending--aside { grid-template-areas: "copy" "aside" "form"; justify-items: stretch; gap: var(--space-8); text-align: left; }
.public-ending__copy, .public-ending__form { display: grid; justify-items: start; gap: var(--space-4); }
.public-ending__copy { grid-area: copy; }
.public-ending__form { grid-area: form; }
.public-ending__aside { grid-area: aside; }
.public-ending__copy > .section-ending-signature { margin-inline: 0; }
.public-ending--aside .public-ending__actions { justify-content: flex-start; }
@media (min-width: 56rem) {
    .public-ending--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy aside" "form aside"; column-gap: clamp(var(--space-10), 5vw, var(--space-16)); row-gap: var(--space-6); }
    .public-ending--aside > .public-ending__copy { align-self: end; }
    .public-ending--aside > .public-ending__form { align-self: start; }
    .public-ending--aside > .public-ending__aside { align-self: center; }
}
/* 끝맺음 아래 이어 볼 곳(페이지 끝 '이어서 보기'): 다음 단계 카드를 따로 두지 않고 끝맺음 안에 링크 줄로 둔다. */
.public-ending__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); }
.public-ending__links > .text-link { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
@media (max-width: 39.999rem) {
    .public-ending__actions { width: 100%; flex-direction: column; }
    .public-ending__actions .btn { width: 100%; }
}



/* 출처 한 줄(x-public.source-note): 카드·FAQ 맨 아래에 작게 둔다. "출처" 라벨만 한 단계 진하게. */

.public-source-note { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-body); }
.public-source-note__label { margin-right: .25em; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }

.public-source-note > a { color: var(--color-brand); text-decoration: underline; text-underline-offset: .2em; }