@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* =========================================================
   (주)요트탈래 — 요트투어 공식 홈페이지
   컬러: 02_브랜드기준/디자인시스템/00_공통/컬러시스템.md
   사진 위 텍스트: .claude/회사서식/디자인표준.md §2 확정 방식
   ========================================================= */

:root{
  /* 브랜드 코어 */
  --brand-red:#E60012; --brand-charcoal:#3E3A39; --brand-gray:#585757; --brand-white:#fff;
  /* 예약 버튼 대표색 */
  --book:#2E9BEE;
  /* 오션 램프 */
  --ocean-50:#EAF8FF; --ocean-100:#D6EFFB; --ocean-200:#A9DFF7; --ocean-300:#64CFFF;
  --ocean-400:#2E9BEE; --ocean-500:#0F7BD6; --ocean-600:#065CB0; --ocean-700:#084A8C;
  --ocean-800:#08325E; --ocean-900:#012246;
  /* 뉴트럴 */
  --gray-50:#F7F8F9; --gray-100:#F2F3F5; --gray-300:#D9DBDF; --gray-500:#8B8B8B;
  --gray-700:#585757; --gray-900:#3E3A39;
  /* 시간대 */
  --sun-yellow:#FFE24A;
  --sunset-cream:#FFE9A8; --sunset-gold:#F5C445; --sunset-amber:#FF9A4D;
  --sunset-coral:#FF6172; --sunset-plum:#7A3B6E;
  --night-abyss:#010F2B; --night-cyan:#4FE3FF; --night-gold:#FFC94A;
  /* 시맨틱 */
  --success:#1BA637; --warning:#F5C445; --danger:#E60012; --info:#2E9BEE;

  --wrap:1280px;
  --head-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--gray-900);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
.wrap{width:min(100% - 48px, var(--wrap)); margin-inline:auto}
section[id],nav[id]{scroll-margin-top:92px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.en{font-family:Pretendard,sans-serif; letter-spacing:-.02em}

/* ── 공통 섹션 헤더 ───────────────────────────────── */
.sec{padding:96px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px}
.sec-eyebrow{
  display:block; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ocean-400); margin-bottom:10px;
}
.sec-title{font-size:38px; font-weight:900; letter-spacing:-.04em; line-height:1.2}
.sec-title em{font-style:normal; color:var(--ocean-600)}
.sec-desc{margin-top:12px; color:var(--gray-700); font-size:16px}
.more{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--gray-700);
  border:1px solid var(--gray-300); border-radius:999px; padding:9px 18px; transition:.2s var(--ease); white-space:nowrap;
}
.more:hover{border-color:var(--ocean-600); color:var(--ocean-600); background:var(--ocean-50)}
.more::after{content:""; width:6px; height:6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg)}

/* ── 상단 유틸바 ─────────────────────────────────── */
.util{background:var(--gray-900); color:#fff; font-size:13px}
.util .wrap{display:flex; align-items:center; justify-content:space-between; height:38px}
.util-left{display:flex; align-items:center; gap:18px; color:#cfcfcf}
.util-left strong{color:#fff; font-weight:700}
.util-right{display:flex; align-items:center; gap:0}
.util-right a{padding:0 14px; color:#cfcfcf; position:relative; transition:color .2s}
.util-right a+a::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:11px; background:#5a5a5a}
.util-right a:hover{color:#fff}
.util-right a.hl{color:var(--sun-yellow); font-weight:700}

/* ── 헤더 / GNB ──────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--gray-300);
}
.head .wrap{display:flex; align-items:center; gap:40px; height:var(--head-h)}
.logo{flex:none}
.logo img{height:30px; width:auto}
.gnb{flex:1}
.gnb > ul{display:flex; gap:8px}
.gnb > ul > li{position:relative}
.gnb > ul > li > a{
  display:block; padding:0 20px; line-height:var(--head-h); font-size:17px; font-weight:700; letter-spacing:-.03em;
  position:relative;
}
.gnb > ul > li > a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:3px; background:var(--brand-red);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.gnb > ul > li:hover > a::after{transform:scaleX(1)}
.gnb > ul > li:hover > a{color:var(--brand-red)}
.submenu{
  position:absolute; left:0; top:100%; min-width:170px; background:#fff; border:1px solid var(--gray-300); border-top:none;
  box-shadow:0 18px 40px rgba(1,34,70,.08);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:50;
}
.gnb > ul > li:hover > .submenu, .gnb > ul > li:focus-within > .submenu, .gnb > ul > li.open > .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.gnb > ul > li.open > a{color:var(--brand-red)}
.gnb > ul > li.open > a::after{transform:scaleX(1)}
.submenu a{display:block; padding:9px 22px; font-size:15px; color:var(--gray-700); white-space:nowrap}
.submenu a:hover{color:var(--brand-red); font-weight:700; background:var(--gray-100)}
.head-act{display:flex; align-items:center; gap:10px; flex:none}
.btn-book{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; border-radius:999px;
  background:var(--book); color:#fff; font-weight:800; font-size:15px; letter-spacing:-.02em;
  box-shadow:0 6px 16px rgba(46,155,238,.34); transition:.2s var(--ease);
}
.btn-book:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(46,155,238,.42)}
.icon-btn{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--gray-300); border-radius:50%}
.icon-btn:hover{border-color:var(--ocean-600); color:var(--ocean-600)}
.nav-toggle{display:none}   /* 데스크톱: 숨김 · 모바일(≤1024)에서 노출 */

/* ── 모바일 메뉴 패널 ────────────────────────────── */
.mnav{position:fixed; inset:0; z-index:200}
.mnav[hidden]{display:none}
.mnav-dim{position:absolute; inset:0; background:rgba(1,34,70,.5); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s var(--ease)}
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,84vw);
  background:#fff; box-shadow:-18px 0 46px rgba(1,34,70,.24);
  display:flex; flex-direction:column; padding:20px 24px 32px;
  transform:translateX(100%); transition:transform .32s var(--ease); overflow-y:auto;
}
.mnav.on .mnav-dim{opacity:1}
.mnav.on .mnav-panel{transform:none}
.mnav-top{display:flex; align-items:center; justify-content:space-between; height:44px; margin-bottom:14px}
.mnav-logo{font-size:14px; font-weight:900; letter-spacing:.16em; color:var(--ocean-600)}
.mnav-close{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--gray-300); color:var(--gray-700)}
.mnav-close:hover{border-color:var(--ocean-600); color:var(--ocean-600)}
.mnav-links{display:flex; flex-direction:column; border-top:1px solid var(--gray-300)}
.mnav-links a{padding:16px 4px; font-size:17px; font-weight:700; letter-spacing:-.03em; border-bottom:1px solid var(--gray-300)}
.mnav-links a:hover{color:var(--brand-red)}
.mnav-sub{display:flex; flex-direction:column; background:var(--gray-100); border-bottom:1px solid var(--gray-300)}
.mnav-links .mnav-sub a{padding:12px 4px 12px 16px; font-size:15px; font-weight:600; color:var(--gray-700); border-bottom:0}
.mnav-book{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; height:52px; border-radius:999px;
  background:var(--book); color:#fff; font-weight:800; font-size:16px; box-shadow:0 6px 16px rgba(46,155,238,.34);
}
.mnav-lang{display:flex; gap:8px; margin-top:18px}
.mnav-lang a{flex:1; text-align:center; padding:10px 0; border:1px solid var(--gray-300); border-radius:6px; font-size:13px; font-weight:700; color:var(--gray-700)}
.mnav-lang a:hover{border-color:var(--ocean-600); color:var(--ocean-600)}
.mnav-cs{margin-top:auto; padding-top:22px; font-size:13.5px; color:var(--gray-500); line-height:1.7}
.mnav-cs strong{color:var(--ocean-700); font-weight:800; font-size:17px}

/* ── 서브페이지 타이틀 밴드 ──────────────────────── */
.page-band{background:linear-gradient(100deg,var(--ocean-800),var(--ocean-500)); color:#fff; padding:44px 0 40px}
.page-band .crumb{font-size:13px; font-weight:600; color:rgba(255,255,255,.78); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.page-band .crumb a{color:rgba(255,255,255,.78)}
.page-band .crumb a:hover{color:#fff}
.page-band .crumb span{opacity:.6}
.page-band h1{margin-top:12px; font-size:36px; font-weight:900; letter-spacing:-.04em; line-height:1.15}
.page-band .lead{margin-top:12px; font-size:16px; color:rgba(255,255,255,.82); max-width:680px; line-height:1.6}

/* ── 메인 개요 카드 ──────────────────────────────── */
.ovw{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.ovw.ovw-4{grid-template-columns:repeat(4,1fr)}
.ovw .tcard{display:flex; flex-direction:column}
.ovw .body{display:flex; flex-direction:column; flex:1}
.ovw .go{margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:var(--ocean-600)}
.ovw .go::after{content:""; width:6px; height:6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg)}
.ovw .tcard:hover .go{color:var(--brand-red)}

/* ── CTA 밴드 ────────────────────────────────────── */
.ctaband{background:linear-gradient(110deg,var(--ocean-700),var(--ocean-500)); color:#fff; padding:66px 0; text-align:center}
.ctaband h2{font-size:clamp(26px,3vw,38px); font-weight:900; letter-spacing:-.04em}
.ctaband p{margin-top:14px; font-size:16px; color:rgba(255,255,255,.85)}
.ctaband .hero-cta{justify-content:center; margin-top:28px}

/* ── 요금표 ──────────────────────────────────────── */
.fare-wrap{overflow-x:auto; border:1px solid var(--ocean-200); border-radius:8px}
.fare{width:100%; border-collapse:collapse; min-width:540px; background:#fff; font-size:15px}
.fare th,.fare td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--ocean-100)}
.fare thead th{background:var(--ocean-600); color:#fff; font-weight:800; letter-spacing:-.02em; border-bottom:0}
.fare tbody tr:last-child td{border-bottom:0}
.fare tbody tr:hover{background:var(--ocean-50)}
.fare td:first-child{font-weight:800; letter-spacing:-.03em}
.fare .won{font-weight:900; color:var(--ocean-700); font-size:17px; letter-spacing:-.02em; white-space:nowrap}
.fare-note{margin-top:16px; font-size:14px; color:var(--gray-700); line-height:1.7}

/* ── 히어로 슬라이더 ─────────────────────────────── */
.hero{position:relative; height:clamp(560px, 82vh, 820px); overflow:hidden; background:var(--ocean-900)}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); pointer-events:none}
.hero-slide.on{opacity:1; pointer-events:auto}
.hero-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  filter:saturate(1.16) contrast(1.05);            /* 디자인표준 §2-3 */
  transform:scale(1.06); transition:transform 7s linear;
}
.hero-slide.on img{transform:scale(1)}
/* 스크림: 어두운 네이비 아님 — 채도 높은 코발트 (디자인표준 §2-1)
   웹 히어로는 카피가 좌측이라 세로가 아닌 '좌→우' 방향으로 건다.
   오른쪽(요트·바다)은 원본 채도 그대로 남겨 「요트는 하얗게」를 지킨다. */
.hero-slide::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg, rgba(6,92,176,.74) 0%, rgba(6,92,176,.52) 26%, rgba(6,92,176,.18) 46%, rgba(6,92,176,0) 62%);
}
.hero-slide::after{
  content:""; position:absolute; inset:auto 0 0 0; height:30%; z-index:1;
  background:linear-gradient(0deg, rgba(1,34,70,.5) 0%, rgba(1,34,70,0) 100%);
}
.hero-slide[data-theme="sunset"]::before{background:linear-gradient(96deg, rgba(122,59,110,.72) 0%, rgba(122,59,110,.46) 26%, rgba(8,50,94,.16) 46%, rgba(8,50,94,0) 62%)}
.hero-slide[data-theme="night"]::before{background:linear-gradient(96deg, rgba(1,34,70,.82) 0%, rgba(1,34,70,.56) 26%, rgba(1,15,43,.2) 46%, rgba(1,15,43,0) 62%)}

.hero-copy{position:absolute; inset:0; z-index:2; display:flex; align-items:center}
.hero-copy .wrap{width:min(100% - 48px, var(--wrap))}
.hero-bar{display:flex; gap:22px}
.hero-bar::before{content:""; width:10px; border-radius:2px; background:var(--sun-yellow); flex:none}
.hero-slide[data-theme="sunset"] .hero-bar::before{background:var(--sunset-gold)}
.hero-slide[data-theme="night"] .hero-bar::before{background:var(--night-gold)}
.hero-tag{
  display:inline-block; margin-bottom:18px; padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; backdrop-filter:blur(4px);
}
.hero-en{
  color:#fff; font-size:clamp(44px, 6.2vw, 92px); font-weight:900; text-transform:uppercase;
  letter-spacing:-.035em; line-height:.94;
  text-shadow:0 0 34px rgba(0,24,54,.85), 0 0 16px rgba(0,24,54,.75), 0 6px 20px rgba(0,24,54,.6);
}
.hero-en span{color:var(--sun-yellow)}
.hero-slide[data-theme="sunset"] .hero-en span{color:var(--sunset-cream)}
.hero-slide[data-theme="night"] .hero-en span{color:var(--night-gold)}
.hero-ko{
  margin-top:22px; color:#fff; font-size:clamp(17px, 1.5vw, 22px); font-weight:700; line-height:1.5;
  text-shadow:0 0 26px rgba(0,24,54,.85), 0 3px 12px rgba(0,24,54,.7);
}
.hero-cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero-cta a{
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 30px; border-radius:999px;
  font-weight:800; font-size:16px; transition:.22s var(--ease);
}
.hero-cta .primary{background:var(--book); color:#fff; box-shadow:0 10px 26px rgba(46,155,238,.42)}
.hero-slide[data-theme="sunset"] .hero-cta .primary{background:#fff; color:var(--book); box-shadow:0 10px 26px rgba(0,0,0,.24)}
.hero-cta .ghost{border:1.5px solid rgba(255,255,255,.75); color:#fff; backdrop-filter:blur(4px)}
.hero-cta a:hover{transform:translateY(-3px)}

.hero-nav{
  position:absolute; z-index:3; left:0; right:0; bottom:112px;
  display:flex; justify-content:flex-end;
}
.hero-nav .wrap{display:flex; justify-content:flex-end; align-items:center; gap:10px}
.hero-dots{
  display:flex; gap:16px; padding:12px 20px 6px; border-radius:10px;
  background:rgba(1,34,70,.42); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16);
}
.hero-dots button{
  color:rgba(255,255,255,.68); font-size:14px; font-weight:800; letter-spacing:.04em; padding-bottom:8px;
  border-bottom:2px solid rgba(255,255,255,.3); transition:.25s var(--ease);
  text-shadow:0 2px 8px rgba(0,24,54,.6);
}
.hero-dots button.on{color:#fff; border-bottom-color:var(--sun-yellow)}
.hero-ctrl{
  display:flex; align-items:center; gap:6px; color:#fff; padding:6px; border-radius:999px;
  background:rgba(1,34,70,.42); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16);
}
.hero-ctrl button{width:34px; height:34px; border:1px solid rgba(255,255,255,.38); border-radius:50%; display:grid; place-items:center}
.hero-ctrl button:hover{background:rgba(255,255,255,.2)}

/* ── 오늘의 일몰 바 ──────────────────────────────── */
/* 선셋투어 문의가 가장 많은 정보라 별도 바로 분리. 값은 좌표 계산(외부 API 없음) */
/* 히어로 위로 올라타는 흰 카드. 어두운 사진 하단에 어두운 바를 붙이면 사진에 묻혀서
   보이지 않는다(초판 실패). 예약바가 쓰던 자리·명도 대비를 그대로 가져온다. */
.sunsetbar{position:relative; z-index:20; margin-top:-78px}
.sb-card{
  background:#fff; border-radius:6px; border-left:5px solid var(--sunset-gold);
  box-shadow:0 22px 50px rgba(1,34,70,.20);
  display:flex; align-items:center; gap:34px; padding:24px 30px 24px 32px; flex-wrap:wrap;
}
.sb-now{flex:none}
.sb-label{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:800; letter-spacing:-.03em; color:var(--sunset-plum);
}
.sb-label em{font-style:normal; font-size:13px; font-weight:600; color:var(--gray-500); letter-spacing:0}
.sb-main{display:flex; align-items:baseline; gap:12px; margin-top:6px}
.sb-time{font-size:52px; font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--ocean-900)}
.sb-sub{font-size:13px; color:var(--gray-500)}
.sb-depart{
  display:flex; align-items:baseline; gap:10px; flex:1;
  padding-left:34px; border-left:1px solid var(--gray-300);
}
.sb-depart b{font-size:13.5px; font-weight:700; color:var(--ocean-600)}
.sb-depart strong{font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--gray-900)}
.sb-depart span{font-size:13.5px; color:var(--gray-500)}
.sb-depart span.soon{color:var(--brand-red); font-weight:800}
.sb-cta{
  flex:none; display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 26px; border-radius:999px;
  background:var(--book); color:#fff; font-size:15.5px; font-weight:800;
  box-shadow:0 6px 16px rgba(46,155,238,.34); transition:.2s var(--ease);
}
.sb-cta:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(46,155,238,.42)}

