/* ───────────── Palette / Spacing ───────────── */
:root{
  --bg: #F7F2EA;
  --card: #ffffff;
  --muted: #212936;
  --ink: #1F2937;
  --brand: #004780;   /* primary */
  --accent: #004780;  /* secondary */
  --highlight: #EBAF3B;

  --page-gutter: clamp(18px, 3vw, 40px);
  --card-gap: 16px;
  --thumb-ratio-mobile: 4 / 3;
  --thumb-ratio-desktop: 16 / 9;
  --hero-ratio-mobile: 16 / 9;
  --hero-ratio-desktop: 21 / 9;
  --hero-max-vh: 78vh;
  --tile-min: 300px;
  --tile-gap: 18px;
}

html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-family:'NanumSquareNeo','NanumSquare Neo','NanumSquareNeo-Variable',
              system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans KR',sans-serif !important;
}
a{color:inherit;text-decoration:none}


/* 컨테이너 */
.wrap{
  width:100%;
  margin:0 auto;
  
  padding:32px var(--page-gutter);
  box-sizing:border-box;
}
.full-bleed{padding-left:0!important;padding-right:0!important}

/* 섹션 타이틀 */
.section-title{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:0 0 16px
}
.section-title h2{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:800}
.muted{color:var(--muted);font-size:14px}

/* ───────────── Hero(배너) ───────────── */
.hero{position:relative}
.hero .swiper{width:100%;height:400px;aspect-ratio:var(--hero-ratio-mobile);max-height:var(--hero-max-vh)}
@media (min-width:900px){
  .hero .swiper{aspect-ratio:var(--hero-ratio-desktop)}
}
.hero .swiper-slide{position:relative}
.hero .swiper-slide img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.05) brightness(.96)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,22,38,.06),rgba(16,22,38,.82) 70%)}
.hero .content{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(16px,4vw,56px)
}
.hero h1{margin:0 0 14px;font-size:clamp(28px,4vw,46px);line-height:1.15}


