/* ============================================================
   Costa Cruise Busan — Renewal
   Design tokens
   ============================================================ */
:root{
  /* Brand */
  --navy: #0b3d6e;        /* deep marine blue */
  --navy-deep:#072a4d;
  --blue: #1380c4;        /* bright sea blue */
  --sky: #eaf6ff;         /* pale sky background tint */
  --yellow:#ffd400;       /* costa yellow */
  --yellow-deep:#ffb800;
  --coral:#ff6b5a;        /* accent / CTA */
  --coral-deep:#ef4d3c;
  --mint:#18a558;         /* success green — 요금 포함 내역 배지(VER1.148) */
  --cream:#fffdf6;
  --ink:#10243b;
  --ink-soft:#4d6076;
  --line:#e3ecf3;
  --white:#ffffff;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --shadow-soft: 0 18px 40px -18px rgba(11,61,110,.25);
  --shadow-card: 0 10px 30px -12px rgba(11,61,110,.18);

  --font-display: 'Jalnan2','Gmarket Sans','Pretendard',"Noto Sans KR",sans-serif;
  --font-body: 'Pretendard',"Noto Sans KR", -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

section{position:relative;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--blue);
  background:rgba(19,128,196,.08);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--coral);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-deep);
  margin:0;
  line-height:1.3;
}
.section-title{
  font-size:clamp(26px,4vw,40px);
  margin-bottom:14px;
}
/* #ship 섹션 제목의 "코스타 OOO" 선박명 부분 — main.js의 heroTitleHtml()이
   마지막 쉼표 뒤를 이 span으로 감싸 <br>로 새 줄에 배치합니다.
   word-break:keep-all로 선박명 단어 중간이 줄바꿈으로 끊기는 것을
   방지합니다(긴 문구가 화면 폭을 넘길 때 브라우저 기본 줄바꿈이
   글자 단위로 끊어버리는 문제 — VER1.28에서 발견). */
.ship-hero-title-name{
  display:inline-block;
  word-break:keep-all;
}
.section-sub{
  color:var(--ink-soft);
  font-size:16px;
  max-width:560px;
  margin-bottom:42px;
  word-break:keep-all;
}
.section-head{
  text-align:center;
  margin:0 auto 8px;
  max-width:680px;
}
.section-head .section-sub{margin-left:auto;margin-right:auto;}

/* ---------- 선박 선택 탭 (#ship/#cabins/#gallery 공통, VER1.26 신규) ----------
   eyebrow 아래·section-title 위에 위치. 선박이 1개뿐이면 버튼이
   1개만 그려져도 어색하지 않도록 단순한 pill 버튼 스타일로 디자인. */
.ship-select-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.ship-tab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:10px 22px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  font-family:var(--font-body);
}
.ship-tab:hover{border-color:var(--blue);transform:translateY(-1px);}
.ship-tab.active{border-color:var(--blue);background:var(--sky);}
.ship-tab-name{font-size:14.5px;font-weight:800;color:var(--navy-deep);}
.ship-tab.active .ship-tab-name{color:var(--blue);}
.ship-tab-sub{font-size:11.5px;color:var(--ink-soft);}
/* ※ 2026-06-28(VER1.28): "기본" 텍스트 배지(.ship-tab-default)는
   삭제했습니다 — 선택된 탭이 이미 테두리·배경색(파란색)으로 명확히
   구분되어 별도 텍스트 배지가 불필요한 중복 정보였습니다. */
/* "상담문의" 가격 대신 표시되는 안내 문구 — 회색 텍스트로 묻히지
   않도록 브랜드 코랄 컬러로 강조하고, 작은 전화 아이콘과 옅은
   배경 pill을 더해 가격 숫자만큼의 시각적 무게를 줬습니다(메인
   화면에는 더 이상 확정가를 보여주지 않으므로 — 정확한 요금은
   날짜별 노선상세 패널에서 항상 확인 가능). 모든 선박이 이 한
   가지 스타일만 쓰므로 새 선박이 추가돼도 디자인이 자동으로
   통일됩니다. */
.price-num-inquiry{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:800;
  color:var(--coral-deep);
  background:rgba(255,107,90,.1);
  padding:6px 14px;
  border-radius:999px;
  /* <button>으로 렌더링되므로(하단 상담 신청서로 스크롤 이동) 기본 버튼
     테두리/폰트를 지우고 클릭 가능함을 알 수 있게 커서+hover를 추가 */
  border:none;
  font-family:inherit;
  cursor:pointer;
  transition:background-color .2s ease;
}
.price-num-inquiry:hover{background:rgba(255,107,90,.2);}
.price-num-inquiry::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--coral-deep);
  flex-shrink:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  padding:14px 28px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--coral);
  color:#fff;
  box-shadow:0 14px 28px -10px rgba(255,107,90,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(255,107,90,.65);}
.btn-light{
  background:#fff;
  color:var(--navy);
  box-shadow:var(--shadow-card);
}
.btn-light:hover{transform:translateY(-2px);}
.btn-outline{
  background:transparent;
  border:2px solid rgba(255,255,255,.7);
  color:#fff;
}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-block{width:100%;}
.btn-lg{padding:17px 32px;font-size:16px;}

/* ============================================================
   Header / Nav
   ============================================================ */
/* ※ 2026-06-30(VER1.37): 헤더를 데스크탑·모바일 구분 없이 항상 밝은
   흰색 배경으로 고정합니다 — 이전에는 스크롤하기 전(.scrolled 없음)
   에는 투명한 채로 히어로 슬라이드 위에 떠 있어, 슬라이드 사진이
   어두운 경우(수족관 상어 사진 등) 로고와 메뉴 글자가 거의 안 보이는
   문제가 있었습니다. 또한 반투명+blur 조합은 iOS Safari 기종별로
   렌더링이 일관되지 않는 문제도 있었던 전례가 있어, 완전한 불투명
   단색으로 통일해 "스크롤 전/후"나 "슬라이드 사진의 밝기"와 무관하게
   항상 동일하게 또렷한 흰 배경의 헤더를 유지합니다. */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:14px 0;
  background:#ffffff;
  box-shadow:0 4px 18px -10px rgba(11,61,110,.12);
  transition:box-shadow .3s ease, padding .3s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-header.scrolled{
  background:#ffffff;
  box-shadow:0 6px 24px -10px rgba(11,61,110,.18);
  padding:8px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.005em;
  color:var(--navy-deep);
  white-space:nowrap;
  flex-shrink:0;
}
.brand span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.brand-logo{
  height:42px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.brand-logo-sm{height:30px;}

.nav-desktop{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;}
.nav-desktop a{white-space:nowrap;}
.nav-desktop a{
  font-weight:700;font-size:15px;color:var(--navy-deep);
  position:relative;padding:6px 0;
}
.nav-desktop a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--coral);
  transition:width .25s ease;
}
.nav-desktop a:hover::after{width:100%;}

.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.header-phone{
  display:flex;align-items:center;gap:8px;
  font-weight:800;color:var(--navy-deep);font-size:15px;
}
.header-phone svg{flex-shrink:0;}

/* 언어 선택기 (VER1.186) — 지금은 "준비중" 안내용.
   국기는 이미지(images/flags_new/*.gif) 사용 — 이모지 국기는 윈도우에서
   "KR" 글자로 깨진다(VER1.171). 위치: 회사명과 햄버거 사이 여백(모바일 실측 59px). */
.lang-switch{position:relative;flex-shrink:0;}
.lang-current{
  display:flex;align-items:center;gap:3px;
  padding:5px 6px;border:1px solid var(--line);border-radius:10px;
  background:#fff;cursor:pointer;line-height:1;
}
.lang-current:hover{border-color:var(--blue);background:var(--sky);}
.lang-flag{
  width:22px;height:15px;object-fit:cover;border-radius:2px;
  border:1px solid rgba(0,0,0,.08);display:block;
}
.lang-caret{font-size:10px;color:var(--ink-soft);}
.lang-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  min-width:150px;margin:0;padding:5px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:60;
}
.lang-switch.open .lang-menu{display:block;}
.lang-switch.open .lang-caret{color:var(--blue);}
.lang-opt{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink);white-space:nowrap;
}
.lang-opt .lang-check{margin-left:auto;color:var(--blue);font-weight:800;}
.lang-opt.active{background:var(--sky);}
/* 준비중 언어 — 회색 처리 + 눌러도 동작 안 함(JS에서도 막지만 시각적으로도 분명히). */
.lang-opt.disabled{color:var(--ink-soft);cursor:not-allowed;opacity:.7;}
/* 준비중 국기는 흑백으로 흐리게 — 단 흰 바탕 국기(일본)는 흑백처리하면
   테두리가 사라져 "깨진 원"처럼 보인다. 테두리를 진하게 줘서 국기의 사각형
   윤곽이 항상 보이게 한다(로드 실패가 아님을 눈으로 알 수 있게). */
.lang-opt.disabled .lang-flag{
  filter:grayscale(.85);opacity:.7;
  border-color:rgba(0,0,0,.25);
}
.lang-soon{
  margin-left:auto;font-size:10px;font-weight:700;
  color:var(--ink-soft);background:var(--line);
  padding:2px 6px;border-radius:999px;
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:none;background:var(--sky);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:'';display:block;width:20px;height:2px;background:var(--navy-deep);
  position:relative;transition:.25s;
}
.nav-toggle span::before{position:absolute;top:-7px;}
.nav-toggle span::after{position:absolute;top:7px;}
.nav-toggle.active span{background:transparent;}
.nav-toggle.active span::before{top:0;transform:rotate(45deg);}
.nav-toggle.active span::after{top:0;transform:rotate(-45deg);}

.mobile-nav{
  position:fixed;
  top:0;right:0;
  width:min(82vw,340px);
  height:100vh;
  background:#fff;
  z-index:1100;
  box-shadow:none;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  padding:28px 26px;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);box-shadow:-20px 0 50px -20px rgba(11,61,110,.3);}
.mobile-nav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.mobile-nav-close{
  width:38px;height:38px;border-radius:50%;background:var(--sky);border:none;
  font-size:18px;color:var(--navy-deep);cursor:pointer;
}
.mobile-nav ul{display:flex;flex-direction:column;gap:6px;}
.mobile-nav ul a{
  display:block;padding:14px 6px;font-weight:800;font-size:18px;
  color:var(--navy-deep);border-bottom:1px solid var(--line);
}
.mobile-nav .btn{margin-top:24px;}
.nav-scrim{
  position:fixed;inset:0;background:rgba(7,42,77,.45);z-index:1050;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.nav-scrim.show{opacity:1;pointer-events:auto;}

/* 화면에는 보이지 않지만 스크린리더·검색엔진 크롤러는 읽을 수 있는
   텍스트(VER1.62) — 히어로 슬라이드가 계속 바뀌어 문구가 고정되지 않는
   구조라, 페이지의 진짜 제목(h1) 하나를 항상 같은 자리에 심어두는 용도. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
  background:#0b1f33;
  overflow:hidden;
}
.hero .container{
  position:relative;z-index:2;
  width:100%;
  max-width:none;
  padding:0;
}
/* ※ 2026-06-30(VER1.36): 이전에는 .hero-slider에 min-height:640px가
   있어, 브라우저 창을 세로로 작게 줄이면(예: 데스크탑에서 창
   높이를 640px보다 작게 리사이즈) 슬라이더가 실제 뷰포트 높이(100vh)
   보다 강제로 더 커지면서, 그 차이만큼 부모 .hero의 배경색(#0b1f33,
   짙은 남색)이 슬라이더 아래쪽에 띠처럼 비쳐 보이는 문제가 있었습니다.
   슬라이더는 항상 실제 뷰포트 높이(100vh)만큼만 차지하도록 하고,
   너무 작아지는 것은 아래 .hero-slide-bg가 어차피 object-fit:cover로
   항상 화면을 가득 채우므로 별도의 최소 높이 안전장치가 필요하지
   않습니다. */
.hero-slider{
  position:relative;
  overflow:hidden;
  height:100vh;
}
.hero-slide-track{
  position:relative;
  width:100%;
  height:100%;
}
/* 슬라이드 = 배경 사진이 화면 전체를 채우고, 텍스트는 그 위에
   어두운 그라디언트를 깔고 올라갑니다(사진을 최대한 크게 보여주기
   위한 구조 — 기존의 좌/우 절반씩 나누던 2단 그리드를 대체). */
.hero-slide{
  display:none;
  position:absolute;
  inset:0;
  width:100%;height:100%;
}
.hero-slide.active{
  display:block;
  animation:heroFadeIn .6s ease both;
}
@keyframes heroFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
.hero-slide-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-slide-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,26,46,.88) 0%, rgba(7,26,46,.62) 38%, rgba(7,26,46,.18) 65%, rgba(7,26,46,.05) 100%),
    linear-gradient(180deg, rgba(7,26,46,.25) 0%, rgba(7,26,46,0) 22%, rgba(7,26,46,0) 70%, rgba(7,26,46,.55) 100%);
}
.hero-copy{
  position:relative;z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  /* ※ 2026-06-30(VER1.37): justify-content:center였던 것을 flex-end로
     변경했습니다. center일 때는 콘텐츠 전체 블록(배지+제목+설명+버튼+
     통계)의 높이가 슬라이드마다 달라(예: 제목이 2줄인 슬라이드와 3줄인
     슬라이드), 블록이 길어질수록 시작 위치가 위로 더 올라가 padding-top
     (110px)을 무시하고 상단 배지가 헤더 영역과 겹치는 문제가 있었습니다
     (실제로 "일본에서 대만까지" 슬라이드에서 배지가 헤더 뒤로 거의
     숨는 정도로 겹쳤음). flex-end로 바꾸면 padding-bottom(90px)을
     기준으로 아래쪽이 고정되고 위쪽 여백은 콘텐츠가 짧을수록 더
     커지는 방향이라, padding-top은 항상 최소값으로 보장되어 헤더와
     절대 겹치지 않습니다. */
  justify-content:flex-end;
  max-width:640px;
  padding:110px 6vw 90px;
  color:#fff;
}
.hero-copy .eyebrow{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);}
.hero-copy .eyebrow .dot{background:var(--coral);}
.hero-copy h2{
  font-size:clamp(32px,4.6vw,54px);
  margin-bottom:18px;
  letter-spacing:-.01em;
  color:#fff;
}
.hero-copy h2 .hl{
  color:var(--yellow);
  position:relative;
  display:inline-block;
}
.hero-copy p.lead{
  font-size:17px;
  color:rgba(255,255,255,.88);
  max-width:480px;
  margin-bottom:28px;
  line-height:1.6;
  word-break:keep-all;
  /* ※ VER1.43d: line-clamp 제거 — 데스크탑은 100vh 전체를 사용하므로
     lead 문구가 5~6줄이 되어도 유효 공간(약 568px~) 안에 충분히 들어갑니다.
     실측: lead 6줄(약 163px) + 나머지 요소(약 238px) = 401px < 568px.
     justify-content:flex-end 구조라 콘텐츠가 아래에서 위로 쌓이므로
     문구가 길어져도 상단 배지는 헤더와 절대 겹치지 않습니다.
     ─────────────────────────────────────────────────────────────
     [원칙] 히어로 lead 문구는 기획 의도가 있는 마케팅 문구입니다.
     표시 줄 수나 레이아웃 문제가 발생해도 문구를 임의로 수정하지 않고
     반드시 담당자에게 문의 후 결정합니다. */
}
/* 추가설명(heroExtraNote) — 관리자가 채웠을 때만 노출되는 부가 한 줄(선택).
   부제(lead)보다 작고 옅게, 최대 2줄. VER1.96. */
.hero-extra{
  font-size:14px;
  color:rgba(255,255,255,.82);
  line-height:1.55;
  max-width:480px;
  margin:-10px 0 22px;
  word-break:keep-all;
  /* overflow:hidden은 flex 아이템의 min-height:auto를 0으로 바꿔 flex-shrink로
     높이가 0으로 붕괴하므로, flex-shrink:0을 함께 줘 content 높이를 유지한다. */
  max-height:3.1em;overflow:hidden;flex-shrink:0;  /* line-height 1.55 × 2줄 안전장치 */
}
/* §6 안전장치(이중) — 관리자가 권장 글자수(제목 24자·설명 90자 등)를 넘겨
   입력해도 히어로 레이아웃이 깨지지 않도록, CSS에서 최대 높이를 줄 수로
   제한하고 넘치면 잘라낸다. h2/lead는 .hero-copy의 flex 아이템이라
   display:-webkit-box(line-clamp)를 걸면 flex 컨텍스트에서 blockify되며
   .hl(inline-block)와 겹쳐 높이가 0으로 붕괴하는 문제가 있어(실측 확인),
   font-size 상대값(em) 기반 max-height로 클램프한다. 정상 범위 문구는 이
   한계 안이라 영향이 없다. 상한(전 기기): 제목 3줄·설명 6줄. */
