/* TRIP PIN 상세페이지 — 초보자용 색상/글자 수정 파일 */
:root {
  --navy: #061a2d;
  --deep: #020d17;
  --sky: #72cbff;
  --white: #f8fbff;
  --paper: #f5f9fc;
  --ink: #071a29;
  --muted: #6f8491;
  --line: #d7e4eb;
  --detail-title-size: clamp(66px, 10vw, 150px);
  --section-title-size: clamp(38px, 4.6vw, 64px);
}

.destination-name { font-size: var(--detail-title-size); }
.section-heading h2,
.community-intro h2,
.like-section h2 { font-size: var(--section-title-size); }

/* 환율 단위 버튼을 입력 필드에 붙여 조작 대상을 명확하게 표시합니다. */
.calculator-fields { align-items: start; }
.calculator-fields > i {
  align-self: start;
  margin-top: 38px;
}
.calculator-fields .local-currency-field > .quick-amounts {
  margin-top: 9px;
  display: flex;
  gap: 6px;
}
.calculator-fields .local-currency-field > .quick-amounts button {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(141, 190, 215, .24);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: #9ab1be;
  font-size: 8px;
  cursor: pointer;
}
.calculator-fields .local-currency-field > .quick-amounts button:hover,
.calculator-fields .local-currency-field > .quick-amounts button:focus-visible {
  border-color: #72cbff;
  color: #fff;
}
.calculator-footer { justify-content: flex-end; }

/* 상세 첫 화면에서도 좋아요 위치를 바로 알 수 있도록 주요 동작을 함께 노출합니다. */
.destination-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
}

.destination-actions > a {
  display: inline-flex;
  gap: 38px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
}

.destination-actions > a span { color: var(--sky); }

.hero-like-button {
  min-height: 43px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(4, 20, 32, .34);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .25s, border-color .25s, background .25s, color .25s;
}