/* ───────────── 카드 리스트(인기/요일/유튜브/SNS) ───────────── */
.hscroll{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--card-gap);
  /*padding:0 var(--page-gutter);*/
  box-sizing:border-box;
 
}
.wrap > .hscroll{ padding-left:0; padding-right:0; }
.card{
  border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--bg));
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.card .thumb{
  width:100%;height:auto;aspect-ratio:var(--thumb-ratio-mobile);
  background-size:cover;background-position:center
}
@media (min-width:1024px){
  .hscroll{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .card .thumb{aspect-ratio:var(--thumb-ratio-desktop)}
}
.card .body{padding:12px 12px 14px}
.badge{display:inline-block;background:rgba(125,220,255,.18);color:#1d477c;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;}
.title{font-weight:800;margin:8px 0 6px;font-size:16px;color : #212936}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;font-weight:Bold;}
.price{font-weight:900}

/* ───────────── Top 여행지역(모자이크) ───────────── */
.wrap.full-bleed .mosaic{padding:0 var(--page-gutter)}
.mosaic{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr));
  gap:var(--tile-gap);
  box-sizing:border-box;
  margin-bottom: 100px;
}
.mosaic .tile{
  position:relative;border-radius:16px;overflow:hidden;background:#0f1627;aspect-ratio:16/9
}
.mosaic .tile img{width:100%;height:100%;object-fit:cover}
.mosaic .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.mosaic .tile span{
  position:absolute;left:14px;bottom:12px;font-weight:900;font-size:clamp(16px,2vw,22px);text-shadow:0 2px 10px rgba(0,0,0,.45)
}
/* c6/c4 등 기존 그리드 span은 무효화 → 모든 타일 동일 폭 */
.mosaic .c6,.mosaic .c4,.mosaic .c3{grid-column:span 1 !important}

/* ───────────── 팝업(이미지 슬라이더 변환) ───────────── */
body.modal-open { overflow: hidden; }

/* 팝업 프레임 */
.popup33{
  /*display: grid;                 /* 중앙 정렬 */
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  border-radius: 20px;
  margin: 0;
  width: auto;                   /* 실제 이미지 크기로 맞춤 (JS가 지정) */
  height: auto;
  max-width: 100vw;               /* 혹시 대비용 (JS도 뷰포트 체크함) */
  max-height: 100vh;
}

.close_divbtn{flex:0 0 auto; display:flex; gap:10px; justify-content:flex-end;
  padding:10px 14px; background:#0f1627}
.btn-close{background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#091427; border:0; padding:8px 12px; border-radius:10px; cursor:pointer}

/* 슬라이드 영역은 가운데 배치 */
.popup-swiper{ width: 100%; height: 100%; display: grid; place-items: center; }
.popup-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center; background:#000;
}

/* 이미지 기본값: 왜곡 금지, 원본 비율 유지 (실제 픽셀 크기는 JS가 지정) */
.popup-swiper img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit: contain;
}


/* 섹션 제목 오른쪽 설명(빨간 박스) 공간 넓히기 */
.section-title{ gap: 14px; } /* 제목과 설명 사이 간격 살짝 확보 */

.section-title .muted{
  min-width: max-content;   /* 내용 크기만큼 자동으로 넓어짐 */
  white-space: nowrap;      /* 줄바꿈 방지 */
  flex-shrink: 0;           /* 수축 금지(폭이 줄어들지 않게) */
  padding: 6px 12px;        /* 안쪽 여백도 조금 넓게 */
  border-radius: 10px;      /* 모서리 정리(선택) */
  background: rgba(255,255,255); /* 살짝 배경(선택) */
}

/* 모바일에선 겹치지 않도록 아래로 내려서 보기 좋게 */
@media (max-width: 640px){
  .section-title{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .section-title .muted{
    min-width: 0;         /* 모바일에선 다시 기본으로 */
    white-space: normal;  /* 필요 시 줄바꿈 허용 */
    background: transparent;
    padding: 0;
  }
}
/* ===== Feature Icon Strip (배너 바로 아래) ===== */
.feature-strip{
  background:#f6f2eb ;          /* 배너와 톤 맞춘 어두운 배경 */
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.feature-strip .inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0;
  margin-bottom: 100px;
}
.feature-strip .feat{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:22px 10px; color:#cdd7ea; text-align:center;
  transition:background .2s ease, transform .2s ease;
}
.feature-strip .feat:hover{ background:rgba(255,255,255,.03); transform:translateY(-2px) }
.feature-strip .feat:not(:first-child){ border-left:1px solid rgba(255,255,255,.06) }
.feature-strip .feat img{
  width:50px; height:50px; object-fit:contain; opacity:.9; filter:grayscale(20%) brightness(1.2);
}
.feature-strip .feat span{
  font-size:14px; letter-spacing:.4px; font-weight:700; color:#000;
  text-transform:uppercase; line-height:1.2;
}

/* 모바일에서 아이콘/라벨 간격 살짝 좁게 */
@media (max-width:640px){
  .feature-strip .feat{ padding:16px 8px; gap:8px }
  .feature-strip .feat img{ width:50px; height:50px }
  .feature-strip .feat span{ font-size:12px }
}

/* ===== SNS & 여행정보: 고정 그리드/카드 ===== */
.sns-grid{
  display:grid;
  gap:var(--card-gap);
  grid-template-columns:1fr;                 /* 모바일 1열 */
}
@media (min-width:768px){
  .hero .swiper{width:100%;height:700px;aspect-ratio:var(--hero-ratio-mobile);max-height:var(--hero-max-vh)}
  .sns-grid{ grid-template-columns:repeat(2,1fr); }  /* 태블릿 2열 */
}
@media (min-width:1200px){
  .sns-grid{ grid-template-columns:repeat(3,1fr); }  /* 데스크탑 3열 */
}

/* 카드(섹션 전용) */
.sns-card{
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--card),#0f1627);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sns-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

/* 16:9 이미지 고정 */
.sns-card .thumb{
  width:100%;
  aspect-ratio:16/9;           /* 최신 브라우저 */
  background-size:cover;
  background-position:center;
  position:relative;
}
/* 구형 브라우저 호환 (aspect-ratio 미지원 대비) */
.sns-card .thumb::before{
  content:""; display:block; padding-top:56.25%;
}

/* 하단 메타 바 */
.sns-card .meta{
  padding:16px 18px;
  background:#0d1424;          /* 이미지와 분리되는 어두운 바 */
}
.sns-card .title{
  margin:0 0 4px;
  font-size:18px; font-weight:800;
}
.sns-card .sub{
  margin:0; font-size:14px; color:var(--muted);
}
@media (min-width:1200px){
  .sns-grid{ grid-template-columns:repeat(4,1fr); }
}

/* === 팝업 오버레이 & 중앙 정렬 === */
.obscure{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  z-index:1000;
  display:none;            /* JS에서 block/grid로 변경 */
  display:grid;
  place-items:center;
}


/* === 팝업 본문: 슬라이더가 100% 차도록 === */
/* === 팝업 본문 === */
.popup-body{
  position: relative;
  flex: auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;             /* 내부가 원본 크기로 커질 수 있게 */
}

/* === 슬라이더를 '내용 크기'로 === */
.popup-swiper{
  position: relative;            /* absolute 제거 */
  inset: auto;
  width: auto;                   /* 내용(이미지) 크기에 맞춤 */
  height: auto;
  display: grid;
  place-items: center;
}
.popup-swiper .swiper-wrapper,
.popup-swiper .swiper-slide{
  height: auto;                  /* 100% 강제 제거 (세로 찢어짐 원인) */
}
.popup-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center;
  background: transparent;       /* 검은 밴드 방지 */
}

/* === 이미지: 원본 픽셀 기준으로 렌더 (JS가 크기 지정) === */
.popup-swiper img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
}
/* 소셜네트웍크 : 흰 배경 + 가운데 정렬(위 섹션과 동일 폭/여백) */
/* 소셜네트웍크 섹션: wrap 구조 + 배경 흰색 */
.sns-white{ 
  background:#ffffff; 
  padding:32px var(--page-gutter);
  box-sizing:border-box;
}