.hero-copy h2{ max-height:3.9em; overflow:hidden; flex-shrink:0; }      /* line-height 1.3 × 3줄 */
.hero-copy p.lead{ max-height:9.6em; overflow:hidden; flex-shrink:0; }  /* line-height 1.6 × 6줄 */
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px;}
.hero-stats{
  display:flex;gap:28px;
  flex-wrap:wrap;
}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats strong{font-family:var(--font-display);font-size:23px;color:#fff;}
.hero-stats span{font-size:12.5px;color:rgba(255,255,255,.75);font-weight:600;}

/* ---------- 강조 라벨 (기존의 기울어진 hero-pill을 대체) ----------
   회전된 말풍선 대신, 좌측 상단에 고정된 카드형 라벨 + 좌측 굵은
   강조선 + 살짝 맥동하는 점(live dot)으로 "지금 강조되고 있다"는
   느낌을 분명하게 전달합니다. */
.hero-badge-top{
  align-self:flex-start;
  flex-shrink:0;
  margin-bottom:22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.97);
  padding:11px 18px 11px 14px;
  border-radius:12px;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.45);
  font-weight:800;
  font-size:13px;
  color:var(--navy-deep);
}
.hero-badge-top::before{
  content:'';
  width:8px;height:8px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 0 rgba(255,107,90,.6);
  animation:heroPulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes heroPulse{
  0%{box-shadow:0 0 0 0 rgba(255,107,90,.55);}
  70%{box-shadow:0 0 0 9px rgba(255,107,90,0);}
  100%{box-shadow:0 0 0 0 rgba(255,107,90,0);}
}
.hero-badge-top.tone-korea::before{background:var(--coral);}
.hero-badge-top.tone-oneway::before{background:var(--blue);}
.hero-badge-top.tone-world::before{background:var(--yellow);}
.hero-badge-top.tone-promo::before{background:var(--ink-soft);}

/* ---------- 우하단 노선 정보 카드 ---------- */
.hero-info-card{
  position:absolute;
  right:6vw; bottom:90px;
  z-index:3;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(6px);
  border-radius:18px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(380px, 86vw);
}
.hero-info-card .icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;
  flex-shrink:0;
}
.hero-info-card strong{display:block;font-size:14.5px;color:var(--navy-deep);}
.hero-info-card span{font-size:12px;color:var(--ink-soft);display:block;line-height:1.4;margin-top:2px;}
/* "한국출발" 패턴에서만 이 카드를 클릭하면 일정표 이미지를 볼 수 있음(VER1.52) —
   클릭 가능하다는 걸 알 수 있도록 커서와 hover 강조 효과를 추가. */
.hero-info-card-clickable{
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hero-info-card-clickable:hover, .hero-info-card-clickable:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 26px 48px -16px rgba(0,0,0,.55);
}


/* 하단 도트 인디케이터 — 자동 순환 + 수동 클릭 전환 겸용 */
/* ※ 2026-06-30(VER1.37): 슬라이드 자동순환 선택 버튼(닷 인디케이터)이
   모바일에서 손가락으로 터치하기에도, 데스크탑에서 마우스로 클릭하기에도
   너무 작다는 피드백을 받아 기존 대비 2배 크기로 확대했습니다
   (지름 11px→22px, 활성 닷 너비 34px→58px). 헤더와 겹쳐 보이는 일이
   없도록 top 위치도 헤더 실제 높이보다 충분히 아래로 내렸습니다
   (데스크탑 헤더 높이 약 80px → 닷 top 104px로 24px 여유,
   모바일 헤더 높이 약 64px → 닷 top 86px로 22px 여유). */
.hero-dots{
  position:absolute;
  left:0;right:0;top:104px;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:16px;
}
.hero-dot{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.5);
  border:2px solid rgba(255,255,255,.7);
  cursor:pointer;
  padding:0;
  transition:all .25s ease;
  /* 실제 보이는 점은 작아도, 탭/클릭 가능한 영역은 충분히 크게
     잡아줍니다(터치 타겟 최소 권장 크기 44×44px에 가깝게). 점
     주위로 투명한 패딩 영역을 ::before로 넓혀 작은 점이라도
     누르기 쉽게 만듭니다. */
  position:relative;
}
.hero-dot::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%);
}
.hero-dot.active{
  width:58px;border-radius:11px;
  background:var(--coral);
  border-color:var(--coral);
}
.hero-dot:hover{background:rgba(255,255,255,.85);}
.hero-dot.active:hover{background:var(--coral-deep);}

.wave-divider{
  position:relative;
  display:block;
  width:100%;
  height:80px;
  margin-top:-2px;
}
.hero .wave-divider{
  position:absolute;
  left:0;right:0;bottom:0;
  margin-top:0;
  z-index:1;
}
.wave-divider svg{width:100%;height:100%;display:block;}

/* ============================================================
   Marquee strip (ports)
   ============================================================ */
.port-marquee{
  background:var(--navy);
  overflow:hidden;
  padding:14px 0;
}
.port-marquee .track{
  display:flex;
  gap:48px;
  width:max-content;
  animation:scrollLeft 28s linear infinite;
}
.port-marquee span{
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:.05em;
  opacity:.9;
  display:flex;align-items:center;gap:10px;
  white-space:nowrap;
}
.port-marquee span::before{content:'⚓';color:var(--yellow);}
@keyframes scrollLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================================================
   Generic section spacing
   ============================================================ */