/* ── 퀵메뉴 ──────────────────────────────────────── */
.quick{padding:64px 0 8px}
.quick ul{display:grid; grid-template-columns:repeat(8,1fr); gap:12px}
.quick a{
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 8px; border-radius:8px;
  border:1px solid transparent; transition:.24s var(--ease);
}
.quick a:hover{border-color:var(--ocean-200); background:var(--ocean-50); transform:translateY(-4px)}
.quick .ico{width:58px; height:58px; border-radius:50%; background:var(--ocean-50); display:grid; place-items:center; color:var(--ocean-600); transition:.24s var(--ease)}
.quick a:hover .ico{background:var(--ocean-600); color:#fff}
.quick span{font-size:15px; font-weight:700; letter-spacing:-.03em; text-align:center}

/* ── 시간대별 3 PICK ─────────────────────────────── */
.picks{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.pick{position:relative; border-radius:8px; overflow:hidden; isolation:isolate; background:var(--ocean-900)}
.pick img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(1.12); transition:transform .7s var(--ease)}
.pick:hover img{transform:scale(1.06)}
.pick::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(1,34,70,.88) 0%, rgba(1,34,70,.35) 42%, rgba(6,92,176,.06) 72%, rgba(6,92,176,.22) 100%);
}
.pick-body{position:absolute; inset:auto 0 0 0; z-index:2; padding:32px 30px; color:#fff}
.pick-no{font-size:13px; font-weight:900; letter-spacing:.16em; color:var(--sun-yellow); margin-bottom:12px; display:block}
.pick[data-theme="sunset"] .pick-no{color:var(--sunset-gold)}
.pick[data-theme="night"] .pick-no{color:var(--night-gold)}
.pick h3{font-size:28px; font-weight:900; letter-spacing:-.04em; line-height:1.2;
  text-shadow:0 0 24px rgba(0,24,54,.7), 0 3px 12px rgba(0,24,54,.6)}
.pick h3 em{font-style:normal; display:block; font-size:13px; font-weight:800; letter-spacing:.14em; opacity:.85; margin-bottom:8px}
.pick p{margin-top:12px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.88);
  text-shadow:0 2px 10px rgba(0,24,54,.6)}
.pick-meta{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.pick-meta span{font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3)}
.pick-price{display:flex; align-items:baseline; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22)}
.pick-price strong{font-size:26px; font-weight:900; letter-spacing:-.03em}
.pick-price small{font-size:13px; color:rgba(255,255,255,.7)}
.pick-price .go{margin-left:auto; font-size:14px; font-weight:800; display:inline-flex; align-items:center; gap:6px}
.pick-price .go::after{content:""; width:6px; height:6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg)}

/* ── 어드벤처 밴드 ───────────────────────────────── */
.adv{position:relative; overflow:hidden; background:var(--ocean-900)}
.adv img{width:100%; height:420px; object-fit:cover; object-position:center 40%; filter:saturate(1.12)}
.adv::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(1,34,70,.86) 0%, rgba(1,34,70,.55) 46%, rgba(1,34,70,.06) 100%)}
.adv-copy{position:absolute; inset:0; z-index:2; display:flex; align-items:center}
.adv-badge{display:inline-block; background:var(--brand-red); color:#fff; font-size:12px; font-weight:900; letter-spacing:.1em; padding:6px 14px; border-radius:999px; margin-bottom:18px}
.adv h2{color:#fff; font-size:clamp(32px,3.6vw,52px); font-weight:900; letter-spacing:-.04em; line-height:1.08;
  text-shadow:0 0 30px rgba(0,24,54,.8), 0 4px 16px rgba(0,24,54,.6)}
.adv p{color:rgba(255,255,255,.9); margin-top:16px; font-size:17px; font-weight:600; max-width:520px;
  text-shadow:0 2px 12px rgba(0,24,54,.7)}
.adv .hero-cta{margin-top:28px}

/* ── 테마 탭 ─────────────────────────────────────── */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px}
.tabs button{
  padding:11px 24px; border-radius:999px; border:1px solid var(--gray-300); font-size:15px; font-weight:700;
  color:var(--gray-700); transition:.2s var(--ease);
}
.tabs button:hover{border-color:var(--ocean-400); color:var(--ocean-600)}
.tabs button.on{background:var(--gray-900); border-color:var(--gray-900); color:#fff}
.theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.theme-grid[hidden]{display:none}
.tcard{border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; transition:.25s var(--ease); background:#fff}
.tcard:hover{transform:translateY(-6px); border-color:var(--ocean-300); box-shadow:0 18px 34px rgba(1,34,70,.1)}
.tcard .thumb{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--gray-100)}
.tcard img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.tcard:hover img{transform:scale(1.07)}
.tcard .cat{position:absolute; left:12px; top:12px; background:rgba(1,34,70,.72); color:#fff; font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; z-index:2}
.tcard .body{padding:20px 20px 22px}
.tcard h3{font-size:19px; font-weight:800; letter-spacing:-.035em}
.tcard p{margin-top:8px; font-size:14.5px; color:var(--gray-700); line-height:1.55}
.tcard .tag{margin-top:14px; display:flex; gap:6px; flex-wrap:wrap}
.tcard .tag span{font-size:12px; font-weight:700; color:var(--ocean-600); background:var(--ocean-50); padding:4px 10px; border-radius:4px}

/* ── 운항 코스 ───────────────────────────────────── */
.course{background:var(--gray-50)}
.course-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.course-map{border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; background:#fff}
.route{position:relative; padding-left:34px}
.route::before{content:""; position:absolute; left:11px; top:16px; bottom:16px; width:2px; background:linear-gradient(180deg,var(--ocean-300),var(--ocean-600))}
.route li{position:relative; padding:0 0 34px}
.route li:last-child{padding-bottom:0}
.route li::before{
  content:""; position:absolute; left:-29px; top:6px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid var(--ocean-600);
}
.route li::after{content:attr(data-no); position:absolute; left:-29px; top:6px; width:24px; height:24px; display:grid; place-items:center; font-size:11px; font-weight:900; color:var(--ocean-600)}
.route h4{font-size:20px; font-weight:800; letter-spacing:-.035em}
.route h4 span{font-size:13px; font-weight:700; color:var(--ocean-500); margin-left:10px; letter-spacing:0}
.route p{margin-top:6px; font-size:15px; color:var(--gray-700)}
.course-note{margin-top:28px; padding:18px 22px; background:var(--ocean-50); border-left:3px solid var(--ocean-600); border-radius:0 4px 4px 0; font-size:14.5px; color:var(--ocean-800)}

/* ── 무료 서비스 ─────────────────────────────────── */
.svc-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.svc{text-align:center}
.svc .ph{aspect-ratio:1; border-radius:50%; overflow:hidden; border:1px solid var(--gray-300); background:var(--gray-100)}
.svc img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.svc:hover img{transform:scale(1.08)}
.svc strong{display:block; margin-top:16px; font-size:16px; font-weight:800; letter-spacing:-.03em}
.svc span{display:block; margin-top:4px; font-size:13px; color:var(--gray-500)}
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:64px; padding-top:56px; border-top:1px solid var(--gray-300)}
.trust li{display:flex; gap:16px; align-items:flex-start}
.trust .n{flex:none; white-space:nowrap; font-size:34px; font-weight:900; color:var(--ocean-600); letter-spacing:-.04em; line-height:1}
.trust b{display:block; font-size:16px; font-weight:800; letter-spacing:-.03em}
.trust p{font-size:14px; color:var(--gray-700); margin-top:4px}

/* ── 예약 방법 · FAQ ─────────────────────────────── */
.book-guide{background:var(--ocean-50)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:56px; counter-reset:step}
.steps li{
  position:relative; background:#fff; border:1px solid var(--ocean-200); border-radius:8px; padding:32px 30px 30px;
  transition:.25s var(--ease);
}
.steps li:hover{border-color:var(--ocean-500); transform:translateY(-5px); box-shadow:0 18px 34px rgba(1,34,70,.09)}
.steps li:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-35px; width:14px; height:14px; margin-top:-9px;
  border-top:2.5px solid var(--ocean-400); border-right:2.5px solid var(--ocean-400);
  transform:rotate(45deg);
}
.step-no{display:block; font-size:12px; font-weight:900; letter-spacing:.16em; color:var(--brand-red)}
.steps h3{margin-top:12px; font-size:23px; font-weight:900; letter-spacing:-.04em}
.steps p{margin-top:12px; font-size:15px; line-height:1.65; color:var(--gray-700)}
.steps p strong{color:var(--ocean-700); font-weight:800}
.step-tag{display:inline-block; margin-top:18px; font-size:12.5px; font-weight:800; color:var(--ocean-600); background:var(--ocean-50); border:1px solid var(--ocean-200); border-radius:999px; padding:5px 13px}

.steps-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px;
  padding:20px 24px; background:#fff; border:1px solid var(--ocean-200); border-radius:8px;
}
.steps-cta .btn-book{flex:none; height:48px; padding:0 26px; font-size:16px}
.steps-cta span{font-size:14px; color:var(--gray-700); line-height:1.6}

