/* =====================================
   Events (cards/grid/tag/skeleton ONLY)
   ===================================== */

/* 섹션 래퍼(선택) */
.events-section{ padding:0 0 3rem; }

/* =========================
   GRID
   ========================= */
#eventsGrid,
.events-grid,
.events-section .card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* PC: 4열 */
  gap:1.25rem;
}

@media (max-width:1200px){
  #eventsGrid, .events-grid, .events-section .card-grid{
    grid-template-columns:repeat(3, 1fr); /* 3열 */
  }
}
@media (max-width:768px){
  #eventsGrid, .events-grid, .events-section .card-grid{
    grid-template-columns:repeat(2, 1fr); /* 2열 */
  }
}
/* 🔧 모바일도 2열 유지 */
@media (max-width:480px){
  #eventsGrid, .events-grid, .events-section .card-grid{
    grid-template-columns:repeat(2, 1fr); /* 2열 */
  }
}
/* (선택) 아주 좁은 화면에서만 1열로 폴백하려면 활성화
@media (max-width:360px){
  #eventsGrid, .events-grid, .events-section .card-grid{
    grid-template-columns:1fr;
  }
}
*/

/* =========================
   CARD
   ========================= */
#eventsGrid .card,
.events-grid .card,
.events-section .card-grid .card{
  overflow:hidden;
  background:var(--card, #fff);
  border:none;
  box-shadow:none;
  border-radius:0; /* 카드 전체는 플랫하게 */
}

/* =========================
   THUMBNAIL (이미지)
   - 정사각 비율 + 얇은 보더 + 둥근 모서리 (썸네일에만)
   ========================= */
#eventsGrid .card-head,
.events-grid .card-head,
.events-section .card-grid .card .card-head{
  position:relative;
  overflow:hidden;
  background:#fff;
  /* 썸네일 보더 & 라운드 */
  border:1px solid var(--thumb-border, #e6e7ea);
  border-radius:12px;
}

/* 정사각형 비율 확보 */
#eventsGrid .card-head::before,
.events-grid .card-head::before,
.events-section .card-grid .card .card-head::before{
  content:"";
  display:block;
  width:100%;
  padding-top:100%;
}

#eventsGrid .card-head img,
.events-grid .card-head img,
.events-section .card-grid .card .card-head img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px; /* 이미지도 보더 라운드에 맞춤 */
}

/* =========================
   FAV(하트) 버튼
   ========================= */
#eventsGrid .fav-btn,
.events-grid .fav-btn,
.events-section .card-grid .card .fav-btn{
  position:absolute;
  top:12px;
  right:12px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

#eventsGrid .heart,
.events-grid .heart,
.events-section .card-grid .card .heart{
  width:clamp(24px, 6vw, 28px);
  height:clamp(24px, 6vw, 28px);
  fill:transparent;
  stroke:#999;
  stroke-width:1;
  transition:fill .25s ease, stroke .25s ease;
}

#eventsGrid .fav-btn.active .heart,
.events-grid .fav-btn.active .heart,
.events-section .card-grid .card .fav-btn.active .heart{
  fill:var(--primary);
  stroke:var(--primary);
}

/* 팝 애니메이션 */
@keyframes heart-pop{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.3) rotate(-10deg); }
  50%{ transform:scale(1.2) rotate(10deg); }
  70%{ transform:scale(1.25) rotate(-6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
#eventsGrid .fav-btn.animate .heart,
.events-grid .fav-btn.animate .heart,
.events-section .card-grid .card .fav-btn.animate .heart{
  animation:heart-pop .45s ease;
}

/* =========================
   BODY
   ========================= */
#eventsGrid .card-body,
.events-grid .card-body,
.events-section .card-grid .card .card-body{
  padding:1rem 0;
}

#eventsGrid .card-body a,
.events-grid .card-body a,
.events-section .card-grid .card .card-body a{
  text-decoration:none;
  color:inherit;
}

#eventsGrid .card-body h4,
.events-grid .card-body h4,
.events-section .card-grid .card .card-body h4{
  margin:0 0 .25rem;
  font-size:.9rem;
  font-weight:700;
}

#eventsGrid .card-body .desc,
.events-grid .card-body .desc,
.events-section .card-grid .card .card-body .desc{
  margin:0;
  color:var(--muted);
  font-size:.8rem;
}

/* =========================
   META (별점/리뷰)
   ========================= */
#eventsGrid .meta,
.events-grid .meta,
.events-section .card-grid .card .meta{
  list-style:none;
  margin:.35rem 0 0;
  padding:0;
  display:grid;
  gap:.2rem;
  color:var(--muted);
  font-size:.85rem;
}
#eventsGrid .meta li,
.events-grid .meta li,
.events-section .card-grid .card .meta li{
  display:flex;
  align-items:center;
  gap:.2rem;
  line-height:1.5;
}
#eventsGrid .meta li img,
.events-grid .meta li img,
.events-section .card-grid .card .meta li img{
  display:block;
  width:14px;
  height:14px;
}
#eventsGrid .score,
.events-grid .score,
.events-section .card-grid .card .score{
  color:var(--text);
  font-weight:600;
}

/* =========================
   TAGS (중한동가)
   ========================= */
#eventsGrid .clinic-tags,
.events-grid .clinic-tags,
.events-section .card-grid .card .clinic-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .4rem;
  align-items:center;
  margin-top:.25rem;
}
#eventsGrid .tag,
.events-grid .tag,
.events-section .card-grid .card .tag{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:clamp(.18rem,.6vw,.25rem) clamp(.35rem,1.2vw,.5rem);
  font-size:clamp(.70rem,1.8vw,.875rem);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  max-width:100%;
}
#eventsGrid .tag--same,
.events-grid .tag--same,
.events-section .card-grid .card .tag--same{
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}

@media (max-width:480px){
  #eventsGrid .clinic-tags, .events-grid .clinic-tags{ gap:.35rem .3rem; }
  #eventsGrid .tag, .events-grid .tag{ gap:.2rem; }
}

/* =========================
   BADGE (옵션)
   ========================= */
#eventsGrid .badge,
.events-grid .badge{
  position:absolute;
  left:12px;
  top:12px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--text);
  border-radius:10px;
  padding:.2rem .5rem;
  font-size:1rem;
  font-weight:700;
  display:none;
}

/* =========================
   SKELETON
   ========================= */
#eventsGrid .card--skeleton,
.events-grid .card--skeleton{
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}

#eventsGrid .card--skeleton .sk-img,
.events-grid .card--skeleton .sk-img{
  height:0;
  padding-top:100%;
  background:linear-gradient(90deg, #eee, #f6f6f6 35%, #eee 65%);
  background-size:400% 100%;
  animation:sk 1.35s infinite linear;
}

#eventsGrid .card--skeleton .sk-line,
.events-grid .card--skeleton .sk-line{
  height:12px;
  margin:.5rem 0;
  border-radius:6px;
  background:linear-gradient(90deg, #eee, #f6f6f6 35%, #eee 65%);
  background-size:400% 100%;
  animation:sk 1.35s infinite linear;
}

#eventsGrid .card--skeleton .w-70{ width:70%; }
#eventsGrid .card--skeleton .w-50{ width:50%; }
#eventsGrid .card--skeleton .w-40{ width:40%; }

@keyframes sk{
  0%{ background-position:0 0 }
  100%{ background-position:-400% 0 }
}

/* 전체 모드일 때 홈 섹션 숨김 */
body[data-events="full"] .sameprice-section,
body[data-events="full"] .doctors-section{
  display: none !important;
}