.section{padding:100px 0;}
.section-tight{padding:70px 0;}
.bg-sky{background:var(--sky);}
.bg-navy{background:var(--navy);color:#fff;}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff;}
.bg-navy .section-sub{color:rgba(255,255,255,.75);}

/* ============================================================
   About / why-us cards
   ============================================================ */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.feature-card{
  background:#fff;
  border-radius:var(--radius-md);
  padding:30px 24px;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -16px rgba(11,61,110,.25);}
.feature-card .ico{
  width:52px;height:52px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin-bottom:18px;
}
.feature-card:nth-child(1) .ico{background:#fff4cc;}
.feature-card:nth-child(2) .ico{background:#dff1ff;}
.feature-card:nth-child(3) .ico{background:#ffe3df;}
.feature-card:nth-child(4) .ico{background:#e1f7ea;}
.feature-card h4{font-size:18px;margin-bottom:8px;}
.feature-card p{font-size:14px;color:var(--ink-soft);margin:0;}

/* ============================================================
   Route filter bar
   ============================================================ */
.route-filter-bar{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:22px 26px;
  margin-bottom:36px;
}
.rf-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:160px;
}
.rf-field label{
  font-size:12px;font-weight:800;
  letter-spacing:.04em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.rf-field select{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-size:14.5px;
  font-weight:700;
  font-family:inherit;
  color:var(--navy-deep);
  background:#fbfdff;
}
.rf-field select:focus{outline:none;border-color:var(--blue);background:#fff;}

.rf-field-pair{
  display:flex;
  gap:10px;
  flex:1.4;
  min-width:220px;
}
.rf-sub{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:90px;
}
.rf-sub label{
  font-size:12px;font-weight:800;
  letter-spacing:.04em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.rf-sub select{
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-size:14.5px;
  font-weight:700;
  font-family:inherit;
  color:var(--navy-deep);
  background:#fbfdff;
  width:100%;
}
.rf-sub select:focus{outline:none;border-color:var(--blue);background:#fff;}

.rf-field-search{flex:1.6;min-width:220px;}
.rf-field-search input{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-size:14.5px;
  font-weight:700;
  font-family:inherit;
  color:var(--navy-deep);
  background:#fbfdff;
}
.rf-field-search input::placeholder{font-weight:600;color:var(--ink-soft);}
.rf-field-search input:focus{outline:none;border-color:var(--blue);background:#fff;}

/* ============================================================
   Route card grid
   ============================================================ */
.route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.route-card-tile{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
  border:2px solid transparent;
}
.route-card-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -16px rgba(11,61,110,.28);
  border-color:var(--blue);
}
.rct-img{aspect-ratio:16/10;overflow:hidden;position:relative;}
.rct-img img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.rct-region-tag{
  position:absolute;top:14px;left:14px;
  background:rgba(11,61,110,.85);
  color:#fff;font-size:11.5px;font-weight:800;
  padding:5px 12px;border-radius:999px;
}
.rct-popular-tag{
  position:absolute;top:14px;right:14px;
  background:var(--coral);
  color:#fff;font-size:11px;font-weight:800;
  padding:5px 11px;border-radius:999px;
}
/* 카드 뱃지(마케팅) — 관리자 "메인 노출 관리"의 수동 뱃지 + 자동 판정 뱃지.
   ★위치 고정: 카드 이미지 "우측 상단"(사용자 확정 2026-07-15 — 앞으로 위치
   변동 금지). 지역 태그(좌상단)의 반대편이라 겹치지 않는다. 최대 3개, 우측
   정렬 + 넘치면 아래로 줄바꿈. (VER1.96 좌하단 → VER1.98 우상단 고정.) */
.rct-badges{
  position:absolute;top:12px;right:12px;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;
  max-width:66%; /* 좌상단 지역 태그와 겹치지 않도록 폭 제한 */
  z-index:3;pointer-events:none;
}
.rct-badge{
  font-size:11px;font-weight:800;line-height:1;
  padding:5px 10px;border-radius:999px;
  color:#fff;background:var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  white-space:nowrap;
}
.rct-badge.badge-orange{background:#f2691e;}
.rct-badge.badge-red{background:var(--coral-deep,#e0483d);}
.rct-badge.badge-blue{background:var(--blue,#1f7ae0);}
.rct-badge.badge-green{background:#1f9d63;}
.rct-badge.badge-gold{background:#d9a520;color:#3a2c05;}
.rct-badge.badge-gray{background:rgba(30,41,59,.85);}
.rct-badge.badge-navy{background:var(--navy-deep,#0b3d6e);}
.rct-badge.badge-worldcruise{background:#111827;color:#f6cf5b;border:1px solid #f6cf5b;}
.rct-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.rct-ports{font-size:12.5px;color:var(--ink-soft);font-weight:700;line-height:1.5;}
.rct-title{font-size:19px;color:var(--navy-deep);}
.rct-meta{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft);font-weight:600;}
.rct-meta .rct-meta-sep{display:none;}
.rct-ship{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--blue);
  background:var(--sky);padding:4px 10px;border-radius:999px;
  align-self:flex-start;
  border:1.5px solid transparent;
  cursor:pointer;font-family:inherit;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.rct-ship:hover{
  background:var(--navy);color:#fff;
  border-color:var(--navy);
}
.rct-ship-arrow{
  font-size:11px;font-weight:800;
  opacity:0;max-width:0;overflow:hidden;
  white-space:nowrap;
  transition:opacity .2s ease, max-width .2s ease, margin .2s ease;
}
.rct-ship:hover .rct-ship-arrow{opacity:1;max-width:70px;margin-left:2px;}
.rct-foot{
  margin-top:auto;
  border-top:1px dashed var(--line);
  padding-top:14px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
.rct-price .from{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.rct-price .amt{font-family:var(--font-display);font-size:19px;color:var(--coral-deep);}
/* ---------- USD 가격 + 원화 환산 표시 (환율 연동) ----------
   .usd-price는 카드 가격, 상세 가격박스, 요금플랜표 셀 세 곳에서 모두
   재사용됩니다. 환산 문구(.usd-krw-suffix)는 원래 USD 표시보다 작고
   차분한 보조 정보로 보이도록 별도 스타일을 적용합니다 — 디스플레이용
   큰 폰트(font-display)를 그대로 물려받지 않도록 명시적으로 재정의. */
.usd-price{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.3;}
.usd-krw-suffix{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}
.rct-price .amt .usd-price{align-items:flex-start;}
.rd-price-box .v .usd-price{align-items:center;}
.rct-detail-btn{
  flex-shrink:0;
  font-size:13px;font-weight:800;
  color:var(--navy);
  background:var(--sky);
  padding:9px 16px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.route-card-tile:hover .rct-detail-btn{
  background:var(--navy);
  color:#fff;
}
.route-grid-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:50px 20px;
  color:var(--ink-soft);
  font-size:14.5px;
  background:#fff;
  border-radius:var(--radius-md);
}

/* ---------- 출항일 칩 (동일 노선·다른 출항일 묶음 카드) ----------
   productId가 같은 ROUTES 항목들을 카드 1장으로 묶어 보여줄 때, 이
   칩으로 어느 출항 회차를 보고 있는지 고르게 합니다. 칩을 클릭해도
   카드 전체를 다시 그리지 않고 가격·일정 텍스트와 data-route-id만
   갱신합니다(updateCardActiveRoute, main.js) — 그리드 재렌더링 없이
   빠르게 전환됩니다. productId를 쓰지 않는(=출항 회차가 1개뿐인)
   노선은 이 칩 자체가 렌더링되지 않아 기존 카드와 완전히 동일합니다. */
.rct-date-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:2px;
}
.rct-chip{
  font-size:11.5px;font-weight:800;
  color:var(--ink-soft);
  background:var(--sky);
  border:1.5px solid transparent;
  border-radius:999px;
  padding:5px 11px;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.rct-chip:hover{border-color:var(--blue);}
.rct-chip.is-active{
  background:var(--navy);
  color:#fff;
}

/* ---------- 검색 결과 개수 + 더보기 페이지네이션 ----------
   노선이 늘어나도 화면 세로 길이가 무한정 길어지지 않도록, 필터링
   결과를 한 번에 다 그리지 않고 ROUTE_GRID_PAGE_SIZE(main.js)개씩만
   보여줍니다. "더보기"를 누르면 그만큼 더 그려집니다. */
.route-grid-sync-status{
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:10px;
  opacity:.75;
}
.route-grid-footer{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.route-grid-count{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:600;
}
.route-grid-more-btn{
  font-size:14px;font-weight:800;
  color:var(--navy-deep);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:13px 30px;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.route-grid-more-btn:hover{
  background:var(--sky);
  border-color:var(--blue);
  transform:translateY(-1px);
}

/* ============================================================
   Route detail overlay
   ============================================================ */
.route-detail-scrim{
  position:fixed;inset:0;z-index:1500;
  background:rgba(7,16,28,.55);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.route-detail-scrim.open{opacity:1;pointer-events:auto;}
.route-detail{
  position:fixed;
  top:0;right:0;
  width:min(94vw,840px);
  /* ── iOS Safari 뷰포트 대응 ─────────────────────────────────
     height:100vh 는 iOS Safari에서 주소바·탭바 UI를 포함한
     전체 화면 높이로 계산되어 실제 보이는 영역보다 커집니다.
     100dvh(Dynamic Viewport Height)는 브라우저 UI를 제외한
     실제 표시 영역만 정확히 계산합니다.
     구형 iOS(≤15.3) fallback으로 100vh를 먼저 선언합니다. */
  height:100vh;
  height:100dvh;
  background:var(--cream);
  z-index:1600;
  overflow-y:auto;
  /* ── iOS 스크롤 끊김 방지 ───────────────────────────────────
     -webkit-overflow-scrolling:touch  : iOS 관성 스크롤 활성화
     overscroll-behavior:contain       : 패널 끝에서 부모 스크롤로
                                         전파되는 스크롤 체인 차단
                                         (iPhone 12 중간 멈춤 방지) */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  box-shadow:none;
}
.route-detail.open{transform:translateX(0);box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);}
.route-detail-inner{
  padding:80px 40px 60px;
  /* ── iOS 홈 인디케이터 대응 ─────────────────────────────────
     env(safe-area-inset-bottom): iPhone X 이후 홈바/라운드 영역
     높이를 OS가 자동 제공합니다 (iPhone 15 = 약 34px,
     iPhone 12 = 약 34px, iPhone SE = 0px).
     기본 하단 패딩(60px) + 홈바 높이를 더해 콘텐츠가 절대
     가려지지 않도록 합니다. */
  padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px));
  position:relative;
}
.route-detail-close{
  position:fixed;
  top:24px;right:calc(min(6vw,40px) + 24px);
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:none;
  box-shadow:var(--shadow-card);
  font-size:18px;color:var(--navy-deep);
  cursor:pointer;z-index:5;
}
.route-detail-head{padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:28px;}
#rdShip{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(11,61,110,.3);text-decoration-thickness:1.5px;text-underline-offset:3px;}
#rdShip:hover{text-decoration-color:currentColor;}

/* ============================================================
   패널 레이어링 — 기항지 목록과 도시상세는 노선상세(route-detail) 위에
   한 단계씩 더 쌓입니다. 노선상세는 그대로 열려 있고, 그 위로
   기항지 목록 → 도시상세 순으로 슬라이드되어, 닫으면 보던 화면으로
   자연스럽게 복귀합니다 (메인 페이지로 스크롤되지 않음).
   ============================================================ */
.port-list-scrim{z-index:1550;}
/* port-list-panel / port-detail 은 .route-detail 을 상속하므로
   height·overflow·overscroll 은 이미 위에서 적용된 상태입니다.
   z-index와 추가 필요 속성만 여기서 선언합니다. */
.port-list-panel{
  z-index:1650;
  /* route-detail 과 동일한 iOS 대응 속성 명시적 재선언
     (상속이 아닌 class 독립성 보장) */
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.port-detail-scrim-top{z-index:1560;}
.port-detail{
  z-index:1660;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* ---------- 전체 선박 목록(fleet-list-panel) + 그 위의 선박 인포메이션(ship-detail) ----------
   fleet-list-panel은 port-list-panel과 같은 "목록" 레이어 성격이라 그 바로 위 단계
   (1570/1670)로, ship-detail은 fleet-list-panel/port-detail보다도 항상 위에 떠야 하는
   "가장 안쪽" 레이어라 전체 중 최상위(1580/1680)로 배정합니다.
   ⚠️ 이 값들이 없으면 .route-detail 기본값(scrim 1500 / 패널 1600)으로 같이 떨어져,
   같은 z-index끼리는 "나중에 DOM에 나온 요소가 위로" 규칙이 적용되므로 — fleet-list-panel이
   ship-detail보다 HTML에서 나중에 나온다는 이유만으로 그 위를 덮어버리는 버그가 있었습니다
   (VER1.47에서 발견·수정). 새로운 오버레이 레이어를 추가할 때는 항상 여기 목록에 명시적
   z-index를 등록해 DOM 순서에 우연히 기대지 않도록 할 것. */
.fleet-list-scrim{z-index:1570;}
.fleet-list-panel{
  z-index:1670;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.ship-detail-scrim{z-index:1580;}
.ship-detail{
  z-index:1680;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.route-detail-meta{
  display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:var(--ink-soft);font-weight:600;
  margin:14px 0;
}
.route-detail-summary{font-size:15px;color:var(--ink-soft);line-height:1.8;max-width:560px;margin:0;word-break:keep-all;}
.route-detail-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start;}
.route-detail-side{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:18px;position:sticky;top:20px;}
.rd-price-box{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px 24px;text-align:center;
  display:flex;flex-direction:column;gap:4px;
}
.rd-price-box .l{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.rd-price-box .v{font-family:var(--font-display);font-size:28px;color:var(--coral-deep);}
.rd-price-box .u{font-size:12px;color:var(--ink-soft);}
.rd-route-line{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:18px 22px;
  font-size:13.5px;color:var(--ink-soft);font-weight:700;
  line-height:1.8;
  display:flex;flex-direction:column;gap:12px;
}
.rd-port-link{
  color:var(--blue);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(19,128,196,.35);
  transition:color .2s ease;
}
.rd-port-link:hover{color:var(--coral-deep);}
.rd-ports-all-btn{
  align-self:flex-start;
  background:var(--sky);border:none;
  color:var(--navy);font-weight:800;font-size:12.5px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.rd-ports-all-btn:hover{background:var(--navy);color:#fff;}
.t-loc-link{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,0);transition:color .2s ease;}
.t-loc-link:hover{color:var(--coral-deep);}
.rd-cta-note{
  background:var(--brass-pale, #fff4cc);
  border:1px solid rgba(255,184,0,.35);
  border-radius:var(--radius-md);
  padding:20px 22px;
}
.rd-cta-note p{font-size:13.5px;color:var(--navy-deep);margin:0 0 14px;font-weight:700;}

/* ============================================================
   Route meta line (legacy, still used in detail header)
   ============================================================ */
.route-meta{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
  font-size:13px;
  color:var(--ink-soft);
  font-weight:700;
}
.route-meta .dot-line{flex:1;border-bottom:2px dotted var(--line);margin:0 12px;margin-bottom:6px;}

.timeline{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:0;
}
/* ---------- 타임라인 펼치기/접기 (긴 일정용) ----------
   항목이 TIMELINE_COLLAPSE_THRESHOLD(main.js)를 넘는 노선에서만
   보이는 버튼입니다. 기존 8개 노선처럼 항목이 적은 노선에서는 JS가
   이 버튼 자체를 display:none 처리해 평소처럼 안 보입니다. */
.timeline-toggle{
  display:block;
  width:100%;
  margin-top:6px;
  padding:12px 18px;
  background:var(--sky);
  border:1.5px dashed var(--blue);
  border-radius:var(--radius-md);
  color:var(--navy-deep);
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
  transition:all .2s ease;
}
.timeline-toggle:hover{background:var(--white);border-color:var(--coral);color:var(--coral-deep);}
/* 접힌 상태에서 앞/뒤 사이에 끼워지는 "중간 OO개 더보기" 안내줄.
   타임라인 점선(timeline-item::before)과 자연스럽게 이어지도록
   같은 들여쓰기(64px+18px)를 맞춥니다. */
.timeline-collapsed-note{
  margin:4px 0 4px 82px;
  padding:10px 16px;
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  text-align:center;
}
.timeline-item{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  position:relative;
  padding-bottom:30px;
}
.timeline-item:last-child{padding-bottom:0;}

/* ============================================================
   Route detail — 객실별 요금표 (특정 출항 회차 전용 데이터가 있을 때만 노출)
   timeline과 같은 컬럼(1번째 grid column)에, sticky한 가격 사이드바와는
   별도로 풀폭으로 배치됩니다.
   ============================================================ */
.rd-rate-table-wrap{
  grid-column: 1;
  margin-top:36px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px 26px;
}
.rd-rate-table-title{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--navy-deep);
  margin:0 0 16px;
}
.rd-rate-table-scroll{overflow-x:auto;}
.rd-rate-table{
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
  min-width:0;
}
.rd-rate-table th, .rd-rate-table td{
  padding:8px 4px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.rd-rate-table thead th{
  background:var(--sky);
  color:var(--navy-deep);
  font-weight:800;
  font-size:10.5px;
  line-height:1.3;
  white-space:nowrap;
}
.rd-rate-table tbody td{
  white-space:normal;
  word-break:keep-all;
}
.rd-rate-table tbody td:first-child,
.rd-rate-table tbody td:nth-child(2),
.rd-rate-table tbody td:nth-child(3){
  white-space:nowrap;
}
.rd-rate-table tbody td:first-child,
.rd-rate-table tbody td:nth-child(2){
  font-weight:700;
  color:var(--navy-deep);
  text-align:left;
}
.rd-rate-table tbody tr:hover{background:#fbfdff;}
.rd-rate-table .rd-rate-main{
  color:var(--coral-deep);
  font-weight:800;
}
.rd-rate-notes{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rd-rate-notes li{
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.6;
  padding-left:14px;
  position:relative;
}
.rd-rate-notes li::before{
  content:'※';
  position:absolute;
  left:0;
}

/* ============================================================
   Route detail — 요금 플랜 × 객실 등급 표 (USD 기준, 해외 사이트 연동 노선)
   기존 .rd-rate-table(국내 KRW 출항 회차용 6열 표)과는 별도로, 플랜
   (예: All Inclusive / My Cruise) × 객실 등급(인사이드/오션뷰/발코니/
   스위트) 형태의 요금을 보여줄 때 씁니다. data.rows 대신 data.planFare가
   있는 노선에서만 렌더링됩니다 (renderRdRateTable 참고).
   ============================================================ */
.rd-plan-fare-wrap{
  grid-column: 1;
  margin-top:36px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px 26px;
}
.rd-plan-fare-sub{
  font-size:12.5px;color:var(--ink-soft);
  margin:-6px 0 16px;
}
.rd-plan-fare-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:0;
}
.rd-plan-fare-table th, .rd-plan-fare-table td{
  padding:10px 6px;
  text-align:center;
  border-bottom:1px solid var(--line);
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* thead: 플랜명 셀은 줄바꿈 허용하여 테이블이 컨테이너 밖으로 넘치지 않도록 함
   (플랜 수가 3개 이상일 때 white-space:nowrap을 쓰면 좌우 스크롤 발생) */
.rd-plan-fare-table thead th{
  background:var(--sky);
  color:var(--navy-deep);
  font-weight:800;
  font-size:12px;
  white-space:normal;
  word-break:keep-all;
  min-width:0;
}
/* tbody 첫 열(객실 등급명)은 줄바꿈 최소화 — 한글 등급명은 짧아서 대부분 1줄 유지 */
.rd-plan-fare-table tbody th{
  text-align:left;
  font-weight:800;
  color:var(--navy-deep);
  background:#fbfdff;
  white-space:nowrap;
  font-size:12px;
}
.rd-plan-fare-table .rd-plan-tag{
  display:inline-block;
  margin:4px 0 0;
  font-size:10px;
  font-weight:700;
  color:#9a5b00;
  background:rgba(255,184,0,.18);
  border:1px solid rgba(255,184,0,.4);
  border-radius:999px;
  padding:2px 6px;
  white-space:normal;
  word-break:keep-all;
  width:auto;
  line-height:1.3;
}
.rd-plan-fare-table thead th .rd-plan-tag{margin:4px auto 0;display:block;width:fit-content;max-width:100%;}
.rd-plan-fare-table tbody tr:hover{background:#fbfdff;}
.rd-plan-fare-table .rd-plan-price{
  color:var(--coral-deep);
  font-weight:800;
}
.rd-plan-fare-table .rd-plan-price .usd-price{align-items:center;}
.rd-plan-fare-table .usd-krw-suffix{
  white-space:normal;
  font-size:9.5px;
  font-weight:600;
  display:block;
}
.rd-plan-fare-table .rd-plan-best{
  background:#fff4cc;
}
.rd-plan-fare-table .rd-plan-na{
  color:var(--ink-soft);
  font-weight:400;
}

/* ============================================================
   Route detail — 취소료 규정 및 환불 안내 (출항일 기준 자동 계산된 표)
   ============================================================ */
.rd-cancel-wrap{
  grid-column: 1;
  margin-top:20px;
  background:#fff7ee;
  border:1px solid rgba(255,184,0,.35);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px 26px;
}
.rd-cancel-wrap .rd-rate-table-title{color:#9a5b00;}
.rd-cancel-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:0;
}
.rd-cancel-table th, .rd-cancel-table td{
  padding:9px 10px;
  text-align:center;
  border-bottom:1px solid rgba(154,91,0,.15);
}
.rd-cancel-table th:first-child, .rd-cancel-table td:first-child,
.rd-cancel-table th:nth-child(2), .rd-cancel-table td:nth-child(2){
  white-space:nowrap;
}
.rd-cancel-table th:last-child, .rd-cancel-table td:last-child{
  white-space:normal;
  line-height:1.4;
}
.rd-cancel-table thead th{
  background:rgba(255,184,0,.18);
  color:#9a5b00;
  font-weight:800;
  font-size:12px;
}
.rd-cancel-table tbody td:first-child{font-weight:700;color:var(--navy-deep);text-align:left;}
.rd-cancel-table tbody td:last-child{font-weight:800;color:var(--coral-deep);}
.rd-cancel-wrap .rd-rate-notes li::before{color:#9a5b00;}

/* ============================================================
   Route detail — 요금 포함 / 불포함 내역 (카드형, VER1.148)
   ------------------------------------------------------------
   섹션 제목 앞에 원형 아이콘 배지(포함=초록 체크, 불포함=빨강 X) +
   제목 아래 같은 색상 밑줄. 각 항목은 제목(굵게)+부가설명(회색 소문자)
   2줄 카드로 표시. 승조원팁(크루즈 선상팁)은 불포함 목록의 첫 항목
   자리에 별도의 2열×3행 표로 렌더링된다(js/main.js의
   buildGratuityTable/renderFareLists 참고).
   ============================================================ */
.rd-inclusion-wrap{
  grid-column: 1;
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.rd-inclusion-col{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px 24px;
  /* 🚨 min-width:0 — 없으면 박스가 화면 밖으로 삐져나간다(VER1.167에서 실측).
     grid/flex 아이템의 기본값 min-width:auto는 "내용의 최소 폭보다 작아지지
     않는다"는 뜻이라, 안쪽 표에 white-space:nowrap인 긴 셀이 있으면 트랙 폭
     (331px)을 무시하고 아이템이 통째로(627px) 커진다.
     ⚠️ 이게 없으면 안쪽 .rd-gratuity-table-scroll의 overflow-x:auto가 **발동조차
     못 한다** — 이미 필요한 만큼 폭을 받아버려 스크롤할 것이 없기 때문이다.
     실제 사고: 유럽 노선 선상팁의 EUR+USD 병기가 길어지자 박스가 우측으로
     벗어났다. 문구를 줄여도 환율·자릿수가 바뀌면 재발하므로 구조로 막는다. */
  min-width:0;
}
.rd-inclusion-title-incl,
.rd-inclusion-title-excl{
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:2px solid currentColor;
}
.rd-inclusion-title-incl{color:var(--mint);}
.rd-inclusion-title-excl{color:var(--coral-deep);}
.rd-inclusion-title-incl::before,
.rd-inclusion-title-excl::before{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:22px;
  text-align:center;
}
.rd-inclusion-title-incl::before{content:'✓'; background:var(--mint);}
.rd-inclusion-title-excl::before{content:'✕'; background:var(--coral-deep);}
.rd-inclusion-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* min-width:0은 위 .rd-inclusion-col과 같은 이유(flex 아이템의 min-width:auto).
   overflow-wrap은 공백 없는 긴 문자열(URL·긴 금액 표기)이 통째로 넘치는 것을 막는다.
   word-break:keep-all — 한글은 단어 중간에서 끊지 않아야 읽힌다. */
.rd-inclusion-list li{
  font-size:13px; line-height:1.5;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.rd-fare-item-label{display:block; color:var(--ink); font-weight:600;}
.rd-fare-item-note{display:block; color:var(--ink-soft); font-size:11.5px; margin-top:2px;}

/* 승조원팁(크루즈 선상팁) 표 — 불포함 내역 첫 항목 */
.rd-gratuity-caption{display:block; color:var(--ink); font-weight:700; margin-bottom:8px;}
.rd-gratuity-table-scroll{overflow-x:auto;}
/* table-layout:fixed — 칸 너비를 **내용이 아니라 비율로** 정한다(VER1.167).
   auto였을 때는 머리글 "인사이드·오션뷰·발코니"(nowrap)가 폭을 독식해 좁은
   화면에서 "스위트" 칸이 65px까지 눌렸다. 고정 배분이라 문구가 길어져도
   칸 비율이 흔들리지 않는다. */
.rd-gratuity-table{width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed;}
.rd-gratuity-table col.rd-gratuity-col-age{width:30%;}
.rd-gratuity-table col.rd-gratuity-col-rate{width:35%;}
/* 모든 칸에서 **줄바꿈을 허용한다**(VER1.167). 예전엔 전부 nowrap이라 유럽
   노선의 "€11($12.6) (10박/€110($126.1))" 같은 긴 병기 문구가 표를 넓히고,
   그 표가 박스를, 박스가 화면을 밀어냈다.
   word-break:keep-all — "10박"·"4세 이상" 같은 한글이 중간에서 끊기지 않도록.
   overflow-wrap:anywhere — 공백 없는 긴 토막(금액 표기)이 칸을 넘지 않도록. */
.rd-gratuity-table th, .rd-gratuity-table td{
  padding:7px 8px;
  text-align:center;
  border-bottom:1px solid var(--line);
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.rd-gratuity-table thead th{
  background:var(--sky);
  color:var(--navy-deep);
  font-weight:800;
  font-size:11px;
}
.rd-gratuity-table tbody td:first-child{
  text-align:left;
  font-weight:700;
  color:var(--navy-deep);
}
.rd-gratuity-footnote{display:block; margin-top:8px; color:var(--ink-soft); font-size:11px;}

/* ============================================================
   전체 일정표 PDF 다운로드 / 인쇄 버튼 (화면 표시용)
   ============================================================ */
.rd-print-btn-wrap{
  margin-top:18px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.rd-print-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:800;
  color:var(--navy-deep);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:11px 20px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.rd-print-btn:hover{
  background:var(--sky);
  border-color:var(--blue);
  transform:translateY(-1px);
}
.rd-print-btn-note{
  font-size:12px;
  color:var(--ink-soft);
}

/* ============================================================
   PDF/인쇄 전용 콘텐츠 — 화면에서는 항상 숨김, @media print에서만 표시
   ------------------------------------------------------------
   서버 없는 정적 사이트이므로 브라우저 자체 "인쇄 → PDF로 저장" 기능을
   PDF 생성 엔진으로 활용합니다. 아래 요소들은 평소엔 보이지 않다가
   인쇄할 때만 나타나고, 반대로 화면용 UI(타임라인 카드·버튼 등)는
   인쇄할 때 숨겨집니다 — 전환 규칙은 이 파일 맨 아래 @media print
   블록에 모여 있습니다.
   ============================================================ */
.rd-print-only{display:none;}
.rd-print-header{margin-bottom:14px;}
.rd-print-brand{font-size:10.5pt;font-weight:800;letter-spacing:.04em;color:#0b3d6e;}
.rd-print-title{font-size:19pt;margin:6px 0 4px;color:#0b1f33;}
.rd-print-meta-line{font-size:11pt;font-weight:700;color:#333;margin-bottom:2px;}
.rd-print-date{font-size:9.5pt;color:#666;margin-bottom:10px;}
.rd-print-itinerary-table{width:100%;border-collapse:collapse;margin-top:6px;}
.rd-print-itinerary-table th,
.rd-print-itinerary-table td{
  border:1px solid #999;
  padding:5px 7px;
  font-size:9.5pt;
  text-align:left;
  vertical-align:top;
  line-height:1.45;
}
.rd-print-itinerary-table thead th{
  background:#e8edf2;
  font-size:9.5pt;
  font-weight:800;
}
.rd-print-itinerary-table tr.is-sea td{color:#555;}
.rd-print-itinerary-table td.rd-print-day{white-space:nowrap;font-weight:800;width:52px;}
.rd-print-itinerary-table td.rd-print-port{white-space:nowrap;font-weight:700;width:100px;}
.rd-print-itinerary-table td.rd-print-time{white-space:nowrap;width:100px;}
.rd-print-terminal{font-size:8.5pt;color:#555;margin-top:2px;}
.rd-print-footer{
  margin-top:20px;
  padding-top:12px;
  border-top:1px solid #ccc;
  font-size:9pt;
  color:#555;
  line-height:1.7;
}
.rd-print-footer p{margin:0 0 3px;}

.timeline-item::before{
  content:'';
  position:absolute;
  left:31px;top:46px;bottom:0;
  width:2px;
  background:var(--line);
}
.timeline-item:last-child::before{display:none;}
.t-day{
  width:64px;height:64px;border-radius:50%;
  background:var(--white);
  border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-display);
  color:var(--navy-deep);
  font-size:13px;
  z-index:1;
  flex-shrink:0;
  text-align:center; /* 숫자 자릿수 증가 시 항상 중앙 정렬 유지 */
}
/* strong(숫자) — 3자리 이상이면 font-size를 줄여 원 밖으로 넘치지 않도록 합니다.
   .is-3digit / .is-4digit 클래스는 main.js buildTimelineItemHtml()에서
   자동으로 부여합니다(dayLabel 길이 기준: 3자 이상 → is-3digit,
   범위 표기 포함 4자 이상 → is-range). */
.t-day strong{font-size:15px;text-align:center;width:100%;display:block;line-height:1.1;}
.t-day.is-3digit strong{font-size:12px;}
/* 장거리 노선의 dayRange(예: "104-105") 표시용 — 타원형으로 폭만 넓힘 */
.t-day.is-range{width:auto;min-width:64px;padding:0 8px;border-radius:32px;}
.t-day.is-range strong{font-size:11px;}
.timeline-item.is-port .t-day{background:var(--yellow);border-color:var(--yellow);}
.timeline-item.is-sea .t-day{background:var(--sky);}
.t-body{
  background:#fff;
  border-radius:var(--radius-md);
  padding:18px 20px;
  box-shadow:var(--shadow-card);
}
.t-body .t-loc{font-weight:800;font-size:16px;color:var(--navy-deep);margin-bottom:4px;}
.t-body .t-time{font-size:13px;color:var(--ink-soft);font-weight:600;}
/* 경관/이벤트 지점(scenicNote): 기항 정보 아래, 한 톤 낮춰 들여쓰기해 부가 정보임을
   시각적으로 구분(왼쪽 실선 강조). 첫 줄(기항)보다 작고 옅게. */
.t-body .t-scenic{
  margin-top:7px;padding-left:10px;
  border-left:2px solid var(--sky);
  font-size:12.5px;color:var(--ink-soft);font-weight:500;line-height:1.5;
}
/* 두 줄 고정 배치(VER1.166):
     1행 ✦ 이벤트명 시각   ← "무엇을 언제"
     2행 [분류 배지] [자세히 ▸]  ← 부가 정보
   한 줄에 다 넣으면 이벤트명이 길 때 배지·버튼이 제멋대로 줄바꿈돼 자리가
   흔들린다. 줄을 나눠 위치를 고정했다. */
.t-body .t-scenic .t-scenic-head{display:block;}
.t-body .t-scenic .t-scenic-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:5px;
}
/* 이벤트명이 1순위, 시각이 2순위(VER1.165). 예전엔 시각이 굵은 남색이고
   이벤트명이 평범한 본문이었는데, 고객이 먼저 알고 싶은 건 "무엇을 하는가"라
   강조를 이벤트명으로 옮겼다. 시각은 한 톤 낮춰 뒤따른다. */
.t-body .t-scenic .t-scenic-name{font-weight:800;color:var(--navy);}
.t-body .t-scenic .t-scenic-time{font-weight:600;color:var(--ink-soft);}

/* 경관 이벤트 분류 배지(VER1.165) — 기항지 시각 태그(.t-tag)·텐더 배지
   (.t-tender-tag)와 **같은 알약 모양**을 쓴다(새 UI 언어를 만들지 않음).
   배경색만으로 구분하지 않도록 분류마다 이모지를 함께 넣었다(색각 이상 고려).
   색은 기존 4종(dep 주황/arr 초록/sea 파랑/텐더 흙주황)과 겹치지 않게 골랐다. */
.t-body .t-scenic .t-scenic-badge{
  display:inline-block;
  font-size:11px;font-weight:800;
  padding:2px 9px;border-radius:999px;
  vertical-align:middle;
  white-space:nowrap;
  /* 자리 간격은 .t-scenic-meta의 flex gap이 잡는다(margin 쓰지 않음). */
}
.t-body .t-scenic .t-scenic-badge.is-view{background:#d8f0ee;color:#0d6d68;}
.t-body .t-scenic .t-scenic-badge.is-night{background:#e6e3f7;color:#4a3d94;}
.t-body .t-scenic .t-scenic-badge.is-info{background:#eceff2;color:#4d6076;}
/* 경관 이벤트 아이콘 — 기항지(🚢)·텐더(⚓)와 구분되는 표식.
   이모지 대신 기하 문자(✦)를 쓴 이유: 기기마다 모양이 달라지지 않고,
   작은 크기에서도 또렷하며, 타임라인의 차분한 톤을 해치지 않는다. */
.t-body .t-scenic .t-scenic-icon{
  color:var(--coral-deep,#c2410c);font-size:11px;margin-right:4px;vertical-align:1px;
}
/* 설명 아코디언 — 터미널 주소 토글(.t-term-toggle)과 같은 상호작용.
   버튼은 문장 흐름 안에 인라인으로 두어 "더 읽을 게 있다"만 조용히 알린다. */
.t-scenic-toggle{
  padding:1px 7px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--navy);font-size:11px;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.6;transition:background .2s,color .2s,border-color .2s;
}
.t-scenic-toggle::after{content:"▸";font-size:9px;margin-left:3px;display:inline-block;transition:transform .2s;}
.t-scenic-toggle:hover{background:var(--sky);border-color:var(--navy-light,#b0c4d8);}
.t-scenic-toggle.is-open{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);}
.t-scenic-toggle.is-open::after{transform:rotate(90deg);}
.t-scenic-panel{
  margin-top:6px;padding:8px 10px;border-radius:8px;
  background:var(--sky);color:var(--ink);font-size:12.5px;line-height:1.65;font-weight:400;
}
.rd-print-scenic{font-size:12px;color:#555;margin-top:2px;}
.rd-print-scenic-detail{color:#777;}

/* ============================================================
   Timeline — 터미널 주소 아코디언
   ·  단일 터미널: 이름 + 주소 + 지도 버튼을 가로로 배치
   ·  복수 터미널: 번호 뱃지 포함, 항목 간 점선 구분
   ·  이름·주소 모두 word-break:break-word 로 자연스럽게 줄바꿈
   ============================================================ */
.t-terminal-wrap{margin-top:8px;}

/* ── 토글 버튼 ─────────────────────────────────────────────── */
.t-term-toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:3px 12px 3px 10px;
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  line-height:1.5;white-space:nowrap;max-width:100%;
}
.t-term-toggle em{
  font-style:normal;font-weight:600;
  color:var(--coral-mid,#e07a5f);font-size:11px;
}
.t-term-toggle:hover{background:var(--sky);color:var(--navy-deep);border-color:var(--navy-light,#b0c4d8);}
.t-term-toggle.is-open{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);}
.t-term-toggle.is-open em{color:rgba(255,255,255,.8);}
.t-term-toggle::after{content:"▸";font-size:9px;transition:transform .2s;display:inline-block;margin-left:2px;}
.t-term-toggle.is-open::after{transform:rotate(90deg);}

/* ── 패널 ──────────────────────────────────────────────────── */
.t-term-panel{
  margin-top:6px;
  padding:10px 12px;
  background:#f7fafd;
  border:1px solid var(--line);
  border-radius:var(--radius-sm,6px);
}
.t-term-panel[hidden]{display:none;}

/* ── 목록 ──────────────────────────────────────────────────── */
.t-term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}

/* ── 터미널 아이템: 번호(선택) | 텍스트 블록 | 지도 버튼 ─── */
.t-term-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0; /* flex 자식이 부모를 초과하지 않도록 */
}
.t-term-panel.is-multi .t-term-item + .t-term-item{
  border-top:1px dashed var(--line);padding-top:10px;
}

/* 번호 뱃지 */
.t-term-num{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--navy-deep);color:#fff;
  font-size:10px;font-weight:800;
  margin-top:1px; /* 텍스트 첫 줄과 수직 정렬 */
}

/* 텍스트 블록: name + addr 세로 배치, 이 블록이 남은 공간 모두 차지 */
.t-term-text{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.t-term-name{
  font-weight:700;color:var(--navy-deep);
  font-size:12px;line-height:1.4;
  /* 영문 긴 이름도 자연스럽게 줄바꿈 */
  word-break:break-word;overflow-wrap:anywhere;
}
.t-term-addr{
  font-size:11px;color:var(--ink-soft);
  line-height:1.5;
  word-break:break-word;overflow-wrap:anywhere;
}

/* 지도 버튼: 텍스트 블록 오른쪽에 고정, 상단 정렬 */
.t-term-map{
  flex-shrink:0;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;font-weight:700;
  color:var(--coral-deep,#c0392b);
  text-decoration:none;white-space:nowrap;
  padding:2px 7px;border-radius:4px;
  border:1px solid rgba(192,57,43,.2);
  transition:background .15s;
  margin-top:1px;
}
.t-term-map:hover{background:rgba(192,57,43,.08);}

/* ── 반응형 (480px 이하) ───────────────────────────────────── */
@media(max-width:480px){
  .t-term-panel{padding:8px 10px;}
  .t-term-name{font-size:11.5px;}
  .t-term-addr{font-size:10.5px;}
  .t-term-map{font-size:10.5px;padding:2px 6px;}
}
.t-tag{
  display:inline-block;
  font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;
  margin-left:8px;
  vertical-align:middle;
  /* time 필드가 길어져도 자동 줄바꿈되도록 — white-space:nowrap 제거.
     "09:00-17:30 기항 / 23:30 야간 포인트"처럼 긴 time은 '/'나 공백에서
     자연스럽게 줄바꿈됩니다. */
  white-space:normal;
  word-break:keep-all;
  line-height:1.4;
}
.t-tag.dep{background:#ffe9c2;color:#9a5b00;}
.t-tag.arr{background:#d9f2e3;color:#137a3f;}
.t-tag.sea{background:#e6f0fb;color:#2a5d96;}

/* 텐더 상륙항 배지(VER1.156) — 기항지 이름 옆.
   .t-tag(입항/출항 시각)와 나란히 놓이므로 같은 알약 모양을 쓰되, 시각
   태그들과 성격이 달라(안내·주의) 채도를 낮춘 흙빛 주황으로 구분한다.
   배경색만으로 구분하지 않도록 ⚓ 아이콘을 함께 넣었다(색각 이상 고려). */
.t-tender-tag{
  display:inline-block;
  font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;
  margin-left:8px;
  vertical-align:middle;
  white-space:nowrap;
  line-height:1.4;
  background:#fdece1;color:#c2410c;
  border:1px solid #f6c9ab;
  cursor:help;
}
/* 인쇄물에서는 색이 안 나올 수 있어(흑백 출력) 괄호 문구로만 구분한다. */
.rd-print-tender{
  margin-left:4px;
  font-size:10px;font-weight:700;
  color:#c2410c;
  white-space:nowrap;
}

/* ============================================================
   Ports grid
   ============================================================ */
.port-filter-note{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:14px 20px;
  margin-bottom:24px;
  font-size:13.5px;font-weight:700;color:var(--navy-deep);
}
.port-filter-note button{
  background:#fff;border:1.5px solid var(--line);
  color:var(--ink-soft);font-weight:700;font-size:12.5px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;
}
.port-filter-note button:hover{border-color:var(--coral);color:var(--coral-deep);}

/* ---------- 대권역(글로벌 리전) 필터 탭 — 1차 탭 ----------
   GLOBAL_REGION_INFO에 등록된 권역 중 실제로 PORT_INFO에 도시가 있는
   권역만 자동 생성됩니다. 지금은 "아시아" 하나뿐이라 JS가 이 영역을
   숨겨두지만(renderPortGlobalRegionTabs 참고), 지중해·캐리비안 등
   새 권역의 노선이 추가되는 순간 자동으로 나타납니다. 국가 탭(2차)
   보다 한 단계 위 위계라는 걸 보여주기 위해 더 크고 진한 스타일을
   씁니다. */
.port-global-region-tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:16px;
}
.port-global-region-tab{
  background:var(--cream);border:1.5px solid var(--line);
  color:var(--navy-deep);font-weight:800;font-size:14px;
  padding:10px 22px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;
}
.port-global-region-tab:hover{border-color:var(--coral);color:var(--coral-deep);}
.port-global-region-tab.active{
  background:var(--coral);border-color:var(--coral);color:#fff;
  box-shadow:0 10px 20px -8px rgba(255,107,90,.5);
}

/* ---------- 국가별 필터 탭 — 2차 탭 ----------
   PORT_INFO의 country 값에서 자동 생성됩니다("전체" + 등장하는 국가
   전부). 노선/도시 필터가 걸려 있거나, 대권역이 "전체"로 선택된
   상태일 때는 JS가 이 영역을 비우고 display:none 처리합니다
   (renderPortCountryTabs 참고) — 대권역을 먼저 좁혀야만 그 권역의
   국가 탭이 나타나는 구조라, 국가가 31개로 늘어나도 한 번에 다
   쏟아지지 않습니다. */
.port-country-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:22px;
}
.port-country-tab{
  background:#fff;border:1.5px solid var(--line);
  color:var(--ink-soft);font-weight:700;font-size:13px;
  padding:8px 18px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;
}
.port-country-tab:hover{border-color:var(--coral);color:var(--coral-deep);}
.port-country-tab.active{
  background:var(--navy-deep);border-color:var(--navy-deep);color:#fff;
}

/* ---------- 지역별 그룹 (일본처럼 도시가 많을 때 소제목으로 구분) ---------- */
.port-region-group{margin-bottom:32px;}
.port-region-group:last-child{margin-bottom:0;}
.port-region-title{
  font-size:15px;font-weight:800;color:var(--navy-deep);
  margin:0 0 16px;
  padding-left:12px;
  border-left:4px solid var(--coral);
}

.port-grid{display:block;}
.port-region-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.port-region-grid-flat{margin-top:0;}
.port-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  aspect-ratio:16/11;
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.port-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(11,61,110,.3);}
.port-card[data-hidden="true"]{display:none;}
.port-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.port-card:hover img{transform:scale(1.06);}
.port-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,42,77,0) 35%, rgba(7,42,77,.88) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;
  color:#fff;
}
.port-card .tag{
  align-self:flex-start;
  background:var(--coral);
  font-size:11px;font-weight:800;
  padding:5px 12px;border-radius:999px;
  margin-bottom:10px;
}
.port-card h4{color:#fff;font-size:22px;margin-bottom:6px;}
.port-card p{font-size:13.5px;color:rgba(255,255,255,.85);margin:0;max-width:90%;}
.port-card .port-card-cta{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;color:#fff;
  background:rgba(255,255,255,.18);
  padding:7px 14px;border-radius:999px;
  align-self:flex-start;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.port-card:hover .port-card-cta{opacity:1;transform:translateY(0);}
.port-card.no-photo{
  background:linear-gradient(135deg, #0b3d6e 0%, #1380c4 60%, #2aa7d8 100%);
}
.port-card.no-photo::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,212,0,.25), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.12), transparent 50%);
}
.port-card.no-photo .overlay{background:linear-gradient(180deg, rgba(7,42,77,0) 30%, rgba(7,42,77,.82) 100%);}

/* ---------- Coming-soon port cards (no image/content yet) ---------- */
.port-card-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #6b7d8f 0%, #8fa1b3 60%, #aab9c7 100%);
  font-size:46px;
  opacity:.85;
}
.port-card.port-card-coming-soon .overlay{
  background:linear-gradient(180deg, rgba(40,50,60,0) 30%, rgba(40,50,60,.82) 100%);
}
.port-card-cta-soon{
  background:rgba(255,255,255,.22) !important;
  opacity:1 !important;transform:translateY(0) !important;
}
/* 사진 없는 기항지 카드에 국기를 대체 이미지로 보여준다(VER1.24 도입).
   VER1.169 확정 스타일 — 사진 카드와 완전히 같은 처리:
   · 국기가 카드를 여백 없이 꽉 채운다(object-fit:cover, letterbox 아님 —
     카드 비율에 안 맞는 가장자리는 잘려나가는 걸 허용).
   · 이미지 위에 어두운 오버레이(아래 .flag-scrim + 기존 .overlay 그라디언트)를
     항상 얹어 흰 도시명이 어느 국기 위에서도 읽히게 한다.
   회색 그라디언트 배경은 국기가 로드되기 전/실패 시의 바탕으로 남긴다. */
.port-card-flag-placeholder{
  opacity:1;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #4f6275 0%, #6b7d8f 55%, #8fa1b3 100%);
}
/* 국기를 카드 전체로 꽉 채운다. `.port-card img`(width/height:100%)와 같은
   처리라 특이도를 맞추려 선택자에 img를 붙였다. */
.port-card img.port-card-flag-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* 항상 얹는 어두운 오버레이(검정 28%) — 흰 텍스트 가독성용. 기존 .overlay의
   하단 그라디언트에 더해, 국기 윗부분(그라디언트가 옅은 곳)까지 균일하게
   덮는다. 국기 img 위, 텍스트(.overlay)는 그 위라 그대로 읽힌다. */
.port-card-flag-placeholder::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.28);
  pointer-events:none;
}
/* 국기 파일이 없어 로드 실패한 경우(flagImgFailed) — 국기 img를 감추고
   회색 그라디언트 바탕만 남긴다(어느 나라인지 텍스트는 .overlay에 그대로). */
.port-card-flag-placeholder.flag-load-failed img.port-card-flag-img{display:none;}
.port-card-flag-placeholder.flag-load-failed::after{background:rgba(0,0,0,.12);}
/* 밝은 국기 위 도시명 대비 보강(국기 카드에 한해). */
.port-card-flag-placeholder + .overlay{ text-shadow:0 1px 3px rgba(7,42,77,.6); }

/* ============================================================
   Port detail overlay (city landmarks)
   ============================================================ */
.port-detail-hero{
  position:relative;
  height:240px;
  margin:-80px -40px 0;
  border-radius:0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.port-detail-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,42,77,.15) 30%, rgba(7,42,77,.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 40px;
}
.port-detail-hero.port-detail-hero-placeholder{
  background:linear-gradient(135deg, #6b7d8f 0%, #8fa1b3 60%, #aab9c7 100%);
}
/* 상세 히어로 국기 배지 — 공통 국기 스타일(VER1.168). 히어로가 어두운
   그라디언트라 대비를 위해 흰 배경을 주고, 카드/명소와 같은 3:2 크롭·둥근
   모서리·얇은 테두리를 쓴다. 큰 그림자·흰 링은 제거(디자인 방향). */
.port-detail-hero-flag{
  display:none;
  position:absolute;
  top:22px;left:50%;
  transform:translateX(-50%);
  height:66px;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:7px;
  border:1px solid var(--line);
  background:#fff;
}
.port-detail-hero.port-detail-hero-has-flag .port-detail-hero-overlay{
  background:linear-gradient(180deg, rgba(7,42,77,.05) 40%, rgba(7,42,77,.88) 100%);
}
.port-spot-list{margin-top:30px;display:flex;flex-direction:column;gap:36px;}
.port-spot-empty{
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:32px 28px;
  text-align:center;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.8;
}
/* 노선의 기항지 정보가 PORT_INFO에 아직 하나도 없을 때(예: 신규 권역
   노선을 막 추가했는데 도시 데이터를 깜빡한 경우) 빈 화면 대신 표시 */
.port-grid-empty{
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:40px 28px;
  text-align:center;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.8;
}
.port-spot{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center;}
.port-spot:nth-child(even){direction:rtl;}
.port-spot:nth-child(even) > *{direction:ltr;}
.port-spot-img{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;}
.port-spot-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* 명소 자리에 사진 대신 국기가 들어갈 때(VER1.169) — 국기 카드와 같은
   처리로 통일: 국기가 자리를 여백 없이 꽉 채우고(cover 크롭), 어두운
   오버레이를 얹는다. 회색 그라디언트는 로드 전/실패 시 바탕. */
.port-spot-img-flag{
  position:relative;
  background:linear-gradient(135deg, #4f6275 0%, #6b7d8f 55%, #8fa1b3 100%);
}
.port-spot-img-flag img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* 🔆 명소 자리 국기는 **어둡게 하지 않는다**(VER1.170, 운영자 지시).
   카드와 달리 이 자리에는 국기 위에 얹히는 흰 글씨가 없다(명소 이름·설명은
   이미지 아래 흰 배경에 진한 글씨). 오버레이는 흰 텍스트 가독성용이므로
   여기서는 쓸 이유가 없고, 국기만 어두워져 손해였다. 보통 밝기로 보여준다. */
.port-spot-img-flag.flag-load-failed img{display:none;}
.port-spot-img-placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #6b7d8f 0%, #8fa1b3 60%, #aab9c7 100%);
  font-size:40px;opacity:.85;
}
.port-spot-num{
  font-family:var(--font-display);font-size:13px;color:var(--coral-deep);
  margin-bottom:6px;display:block;
}
.port-spot-text h3{font-size:19px;color:var(--navy-deep);margin-bottom:6px;}
.port-spot-text .sub{font-size:13px;color:var(--blue);font-weight:700;margin-bottom:10px;line-height:1.5;}
.port-spot-text p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin:0;word-break:keep-all;}

/* ============================================================
   Fleet grid (Explore Costa's Fleet — 전체 선박 목록 카드)
   port-card와 동일한 시각 언어(사진+그라디언트+오버레이 텍스트)를
   그대로 재사용해, 기항지 목록과 톤을 통일합니다. 각 카드 요소는
   HTML에서 class="port-card fleet-card"로 함께 부여되므로 기본
   레이아웃/호버 효과는 위쪽 .port-card 규칙에서 그대로 상속받고,
   여기서는 선박 카드 전용 디테일(톤수 배지, 사진 없을 때 처리)만
   추가합니다. */
.fleet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.fleet-card .tonnage-badge{
  align-self:flex-start;
  background:rgba(255,255,255,.2);
  font-size:11px;font-weight:700;
  padding:4px 11px;border-radius:999px;
  margin-bottom:8px;
  color:#fff;
}
.fleet-card h4{color:#fff;font-size:21px;margin-bottom:4px;}
.fleet-card .fleet-card-en{
  display:block;
  font-size:12px;color:rgba(255,255,255,.7);
  margin-bottom:8px;letter-spacing:.02em;
}
.fleet-card-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #0b3d6e 0%, #1380c4 60%, #2aa7d8 100%);
  font-size:46px;
  opacity:.85;
}

/* ============================================================
   Ship detail overlay (코스타 플릿 선박 인포메이션)
   port-detail-hero와 동일한 패턴을 공유해 톤을 통일합니다.
   ============================================================ */
.ship-detail-hero{
  position:relative;
  height:240px;
  margin:-80px -40px 0;
  border-radius:0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:#0b3d6e;
}
.ship-detail-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,42,77,.15) 30%, rgba(7,42,77,.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 40px;
}
.ship-detail-hero.ship-detail-hero-placeholder{
  background:linear-gradient(135deg, #0b3d6e 0%, #1380c4 60%, #2aa7d8 100%);
}
.ship-detail-hero.ship-detail-hero-placeholder::before{
  content:'🛳️';
  position:absolute;
  right:30px;bottom:18px;
  font-size:64px;
  opacity:.25;
}

/* ============================================================
   Ship detail — 선박 소개 영상 (클릭 시에만 로드되는 lazy-load)
   포스터 이미지를 배경으로 깔아두고 재생 버튼만 먼저 보여줍니다.
   실제 <video>/<iframe>은 main.js가 클릭 시점에 주입합니다 — 모달을
   열기만 해서는 영상 트래픽이 전혀 발생하지 않습니다.
   ============================================================ */
.sd-video-wrap{margin:22px 0 0;}
.main-video-wrap{margin:0 0 56px;}
.main-video-wrap .sd-video-frame{max-width:920px;margin:0 auto;}
.main-video-wrap .sd-block-title{text-align:center;font-size:18px;}
.main-video-wrap .sd-video-caption{text-align:center;max-width:560px;margin:0 auto 18px;}
.sd-video-caption{
  font-size:13px;color:var(--ink-soft);line-height:1.7;
  margin:0 0 14px;
}
.sd-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  background-color:#0b3d6e;
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow-card);
}
.sd-video-frame video, .sd-video-frame iframe{
  width:100%;height:100%;
  display:block;
  border:none;
}
.sd-video-play{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(7,42,77,.05) 0%, rgba(7,42,77,.45) 100%);
  border:none;cursor:pointer;
  transition:background .2s ease;
}
.sd-video-play:hover{background:linear-gradient(180deg, rgba(7,42,77,.1) 0%, rgba(7,42,77,.55) 100%);}
.sd-video-play-icon{
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  transition:transform .2s ease;
}
.sd-video-play:hover .sd-video-play-icon{transform:scale(1.08);}

.sd-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin:22px 0 0;
}
.sd-gallery-item{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-card);}
.sd-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}

.sd-comingsoon{
  margin-top:24px;
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:28px 24px;
  text-align:center;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.8;
}

.sd-body{
  margin-top:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.sd-block-title{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--navy-deep);
  letter-spacing:.02em;
  margin:0 0 16px;
}
.sd-spec-card, .sd-services-card{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px 24px;
}
.sd-spec-table{display:flex;flex-direction:column;}
.sd-spec-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.sd-spec-row:last-child{border-bottom:none;}
.sd-spec-label{color:var(--ink-soft);font-weight:600;flex-shrink:0;}
.sd-spec-value{color:var(--navy-deep);font-weight:800;text-align:right;}
/* 위성 전화·팩스 번호 — 스펙 테이블 마지막 행에 표시되며
   국번(00870)을 포함한 전체 번호를 모노스페이스로 강조합니다.
   복수 번호는 " / "로 구분해 표시됩니다.
   출처: ship_phone_numbers.pdf (코스타 공식 자료) */
.sd-tel{
  font-family:'Courier New', Courier, monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--navy-deep);
  font-weight:700;
}
.sd-services{display:flex;flex-direction:column;gap:11px;}
.sd-services li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--ink-soft);font-weight:600;line-height:1.5;
}
.sd-service-dot{
  flex-shrink:0;margin-top:6px;
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);
}
.sd-note{
  margin:22px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
  text-align:right;
}

/* ============================================================
   Ship detail — Deck Plans 카드 (VER1.28 신규)
   ------------------------------------------------------------
   sd-body(스펙/서비스 2단 그리드) 바로 아래, 전체 너비로 배치되는
   별도 카드입니다. 평면도 이미지는 가로로 긴 비율(약 1.88:1)이라
   2단 그리드보다 1열로 쌓아 보여주는 쪽이 가독성이 좋습니다.
   ============================================================ */
.sd-deckplans-card{
  margin-top:24px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px 24px;
}
.sd-deckplans-images{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sd-deckplan-thumb{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
  background:none;
  line-height:0;
  transition:border-color .2s ease, transform .2s ease;
}
.sd-deckplan-thumb:hover{border-color:var(--blue);transform:translateY(-1px);}
.sd-deckplan-thumb img{width:100%;height:auto;display:block;}
.sd-deckplan-thumb-zoom{
  position:absolute;
  right:10px;bottom:10px;
  background:rgba(7,42,77,.78);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  display:flex;align-items:center;gap:4px;
  opacity:0;
  transition:opacity .2s ease;
}
.sd-deckplan-thumb:hover .sd-deckplan-thumb-zoom{opacity:1;}
/* 모바일(호버 없는 기기)에서는 항상 살짝 보이게 — 클릭 가능함을 알림 */
@media (hover:none){
  .sd-deckplan-thumb-zoom{opacity:.92;}
}
.sd-deckplans-files{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.sd-deckplan-file{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--sky);
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.sd-deckplan-file:hover{background:#dcefff;transform:translateY(-1px);}
.sd-deckplan-file-icon{font-size:22px;flex-shrink:0;}
.sd-deckplan-file-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sd-deckplan-file-label{font-size:14px;font-weight:800;color:var(--navy-deep);}
.sd-deckplan-file-size{font-size:12px;color:var(--ink-soft);font-weight:600;}
/* iOS 전용 저장 안내 툴팁 ── Safari PDF 뷰어에서 공유→저장 방법 안내 */
.sd-deckplan-file-ios-tip{
  font-size:11px;
  color:var(--blue);
  font-weight:600;
  margin-top:2px;
  line-height:1.4;
}
/* iOS 버튼 — <a>와 동일한 시각 스타일, 추가 button 리셋 */
button.sd-deckplan-file{
  width:100%;
  cursor:pointer;
  border:none;
  text-align:left;
  font-family:inherit;
}
button.sd-deckplan-file:active{background:#dcefff;transform:translateY(-1px);}
.sd-deckplan-file-arrow{
  margin-left:auto;
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  box-shadow:var(--shadow-card);
}

/* ============================================================
   Gallery (masonry-ish)
   ============================================================ */
.gallery-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.gallery-tab{
  padding:10px 22px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  color:var(--ink-soft);
  transition:all .2s ease;
}
.gallery-tab.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:14px;
}
.gallery-item{
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;
}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item.big{grid-column:span 2;grid-row:span 2;}
.gallery-item .gi-zoom{
  position:absolute;right:10px;top:10px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--navy);
  opacity:0;transition:opacity .2s ease;
}
.gallery-item:hover .gi-zoom{opacity:1;}
.gallery-item[data-cat]{display:none;}
.gallery-item.show{display:block;}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  /* iOS Safari 등에서 주소창(툴바)이 보였다 사라질 때 100vh/inset:0는 "툴바
     없는 큰 뷰포트" 기준이라, 중앙정렬한 이미지가 실제 보이는 영역 기준으로는
     위/아래로 밀려 보인다(아이폰에서 미리보기가 상단으로 올라가 보이던 원인).
     dvh(동적 뷰포트 높이)로 실제 보이는 영역에 딱 맞춰 중앙정렬한다. dvh 미지원
     구형 브라우저는 앞줄 100vh 폴백을 쓴다. */
  height:100vh;
  height:100dvh;
  background:rgba(7,16,28,.92);
  display:none;
  align-items:center;justify-content:center;
  padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:min(92vw,1100px);
  max-height:86vh;
  max-height:86dvh;
  border-radius:14px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;top:24px;right:28px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;border:none;cursor:pointer;
}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  border:none;font-size:20px;cursor:pointer;
}
.lightbox-nav.prev{left:24px;}
.lightbox-nav.next{right:24px;}
/* 일정표 이미지처럼 여러 장을 순회할 필요 없는 단일 이미지 모드에서는
   이전/다음 버튼을 숨김(VER1.52) — openScheduleLightbox()에서 부여. */
.lightbox.single-mode .lightbox-nav{display:none;}
/* 일정표 이미지는 세로로 매우 긴 포스터형 이미지(실측 1527×17059px)라,
   기존 max-height:86vh 제한을 그대로 적용하면 가로폭이 실처럼 눌려
   내용을 알아볼 수 없게 됩니다. 대신 폭 기준으로만 제한하고 세로는
   전체 노출 + 오버레이 자체를 스크롤 가능하게 해 포스터처럼 읽도록
   합니다. 닫기 버튼은 position:fixed로 바꿔 스크롤해도 항상 눌러
   닫을 수 있게 유지합니다. */
.lightbox.single-mode{
  align-items:flex-start;
  overflow-y:auto;
  padding:70px 20px;
}
.lightbox.single-mode img{
  max-width:min(92vw,720px);
  max-height:none;
}
.lightbox.single-mode .lightbox-close{position:fixed;}

/* 카드 썸네일 원본 미리보기(contain-fit) — 세로로 긴 포스터형인 일정표와 달리
   일반 비율(항해노선도 등) 원본을 뷰포트 정중앙에 잘림 없이 띄운다. single-mode의
   상단정렬(align-items:flex-start)·세로 스크롤·max-height:none를 여기서 되돌려
   ①수직/수평 중앙 정렬 ②이미지를 화면 안에 통째로(object-fit:contain, 세로도
   90vh 이내로 축소) 넣는다. 이렇게 하면 이미지가 화면 위에 붙지 않고 위아래로
   여백이 생겨, 상단 고정 닫기(X) 버튼이 이미지 바깥 오버레이 영역에 놓여 이미지
   크기와 무관하게 항상 클릭된다. */
.lightbox.single-mode.contain-fit{
  align-items:center;
  overflow-y:hidden;
  padding:64px 20px;
}
.lightbox.single-mode.contain-fit img{
  max-width:min(94vw,1200px);
  max-height:82vh;
  max-height:82dvh;
  width:auto;height:auto;
  object-fit:contain;
}
/* 닫기 버튼은 이미지가 아무리 커도 오버레이 우상단에 확실히 보이도록 대비를
   높이고(반투명 → 짙은 배경) 이미지보다 위(z-index)에 둔다. */
.lightbox.contain-fit .lightbox-close{
  position:fixed;top:18px;right:18px;z-index:2010;
  background:rgba(7,16,28,.72);
  border:1px solid rgba(255,255,255,.35);
}
.lightbox.contain-fit .lightbox-close:hover{background:rgba(7,16,28,.92);}

/* ============================================================
   Ship facilities feature rows
   ============================================================ */
.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.feature-row.reverse .feature-row-img{order:2;}
.feature-row-img{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3;
}
.feature-row-img img{width:100%;height:100%;object-fit:cover;display:block;}
.feature-row-text .num{
  font-family:var(--font-display);
  font-size:14px;color:var(--coral);
  margin-bottom:10px;
  display:block;
}
.feature-row-text h3{font-size:28px;margin-bottom:16px;}
.feature-row-text p{color:var(--ink-soft);font-size:15.5px;margin-bottom:20px;word-break:keep-all;}
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.chip-list li{
  background:var(--sky);
  color:var(--navy);
  font-size:13px;font-weight:700;
  padding:8px 14px;
  border-radius:999px;
}

/* ============================================================
   Cabin cards
   ============================================================ */
.cabin-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.cabin-card{
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
}
.cabin-card .cabin-img{height:160px;overflow:hidden;}
.cabin-card .cabin-img img{width:100%;height:100%;object-fit:cover;}
.cabin-card .cabin-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.cabin-card h4{font-size:17px;margin-bottom:4px;}
.cabin-card .cabin-size{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-bottom:14px;}
.cabin-card .cabin-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px;word-break:keep-all;}
.cabin-card .cabin-price{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
.cabin-card .cabin-price .from{font-size:12px;color:var(--ink-soft);}
.cabin-badge{
  position:absolute;
  margin:14px;
  background:var(--yellow);
  color:var(--navy-deep);
  font-size:11px;font-weight:800;
  padding:5px 10px;border-radius:999px;
}
.cabin-img{position:relative;}
/* 사진이 아직 없는 객실 등급(예: 신규 선박의 인사이드/오션뷰)을
   다른 등급과 똑같은 사진으로 채우는 대신 보여주는 안내 카드.
   회색 배경+아이콘으로 "사진 아님"이 한눈에 구분되도록 디자인. */
.cabin-img-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--sky);
  color:var(--ink-soft);
}
.cabin-img-placeholder-icon{font-size:30px;opacity:.5;}
.cabin-img-placeholder-text{font-size:12.5px;font-weight:700;}

/* ============================================================
   Notice / FAQ
   ============================================================ */
.notice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.notice-card{
  background:#fff;
  border-radius:var(--radius-md);
  padding:26px;
  box-shadow:var(--shadow-card);
}
.notice-card h4{font-size:16px;margin-bottom:10px;display:flex;gap:8px;align-items:center;}
.notice-card ul{font-size:13.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:8px;}
.notice-card li{padding-left:16px;position:relative;word-break:keep-all;}
.notice-card li::before{content:'•';position:absolute;left:0;color:var(--coral);font-weight:900;}

.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-q{
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-weight:800;
  font-size:15.5px;
  color:var(--navy-deep);
  word-break:keep-all;
}
.faq-q .plus{
  width:26px;height:26px;border-radius:50%;
  background:var(--sky);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .3s ease;
  font-size:15px;color:var(--blue);
  margin-left:14px;
}
.faq-item.open .faq-q .plus{transform:rotate(135deg);}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-a-inner{padding:0 24px 22px;font-size:14.5px;color:var(--ink-soft);word-break:keep-all;}

/* FAQ 답변 안에 넣는 설명 이미지 (VER1.233: 반입 제한 전자제품)
   🚨 width/height 속성을 HTML에 반드시 함께 적을 것 — 없으면 이미지가 늦게 로드되며
      아코디언이 펼쳐진 뒤 높이가 튄다(CLS). main.js의 FAQ 토글이 이미지 load 시점에
      maxHeight를 다시 재도록 돼 있지만(드레스코드 SVG 때문), 비율을 미리 알려주는 쪽이 낫다. */
.faq-img{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin:14px 0 6px;
  border:1px solid var(--line);
  border-radius:8px;
}
.faq-img-cap{display:block;font-size:12.5px;color:var(--ink-soft);opacity:.85;}

/* ---------- 드레스 코드 가이드 (FAQ 아코디언 내부, VER1.26: +토글 패턴으로 통일) ----------
   다른 FAQ 항목들과 똑같이 "+" 클릭으로 펼쳐지는 하나의 질문
   항목으로 통합했습니다(이전엔 FAQ 목록 아래 항상 펼쳐진 별도
   카드였습니다). 펼쳤을 때 안에 3개 카드(캐주얼/스마트 캐주얼/
   정장)에 SVG 일러스트(남녀 한 쌍)를 넣어 글로만 설명하던 복장
   안내를 한눈에 이해할 수 있게 구성했습니다. */
.dresscode-intro{margin-bottom:18px;}
.dresscode-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0;
}
.dresscode-card{
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:16px 14px 18px;
  text-align:center;
}
.dresscode-card img{
  width:100%;
  max-width:150px;
  height:auto;
  display:block;
  margin:0 auto 10px;
}
.dresscode-card h4{font-size:14.5px;color:var(--navy-deep);margin-bottom:6px;}
.dresscode-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;word-break:keep-all;}
.dresscode-note{
  margin-top:16px;
  font-size:12.5px;
  color:var(--ink-soft);
  opacity:.85;
}
.dresscode-warning{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.dresscode-warning .dresscode-note{
  margin-top:0;
  flex:1;
}
.dresscode-warning-img{
  width:160px;
  max-width:38%;
  height:auto;
  flex-shrink:0;
  border-radius:var(--radius-md);
}

/* ============================================================
   Reservation / Consultation form
   ============================================================ */
.reserve-section{
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.reserve-section::before{
  content:'';
  position:absolute;
  top:-120px;right:-120px;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(255,212,0,.25), transparent 70%);
}
/* 🚨 트랙을 minmax(0, …)로 적는다 — `1fr`은 `minmax(auto,1fr)`이라 **최소 폭이 내용 크기**다.
   그래서 안에 잘 안 줄어드는 요소가 있으면 트랙이 컨테이너보다 커지고,
   상위의 overflow-x:hidden이 초과분을 감춰 **가로 스크롤 없이 오른쪽이 잘려 나간다**
   (320px에서 트랙 372px vs 컨테이너 272px, VER1.235에서 발견 → VER1.237에서 수정).

   자식마다 min-width:0을 다는 방법도 있지만, 트랙 정의를 고치는 쪽을 택했다 —
   자식이 늘어나도 자동으로 적용되고 원인(트랙 산정)을 직접 고치기 때문이다.
   ⚠️ 트랙만 고쳐서는 부족하다. 안에서 안 줄어드는 요소는 따로 처리해야 한다(아래 Turnstile). */
.reserve-wrap{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:50px;
  position:relative;
  z-index:2;
}
.reserve-info h2{color:#fff;}
.reserve-info .section-sub{color:rgba(255,255,255,.75);margin-bottom:30px;}
.reserve-contact{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:30px;
}
.reserve-contact .ri{
  display:flex;align-items:center;gap:14px;
  color:#fff;
}
.reserve-contact .ri .ico{
  width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;
}
/* 텍스트 칸이 아이콘을 뺀 나머지 폭을 **전부** 쓰게 한다.
   기본값(flex:0 1 auto)이면 내용 크기에 딱 맞춰져, 몇 px 모자라 2행이 불필요하게 접힌다. */
.reserve-contact .ri .ri-text{flex:1 1 auto;}
.reserve-contact .ri strong{display:block;font-size:15px;}
.reserve-contact .ri span{font-size:13px;color:rgba(255,255,255,.65);}

/* ---------- 주소 줄바꿈 고정 — 공용 (VER1.235 신설 · VER1.236에서 공용으로 승격) ----------
   우편번호와 "부산광역시" 전체 표기가 붙으면서(VER1.233) 글자 수가 늘어,
   화면 폭에 따라 아무 데서나 줄이 바뀌던 것을 고정한다.

   🚨 <br> 하나로 처리하지 말 것 — 폰트나 컨테이너 폭이 바뀌면 다시 틀어진다.
      두 행을 각각 **블록 요소**로 만들어 줄바꿈 위치 자체를 구조로 못 박았다.
   🚨 min-width:0이 없으면 flex/grid 자식이 내용보다 작아지지 못해 **가로 스크롤**이 생긴다
      (flex·grid item의 기본 min-width는 auto다). keep-all과 함께 반드시 유지할 것.

   📌 여기 있는 것은 **레이아웃 규칙뿐**이다(색·크기 없음). 그래서 어두운 배경의
      #reserve 카드와 밝은 배경의 contact 카드에 **같은 클래스를 그대로** 쓸 수 있다.
      글자 크기처럼 문맥마다 달라지는 값은 아래 각 화면 블록에 따로 둔다 —
      여기에 색이나 크기를 넣는 순간 한쪽 화면이 깨진다.
   ⚠️ 쓰는 곳: index.html #reserve 연락처 카드 / contact.html 방문상담 카드. */
.ri-text{
  min-width:0;
  word-break:keep-all;   /* 한글이 단어 중간에서 끊기지 않게 */
}
.ri-addr{display:block;}
.ri-addr-sub{display:block;}
/* "2층(NC백화점, 장전동)" 덩어리는 어떤 폭에서도 쪼개지지 않는다.
   → 2행이 넘칠 때 줄이 바뀌는 지점은 이 덩어리 뒤의 공백뿐이다. */
.ri-nowrap{white-space:nowrap;font-size:inherit;}

/* 좁은 화면: 2행만 한 단계 축소(주소 본문인 1행의 위계는 유지).
   🚨 기준 글자 크기가 화면마다 달라서(#reserve 13px / contact 16px) 공용으로 묶지 않는다. */
@media (max-width:399px){
  .reserve-contact .ri .ri-addr-sub{font-size:12px;}   /* 기준 13px */

  /* VER1.237 — 320px 잘림을 고치면서 이 칸의 폭이 **정상값으로 좁아졌다**(372→342 등).
     그 결과 주소 1행이 혼자 접히기 시작해, 아이콘·간격을 줄여 글자 폭을 벌고
     1행을 한 단계 낮춘다. 390px에서 다시 "1행 + 2행"으로 떨어진다.
     📌 320·360px은 그래도 접힌다 — contact 카드와 같은 판단으로 허용한다(VER1.236). */
  .reserve-contact .ri{gap:8px;}
  .reserve-contact .ri .ico{width:38px;height:38px;font-size:16px;}
  .reserve-contact .ri .ri-addr{font-size:14px;}
}
.reserve-badges{display:flex;gap:12px;flex-wrap:wrap;}
.reserve-badges span{
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:12.5px;font-weight:700;
  padding:8px 14px;border-radius:999px;
  display:flex;align-items:center;gap:6px;
}

/* 여백 정리로 폼 세로 길이를 줄였다(VER1.237). 항목은 하나도 없애지 않았다.
   🚨 줄이면 안 되는 것: 입력칸 자체 높이 / 입력·셀렉트·버튼 글자 16px / 탭 영역 44px.
      아래 값들은 전부 **여백(padding·margin·gap)만** 손댄 것이다. */
.reserve-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:28px 32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.reserve-card h3{font-size:20px;margin-bottom:4px;}
.reserve-card .form-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:14px;}
.form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-width:0;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-size:13px;font-weight:800;color:var(--navy-deep);}
.form-field label .req{color:var(--coral);margin-left:2px;}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  /* 🚨 16px 미만으로 내리지 말 것 — iOS 사파리는 16px 미만 입력칸을 탭하면
     화면을 자동 확대해 버린다(되돌아올 방법이 없어 사용성이 크게 나빠진다). */
  font-size:16px;
  font-family:inherit;
  color:var(--ink);
  background:#fbfdff;
  transition:border-color .2s ease, background .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
}
.form-field textarea{resize:vertical;min-height:96px;}
.radio-row{display:flex;gap:10px;flex-wrap:wrap;}
/* 🚨 min-height:44px — 탭 영역 규격. 글자·테두리는 작아 보여도 손가락이 닿는 면적은
   44px 이상이어야 한다(이전 41px). 여백으로 확보하고 글자 크기는 그대로 둔다. */
.radio-pill{
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
}
.radio-pill input{display:none;}
.radio-pill.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.form-foot{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--ink-soft);
  margin:8px 0 12px;
  min-height:44px;   /* 🚨 체크박스 탭 영역 규격(라벨 전체가 클릭 영역이다) */
}
.form-foot input{width:16px;height:16px;}
/* 제출 버튼 — 전역 .btn-lg를 건드리면 다른 화면 버튼까지 바뀌므로 이 카드 안에서만 줄인다.
   🚨 높이 44px 아래로는 내리지 말 것(탭 영역). 17px→15px여도 실측 49px로 여유가 있다. */
.reserve-card .btn-lg{padding:15px 32px;}

.form-msg{
  display:none;
  margin-top:16px;
  padding:14px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}
.form-msg.success{display:block;background:#e3f8ea;color:#1c7c43;}
.form-msg.error{display:block;background:#ffe6e3;color:#c23a2b;}

/* ---------- Captcha ---------- */
.captcha-row{
  display:flex;align-items:center;gap:10px;
}
.captcha-question{
  background:var(--sky);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 16px;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--navy-deep);
  white-space:nowrap;
  user-select:none;
}
.captcha-row input{flex:1;min-width:0;}
.captcha-refresh{
  flex-shrink:0;
  width:44px;height:44px;border-radius:12px;   /* 🚨 탭 영역 44px 규격(이전 42px) */
  background:var(--sky);border:1.5px solid var(--line);
  font-size:17px;color:var(--navy-deep);
  cursor:pointer;
  transition:transform .3s ease;
}
.captcha-refresh:active{transform:rotate(180deg);}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,.7);
  padding:60px 0 28px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-size:18px;margin-bottom:14px;}
.footer-col-brand{min-width:0;}
.footer-logo{height:48px;width:auto;display:block;}
.footer-col h5{color:#fff;font-size:14px;margin-bottom:16px;letter-spacing:.04em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.footer-col ul a{transition:color .2s ease;}
.footer-col ul a:hover{color:#fff;}
.footer-col p{font-size:13.5px;line-height:1.8;margin:0;word-break:keep-all;}
/* 푸터 GRS 타이틀 줄("GRS(...) / Official Preferred Sales Agent...")은
   화면 폭이 달라져도 항상 이 <br> 지점(영문 로그인/직함 사이)에서만
   나뉘도록 각 구간을 별도 span으로 감쌉니다 — .ship-hero-title-name과
   동일한 패턴(VER1.55). */
.grs-title-line{display:inline-block;}

.footer-legal{
  padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-legal-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:12px;
  line-height:1.9;
  color:rgba(255,255,255,.55);
}
.footer-legal-row-single{gap:6px 18px;}
.footer-legal-row-single span{position:relative;padding-right:18px;}
.footer-legal-row-single span:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-9px;top:50%;
  transform:translateY(-50%);
  width:1px;height:10px;
  background:rgba(255,255,255,.25);
}
.footer-legal-row strong{
  color:rgba(255,255,255,.85);
  font-weight:700;
  margin-right:4px;
}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;
  font-size:12.5px;
  flex-wrap:wrap;
  gap:10px;
}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;
}

/* ============================================================
   Header login button
   ============================================================ */
.header-login-btn{
  display:inline-block;
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--navy-deep);
  font-weight:700;
  font-size:13.5px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  white-space:nowrap;
  /* 로그인 버튼(69px)→스켈레톤(84px)→계정이름(91px)으로 auth-header.js가 교체할 때
     폭이 뛰어 헤더가 흔들리던 문제(VER1.186). 세 상태가 같은 최소폭을 차지하게 해
     스왑 시 가로 리플로우가 없게 한다 — 세션 쿠키가 만료돼 스켈레톤만 깜빡였다
     사라질 때도 폭 점프가 안 보인다. 긴 이름은 이 값을 넘겨 늘어날 수 있으나
     그건 실제 로그인 1회성 동작이라 무방. text-align:center로 "로그인" 글자를 가운데. */
  min-width:96px;
  text-align:center;
}
.header-login-btn:hover{border-color:var(--blue);background:var(--sky);}
.header-login-btn.logged-in{
  background:var(--sky);
  border-color:var(--blue);
  color:var(--navy);
}

/* ============================================================
   Header account — 로그인 상태(js/auth-header.js)
   회원 시스템(app.costacruisebusan.com)과 세션 쿠키를 공유해 로그인
   여부를 판별하고, "로그인" 버튼 자리를 아바타+이름+팝오버로 교체한다.
   설계 근거: docs/architecture/static_site_login_sync_ux_2026-07-12.md
   ============================================================ */

/* 로그인 여부 확인 전 짧은 로딩 구간에만 보이는 스켈레톤 — "로그인
   버튼이 잠깐 보였다가 이름으로 바뀌는" 깜빡임을 감춘다. */
.header-login-skeleton{
  display:inline-block;
  /* 로그인 버튼·계정과 같은 최소폭(96px)으로 맞춰 스왑 시 폭 점프 제거(VER1.186). */
  width:96px;height:38px;
  border-radius:999px;
  background:var(--sky);
  animation:header-skeleton-pulse 1.1s ease-in-out infinite;
}
@keyframes header-skeleton-pulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}

.header-account{position:relative;}
.header-account-trigger{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 14px 5px 6px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  /* 로그인 버튼·스켈레톤과 같은 최소폭(96px) — 스켈레톤에서 계정으로 바뀔 때
     폭 점프 제거(VER1.186). 긴 이름은 max-width(180px)까지 늘어난다. */
  min-width:96px;
  max-width:180px;
}
.header-account-trigger:hover,
.header-account-trigger[aria-expanded="true"]{border-color:var(--blue);background:var(--sky);}
.header-account-avatar{
  flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
}
.header-account-name{
  font-weight:700;font-size:13.5px;color:var(--navy-deep);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:90px;
}
.header-account-caret{
  flex-shrink:0;
  width:10px;height:10px;
  transition:transform .2s ease;
  color:var(--ink-soft);
}
.header-account-trigger[aria-expanded="true"] .header-account-caret{transform:rotate(180deg);}

/* 데스크톱: 트리거 바로 아래에 뜨는 팝오버 */
.header-account-popover{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:190px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:8px;
  z-index:1200;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.header-account-popover.open{opacity:1;visibility:visible;transform:translateY(0);}

.account-menu-item{
  display:block;width:100%;
  text-align:left;
  background:none;border:none;
  font-family:inherit;font-size:13.5px;font-weight:700;
  color:var(--navy-deep);
  padding:11px 12px;border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background .15s ease;
}
.account-menu-item:hover{background:var(--sky);}
.account-menu-item.danger{color:var(--coral-deep);}
.account-menu-item.danger:hover{background:rgba(239,77,60,.08);}
.account-menu-divider{height:1px;background:var(--line);margin:6px 4px;}

/* 모바일: 하단에서 올라오는 시트 — 기존 mobile-nav 슬라이드 컨벤션과
   통일하되(패널 슬라이드), 방향만 아래→위로 다르게 해 "선택 목록"이라는
   느낌을 준다(하단 시트는 모바일 OS 공통 패턴). */
.account-sheet-scrim{
  position:fixed;inset:0;
  background:rgba(7,16,28,.45);
  z-index:1150;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.account-sheet-scrim.open{opacity:1;pointer-events:auto;}
.account-sheet{
  position:fixed;left:0;right:0;bottom:0;
  z-index:1200;
  background:#fff;
  border-radius:20px 20px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -20px 50px -20px rgba(11,61,110,.3);
}
.account-sheet.open{transform:translateY(0);}
.account-sheet-handle{
  width:36px;height:4px;border-radius:999px;
  background:var(--line);
  margin:6px auto 14px;
}
.account-sheet-head{
  display:flex;align-items:center;gap:10px;
  padding:4px 4px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.account-sheet-head .header-account-avatar{width:34px;height:34px;font-size:14px;}
.account-sheet-head-name{font-weight:800;font-size:15px;color:var(--navy-deep);}
.account-sheet .account-menu-item{padding:13px 10px;font-size:14.5px;}

/* ============================================================
   Auth modal — login / signup / gacha
   ============================================================ */
/* ============================================================
   Floating action buttons
   ============================================================ */
.fab-stack{
  position:fixed;
  right:20px;bottom:20px;
  z-index:900;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fab{
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  box-shadow:0 14px 28px -10px rgba(11,61,110,.4);
  cursor:pointer;
  border:none;
  transition:transform .25s ease;
}
.fab:hover{transform:translateY(-3px) scale(1.05);}
.fab-kakao{background:#ffe300;color:#3a1d1d;}
.fab-top{background:#fff;color:var(--navy);display:none;}
.fab-top.show{display:flex;}

/* ---------- 공용 토스트 알림 (VER1.58: 일정 공유 링크 복사 등) ----------
   라이트박스(z-index 2000)보다도 위에서 보여야 어떤 화면에서 눌러도
   가려지지 않으므로, 사이트 전체에서 가장 높은 z-index를 씀. */
.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%) translateY(16px);
  background:var(--navy-deep);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  padding:13px 24px;
  border-radius:999px;
  box-shadow:0 16px 32px -10px rgba(0,0,0,.45);
  z-index:2100;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(86vw, 380px);
  text-align:center;
  word-break:keep-all;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---------- 아이폰 사파리 "홈 화면에 추가" 안내 배너 (VER1.58) ----------
   기본 display:none — js/main.js의 initIosPwaHint()가 iOS Safari +
   standalone 아님 + 예전에 닫은 적 없음일 때만 flex로 바꿔 보여줌. */
.ios-pwa-hint{
  display:none;
  position:fixed;
  left:16px;right:16px;
  bottom:16px;
  z-index:2050;
  background:var(--navy-deep);
  color:#fff;
  border-radius:var(--radius-md);
  box-shadow:0 16px 36px -10px rgba(0,0,0,.5);
  padding:14px 16px;
  align-items:center;
  gap:12px;
  font-size:13px;
  line-height:1.5;
  word-break:keep-all;
  max-width:480px;
  margin:0 auto;
}
.ios-pwa-hint strong{color:var(--yellow);}
.ios-pwa-hint-icon{display:inline-block;transform:translateY(-1px);}
.ios-pwa-hint #iosPwaHintClose{
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:13px;
  cursor:pointer;
}

/* ============================================================
   Animations
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1150px){
  .header-phone{display:none;}
}

@media (max-width:1024px){
  .brand span{display:none;}
  .route-grid{grid-template-columns:1fr 1fr;}
  .route-detail-body{grid-template-columns:minmax(0,1fr);}
  .timeline{grid-column:1;grid-row:auto;}
  .rd-rate-table-wrap{padding:18px 16px;margin-top:24px;}
  .rd-rate-table{font-size:10.5px;min-width:0;}
  .rd-plan-fare-wrap{padding:18px 14px;margin-top:24px;overflow-x:hidden;}
  .rd-plan-fare-table{font-size:11px;min-width:0;width:100%;table-layout:fixed;}
  .rd-plan-fare-table th,.rd-plan-fare-table td{padding:8px 4px;font-size:11px;}
  .rd-plan-fare-table thead th{font-size:11px;word-break:keep-all;}
  .rd-plan-fare-table tbody th{font-size:11px;white-space:normal;word-break:keep-all;}
  .rd-plan-fare-table .rd-plan-tag{font-size:9.5px;padding:2px 4px;}
  .rd-cancel-wrap{padding:18px 16px;margin-top:16px;}
  .rd-cancel-table{font-size:12px;min-width:0;}
  .rd-inclusion-wrap{grid-template-columns:1fr;margin-top:16px;}
  .rd-inclusion-col{padding:18px 16px;}
  .route-detail-side{grid-column:1;grid-row:auto;position:static;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .feature-row{grid-template-columns:1fr;gap:30px;}
  .feature-row.reverse .feature-row-img{order:0;}
  .cabin-grid{grid-template-columns:repeat(2,1fr);}
  .port-region-grid{grid-template-columns:1fr 1fr;}
  .fleet-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .notice-grid{grid-template-columns:1fr;}
  .dresscode-grid{grid-template-columns:1fr 1fr;}
  .reserve-wrap{grid-template-columns:minmax(0,1fr);}   /* 위와 같은 이유로 minmax(0,…) */
  .footer-top{grid-template-columns:1fr 1fr;gap:30px;}
}

@media (max-width:760px){
  .nav-desktop{display:none;}
  .header-phone{display:none;}
  .header-login-btn{display:none;}
  /* 🚨 로그인 후 auth-header.js가 로그인 버튼을 교체하는 두 요소도 모바일에선
     숨긴다(VER1.186 수정). 예전엔 .header-login-btn만 숨겨서, 로그인하면
     스켈레톤(84px)→계정이름(91px)이 헤더에 그대로 떠 햄버거를 화면 밖으로
     밀어냈다(로그아웃 시엔 스켈레톤 펄스가 깜빡였다). 모바일에서 계정은
     햄버거 메뉴 안(mobileLoginBtn 교체분)에서 접근하므로 헤더엔 필요 없다. */
  .header-login-skeleton,
  .header-account{display:none;}
  /* 헤더의 "상담 신청" 버튼은 모바일 메뉴(mobileNav) 안에 "무료 상담
     신청하기"로 이미 동일하게 들어있어 중복입니다. 좁은 화면에서
     브랜드 로고 + 이 버튼 + 햄버거 3개가 한 줄에 다 들어가지 못해
     header-cta가 컨테이너 폭을 넘어가는 원인이었으므로, 모바일에서는
     숨기고 햄버거 메뉴로만 접근하도록 정리합니다. */
  .header-cta > .btn.btn-primary{display:none;}
  .nav-toggle{display:flex;}
  .brand{font-size:14.5px;font-weight:800;}
  .brand span{display:block;}
  .brand-logo{height:34px;}
  /* ※ 2026-06-30(VER1.36): 모바일에서 헤더가 스크롤 위치에 따라
     투명↔흰색으로 바뀌던 것 자체를(이전 버전에서 backdrop-filter +
     반투명 rgba로 "항상 밝게" 만들려 시도했으나, iOS Safari 기종별로
     backdrop-filter가 적용된 position:fixed 요소의 렌더링이 일관되지
     않아 — 사용자 실기기 확인 결과 아이폰 SE는 정상, 12·15는 여전히
     어두운 띠가 보이는 기종 편차가 있었음 — 그 원인을 근본적으로
     없애기 위해 모바일에서는 투명/반투명 효과를 전혀 쓰지 않고
     완전한 불투명 단색 배경으로 못박습니다. blur 등 GPU 합성에
     의존하는 효과가 전혀 없어야 기종에 따라 다르게 보일 여지 자체가
     사라집니다. */
  .site-header{padding:10px 0;}
  .site-header.scrolled{padding:7px 0;}
  .site-header,
  .site-header.scrolled{
    background:#ffffff;
    box-shadow:0 6px 24px -10px rgba(11,61,110,.18);
  }
  .section{padding:64px 0;}
  .section-tight{padding:48px 0;}
  /* ※ 2026-06-30(VER1.38): .hero-slider는 모바일에서 height:auto로
     콘텐츠 높이만큼만 차지하도록 되어 있는데, 부모 .hero는 여전히
     min-height:100vh(뷰포트 전체)를 유지하고 있어 둘의 실제 높이가
     달랐습니다. .hero 안에 absolute로 깔린 .wave-divider(흰색 물결
     장식)는 .hero의 bottom:0 기준으로 위치하는데, .hero가 콘텐츠보다
     더 크다 보니 .wave-divider가 항상 hero-info-card(맨 아래 카드)와
     겹치는 문제가 있었습니다 — 카드가 흐르는 듯한 침범, 카드 바로
     아래에 짙은 배경색이 살짝 비치는 현상 둘 다 이 높이 불일치가
     원인. .hero도 .hero-slider와 똑같이 콘텐츠 높이를 따라가도록
     min-height를 auto로 풀어, 부모/자식/장식 요소가 항상 같은
     높이로 맞물리게 했습니다. */
  .hero{min-height:auto;}
  .hero-slider{min-height:auto;height:auto;}
  .hero-slide-track{height:auto;}
  .hero-slide.active{position:relative;min-height:0;}
  /* C안: 모바일에서 .hero-slide를 grid로 전환해 배경(행1)과 텍스트(행1 겹침)를
     같은 칸에 레이어링합니다. 배경 이미지가 콘텐츠 높이에 맞춰 늘어나고
     텍스트는 그 위에 겹쳐 표시됩니다.
     ─ grid-template-areas 없이 grid-template-rows:1fr, 두 자식 모두
       grid-row:1 / -1 로 겹치는 방식 (overlay 패턴) ─ */
  .hero-slide.active{display:grid;grid-template-rows:1fr;}
  .hero-slide-bg{
    grid-row:1;grid-column:1;
    position:static;
    width:100%;height:100%;min-height:300px;
    object-fit:cover;display:block;
  }
  .hero-slide-scrim{
    grid-row:1;grid-column:1;
    position:static;
    z-index:1;
    pointer-events:none;
  }
  .hero-copy{
    grid-row:1;grid-column:1;
    position:static;z-index:2;
    padding:110px 22px 20px;
    max-width:none;
    justify-content:flex-start;
    height:auto;
    /* margin-top 음수로 배경 위에 겹치게 */
  }
  /* ※ 2026-06-30(VER1.38): 모바일에서는 wave-divider를 .hero 안의
     absolute 장식(데스크탑 전용 디자인 — 슬라이드 사진 위에 흰 물결을
     겹쳐 다음 섹션과 부드럽게 잇는 효과)에서 일반 문서 흐름 요소로
     전환합니다. 모바일은 .hero-slide 자체가 이미 position:relative로
     바뀌어 있어(슬라이드가 사진 전체화면이 아니라 콘텐츠 높이만큼만
     차지) absolute 장식이 콘텐츠 끝부분과 계속 경쟁하며 겹치는 문제가
     있었습니다. position:static으로 풀면 .hero-copy(.hero-info-card
     포함) 바로 다음에 자연스럽게 이어져 겹침 자체가 불가능해집니다. */
  .hero-copy{padding:110px 22px 20px;max-width:none;justify-content:flex-start;height:auto;}
  .hero .wave-divider{position:static;}
  .hero-copy p.lead{
    /* ※ VER1.43c — C안 적용: 히어로 영역 높이 auto 확장
       line-clamp 제거 → lead 문구 전체 표시.
       공간 확보를 위해 .hero-stats(통계 3개)를 모바일에서 숨깁니다.
       ─────────────────────────────────────────────────────────────
       [원칙] 히어로 lead 문구는 기획 의도가 있는 마케팅 문구입니다.
       표시 줄 수나 레이아웃 문제가 발생해도 문구를 임의로 수정하지 않고
       반드시 담당자에게 문의 후 결정합니다.
       ─────────────────────────────────────────────────────────────
       C안 단점: 모바일에서 히어로 스크롤이 조금 길어집니다.
       (통계 영역 숨김으로 실제 높이 증가 최소화) */
    display:block;        /* line-clamp 완전 해제 */
    overflow:visible;     /* 잘림 없이 전체 표시 */
    -webkit-line-clamp:unset;
  }
  .hero-copy h2{font-size:30px;}
  .hero-copy p.lead{font-size:14.5px;line-height:1.55;margin-bottom:20px;}
  /* C안: 모바일 통계 영역 항상 표시 (숨기지 않음) */
  .hero-stats{gap:14px;flex-wrap:wrap;}
  .hero-stats strong{font-size:19px;}
  .hero-stats span{font-size:11.5px;}
  .hero-cta-row{gap:10px;margin-bottom:16px;}
  .hero-cta-row .btn{flex:1;padding:10px 12px;font-size:13.5px;}
  .hero-badge-top{font-size:12px;padding:9px 14px 9px 12px;}
  /* 모바일에서도 t-day 3자리 숫자 축소 */
  .t-day strong{font-size:12px;}
  .t-day.is-3digit strong{font-size:11px;}
  .t-day.is-range strong{font-size:10px;}
  .hero-info-card{
    position:relative;
    right:auto;left:auto;bottom:auto;
    max-width:none;padding:14px 16px;
    margin:20px 22px 0;
  }
  /* VER1.37: 모바일도 데스크탑과 동일하게 닷 인디케이터 2배 확대.
     모바일 헤더 실제 높이(패딩 10px 기준 약 64px)보다 충분히 아래로
     내려, 헤더와 절대 겹치지 않도록 함. */
  .hero-dots{top:86px;gap:12px;}
  .hero-dot{width:18px;height:18px;}
  .hero-dot.active{width:46px;}
  .feature-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .feature-card{padding:22px 16px;}
  .auth-modal{padding:30px 22px 24px;}
  .route-filter-bar{flex-direction:column;padding:18px;}
  .rf-field{min-width:0;width:100%;}
  .rf-field-search{min-width:0;width:100%;}
  .rf-field-pair{min-width:0;width:100%;}
  .rf-sub{min-width:0;}
  .route-grid{grid-template-columns:1fr;}
  .route-detail{width:100vw;}
  .route-detail-inner{
    padding:76px 22px 50px;
    /* 모바일: 기본 50px + iOS 홈바(최대 34px) */
    padding-bottom:calc(50px + env(safe-area-inset-bottom, 0px));
  }
  .route-detail-close{right:22px;}
  /* "전체 일정표 PDF 다운로드/인쇄" + "일정 공유" 버튼 2개가 좁은
     화면(iPhone SE 375px 등)에서 한 줄에 다 안 들어가 두 번째 버튼이
     다음 줄로 밀려나던 문제(VER1.63) — 여백/글자 크기를 살짝 줄여
     한 줄에 유지되도록 함(버튼 문구 자체도 "전체" 삭제로 함께 축약) */
  .rd-print-btn-wrap{gap:8px 10px;}
  .rd-print-btn{padding:10px 14px;font-size:12.5px;}
  .port-detail-hero{margin:-76px -22px 0;height:200px;}
  .port-detail-hero-overlay{padding:20px 22px;}
  .port-detail-hero-flag{height:40px;top:14px;left:50%;transform:translateX(-50%);}
  .ship-detail-hero{margin:-76px -22px 0;height:180px;}
  .ship-detail-hero-overlay{padding:20px 22px;}
  .sd-body{grid-template-columns:1fr;}
  .sd-spec-value{text-align:right;}
  .port-spot{grid-template-columns:1fr;gap:14px;}
  .port-spot:nth-child(even){direction:ltr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;}
  .gallery-item.big{grid-column:span 2;grid-row:span 1;}
  .cabin-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .port-region-grid{grid-template-columns:1fr;}
  .fleet-grid{grid-template-columns:1fr;}
  .dresscode-grid{grid-template-columns:1fr;gap:14px;}
  .dresscode-card img{max-width:140px;}
  .dresscode-warning{flex-direction:column;align-items:flex-start;gap:10px;}
  .dresscode-warning-img{width:140px;max-width:60%;}
  .form-grid{grid-template-columns:1fr;}
  /* 이름·연락처는 입력 폭이 짧아도 충분해, 모바일에서도 굳이 세로로
     쌓을 필요가 없습니다(VER1.29) — form-grid-keep2col이 붙은 grid만
     예외로 2열을 유지해 폼 전체의 세로 길이를 줄입니다. gap도 모바일
     좁은 화면에 맞춰 살짝 좁힙니다. */
  .form-grid.form-grid-keep2col{grid-template-columns:1fr 1fr;gap:10px;}
  table.price-table{font-size:12.5px;}
  table.price-table th,table.price-table td{padding:10px 8px;}
  .price-foot-cta{flex-direction:column;align-items:stretch;text-align:center;}
  .footer-top{grid-template-columns:1fr;gap:28px;}
  .footer-legal-row{flex-direction:column;gap:4px;text-align:center;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .timeline-item{grid-template-columns:50px minmax(0,1fr);gap:12px;}
  .t-day{width:50px;height:50px;font-size:11px;}
  .t-day strong{font-size:12px;}
  .timeline-item::before{left:24px;}
  .hero-badge{left:-10px;bottom:-18px;padding:12px 14px;}
  .hero-pill{right:6px;top:-12px;font-size:11px;padding:7px 14px;}
}

@media (max-width:480px){
  .brand{font-size:12.5px;font-weight:800;}
  .brand-logo{height:28px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .cabin-grid{grid-template-columns:1fr 1fr;}
  .cabin-card .cabin-body{padding:14px;}
  .cabin-card .cabin-desc{font-size:11.5px;margin-bottom:10px;}
  .cabin-card .cabin-price .from{font-size:10.5px;white-space:nowrap;}
  .price-num-inquiry{font-size:13.5px;padding:5px 12px;}
  .rd-cancel-table{table-layout:fixed;}
  .rd-cancel-table th, .rd-cancel-table td{padding:8px 4px;font-size:10.5px;line-height:1.35;word-break:normal;overflow-wrap:break-word;}
  .rd-cancel-table th:first-child, .rd-cancel-table td:first-child{width:36%;white-space:normal;}
  .rd-cancel-table th:nth-child(2), .rd-cancel-table td:nth-child(2){width:30%;white-space:normal;}
  .rd-cancel-table th:last-child, .rd-cancel-table td:last-child{width:34%;}
  .rd-rate-table{font-size:9.5px;}
  .rd-rate-table th, .rd-rate-table td{padding:6px 2px;}
  /* 360~390px에서 이름·연락처 input이 절반 폭(115px 안팎)이라
     "010-0000-0000" placeholder가 빠듯합니다(VER1.29).
     🚨 예전에는 글자를 13px로 줄여 해결했지만 **16px 미만은 iOS가 화면을
        자동 확대**해 버려 더 나쁩니다(VER1.237) — 글자는 16px로 되돌리고
        좌우 패딩만 좁혀 폭을 확보합니다. */
  .form-grid-keep2col .form-field input{
    font-size:16px;
    padding:12px 8px;
  }
}

/* ---------- 상담 신청 카드: 좁은 화면 폭 확보 + Turnstile 대응 (VER1.237) ----------
   🚨 Cloudflare Turnstile 위젯은 실제 서비스에서 **300px 고정 iframe**으로 렌더된다.
      320px 화면의 카드 안쪽은 그보다 좁아(236px) 위젯이 카드 밖으로 삐져나간다.
      트랙을 minmax(0,…)로 고쳐도 **위젯 자체는 안 줄어들므로** 여기서 따로 맞춘다.
   ⚠️ 로컬(localhost)에서는 sitekey 도메인 제한 때문에 위젯이 렌더되지 않아 이 문제가
      **재현되지 않는다** — 확인은 반드시 배포된 실제 주소에서 할 것.
   📌 위젯을 숨기거나 잘라내지 않는다(보안 확인 수단이다) — 배율만 줄여 전부 보이게 한다. */
@media (max-width:480px){
  .reserve-card{padding:22px 18px;}   /* 좌우를 줄여 위젯이 들어갈 폭을 번다 */
}
/* 카드 안쪽 폭: 뷰포트 − 컨테이너 48 − 카드 36.  390px→306(위젯 그대로 들어감) /
   360px→276 / 320px→236 이라 그 아래에서만 배율을 낮춘다. */
@media (max-width:379px){
  .reserve-card .cf-turnstile{transform:scale(.9);transform-origin:left top;margin-bottom:-7px;}
}
@media (max-width:344px){
  .reserve-card .cf-turnstile{transform:scale(.78);margin-bottom:-16px;}
}

@media (max-width:334px){
  .brand span{display:none;}
  .cabin-card .cabin-size{font-size:11px;}
}

/* ============================================================
   Subpages — 회사소개 / 개인정보 / 이용약관 / 고객문의 / 오시는길
   ============================================================ */
.page-hero{
  background:linear-gradient(180deg,#eaf6ff 0%, #ffffff 100%);
  padding:150px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-hero .container{max-width:920px;}
.page-breadcrumb{
  font-size:13px;color:var(--ink-soft);font-weight:600;
  margin-bottom:14px;
}
.page-breadcrumb a{color:var(--blue);}
.page-hero h1{
  font-size:clamp(28px,4vw,40px);
  margin-bottom:10px;
}
.page-hero p{font-size:15px;color:var(--ink-soft);margin:0;max-width:620px;}

.page-body{padding:60px 0 100px;}
.page-body .container{max-width:920px;}
.page-section{margin-bottom:48px;}
.page-section:last-child{margin-bottom:0;}
.page-section h2{
  font-size:21px;color:var(--navy-deep);
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:2px solid var(--sky);
}
.page-section h3{font-size:16px;color:var(--navy-deep);margin:20px 0 10px;}
.page-section p{font-size:14.5px;color:var(--ink-soft);line-height:1.85;margin:0 0 12px;word-break:keep-all;}
.page-section ul,.page-section ol{
  font-size:14.5px;color:var(--ink-soft);line-height:1.85;
  padding-left:22px;margin:0 0 12px;
  word-break:keep-all;
}
.page-section li{margin-bottom:6px;}
.page-section table{
  width:100%;border-collapse:collapse;margin:14px 0 20px;
  font-size:13.5px;
}
.page-section table th,.page-section table td{
  border:1px solid var(--line);padding:11px 14px;text-align:left;
}
.page-section table th{background:var(--sky);color:var(--navy-deep);font-weight:700;width:32%;}
.page-note{
  background:var(--sky);
  border-radius:var(--radius-md);
  padding:18px 22px;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.8;
  word-break:keep-all;
}
.page-toc{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:44px;
  padding-bottom:28px;
  border-bottom:1px dashed var(--line);
}
.page-toc a{
  font-size:13px;font-weight:700;
  background:var(--sky);color:var(--navy);
  padding:8px 16px;border-radius:999px;
  transition:background .2s ease,color .2s ease;
}
.page-toc a:hover{background:var(--navy);color:#fff;}

/* ---------- 회사소개 (about) ---------- */
.about-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin-bottom:8px;
}
.about-stats .stat{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:22px 18px;text-align:center;
}
.about-stats .stat strong{
  display:block;font-family:var(--font-display);
  font-size:26px;color:var(--coral-deep);margin-bottom:4px;
}
.about-stats .stat span{font-size:12.5px;color:var(--ink-soft);}
.about-timeline{display:flex;flex-direction:column;gap:0;}
.about-timeline .at-item{
  display:grid;grid-template-columns:90px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.about-timeline .at-item:last-child{border-bottom:none;}
.about-timeline .at-year{font-family:var(--font-display);color:var(--navy-deep);font-size:16px;}
.about-timeline .at-desc{font-size:14px;color:var(--ink-soft);}

/* ---------- 고객문의 (contact) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:44px;}
.contact-card{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px;
}
.contact-card .ico{font-size:26px;margin-bottom:10px;display:block;}
.contact-card h4{font-size:15px;color:var(--navy-deep);margin-bottom:6px;}
.contact-card p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.7;word-break:keep-all;}
.contact-card strong{display:block;font-size:16px;color:var(--coral-deep);margin:4px 0;}

/* 방문상담 카드 주소 2행 고정 (VER1.236) — 공용 .ri-* 규칙을 그대로 쓰고 크기만 여기서 정한다.
   두 행 모두 <strong>이라 기존 카드와 색·굵기가 동일하다(주소가 한 덩어리로 읽혀야 한다).
   🚨 .contact-card strong의 margin:4px 0이 두 행 사이에 8px 틈을 만들어 한 주소가 갈라져 보인다
      → 1행의 아래 여백과 2행의 위 여백을 0으로 붙인다. */
.contact-card .ri-addr{margin-bottom:0;}
.contact-card .ri-addr-sub{margin-top:0;}
/* 1행이 768px 이하에서 혼자 2줄로 접히던 것 해소(VER1.237, A안).
   .contact-grid가 2열이라 카드 안쪽이 294~296px인데 주소 1행은 16px 기준 313px가 필요했다.
   ⚠️ A안의 15px로는 **3px가 모자랐다**(390px에서 가용 294 / 필요 297 → 그대로 접힘).
      목표("390px 이상에서 2줄")를 실제로 달성하는 최소값이 14.5px라 그 값을 넣는다(실측 287px).
   🚨 공용 .ri-* 블록에 크기를 넣지 말 것 — #reserve 카드(13px 기준)가 깨진다. */
@media (max-width:768px){
  .contact-card .ri-addr{font-size:14.5px;}
}
@media (max-width:399px){
  .contact-card .ri-addr-sub{font-size:14px;}   /* 기준 16px */
}

/* ---------- 오시는 길 (location) ---------- */
.location-map-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  margin-bottom:24px;
  aspect-ratio:16/8;
}
.location-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.location-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}

@media (max-width:760px){
  .page-hero{padding-top:118px;}
  .about-stats{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .location-info-grid{grid-template-columns:1fr;}
  .about-timeline .at-item{grid-template-columns:70px 1fr;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}

/* ============================================================
   전체 일정표 PDF 다운로드 / 인쇄 (@media print)
   ------------------------------------------------------------
   "전체 일정표 PDF 다운로드/인쇄" 버튼(#rdPrintBtn)을 누르면 window.print()가
   호출되고, 이 미디어쿼리가 활성화됩니다. 노선상세 패널(#routeDetail)만
   A4 용지에 맞춰 인쇄되도록, body의 다른 모든 최상위 요소는 숨기고
   #routeDetail 하나만 화면 전체를 차지하는 일반 문서 흐름으로 전환합니다.
   ⚠️ 이 사이트의 오버레이 패널(routeDetail/portListPanel/portDetail/
   shipDetail/fleetListPanel)은 전부 <body>의 직계 자식입니다(중간에
   감싸는 wrapper 없음) — 그래서 "body > *:not(#routeDetail)"로
   깔끔하게 전부 가릴 수 있습니다. 향후 body 구조를 wrapper div로
   감싸는 리팩토링을 하게 되면 이 셀렉터도 함께 확인할 것.
   ============================================================ */
@media print{
  @page{ size:A4; margin:16mm 14mm; }

  html, body{ background:#fff !important; }

  /* routeDetail 하나만 남기고 body의 다른 최상위 요소(헤더/히어로/각종
     섹션·오버레이·푸터·플로팅버튼 등)는 전부 숨김 */
  body > *:not(#routeDetail){ display:none !important; }

  #routeDetail{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    box-shadow:none !important;
    background:#fff !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto !important;
  }
  #routeDetail .route-detail-inner{ padding:0 !important; }

  /* 화면 전용(인터랙션) 요소는 인쇄 시 숨김 */
  #routeDetail .route-detail-close,
  #routeDetail .rd-print-btn-wrap,
  #routeDetail #rdTimeline,
  #routeDetail #rdTimelineToggle,
  #routeDetail .timeline-collapsed-note,
  #routeDetail .rd-cta-note,
  #routeDetail .rd-ports-all-btn,
  #routeDetail .t-term-toggle{
    display:none !important;
  }

  /* 인쇄 전용 콘텐츠(헤더/전체 일정표/푸터) 노출 */
  .rd-print-only{ display:block !important; }

  /* 본문/사이드 2열 그리드를 인쇄용 1열로 전환 */
  #routeDetail .route-detail-body{ display:block !important; }
  #routeDetail .route-detail-side{
    position:static !important;
    margin-top:16px;
    display:block !important;
  }
  #routeDetail .rd-price-box,
  #routeDetail .rd-route-line{
    box-shadow:none !important;
    border:1px solid #ccc;
    margin-bottom:10px;
  }

  /* 기본 폰트 크기 — 시니어 고객 가독성을 고려해 일반 인쇄물보다 조금
     넉넉하게(본문 11pt대) 잡되, 140일 일정표처럼 항목이 많은 표는
     위에서 9.5pt로 별도 축소해 페이지 수가 과도하게 늘지 않도록 균형. */
  #routeDetail, #routeDetail *{ color:#111 !important; }
  #routeDetail{ font-size:11pt; line-height:1.6; }
  #routeDetail .section-title{ font-size:18pt; }
  #routeDetail .rd-rate-table-title{ font-size:13pt; margin-top:18px; }
  #routeDetail .route-detail-summary{ font-size:10.5pt; }
  #routeDetail .eyebrow{ background:none !important; padding-left:0; }

  /* 표/리스트가 페이지 중간에서 어색하게 잘리지 않도록 */
  #routeDetail table{ width:100%; border-collapse:collapse; }
  #routeDetail table thead{ display:table-header-group; }
  #routeDetail tr,
  #routeDetail .rd-inclusion-col,
  #routeDetail .rd-print-itinerary-table tr{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  #routeDetail .rd-rate-table-wrap,
  #routeDetail .rd-plan-fare-wrap,
  #routeDetail .rd-cancel-wrap,
  #routeDetail .rd-inclusion-wrap{
    break-inside:avoid-page;
    margin-top:16px;
  }

  /* 터미널 주소는 화면에서 접혀 있어도(hidden 속성) 인쇄 시 항상 펼쳐서 표시 */
  #routeDetail .t-term-panel[hidden]{
    display:block !important;
  }

  /* 링크/포인터 커서 등 화면 전용 시각 효과 제거 */
  #routeDetail a,
  #routeDetail .t-loc-link,
  #routeDetail .rd-port-link{
    text-decoration:none !important;
    cursor:default !important;
  }
}

/* ============================================================
   이미지 도용 방지 — 워터마크 오버레이 + 드래그 차단 (VER1.133)

   🔒 SEO 보호 원칙 (반드시 지킬 것):
     · <img> 태그는 **전혀 건드리지 않는다**(src/alt 그대로) — 구글 이미지
       검색 색인을 잃지 않기 위해서다.
     · 이미지를 background-image로 바꾸지 않는다(색인 제외 위험).
     · 워터마크는 **원본 파일을 수정하지 않고** 래퍼의 ::after로 화면에만
       겹친다 — Supabase Storage 재업로드로 캐시가 꼬였던 이슈를 재발시키지
       않기 위한 방식이다.

   적용 대상: 콘텐츠성 사진이 들어가는 래퍼만.
     제외 — 브랜드 로고(.brand-logo/.footer-logo), 국기 이미지,
            사진 없는 플레이스홀더, 요금표·상담 폼 등 텍스트 UI.
     제외 — .port-card: 하단 전체를 설명 텍스트 오버레이가 덮고 있어
            우하단 워터마크가 글자와 겹친다(가독성 우선).
   ============================================================ */

/* 워터마크를 얹으려면 래퍼가 위치 기준이어야 한다.
   (.rct-img/.gallery-item은 이미 relative, .hero-slide는 absolute라 그대로 둔다) */
.port-spot-img,
.sd-gallery-item,
.feature-row-img{ position:relative; }

.rct-img::after,
.gallery-item::after,
.port-spot-img:not(.port-spot-img-flag)::after,
.sd-gallery-item::after,
.feature-row-img::after,
.hero-slide::after{
  content:"costacruisebusan.com";
  position:absolute;
  right:8px;
  bottom:6px;
  z-index:2;                 /* 이미지 위. 단 태그·뱃지(z-index 3 이상)보다는 아래 */
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  color:rgba(255,255,255,.55);          /* 사진 감상을 방해하지 않는 수준 */
  text-shadow:0 1px 2px rgba(0,0,0,.5); /* 밝은 사진에서도 읽히도록 */
  pointer-events:none;       /* 클릭·확대(zoom-in) 동작을 절대 가로막지 않는다 */
  user-select:none;
}

/* 히어로는 화면이 커서 조금 더 안쪽·조금 크게 */
.hero-slide::after{
  right:14px;
  bottom:12px;
  font-size:11px;
}

/* 드래그해서 이미지 파일을 끌어내는 것을 막는다.
   ⚠️ img 태그에 draggable 속성을 넣지 않고 CSS로만 처리한다(태그 불변 원칙).
   Firefox 등 -webkit-user-drag 미지원 브라우저는 main.js의 dragstart 차단이 담당. */
.rct-img img,
.gallery-item img,
.port-spot-img:not(.port-spot-img-flag) img,
.sd-gallery-item img,
.feature-row-img img,
.hero-slide img,
#lightboxImg{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none; /* iOS: 길게 누르면 뜨는 "이미지 저장" 메뉴 억제 */
}

/* 라이트박스(확대 보기) 워터마크.
   이미지가 화면 중앙에 max-width/max-height로 축소돼 렌더되므로 실제 표시
   크기를 CSS만으로는 알 수 없다 → main.js가 이미지의 실제 위치를 재서
   left/top을 잡아준다. 여기서는 모양만 정의한다.
   position:fixed라 .lightbox의 flex 중앙정렬 흐름에서 빠져 있어
   기존 라이트박스 레이아웃(iOS dvh 이슈 포함)에 영향을 주지 않는다. */
.lightbox-wm{
  position:fixed;
  display:none;
  transform:translate(-100%, -100%); /* 지정 좌표가 워터마크의 우하단 모서리가 되게 */
  z-index:2011;                      /* 라이트박스 이미지 위, 닫기 버튼(2010)보다 위 */
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  color:rgba(255,255,255,.6);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;
  user-select:none;
}