/* ===================================================
   속초피크 — Tour 히어로 + 투어 페이지 디자인
   tour_hero.css
   포인트 컬러: 코랄/오렌지 #FF7F50 (기존 유지)
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ── 기존 list_slider 숨김 ── */
.list-wrap .list_slider { display: none !important; }

/* ══ 히어로 ══ */
.tour-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  background: #1a0c08;
}
.tour-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .50;
  transform: scale(1.06);
  animation: thero-zoom 7s ease-out forwards;
}
@keyframes thero-zoom { to { transform: scale(1); } }

.tour-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.70));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 52px 24px; text-align: center;
}
.tour-hero__label {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(.88rem, 2vw, 1.1rem);
  color: rgba(255,255,255,.72); letter-spacing: .12em; margin-bottom: 6px;
}
.tour-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 700;
  color: #fff; line-height: 1.1; margin: 0;
}
.tour-hero__title span { color: #FF7F50; }
.tour-hero__desc {
  margin-top: 12px; font-size: .86rem; font-weight: 300;
  color: rgba(255,255,255,.75); line-height: 1.85;
}

/* ══ 투어 본문 컨테이너 ══ */
.container-tour {
  max-width: 780px;
  margin: 48px auto 80px;
  padding: 0 20px;
  font-family: 'Noto Sans KR', sans-serif;
}

/* ── 헤더 타이틀 ── */
.tour-header {
  text-align: center;
  margin-bottom: 40px;
}
.tour-header__icon {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.tour-header__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
}
.tour-header__sub {
  font-size: .88rem;
  color: #888;
  margin: 0;
  letter-spacing: .04em;
}

/* ══ 카드 그룹 ══ */
.tour-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

/* ── 개별 카드 ── */
.tour-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px;
  border: 1.5px solid #f0ede8;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  transition: transform .25s, box-shadow .25s;
}
.tour-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(255,127,80,.12);
  border-color: rgba(255,127,80,.3);
}
.tour-card__icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.tour-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
}
.tour-card__desc {
  font-size: .875rem;
  color: #555;
  line-height: 1.8;
  margin: 0;
}
.tour-card__desc em {
  color: #FF7F50;
  font-style: normal;
  font-weight: 600;
}

/* ── 코스 리스트 ── */
.tour-course-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tour-course-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: #444;
  line-height: 1.6;
}
.tour-course-list__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff9a72, #FF7F50);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .02em;
}

/* ── 혜택 리스트 ── */
.tour-benefit-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tour-benefit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: #444;
  line-height: 1.6;
}
.benefit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FF7F50;
  color: #fff;
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 카드 왼쪽 accent 라인 ── */
.tour-card--intro  { border-left: 4px solid #FF7F50; }
.tour-card--course { border-left: 4px solid #fbbf24; }
.tour-card--benefit{ border-left: 4px solid #34d399; }

/* ══ 안내 박스 ══ */
.tour-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8f5;
  border: 1px solid rgba(255,127,80,.3);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: .85rem;
  color: #666;
  margin-bottom: 20px;
}
.tour-notice__icon { font-size: 1.1rem; flex-shrink: 0; }

/* ══ CTA 버튼 ══ */
.tour-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #ff9a72 0%, #FF7F50 50%, #ff5a1f 100%);
  background-size: 200% 200%;
  animation: cta-flow 4s ease infinite;
  color: #fff;
  text-align: center;
  padding: 18px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(255,127,80,.45);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .02em;
}
@keyframes cta-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.tour-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(255,127,80,.55);
  color: #fff;
}
.tour-cta__emoji { font-size: 1.2rem; }
.tour-cta__arrow {
  font-size: 1.1rem;
  transition: transform .2s;
}
.tour-cta:hover .tour-cta__arrow { transform: translateX(4px); }

/* ══ 반응형 ══ */
@media (max-width: 768px) {
  .tour-hero { height: 260px; }
  .tour-hero__title { font-size: 2rem; }
  .container-tour { margin: 32px auto 60px; }
  .tour-card { padding: 20px 18px; gap: 14px; }
}
@media (max-width: 480px) {
  .tour-hero { height: 220px; }
  .tour-cta { font-size: .9rem; padding: 15px 18px; }
}