/* ── 16단계 v2 컬러 시스템 — 한국 로컬 감성 ── */
:root{
  --color-bg:           #FAFAF7;
  --color-card-bg:      #FFFFFF;
  --color-card-border:  #E8E0D5;
  --color-border:       #E8E0D5;
  --color-text:         #1C1C1C;
  --color-point:        #C84B31;
  --color-sub:          #2C5F2E;
}

.explore-layout{
  display:flex;
  position:sticky;
  top:0;
  height:100vh;
  isolation:isolate;
}
.explore-map{ flex:1; min-width:0; }
.explore-panel-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; border-left:1px solid var(--color-border); }
.ep-back-bar{
  display:none; align-items:center; gap:10px;
  padding:10px 16px; background:var(--color-bg);
  border-bottom:2px solid var(--color-border);
  flex-shrink:0; z-index:5;
}
.ep-back-bar-title{ font-size:15px; font-weight:700; color:var(--color-text); }
.explore-panel{
  flex:1;
  min-height:0;
  background:var(--color-bg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:0;
  color:var(--color-text);
}
#exploreMap{ width:100%; height:100%; }
.admin-bar .explore-layout{ top:32px; height:calc(100vh - 32px); }
@media screen and (max-width:782px){
  .admin-bar .explore-layout{ top:46px; height:calc(100vh - 46px); }
}

/* 패널 헤더 */
.ep-header{ padding:14px 20px 12px; border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:10; background:var(--color-bg); }
.ep-breadcrumb{ font-size:11px; color:var(--color-sub); margin-bottom:5px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ep-breadcrumb span{ opacity:.6; }
.ep-breadcrumb a{ color:var(--color-point); font-weight:600; cursor:pointer; text-decoration:none; opacity:.85; }
.ep-breadcrumb a:hover{ opacity:1; text-decoration:underline; }
.ep-title{ font-size:22px; font-weight:700; color:var(--color-text); }

/* 패널 섹션 */
.ep-body{ padding:16px 20px; display:flex; flex-direction:column; gap:24px; }
.ep-section-title{
  font-size:15px; font-weight:700; color:var(--color-text);
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:2px solid var(--color-border);
}

/* 카드 */
.ep-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:12px; margin-top:8px;
}
/* 카테고리 섹션 */
.ep-category-section{ margin-bottom:20px; }
.ep-category-section:last-child{ margin-bottom:0; }
.ep-category-title{
  font-size:13px; font-weight:700; color:var(--color-text);
  margin:0 0 8px; padding-bottom:5px;
  border-bottom:1px solid var(--color-border);
}
.ep-category-count{ font-weight:400; font-size:12px; color:var(--color-sub); }
.ep-card{
  border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  background:var(--color-card-bg);
}
.ep-card img{ width:100%; height:100px; object-fit:cover; display:block; }
.ep-card-thumb-empty{
  width:100%; height:100px;
  background:var(--color-card-bg);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--color-border);
}
.ep-card-body{ padding:8px; }
.ep-card-body-inner{ display:flex; align-items:flex-start; gap:6px; }
.ep-card-body-text{ flex:1; min-width:0; }
.ep-card-title{ font-size:13px; font-weight:600; color:var(--color-text); }
.ep-card-meta{ font-size:11px; color:var(--color-sub); margin-top:2px; }
.ep-img-report-btn{ flex-shrink:0; background:none; border:1px solid var(--color-border); border-radius:8px; padding:4px 6px; font-size:14px; cursor:pointer; color:var(--color-sub); line-height:1; transition:border-color .15s,color .15s; }
.ep-img-report-btn:hover{ border-color:#ffd700; color:#b8860b; }
.ep-card-badge{ display:inline-block; margin-top:4px; font-size:11px; font-weight:600; color:var(--color-sub); background:rgba(44,95,46,0.08); border-radius:20px; padding:2px 7px; }

/* 골드 프레임 + Seoul Insider (모달 댓글용) */
@keyframes pm-gold-glow{0%,100%{box-shadow:0 0 0 2px #fff,0 0 6px 3px rgba(251,191,36,.5);}50%{box-shadow:0 0 0 2px #fff,0 0 18px 6px rgba(251,191,36,.9);}}
@keyframes pm-comment-gold-glow{0%,100%{box-shadow:0 0 6px rgba(251,191,36,.3);}50%{box-shadow:0 0 16px rgba(251,191,36,.7);}}
.pm-comment-gold-avatar{border:2.5px solid #fbbf24 !important;animation:pm-gold-glow 1.6s ease-in-out infinite;border-radius:50%;}
.pm-comment-gold-card{border-radius:10px;border:1.5px solid rgba(251,191,36,.6);background:rgba(251,191,36,.07);animation:pm-comment-gold-glow 1.6s ease-in-out infinite;padding:8px;margin:-8px;}
.pm-comment-purple-avatar{border:2px solid #a855f7 !important;border-radius:50%;}
.pm-comment-purple-card{border-radius:10px;border:1px solid rgba(168,85,247,.5);background:rgba(168,85,247,.05);padding:8px;margin:-8px;}
.pm-comment-blue-avatar{border:1.5px solid #3b82f6 !important;border-radius:50%;}
.pm-comment-blue-card{border-radius:10px;border:0.5px solid rgba(59,130,246,.4);background:rgba(59,130,246,.04);padding:8px;margin:-8px;}
.pm-comment-insider{font-size:10px;background:linear-gradient(90deg,#fef3c7,#fde68a);color:#92400e;border-radius:8px;padding:1px 6px;font-weight:800;margin-left:4px;border:1px solid #fbbf24;}

/* 갤러리 스트립 */
.pm-gallery-strip{ display:flex; gap:6px; padding:8px 12px; overflow-x:auto; background:var(--color-card-bg); }
.pm-thumb{ width:58px; height:58px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; flex-shrink:0; transition:border-color 0.15s; }
.pm-thumb.active{ border-color:var(--color-point); }
.pm-thumb:hover{ border-color:var(--color-sub); }

/* 필터 탭 */
.ep-filter-tabs{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; margin:8px 0 14px;
}
.ep-filter-tabs::-webkit-scrollbar{ display:none; }
.ep-filter{
  flex-shrink:0; padding:6px 14px; border-radius:20px; border:1px solid var(--color-border);
  background:var(--color-card-bg); color:var(--color-sub); font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.15s;
}
.ep-filter.active{ background:var(--color-point); color:#111; border-color:var(--color-point); }

/* 히든 잠금 — 비활성화됨 */

/* 이벤트 */
.ep-event{
  display:flex; gap:10px; padding:10px; margin-bottom:8px;
  border-radius:10px; background:var(--color-card-bg);
}
.ep-event img{ width:50px; height:50px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.ep-event-title{ font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:3px; }
.ep-event-date{ font-size:11px; color:var(--color-sub); }

/* 교통 배지 */
.ep-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.ep-badge{
  background:var(--color-card-bg); border:1px solid var(--color-border);
  border-radius:20px; padding:5px 12px; font-size:12px; color:var(--color-text);
}

/* 히어로 썸네일 */
.ep-thumbnail{ width:100%; aspect-ratio:16/6; object-fit:cover; object-position:center; display:block; }

/* 배너 슬롯 */
.ep-banner-slot{ width:100%; aspect-ratio:16/9; position:relative; display:block; background:#f0f0f0; overflow:hidden; touch-action:pan-y; }
.ep-banner-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.ep-banner-slot a{ display:block; width:100%; height:100%; }
.ep-banner-status{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--color-card-bg); border:1px solid var(--color-border); border-radius:0 0 8px 8px; font-size:12px; }
.ep-banner-btn{ padding:5px 14px; border-radius:20px; border:1.5px solid #e8520a; background:#fff; color:#e8520a; font-size:12px; font-weight:700; cursor:pointer; }
.ep-banner-btn:hover{ background:#e8520a; color:#fff; }
.ep-banner-btn.occupied{ border-color:#9ca3af; color:#9ca3af; cursor:default; }
.ep-banner-btn.occupied:hover{ background:#fff; color:#9ca3af; }

/* 패널 뒤로가기 */
.ep-home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-card-bg); border:1px solid var(--color-border);
  border-radius:20px; padding:0 12px; height:34px; font-size:16px; cursor:pointer;
  transition:background 0.15s; flex-shrink:0; line-height:1;
}
.ep-home-btn:hover{ background:var(--color-border); }
.ep-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--color-card-bg); border:1px solid var(--color-border);
  border-radius:20px; padding:0 16px; height:34px; font-size:13px; font-weight:600;
  color:var(--color-text); cursor:pointer; transition:background 0.15s; line-height:1;
}
.ep-back-btn:hover{ background:var(--color-border); }

/* 가입 모달 */
.ep-modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.7); z-index:9999;
  align-items:center; justify-content:center;
}
.ep-modal-overlay.open{ display:flex; }
.ep-modal{
  background:var(--color-card-bg); border:1px solid var(--color-border);
  border-radius:20px; padding:32px 28px; max-width:360px; width:90%; text-align:center;
}
.ep-modal h3{ font-size:18px; font-weight:700; margin-bottom:8px; color:var(--color-text); }
.ep-modal p{ font-size:13px; color:var(--color-sub); margin-bottom:20px; }
.ep-social-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px; border-radius:10px;
  border:1px solid var(--color-border); font-size:13px; font-weight:600;
  cursor:pointer; margin-bottom:8px; background:var(--color-bg);
  text-decoration:none; color:var(--color-text);
}
.ep-modal-sub{ font-size:11px; color:var(--color-sub); margin-top:14px; }

/* ── 15단계 초기 패널 ── */
.ep-intro{ padding:14px 20px 28px; }
.ep-hero-copy{ text-align:center; }

/* scout character */
.ep-scout-frame{
  display:flex; justify-content:center;
  margin:0 auto 12px;
}
.ep-scout-char{
  width:150px; height:150px;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
  animation:ep-float 3.2s ease-in-out infinite;
}
@keyframes ep-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.ep-scout-badge{ display:none; }
.ep-hero-headline{
  font-size:20px; font-weight:800; color:var(--color-text);
  line-height:1.3; margin-bottom:6px;
}
.ep-hero-headline em{ color:var(--color-point); font-style:normal; }
.ep-hero-sub{
  font-size:12px; color:rgba(28,28,28,0.45); line-height:1.65; margin-bottom:18px;
}

/* tap CTA */
.ep-tap-cta{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1.5px solid var(--color-border);
  border-radius:14px; padding:11px 14px;
  margin-bottom:18px; text-align:left;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.ep-tap-icon{
  width:34px; height:34px; border-radius:50%;
  background:var(--color-point); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
  animation:ep-tap-bounce 2s ease-in-out infinite;
}
@keyframes ep-tap-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.ep-tap-text{ font-size:11px; color:#888; line-height:1.5; }
.ep-tap-text strong{ font-size:12px; color:var(--color-text); display:block; margin-bottom:1px; font-weight:700; }

/* divider + area label */
.ep-hero-divider{ height:1px; background:var(--color-border); margin-bottom:14px; }
.ep-area-label{
  font-size:10px; font-weight:700; color:#bbb;
  letter-spacing:1px; text-transform:uppercase;
  margin-bottom:9px; text-align:left;
}
.ep-stats-row{ display:flex; align-items:center; margin-bottom:24px; }
.ep-stat-item{ flex:1; text-align:center; }
.ep-stat-num{ font-size:20px; font-weight:900; color:var(--color-text); line-height:1; }
.ep-stat-icon{ font-size:18px; line-height:1; margin-bottom:3px; }
.ep-stat-label{ font-size:11px; color:var(--color-sub); font-weight:600; margin-top:3px; letter-spacing:0.02em; }
.ep-stat-div{ width:1px; height:36px; background:var(--color-border); flex-shrink:0; }
.ep-region-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:12px 0 4px;
}
@media(min-width:1100px){
  .ep-region-grid{ grid-template-columns:repeat(4,1fr); }
}
.ep-region-pill{
  padding:8px 4px; border-radius:8px; border:none;
  background:var(--color-card-bg); border:1px solid var(--color-border);
  font-size:12px; font-weight:600; color:var(--color-text);
  cursor:pointer; text-align:center; transition:all 0.15s;
}
.ep-region-pill:hover{
  background:var(--color-point); color:#fff; border-color:var(--color-point);
}
.ep-region-pill--capital{
  background:#FFF0EE; border-color:#E8A09A; color:#B03A2E;
}
.ep-region-pill--capital:hover{ background:var(--color-point); color:#fff; border-color:var(--color-point); }
.ep-region-pill--metro{
  background:linear-gradient(135deg,#1e3a5f,#2d5986);
  border-color:#5a9fd4; color:#cce4f7; font-weight:600;
}
.ep-region-pill--metro:hover{ background:linear-gradient(135deg,#2563a8,#1a4a80); border-color:#5a9fd4; color:#fff; }

.ep-region-label--capital{
  grid-column:1/-1; font-size:12px; font-weight:800; color:var(--color-point);
  letter-spacing:0.05em; text-transform:uppercase; padding:8px 2px 5px;
  border-bottom:2px solid var(--color-point); margin-bottom:2px;
  min-width:0; overflow:hidden;
}
.ep-region-label--rest{
  grid-column:1/-1; font-size:11px; font-weight:700; color:var(--color-sub);
  letter-spacing:0.06em; text-transform:uppercase; padding:6px 2px 4px;
  border-bottom:1px solid var(--color-border); margin-bottom:2px; margin-top:10px;
  min-width:0; overflow:hidden;
}
.ep-region-sublabel{
  grid-column:1/-1; font-size:12px; font-weight:700; color:#a84030;
  letter-spacing:0.03em; padding:10px 2px 4px;
  min-width:0; overflow:hidden;
}
.ep-region-sublabel-btn{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  padding:10px 2px 4px; min-width:0; overflow:hidden;
}
.ep-region-sublabel-btn span{ font-size:12px; font-weight:700; color:#a84030; letter-spacing:0.03em; }
.ep-region-sublabel-btn button{
  font-size:11px; font-weight:700; color:var(--color-point); background:none; border:none;
  cursor:pointer; padding:0; letter-spacing:0.02em; opacity:.85;
}
.ep-region-sublabel-btn button:hover{ opacity:1; text-decoration:underline; }

/* 구 선택 리스트 아이템 (sub-item) */
.ep-sub-item{ background:var(--color-card-bg) !important; color:var(--color-text); }
.ep-sub-item:hover{ background:var(--color-border) !important; }

/* ── 장소 상세 모달 ── */
.place-modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.75); z-index:10000;
  align-items:center; justify-content:center; padding:16px;
}
.place-modal-overlay.open{ display:flex; }
.place-modal{
  background:var(--color-bg) !important; border-radius:20px;
  border:1px solid var(--color-border);
  width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto;
  animation:slideUp 0.25s ease; color:var(--color-text) !important;
}
@keyframes slideUp{
  from{ transform:translateY(40px); opacity:0; }
  to{   transform:translateY(0);    opacity:1; }
}
.pm-close{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:flex-end;
  padding:12px 16px 0;
  background:var(--color-bg);
}
.pm-close button{
  background:var(--color-card-bg); border:1px solid var(--color-border);
  border-radius:50%; width:32px; height:32px; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--color-text);
}
.pm-hero{ width:100%; aspect-ratio:16/7; object-fit:cover; object-position:center; display:block; border-radius:20px 20px 0 0; }
.pm-body{ padding:20px; color:var(--color-text) !important; background:var(--color-bg) !important; }
.pm-category{ font-size:12px; color:var(--color-sub); margin-bottom:4px; }
.pm-title{ font-size:22px; font-weight:700; margin-bottom:6px; color:var(--color-text); }
.pm-address{ font-size:13px; color:rgba(28,28,28,0.5); margin-bottom:14px; }
.pm-desc{ font-size:14px; line-height:1.75; color:var(--color-text) !important; margin-bottom:20px; }
.pm-minimap{ width:100%; height:180px; border-radius:12px; overflow:hidden; margin-bottom:20px; }
.pm-submitter{ font-size:12px; color:var(--color-sub); margin-bottom:20px; }
.pm-actions{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--color-border);
}
.pm-action-btn{
  flex:1; min-width:100px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; border-radius:12px; border:1px solid var(--color-border);
  font-size:13px; font-weight:600; cursor:pointer;
  background:var(--color-card-bg); color:var(--color-text);
  transition:border-color 0.15s;
}
.pm-action-btn:hover{ border-color:var(--color-point); }
.pm-action-btn.pm-like{ border-color:var(--color-sub); color:var(--color-sub); }

@media(max-width:900px) and (orientation:portrait){
  .explore-layout{ flex-direction:column; height:auto; }
  .explore-map{ flex:0 0 250px; height:250px; max-height:250px; }
  #exploreMap{ height:250px; }
  .explore-panel-wrap{ flex:1; max-height:calc(100vh - 250px - 46px); border-left:none; border-top:1px solid var(--color-border); }
  .explore-panel{ border-left:none; }
}
@media(orientation:landscape) and (max-height:500px){
  .explore-layout{ flex-direction:row; height:100vh; height:100dvh; }
  .explore-map{ flex:0 0 42%; height:100%; max-height:none; }
  #exploreMap{ height:100%; }
  .explore-panel-wrap{ flex:1; max-height:100vh; max-height:100dvh; border-left:1px solid var(--color-border); border-top:none; }
  .explore-panel{ border-left:none; }
  .ep-region-grid{ grid-template-columns:repeat(3,1fr); }
}