/* ==========================================================================
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:.12em; color: var(--gray-400);
}
.wordmark-title{
font-family: var(--font-kr), sans-serif;
font-size:21px; font-weight:800; letter-spacing:-0.01em;
white-space:nowrap;
}
.wm-ooh{ color: var(--mint); } .wm-wa{ color: var(--black); }
.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); }

.auth-user-info{ display:flex; align-items:center; gap:10px; }
.auth-user-email{ font-size:13px; font-weight:600; color: var(--gray-600); }
.auth-switch-link{
display:block; width:100%; text-align:center; background:none; border:none; margin-top:12px;
font-size:12.5px; font-weight:600; color: var(--mint-dark); text-decoration:underline; cursor:pointer;
}
.auth-switch-link:hover{ color: var(--mint); }

/* ---------- 이달의 추천매체 캐러셀 ---------- */
.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);
}
.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; }

/* 캐러셀 — 대표 블로그 게시글 슬라이드. 매체 슬라이드는 사진이 배경이지만
블로그 슬라이드는 사진이 없어 브랜드 톤 그라디언트 + 아이콘으로 대체하고,
클릭 시 openDetail() 대신 해당 블로그 글 URL로 이동한다(app.js renderCarousel). */
.carousel-slide.slide-blog{
background: linear-gradient(135deg, var(--mint-tint), var(--gray-100));
display:flex; align-items:center; justify-content:center; flex-direction:column;
text-align:center; padding: 28px;
}
.carousel-blog-icon{ font-size:44px; line-height:1; margin-bottom:14px; }
.carousel-slide.slide-blog .carousel-info{
position:static; background:none; padding:0; max-width:520px;
}
.carousel-slide.slide-blog .carousel-tag.blog{ background: var(--black); color: var(--white); }
.carousel-slide.slide-blog .carousel-name{ color: var(--black); font-size:20px; }
.carousel-slide.slide-blog .carousel-addr{ color: var(--gray-600); }
.carousel-read-more{
display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700; color: var(--mint-dark);
background: var(--white); border:1px solid var(--mint); padding:7px 16px; border-radius:999px;
}

/* 캐러셀 — "준비중" 큐레이션 샘플 슬라이드. 블로그 슬라이드와 같은 그라디언트+
아이콘 레이아웃을 재사용하되, 아직 콘텐츠가 없다는 것이 한눈에 보이도록
배지 색과 하단 버튼 텍스트만 톤을 낮춘다(app.js renderCarousel의 CURATION_TEASERS). */
.carousel-slide.slide-curation-soon{
background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
cursor:default;
}
.carousel-slide.slide-curation-soon .carousel-tag.soon{
background: var(--gray-200); color: var(--gray-600);
}
.carousel-slide.slide-curation-soon .carousel-read-more{
color: var(--gray-400); border-color: var(--gray-300, var(--gray-200)); background:transparent;
}

/* ---------- 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); position:relative;
}
.view-toggle button.active{ background: var(--black); border-color: var(--black); color: var(--white); }
.view-toggle button[data-tip]::after{
content: attr(data-tip);
position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
background: var(--black); color:var(--white); font-size:11px; font-weight:500;
font-family: var(--font-kr); padding:6px 10px; border-radius: var(--radius-sm);
white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .15s, transform .15s;
z-index:20;
}
.view-toggle button[data-tip]::before{
content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color: var(--black); margin-bottom:-2px;
opacity:0; pointer-events:none; transition: opacity .15s; z-index:20;
}
.view-toggle button[data-tip]:hover::after,
.view-toggle button[data-tip]:hover::before,
.view-toggle button[data-tip]:focus-visible::after,
.view-toggle button[data-tip]:focus-visible::before{ opacity:1; }
.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 #card-grid{ grid-column: 1; grid-row: 1; }
.split #card-pagination{ grid-column: 1; grid-row: 2; }
.split #map-panel{ grid-column: 2; grid-row: 1 / span 2; }
.split.mode-list{ grid-template-columns: 1fr; }
.split.mode-map{ grid-template-columns: 1fr; }
.split.mode-map .card-grid{ display:none; }
.split.mode-map #card-pagination{ display:none; }
.split.mode-list .map-panel{ display:none; }
.split.mode-map .map-panel{ width:100%; }
.split.mode-map #map-panel{ grid-column: 1; grid-row: 1; }
.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; }
/* 팝업/대관 매체 상세 — 공간소개 + 대관사례 블록 (venueInfo) */
.venue-info-block{
background: var(--gray-50); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px;
}
.venue-summary{ font-size:13px; color: var(--gray-700, var(--gray-600)); line-height:1.6; margin:0 0 12px; }
.venue-cases{ margin-bottom:10px; }
.vc-label{ font-size:12px; font-weight:700; color: var(--gray-600); margin:0 0 6px; }
.vc-list{ margin:0; padding-left:18px; }
.vc-list li{ font-size:12.5px; color: var(--gray-600); line-height:1.7; }
.venue-nearby{ font-size:12px; color: var(--gray-400); margin:0 0 6px; }
.venue-verify-note{ font-size:11.5px; color: var(--gray-400); margin:0; font-style:italic; }

.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 #card-grid{ grid-column: 1; grid-row: 1; }
.split #card-pagination{ grid-column: 1; grid-row: 2; }
.split #map-panel{ grid-column: 1; grid-row: 3; }
.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; }
.carousel-blog-icon{ font-size:34px; margin-bottom:8px; }
.carousel-slide.slide-blog .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; }
}

/* ---------------------------------------------------------------------- */
/* 카드 목록 페이지네이션 (무한스크롤 대체) */
/* ---------------------------------------------------------------------- */
.pagination{
display:flex; align-items:center; justify-content:center; gap:6px;
flex-wrap:wrap; margin:28px 0 8px;
}
.page-btn{
min-width:36px; height:36px; padding:0 10px; border-radius: var(--radius-sm);
border:1px solid var(--gray-200); background: var(--white); color: var(--gray-600);
font-size:13px; font-weight:500; font-family: var(--font-kr);
display:inline-flex; align-items:center; justify-content:center;
transition: all .15s; cursor:pointer;
}
.page-btn:hover:not([disabled]){ border-color: var(--mint); color: var(--black); }
.page-btn.active{ background: var(--black); border-color: var(--black); color: var(--white); }
.page-btn.page-nav{ color: var(--gray-900); font-size:15px; }
.page-btn[disabled]{ opacity:.35; cursor:default; }
.page-ellipsis{
min-width:24px; height:36px; display:inline-flex; align-items:center; justify-content:center;
color: var(--gray-400); font-size:13px;
}

@media (max-width: 600px){
.pagination{ gap:4px; margin:20px 0 4px; }
.page-btn{ min-width:32px; height:32px; font-size:12.5px; }
.page-ellipsis{ min-width:20px; height:32px; }
}