.idlist{margin-top:12px; padding:20px 24px; background:#fff; border:1px solid var(--ocean-200); border-radius:8px}
.idlist h3{font-size:15px; font-weight:800; letter-spacing:-.03em; color:var(--ocean-800); margin:0 0 12px}
.idlist ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.idlist li{display:flex; align-items:baseline; gap:14px}
.idlist .idl{
  flex:none; min-width:96px; padding:4px 10px; border-radius:4px;
  background:var(--ocean-50); color:var(--ocean-800);
  font-size:13px; font-weight:700; letter-spacing:-.02em; text-align:center;
}
.idlist .idv{font-size:14px; color:var(--gray-700); line-height:1.6}
@media (max-width:560px){
  .idlist li{flex-direction:column; gap:6px}
  .idlist .idl{min-width:0}
}

/* 연령 기준 · 인증 가능 신분증 (2단 카드) */
.binfo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; align-items:stretch}
.bcard{background:#fff; border:1px solid var(--ocean-200); border-radius:8px; padding:22px 24px 24px}
.bcard h3{
  margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--ocean-100);
  font-size:15px; font-weight:800; letter-spacing:-.03em; color:var(--ocean-800);
}
.agelist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.agelist li{display:flex; align-items:center; gap:12px}
.agelist .ag{
  flex:none; min-width:54px; padding:6px 0; border-radius:4px;
  background:var(--ocean-800); color:#fff;
  font-size:13px; font-weight:800; letter-spacing:-.02em; text-align:center;
}
.agelist .av{font-size:15px; font-weight:700; letter-spacing:-.03em; color:var(--gray-900)}
.agelist .av em{font-style:normal; font-size:13.5px; font-weight:500; color:var(--gray-500)}
.idlist2{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.idlist2 .idl{
  display:inline-block; margin-bottom:9px; padding:5px 11px; border-radius:4px;
  background:var(--ocean-800); color:#fff;
  font-size:13px; font-weight:800; letter-spacing:-.02em;
}
.idlist2 .idv{display:block; font-size:14px; font-weight:500; letter-spacing:-.02em; line-height:1.7; color:var(--gray-700)}
@media (max-width:900px){
  .binfo{grid-template-columns:1fr}
}

.faq-title{
  margin:56px 0 14px; font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ocean-800);
}
.faq-title + .faq{margin-top:0}
.faq{margin-top:56px; border-top:2px solid var(--ocean-800); scroll-margin-top:100px}
.faq details{border-bottom:1px solid var(--ocean-200)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 48px 22px 42px; position:relative;
  font-size:17px; font-weight:700; letter-spacing:-.03em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; position:absolute; left:6px; top:21px; font-size:17px; font-weight:900; color:var(--ocean-600)}