/* 이미지 카드 그리드: 가운데 정렬 */
.promo-img-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:24px;
  justify-items:center;
}

.promo-imgcard{
  width:100%;
  max-width:240px;
  aspect-ratio:4 / 5;
  border-radius:16px;
  background-size:cover;
  background-position:center;
  background-color:#ffffff;   /* 카드 내부도 흰 배경 */
 
}
.promo-imgcard:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}


/* 섹션 타이틀 보조 라벨 */
.section-title .chip, .section-title .muted{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.06); color:#6B7280;
}


/* ===== Newsletter ↔ Footer separator ===== */
.hello-sep-wrap{             /* .wrap와 같은 폭을 쓰도록 감싸는 컨테이너 */
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
  margin: 28px 0 32px;       /* 위아래 여백 */
}
.hello-sep{
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.06) 10%,
    rgba(0,0,0,.18) 50%,
    rgba(0,0,0,.06) 90%,
    rgba(0,0,0,0) 100%
  );
  transform: scaleY(.5);     /* 레티나에서 더 얇게 보이도록 헤어라인 처리 */
  border-radius: 1px;
}

/* 가운데 작은 포인트 (브랜드/하이라이트 색상 선택 가능) */
.hello-sep::after{
  content:"";
  position:absolute; inset:auto 50% -6px auto;  /* 선 중앙 아래로 살짝 */
  width: 10px; height:10px; border-radius:999px;
  background: var(--highlight);                 /* #EBAF3B */
  box-shadow:
    0 0 0 3px rgba(235,175,59,.18),
    0 6px 12px rgba(0,0,0,.08);
  transform: translateX(-50%);
}

