/* ===================================================
   속초피크 — badge.css
   프로필을 이미지 하단 오버레이로 통합 (수정판)
=================================================== */

/* ── keyframes ── */
@keyframes lv6-border {
    0%   { box-shadow: 0 0 0 2px #f59e0b, 0 0 10px 2px rgba(245,158,11,0.5); }
    50%  { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px 4px rgba(251,191,36,0.7); }
    100% { box-shadow: 0 0 0 2px #f59e0b, 0 0 10px 2px rgba(245,158,11,0.5); }
}
@keyframes lv5-border {
    0%   { box-shadow: 0 0 0 2px #16a34a, 0 0 10px 2px rgba(22,163,74,0.45); }
    50%  { box-shadow: 0 0 0 2px #4ade80, 0 0 18px 4px rgba(74,222,128,0.65); }
    100% { box-shadow: 0 0 0 2px #16a34a, 0 0 10px 2px rgba(22,163,74,0.45); }
}
@keyframes gold-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gold-shimmer {
    0%   { left: -70%; }
    100% { left: 140%; }
}
@keyframes green-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes lv6-badge {
    0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.3); }
    50%       { box-shadow: 0 0 10px rgba(245,158,11,0.6); }
}

/* ═══════════════════════════════════════════
   카드 li 기본 구조
═══════════════════════════════════════════ */
#bo_gall .banner ul li {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

#bo_gall .banner ul li > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── photo 영역 — 모든 오버레이의 기준점 ── */
#bo_gall .banner ul li .photo {
    position: relative;
    overflow: hidden;
    /* 흰 배경이 새어나오지 않도록 */
    background: #111;
    /* 카드 상단 모서리 클리핑 */
    border-radius: 14px 14px 0 0;
}

/* photo 안 썸네일 이미지 */
#bo_gall .banner ul li .photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 조회수 — 좌상단 고정 ── */
#bo_gall .banner ul li .photo .view_cnt {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* bottom/right 위치 override 방지 */
    bottom: auto;
    right: auto;
}

/* ── desc 영역 ── */
#bo_gall .banner ul li .desc {
    padding: 10px 12px 12px;
    background: #fff;
    border-radius: 0 0 14px 14px;
}
#bo_gall .banner ul li .desc h3 {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#bo_gall .banner ul li .desc p {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   author-row — photo 하단 그라데이션 오버레이
═══════════════════════════════════════════ */
.author-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.42) 55%,
        transparent 100%
    );
    padding: 30px 12px 10px;
    border-top: none;
    z-index: 2;
    /* top/right 관련 이상한 값 override */
    top: auto;
}

.author-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
    min-width: 0;
}
.author-profile:hover { opacity: 0.82; }

/* ── 아바타 이미지 ── */
.author-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.8);
    display: block;
    flex-shrink: 0;
}
.author-avatar.lv-6 {
    border-color: #f59e0b;
    animation: lv6-border 2s ease-in-out infinite;
}
.author-avatar.lv-5 {
    border-color: #4ade80;
    animation: lv5-border 2s ease-in-out infinite;
}

/* 기본 아바타 */
.author-avatar--default {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d93025 0%, #ff6b6b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.6);
    line-height: 1;
}
.author-avatar--default.lv-6 {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-color: #f59e0b;
    animation: lv6-border 2s ease-in-out infinite;
}
.author-avatar--default.lv-5 {
    background: linear-gradient(135deg, #16a34a, #4ade80);
    border-color: #4ade80;
    animation: lv5-border 2s ease-in-out infinite;
}

/* ── 닉네임 + 배지 ── */
.author-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.author-nick {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.author-badge {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.lv_badge_img {
    width: 18px;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.lv_txt {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: -0.01em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lv_txt.lv_6 {
    background: rgba(245,158,11,0.9);
    border: 1px solid #fbbf24;
    color: #fff;
    animation: lv6-badge 2s ease-in-out infinite;
}
.lv_txt.lv_5 {
    background: rgba(22,163,74,0.9);
    border: 1px solid #4ade80;
    color: #fff;
}
.lv_txt.lv_4 {
    background: rgba(37,99,235,0.85);
    border: 1px solid #60a5fa;
    color: #fff;
}
.lv_txt.lv_3 {
    background: rgba(219,39,119,0.85);
    border: 1px solid #f472b6;
    color: #fff;
}
.lv_txt.lv_2 {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
}

/* ═══════════════════════════════════════════
   lv6 골드 카드
═══════════════════════════════════════════ */
#bo_gall .banner ul li.card-lv6 {
    border-radius: 18px !important;
    padding: 4px !important;
    background: linear-gradient(
        125deg,
        #b45309 0%, #f59e0b 25%, #fde68a 50%, #f59e0b 75%, #b45309 100%
    ) !important;
    background-size: 300% 300% !important;
    animation: gold-flow 3s ease infinite !important;
    box-shadow: 0 0 16px 4px rgba(245,158,11,0.45), 0 4px 20px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    z-index: 2;
    /* overflow: visible 로 pseudo-element 노출 */
    overflow: visible !important;
}
#bo_gall .banner ul li.card-lv6:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 0 26px 8px rgba(245,158,11,0.6), 0 8px 28px rgba(0,0,0,0.2) !important;
}

/* a 태그: overflow visible + clip-path로 모서리만 클리핑 */
#bo_gall .banner ul li.card-lv6 > a {
    position: relative;
    display: block !important;
    border-radius: 15px !important;
    /* overflow: hidden 제거 — pseudo-element가 잘리지 않도록 */
    overflow: visible !important;
    background: #fff !important;
    /* 내부 콘텐츠는 모서리 클리핑 유지 */
    clip-path: inset(0 round 15px);
}

/* 👑 코너 배지 — li::before 로 이동 (overflow: visible인 li 기준) */
#bo_gall .banner ul li.card-lv6::before {
    content: '👑';
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 18px;
    z-index: 10;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    pointer-events: none;
    /* gold-flow 애니메이션 상속 방지 */
    animation: none !important;
    background: none !important;
}

/* shimmer — photo::after 로 이동 (photo 안에서 잘림 처리) */
#bo_gall .banner ul li.card-lv6 .photo::after {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 45%; height: 100%;
    background: linear-gradient(
        108deg,
        transparent 20%,
        rgba(255, 240, 150, 0.55) 50%,
        transparent 80%
    );
    animation: gold-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    border-radius: 0;
}