.faq summary::after{
  content:""; position:absolute; right:14px; top:27px; width:9px; height:9px;
  border-right:2px solid var(--gray-500); border-bottom:2px solid var(--gray-500);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary{color:var(--ocean-700)}
.faq details[open] summary::after{transform:rotate(-135deg); border-color:var(--ocean-600)}
.faq summary:hover{color:var(--ocean-600)}
.faq p{padding:0 48px 26px 42px; font-size:15.5px; line-height:1.75; color:var(--gray-700)}
.faq .fa{padding:0 48px 26px 42px}
.faq .fa p{padding:0; font-size:15.5px; line-height:1.75; color:var(--gray-700)}
.faq .fa p + p{margin-top:10px}
.faq .fa a{color:var(--ocean-600); text-decoration:underline; word-break:break-all}
.faq-page{display:flex; justify-content:center; gap:8px; margin-top:26px}
.faq-page .fp{
  width:38px; height:38px; padding:0; border:1px solid var(--ocean-200); border-radius:6px;
  background:#fff; color:var(--gray-700); font-family:inherit; font-size:14px; font-weight:800;
  cursor:pointer; transition:.2s var(--ease);
}
.faq-page .fp:hover{border-color:var(--ocean-500); color:var(--ocean-700)}
.faq-page .fp.on{background:var(--ocean-800); border-color:var(--ocean-800); color:#fff}

/* ── 후기 + SNS ──────────────────────────────────── */
.reviews{background:var(--ocean-900); color:#fff}
.reviews .sec-title{color:#fff}
.reviews .sec-eyebrow{color:var(--ocean-300)}
.reviews .sec-desc{color:rgba(255,255,255,.7)}
.reviews .more{border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.85)}
.reviews .more:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.rv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.rv{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:28px 26px; transition:.25s var(--ease)}
.rv:hover{background:rgba(255,255,255,.1); transform:translateY(-5px)}
.rv .stars{color:var(--sun-yellow); font-size:15px; letter-spacing:.12em}
.rv h4{margin-top:14px; font-size:18px; font-weight:800; letter-spacing:-.035em}
.rv p{margin-top:10px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.78)}
.rv .who{margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between}
.sns-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:56px}
.sns-grid a{position:relative; aspect-ratio:1; overflow:hidden; border-radius:6px; background:rgba(255,255,255,.06)}
.sns-grid img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.sns-grid a:hover img{transform:scale(1.1)}
.sns-grid a::after{content:"@yachttale"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(1,34,70,.72); color:#fff; font-size:12px; font-weight:800; opacity:0; transition:.25s}
.sns-grid a:hover::after{opacity:1}

/* ── 공지 / 팝업존 ───────────────────────────────── */
.board-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:56px}
.board-tabs{display:flex; gap:24px; border-bottom:2px solid var(--gray-900); padding-bottom:0; margin-bottom:6px}
.board-tabs button{font-size:22px; font-weight:900; letter-spacing:-.04em; color:var(--gray-500); padding-bottom:14px; position:relative}
.board-tabs button.on{color:var(--gray-900)}
.board-list li{border-bottom:1px solid var(--gray-300)}
.board-list a{display:flex; align-items:center; gap:18px; padding:20px 4px; transition:.2s}
.board-list a:hover{background:var(--ocean-50); padding-left:12px}
.board-list .cat{flex:none; font-size:12px; font-weight:800; color:var(--ocean-600); border:1px solid var(--ocean-200); background:var(--ocean-50); border-radius:4px; padding:4px 10px}
.board-list .tt{flex:1; font-size:16px; font-weight:600; letter-spacing:-.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board-list .dt{flex:none; font-size:13px; color:var(--gray-500)}

/* 게시글 본문 보기 창 (assets/js/board.js) */
.post-modal{position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:24px}
.post-modal[hidden]{display:none}
.post-dim{position:absolute; inset:0; background:rgba(1,34,70,.55)}
.post-box{position:relative; width:min(780px,100%); max-height:86vh; overflow:auto; background:#fff; border-radius:10px; padding:38px 40px 28px; box-shadow:0 28px 70px rgba(1,34,70,.28)}
.post-x{position:absolute; top:14px; right:16px; width:38px; height:38px; font-size:24px; line-height:1; color:var(--gray-500); border-radius:50%}
.post-x:hover{background:var(--ocean-50); color:var(--ocean-700)}
.post-head{border-bottom:1px solid var(--gray-300); padding-bottom:18px; margin-bottom:24px}
.post-head .cat{display:inline-block; font-size:12px; font-weight:800; color:var(--ocean-600); border:1px solid var(--ocean-200); background:var(--ocean-50); border-radius:4px; padding:4px 10px}
.post-head .cat[hidden]{display:none}
.post-head .dt{font-size:13px; color:var(--gray-500); margin-left:10px}
.post-head h3{font-size:24px; font-weight:900; letter-spacing:-.04em; line-height:1.4; margin-top:12px}
.post-body{font-size:15.5px; line-height:1.85; color:var(--gray-800); word-break:break-word}
.post-body p{margin:0 0 14px}
.post-body img{max-width:100%; height:auto; border-radius:6px; margin:8px 0; display:block}
.post-body a{color:var(--ocean-600); text-decoration:underline; text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 14px; padding-left:22px}
.post-body li{margin-bottom:6px}
.post-body h4{font-size:18px; font-weight:800; letter-spacing:-.03em; margin:22px 0 10px}
.post-foot{display:flex; align-items:center; gap:10px; justify-content:flex-end; border-top:1px solid var(--gray-300); margin-top:26px; padding-top:18px}
.post-link,.post-close{font-size:14px; font-weight:800; border:1px solid var(--gray-300); border-radius:4px; padding:11px 22px}
.post-link{color:#fff; background:var(--ocean-600); border-color:var(--ocean-600)}
.post-link[hidden]{display:none}
.post-close:hover{border-color:var(--ocean-600); color:var(--ocean-600)}

.popupzone{display:grid; gap:14px}
.pz{position:relative; border-radius:8px; overflow:hidden; min-height:118px; display:flex; align-items:center; padding:24px 26px; color:#fff}
.pz.a{background:linear-gradient(115deg,var(--ocean-700),var(--ocean-500))}
.pz.b{background:linear-gradient(115deg,var(--sunset-plum),var(--sunset-amber))}
.pz.c{background:linear-gradient(115deg,var(--night-abyss),var(--ocean-800))}
.pz small{display:block; font-size:12px; font-weight:800; letter-spacing:.1em; opacity:.85}
.pz strong{display:block; font-size:21px; font-weight:900; letter-spacing:-.04em; margin-top:8px}
.pz span{display:block; font-size:13.5px; opacity:.85; margin-top:6px}
.pz::after{content:""; position:absolute; right:-30px; bottom:-40px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.1)}

/* ── 오시는길 ────────────────────────────────────── */
.loc{background:var(--gray-50)}
.loc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.loc-card{background:#fff; border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; display:flex; flex-direction:column}
.loc-card .ph{aspect-ratio:16/9; overflow:hidden; background:var(--gray-100)}
.loc-card .ph img,.loc-card .ph video{width:100%; height:100%; object-fit:cover; display:block}
.loc-card .body{padding:28px 30px 32px; flex:1}
.loc-card .badge{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; padding:5px 12px; border-radius:4px; background:var(--ocean-600); color:#fff}
.loc-card .badge.sub{background:var(--gray-500)}
/* 매표소·승선장 카드 — 배지 글자 키움 */
.loc-card .badge.lg{font-size:16px; padding:7px 16px}
.loc-card h3{margin-top:14px; font-size:24px; font-weight:900; letter-spacing:-.04em}
.loc-card dl{margin:18px 0 0; display:grid; grid-template-columns:76px 1fr; gap:10px 12px; font-size:16.5px}
/* 라벨(dt) 없는 카드 — 본문이 배지와 같은 지점에서 시작 */
.loc-card dl.nolabel{grid-template-columns:1fr}
.loc-card dl.nolabel dt{display:none}
.loc-card dt{color:var(--ocean-600); font-weight:800}
.loc-card dd{margin:0; color:var(--gray-700)}
/* 매표소·승선장·주차장 카드 — 본문 글자 키움 */
.loc-card dl.lg{font-size:16.5px; gap:12px 12px}
.loc-card dl.lg dd{line-height:1.65}
.loc-wrap.c3{grid-template-columns:repeat(3,1fr)}
.loc-wrap.c1{grid-template-columns:1fr; margin-bottom:24px}
.loc-wrap.c1 .loc-card .ph{aspect-ratio:auto; height:440px}
.loc-card .ph iframe{width:100%; height:100%; border:0; display:block}
/* 구글 지도 좌측 상단 정보 박스 잘라내기 */
.loc-wrap.c1 .loc-card .ph iframe{height:calc(100% + 130px); margin-top:-130px}
.park-map{margin-bottom:24px; border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; background:var(--gray-100)}
.park-map img{width:100%; height:auto; display:block}
/* 안내도 원본이 640px — 확대되며 깨지지 않도록 원본 크기까지만 */
.park-map{max-width:640px; margin-left:auto; margin-right:auto}

/* ── 푸터 ────────────────────────────────────────── */
.foot{background:var(--gray-900); color:rgba(255,255,255,.5); font-size:12.5px}
.foot-top{border-bottom:1px solid rgba(255,255,255,.12)}
.foot-top .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; padding:5px 0; flex-wrap:wrap}
.foot-links{display:flex; gap:0; flex-wrap:wrap}
.foot-links a{padding:0 12px; position:relative; font-size:12.5px}
.foot-links a:first-child{padding-left:0}
.foot-links a+a::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:11px; background:rgba(255,255,255,.2)}
.foot-links a:hover{color:#fff}
.foot-links a.strong{color:rgba(255,255,255,.8); font-weight:700}
.foot-util{display:flex; align-items:center; gap:14px}
.foot-top .foot-sns a{width:28px; height:28px}
.foot-top .foot-sns svg{width:14px; height:14px}
.family select{background:#4a4645; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:9px 14px; font-family:inherit; font-size:13.5px}
.foot-main{padding:24px 0 26px}
.foot-main .wrap{display:block}
.foot-logo img{height:22px; opacity:.6; filter:brightness(0) invert(1)}  /* 어두운 푸터 위 — 리버크루즈 로고를 흰색으로 */
.foot-cs{margin-top:22px}
.foot-cs small{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--ocean-300)}
.foot-cs strong{display:block; font-size:28px; font-weight:900; color:#fff; letter-spacing:-.03em; margin-top:6px}
.foot-cs p{font-size:13px; margin-top:6px}
.foot-info{margin-top:12px}
.foot-info p{line-height:1.65; font-size:11.5px; color:rgba(255,255,255,.38)}
.foot-info .fi-strong{color:rgba(255,255,255,.5); font-weight:500; font-size:11.5px; line-height:1.7}
.foot-info .copy{margin-top:16px; font-size:11.5px; color:rgba(255,255,255,.32)}
.foot-sns{display:flex; gap:10px; height:fit-content}
.foot-sns a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; transition:.2s}
.foot-sns a:hover{background:#fff; color:var(--gray-900); border-color:#fff}

/* ── 플로팅 ──────────────────────────────────────── */
.float{
  position:fixed; right:24px; bottom:28px; z-index:70; display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(14px); transition:.35s var(--ease);
}
.float.on{opacity:1; visibility:visible; transform:none}
.float a,.float button{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; gap:2px;
  background:#fff; border:1px solid var(--gray-300); box-shadow:0 8px 22px rgba(1,34,70,.14);
  font-size:11px; font-weight:800; line-height:1.1; text-align:center; transition:.2s var(--ease);
}
.float a:hover,.float button:hover{transform:translateY(-3px)}
.float .kakao{background:#FAE100; border-color:#FAE100}
.float .call{background:var(--ocean-600); border-color:var(--ocean-600); color:#fff}
.float .top{opacity:0; pointer-events:none}
.float .top.on{opacity:1; pointer-events:auto}

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width:1180px){
  .quick ul{grid-template-columns:repeat(4,1fr)}
  .svc-grid{grid-template-columns:repeat(3,1fr); gap:24px}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr); gap:28px}
  .sns-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .gnb,.util-left{display:none}
  .nav-toggle{display:grid}
  .head-act .icon-btn:not(.nav-toggle){display:none}
  .submenu{display:none}
  .ovw,.ovw.ovw-4{grid-template-columns:repeat(2,1fr)}
  .head .wrap{gap:16px; justify-content:space-between}
  .picks{grid-template-columns:1fr; gap:18px}
  .course-wrap,.board-wrap,.loc-wrap,.loc-wrap.c3,.foot-main .wrap{grid-template-columns:1fr; gap:36px}
  .rv-grid{grid-template-columns:1fr}
  .adv img{height:520px; object-position:center 35%}
  .adv::after{background:linear-gradient(0deg, rgba(1,34,70,.9) 0%, rgba(1,34,70,.5) 55%, rgba(1,34,70,.15) 100%)}
  .adv-copy{align-items:flex-end; padding-bottom:48px}
  .steps{grid-template-columns:1fr; gap:14px}
  .steps li::after{display:none}
}
@media (max-width:720px){
  .sec{padding:64px 0}
  .sec-head{flex-direction:column; align-items:flex-start; gap:14px}
  .sec-title{font-size:28px}
  .page-band{padding:34px 0 30px}
  .page-band h1{font-size:27px}
  .head-act .btn-book{height:42px; padding:0 16px; font-size:14px}
  .ctaband{padding:52px 0}
  .wrap{width:min(100% - 32px, var(--wrap))}
  .hero{height:min(88vh,720px)}
  .hero-slide img{object-position:center 62%}
  .hero-nav{bottom:120px}
  .quick ul{grid-template-columns:repeat(4,1fr); gap:4px}
  .quick a{padding:16px 4px; gap:10px}
  .quick .ico{width:48px; height:48px}
  .quick span{font-size:13px}
  .theme-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
  .sunsetbar{margin-top:-46px}
  .sb-card{gap:16px; padding:20px 20px 20px 22px}
  .sb-now{flex:1 1 100%}
  .sb-time{font-size:44px}
  .sb-depart{border-left:0; padding-left:0; flex:1 1 100%; padding-top:14px; border-top:1px solid var(--gray-300)}
  .sb-cta{width:100%; justify-content:center}
  .hero-dots{padding:10px 14px 5px; gap:12px}
  .hero-dots button{font-size:12.5px}
  .float{right:14px; bottom:14px}
  .float a,.float button{width:52px; height:52px; font-size:10px}
  .loc-wrap.c1 .loc-card .ph{height:300px}
}
@media (max-width:560px){
  .ovw,.ovw.ovw-4{grid-template-columns:1fr}
  .theme-grid{grid-template-columns:1fr}
  .util-right a[lang]{display:none}      /* 언어 링크는 모바일 메뉴로 이동 · 유틸바 가로 넘침 방지 */
  .util-right a{padding:0 10px}
  .post-modal{padding:12px}
  .post-box{max-height:92vh; padding:30px 20px 22px}
  .post-head h3{font-size:19px}
  .post-body{font-size:15px}
}


/* ── 모바일 하단 고정 CTA (예약자 대부분이 모바일) ── */
.mcta{display:none}
@media(max-width:860px){
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
        background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
        border-top:1px solid var(--ocean-100,#e1ecf6);box-shadow:0 -4px 20px rgba(10,40,80,.10);
        padding-bottom:env(safe-area-inset-bottom)}
  .mcta a{flex:1;text-align:center;padding:14px 6px;font-size:14px;font-weight:800;
          color:var(--ocean-700,#0a4b86);text-decoration:none;min-height:52px;
          display:flex;align-items:center;justify-content:center}
  .mcta a+a{border-left:1px solid var(--ocean-100,#e1ecf6)}
  .mcta a.go{flex:1.3;background:var(--ocean-600,#0e63c4);color:#fff}
  body{padding-bottom:64px}   /* 고정바에 콘텐츠가 가리지 않게 */
}

/* ── 언어 스위처 ── */
.util-right a[lang]{font-weight:700;letter-spacing:.04em}
.util-right a.lang-on{color:var(--ocean-600,#0e63c4);text-decoration:underline;text-underline-offset:3px}

/* ── 헤더 언어 드롭다운 (국기 포함) ───────────────── */
.langsel{position:relative; flex:none}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border:1px solid var(--gray-300); border-radius:999px; background:#fff;
  font-size:14px; font-weight:700; letter-spacing:-.02em; color:var(--gray-900); transition:.2s var(--ease);
}
.lang-btn:hover{border-color:var(--ocean-600); color:var(--ocean-600)}
.lang-caret{transition:transform .22s var(--ease)}
.langsel.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:160px; background:#fff;
  border:1px solid var(--gray-300); border-radius:8px; box-shadow:0 18px 40px rgba(1,34,70,.12);
  padding:6px 0; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:90;
}
.langsel.open .lang-menu{opacity:1; visibility:visible; transform:none}
.lang-menu a{display:flex; align-items:center; gap:9px; padding:9px 16px; font-size:14.5px; color:var(--gray-700); white-space:nowrap}
.lang-menu a:hover{background:var(--gray-100); color:var(--ocean-600)}
.lang-menu a.on{font-weight:800; color:var(--ocean-700)}
.lang-flag{
  width:18px; height:18px; flex:none; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.lang-flag.kr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cg transform='rotate(-33.69 10 10)'%3E%3Cpath d='M5.4 10a4.6 4.6 0 0 1 9.2 0 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-4.6 0z' fill='%23cd2e3a'/%3E%3Cpath d='M5.4 10a4.6 4.6 0 0 0 9.2 0 2.3 2.3 0 0 0-4.6 0 2.3 2.3 0 0 1-4.6 0z' fill='%230047a0'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cg transform='translate(4.18 6.12) rotate(-56.31)'%3E%3Crect x='-2.3' y='-1.575' width='4.6' height='.75'/%3E%3Crect x='-2.3' y='-.375' width='4.6' height='.75'/%3E%3Crect x='-2.3' y='.825' width='4.6' height='.75'/%3E%3C/g%3E%3Cg transform='translate(15.82 6.12) rotate(56.31)'%3E%3Crect x='-2.3' y='-1.575' width='1.95' height='.75'/%3E%3Crect x='.35' y='-1.575' width='1.95' height='.75'/%3E%3Crect x='-2.3' y='-.375' width='4.6' height='.75'/%3E%3Crect x='-2.3' y='.825' width='1.95' height='.75'/%3E%3Crect x='.35' y='.825' width='1.95' height='.75'/%3E%3C/g%3E%3Cg transform='translate(4.18 13.88) rotate(56.31)'%3E%3Crect x='-2.3' y='-1.575' width='4.6' height='.75'/%3E%3Crect x='-2.3' y='-.375' width='1.95' height='.75'/%3E%3Crect x='.35' y='-.375' width='1.95' height='.75'/%3E%3Crect x='-2.3' y='.825' width='4.6' height='.75'/%3E%3C/g%3E%3Cg transform='translate(15.82 13.88) rotate(-56.31)'%3E%3Crect x='-2.3' y='-1.575' width='1.95' height='.75'/%3E%3Crect x='.35' y='-1.575' width='1.95' height='.75'/%3E%3Crect x='-2.3' y='-.375' width='1.95' height='.75'/%3E%3Crect x='.35' y='-.375' width='1.95' height='.75'/%3E%3Crect x='-2.3' y='.825' width='1.95' height='.75'/%3E%3Crect x='.35' y='.825' width='1.95' height='.75'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.lang-flag.us{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect y='0' width='20' height='1.54'/%3E%3Crect y='3.08' width='20' height='1.54'/%3E%3Crect y='6.15' width='20' height='1.54'/%3E%3Crect y='9.23' width='20' height='1.54'/%3E%3Crect y='12.31' width='20' height='1.54'/%3E%3Crect y='15.38' width='20' height='1.54'/%3E%3Crect y='18.46' width='20' height='1.54'/%3E%3C/g%3E%3Crect width='8.5' height='10.77' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.7' cy='1.8' r='.55'/%3E%3Ccircle cx='4.25' cy='1.8' r='.55'/%3E%3Ccircle cx='6.8' cy='1.8' r='.55'/%3E%3Ccircle cx='2.975' cy='3.6' r='.55'/%3E%3Ccircle cx='5.525' cy='3.6' r='.55'/%3E%3Ccircle cx='1.7' cy='5.4' r='.55'/%3E%3Ccircle cx='4.25' cy='5.4' r='.55'/%3E%3Ccircle cx='6.8' cy='5.4' r='.55'/%3E%3Ccircle cx='2.975' cy='7.2' r='.55'/%3E%3Ccircle cx='5.525' cy='7.2' r='.55'/%3E%3Ccircle cx='1.7' cy='9' r='.55'/%3E%3Ccircle cx='4.25' cy='9' r='.55'/%3E%3Ccircle cx='6.8' cy='9' r='.55'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag.jp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Ccircle cx='10' cy='10' r='6' fill='%23bc002d'/%3E%3C/svg%3E")}
.lang-flag.cn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23de2910'/%3E%3Cg fill='%23ffde00'%3E%3Cpolygon points='5.6,2.4 6.32,4.61 8.64,4.61 6.76,5.98 7.48,8.19 5.6,6.82 3.72,8.19 4.44,5.98 2.56,4.61 4.88,4.61'/%3E%3Cpolygon points='11.4,1.55 11.64,2.28 12.4,2.28 11.78,2.72 12.02,3.45 11.4,3 10.78,3.45 11.02,2.72 10.4,2.28 11.16,2.28'/%3E%3Cpolygon points='13.6,3.95 13.84,4.68 14.6,4.68 13.98,5.12 14.22,5.85 13.6,5.4 12.98,5.85 13.22,5.12 12.6,4.68 13.36,4.68'/%3E%3Cpolygon points='13.6,7.15 13.84,7.88 14.6,7.88 13.98,8.32 14.22,9.05 13.6,8.6 12.98,9.05 13.22,8.32 12.6,7.88 13.36,7.88'/%3E%3Cpolygon points='11.4,9.55 11.64,10.28 12.4,10.28 11.78,10.72 12.02,11.45 11.4,11 10.78,11.45 11.02,10.72 10.4,10.28 11.16,10.28'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag.tw{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fe0000'/%3E%3Crect width='10' height='10' fill='%23000095'/%3E%3Cpolygon fill='%23fff' points='8.9,5 7.27,5.61 8.38,6.95 6.66,6.66 6.95,8.38 5.61,7.27 5,8.9 4.39,7.27 3.05,8.38 3.34,6.66 1.62,6.95 2.73,5.61 1.1,5 2.73,4.39 1.62,3.05 3.34,3.34 3.05,1.62 4.39,2.73 5,1.1 5.61,2.73 6.95,1.62 6.66,3.34 8.38,3.05 7.27,4.39'/%3E%3Ccircle cx='5' cy='5' r='2.55' fill='%23000095'/%3E%3Ccircle cx='5' cy='5' r='2.15' fill='%23fff'/%3E%3C/svg%3E")}
@media (max-width:1024px){
  .lang-btn .lang-cur{display:none}
  .lang-btn{padding:0 10px; gap:6px}
}

/* ── 배너존 정사각 포토 슬라이드 ─────────────────── */
.pzslide{position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--gray-100)}
.pzs-item{position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease)}
.pzs-item.on{opacity:1}
.pzs-item img{width:100%; height:100%; object-fit:cover; display:block}
.pzs-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.86); color:var(--gray-900); transition:.2s var(--ease);
}
.pzs-arrow:hover{background:#fff}
.pzs-arrow.prev{left:12px}
.pzs-arrow.next{right:12px}
.pzs-dots{position:absolute; left:0; right:0; bottom:14px; z-index:3; display:flex; justify-content:center; gap:7px}
.pzs-dots button{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); transition:.2s var(--ease)}
.pzs-dots button.on{width:22px; background:#fff}


/* ══════════════════════════════════════════════════════════
   메인 화면 모바일 손보기 (≤560px) — PC 화면에는 영향 없음
   ══════════════════════════════════════════════════════════ */
@media (max-width:560px){

  /* ① 첫 화면을 조금 더 길게 */
  .hero{height:min(94vh,860px)}

  /* ② '오늘의 일몰' 은 첫 화면에 안 보이게 — 히어로 위로 올라타지 않도록 내린다 */
  .sunsetbar{margin-top:14px}

  /* ③ 일몰 칸이 세로로 길어지지 않게 — 일몰시각(왼쪽) · 출항정보(오른쪽) 한 줄로 */
  .sb-card{
    display:grid; grid-template-columns:auto 1fr; align-items:center;
    column-gap:14px; row-gap:12px; padding:16px 16px 16px 18px;
  }
  .sb-now{flex:none; min-width:0}
  .sb-depart{
    justify-self:end; text-align:right; min-width:0;
    display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  }
  .sb-cta{grid-column:1 / -1; width:100%; justify-content:center}

  /* ④ 리뷰 영역 위아래 여백 줄이기 */
  .reviews.sec{padding:40px 0}
  .reviews .rv-grid{gap:14px}
  .reviews .rv{padding:20px 18px}

  /* ⑤ 공지사항 아래 사진을 16:9 로 (세로로 길지 않게) */
  .pzslide{aspect-ratio:16/9}
}


/* 페이지 머리 배너 — 제목만 얹는 얕은 띠 (장식·수치 넣지 않는다) */
.page-band{padding:34px 0 32px}
.page-band h1{font-size:clamp(22px,2.4vw,28px); margin-top:0}
.page-band .lead{margin-top:8px; font-size:14.5px; color:rgba(255,255,255,.78)}
/* 배너 바로 아래 섹션은 위 여백을 줄인다 */
.page-band + .sec{padding-top:44px}

@media (max-width:560px){
  .page-band{padding:24px 0 22px}
  .page-band h1{font-size:20px}
  .page-band .lead{font-size:13.5px}
  .page-band + .sec{padding-top:24px}

  /* 투어 카드 4개 — 2 x 2 */
  .ovw, .ovw.ovw-4{grid-template-columns:repeat(2,1fr); gap:12px}
  .ovw .tcard .body{padding:12px 12px 14px}
  .ovw .tcard h3{font-size:14.5px}
  .ovw .tcard p{font-size:12px; line-height:1.55}
  .ovw .go{font-size:12.5px; padding-top:10px}
  .ovw .thumb .cat{font-size:10px; padding:4px 8px}
}
.page-band.photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,92,176,.86) 0%, rgba(6,92,176,.58) 46%, rgba(1,34,70,.66) 100%);
}
.page-band.photo > .wrap{position:relative; z-index:2}
/* 배너 바로 아래 섹션은 위 여백을 줄인다(배너가 제목 역할을 하므로) */
.page-band + .sec{padding-top:44px}
.page-band.photo h1{font-size:clamp(28px,3.4vw,42px)}
.page-band.photo h1 em{font-style:normal; color:var(--sun-yellow,#FFE24A)}
.page-band .pb-stat{display:flex; gap:26px; margin-top:22px; flex-wrap:wrap}
.page-band .pb-stat span{font-size:13.5px; color:rgba(255,255,255,.8)}
.page-band .pb-stat b{font-size:22px; font-weight:900; color:#fff; margin-right:4px; letter-spacing:-.03em}

@media (max-width:560px){
  /* 머리 배너 — 모바일에서 살짝 낮게 */
  .page-band.photo{padding:38px 0 34px}
  .page-band.photo h1{font-size:25px; line-height:1.2}
  .page-band .lead{font-size:14px; margin-top:10px}
  .page-band .pb-stat{gap:16px; margin-top:16px}
  .page-band .pb-stat b{font-size:18px}
  .page-band + .sec{padding-top:24px}

  /* 투어 카드 4개 — 2 x 2 로 */
  .ovw, .ovw.ovw-4{grid-template-columns:repeat(2,1fr); gap:12px}
  .ovw .tcard .body{padding:12px 12px 14px}
  .ovw .tcard h3{font-size:14.5px}
  .ovw .tcard p{font-size:12px; line-height:1.55}
  .ovw .go{font-size:12.5px; padding-top:10px}
  .ovw .thumb .cat{font-size:10px; padding:4px 8px}
}

/* ── 작은 폰에서 헤더가 화면 밖으로 밀려나지 않게 (모바일 전용, PC 영향 없음) ── */
@media (max-width:460px){
  .head .wrap{gap:8px}
  .head-act{gap:6px}
  .lang-btn{height:38px; padding:0 9px; gap:5px; font-size:13px}
  .head-act .btn-book{height:38px; padding:0 12px; gap:5px; font-size:13px}
  .head-act .icon-btn{width:40px; height:40px}
}
@media (max-width:420px){
  .logo img{height:21px}
  .head-act .btn-book{padding:0 9px; font-size:12.5px}
}

/* ── 자주 묻는 질문 분류 알약 ── */
.faq-head{display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:56px 0 14px}
.faq-head .faq-title{margin:0}
.faq-head + .faq{margin-top:0}
.faq-cats{display:flex; flex-wrap:wrap; gap:6px}
.fc-pill{
  height:32px; padding:0 15px; border-radius:999px;
  background:#fff; border:1.5px solid var(--ocean-600); color:var(--ocean-600);
  font-size:14px; font-weight:700; letter-spacing:-.03em; transition:.18s var(--ease);
}
.fc-pill:hover{background:var(--ocean-50)}
.fc-pill.on{background:var(--ocean-600); color:#fff}   /* 누르면 배경과 테두리가 뒤집힌다 */
@media (max-width:560px){
  .faq-head{gap:8px 10px}
  .fc-pill{height:29px; padding:0 12px; font-size:12.5px}
}

/* 예약방법 3단계 — 전화번호 알약 */
.step-tag.tel{display:inline-flex; align-items:center; gap:6px; letter-spacing:.01em}
.step-tag.tel:hover{background:var(--ocean-100); border-color:var(--ocean-600)}

/* 이용방법 — 흰 배경 / 자주 묻는 질문은 독립 섹션 */
.use-guide{background:#fff}
.faq-sec .faq-head{margin-top:0}

/* ── 연령 기준 (가로형, 파란 안내와 색을 구분한다) ── */
.agebar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  margin-top:24px; padding:13px 18px;
  background:#FFF6EA; border:1px solid #FFE0BC; border-radius:8px;
}
.agebar .ab-t{
  flex:none; padding:5px 12px; border-radius:999px; background:#9A5B00; color:#fff;
  font-size:13px; font-weight:800; letter-spacing:-.02em;
}
.agebar ul{display:flex; flex-wrap:wrap; gap:6px 26px; list-style:none; margin:0; padding:0}
.agebar li{font-size:14.5px; font-weight:600; letter-spacing:-.03em; color:var(--gray-900)}
.agebar li b{font-weight:800; color:#8A4F00; margin-right:7px}
.agebar li em{font-style:normal; font-size:13px; font-weight:500; color:var(--gray-500)}

/* ── 취소 · 환불 규정 ── */
.rfnd{margin-top:16px; padding:20px 24px 18px; background:#fff; border:1px solid var(--ocean-200); border-radius:8px}
.rfnd h3{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:15px; font-weight:800; letter-spacing:-.03em; color:var(--ocean-800);
}
.rfnd h3 em{
  font-style:normal; padding:4px 10px; border-radius:999px;
  background:var(--ocean-50); border:1px solid var(--ocean-200); color:var(--ocean-600);
  font-size:12px; font-weight:700;
}
.rf-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; margin:0; padding:0}
.rf-grid li{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 8px; border:1px solid var(--ocean-100); border-radius:8px; background:var(--ocean-50);
}
.rf-grid .rf-d{font-size:13px; font-weight:700; letter-spacing:-.03em; color:var(--gray-700)}
.rf-grid .rf-v{font-size:17px; font-weight:800; letter-spacing:-.04em; color:var(--ocean-800)}
.rf-grid li.no{background:#F7F8F9; border-color:var(--gray-300)}
.rf-grid li.no .rf-v{color:#B5261E}
.rf-note{margin:12px 0 0; font-size:13px; font-weight:500; line-height:1.75; letter-spacing:-.02em; color:var(--gray-700); word-break:keep-all}
.rf-note b{font-weight:800; color:var(--gray-900)}
.rf-note .sub{display:inline-block; padding-left:14px; color:var(--gray-500)}
.binfo.one{grid-template-columns:1fr}

@media (max-width:760px){
  .agebar{gap:7px 14px; padding:12px 14px}
  .agebar ul{gap:5px 16px}
  .agebar li{font-size:13.5px}
  .rfnd{padding:17px 16px 15px}
  .rf-grid{grid-template-columns:repeat(2,1fr)}
  .rf-grid .rf-v{font-size:16px}
  .rf-note{font-size:12.5px}
  .rf-note .sub{padding-left:0}
}

/* ── 작은 노트북(1025~1280px)에서 상단 메뉴가 두 줄로 넘어가지 않게 (모바일 영향 없음) ── */
@media (min-width:1025px) and (max-width:1280px){
  .head .wrap{gap:24px}
  .gnb > ul{gap:2px}
  .gnb > ul > li > a{padding:0 12px}
}
@media (min-width:1025px) and (max-width:1140px){
  .head .wrap{gap:16px}
  .gnb > ul > li > a{padding:0 9px; font-size:15.5px}
  .logo img{height:26px}
  .head-act .btn-book{padding:0 16px; font-size:14px}
}

/* ── 게시판 칸이 모바일에서 화면 밖으로 밀리지 않게 (긴 제목은 … 처리) ── */
@media (max-width:1024px){
  .board-wrap > *{min-width:0}
  .board-tabs{flex-wrap:wrap; gap:6px 18px}
}

/* ── 예약방법 : 연령 기준 | 취소·환불 규정 두 칸 ── */
.book-guide .binfo{margin-top:28px}
.age-card .agelist{gap:14px}
.rf-card .rf-grid li{padding:11px 6px}
.rf-card .rf-note{font-size:12.5px; margin-top:10px}
/* ── 이용방법 : 스텝 속 작은 안내 + 신분증 (한 줄씩) ── */
.steps p small{display:block; margin-top:8px; font-size:13px; color:var(--gray-500); letter-spacing:-.02em}
.use-guide .id-box{margin-top:28px}
.idrow{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.idrow li{display:flex; align-items:center; gap:14px}
.idrow .idl{flex:none; min-width:150px; padding:6px 12px; border-radius:4px; background:var(--ocean-800); color:#fff;
  font-size:13px; font-weight:800; letter-spacing:-.02em; text-align:center}
.idrow .idv{font-size:15px; font-weight:500; letter-spacing:-.02em; line-height:1.6; color:var(--gray-700)}
.idrow .idv b{font-weight:800; color:var(--gray-900)}
@media (max-width:760px){
  .idrow li{flex-direction:column; align-items:flex-start; gap:6px}
  .idrow .idv{font-size:14px}
}
.age-card{display:flex; flex-direction:column}
.age-card .agelist{flex:1; align-content:center}

/* ── 운항 코스 (투어 페이지 맨 아래) ── */
.cruise-course .cmap{margin:0; border:1px solid var(--gray-300); border-radius:10px; overflow:hidden; background:#fff}
.cruise-course .cmap-in{overflow-x:auto; -webkit-overflow-scrolling:touch}
.cruise-course .cmap img{display:block; width:100%; min-width:940px; height:auto}
.cruise-course .cmap figcaption{padding:6px 16px; border-top:1px solid var(--gray-300);
  font-size:14px; color:var(--gray-700); letter-spacing:-.02em; line-height:1.6}
.cruise-course .cmap figcaption b{font-weight:800; color:var(--ocean-700)}
.cruise-course .course-note{margin-top:20px}
@media (max-width:760px){
  .cruise-course .cmap figcaption{font-size:13px; padding:11px 14px}
}



/* ── 예약방법 : 연령 기준 가로 띠 — 스텝·환불 규정보다 한 단계 낮게 (옅은 배경, 테두리 없음) ── */
.agebar2{display:flex; align-items:center; margin-top:20px; padding:12px 22px; background:rgba(6,92,176,.07); border-radius:10px}
.agebar2 .ab-t{flex:none; width:120px; font-size:14px; font-weight:700; color:var(--gray-700); letter-spacing:-.03em}
.agebar2 ul{flex:1; display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0}
.agebar2 li{display:flex; align-items:center; justify-content:center; gap:10px; padding:2px 10px; border-left:1px solid rgba(6,92,176,.14)}
.agebar2 .ag{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(6,92,176,.22); color:var(--ocean-700); font-size:12px; font-weight:800; letter-spacing:-.02em}
.agebar2 .av{font-size:14.5px; font-weight:600; letter-spacing:-.03em; color:var(--gray-700)}
.agebar2 .av em{font-style:normal; font-size:12.5px; font-weight:500; color:var(--gray-500)}
/* ── 취소·환불 규정 박스 ── */
.rfbox{margin-top:16px; padding:24px 24px 22px; background:#fff; border:1px solid var(--ocean-200); border-radius:12px}
.rfbox h3,.idcard h3{display:flex; align-items:center; gap:9px; margin:0 0 18px; font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--ocean-800)}
.rfbox h3 .hint,.idcard h3 .hint{font-style:normal; padding:3px 10px; border-radius:999px; background:var(--ocean-50); border:1px solid var(--ocean-200);
  color:var(--ocean-600); font-size:12px; font-weight:700; letter-spacing:-.02em}
.rfbox .rf-grid{gap:10px}
.rfbox .rf-grid li{padding:18px 8px; border:0; border-radius:10px; background:var(--ocean-50)}
.rfbox .rf-grid .rf-v{font-size:19px}
.rfbox .rf-grid li.no{background:#FFF0F0}
.rfbox .rf-grid li.no .rf-v{color:#E0302A}
.rf-notes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; margin:10px 0 0; padding:0}
.rf-notes li{padding:16px 18px; border-radius:10px; background:#F5F7F9}
.rf-notes b{display:block; margin-bottom:6px; font-size:14.5px; font-weight:800; letter-spacing:-.03em; color:var(--gray-900)}
.rf-notes p{margin:0; font-size:13px; line-height:1.65; letter-spacing:-.02em; color:var(--gray-700); word-break:keep-all}
.rf-notes p b{display:inline; margin:0; font-size:inherit; color:var(--gray-900)}
.rf-notes .sub{color:var(--gray-500)}
/* ── 이용방법 : 신분증 카드 ── */
.idcard{margin-top:28px; padding:24px; background:#fff; border:1px solid var(--ocean-200); border-radius:12px}
.id-minor{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.idc{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:10px; background:#F2F8FC}
.idc .ico{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#DCEFFB; color:var(--ocean-700); font-size:19px; font-weight:900; letter-spacing:-.02em}
.idc small{display:block; margin-bottom:3px; font-size:13px; color:var(--gray-500); letter-spacing:-.02em}
.idc > div > b{font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--gray-900)}
.idc.adult{margin-top:12px}
.idc.adult .lb{flex:none; width:110px; font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--gray-900)}
.idc.adult p{margin:0; font-size:15px; line-height:1.65; letter-spacing:-.02em; color:var(--gray-700)}
.idc.adult p b{font-weight:700; color:var(--gray-900)}
@media (max-width:760px){
  .agebar2{flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px}
  .agebar2 .ab-t{width:auto}
  .agebar2 li{flex-direction:column; gap:5px; padding:0 4px; text-align:center}
  .agebar2 li:first-child{border-left:0}
  .agebar2 .av{font-size:13.5px}
  .agebar2 .av em{display:block; font-size:12px}
  .rfbox,.idcard{padding:18px 16px}
  .rf-notes,.id-minor{grid-template-columns:1fr}
  .idc{padding:14px 16px}
  .idc.adult{flex-wrap:wrap}
  .idc.adult .lb{width:auto}
  .idc.adult p{flex-basis:100%; font-size:14px}
}
/* 연령 띠 — 너무 옅어서 한 단계 올림 (테두리 없는 띠는 유지) */
.agebar2{padding:14px 22px; background:rgba(6,92,176,.11)}
.agebar2 .ab-t{font-size:15px; font-weight:800; color:var(--ocean-800)}
.agebar2 li{border-left-color:rgba(6,92,176,.18)}
.agebar2 .ag{width:36px; height:36px; background:var(--ocean-700); border:0; color:#fff}
.agebar2 .av{font-size:15.5px; font-weight:700; color:var(--gray-900)}
.agebar2 .av em{font-size:13px}
@media (max-width:760px){ .agebar2 .av{font-size:14px} }
/* 연령 띠가 스텝보다 튀지 않게 — 동그라미는 연한 채움, 띠는 한 톤 연하게 (글자는 진하게 유지) */
.agebar2{background:rgba(6,92,176,.07)}
.agebar2 .ag{background:#D6ECFA; color:var(--ocean-700)}
/* 스텝 카드는 옅은 그림자로 한 단계 띄운다 (예약안내 페이지만) */
#book .steps > li, #use .steps > li{box-shadow:0 8px 22px rgba(1,34,70,.07)}
.agebar2 .ag{background:#fff; color:var(--ocean-700); box-shadow:0 0 0 1px rgba(6,92,176,.12)}
/* ── 이용방법 : 신분증 칸은 스텝보다 한 단계 낮게 (테두리 없는 옅은 회색 판) ── */
#use .idcard{border:0; background:#F6F8FA; padding:22px 24px}
#use .idcard h3{font-size:15.5px; color:var(--gray-900); margin-bottom:14px}
#use .idc{background:#fff}
#use .idc .ico{width:38px; height:38px; background:#EEF5FB; color:var(--ocean-600); font-size:16px}
#use .idc > div > b{font-size:15.5px}
#use .idc.adult .lb{font-size:15px}
#use .idc.adult p{font-size:14.5px}
/* ── 스텝 알약을 세 카드 모두 같은 높이(카드 맨 아래)에 ── */
#book .steps > li, #use .steps > li{display:flex; flex-direction:column}
#book .steps > li > p, #use .steps > li > p{margin-bottom:18px}
#book .steps .step-tag, #use .steps .step-tag{align-self:flex-start; margin-top:auto}

/* ── 메인 첫 화면 사진 : 가로 화면은 가로 사진, 세로 화면은 세로 사진 (배가 잘리지 않게 따로 자름) ── */
.hero-slide picture{position:absolute; inset:0; display:block}
@media (max-aspect-ratio:1/1){ .hero-slide img{object-position:center center} }

/* 메인 첫 화면 문구 — 단어 중간에서 끊기지 않게, 휴대폰에서만 정해둔 자리에서 줄바꿈 */
.hero-ko{word-break:keep-all}
.hero-ko br.mb{display:none}
@media (max-width:720px){ .hero-ko br.mb{display:inline} }

/* ── 오른쪽 떠 있는 버튼 : 예약 + 카톡(외국어는 채널톡) ── */
.float .ctalk{background:var(--ocean-700); border-color:var(--ocean-700); color:#fff}
.float [hidden]{display:none !important}
/* ── 모바일 하단 바 : 전화 문의 + 카톡 문의(외국어는 채널톡) ── */
@media(max-width:860px){
  .mcta a,.mcta button{flex:1; gap:7px; border:0; font-family:inherit; cursor:pointer}
  .mcta button{min-height:52px; padding:14px 6px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center}
  .mcta .tel{background:#fff; color:var(--ocean-700,#0a4b86)}
  .mcta .kakao{background:#FEE500; color:#191919}
  .mcta .ctalk{background:var(--ocean-600,#0e63c4); color:#fff}
  .mcta [hidden]{display:none !important}
  .mcta svg{flex:none}
  /* 하단 바에 카톡·채널톡이 있으니 떠 있는 버튼 쪽은 숨긴다 (중복 정리) */
  .float .kakao,.float .ctalk{display:none !important}
}

/* ── 모바일 : 예약방법 · 이용방법 스텝을 한 줄 띠로 (왼쪽 STEP·제목 / 오른쪽 설명·알약) — PC는 그대로 ── */
@media (max-width:760px){
  #book .steps, #use .steps{gap:10px}
  #book .steps > li, #use .steps > li{display:grid; grid-template-columns:92px minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:16px; padding:18px 18px 18px 16px}
  #book .steps .step-no, #use .steps .step-no{grid-area:1/1; font-size:11px; letter-spacing:.12em}
  #book .steps h3, #use .steps h3{grid-area:2/1; margin-top:6px; font-size:17px; line-height:1.35}
  #book .steps > li > p, #use .steps > li > p{grid-column:2; grid-row:1/3; margin:0; min-width:0; font-size:14px; line-height:1.6}
  #book .steps .step-tag, #use .steps .step-tag{grid-column:2; grid-row:3; justify-self:start; margin-top:10px; font-size:12px; padding:4px 11px}
  html[lang="ko"] #book .steps :is(h3,p), html[lang="ko"] #use .steps :is(h3,p){word-break:keep-all}
  html[lang="en"] #book .steps > li, html[lang="en"] #use .steps > li{grid-template-columns:110px minmax(0,1fr)}
  html[lang="en"] #book .steps h3, html[lang="en"] #use .steps h3{font-size:16px}
  /* 일본어 : PC용 줄바꿈을 풀어 끝 글자만 떨어지지 않게, 제목은 ・ 에서만 줄바꿈 */
  html[lang="ja"] #book .steps > li, html[lang="ja"] #use .steps > li{grid-template-columns:100px minmax(0,1fr)}
  html[lang="ja"] #book .steps h3, html[lang="ja"] #use .steps h3{font-size:16px; word-break:keep-all}
  html[lang="ja"] #book .steps > li > p br, html[lang="ja"] #use .steps > li > p br{display:none}
  #book .steps > li::before, #use .steps > li::before{content:""; grid-column:1; grid-row:1/4; justify-self:end; width:1px; margin-right:-8px; background:var(--ocean-200)}
}

/* ── 모바일 : 글자 한두 개만 다음 줄로 떨어지지 않게 ── */
@media (max-width:760px){
  html[lang="ko"] :is(p,h2,h3,h4,dd,li,figcaption){word-break:keep-all}
  html[lang="ja"] :is(p,h2,h3,h4,dd,li,figcaption){word-break:auto-phrase}
  /* text-wrap:pretty 는 뺐다 — 아이폰 사파리에서 줄을 일찍 끊어 오른쪽 여백이 크게 남는다 */
}

/* 줄바꿈 금지 조각 */
.nowrap{white-space:nowrap}

/* ── 모바일 메인 '오늘의 일몰 · 날씨' : 좌우 배치는 그대로, 글자만 어색하게 끊기지 않게 ── */
@media (max-width:560px){
  .sb-card .sb-label{flex-wrap:wrap; column-gap:6px; row-gap:1px; font-size:13px}
  .sb-card .sb-label span{white-space:nowrap}
  .sb-card .sb-label em{flex-basis:100%; font-size:11.5px; white-space:nowrap}
  .sb-card .sb-label svg{flex:none}
  .sb-now .sb-main{flex-direction:column; align-items:flex-start; gap:5px}
  .sb-now .sb-time{font-size:40px}
  .sb-now .sb-sub{white-space:nowrap; font-size:12px}
  .sb-wx .sb-main{gap:8px}
  .sb-wx .sb-sub{font-size:12px; line-height:1.45}
}
.sb-wx .wp{white-space:nowrap}
.sb-wx .wp i{font-style:normal}
@media (max-width:560px){ .sb-wx .wp{display:block} .sb-wx .wp i{display:none} }
@media (max-width:560px){ .sb-card{align-items:start} }

/* ── 모바일 : 이용방법 › 인증 가능 신분증 — 미성년자 두 칸을 한 줄에 (아이콘 위, 글 아래) ── */
@media (max-width:760px){
  #use .id-minor{grid-template-columns:1fr 1fr; gap:8px}
  #use .id-minor .idc{flex-direction:column; align-items:flex-start; gap:8px; padding:14px 12px}
  #use .id-minor .idc .ico{width:32px; height:32px; font-size:14px}
  #use .id-minor .idc .ico svg{width:16px; height:16px}
  #use .id-minor .idc small{font-size:12px; line-height:1.4; word-break:keep-all}
  #use .id-minor .idc > div > b{font-size:15px}
  html[lang="en"] #use .id-minor .idc small{min-height:2.8em}
}

/* ── 모바일 : 운항코스 지도 — 세로 지도로 바꿔 끼우므로 가로 스크롤(최소 940px)을 푼다 ── */
@media (max-width:760px){
  .cruise-course .cmap img{min-width:0}
}
.cruise-course .cmap picture,.course-map picture{display:block}

/* ── 대관요금 : 센텀나루라운지 카카오톡 채널 알약 ── */
.more.kakao-more{background:#FEE500; border-color:#FEE500; color:#191919}
.more.kakao-more:hover{background:#F5DC00; border-color:#F5DC00; color:#191919}
.more.kakao-more svg{flex:none}

/* 모바일 전용 줄바꿈 · PC 전용 문구 */
br.m-only{display:none}
@media (max-width:760px){ br.m-only{display:inline} .pc-only{display:none} }

/* ── 외국어판 글꼴 : 한자·가나는 각 나라 글꼴로 (맑은 고딕의 한국식 한자 글꼴로 나오지 않게) ── */
html[lang="ja"] body{font-family:"Pretendard Variable",Pretendard,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif}
html[lang="zh-Hans"] body{font-family:"Pretendard Variable",Pretendard,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
html[lang="zh-Hant"] body{font-family:"Pretendard Variable",Pretendard,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
html[lang="ja"] :is(button,input,select,textarea),html[lang^="zh"] :is(button,input,select,textarea){font-family:inherit}

/* ── 외국어판 줄바꿈 ──
   한국어용 word-break:keep-all 은 띄어쓰기가 없는 일본어·중국어에서 문장 전체를 한 덩어리로 만들어
   칸 밖으로 넘친다. 일본어·중국어는 글자 단위로 줄을 바꾸고(행두 금칙은 strict), 영어는 긴 낱말만 끊는다. */
html[lang="ja"] *, html[lang^="zh"] *{word-break:normal !important}
html[lang="ja"] body, html[lang^="zh"] body{line-break:strict}
html[lang="en"] body{overflow-wrap:break-word}

/* ── 외국어판 모바일 : 한국어 기준으로 '한 줄 고정'한 곳은 번역문이 길어 넘치므로 줄바꿈을 허용 ── */
@media (max-width:760px){
  html:not([lang="ko"]) .sb-card .sb-label span, html:not([lang="ko"]) .sb-now .sb-sub{white-space:normal}
  html:not([lang="ko"]) #fee .sec-desc{white-space:normal; font-size:15px}
  html:not([lang="ko"]) .rt-fee thead th{white-space:normal}
  html:not([lang="ko"]) .rt-fee tbody th small{white-space:normal}
  html:not([lang="ko"]) .rt-fee th, html:not([lang="ko"]) .rt-fee td{padding:12px 6px}
  html:not([lang="ko"]) .rt-fee b{font-size:14.5px}
  html:not([lang="ko"]) .rt-fee s{font-size:12px}
  html:not([lang="ko"]) .rt-refund + .course-note{white-space:normal; font-size:14px}
}
@media (max-width:760px){ html[lang="ja"] .rt-fee thead th, html[lang^="zh"] .rt-fee thead th{font-size:13px} }
.step-tag.tel{white-space:nowrap}

/* ── 외국어판 채팅 상담 버튼 : 예약(파랑)과 구분되는 초록 + 속이 찬 말풍선 ── */
.float .ctalk{background:#12B886; border-color:#12B886; color:#fff}
.float .ctalk:hover{background:#0CA678; border-color:#0CA678}
.ctalk svg .dot{fill:#12B886}
.float .ctalk:hover svg .dot{fill:#0CA678}
@media(max-width:860px){
  .mcta .ctalk{background:#12B886; color:#fff}
}

/* ── 운항코스 지도 (코드) — 글자 없는 바탕 그림 + SVG 코스 화살표 + HTML 이름표 ──
   이름표 크기·위치는 지도 폭 기준(cqw·%)이라 지도가 커지고 작아져도 같이 움직인다.
   알약은 원래 그림의 알약보다 작아지지 않는다(번역이 짧아도 빈틈이 안 생기게). */
.cmx{position:relative; container-type:inline-size; line-height:1; font-family:inherit}
.cmx-bg{display:block; width:100%; height:auto; min-width:0 !important}
.cmx-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cmx-l{position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); transform:translate(-50%,-50%);
  margin:0; white-space:nowrap; font-size:calc(var(--f) * var(--s, 1) * 1cqw); font-weight:800; letter-spacing:-.03em; color:#fff}
.cmx-l.pill{display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:calc(var(--w) * 1cqw); min-height:calc(var(--h) * 1cqw); padding:0 .42em; border-radius:.3em; background:var(--c)}
.cmx-l.area{font-size:calc(var(--f) * var(--s, 1) * 1cqw); font-weight:900; color:#fff; letter-spacing:-.04em;
  text-shadow:0 0 0 #683c10, .09em 0 0 #683c10, -.09em 0 0 #683c10, 0 .09em 0 #683c10, 0 -.09em 0 #683c10,
    .065em .065em 0 #683c10, -.065em .065em 0 #683c10, .065em -.065em 0 #683c10, -.065em -.065em 0 #683c10}
.cmx-l.area2{font-weight:900; color:#683c10; letter-spacing:-.04em;
  text-shadow:.08em 0 0 #fff, -.08em 0 0 #fff, 0 .08em 0 #fff, 0 -.08em 0 #fff, .06em .06em 0 #fff, -.06em .06em 0 #fff, .06em -.06em 0 #fff, -.06em -.06em 0 #fff}
.cmx-l.river{font-weight:700; color:#fff; text-shadow:0 0 .25em rgba(0,70,130,.55)}
.cmx-l.plain{color:#1d1d1b}
.cmx-c{position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); transform:translate(-50%,-50%);
  width:calc(var(--w) * 1cqw); height:calc(var(--w) * 1cqw); border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-weight:900; font-size:calc(var(--w) * .66cqw); line-height:1; color:#fff; background:#e94949}
.cmx-c.b{background:#f7d745; color:#1d1d1b}
.cmx-c.c{background:#20a137}
.cmx-leg{position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); box-sizing:border-box;
  min-width:calc(var(--w) * 1cqw); min-height:calc(var(--h) * 1cqw); padding:1.1cqw 1.2cqw; border-radius:.6cqw;
  background:#fff; color:#1d1d1b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5cqw;
  background-image:radial-gradient(circle,#00a6d9 45%,transparent 50%),radial-gradient(circle,#00a6d9 45%,transparent 50%),
    radial-gradient(circle,#00a6d9 45%,transparent 50%),radial-gradient(circle,#00a6d9 45%,transparent 50%);
  background-size:.45cqw .45cqw; background-repeat:no-repeat;
  background-position:.6cqw .6cqw, calc(100% - .6cqw) .6cqw, .6cqw calc(100% - .6cqw), calc(100% - .6cqw) calc(100% - .6cqw)}
.cmx-leg b{font-size:1.25cqw; font-weight:600; color:#1c3a5e; letter-spacing:-.03em}
.cmx-leg ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35cqw}
.cmx-leg li{display:flex; align-items:center; gap:.3cqw; font-size:.82cqw; font-weight:600; letter-spacing:-.03em; white-space:nowrap}
.cmx-leg li::before{content:"-"; margin-right:.1cqw}
.cmx-leg .cmx-c{position:static; transform:none; width:1.05cqw; height:1.05cqw; font-size:.7cqw}
.cmx-leg small{font-size:.62cqw; color:#555; letter-spacing:-.03em}
/* 모바일 세로 지도 — 글자가 너무 작아지지 않게 최소 크기 */
.cmx-m .cmx-l{font-size:max(7.5px, calc(var(--f) * var(--s, 1) * 1cqw))}
.cmx-m .cmx-leg{padding:3.2cqw 3.4cqw; border-radius:2cqw; gap:1.6cqw; background-size:1.4cqw 1.4cqw;
  background-position:1.8cqw 1.8cqw, calc(100% - 1.8cqw) 1.8cqw, 1.8cqw calc(100% - 1.8cqw), calc(100% - 1.8cqw) calc(100% - 1.8cqw)}
.cmx-m .cmx-leg b{font-size:4.6cqw; font-weight:800}
.cmx-m .cmx-leg ul{gap:1cqw}
.cmx-m .cmx-leg li{font-size:2.75cqw; gap:.8cqw}
.cmx-m .cmx-leg .cmx-c{width:3.1cqw; height:3.1cqw; font-size:2.1cqw}
.cmx-m .cmx-leg small{font-size:1.9cqw}
/* PC 지도 / 모바일 지도 — 한 번에 하나만 */
.cmx-m{display:none}
@media (max-width:760px){ .cmx-pc{display:none} .cmx-m{display:block} }
.cruise-course .cmap .cmx-pc{min-width:940px}
@media (max-width:760px){ .cruise-course .cmap-in{overflow:visible} }
.cmx-leg em{font-style:normal}
.cmx-m .cmx-leg b{font-size:5.2cqw; font-weight:900; color:#1c3a5e}
.cmx-m .cmx-leg em.ok, .cmx-m .cmx-leg em.bad{color:#d10011; font-weight:800}
.cmx-m .cmx-leg em.wave{color:#266d48; font-weight:800}
/* 영어는 이름이 길어 지도 글씨를 모두 같은 비율로 조금 줄인다 */
html[lang="en"] .cmx{--s:.88}

/* 지도에 가로 스크롤이 생기지 않게 — 지도는 항상 칸 폭에 맞추고, 삐져나온 것은 잘라 낸다.
   범례는 오른쪽 끝에 붙여서 번역이 길어지면 왼쪽으로 늘어나게 */
.cruise-course .cmap-in{overflow:hidden}
.cruise-course .cmap .cmx-pc{min-width:0}
.cmx{overflow:hidden}
.cmx-pc .cmx-leg{left:auto; right:1.35%}

/* 모바일(하단 바가 나오는 폭)에서는 오른쪽 동그란 버튼(예약·상담·맨 위로)을 모두 숨긴다 — PC 전용 */
@media (max-width:860px){ .float{display:none !important} }

/* ── 슬라이드 보강 (아이폰 사파리) ──
   스크립트가 칸 폭을 정하기 전에도 칸이 0 이나 영상 원래 크기(544px)로 커지지 않게 기본 폭을 두고,
   사진·영상은 칸에 절대 위치로 꽉 채운다(비율 칸 안의 height:100% 를 사파리가 못 푸는 경우 방지). */
.ds-gal li, .dn-gal li, .sns-grid.ig-track a{width:min(60vw, 280px); position:relative; overflow:hidden}
.ds-gal li img, .dn-gal li img{position:absolute; inset:0; width:100%; height:100%}
.sns-grid.ig-track a video{position:absolute; inset:0; width:100%; height:100%}

/* 슬라이드 — 가로로 미는 손가락은 슬라이드가 받고, 세로 스크롤은 그대로 */
.ds-slide, .dn-slide, .rv-slide, .ig-slide{touch-action:pan-y}

/* 아이폰이 자동재생 영상 가운데에 띄우는 재생 버튼 숨기기 (배경처럼 쓰는 영상) */
video::-webkit-media-controls-start-playback-button{display:none !important; -webkit-appearance:none}
video::-webkit-media-controls{display:none !important}

/* 모바일 메인 첫 화면 — 문구를 위쪽(하늘)으로 올려 배를 가리지 않게 (PC 그대로) */
@media (max-width:760px){ .hero-copy{align-items:flex-start; padding-top:clamp(28px, 6vh, 56px)} }

/* ── 모바일 메인 첫 화면 : 스크롤 없이 사진·문구·버튼이 한 화면에 (머리 메뉴 77px + 하단 바 53px 을 뺀 높이) ──
   버튼은 사진 맨 아래로, 사진은 배가 버튼 위로 오게 장면마다 위치를 정한다 (PC 그대로) */
@media (max-width:760px){
  .hero{height:calc(100vh - 130px); height:calc(100svh - 130px); min-height:440px; max-height:none}
  .hero-nav{bottom:14px}
  .hero-slide:nth-child(1) img{object-position:center 100%}   /* 주간 — 배를 위로 */
  .hero-slide:nth-child(2) img{object-position:center 50%}    /* 선셋 */
  .hero-slide:nth-child(3) img{object-position:center 55%}    /* 야간 — 배를 문구 아래로 */
}

/* ── 모바일 메인 첫 화면 (영어) : 설명 문구가 길어 줄이 늘어나 배를 가리지 않게 — 글자를 조금 줄이고 억지 줄바꿈을 푼다 ── */
@media (max-width:760px){
  html[lang="en"] .hero-ko{font-size:15px; line-height:1.45; margin-top:16px}
  html[lang="en"] .hero-ko br.mb{display:none}
}

/* ── 이용약관 · 개인정보처리방침 창 (하단 링크) ── */
.legal-dlg{border:0; padding:0; width:min(860px, calc(100% - 40px)); max-height:calc(100% - 60px); border-radius:16px; background:#fff; color:var(--gray-900, #111); box-shadow:0 30px 80px rgba(0,20,50,.35); overflow:hidden}
.legal-dlg[open]{display:flex; flex-direction:column}
.legal-dlg::backdrop{background:rgba(6,20,40,.62)}
html.ld-lock{overflow:hidden}
.ld-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px 16px 28px; border-bottom:1px solid var(--gray-300)}
.ld-title{font-size:21px; font-weight:800; letter-spacing:-.03em}
.ld-x{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--gray-100, #f2f4f7); font-size:26px; line-height:1; cursor:pointer}
.ld-body{overflow-y:auto; padding:6px 28px 40px; -webkit-overflow-scrolling:touch}
.ld-wait{padding:40px 0; text-align:center; color:var(--gray-500, #8a94a3)}
.ld-eff{margin-top:16px; font-size:14px; color:var(--gray-700)}
.ld-body .lead{margin-top:14px; font-size:16px; line-height:1.8; color:var(--gray-700); word-break:keep-all}
.ld-body h2{margin-top:32px; font-size:18px; font-weight:800; letter-spacing:-.03em}
.ld-body h3{margin-top:16px; font-size:16px; font-weight:800}
.ld-body p,.ld-body li{font-size:15px; line-height:1.8; color:var(--gray-700); word-break:keep-all}
.ld-body p{margin-top:8px}
.ld-body ol,.ld-body ul{margin-top:8px; padding-left:22px}
.ld-body ol{list-style:decimal} .ld-body ul{list-style:disc}
.ld-body li{margin-top:3px}
.ld-body .tbl{margin-top:12px; overflow-x:auto}
.ld-body table{width:100%; border-collapse:collapse; font-size:14px; min-width:480px}
.ld-body th,.ld-body td{padding:10px 11px; border-bottom:1px solid var(--gray-300); text-align:left; vertical-align:top; line-height:1.6; color:var(--gray-700); word-break:keep-all}
.ld-body thead th{background:#DFE6F7; color:var(--gray-900, #111); font-weight:700; border-top:2px solid #333; border-bottom:2px solid #333}
.ld-body tbody tr:last-child td{border-bottom:2px solid #333}
.ld-body .box{margin-top:12px; padding:16px 18px; border-radius:10px; background:var(--gray-100, #f2f4f7)}
.ld-body .box p{margin-top:3px}
.ld-body .eff{margin-top:36px; padding-top:18px; border-top:1px solid var(--gray-300); font-weight:700}
.ld-body a{color:var(--ocean-700); text-decoration:underline; text-underline-offset:3px}
html[lang="ja"] .ld-body p,html[lang="ja"] .ld-body li,html[lang^="zh"] .ld-body p,html[lang^="zh"] .ld-body li{word-break:normal}
@media (max-width:760px){
  .legal-dlg{width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0}
  .ld-head{padding:12px 12px 12px 18px}
  .ld-title{font-size:18px}
  .ld-body{padding:4px 18px 40px}
  .ld-body .lead{font-size:15px}
  .ld-body h2{font-size:16.5px; margin-top:26px}
  .ld-body p,.ld-body li{font-size:14.5px}
  .ld-body table{font-size:13.5px}
}