/* 다크한 배경(뉴스레터 박스) 바로 아래 대비를 조금 더 주고 싶으면 */
.newsletter-dark + .hello-sep-wrap .hello-sep{
  background: linear-gradient(
    90deg, rgba(0,0,0,0) 0%,
    rgba(0,0,0,.12) 12%,
    rgba(0,0,0,.28) 50%,
    rgba(0,0,0,.12) 88%,
    rgba(0,0,0,0) 100%
  );
}
@media (max-width:640px){
  .hello-sep-wrap{ margin:22px 0 26px; }
  .hello-sep::after{ width:8px; height:8px; box-shadow:0 0 0 2px rgba(235,175,59,.2), 0 4px 8px rgba(0,0,0,.08); }
}
/* ===== Theme cards: 이미지 위 + 제목/해시태그 아래 ===== */
:root{
  --hello-title: #232935;   /* 요청 색상 */
  --hello-hash:  #6b7280;   /* 해시태그 회색 */
}

/* ==== 테마별/지역별 추천 (세로형 카드 슬라이더) ==== */
/* ==== 테마별/지역별 추천 (카드 슬라이더) ==== */
.theme-reco { 
  padding-top: 8px; 
  margin-bottom: 100px;
}

.theme-swiper { 
  overflow: visible; 
  padding-bottom: 50px;
}

.theme-card{
  display: flex; 
  flex-direction: column;
  position: relative;
  width: 100%; 
  height: auto;
  border-radius: 20px;
  overflow: visible; /* 텍스트가 밖으로 나가도록 */
  transition: transform .25s ease;
  text-decoration: none;
}

.theme-card:hover{ 
  transform: translateY(-6px); 
}

/* 이미지 영역 */
.theme-card .photo{
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 20px;
  background-size: cover; 
  background-position: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: box-shadow .25s ease;
}

