@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,700;1,400;1,600&family=Noto+Sans+KR:wght@300;400;500;700&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════
   속초피크 — place_hero.css
   Where 게시판 전용: 히어로 + 탭 + 갤러리 그리드
   파트너 페이지(Cormorant Garamond + 골드 포인트)와
   동일한 디자인 시스템 공유
══════════════════════════════════════════════════ */

/* ── CSS 변수 (파트너 페이지와 동기화) ── */
:root {
  --ph-night:   #08111a;
  --ph-navy:    #0d1e2c;
  --ph-fog:     #f4f2ee;
  --ph-fog2:    #ede9e3;
  --ph-gold:    #c8a96e;
  --ph-gold-lt: #e4c98a;
  --ph-teal:    #2dd4bf;
  --ph-teal-dk: #0d9488;
  --ph-ink:     #161616;
  --ph-steel:   #6b7280;
  --ph-white:   #ffffff;
  --ph-border:  rgba(200,169,110,.18);
  --ph-r:       14px;
  --ph-r-lg:    20px;
  --ph-t:       .24s cubic-bezier(.4,0,.2,1);
  --ph-sh:      0 4px 24px rgba(0,0,0,.08);
  --ph-sh-lg:   0 12px 48px rgba(0,0,0,.14);
  --f-head:     'Cormorant Garamond', Georgia, serif;
  --f-body:     'Noto Sans KR', sans-serif;
  --f-mono:     'DM Mono', monospace;
}

/* ── 기존 그누보드 슬라이더 완전 숨김 ── */
.list-wrap .list_slider,
.list-wrap .list_img { display: none !important; }

/* ── #place .title, .category 숨김 (탭으로 대체) ── */
#place .title    { display: none !important; }
#place .category { display: none !important; }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.place-hero {
  position: relative;
  height: clamp(320px, 52vw, 520px);
  overflow: hidden;
  background: var(--ph-night);
  font-family: var(--f-body);
}

.place-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: .38;
  transform: scale(1.07);
  animation: ph-zoom 8s ease-out forwards;
}
@keyframes ph-zoom {
  to { transform: scale(1); opacity: .32; }
}

/* 그라디언트 오버레이 — 하단 집중 */
.place-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(45,212,191,.1) 0%, transparent 65%),
    linear-gradient(to top,
      rgba(8,17,26,.95)  0%,
      rgba(8,17,26,.72)  35%,
      rgba(8,17,26,.3)   65%,
      rgba(8,17,26,.08)  100%
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 52px;
  text-align: center;
}

/* 장식 그리드 */
.place-hero__img + .place-hero__overlay::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(45,212,191,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* 상단 라벨 */
.place-hero__label {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  color: var(--ph-teal);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.place-hero__label::before,
.place-hero__label::after {
  content: '';
  width: 32px; height: 1px;
  background: rgba(45,212,191,.4);
}

/* 메인 타이틀 — Cormorant Garamond */
.place-hero__title {
  font-family: var(--f-head);
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--ph-white);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.place-hero__title span {
  font-style: italic;
  color: var(--ph-teal);
  font-weight: 400;
}

/* 서브 텍스트 */
.place-hero__desc {
  font-size: clamp(.78rem, 1.4vw, .92rem);
  font-weight: 300;
  color: rgba(255,255,255,.55);
  line-height: 1.9;
  max-width: 440px;
  margin: 0 auto;
}

/* 하단 스크롤 힌트 라인 */
.place-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(45,212,191,.5));
}

/* ══════════════════════════════════════════════════
   스티키 탭 NAV
══════════════════════════════════════════════════ */
.place-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ph-white);
  border-bottom: 1px solid var(--ph-fog2);
  box-shadow: 0 1px 0 var(--ph-fog2), 0 4px 16px rgba(0,0,0,.05);
}

.place-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2px;
}
.place-tabs::-webkit-scrollbar { display: none; }

.place-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--ph-steel);
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 500;
  transition: color var(--ph-t), border-color var(--ph-t);
  white-space: nowrap;
  position: relative;
}
.place-tab img {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: .35;
  transition: opacity var(--ph-t);
}
.place-tab:hover {
  color: var(--ph-teal-dk);
}
.place-tab:hover img { opacity: .7; }
.place-tab.is-active {
  color: var(--ph-ink);
  border-bottom-color: var(--ph-gold);
  font-weight: 700;
}
.place-tab.is-active img { opacity: 1; }
/* 활성 탭 골드 글로우 */
.place-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 20%; right: 20%;
  height: 2px;
  background: var(--ph-gold);
  box-shadow: 0 -2px 8px rgba(200,169,110,.5);
  border-radius: 2px 2px 0 0;
}

/* ══════════════════════════════════════════════════
   갤러리 그리드 복원 + 업그레이드
   기존: 1열 리스트 깨짐 → 3열 카드 그리드로 복원
══════════════════════════════════════════════════ */

/* 섹션 배경 */
#place {
  /* background: var(--ph-fog); */
  padding: 32px 0 60px;
}

#place .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

#place .content { width: 100%; }

/* ── 관리자 버튼 ── */
.btn_bo_user {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 16px;
  list-style: none;
  padding: 0;
}

