/* ==========================================================
   0) 공통(기본)
   - ✅ 충돌 제거 포인트:
     ① .normal-list ul/li 중복 정의 제거 (한 군데로 통일)
     ② .jeju-content overflow:hidden 제거(슬라이더/스크롤 끊김 완화)
========================================================== */
body{
  background:#f8f9fa;
  font-family:'Noto Sans KR', sans-serif;
}

/* ✅ 가로 스크롤 차단(유지) */
html, body{
  width:100%;
  overflow-x:hidden !important;
}

/* ==========================================================
   1) 레이아웃
========================================================== */
.jeju-container{
  display:grid;
  grid-template-columns:260px 1fr;
  max-width:1500px;
  margin:0 auto;
  gap:40px;
  padding:50px 30px;
  align-items:flex-start;
}

.jeju-sidebar{
  position:sticky;
  top:100px;
  height:fit-content;
}

/* ✅ 기존: overflow:hidden → 모바일 스크롤/Swiper 버벅임 원인
   ✅ 변경: visible로 전환 (디자인 영향 거의 없음) */
.jeju-content{ overflow:hidden; }


.section{ margin-bottom:35px; }

.bottom-section{
  width:100%;
  max-width:1500px;
  margin:0 auto 100px;
  padding:0 30px;
  box-sizing:border-box;
}

/* ==========================================================
   2) 공통 헤더(타이틀/더보기)
========================================================== */
.nation-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:0 10px !important;
  margin-bottom:20px !important;
  border-bottom:2px solid #333;
  padding-bottom:10px !important;
}
.nation-header h2{
  font-size:24px !important;
  font-weight:800 !important;
  color:#222 !important;
  margin:0 !important;
}
.nation-more{
  font-size:14px !important;
  color:#6c5ce7 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  background:#f0edff !important;
  padding:5px 15px !important;
  border-radius:20px !important;
}

/* (기존 유지) */
.bottom-section .section-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  border-bottom:1px solid #eee;
  margin-bottom:20px;
  padding-bottom:10px;
}

/* ==========================================================
   3) 리스트(중요) - normal-list 통일
   ✅ 충돌 제거: 아래 중복(.normal-list ul/li) 2개를 1개로 합침
   - .bottom-section 안이든 밖이든 동일하게 동작
========================================================== */
.normal-list{
  width:100%;
  display:block;
  clear:both;
}

/* ✅ 최신글 스킨 ul(.latest_card_ul) 포함해서 동일 처리 */
.normal-list ul,
.normal-list .latest_card_ul{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:20px !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
}

/* ✅ li도 최신글 스킨(.latest_card_li) 포함 통일 */
.normal-list li,
.normal-list .latest_card_li{
  flex:0 0 calc(33.333% - 14px) !important; /* PC 3개 */
  box-sizing:border-box !important;
  margin-bottom:20px !important;
}

/* ✅ 이미지 높이 통일(유지) */
.normal-list img{
  width:100% !important;
  height:220px !important;
  object-fit:cover !important;
  border-radius:10px;
}

/* 반응형 */
@media (max-width:1024px){
  .normal-list li,
  .normal-list .latest_card_li{
    flex:0 0 calc(50% - 10px) !important; /* 2개 */
  }
}
@media (max-width:768px){
  .normal-list li,
  .normal-list .latest_card_li{
    flex:0 0 100% !important; /* 1개 */
  }
  .normal-list img{ height:180px !important; }
}

/* ==========================================================
   4) 메인 타이틀/배너(기존 디자인 유지)
========================================================== */
.jeju-main-header{
  margin-bottom:50px;
  text-align:center;
  padding:40px 20px;
  background:linear-gradient(to bottom, #ffffff, #f8f9fa);
  border-radius:20px;
}

.premium-title{
  font-size:38px;
  font-weight:900;
  color:#1a1a1a;
  letter-spacing:-2px;
  margin-bottom:25px;
  line-height:1.2;
}
.premium-title span{
  color:#6c5ce7;
  position:relative;
  display:inline-block;
}
.premium-title span::after{
  content:"";
  position:absolute;
  bottom:5px;
  left:0;
  width:100%;
  height:8px;
  background:rgba(108, 92, 231, 0.15);
  z-index:-1;
}

.top-banner-area{
  width:100%;
  max-width:800px;
  margin:0 auto;
}

.kakao-banner{
  display:block;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(108, 92, 231, 0.15);
  transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border:1px solid rgba(0,0,0,0.05);
}
.kakao-banner:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(108, 92, 231, 0.25);
}
.kakao-banner img{
  width:100%;
  height:auto;
  display:block;
  transition:transform 0.6s ease;
}
.kakao-banner:hover img{ transform:scale(1.02); }