.theme-card:hover .photo{
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* 텍스트 영역 - 이미지 밖 하단 */
.theme-card .caption{
  margin-top: 16px;
  padding: 0 8px;
}

.theme-card .title{
  font-weight: 800;
  line-height: 1.35;
  font-size: 17px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  color: #1F2937;
}

.theme-card .tags{
  font-size: 13px; 
  letter-spacing: 0.3px;
  font-weight: 500;
  line-height: 1.4;
  color: #6B7280;
}

/* 내비게이션 (좌/우 동그란 버튼) */
.theme-nav{
  position: absolute; 
  inset: auto 0 -50px 0; 
  display: flex; 
  justify-content: space-between; 
  pointer-events: none;
  z-index: 10;
}

.theme-nav .nav{
  pointer-events: auto; 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  border: 0; 
  cursor: pointer;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-nav .nav:hover{ 
  transform: scale(1.08); 
  box-shadow: 0 6px 20px rgba(0,0,0,.28); 
}

.theme-nav .prev{ margin-left: 0; }
.theme-nav .next{ margin-right: 0; }

/* 화살표 아이콘 */
.theme-nav .prev::before, 
.theme-nav .next::before{
  content: ""; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 6px solid transparent; 
  border-bottom: 6px solid transparent;
}

.theme-nav .prev::before{ border-right: 7px solid #333; }
.theme-nav .next::before{ border-left: 7px solid #333; }

/* 페이지네이션 점 */
.theme-reco .swiper-pagination{
  position: relative; 
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.theme-reco .swiper-pagination-bullet{ 
  width: 8px;
  height: 8px;
  background: #bbb; 
  opacity: 1;
  border-radius: 50%;
  transition: all .3s ease;
}

.theme-reco .swiper-pagination-bullet-active{ 
  background: #333; 
  transform: scale(1.2);
}

/* 반응형 슬라이드 폭 - 4개 균등 배치 */
@media (min-width: 1200px){
  .theme-reco .swiper-slide{ 
    width: 24%; 
    max-width: 300px;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px){
  .theme-reco .swiper-slide{ 
    width: 48%; 
    max-width: 320px;
  }
}

@media (max-width: 767.98px){
  .theme-reco .swiper-slide{ 
    width: 75%; 
    max-width: 280px;
  }
  
  .theme-card .title{ font-size: 16px; }
  .theme-card .tags{ font-size: 12px; }
  .theme-nav .nav{ width: 36px; height: 36px; }
}
/* ==== 테마별/지역별 추천 (카드 슬라이더) ==== */
/* ===== 테마별/지역별 추천 (785px 전체 높이) ===== */
:root{
  --hello-title: #232935;   /* 요청 색상 */
  --hello-hash:  #6b7280;
}

/* 슬라이더 컨테이너 */
.theme-reco { padding-top: 8px; position: relative; }
.theme-swiper { overflow: visible; }

/* 슬라이드 카드: 전체 높이 785px 고정 */
.theme-card{
  display:block;
  width:auto;
  height:785px;                         /* ← 요구 사항 */
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.theme-card:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(0,0,0,.28); }

/* 이미지 영역 */
.theme-card .photo{
  height: 620px;                        /* 상단 이미지 높이 */
  background-size: cover;
  background-position: center;
}

/* 텍스트(제목+태그) */
.theme-card .text{ padding: 14px 8px 0 8px; }
.theme-card .title{
  color: var(--hello-title);
  font-weight: 900;                     /* ExtraBold 느낌 */
  line-height: 1.28;
  font-size: clamp(16px, 1.35vw, 18px);
  margin: 8px 0 6px 0;
  word-break: keep-all;
}
.theme-card .tags{
  color: var(--hello-hash);
  font-size: 13px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

/* 데스크톱에서 한 화면에 3장 보이도록 폭 제어 */
@media (min-width: 1024px){
  .theme-reco .swiper-slide{ width: 28%; }
}
@media (max-width: 1023.98px){
  .theme-reco .swiper-slide{ width: 74%; }
}
@media (max-width: 640px){
  .theme-reco .swiper-slide{ width: 88%; }
}

/* ===== 좌우 끝 네비게이션 ===== */
.theme-reco .theme-nav{
  position:absolute; top:0; left:0; width:100%; height:785px;  /* 카드 높이와 동일 */
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:none;
}
.theme-reco .theme-nav .nav{
  pointer-events:auto;
  width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.8);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  cursor:pointer; transition:all .25s ease; z-index:10;
}
.theme-reco .theme-nav .nav:hover{
  background:#fff; transform:scale(1.1);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
/* 화살표(도형) */
.theme-reco .theme-nav .nav::before{
  content:""; display:block; width:0; height:0; margin:auto;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.theme-reco .theme-nav .prev::before{ border-right:10px solid #232935; margin-left:3px; }
.theme-reco .theme-nav .next::before{ border-left:10px solid #232935; margin-right:3px; }

/* 화면의 좌우 끝으로 살짝 나가 보이게 */
.theme-reco .theme-nav .prev{ position:absolute; left:-70px; }
.theme-reco .theme-nav .next{ position:absolute; right:-70px; }

@media (max-width: 1280px){
  .theme-reco .theme-nav .prev{ left:-40px; }
  .theme-reco .theme-nav .next{ right:-40px; }
}
@media (max-width: 1024px){
  .theme-reco .theme-nav{ height:640px; padding:0 8px; }
  .theme-reco .theme-nav .nav{ width:38px; height:38px; }
  .theme-reco .theme-nav .prev,
  .theme-reco .theme-nav .next{ position:static; }
}

/* 페이지네이션 점 */
.theme-reco .swiper-pagination{ position:relative; margin-top:16px; }
.theme-reco .swiper-pagination-bullet{ background:#aeb6c5; opacity:.6; }
.theme-reco .swiper-pagination-bullet-active{ background:#111; opacity:1; }