/* ── 갤러리 ul — 3열 그리드 ── */
#bo_gall .banner ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* 빈 목록 */
#bo_gall .banner ul li.empty_list {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--ph-steel);
  font-size: .9rem;
  background: var(--ph-white);
  border-radius: var(--ph-r-lg);
}

/* ── 개별 카드 ── */
#bo_gall .banner ul li {
  position: relative;
  border-radius: var(--ph-r-lg) !important;
  overflow: hidden;
  background: var(--ph-white);
  border: 1.5px solid var(--ph-fog2) !important;
  box-shadow: var(--ph-sh) !important;
  transition: transform var(--ph-t), box-shadow var(--ph-t), border-color var(--ph-t) !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
}

#bo_gall .banner ul li:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ph-sh-lg) !important;
  border-color: rgba(200,169,110,.3) !important;
}

/* ── 카드 a 태그 ── */
#bo_gall .banner ul li > a {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100%;
}

/* ── 사진 영역 ── */
#bo_gall .banner ul li .photo {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #111 !important;
  border-radius: var(--ph-r-lg) var(--ph-r-lg) 0 0 !important;
  flex-shrink: 0 !important;
}
#bo_gall .banner ul li .photo>a>img {width: 100% !important;height: auto !important;}

#bo_gall .banner ul li .photo > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
  display: block !important;
}

#bo_gall .banner ul li:hover .photo > img {
  transform: scale(1.05) !important;
}

/* ── 조회수 배지 ── */
#bo_gall .banner ul li .photo .view_cnt {
  position: absolute !important;
  top: 10px !important; left: 10px !important;
  bottom: auto !important; right: auto !important;
  z-index: 3 !important;
  background: rgba(0,0,0,.45) !important;
  color: #fff !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: var(--f-mono) !important;
  letter-spacing: .02em !important;
}

/* ── 작성자 오버레이 ── */
.author-row {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  background: linear-gradient(
    to top,
    rgba(8,17,26,.82) 0%,
    rgba(8,17,26,.45) 55%,
    transparent 100%
  ) !important;
  padding: 32px 12px 10px !important;
  z-index: 2 !important;
}

/* ── 설명 영역 ── */
#bo_gall .banner ul li .desc {
  padding: 12px 14px 14px !important;
  background: var(--ph-white) !important;
  border-radius: 0 0 var(--ph-r-lg) var(--ph-r-lg) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#bo_gall .banner ul li .desc h3 {
  font-family: var(--f-body) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--ph-ink) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#bo_gall .banner ul li .desc p {
  font-size: .74rem !important;
  color: var(--ph-steel) !important;
  margin: 0 !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ══════════════════════════════════════════════════
   lv6 골드 카드 — 그리드 내 유지
══════════════════════════════════════════════════ */
#bo_gall .banner ul li.card-lv6 {
  padding: 3px !important;
  background: linear-gradient(
    125deg,
    #b45309 0%, #f59e0b 25%, #fde68a 50%, #f59e0b 75%, #b45309 100%
  ) !important;
  background-size: 300% 300% !important;
  border: none !important;
  border-radius: 22px !important;
}
#bo_gall .banner ul li.card-lv6 > a {
  border-radius: 19px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 19px) !important;
  background: var(--ph-white) !important;
}
#bo_gall .banner ul li.card-lv5 {
  padding: 2px !important;
  border: none !important;
  border-radius: 20px !important;
}
#bo_gall .banner ul li.card-lv5 > a {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--ph-white) !important;
}

/* ══════════════════════════════════════════════════
   페이지네이션
══════════════════════════════════════════════════ */
.pg_wrap {
  margin: 36px 0 0 !important;
  display: flex !important;
  justify-content: center !important;
}
.pg {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}
.pg a, .pg strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: .8rem !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1.5px solid var(--ph-fog2) !important;
  color: var(--ph-steel) !important;
  background: var(--ph-white) !important;
  transition: all var(--ph-t) !important;
}
.pg a:hover {
  border-color: var(--ph-gold) !important;
  color: var(--ph-ink) !important;
}
.pg strong {
  background: var(--ph-gold) !important;
  border-color: var(--ph-gold) !important;
  color: var(--ph-night) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   검색창
══════════════════════════════════════════════════ */
.bo_sch_wrap { font-family: var(--f-body); }
.bo_sch {
  background: var(--ph-white) !important;
  border: 1.5px solid var(--ph-fog2) !important;
  border-radius: var(--ph-r-lg) !important;
  box-shadow: var(--ph-sh-lg) !important;
  padding: 24px !important;
}
.sch_input {
  border: 1.5px solid var(--ph-fog2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--f-body) !important;
  font-size: .86rem !important;
  outline: none !important;
  transition: border-color var(--ph-t) !important;
}
.sch_input:focus { border-color: var(--ph-gold) !important; }
.sch_btn {
  background: var(--ph-gold) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ph-night) !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════
   반응형
══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #bo_gall .banner ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 580px) {
  .place-hero { height: 260px; }
  .place-hero__title { font-size: 2rem; }
  .place-hero__overlay { padding: 0 16px 40px; }
  #place { padding: 20px 0 48px; }
  #place .inner { padding: 0 12px; }
  #bo_gall .banner ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .place-tab { padding: 10px 12px; font-size: .68rem; }
  .place-tab img { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  #bo_gall .banner ul {
    grid-template-columns: 1fr !important;
  }
}