/* ═══════════════════════════════════════════
   lv5 그린 카드
═══════════════════════════════════════════ */
#bo_gall .banner ul li.card-lv5 {
    border-radius: 16px !important;
    padding: 2px !important;
    background: linear-gradient(
        135deg,
        #065f46 0%, #16a34a 30%, #4ade80 50%, #16a34a 70%, #065f46 100%
    ) !important;
    background-size: 300% 300% !important;
    animation: green-flow 4s ease infinite !important;
    box-shadow: 0 0 8px 2px rgba(22,163,74,0.3), 0 4px 16px rgba(0,0,0,0.12) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    z-index: 1;
    overflow: visible !important;
}
#bo_gall .banner ul li.card-lv5:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 14px 4px rgba(22,163,74,0.45), 0 6px 22px rgba(0,0,0,0.16) !important;
}
#bo_gall .banner ul li.card-lv5 > a {
    position: relative;
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
}

/* ═══════════════════════════════════════════
   lv4 이하 — 심플 모던 테두리
   애니메이션 없음, 얇고 깔끔하게
═══════════════════════════════════════════ */

/* 기본 카드 (lv1~2) — 연한 회색 테두리 */
#bo_gall .banner ul li {
    border: 1.5px solid #e2e6ea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#bo_gall .banner ul li:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    border-color: #c8cdd4;
}

/* lv3 — 소프트 핑크/보라 */
#bo_gall .banner ul li.card-lv3 {
    border: 1.5px solid rgba(219,39,119,0.35) !important;
    box-shadow: 0 2px 10px rgba(219,39,119,0.08) !important;
}
#bo_gall .banner ul li.card-lv3:hover {
    border-color: rgba(219,39,119,0.6) !important;
    box-shadow: 0 6px 18px rgba(219,39,119,0.14) !important;
    transform: translateY(-3px);
}

/* lv4 — 소프트 블루 */
#bo_gall .banner ul li.card-lv4 {
    border: 1.5px solid rgba(37,99,235,0.3) !important;
    box-shadow: 0 2px 10px rgba(37,99,235,0.07) !important;
}
#bo_gall .banner ul li.card-lv4:hover {
    border-color: rgba(37,99,235,0.55) !important;
    box-shadow: 0 6px 18px rgba(37,99,235,0.13) !important;
    transform: translateY(-3px);
}

/* lv5/6 — 자체 border 있으므로 기본 border 제거 */
#bo_gall .banner ul li.card-lv5,
#bo_gall .banner ul li.card-lv6 {
    border: none !important;
}


/* ===================================================
   속초피크 — Place List 히어로 + 탭 (place_hero.css)
   food 스타일과 동일한 구조, 파란 계열 포인트 컬러
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ── 기존 list_slider / list_img 숨김 ── */
.list-wrap .list_slider { display: none !important; }

/* ══ 히어로 ══ */
.place-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  background: #0f2027;
}
.place-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
  transform: scale(1.06);
  animation: phero-zoom 7s ease-out forwards;
}
@keyframes phero-zoom { to { transform: scale(1); } }

.place-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.68));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 52px 24px; text-align: center;
}
.place-hero__label {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(.88rem, 2vw, 1.1rem);
  color: rgba(255,255,255,.72); letter-spacing: .12em; margin-bottom: 6px;
}
.place-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 700;
  color: #fff; line-height: 1.1; margin: 0;
}
/* food는 빨강, place는 하늘색 포인트 */
.place-hero__title span { color: #5bc8f5; }
.place-hero__desc {
  margin-top: 12px; font-size: .86rem; font-weight: 300;
  color: rgba(255,255,255,.7); line-height: 1.8;
}

/* ══ 스티키 탭 ══ */
.place-tabs-wrap {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.place-tabs {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 0 16px;
  max-width: 1200px; margin: 0 auto;
}
.place-tabs::-webkit-scrollbar { display: none; }

.place-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 16px; flex-shrink: 0;
  border-bottom: 3px solid transparent;
  text-decoration: none; color: #aaa;
  font-size: .7rem; font-weight: 500;
  font-family: 'Noto Sans KR', sans-serif;
  transition: all .2s; white-space: nowrap;
}
.place-tab img {
  width: 24px; height: 24px; object-fit: contain; opacity: .4; transition: opacity .2s;
}
.place-tab:hover,
.place-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
.place-tab:hover img,
.place-tab.is-active img { opacity: 1; }

/* ══ 기존 .title(Place in Sokcho) 영역 숨김 ══ */
#place .title { display: none !important; }
#place .category { display: none !important; }

/* ══ 반응형 ══ */
@media (max-width: 768px) {
  .place-hero { height: 260px; }
  .place-hero__title { font-size: 2rem; }
}
@media (max-width: 480px) {
  .place-hero { height: 220px; }
}