/* ==========================================================================
   pieceof media market — style.css
   컬러: 민트그린 / 화이트 / 블랙 / 골드
   폰트: Pretendard(본문, 한글) + Jost(워드마크, 영문 디스플레이)
   ========================================================================== */

:root{
  --mint: #00C9A7;
  --mint-dark: #00A88C;
  --mint-tint: #E4FBF6;
  --black: #0B0B0B;
  --white: #FFFFFF;
  --gold: #C6A15B;
  --gold-tint: #F6EFDE;
  --gray-900: #16181B;
  --gray-600: #5B6169;
  --gray-400: #9AA0A6;
  --gray-200: #E7E9EC;
  --gray-100: #F4F5F6;
  --gray-50: #FAFAFA;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 10px rgba(11,11,11,0.06);
  --shadow-pop: 0 20px 60px rgba(11,11,11,0.18);

  --font-kr: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  /* 폰트는 Pretendard로 통일 — 크기/굵기/색으로만 위계를 구분 */
  --font-display: var(--font-kr);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-kr);
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

.container{ max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
.site-header .container{
  height: 76px; display:flex; align-items:center; justify-content:space-between;
}
/* 워드마크 그룹 — 로고 박스 없이 텍스트만으로 구성. 상단에 연한 그레이 부제,
   하단에 민트그린 굵은 서비스명을 한 줄로 배치해 심플하게 정리 */
.wordmark-group{ display:flex; align-items:center; }
.wordmark-text{ display:flex; flex-direction:column; gap:2px; }
.wordmark-subtitle{
  font-size:11.5px; font-weight:600; letter-spacing:.01em; color: var(--gray-400);
}
.wordmark-title{
  font-family: var(--font-kr), sans-serif;
  font-size:21px; font-weight:800; letter-spacing:-0.01em; color: var(--mint-dark);
  white-space:nowrap;
}
.footer-logo{ height: 34px; width:auto; display:block; margin-bottom:14px; }
.back-to-main{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color: var(--mint-dark);
  background: var(--mint-tint); border:1px solid transparent;
  padding: 8px 16px; border-radius: 999px; transition: all .15s;
}
.back-to-main:hover{ background: var(--mint); color: var(--white); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.btn-cta{
  background: var(--black); color: var(--white);
  padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight:600;
  border: none; transition: background .15s;
}
.btn-cta:hover{ background: var(--mint-dark); }
.btn-cta.gold{ background: var(--gold); }
.btn-cta.gold:hover{ background:#B08D45; }
.btn-cta.mint{ background: var(--mint); color: var(--white); font-weight:700; }
.btn-cta.mint:hover{ background: var(--mint-dark); color: var(--white); }

.auth-link{
  background:none; border:none; font-size:13.5px; font-weight:600; color: var(--gray-600);
  padding:0;
}
.auth-link:hover{ color: var(--black); }
.btn-outline-mint{
  background: var(--white); border:1.5px solid var(--mint); color: var(--mint-dark);
  padding: 9px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
}
.btn-outline-mint:hover{ background: var(--mint-tint); }

/* ---------- 이달의 추천매체 캐러셀 ---------- */
.carousel-section{
  padding: 36px 0 40px; overflow:hidden;
  background:
    radial-gradient(560px 300px at 8% -15%, rgba(0,201,167,0.22), transparent 62%),
    radial-gradient(460px 260px at 95% 115%, rgba(198,161,91,0.20), transparent 65%),
    var(--gray-50);
}
/* pieceof's choice 기획전 헤드 — 에디토리얼 타이틀 우측에 CURATED 배지를 나란히 붙임 */
.carousel-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.carousel-label{
  display:inline-block;
  font-family: var(--font-kr); font-weight:700; font-size:11px; letter-spacing:.12em;
  color: var(--mint-dark); background: rgba(0,201,167,0.14); padding:5px 10px; border-radius:999px;
}
.carousel-head h2{
  font-family: var(--font-kr); font-weight:800; font-size:11px; color: var(--black);
  margin:0; letter-spacing:.12em; text-transform:uppercase;
}
.carousel-viewport{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-card);
}
.carousel-track{
  display:flex; transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel-slide{
  flex: 0 0 100%; position:relative; height: 380px; cursor:pointer;
}
/* 매체 사진은 건물 상단부(옥상/벽면) 전광판이 피사체라 기본 중앙크롭이면 잘려나가기 쉬움 →
   상단 쪽을 기준으로 크롭되도록 object-position을 위로 이동 */
.carousel-slide img{ width:100%; height:100%; object-fit:cover; object-position: 50% 30%; }
.carousel-info{
  position:absolute; left:0; bottom:0; right:0; padding: 24px 28px;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.carousel-tag{
  display:inline-block; font-size:11px; font-weight:700; color: var(--black);
  background: var(--mint); padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
.carousel-name{ font-size:19px; font-weight:700; color:#fff; margin:0 0 4px; }
.carousel-addr{ font-size:12.5px; color: rgba(255,255,255,.75); margin:0; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:none;
  background: rgba(255,255,255,0.85); color: var(--black); font-size:22px;
  display:flex; align-items:center; justify-content:center; line-height:0;
}
.carousel-arrow:hover{ background: var(--white); }
.carousel-arrow.prev{ left:16px; }
.carousel-arrow.next{ right:16px; }
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.carousel-dot{
  width:7px; height:7px; border-radius:50%; border:none; background: var(--gray-200); padding:0;
}
.carousel-dot.active{ background: var(--mint-dark); width:20px; border-radius:4px; }

/* ---------- Top tabs (OOH / Influencer / TV) ---------- */
.top-tabs{
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 76px; z-index: 90; background: var(--white);
}
.top-tabs .container{ display:flex; gap: 4px; }
.top-tab{
  padding: 16px 6px; margin-right: 28px; font-size: 15px; font-weight: 600;
  color: var(--gray-400); border-bottom: 2px solid transparent; position: relative;
}
.top-tab .count{
  font-size: 11px; font-weight:700; margin-left:6px; color: var(--gray-400);
}
.top-tab.active{ color: var(--black); border-color: var(--mint); }
.top-tab.active .count{ color: var(--mint-dark); }

/* ---------- Category chip filter + 검색 + 가격대 필터 ---------- */
.filter-bar{
  padding: 14px 0; border-bottom: 1px solid var(--gray-100);
}
.filter-bar .container{ display:flex; flex-direction:column; gap:10px; }
.search-row{ width:100%; }
.keyword-search{
  width:100%; border:1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size:14px; font-family:inherit; background: var(--white); color: var(--gray-900);
}
.keyword-search::placeholder{ color: var(--gray-400); }
.keyword-search:focus{ outline:none; border-color: var(--mint); }

/* 카테고리 / 매체유형·가격대 / 보기방식 — 셋 다 성격이 다른 필터·설정이지만
   하나의 카드 테두리 안에 얇은 구분선으로만 나눠서 "필터 그룹" 하나로 읽히게 함.
   이전에는 카테고리는 배경 없이 떠 있고 매체유형·가격대만 회색 박스로 감싸여 있어
   같은 필터 영역인데도 두 개의 서로 다른 컴포넌트처럼 보였던 밸런스 문제를 해결. */
.filter-group-card{
  display:flex; flex-direction:column; gap:12px;
  background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 14px 18px; box-shadow: var(--shadow-card);
}
.fg-divider{ height:1px; background: var(--gray-100); flex-shrink:0; }
.fg-label{ font-size:11px; font-weight:700; color: var(--gray-600); letter-spacing:.01em; }

/* 공통 블록 — 라벨 + 컨트롤이 위아래로 쌓이는 기본형(카테고리 블록에도 재사용) */
.fg-block{ display:flex; flex-direction:column; gap:8px; }
.fg-block--row{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:22px; }
.fg-block--view{ flex-direction:row; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }

.filter-group{ display:flex; flex-direction:column; gap:6px; }

/* "결과 매체 수"만 덩그러니 있으면 무슨 숫자인지 헷갈려서, 다른 필터와 같은
   라벨+값 패턴(위에 설명, 아래 값)으로 통일 — 지금 필터 조건에 맞는 매체 수라는 뜻 */
.result-group .fg-label{ text-align:left; }
.result-count{ font-size:14px; font-weight:700; color: var(--gray-600); white-space:nowrap; }
.result-count b{ color: var(--black); font-weight:800; font-size:16px; }
/* 예전 히어로 영역의 "등록매체 수"를 필터 결과 옆으로 옮겨온 보조 텍스트 —
   "N개 매체 / 전체 등록 매체 M개" 형태로, 필터링된 값(진하게)과 헷갈리지 않도록
   옅은 색+작은 크기로 톤을 낮춤 */
.total-hint{
  display:inline-block; margin-left:4px; font-size:11.5px; font-weight:600; color: var(--gray-400);
}
.total-hint b{ color: inherit; font-weight: inherit; font-size: inherit; }

.filter-reset-btn{
  margin-left:auto; align-self:center; background:none; border:none; cursor:pointer;
  font-size:12px; font-weight:600; color: var(--gray-400); text-decoration:underline;
}
.filter-reset-btn:hover{ color: var(--black); }

/* 개별 매체 / 네트워크 매체 유형 토글 */
.format-toggle{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.format-toggle button{
  border:1px solid var(--gray-200); background: var(--white); color: var(--gray-600);
  font-size:12px; font-weight:600; padding:8px 13px; border-radius:999px; white-space:nowrap;
  transition: all .15s;
}
.format-toggle button:hover{ border-color: var(--mint); color: var(--black); }
.format-toggle button.active{ background: var(--black); border-color: var(--black); color: var(--white); }

.price-filter{
  flex-shrink:0; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1px solid var(--gray-200); border-radius:999px; height:36px;
  padding:0 30px 0 16px; font-size:12.5px; font-weight:600; color: var(--gray-600); background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6169' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 12px center; background-size:10px 6px;
  cursor:pointer; transition: border-color .15s;
}
.price-filter:hover{ border-color: var(--mint); }
.price-filter:focus{ outline:none; border-color: var(--mint); }

.chip-row{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; padding-right:36px;
  scrollbar-width: thin;
  /* 스크롤 가능한 칩 목록이 카드 끝에서 뚝 잘려 보이지 않도록 오른쪽을 페이드아웃 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}
.chip{
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 999px; border:1px solid var(--gray-200);
  font-size: 13px; font-weight:500; color: var(--gray-600); background: var(--white);
  transition: all .15s; white-space:nowrap;
}
.chip:hover{ border-color: var(--mint); color: var(--black); }
.chip.active{ background: var(--black); border-color: var(--black); color: var(--white); }

.view-toggle{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.view-toggle button{
  width:36px; height:36px; border-radius: var(--radius-sm); border:1px solid var(--gray-200);
  background: var(--white); display:flex; align-items:center; justify-content:center;
  font-size:16px; color: var(--gray-600);
}
.view-toggle button.active{ background: var(--black); border-color: var(--black); color: var(--white); }
.icon-split{ display:flex; align-items:center; gap:3px; width:18px; height:14px; }
.icon-split .box{ flex: 1.6 0 auto; height:100%; background: currentColor; border-radius:2.5px; opacity:.9; }
.icon-split .line{ width:2px; height:100%; background: currentColor; border-radius:1px; opacity:.9; }

/* ---------- Split view: list + map ---------- */
.market-body{ padding: 24px 0 100px; }
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.split.mode-list{ grid-template-columns: 1fr; }
.split.mode-map{ grid-template-columns: 1fr; }
.split.mode-map .card-grid{ display:none; }
.split.mode-list .map-panel{ display:none; }
.split.mode-map .map-panel{ width:100%; }

.card-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-height: calc(100vh - 260px); overflow-y:auto; padding-right:6px; padding-bottom:20px;
}
.split.mode-list .card-grid{
  grid-template-columns: repeat(3, 1fr); max-height:none; overflow:visible;
}

.map-panel{
  position: sticky; top: 176px;
  height: calc(100vh - 260px);
  border-radius: var(--radius-lg);
  overflow:hidden; border:1px solid var(--gray-200);
  background: var(--gray-50);
}
#kakao-map{ width:100%; height:100%; }

/* 지도 일반/위성 전환 컨트롤 — map-panel(position:sticky) 기준 우상단 오버레이 */
.map-type-toggle{
  position:absolute; top:12px; right:12px; z-index:5; display:flex; gap:4px;
  background: rgba(255,255,255,0.92); border-radius:999px; padding:3px;
  box-shadow: 0 1px 6px rgba(11,11,11,.15);
}
.map-type-toggle button{
  border:none; background:transparent; font-size:11.5px; font-weight:700; color: var(--gray-600);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.map-type-toggle button.active{ background: var(--black); color: var(--white); }

.map-fallback{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 10px; padding: 32px; text-align:center; color: var(--gray-600);
  background:
    linear-gradient(0deg, rgba(0,201,167,.05), rgba(0,201,167,.05)),
    repeating-linear-gradient(90deg, var(--gray-100) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, var(--gray-100) 0 1px, transparent 1px 40px);
}
.map-fallback .icon{ font-size: 30px; }
.map-fallback b{ color: var(--black); font-size: 14px; }
.map-fallback p{ font-size: 12.5px; margin:0; max-width:280px; line-height:1.6; }
.map-fallback code{
  background: var(--gray-100); padding:2px 6px; border-radius:4px; font-size:11px;
}
.pin-list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:320px; }

/* ---------- 방향 표시 지도 핀 (facing_direction) ---------- */
.ooh-pin{ position:relative; width:1px; height:1px; cursor:pointer; }
.pin-dot{
  position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background: var(--mint-dark); border:2px solid var(--white);
  box-shadow: 0 1px 5px rgba(11,11,11,.35); z-index:2;
}
/* 노출 방향/범위를 나타내는 부채꼴 — background(conic-gradient)는 JS에서 매체별로 계산해 inline 주입.
   conic-gradient 0deg = 12시 방향(정북), 시계방향 증가 → 나침반 방위각과 그대로 매핑되어
   좁은 단일 방향이든(예:40°) "남·남서·서"처럼 넓은 노출 범위(예:135°)든 동일한 방식으로 표현 가능 */
.pin-cone{
  position:absolute; left:0; top:0; width:60px; height:60px;
  margin: -30px 0 0 -30px; /* 부채꼴 중심 = pin-dot 위치 */
  border-radius:50%;
  z-index:1; pointer-events:none;
}

/* 카드에서 "지도에서 보기" 클릭 시 해당 위치에 잠깐 표시되는 강조 펄스 */
.map-pulse{
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; border:3px solid var(--mint-dark);
  animation: pin-pulse 0.8s ease-out 2;
  pointer-events:none;
}
@keyframes pin-pulse{
  from{ transform:scale(.5); opacity:1; }
  to{ transform:scale(2.4); opacity:0; }
}
/* 지도 핀 위 매체명 라벨 — 일정 줌 레벨 이상 확대했을 때만 렌더링(app.js updateLabels)
   화이트 배경 + 민트 포인트 바 + 말풍선 꼬리로, 카드/뱃지에 쓰는 브랜드 톤(민트·블랙·화이트)과 통일 */
.pin-label{
  position:relative;
  background: var(--white); color: var(--black); font-size:11px; font-weight:700;
  padding:6px 11px 6px 15px; border-radius:8px; white-space:nowrap; pointer-events:none;
  border: 1px solid var(--gray-200);
  box-shadow: 0 3px 10px rgba(11,11,11,.16);
}
.pin-label::before{
  /* 좌측 민트 포인트 바 */
  content:""; position:absolute; left:5px; top:5px; bottom:5px; width:3px;
  background: var(--mint); border-radius:2px;
}
.pin-label::after{
  /* 하단 말풍선 꼬리 — 지도 핀(점) 쪽을 가리킴 */
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid var(--white);
  filter: drop-shadow(0 2px 1px rgba(11,11,11,.08));
}

/* 네트워크형 매체의 지역 대표 마커 — 골드 톤으로 point형 핀(민트)과 구분,
   지역명+합산 대수를 보여주고 클릭하면 그 지역으로 검색 필터링(app.js renderNetworkRegionMarkers) */
.network-region-pin{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background: var(--gold); color: var(--white); font-weight:800;
  padding:8px 13px; border-radius:12px; white-space:nowrap; cursor:pointer;
  box-shadow: 0 3px 10px rgba(11,11,11,.22); border:2px solid var(--white);
  transition: transform .15s;
}
.network-region-pin:hover{ transform: scale(1.05); }
.network-region-pin .nrp-count{ font-size:13px; line-height:1.1; }
.network-region-pin .nrp-region{ font-size:9.5px; font-weight:600; opacity:.9; }

.pin-list span{
  font-size:11px; background: var(--white); border:1px solid var(--gray-200);
  padding:4px 8px; border-radius:999px;
}

/* ---------- Card ---------- */
.card{
  background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-md);
  overflow:hidden; transition: transform .15s, box-shadow .15s; cursor:pointer;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--gray-200); }
.card .thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--gray-100); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
/* 썸네일 위 뱃지 묶음 — 카테고리 뱃지 + (있으면) 네트워크 매체 뱃지를 세로로 쌓음 */
.card .thumb-badges{
  position:absolute; top:10px; left:10px; z-index:2;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.card .badge{
  background: rgba(11,11,11,0.72); color:#fff;
  font-size:10.5px; padding:4px 9px; border-radius:999px; font-weight:600; letter-spacing:.02em;
}
.card .badge.gold{ background: var(--gold); }
.locate-icon-btn{
  position:absolute; top:10px; right:10px; z-index:2;
  width:28px; height:28px; border-radius:50%; border:none;
  background: rgba(255,255,255,0.88); font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 1px 4px rgba(11,11,11,.2); opacity:.85;
}
.locate-icon-btn:hover{ background: var(--white); opacity:1; transform: scale(1.06); }
/* 아이콘만 있는 버튼이라 호버 시 브라우저 기본 title 툴팁 대신 브랜드 스타일의 커스텀 툴팁을 표시 */
.locate-icon-btn::after{
  content: attr(data-tooltip);
  position:absolute; top: calc(100% + 6px); right:0;
  background: var(--black); color:#fff; font-size:10.5px; font-weight:600;
  padding:4px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; transform: translateY(-4px); pointer-events:none;
  transition: opacity .15s, transform .15s; z-index:5;
}
.locate-icon-btn:hover::after{ opacity:1; transform: translateY(0); }
.card .body{ padding: 14px 16px 16px; }
.card .name{ font-size:14.5px; font-weight:700; margin:0 0 4px; line-height:1.4; }
.card .addr{ font-size:12px; color: var(--gray-600); margin:0 0 10px; }

/* 상세 모달 주소 옆 "지도에서 위치 보기" 버튼 (카드에서는 썸네일 위 아이콘 버튼을 사용) */
.locate-btn{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; color: var(--mint-dark);
  background: var(--mint-tint); border:1px solid rgba(0,201,167,.4);
  padding:4px 10px; border-radius:999px; cursor:pointer; white-space:nowrap;
  margin-left:6px; vertical-align:middle;
}
.locate-btn:hover{ background: var(--mint); color: var(--white); border-color: var(--mint); }
.card-insight{ display:flex; gap:8px; margin: -2px 0 10px; }
.card-insight .ci-item{
  font-size:10.5px; font-weight:600; color: var(--gray-600);
  background: var(--gray-100); padding:3px 8px; border-radius:999px;
}
.card .meta{ display:flex; justify-content:space-between; align-items:flex-end; }
.card .price{ font-size:15px; font-weight:800; }
.card .price small{ font-size:11px; font-weight:500; color: var(--gray-400); }
.card .price.gold{ color: var(--gold); }
.card .inquire-btn{
  font-size:11.5px; font-weight:700; color: var(--mint-dark); border:1px solid var(--mint);
  padding:6px 12px; border-radius:999px; background: var(--mint-tint);
}
.card .inquire-btn:hover{ background: var(--mint); color: var(--white); }

/* ---------- Empty state ---------- */
.empty-state{
  grid-column: 1 / -1; padding: 90px 20px; text-align:center; color: var(--gray-600);
  border: 1px dashed var(--gray-200); border-radius: var(--radius-lg);
}
.empty-state .icon{ font-size:32px; margin-bottom:12px; }
.empty-state h3{ font-size:17px; margin:0 0 8px; color: var(--black); }
.empty-state p{ font-size:13px; margin:0 0 20px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(11,11,11,0.55); backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center; z-index: 1000; padding: 24px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background: var(--white); border-radius: var(--radius-lg); max-width: 880px; width:100%;
  max-height: 90vh; overflow-y:auto; box-shadow: var(--shadow-pop); position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background: var(--gray-100); border:none; font-size:16px; display:flex; align-items:center; justify-content:center;
  z-index: 2;
}
.modal-close:hover{ background: var(--gray-200); }

.detail-grid{ display:grid; grid-template-columns: 1fr 1fr; }

/* 상세 모달 사진 갤러리 — 사진이 여러 장이면 하단 썸네일 스트립으로 전환 */
.detail-gallery{ display:flex; flex-direction:column; height:100%; }
.detail-main-img{ width:100%; flex:1; object-fit:cover; min-height: 320px; }
.detail-thumbs{
  display:flex; gap:6px; padding:8px; background: var(--gray-50); overflow-x:auto; flex-shrink:0;
}
.detail-thumbs img{
  width:56px; height:56px; object-fit:cover; border-radius:6px; cursor:pointer;
  opacity:.55; border:2px solid transparent; flex-shrink:0; transition: all .15s;
}
.detail-thumbs img:hover{ opacity:.85; }
.detail-thumbs img.active{ opacity:1; border-color: var(--mint); }

.detail-info{ padding: 32px; }
.detail-info .badge{
  display:inline-block; font-size:11px; font-weight:700; color: var(--mint-dark);
  background: var(--mint-tint); padding:5px 10px; border-radius:999px; margin-bottom:14px;
}
.detail-info .badge.gold{ color: var(--white); background: var(--gold); }
.detail-info h2{ font-size: 22px; margin: 0 0 6px; }
.detail-info .addr{ font-size:13px; color: var(--gray-600); margin: 0 0 20px; }
.spec-table{ width:100%; border-collapse:collapse; margin-bottom: 22px; }
.spec-table th{
  text-align:left; font-size:12px; color: var(--gray-400); font-weight:500; padding:9px 0;
  width: 40%; border-bottom: 1px solid var(--gray-100);
}
.spec-table td{
  text-align:right; font-size:13px; font-weight:600; padding:9px 0; border-bottom: 1px solid var(--gray-100);
}
.detail-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background: var(--gray-50); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px;
}
.detail-price b{ font-size: 22px; }
.detail-price span{ font-size:12px; color: var(--gray-400); }

/* 송출초수/횟수별 복수 요금제 비교 테이블 (요금제가 2개 이상일 때만 렌더링) */
.pricing-tiers{
  background: var(--gray-50); border-radius: var(--radius-md); padding: 14px 16px 6px; margin-bottom: 18px;
}
.pt-label{ font-size:12px; font-weight:700; color: var(--gray-600); margin:0 0 8px; }
/* 표 자체만 가로 스크롤되게 감싸는 래퍼 — 라벨(.pt-label)은 스크롤 밖에 고정돼
   좁은 화면에서도 표만 옆으로 밀리고 제목은 그대로 보임 */
.pt-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pt-table{ width:100%; border-collapse:collapse; }
.pt-table th{
  text-align:left; font-size:11px; color: var(--gray-400); font-weight:500; padding:6px 4px;
  border-bottom: 1px solid var(--gray-200);
}
.pt-table td{
  font-size:12.5px; padding:8px 4px; border-bottom: 1px solid var(--gray-200); font-weight:600;
}
.pt-table td small{ font-weight:500; color: var(--gray-400); }
.pt-table tr:last-child td{ border-bottom:none; }
.detail-actions{ display:flex; gap:10px; }
.detail-actions .btn-cta{ flex:1; text-align:center; }
.detail-actions .btn-outline{
  flex:1; text-align:center; border: 1px solid var(--gray-200); border-radius:999px; padding:11px 22px;
  font-size:14px; font-weight:600;
}

/* ---------- 상세 모달: 주변 상권 비교 데이터 (insights) ---------- */
.insights{
  padding: 0 32px 32px; border-top: 1px solid var(--gray-100); margin-top: 4px;
}
.insights-head{ padding-top:24px; margin-bottom:18px; }
.insights-head h3{
  font-size:16px; margin:0 0 4px; display:flex; align-items:center; gap:8px;
}
.insights-head h3 span{
  font-size:10.5px; font-weight:700; color: var(--mint-dark); background: var(--mint-tint);
  padding:3px 8px; border-radius:999px; letter-spacing:0;
}
.insights-sub{ font-size:12.5px; color: var(--gray-600); margin:0; }

.insight-stats{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.insight-stat{
  flex:1; min-width:150px; background: var(--gray-50); border-radius: var(--radius-md);
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.insight-stat .label{ font-size:11.5px; color: var(--gray-600); font-weight:600; }
.insight-stat .value{ font-size:19px; font-weight:800; color: var(--black); }
.insight-stat .value small{ font-size:11px; font-weight:600; color: var(--gray-400); margin-left:2px; }

.insight-charts{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-bottom:16px;
}
.insight-chart-card{
  border:1px solid var(--gray-200); border-radius: var(--radius-md); padding:14px 16px;
}
.insight-chart-card.wide{ grid-column: 1 / -1; }
.chart-title{ font-size:12px; font-weight:700; color: var(--gray-600); margin:0 0 10px; }

.insight-note{
  font-size:11px; color: var(--gray-400); line-height:1.7; margin:0;
  background: var(--gray-50); padding:12px 14px; border-radius: var(--radius-sm);
}

@media (max-width: 620px){
  .insights{ padding: 0 20px 24px; }
  .insight-charts{ grid-template-columns: 1fr; }
}

/* ---------- 로드뷰 모달 ---------- */
.roadview-wrap{ padding: 28px; }
.roadview-wrap h3{ font-size:16px; margin:0 0 14px; }
.roadview-container{
  width:100%; height:420px; border-radius: var(--radius-md); overflow:hidden; background: var(--gray-100);
}
.roadview-empty{
  width:100%; min-height:260px; display:flex; align-items:center; justify-content:center;
  text-align:center; color: var(--gray-600); font-size:13.5px; background: var(--gray-50);
  border-radius: var(--radius-md); padding: 20px;
}
@media (max-width: 620px){
  .roadview-container{ height:280px; }
}

/* ---------- Inquiry form ---------- */
.inquiry-form{ padding: 32px; }
.inquiry-form h2{ font-size:20px; margin:0 0 4px; }
.inquiry-form .sub{ font-size:13px; color: var(--gray-600); margin:0 0 24px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; border:1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size:14px; font-family:inherit; background: var(--white);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none; border-color: var(--mint);
}
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-note{
  font-size:11.5px; color: var(--gray-400); background: var(--gray-50); padding:10px 12px;
  border-radius: var(--radius-sm); margin-bottom:18px; line-height:1.6;
}
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--black); color:#fff; padding:14px 22px; border-radius:999px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:all .25s; z-index:2000; display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .dot{ color: var(--mint); }

/* ---------- About page (회사소개 — piece-of.com 원페이지의 비주얼 아이덴티티를
   마켓 사이트 안으로 이관: 대형 스택 타이포 히어로, 라인아트 아이콘, 파트너 블랙 밴드,
   섹션 라벨 앞 짧은 rule 선까지 원본의 편집적 리듬을 최대한 유지함) ---------- */
.about-hero{
  padding: 88px 0 56px;
  background:
    radial-gradient(560px 300px at 8% -15%, rgba(0,201,167,0.18), transparent 62%),
    radial-gradient(460px 260px at 95% 115%, rgba(198,161,91,0.16), transparent 65%),
    var(--gray-50);
}
.about-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; color: var(--mint-dark); margin:0 0 20px;
}
.about-hero-title{
  margin: 0 0 36px; display:flex; flex-direction:column; gap:0;
}
.about-hero-title span{
  /* Space Grotesk는 최대 굵기가 700(bold)까지라 임팩트가 부족해, 900(black) 굵기를
     지원하는 Pretendard로 교체 — 로고 스탬프와 같은 계열이라 톤도 일관됨 */
  font-family: var(--font-kr), sans-serif;
  font-weight:900; font-size: 96px; line-height:0.96; letter-spacing:-0.03em; color: var(--black);
}
.about-hero-title span.mint{ color: var(--mint); }
.about-lead{ font-size:15px; line-height:1.8; color: var(--gray-600); max-width:560px; margin:0; }

.about-section{ padding: 64px 0; scroll-margin-top: 76px; }
.about-section.alt{ background: var(--gray-50); }
.about-section-label{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.14em; color: var(--mint-dark); margin:0 0 14px;
}
.about-section-label .rule{ width:22px; height:1px; background: var(--mint-dark); display:inline-block; }
.about-section-title{
  font-size:24px; font-weight:800; letter-spacing:-0.01em; color: var(--black); margin:0 0 36px; line-height:1.5;
}
.about-section-title--line{ max-width:640px; }
.about-section-title--nowrap{ max-width:none; white-space:nowrap; font-size:21px; }

.about-make-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:0; border:1px solid var(--gray-200); border-radius: var(--radius-lg); overflow:hidden; }
.about-make-grid.two-col{ grid-template-columns: repeat(2, 1fr); max-width:680px; }
.about-make-card{
  background: var(--white); padding: 36px 28px 28px;
  border-left:1px solid var(--gray-200);
}
.about-make-card:first-child{ border-left:none; }
.amc-icon{
  height:64px; display:flex; align-items:center; margin-bottom:22px; color: var(--gray-900);
  padding-bottom:22px; border-bottom:1px solid var(--gray-100);
}
.amc-icon svg{ height:40px; width:auto; }
.about-make-card h3{ font-size:19px; margin:0 0 8px; color: var(--black); font-weight:800; }
.about-make-card p{ font-size:13.5px; color: var(--gray-600); margin:0; line-height:1.6; }

/* Work — 텍스트 카드 대신 실제 캠페인 사진을 보여주는 6그리드(예: 오데마피게 캠페인).
   이미지가 아직 없는 슬롯은 회색 플레이스홀더로 대체되고, 실제 사진이 assets/work/에
   추가되면 자동으로 채워짐 */
.about-work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:20px; }
.about-work-card{
  display:block; position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  overflow:hidden; background: var(--gray-100); transition: transform .2s, box-shadow .2s;
}
.about-work-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-work-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.about-work-card .awc-overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 70%);
}
.about-work-card .awc-tag{
  font-size:10px; font-weight:700; letter-spacing:.06em; color: rgba(255,255,255,.7); text-transform:uppercase;
}
.about-work-card .awc-title{ font-size:14px; font-weight:700; color:#fff; margin:2px 0 0; }
.about-work-more{ font-size:13px; color: rgba(255,255,255,0.72); margin:18px 0 0; }
.about-work-more a{ color: var(--mint); font-weight:700; }
.about-work-more a:hover{ text-decoration: underline; }

/* Work & Partners — 원본 사이트가 이 구간에서 블랙 배경으로 전환되던 리듬을 그대로 재현.
   캠페인 그리드 아래로 파트너 브랜드를 텍스트 마퀴처럼 촘촘히 흘려 트렌디한 톤으로 마무리 */
.about-partners{
  background: var(--black); color: var(--white);
}
.about-partners .about-section-label{ color: var(--mint); }
.about-partners .about-section-label .rule{ background: var(--mint); }
.about-partners .about-section-title{ color: var(--white); }
.about-partners-lead{
  font-size:14px; font-weight:700; letter-spacing:-0.01em; color: rgba(255,255,255,0.88);
  margin: 0 0 18px;
}
.partner-marquee{
  display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0; list-style:none;
}
.partner-marquee li{
  font-family: var(--font-kr), sans-serif;
  font-size: 20px; font-weight:800; letter-spacing:-0.01em; color: rgba(255,255,255,0.92);
  padding: 6px 20px 6px 0; margin-right:18px; position:relative;
}
.partner-marquee li::after{
  content:"·"; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  color: var(--mint); font-weight:700;
}
.partner-marquee li:last-child{ margin-right:0; }
.partner-marquee li:last-child::after{ content:none; }
.partner-marquee li:hover{ color: var(--mint); transition: color .15s; }

/* Contact — 히어로와 동일한 대형 스택 타이포로 수미상관을 이룸 */
.about-contact-title{
  margin: 0 0 44px; display:flex; flex-direction:column; gap:0;
}
.about-contact-title span{
  font-family: var(--font-kr), sans-serif;
  font-weight:900; font-size: 72px; line-height:1.0; letter-spacing:-0.03em; color: var(--black);
}
.about-contact-title span.mint{ color: var(--mint-dark); }
.about-contact-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.ac-label{ font-size:11.5px; font-weight:700; color: var(--gray-400); margin:0 0 6px; }
.ac-value{ font-size:15px; font-weight:700; color: var(--black); margin:0; }
.ac-value a:hover{ color: var(--mint-dark); text-decoration: underline; }
.ac-icon-link{ display:inline-flex; align-items:center; gap:8px; transition: opacity .15s; }
.ac-icon-link:hover{ opacity:.75; }
.ac-icon{ width:20px; height:20px; flex-shrink:0; }
.ac-follow{ display:flex; flex-direction:column; gap:9px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--gray-200); padding: 48px 0 32px; margin-top: 40px; }
.site-footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.site-footer .wordmark{ margin-bottom:10px; }
.site-footer .addr{ font-size:12.5px; color: var(--gray-600); line-height:1.7; }
.site-footer .addr a{ color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; }
.site-footer .addr a:hover{ color: var(--black); text-decoration: underline; }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-size:13px; color: var(--gray-600); }
.footer-links a:hover{ color: var(--black); }
.copyright{ font-size:11.5px; color: var(--gray-400); margin-top:24px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .container{ padding: 0 20px; }
  .split{ grid-template-columns: 1fr; }
  .split.mode-map .map-panel{ display:block; }
  .split .card-grid{ display:grid; }
  .split.mode-map .card-grid{ display:none; }
  .map-panel{ position:relative; top:0; height: 380px; }
  .card-grid{ grid-template-columns: repeat(2,1fr); max-height:none; overflow:visible; }
  .detail-grid{ grid-template-columns: 1fr; }
  .detail-main-img{ min-height:220px; }
  .carousel-slide{ height: 280px; }
}
@media (max-width: 620px){
  .card-grid{ grid-template-columns: 1fr; }
  .site-header .container{ height:56px; }
  .back-to-main{ display:none; }
  .auth-link{ display:none; }
  /* 스탬프 로고는 정사각 비율 그대로 축소만 하고 태그라인도 계속 노출 —
     예전엔 좁은 화면에서 태그라인을 통째로 숨겼지만, 스탬프형 로고는 폭을
     적게 차지해 굳이 숨기지 않아도 됨 */
  .wordmark-subtitle{ font-size:9.5px; }
  .wordmark-title{ font-size:15px; }
  .header-actions{ gap:8px; }
  .btn-outline-mint{ padding:8px 12px; font-size:12.5px; }
  .form-row.two{ grid-template-columns:1fr; }
  .carousel-slide{ height: 240px; }
  .carousel-info{ padding:16px; }
  .carousel-name{ font-size:16px; }

  .filter-group-card{ padding:16px; }
  .fg-block--row{ flex-direction:column; align-items:stretch; gap:14px; }
  .filter-reset-btn{ margin-left:0; align-self:flex-start; }
  .fg-block--view{ align-items:flex-start; }

  /* 상세 모달 단가/스펙 표 — 모바일에서 좁은 폭에 억지로 욱여넣으면 숫자·라벨이
     줄바꿈되며 틀어지므로: (1) 카드 안쪽 여백을 줄이고 (2) 요금제 표는 가로 스크롤로
     빠지게 해 레이아웃이 깨지지 않고 원래 형태 그대로 보이게 함 */
  .detail-info{ padding: 20px; }
  .detail-info h2{ font-size:19px; }
  .detail-price{ padding: 13px 14px; }
  .detail-price b{ font-size:19px; }
  .spec-table th{ font-size:11.5px; }
  .spec-table td{ font-size:12.5px; word-break: keep-all; }
  .pricing-tiers{ padding: 12px 0 4px; }
  .pt-table-scroll{ padding: 0 10px; }
  .pt-table-scroll .pt-table{ min-width: 460px; }
  .pt-table th, .pt-table td{ white-space: nowrap; padding-left:8px; padding-right:8px; }
  .pt-label{ padding: 0 10px; }
  .detail-actions{ flex-wrap:wrap; }

  .about-hero{ padding: 48px 0 32px; }
  .about-hero-title span{ font-size:44px; }
  .about-contact-title span{ font-size:34px; }
  .about-section{ padding:40px 0; }
  .about-section-title--nowrap{ white-space:normal; font-size:19px; }
  .about-make-grid{ grid-template-columns: 1fr; }
  .about-make-card{ border-left:none; border-top:1px solid var(--gray-200); }
  .about-make-card:first-child{ border-top:none; }
  .about-work-grid{ grid-template-columns: 1fr; }
  .partner-marquee li{ font-size:16px; margin-right:12px; padding-right:14px; }
  .about-contact-grid{ grid-template-columns: 1fr; gap:18px; }
}