@media (max-width:768px){
  .jeju-main-header{
    margin-bottom:30px;
    padding:30px 15px;
  }
  .premium-title{
    font-size:22px;
    letter-spacing:-1px;
    padding:0 10px;
  }
  .premium-title span::after{ height:6px; }
}

/* ==========================================================
   5) 커뮤니티(기존 유지)
========================================================== */
.community-section{
  padding:50px 30px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 5px 25px rgba(0,0,0,0.05);
}
.community-section .section-header{
  border-bottom:none;
  margin-bottom:40px;
}
.community-section .section-header h2{
  font-size:26px;
  position:relative;
}
.community-section .section-header h2::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:0;
  width:50px;
  height:3px;
  background:#6c5ce7;
  border-radius:2px;
}

.community-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}
.community-item{
  border-left:3px solid #eee;
  padding-left:20px;
  transition:border-color .3s;
}
.community-item:hover{ border-color:#6c5ce7; }
.community-item .title_center{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  font-size:18px;
  font-weight:700;
  color:#111;
}
.community-item .btn_more{
  font-size:16px;
  color:#6c5ce7;
  transition:.25s;
}
.community-item .btn_more:hover{
  color:#ff3b30;
  transform:rotate(90deg);
}
.community-item ul{ list-style:none; margin:0; padding:0; }
.community-item li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
}
.community-item li:last-child{ border-bottom:none; }
.community-item li a{
  color:#333;
  text-decoration:none;
  display:inline-block;
  max-width:75%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.community-item li a:hover{ color:#6c5ce7; }
.community-item li .date{ color:#aaa; font-size:12px; }
.community-item li .icon_new{
  background:#ff3b30;
  color:#fff;
  font-size:10px;
  padding:2px 5px;
  border-radius:4px;
  margin-left:6px;
}

/* ==========================================================
   6) 모바일 레이아웃(기존 유지 + 문법 오류 수정)
   ✅ 기존 코드에 중괄호가 하나 더 들어가 있어서(}) 아래 규칙들이
      미디어쿼리 밖으로 튀는 구조였음 → 정상 구조로 정리
========================================================== */
@media (max-width:1200px){
  .jeju-container{
    display:flex;
    flex-direction:column;
    padding:10px 0 30px !important;
  }
  .jeju-content{ order:1; width:100%; }
  .jeju-sidebar{ order:2; width:100%; margin-top:30px; position:static; }

  .section{ margin-bottom:24px !important; }
  .section-header{ margin:0 16px 12px !important; }

  .jeju-card{ width:100% !important; }

  .community-grid{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    padding:0 16px;
  }
}

/* ✅ 텍스트/패딩 축소는 미디어쿼리 밖으로 빠져있던 문제 → 전역으로 유지 */
.jeju-card .card-body,
.jeju-card .shop-info,
.jeju-card .shop-content{
  padding:12px 12px 14px !important;
}
.jeju-card .title,
.jeju-card h3{ font-size:16px !important; }
.jeju-card .addr,
.jeju-card .desc,
.jeju-card .sub{ font-size:12px !important; }

@media (max-width:768px){
  .section{ margin-bottom:20px !important; }
  .section-header{ margin:0 14px 10px !important; }

  .jeju-card .card-img,
  .jeju-card .img-box,
  .jeju-card .thumb,
  .jeju-card .thumb-wrap{
    height:190px !important;
  }

  .community-grid{ grid-template-columns:1fr; }

  .top-banner .swiper,
  .top-banner .swiper-slide{
    height:120px !important;
  }
}