/* 컨테이너 */
.ports-landing {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px;
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #111;
}
.ports-landing h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* 라디오 숨김 */
.country-radio {
  display: none;
}

/* 상단 버튼 */
.country-select {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

/* 버튼 순서: 일본을 앞으로 */
.country-select label[for="tab-jp"] {
  order: -1;
}

.country-btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s;
}

/* 선택된 버튼 상태 */
#tab-tw:checked ~ .country-select label[for="tab-tw"],
#tab-jp:checked ~ .country-select label[for="tab-jp"] {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* 패널 전환 (JS 없이) */
.card-grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
#tab-tw:checked ~ #panel-tw {
  display: grid;
}
#tab-jp:checked ~ #panel-jp {
  display: grid;
}

/* 카드 */
.card-item {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* 공통 썸네일 이미지 (요청하신 URL) */
.card-thumb {
  width: 100%;
  height: 160px;
  background-color: #f2f4f7;
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/00012771.jpg?w=1100&h=550&q=90&f=cover');
  background-size: cover;
  background-position: center;
}

/* ===========================================
   🧭 도시별 개별 썸네일 (필요 시만 교체)
   =========================================== */

/* ─────────────── 대만 ─────────────── */
a[href*="/landing-page/1123"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EC%98%88%EB%A5%98%ED%95%B4%EC%96%91%EA%B3%B5%EC%9B%901_W5ZKCvf.jpg'); /* 기륭 */
}

/* ─────────────── 일본 ─────────────── */
a[href*="/landing-page/1075"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/5mb_%EB%82%98%EA%B0%80%EC%82%AC%ED%82%A4-%EC%9A%B4%EC%A0%A0%EC%A7%80%EC%98%A5%EC%98%A8%EC%B2%9C%EC%9C%A0_Ob8y3XA.jpeg'); /* 나가사키 */
}
a[href*="/landing-page/1076"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/1000%ED%8F%AD%ED%95%98%EC%9A%B0%EC%8A%A4%ED%85%90%EB%B3%B4%EC%8A%A4_d21omLv.jpg'); /* 사세보 */
}
a[href*="/landing-page/1560"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EA%B0%80%EB%82%98%EC%9E%90%EC%99%80_%EC%8B%9C%EB%9D%BC%EC%B9%B4%EC%99%80%EA%B3%A0_%EB%A7%88%EC%9D%843_%EA%B0%80%EC%9D%84-compressed.jpg'); /* 가나자와 */
}
a[href*="/landing-page/1559"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EB%A7%88%EC%9D%B4%EC%A6%88%EB%A3%A8_%EC%95%84%EB%A7%88%EB%85%B8%ED%95%98%EC%8B%9C%ED%83%80%ED%85%8C5_OLNM6sd.jpg'); /* 마이즈루 */
}
a[href*="/landing-page/1664"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EB%AF%B8%EC%A6%88%ED%82%A4%EC%8B%9C%EA%B2%8C%EB%A3%A8%EB%A1%9C%EB%93%9C_%EC%9A%94%EA%B4%B4_4_4JiDPL8.PNG'); /* 사카이미나토 */
}
a[href*="/landing-page/1067"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EB%82%98%ED%95%98-%EB%A7%8C%EC%A2%8C%EB%AA%A8-compressed.jpg'); /* 나하(오키나와) */
}
a[href*="/landing-page/1074"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%ED%95%98%EC%BD%94%EB%8B%A4%ED%85%8C_%EC%95%BC%EA%B2%BD_1_3ZWCNoW.jpeg'); /* 하코다테 */
}
a[href*="/landing-page/1070"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EC%98%A4%ED%83%80%EB%A3%A85-compressed_OIjZas6.jpg'); /* 오타루(삿포로) */
}
a[href*="/landing-page/1068"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EC%9D%B4%EC%8B%9C%EA%B0%80%ED%82%A4_Kyegv3k.jpg'); /* 이시가키 */
}
a[href*="/landing-page/1071"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/1._%EB%B6%81%EB%B0%A9%EB%AC%B8%ED%99%94%EB%B0%95%EB%AC%BC%EA%B4%80_0bf8bim.jpg'); /* 니이가타 */
}
a[href*="/landing-page/1072"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/2039_Nebuta_festival_iSOmYGh.jpg'); /* 아오모리 */
}
a[href*="/landing-page/1073"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/1000%ED%8F%AD%EA%B5%AC%EB%A7%88%EB%AA%A8%ED%86%A0%EC%84%B11_EiEl1vD.jpg'); /* 야츠시로 */
}
a[href*="/landing-page/1558"] .card-thumb {
  background-image: url('https://media.eoding.com/media/travelagent/769/imagecontent/%EC%BA%90%EB%84%90%EC%8B%9C%ED%8B%B0%ED%95%98%EC%B9%B4%ED%83%801_YtPSCmV.jpg'); /* 후쿠오카 */
}

/* 카드 내용 */
.card-info {
  padding: 12px 14px;
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}
.card-desc {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* ===========================================
   ⭐ 대만 패널 단일 항목 너비 수정 추가 영역
   =========================================== */

/* 대만 패널(#panel-tw)의 그리드 레이아웃을 수정하여 단일 항목일 때도 크기를 유지 */
#panel-tw.card-grid {
  /* 최대 4개 항목 배치 시와 동일한 크기를 차지하도록 강제합니다. */
  grid-template-columns: repeat(4, 1fr); 
}