.hero-like-button span { font-size: 19px; line-height: 1; }
.hero-like-button b { font-size: 9px; letter-spacing: .04em; }
.hero-like-button:hover { transform: translateY(-2px); border-color: var(--sky); }
.hero-like-button.is-liked { border-color: #fff; background: #fff; color: #0e668f; }

/* 국가별 여행 준비 팝업 */
body.travel-help-open { overflow: hidden; }
.arrival-help {
  position: absolute;
  z-index: 5;
  right: clamp(22px, 4vw, 68px);
  bottom: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.arrival-help > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(5,22,34,.35);
  font: 19px var(--serif);
  backdrop-filter: blur(9px);
  transition: background .25s, color .25s, transform .25s;
}
.arrival-help > b { font-size: 8px; letter-spacing: .15em; }
.arrival-help:hover > span { transform: rotate(8deg) scale(1.08); background: #fff; color: #0e668f; }

.travel-help-backdrop[hidden] { display: none; }
.travel-help-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(1,10,17,.74);
  opacity: 0;
  backdrop-filter: blur(12px);
  transition: opacity .3s;
}
.travel-help-backdrop.is-open { opacity: 1; }
.travel-help-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: min(820px, 92dvh);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(114,203,255,.22);
  border-radius: 20px;
  background: #f7fafb;
  box-shadow: 0 35px 90px rgba(0,0,0,.34);
  transform: translateY(24px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.is-open .travel-help-modal { transform: none; }
.travel-help-close {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #cfdee5;
  border-radius: 50%;
  background: transparent;
  color: #43616f;
  font-size: 22px;
  cursor: pointer;
}
.travel-help-modal header > p { margin: 0 0 11px; color: #168cca; font-size: 8px; letter-spacing: .2em; }
.travel-help-local { color: #76909d; font-size: 10px; }
.travel-help-modal h2 { margin: 7px 0 28px; font: 40px/1.02 var(--serif); }
.travel-help-country { color: #0a2535; }
.travel-power-card {
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  border-radius: 13px;
  background: #071d2c;
  color: #fff;
}
.travel-plug-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(114,203,255,.35);
  border-radius: 50%;
  color: #72cbff;
  font-size: 27px;
}
.travel-power-card small { display: block; margin-bottom: 6px; color: #72cbff; font-size: 7px; letter-spacing: .16em; }
.travel-power-card strong { font: 21px var(--serif); }
.travel-power-card p { margin: 6px 0 0; color: #91a9b6; font-size: 9px; line-height: 1.55; }
.travel-checklist-head { margin: 27px 0 11px; display: flex; justify-content: space-between; color: #78909b; font-size: 7px; letter-spacing: .14em; }
.travel-checklist-head p { margin: 0; color: #168cca; }
.travel-checklist { display: grid; gap: 8px; }
.travel-checklist label {
  min-height: 48px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: center;
  border: 1px solid #d5e2e8;
  border-radius: 10px;
  background: #fff;
  color: #49616d;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.travel-checklist input { position: absolute; opacity: 0; pointer-events: none; }
.travel-checklist i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #a9c0cc;
  border-radius: 50%;
  font-style: normal;
}
.travel-checklist input:checked + i { border-color: #168cca; background: #168cca; color: #fff; }
.travel-checklist input:checked + i::after { content: '✓'; font-size: 10px; }
.travel-checklist label:has(input:checked) { border-color: #9ed5f0; background: #eff9fe; }
.travel-checklist input:focus-visible + i { outline: 2px solid #72cbff; outline-offset: 2px; }
.travel-help-notice { margin: 18px 0 0; color: #8a9ba3; font-size: 8px; line-height: 1.6; }

@media (max-width: 760px) {
  .destination-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .hero-like-button { min-height: 40px; padding: 0 15px; }
  .arrival-help { right: 20px; bottom: 20px; }
  .arrival-help > b { display: none; }
  .travel-help-backdrop { padding: 12px; align-items: end; }
  .travel-help-modal { max-height: 90dvh; padding: 30px 20px 24px; border-radius: 18px 18px 8px 8px; }
  .travel-help-modal h2 { font-size: 34px; }
  .travel-power-card { grid-template-columns: 44px 1fr; padding: 17px; }
  .travel-plug-icon { width: 42px; height: 42px; font-size: 23px; }
}

/* 숨은 명소: 행 전체를 누르면 설명이 펼쳐지는 아코디언 */
.hidden-item {
  display: block;
  padding: 0 5px;
}

.hidden-item > .hidden-toggle {
  width: 100%;
  height: auto;
  min-height: 104px;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.hidden-number {
  color: #a5bac6;
  font: 22px var(--serif);
}

.hidden-title small,
.hidden-title strong { display: block; }
.hidden-title small { color: #1591d2; font-size: 8px; letter-spacing: .12em; }
.hidden-title strong { margin-top: 6px; font: 24px var(--serif); }

.hidden-toggle-label {
  min-width: 92px;
  padding: 10px 13px;
  border: 1px solid #b9ccd6;
  border-radius: 999px;
  color: #426678;
  font-size: 8px;
  letter-spacing: .06em;
  text-align: center;
  transition: border-color .25s, background .25s, color .25s;
}
.hidden-toggle-label i {
  display: inline-block;
  margin-left: 7px;
  font-size: 13px;
  font-style: normal;
  transition: transform .3s;
}
.hidden-toggle:hover .hidden-toggle-label,
.hidden-toggle[aria-expanded="true"] .hidden-toggle-label {
  border-color: #1591d2;
  background: #1591d2;
  color: #fff;
}
.hidden-toggle[aria-expanded="true"] .hidden-toggle-label i { transform: rotate(180deg); }

.hidden-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1), opacity .3s, padding .4s;
}
.hidden-detail > div { overflow: hidden; }
.hidden-detail p {
  max-width: 760px;
  margin: 0 0 28px 80px;
  padding: 20px 24px;
  border-left: 2px solid #72cbff;
  background: #f3f9fc;
  color: #597481;
  font: 300 12px/1.8 'Pretendard','Noto Sans KR',sans-serif;
}
.hidden-item.is-open .hidden-detail { grid-template-rows: 1fr; opacity: 1; }

/* 사용자 후기를 한 장씩 보여주는 자동 슬라이더 */
.community-section {
  padding-top: clamp(45px, 5vw, 70px);
  padding-bottom: clamp(45px, 5vw, 70px);
}
.review-list {
  display: block;
  overflow: hidden;
}
.review-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 164px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.review-track .review-card {
  flex: 0 0 calc((100% - 8px) / 2);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px;
}
.review-track .review-author i {
  width: 26px;
  height: 26px;
  margin-right: 7px;
  font-size: 7px;
}
.review-track .review-author em { font-size: 13px; }
.review-track .review-card > p {
  margin: 5px 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: #e4edf2;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
}
.review-track .review-stars { font-size: 7px; }
.review-controls {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 38px auto 1fr 38px;
  gap: 12px;
  align-items: center;
}
.review-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(149,201,230,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #dceaf1;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.review-controls button:hover { border-color: #72cbff; background: rgba(114,203,255,.12); }
.review-position { color: #87a4b4; font-size: 8px; letter-spacing: .12em; }
.review-controls > i {
  height: 1px;
  overflow: hidden;
  background: rgba(149,201,230,.18);
}
.review-controls > i > b {
  display: block;
  width: 0;
  height: 100%;
  background: #72cbff;
  transition: width .55s;
}

/* Keep the carousel controls clear of the review content. */
.review-viewport {
  height: 154px;
  overflow: hidden;
}
.review-track {
  height: auto;
}
.review-track .review-card {
  height: 154px;
  flex: 0 0 154px;
  padding: 20px 22px;
}
.review-track .review-card > p {
  margin: 12px 0;
  display: -webkit-box;
  white-space: normal;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.review-controls {
  margin-top: 20px;
  grid-template-columns: 1fr auto 38px 38px;
}
.review-controls > i { grid-column: 1; grid-row: 1; }
.review-position { grid-column: 2; grid-row: 1; }
.review-prev { grid-column: 3; grid-row: 1; }
.review-next { grid-column: 4; grid-row: 1; }

/* Reactions and comments belong to one compact participation area. */
.engagement-section {
  padding-top: clamp(42px, 5vw, 70px);
  padding-bottom: clamp(46px, 5.5vw, 78px);
  background: #eef8fc;
}
.engagement-like {
  min-height: 86px;
  padding-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.engagement-like p,
.comments-heading p {
  margin: 0 0 7px;
  color: #168cca;
  font-size: 8px;
  letter-spacing: .18em;
}
.engagement-like h2 {
  margin: 0;
  font: 400 clamp(25px, 3vw, 38px)/1.1 var(--serif);
}
.like-button {
  width: auto;
  height: 46px;
  min-width: 118px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 24px;
}
.like-button span { font-size: 18px; }
.like-button b { margin: 0; font: 17px var(--serif); }
.like-button small { font-size: 7px; }
.comments-section { padding-top: 30px; }
.comments-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.comments-heading h2 {
  margin: 0;
  font: 400 clamp(24px, 2.7vw, 36px)/1 var(--serif);
}
.comments-heading > span {
  color: #849aa7;
  font-size: 8px;
  letter-spacing: .12em;
}
.comment-form {
  padding: 16px 18px;
  border-radius: 7px;
}
.comment-form label { margin-bottom: 8px; }
.comment-form input { padding: 9px 0; }
.comment-list {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}
.comment-list article { padding: 17px 0; }

@media (max-width: 760px) {
  .review-viewport { height: 180px; }
  .review-track { height: auto; }
  .review-track .review-card { height: 180px; flex-basis: 180px; padding: 18px; }
  .review-controls { grid-template-columns: 1fr auto 36px 36px; gap: 8px; }
  .review-controls button { width: 36px; height: 36px; }
  .engagement-like { align-items: flex-start; }
  .engagement-like h2 { font-size: 27px; }
  .like-button { min-width: 104px; height: 42px; padding: 0 14px; }
  .comment-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hidden-item > .hidden-toggle { grid-template-columns: 43px 1fr auto; min-height: 92px; }
  .hidden-toggle-label { min-width: 38px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font-size: 0; }
  .hidden-toggle-text { display: none; }
  .hidden-toggle-label i { margin: 0; font-size: 14px; }
  .hidden-detail p { margin-left: 43px; padding: 17px 18px; }
  .review-track { height: auto; }
}

/* 대표 도시 이미지는 실제 img 태그로 연결합니다. */
.city-card {
  isolation: isolate;
  background: #102431;
}

.city-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 13, 23, .86), rgba(2, 13, 23, .08) 72%);
  pointer-events: none;
}

.city-card-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.city-card:hover .city-card-image { transform: scale(1.045); }

/* 대표 도시 카드 문구 가독성 */
.city-card::after {
  background: linear-gradient(
    0deg,
    rgba(2, 13, 23, .97) 0%,
    rgba(2, 13, 23, .82) 28%,
    rgba(2, 13, 23, .32) 58%,
    rgba(2, 13, 23, .08) 100%
  );
}

.city-card > span,
.city-card > div {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

.city-card small {
  color: #bfe8ff;
  font-size: 11px;
  font-weight: 600;
}

.city-card h3 {
  margin-top: 9px;
  margin-bottom: 12px;
  font-size: clamp(35px, 3vw, 44px);
}

.city-card p {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

.city-card button {
  margin-top: 19px;
  color: #8ed8ff;
  font-size: 10px;
  font-weight: 700;
}

.city-story-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #8ed8ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.city-story-cta i { font-size: 14px; font-style: normal; transition: transform .25s; }
.city-card:hover .city-story-cta i { transform: translateX(5px); }
.city-story-hit {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.city-story-hit:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }

/* Representative-city video stories modal */
body.city-stories-open { overflow: hidden; }
.city-stories-backdrop[hidden] { display: none; }
.city-stories-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  padding: clamp(10px, 2vw, 24px);
  display: grid;
  place-items: center;
  background: rgba(1, 10, 17, .84);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s;
}
.city-stories-backdrop.is-open { opacity: 1; }
.city-stories-modal {
  position: relative;
  width: min(1180px, 100%);
  max-height: 96dvh;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(156, 203, 225, .2);
  border-radius: 18px;
  background: #f5f9fc;
  color: var(--ink);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .48);
  transform: translateY(24px) scale(.985);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1);
}
.city-stories-backdrop.is-open .city-stories-modal { transform: none; }
.city-stories-close {
  position: absolute;
  z-index: 5;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(3, 17, 27, .38);
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.city-stories-header {
  --city-story-image: none;
  position: relative;
  min-height: 168px;
  padding: 26px clamp(24px, 4vw, 52px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(3, 19, 31, .98) 8%, rgba(3, 19, 31, .73) 58%, rgba(3, 19, 31, .38)), var(--city-story-image) center 44% / cover;
  color: white;
}
.city-stories-header::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  pointer-events: none;
}
.city-stories-header > * { position: relative; z-index: 1; }
.city-stories-header p { margin: 0 0 8px; color: var(--sky); font-size: 8px; letter-spacing: .2em; }
.city-stories-header span { color: #b9d8e8; font-size: 10px; }
.city-stories-header h2 { margin: 1px 0 6px; font: 400 clamp(36px, 4.2vw, 54px)/.95 var(--serif); }
.city-stories-header small { color: #c6d5dc; font: 300 10px/1.7 'Pretendard','Noto Sans KR',sans-serif; }
.city-stories-header > b { padding: 0 48px 5px 0; color: rgba(255,255,255,.55); font: 8px/1.7 'Pretendard','Noto Sans KR',sans-serif; letter-spacing: .15em; text-align: right; }
.city-story-tabs {
  padding: 14px clamp(20px, 4vw, 48px) 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.city-story-tabs::-webkit-scrollbar { display: none; }
.city-story-tabs button {
  min-height: 34px;
  padding: 0 15px;
  flex: 0 0 auto;
  border: 1px solid #c9dae3;
  border-radius: 20px;
  background: white;
  color: #647b87;
  font-size: 9px;
  cursor: pointer;
  transition: .25s;
}
.city-story-tabs button:hover { border-color: #168cca; color: #116f99; }
.city-story-tabs button.active { border-color: var(--navy); background: var(--navy); color: white; }
.city-story-slider { padding: 14px clamp(20px, 4vw, 48px) 22px; }
.city-story-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.city-story-viewport::-webkit-scrollbar { display: none; }
.city-story-track { display: flex; gap: 18px; }
.city-story-video {
  min-width: calc((100% - 18px) / 2.15);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #d4e2e9;
  border-radius: 12px;
  background: white;
  box-shadow: 0 13px 35px rgba(19, 58, 78, .08);
}
.city-story-player { position: relative; aspect-ratio: 16 / 9; background: #071b28; }
.city-story-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.city-story-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #071b28;
  cursor: pointer;
  touch-action: pan-x;
}
.city-story-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,13,23,.38), transparent 65%); }
.city-story-play img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s; }
.city-story-play span {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(3,18,29,.72);
  color: white;
  font-size: 13px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(7px);
  transition: background .25s, transform .25s;
}
.city-story-play:hover img { transform: scale(1.035); }
.city-story-play:hover span { background: #168cca; transform: translate(-50%, -50%) scale(1.08); }
.city-story-video > div:last-child { min-height: 82px; padding: 12px 16px 13px; }
.city-story-video > div:last-child > span { color: #168cca; font-size: 7px; letter-spacing: .15em; }
.city-story-video h3 { margin: 5px 0 8px; color: #213c4b; font-size: 13px; font-weight: 600; }
.city-story-video a { color: #758c97; font-size: 8px; font-weight: 600; letter-spacing: .05em; }
.city-story-video a:hover { color: #168cca; }
.city-story-controls {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr 36px 36px;
  gap: 12px;
  align-items: center;
}
.city-story-controls > span { color: #708793; font: 11px var(--serif); }
.city-story-controls > i { height: 1px; overflow: hidden; background: #cfdee5; }
.city-story-controls > i b { display: block; width: 20%; height: 100%; background: #168cca; transition: width .3s; }
.city-story-controls button {
  width: 36px;
  height: 36px;
  border: 1px solid #bcd0da;
  border-radius: 50%;
  background: white;
  color: #244a5d;
  cursor: pointer;
}
.city-story-controls button:hover:not(:disabled) { border-color: #168cca; color: #168cca; }
.city-story-controls button:disabled { opacity: .32; cursor: default; }

@media (max-width: 760px) {
  .city-stories-backdrop { padding: 0; align-items: end; }
  .city-stories-modal { width: 100%; max-height: 94dvh; border-radius: 19px 19px 0 0; }
  .city-stories-header { min-height: 150px; padding: 24px 20px; }
  .city-stories-header > b { display: none; }
  .city-stories-header h2 { font-size: 38px; }
  .city-stories-header small { display: block; max-width: 260px; }
  .city-stories-close { top: 16px; right: 16px; width: 38px; height: 38px; }
  .city-story-tabs { padding: 12px 17px 0; }
  .city-story-slider { padding: 12px 17px 18px; }
  .city-story-track { gap: 11px; }
  .city-story-video { min-width: 87%; }
  .city-story-video > div:last-child { min-height: 80px; padding: 11px 14px; }
  .city-story-controls { grid-template-columns: auto 1fr 38px 38px; gap: 8px; }
  .city-story-controls button { width: 38px; height: 38px; }
}

@media (max-width: 760px) {
  .city-card p { font-size: 12px; }
  .city-card h3 { font-size: 37px; }
}

/* 상세 히어로 왼쪽 국가 내비게이션 */
.destination-country-nav {
  position: absolute;
  z-index: 6;
  top: 116px;
  bottom: 58px;
  left: clamp(24px, 4vw, 68px);
  width: 150px;
  color: rgba(255, 255, 255, .68);
}

.country-nav-back {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
}

.destination-country-nav nav {
  position: absolute;
  top: 32%;
  left: 0;
  width: 100%;
  display: grid;
}

.destination-country-nav nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}

.destination-country-nav nav a {
  position: relative;
  min-height: 43px;
  padding-left: 25px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .52);
  font-size: 11px;
  transition: color .25s, transform .25s;
}

.destination-country-nav nav a i {
  position: absolute;
  z-index: 2;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  transform: scale(.35);
  transition: transform .25s, background .25s, border-color .25s;
}

.destination-country-nav nav a:hover,
.destination-country-nav nav a.active {
  color: #fff;
  transform: translateX(4px);
}

.destination-country-nav nav a.active {
  font-weight: 600;
}

.destination-country-nav nav a:hover i,
.destination-country-nav nav a.active i {
  border-color: #f7f2e8;
  background: #f7f2e8;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .08);
  transform: scale(1);
}

@media (min-width: 901px) {
  .destination-copy {
    left: clamp(230px, 22vw, 360px);
  }

  .detail-header .back-link { display: none; }
}

@media (max-width: 900px) {
  .destination-country-nav { display: none; }
}

@media (max-width: 760px) {
  :root { --detail-title-size: 58px; }
}

/* 환율 계산기는 정보 카드 아래에 붙는 컴팩트 바 형태로 사용합니다. */
.currency-calculator {
  padding-top: 26px;
  padding-bottom: 26px;
  gap: 4vw;
}

.calculator-heading h2 {
  margin-bottom: 6px;
  font-size: 28px;
}

.calculator-fields label > div { height: 48px; }

.calculator-fields input,
.krw-output strong { font-size: 23px; }

.calculator-footer { margin-top: -3px; }

@media (max-width: 760px) {
  .currency-calculator {
    padding-top: 24px;
    padding-bottom: 24px;
    gap: 18px;
  }

  .calculator-heading h2 { font-size: 25px; }
  .calculator-fields label > div { height: 46px; }
}

/* The route switches between practical 3, 5 and 7-day itineraries. */
.course-heading { gap: 28px; }
.course-duration-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-duration-tabs > span {
  margin-right: 8px;
  color: #849aa7;
  font-size: 8px;
  letter-spacing: .13em;
}
.course-duration-tabs button {
  min-width: 72px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  color: #718691;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.course-duration-tabs button:hover { border-color: #168cca; color: #0e668f; }
.course-duration-tabs button.active {
  border-color: var(--navy);
  background: var(--navy);
  color: white;
}
.course-departure {
  margin: -8px 0 38px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7fbfd;
}
.course-departure label span,
.course-departure label small { display: block; }
.course-departure label span {
  color: #168cca;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}
.course-departure label small {
  margin-top: 7px;
  color: #718691;
  font-size: 10px;
}
.course-departure-select {
  position: relative;
  min-width: min(100%, 300px);
}
.course-departure-select select {
  width: 100%;
  height: 46px;
  padding: 0 46px 0 16px;
  appearance: none;
  border: 1px solid #b9ccd6;
  border-radius: 4px;
  outline: none;
  background: white;
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}
.course-departure-select select:focus { border-color: #168cca; }
.course-departure-select i {
  position: absolute;
  right: 16px;
  top: 50%;
  color: #168cca;
  font-size: 12px;
  font-style: normal;
  pointer-events: none;
  transform: translateY(-50%);
}
.course-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
.course-line { display: none; }
.course-days { border-top: 1px solid var(--line); }
.course-days .course-day {
  min-height: 0;
  display: block;
  border-bottom: 1px solid var(--line);
}
.course-day-toggle {
  width: 100%;
  min-height: 116px;
  padding: 20px 4px;
  display: grid;
  grid-template-columns: 78px 1fr 38px;
  gap: 18px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.course-day-toggle > span {
  color: #168cca;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}
.course-day-toggle small {
  color: #7d929d;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .1em;
}
.course-day-toggle h3 {
  margin: 5px 0 7px;
  font-size: clamp(24px, 2.3vw, 34px);
}
.course-day-toggle p {
  margin: 0;
  color: #718691;
  font-size: 11px;
  line-height: 1.6;
}
.course-day-toggle > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #b9ccd6;
  border-radius: 50%;
  color: #285166;
  font-size: 15px;
  font-style: normal;
  transition: transform .3s, background .3s, color .3s;
}
.course-day.is-open .course-day-toggle > i {
  background: var(--navy);
  color: white;
  transform: rotate(45deg);
}
.course-day-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.course-day-detail > div {
  min-height: 0;
  overflow: hidden;
}
.course-day.is-open .course-day-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}
.course-day-detail ol {
  margin: 0 0 14px 96px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  background: #f1f7fa;
}
.course-day-detail li span,
.course-day-detail > div > p span {
  display: block;
  margin-bottom: 7px;
  color: #168cca;
  font-size: 7px;
  letter-spacing: .12em;
}
.course-day-detail li b,
.course-day-detail > div > p b {
  color: #344f5d;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
}
.course-day-detail > div > p {
  margin: 0 0 22px 96px;
  padding-left: 20px;
  border-left: 2px solid var(--sky);
}
.course-summary {
  position: sticky;
  top: 30px;
  border-radius: 7px;
}
.course-summary strong { margin-top: 28px; }
.course-summary dl {
  margin: 30px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.course-summary dl > div {
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.course-summary dt {
  color: #718d9d;
  font-size: 7px;
  letter-spacing: .12em;
}
.course-summary dd {
  margin: 0;
  color: #dcebf2;
  font-size: 9px;
  font-weight: 600;
}
.course-save {
  width: 100%;
  margin-top: 26px;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid #5f7888;
  background: transparent;
  color: white;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}
.course-save span { color: var(--sky); }
.course-save.is-saved { color: var(--sky); border-color: var(--sky); }

@media (max-width: 760px) {
  .course-heading { display: block; }
  .course-duration-tabs { margin-top: 24px; overflow-x: auto; }
  .course-duration-tabs > span { display: none; }
  .course-duration-tabs button { flex: 1 0 auto; }
  .course-departure { margin-top: 24px; align-items: stretch; flex-direction: column; gap: 16px; }
  .course-departure-select { min-width: 100%; }
  .course-layout { grid-template-columns: 1fr; gap: 24px; }
  .course-summary { position: static; grid-column: auto; order: -1; padding: 26px; }
  .course-summary strong { margin-top: 20px; }
  .course-summary dl { margin-top: 22px; }
  .course-day-toggle { grid-template-columns: 60px 1fr 34px; gap: 10px; min-height: 108px; }
  .course-day-toggle h3 { font-size: 23px; }
  .course-day-toggle p { padding-right: 5px; }
  .course-day-detail ol {
    margin-left: 60px;
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .course-day-detail > div > p { margin-left: 60px; }
}

/* Place cards can be pinned directly to the personal travel board. */
.city-card .place-pin-button {
  min-height: 36px;
  margin-top: 18px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 20px;
  background: rgba(4,20,31,.38);
  color: white;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.city-card .place-pin-button:hover,
.city-card .place-pin-button.is-pinned {
  border-color: var(--sky);
  background: var(--sky);
  color: var(--navy);
}
.hidden-detail-inner .place-pin-button {
  min-width: 88px;
  height: 38px;
  margin: 0 0 24px 80px;
  padding: 0 13px;
  border: 1px solid #9fc8db;
  border-radius: 20px;
  background: white;
  color: #116f99;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}
.hidden-detail-inner .place-pin-button.is-pinned {
  border-color: var(--navy);
  background: var(--navy);
  color: white;
}
@media (max-width: 760px) {
  .hidden-detail-inner .place-pin-button { margin-left: 43px; }
}

.pin-save-notice {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: 24px;
  width: min(560px, calc(100% - 30px));
  padding: 15px 16px 15px 19px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(114,203,255,.35);
  border-radius: 12px;
  background: rgba(4,23,35,.96);
  color: white;
  box-shadow: 0 18px 55px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .3s, transform .3s;
}
.pin-save-notice.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.pin-save-notice span { min-width: 0; }
.pin-save-notice b,.pin-save-notice small { display: block; }
.pin-save-notice b { font-size: 11px; }
.pin-save-notice small { margin-top: 4px; color: #8fa9b7; font-size: 8px; }
.pin-save-notice a { margin-left: auto; white-space: nowrap; color: var(--sky); font-size: 9px; font-weight: 700; }
@media (max-width: 520px) {
  .pin-save-notice { align-items: flex-start; }
  .pin-save-notice small { line-height: 1.5; }
}
/* Keep white navigation legible over bright destination photography. */
.detail-header {
  background: linear-gradient(180deg, rgba(2, 13, 23, .62) 0%, rgba(2, 13, 23, .2) 68%, transparent 100%);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .78);
}

/* Discover → Pin → Plan service flow */
.top-quick-info{height:170px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:#fff}.top-quick-info article{position:relative;min-height:0;padding:39px clamp(20px,3.2vw,48px);border-right:1px solid var(--line)}.top-quick-info article:last-child{border:0}.top-quick-info article>span{position:absolute;right:18px;top:16px;color:#d0dfe6;font:18px var(--serif)}.top-quick-info small,.top-quick-info strong{display:block}.top-quick-info small{margin:0 0 18px;color:#7c95a3;font-size:8px;font-weight:700;letter-spacing:.15em}.top-quick-info strong{font:clamp(18px,2vw,27px) var(--serif)}.currency-calculator{height:170px}
.hero-exchange { position:absolute;z-index:5;right:clamp(24px,5vw,76px);bottom:34px;min-width:245px;padding:16px 18px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(3,18,29,.62);color:#fff;backdrop-filter:blur(12px); }
.hero-exchange span { display:block;color:var(--sky);font-size:7px;font-weight:700;letter-spacing:.16em; }
.hero-exchange strong { display:block;margin-top:7px;font:20px var(--serif); }
.hero-exchange p { margin:5px 0 0;color:#bbced8;font-size:9px;letter-spacing:.06em; }
.destination-page .content-section { padding-block: clamp(72px, 8vw, 118px); }
.city-card { isolation:isolate;background:#102634; }
.city-card::before { content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(2,13,23,.85),rgba(2,13,23,.06) 72%);pointer-events:none; }
.city-card-image { position:absolute;z-index:-2;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s; }
.city-card:hover .city-card-image { transform:scale(1.035); }
.city-card .city-card-topline { position:absolute;z-index:4;left:20px;right:14px;top:14px;padding:0;display:flex;align-items:center;justify-content:space-between; }
.city-card>div:last-child { position:relative;z-index:2;margin-top:auto; }
.city-card-topline>span { color:#fff;font:18px var(--serif);text-shadow:0 2px 8px rgba(0,0,0,.7); }
.city-card .city-card-topline button { width:38px;height:38px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#17384c;font-size:19px;box-shadow:0 7px 20px rgba(5,24,37,.18);cursor:pointer; }
.city-card .city-card-topline .city-save-heart.is-saved { color:#168cca; }
.city-card .city-card-topline button:hover { background:#17384c;color:#fff; }
.city-card .city-video-link { width:100%;margin-top:18px;padding:11px 0;border:0;border-bottom:1px solid rgba(255,255,255,.55);background:transparent;color:var(--sky);font-size:8px;font-weight:700;letter-spacing:.09em;text-align:left;cursor:pointer; }
.hidden-card-grid,.traveler-pick-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.hidden-card { overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 12px 35px rgba(6,26,45,.06); }
.hidden-card-image { position:relative;height:270px;overflow:hidden;background:#dce8ed; }
.hidden-card-image img { width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s; }
.hidden-card:hover img { transform:scale(1.035); }
.spot-like { position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#17384c;font-size:19px;cursor:pointer;box-shadow:0 7px 20px rgba(5,24,37,.16); }
.spot-like.is-saved { color:#168cca; }
.hidden-card-body { padding:22px; }
.hidden-card-body>span { color:#168cca;font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; }
.hidden-card-body h3 { margin:9px 0;font:28px var(--serif); }
.hidden-card-body p { min-height:48px;margin:0;color:#718691;font-size:10px;line-height:1.7; }
.spot-save,.city-card [data-save-id] { width:100%;margin-top:19px;padding:12px 0;border:0;border-bottom:1px solid #9db3bf;background:transparent;color:#17384c;font-size:8px;font-weight:700;letter-spacing:.09em;text-align:left;cursor:pointer; }
.spot-save.is-saved,.city-card [data-save-id].is-saved { color:#168cca;border-color:#168cca;cursor:pointer; }
.destination-insights { background:#eef5f8; }
.insight-tabs { display:flex;border-bottom:1px solid #c7d9e2; }
.insight-tabs button { min-width:170px;padding:16px 4px;border:0;border-bottom:2px solid transparent;background:transparent;color:#7d929d;font-size:9px;font-weight:700;letter-spacing:.11em;cursor:pointer; }
.insight-tabs button.active { border-color:#168cca;color:#102f40; }
.insight-panel { height:340px;display:none;padding-top:30px;overflow:hidden; }
.insight-panel.active { display:block; }
.traveler-pick-card { padding:28px;border:1px solid #d6e3e9;border-radius:12px;background:#fff; }
.traveler-picks-swiper{overflow:hidden}.traveler-picks-swiper .swiper-wrapper{align-items:stretch}.traveler-picks-swiper .traveler-pick-card{height:auto;display:flex;flex-direction:column}.traveler-picks-swiper .traveler-pick-author{margin-top:auto}.traveler-swiper-controls{margin-top:24px;display:flex;align-items:center;justify-content:flex-end;gap:13px}.traveler-swiper-controls>button{width:38px;height:38px;border:1px solid #afc4ce;border-radius:50%;background:#fff;color:#17384c;font-size:15px;cursor:pointer}.traveler-swiper-controls>button:hover{border-color:#168cca;color:#168cca}.traveler-swiper-controls>button.swiper-button-disabled{opacity:.35;cursor:default}.traveler-swiper-pagination{position:static!important;width:auto!important;display:flex;align-items:center}.traveler-swiper-pagination .swiper-pagination-bullet{width:6px;height:6px;background:#8ba3af;opacity:.35}.traveler-swiper-pagination .swiper-pagination-bullet-active{background:#168cca;opacity:1}
.traveler-pick-card>span { color:#168cca;font-size:9px;letter-spacing:.18em; }
.traveler-pick-card>p { min-height:76px;margin:24px 0;color:#415d6b;font:300 13px/1.8 var(--sans); }
.traveler-pick-author { padding-top:16px;display:flex;justify-content:space-between;border-top:1px solid #e1e9ed; }
.traveler-pick-author b { font-size:9px; }
.traveler-pick-author small { color:#8a9da7;font-size:8px; }
.traveler-notes{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:clamp(20px,3vw,42px);align-items:start}.traveler-note-form{padding:20px 22px;border:1px solid #d6e3e9;border-radius:12px;background:#fff}.traveler-note-form label{display:block;margin-bottom:12px;color:#607985;font-size:10px;line-height:1.7}.traveler-note-form>div{display:flex;border-bottom:1px solid #9fb5c0}.traveler-note-form input{min-width:0;flex:1;padding:10px 0;border:0;outline:0;background:transparent;color:#17384c;font:10px var(--sans)}.traveler-note-form button{padding:0 8px;border:0;background:transparent;color:#168cca;font-size:8px;font-weight:700;cursor:pointer}.traveler-note-list{border-top:1px solid #cbdbe2}.traveler-note-list article{padding:17px 0;display:grid;grid-template-columns:40px 1fr;gap:14px;border-bottom:1px solid #d7e4e9}.traveler-note-list article>i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dcecf3;color:#31586a;font-size:9px;font-style:normal}.traveler-note-list header{display:flex;gap:12px}.traveler-note-list b{font-size:9px}.traveler-note-list header span{color:#92a4ac;font-size:8px}.traveler-note-list p{margin:6px 0 0;color:#526d79;font-size:10px;line-height:1.6}
.traveler-note-list{--note-row-height:86px;height:calc(var(--note-row-height) * var(--visible-notes,3));overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}.traveler-note-track{will-change:transform}.traveler-note-list article{height:var(--note-row-height);padding:15px 0;align-items:center}.traveler-note-list p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.traveler-note-feed{min-width:0}.traveler-note-feed-head{min-height:38px;padding-bottom:6px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cbdbe2}.traveler-note-feed-head p{margin:0;color:#81959f;font-size:8px;letter-spacing:.06em}.traveler-note-feed-head>div{display:flex;gap:6px}.traveler-note-feed-head button{width:30px;height:30px;border:1px solid #bfd0d8;border-radius:50%;background:#fff;color:#17384c;font-size:12px;cursor:pointer}.traveler-note-feed-head button:hover{border-color:#168cca;color:#168cca}.traveler-note-feed-head button.swiper-button-disabled{opacity:.3;cursor:default}.traveler-notes-swiper{height:240px;overflow:hidden}.traveler-notes-swiper #traveler-note-list article{height:auto;padding:12px 0;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;border-bottom:1px solid #d7e4e9}.traveler-notes-swiper article>i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dcecf3;color:#31586a;font-size:9px;font-style:normal}.traveler-notes-swiper header{display:flex;gap:12px}.traveler-notes-swiper b{font-size:9px}.traveler-notes-swiper header span{color:#92a4ac;font-size:8px}.traveler-notes-swiper p{margin:6px 0 0;display:-webkit-box;overflow:hidden;color:#526d79;font-size:10px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.route-brief-section{background:#fff}.route-brief{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#f7fafb}.route-brief>summary{padding:clamp(27px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:30px;list-style:none;cursor:pointer}.route-brief>summary::-webkit-details-marker{display:none}.route-brief>summary p{margin:0 0 10px;color:#168cca;font-size:8px;font-weight:700;letter-spacing:.18em}.route-brief>summary h2{margin:0;font:clamp(34px,4vw,54px)/1 var(--serif)}.route-brief>summary h2 span{color:#168cca}.route-brief>summary small{display:block;margin-top:13px;color:#7b909b;font-size:10px}.route-brief>summary>b{min-width:86px;padding:12px 15px;display:flex;justify-content:space-between;border-bottom:1px solid #9fb5c0;color:#17384c;font-size:8px;letter-spacing:.1em}.route-brief>summary i{color:#168cca;font-size:16px;font-style:normal;transition:transform .25s}.route-brief[open]>summary i{transform:rotate(45deg)}.route-brief-content{padding:0 clamp(27px,4vw,48px) clamp(30px,4vw,48px);border-top:1px solid var(--line)}.route-duration-tabs{padding:20px 0;display:flex;gap:7px}.route-duration-tabs button{padding:9px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;color:#718691;font-size:8px;font-weight:700;cursor:pointer}.route-duration-tabs button.active{border-color:var(--navy);background:var(--navy);color:#fff}.route-day-list{border-top:1px solid var(--line)}.route-day-list article{padding:20px 4px;display:grid;grid-template-columns:52px minmax(0,1fr) 90px;gap:18px;align-items:start;border-bottom:1px solid var(--line)}.route-day-list article>span{color:#168cca;font:18px var(--serif)}.route-day-list small{color:#7d929d;font-size:7px;letter-spacing:.1em}.route-day-list h3{margin:5px 0 7px;font:26px var(--serif)}.route-day-list p{margin:0;color:#718691;font-size:10px;line-height:1.6}.route-day-list article>b{justify-self:end;color:#5e7885;font-size:8px}.route-day-list dl{margin:15px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.route-day-list dl>div{padding:10px;background:#edf5f8}.route-day-list dt{margin-bottom:5px;color:#168cca;font-size:6px;letter-spacing:.1em}.route-day-list dd{margin:0;color:#405d6a;font-size:8px;line-height:1.4}
.quick-info-grid { margin:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d2e0e6;background:#fff; }
.quick-info-grid>div { min-height:145px;padding:30px;border-right:1px solid #d2e0e6; }
.quick-info-grid>div:last-child { border:0; }
.quick-info-grid dt { margin-bottom:22px;color:#7b929e;font-size:8px;letter-spacing:.14em; }
.quick-info-grid dd { margin:0;font:23px var(--serif); }
.journey-cta-card { padding:clamp(28px,4vw,54px);display:flex;align-items:center;justify-content:space-between;gap:30px;border-radius:14px;background:var(--navy);color:#fff; }
.journey-cta-card p { max-width:600px;margin:0;color:#a9bec9;font:300 12px/1.8 var(--sans); }
.journey-cta-card a { white-space:nowrap;color:var(--sky);font-size:9px;font-weight:700;letter-spacing:.1em; }
.journey-toast { position:fixed;z-index:1300;left:50%;bottom:24px;width:min(470px,calc(100% - 30px));padding:16px 18px;display:flex;justify-content:space-between;gap:20px;border:1px solid rgba(114,203,255,.4);border-radius:10px;background:rgba(4,23,35,.97);color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,18px);transition:.3s; }
.journey-toast.show { opacity:1;transform:translate(-50%,0); }
.journey-toast span { font-size:10px;font-weight:700; }
.journey-toast a { color:var(--sky);font-size:9px;font-weight:700; }
body.modal-open{overflow:hidden}.city-video-backdrop[hidden]{display:none}.city-video-backdrop{position:fixed;z-index:1500;inset:0;padding:28px;display:grid;place-items:center;background:rgba(2,13,23,.82);opacity:0;transition:opacity .28s;backdrop-filter:blur(10px)}.city-video-backdrop.open{opacity:1}.city-video-modal{position:relative;width:min(1120px,100%);max-height:92vh;overflow:auto;padding:36px;border-radius:16px;background:#f5f9fc;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.4);transform:translateY(18px);transition:transform .32s;overscroll-behavior:contain;scrollbar-width:none}.city-video-modal::-webkit-scrollbar,.city-video-list::-webkit-scrollbar,.city-video-tabs::-webkit-scrollbar{display:none}.city-video-backdrop.open .city-video-modal{transform:none}.city-video-close{position:absolute;z-index:2;right:22px;top:18px;width:38px;height:38px;border:0;background:transparent;color:#17384c;font-size:28px;cursor:pointer}.city-video-modal>header{padding-right:55px;display:flex;align-items:end;justify-content:space-between}.city-video-modal>header p{margin:0;color:#168cca;font-size:8px;font-weight:700;letter-spacing:.18em}.city-video-modal>header span{display:block;margin-top:10px;color:#8095a0;font-size:10px}.city-video-modal>header h2{margin:3px 0 0;font:46px var(--serif)}.city-video-modal>header>b{color:#8ba1ad;font-size:8px;line-height:1.6;letter-spacing:.13em;text-align:right}.city-video-tabs{margin-top:27px;display:flex;gap:5px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.city-video-tabs button{min-width:max-content;padding:12px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:#8296a0;font-size:8px;font-weight:700;cursor:pointer}.city-video-tabs button.active{border-color:#168cca;color:#17384c}.city-video-content{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:22px}.city-video-player{position:relative;overflow:hidden;border-radius:10px;background:#020d17;aspect-ratio:16/9}.city-video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.city-video-list{max-height:430px;overflow:auto;border-top:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:none}.city-video-item{width:100%;padding:16px 5px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#68808c;text-align:left;cursor:pointer}.city-video-item>span{color:#9cafb8;font:14px var(--serif)}.city-video-item>b{font-size:10px}.city-video-item>i{color:#168cca;font-size:7px;font-style:normal}.city-video-item.active{background:#e9f4f9;color:#17384c}

/* 체크리스트 팝업은 화면 안에 맞추고 스크롤바는 시각적으로 숨깁니다. */
.travel-help-modal{max-height:calc(100dvh - 32px);padding:clamp(22px,3.5vh,40px);overflow-y:auto;scrollbar-width:none}.travel-help-modal::-webkit-scrollbar{display:none}.travel-help-modal h2{margin:5px 0 20px;font-size:clamp(31px,4vh,40px)}.travel-power-card{padding:15px 18px}.travel-checklist-head{margin:18px 0 8px}.travel-checklist{gap:6px}.travel-checklist label{min-height:42px;padding:8px 12px}.travel-help-notice{margin-top:12px}
@media(max-height:700px){.travel-help-modal{padding:18px 22px}.travel-help-close{right:12px;top:10px;width:34px;height:34px}.travel-help-modal h2{margin:3px 0 13px;font-size:29px}.travel-power-card{grid-template-columns:38px 1fr;padding:11px 14px}.travel-plug-icon{width:36px;height:36px;font-size:20px}.travel-power-card p{margin-top:3px}.travel-checklist-head{margin:12px 0 6px}.travel-checklist{gap:5px}.travel-checklist label{min-height:35px;padding:6px 10px}.travel-help-notice{margin-top:8px}}

/* Hero 아래 핵심 정보는 한눈에, 환율 도구는 Traveler Notes 안에서 작게 보이도록 정리합니다. */
.top-quick-info{height:118px}
.top-quick-info article{padding:27px clamp(18px,3vw,42px)}
.top-quick-info article>span{top:12px;font-size:14px}
.top-quick-info small{margin-bottom:11px;font-size:7px}
.top-quick-info strong{font-size:clamp(16px,1.65vw,22px)}
.destination-insights .currency-calculator{height:auto;min-height:0;padding:24px;grid-template-columns:minmax(190px,.45fr) minmax(0,1.55fr);gap:clamp(24px,4vw,58px);border:1px solid #d6e3e9;border-radius:12px;background:#071d2c;box-shadow:0 12px 32px rgba(6,26,45,.08)}
.destination-insights .calculator-heading h2{font-size:28px}
.destination-insights .calculator-fields label>div{height:52px}
.destination-insights .calculator-fields input,.destination-insights .krw-output strong{font-size:23px}
.destination-insights .calculator-footer{margin-top:-2px}
@media(max-width:760px){
  .top-quick-info{height:auto;min-height:0}
  .top-quick-info article{height:105px;padding:24px 18px}
  .insight-tabs button{padding-inline:2px;font-size:7px;letter-spacing:.06em}
  .destination-insights .currency-calculator{height:auto;min-height:0;padding:20px;grid-template-columns:1fr;gap:20px}
  .destination-insights .calculator-heading h2{font-size:26px}
  .destination-insights .calculator-footer{grid-column:1}
}
@media(max-width:760px){
  .top-quick-info{height:250px;grid-template-columns:repeat(2,1fr)}.top-quick-info article{min-height:0;padding:29px 18px}.top-quick-info article:nth-child(2){border-right:0}.top-quick-info article:nth-child(-n+2){border-bottom:1px solid var(--line)}.top-quick-info small{margin-bottom:12px}.currency-calculator{height:250px;min-height:250px}
  .hero-exchange{left:22px;right:22px;bottom:20px;min-width:0;padding:13px 15px}.hero-exchange strong{font-size:17px}
  .destination-copy{bottom:150px}
  .hidden-card-grid,.traveler-pick-grid{grid-template-columns:1fr}.hidden-card-image{height:240px}
  .insight-tabs button{min-width:0;flex:1}.quick-info-grid{grid-template-columns:repeat(2,1fr)}
  .quick-info-grid>div:nth-child(2){border-right:0}.quick-info-grid>div:nth-child(-n+2){border-bottom:1px solid #d2e0e6}
  .journey-cta-card{align-items:flex-start;flex-direction:column}.destination-country-nav{display:none}
  .insight-panel{height:430px;padding-top:24px}
  .traveler-notes{grid-template-columns:1fr;gap:18px}
  .traveler-note-form{padding:16px 18px}
  .traveler-note-list{--note-row-height:80px}
  .traveler-notes-swiper{height:220px}.route-brief>summary{align-items:flex-start;flex-direction:column}.route-brief>summary>b{width:100%}.route-brief-content{padding-inline:18px}.route-day-list article{grid-template-columns:42px 1fr;gap:10px}.route-day-list article>b{display:none}.route-day-list dl{grid-template-columns:1fr}
  .travel-help-backdrop{padding:8px}.travel-help-modal{max-height:calc(100dvh - 16px);padding:22px 18px;border-radius:15px}.travel-help-modal h2{font-size:30px}.travel-power-card{padding:12px 14px}.travel-checklist label{min-height:39px}
  .city-video-backdrop{padding:10px}.city-video-modal{max-height:95vh;padding:25px 18px}.city-video-modal>header h2{font-size:35px}.city-video-modal>header>b{display:none}.city-video-content{grid-template-columns:1fr}.city-video-list{max-height:230px}
}
@media(max-width:760px){.city-card .city-card-topline button{width:44px;height:44px}.hidden-card .spot-save{min-height:44px}}
@media(max-width:760px){
  .top-quick-info{height:auto;min-height:0}
  .top-quick-info article{height:105px;padding:24px 18px}
  .top-quick-info small{margin-bottom:11px}
  .destination-insights .currency-calculator{height:auto;min-height:0}
}

/* Destination의 Hidden Gems도 원본 이미지 전체가 보이도록 고정합니다. */
.hidden-card-image{height:auto!important;aspect-ratio:3/2;background:#071d2a}
.hidden-card-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important}
.hidden-card:hover .hidden-card-image img{transform:none!important}

/* Hidden Gems collection link */
.hidden-more-link{display:flex;justify-content:flex-end;margin-top:28px}

/* Suggested itinerary city selector */
.route-summary-actions{margin-left:auto;display:flex;align-items:flex-end;gap:clamp(22px,3vw,44px)}
.route-city-picker{min-width:240px;display:grid;gap:8px;cursor:default}
.route-city-picker>span{color:#168cca;font-size:7px;font-weight:700;letter-spacing:.14em}
.route-city-picker select{width:100%;height:43px;padding:0 36px 0 14px;border:1px solid #cbdce4;border-radius:6px;background-color:#fff;color:#17384c;font:700 11px var(--sans);letter-spacing:.06em;cursor:pointer;outline:none}
.route-city-picker select:hover{border-color:#8fb7c9}
.route-city-picker select:focus-visible{border-color:#168cca;box-shadow:0 0 0 3px rgba(22,140,202,.12)}
.route-open-label{min-width:86px;padding:12px 15px;display:flex;justify-content:space-between;border-bottom:1px solid #9fb5c0;color:#17384c;font-size:8px;letter-spacing:.1em}

@media(max-width:900px){
  .route-brief>summary{align-items:flex-start;flex-direction:column}
  .route-summary-actions{width:100%;margin-left:0;align-items:flex-end}
  .route-city-picker{min-width:0;flex:1}
}
@media(max-width:520px){
  .route-summary-actions{align-items:stretch;flex-direction:column;gap:12px}
  .route-city-picker{width:100%}
  .route-open-label{width:100%}

  /* Keep the compact exchange controls readable on narrow phones. */
  .destination-insights .calculator-fields{
    grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr);
    gap:5px;
  }
  .destination-insights .calculator-fields label>div{
    padding-inline:9px;
    gap:5px;
  }
  .destination-insights .calculator-fields input{
    font-size:18px;
  }
  .destination-insights .krw-output strong{
    min-width:0;
    white-space:nowrap;
    font-size:clamp(15px,4.6vw,19px);
    letter-spacing:-.04em;
  }
  .destination-insights .calculator-fields b{
    flex:0 0 auto;
    font-size:7px;
  }
  .calculator-fields .local-currency-field>.quick-amounts{
    width:calc(200% + 27px);
    justify-content:space-between;
    gap:0;
  }
  .calculator-fields .local-currency-field>.quick-amounts button{
    flex:0 0 23%;
    width:23%;
    min-height:36px;
    padding:0 6px;
    display:grid;
    place-items:center;
    white-space:nowrap;
    line-height:1;
    text-align:center;
  }
}

@media(max-width:760px){
  .destination-country-nav{
    top:auto;
    right:35px;
    bottom:76px;
    left:auto;
    width:12px;
  }
  .destination-country-nav nav{
    display:grid;
    grid-template-columns:1fr;
  }
  .destination-country-nav nav::before{
    top:8px;
    right:5px;
    bottom:8px;
    left:auto;
    width:1px;
    height:auto;
  }
  .destination-country-nav nav a{
    min-height:25px;
    padding:0;
  }
  .destination-country-nav nav a span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .destination-country-nav nav a i{
    top:50%;
    right:2px;
    left:auto;
    transform:translateY(-50%) scale(.35);
  }
  .destination-country-nav nav a:hover i,
  .destination-country-nav nav a.active i{
    transform:translateY(-50%) scale(1);
  }
}

/* Keep the exchange arrow centered on the amount fields at every width. */
@media(min-width:601px){
  .destination-insights .calculator-fields>i{
    align-self:start;
    height:52px;
    margin-top:15px;
    display:grid;
    place-items:center;
    line-height:1;
  }
}
@media(max-width:600px){
  .destination-insights .calculator-fields{
    grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);
    gap:7px;
  }
  .destination-insights .calculator-fields>i{
    align-self:start;
    height:52px;
    margin-top:15px;
    display:grid;
    place-items:center;
    line-height:1;
  }
  .calculator-fields .local-currency-field>.quick-amounts{
    width:calc(200% + 39px);
    justify-content:space-between;
    gap:0;
  }
  .calculator-fields .local-currency-field>.quick-amounts button{
    flex:0 0 23%;
    width:23%;
    min-height:36px;
    padding:0 6px;
    display:grid;
    place-items:center;
    white-space:nowrap;
    line-height:1;
    text-align:center;
  }
}
@media(max-width:520px){
  .destination-insights .calculator-fields{
    grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr);
    gap:5px;
  }
  .calculator-fields .local-currency-field>.quick-amounts{
    width:calc(200% + 27px);
  }
}

/* Keep the destination indicator available on tablets and phones. */
@media(max-width:900px){
  .destination-country-nav{
    display:block;
    top:auto;
    right:18px;
    bottom:82px;
    left:18px;
    width:auto;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .destination-country-nav .country-nav-back{display:none}
  .destination-country-nav nav{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .destination-country-nav nav::before{
    top:0;
    right:8%;
    bottom:auto;
    left:8%;
    width:auto;
    height:1px;
    background:rgba(255,255,255,.42);
  }
  .destination-country-nav nav a{
    min-height:42px;
    padding:14px 2px 0;
    justify-content:center;
    font-size:9px;
    text-shadow:0 2px 8px rgba(2,13,23,.9);
  }
  .destination-country-nav nav a span{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip-path:none;
    white-space:nowrap;
  }
  .destination-country-nav nav a i{
    top:-3px;
    left:50%;
    transform:translateX(-50%) scale(.35);
  }
  .destination-country-nav nav a:hover,
  .destination-country-nav nav a.active{
    transform:none;
  }
  .destination-country-nav nav a:hover i,
  .destination-country-nav nav a.active i{
    transform:translateX(-50%) scale(1);
  }
}

@media(max-width:520px){
  .destination-country-nav{
    top:auto;
    right:10px;
    bottom:70px;
    left:10px;
  }
  .destination-country-nav nav a{
    min-width:0;
    padding-right:0;
    padding-left:0;
    font-size:8px;
    letter-spacing:-.01em;
  }
}