/* 약속알바 — 밤 업종 다크 우선.
   설계 판단 셋:
   1) 밀도가 곧 가치다. 이 시장 이용자는 한 화면에서 최대한 많이 훑는다.
   2) 빈 썸네일 자리를 만들지 않는다. 이미지 없는 카드는 텍스트만으로 채운다.
   3) 구좌 위계가 눈에 보여야 상위 구좌가 팔린다. 금테는 VVIP·VIP 전용. */

:root{
  /* 살짝 따뜻한 기운을 넣은 심야 블랙 — 순수 회색은 싸구려로 보인다 */
  --bg:#07080C; --bg2:#0C0E14;
  --card:#12141C; --card2:#191C26; --line:#232733; --line2:#313644;
  /* 3차 회색을 너무 어둡게 잡아 작은 글씨가 안 보였다.
     다크 배경에서 #666 대는 대비 3.3~3.7 로 WCAG AA(4.5) 미달이다.
     --tx3 는 '읽히는 보조 텍스트', --tx4 는 순수 장식용으로 분리한다. */
  --tx:#F2F3F7; --tx2:#AEB5C4; --tx3:#8B93A5; --tx4:#666D7C;
  --gold:#D4A24C; --gold-b:#F5CE7E; --gold-d:#231A0C; --gold-l:#4E3B18;
  --ok:#4FD3A0; --ok-d:#0E2A20;
  --bad:#F0837A; --bad-d:#2C1512;
  --urg:#FF6B64;
  --r:10px;
}
/* 라이트 테마를 두지 않는다 — 의도적 결정.
   밤 업종 서비스이고 이용 피크가 새벽이다. 경쟁사는 전부 흰 배경 포털이라
   다크 고정 자체가 첫눈에 구분되는 정체성이 된다.
   OS 가 라이트여도 이 화면은 항상 이 색으로 뜬다. */
:root{color-scheme:dark}

/* ── 3컬럼 포털 레이아웃 ───────────────────────────────────────────
   경쟁사(레이디퀸)는 데스크톱 포털이다. 모바일 단일 컬럼을 큰 모니터에
   그대로 띄우면 화면의 3분의 1이 여백으로 날아간다.
   우측 히든 구좌는 월 35만원짜리 상품이라 PC에 실제 자리가 있어야 한다. */
.page{display:grid;gap:16px;max-width:1400px;margin:0 auto;padding:14px 14px 60px;
  grid-template-columns:1fr}
.side{display:none}
.wrap{min-width:0;padding:0}

@media (min-width:1000px){
  .page{grid-template-columns:196px minmax(0,1fr)}
  .side.left{display:block}
}
@media (min-width:1280px){
  .page{grid-template-columns:196px minmax(0,1fr) 232px}
  .side.right{display:block}
}
/* 좁은 화면에서는 사이드 정보를 본문 아래로 내려 살린다 */
@media (max-width:999px){
  .page{display:block}
  .side.right{display:block;margin-top:22px}
  .side.right .sbox{margin-bottom:10px}
}

.side{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 88px);
  overflow-y:auto;scrollbar-width:thin}
@media (max-width:999px){.side{position:static;max-height:none;overflow:visible}}

.sbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 12px;margin-bottom:9px}
.sbox>b{display:block;font-size:12.5px;font-weight:800;margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line);letter-spacing:-.02em}
.sbox p{margin:0 0 8px;font-size:11.5px;color:var(--tx3);line-height:1.5}
.login-box .btn{margin-bottom:5px;padding:9px;font-size:12.5px}
.slist{display:flex;flex-wrap:wrap;gap:3px}
.slist.col{flex-direction:column;gap:5px}
.slist a{display:flex;align-items:center;gap:3px;padding:5px 9px;border-radius:5px;
  background:var(--card2);font-size:12px;color:var(--tx2);border:1px solid transparent}
.slist a:hover{border-color:var(--gold);color:var(--gold)}
.slist a em{font-style:normal;font-size:10px;color:var(--gold);
  font-variant-numeric:tabular-nums}
.slist.col a{background:none;padding:3px 0;font-size:12px}

/* 히든 구좌 — PC 우측 배너. 실제로 파는 자리다. */
.hidden-ads{padding-bottom:6px}
.hidad{display:block;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;margin-bottom:7px;background:var(--card2)}
.hidad:hover{border-color:var(--gold)}
.himg{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.himg img{width:100%;height:100%;object-fit:cover;display:block}
.hitxt{display:block;padding:8px 9px}
.hitxt em{font-style:normal;display:block;font-size:11px;color:var(--tx3)}
.hitxt strong{display:block;font-size:12px;font-weight:700;margin:2px 0 3px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hitxt i{font-style:normal;font-size:11px;color:var(--gold);font-weight:800}
.hidad.empty{border-style:dashed;background:transparent}
.hidad.empty strong{color:var(--tx3);font-weight:600}
.hidad.empty i{opacity:.8}

.wage{font-size:11.5px;margin-bottom:6px}
.wage th,.wage td{padding:4px 5px;text-align:right}
.wage th:first-child,.wage td:first-child{text-align:left;color:var(--tx3)}
.wage td{font-variant-numeric:tabular-nums;color:var(--tx)}
.snote{font-size:11px;color:var(--tx3);line-height:1.55;margin:0}
.promise-banner{display:block;text-decoration:none}
/* 좌측 사이드바에 같은 메뉴가 있는 구간은 데스크톱에서 숨긴다 */
@media (min-width:1000px){.side-dup{display:none}}

*{box-sizing:border-box}
/* 시스템 한글 폰트만 쓴다. 외부 웹폰트는 첫 화면을 하얗게 만든다. */
body{margin:0;background:var(--bg);color:var(--tx);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",
    -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
/* ── 헤더 ──────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:30;background:var(--bg2);
  border-bottom:1px solid var(--line)}
/* 헤더는 아래 본문 그리드와 같은 열에 맞춘다.
   플렉스로 두면 로고·메뉴가 왼쪽에 몰리고 가운데가 통째로 비어 우스워진다.
   로고는 좌측 사이드바 열, 메뉴는 본문 열, 로그인은 우측 레일 열 위에 선다. */
.hd{max-width:1400px;margin:0 auto;padding:10px 14px;display:flex;
  align-items:center;gap:16px}
@media (min-width:1000px){
  .hd{display:grid;grid-template-columns:196px minmax(0,1fr);gap:16px}
}
@media (min-width:1280px){
  .hd{grid-template-columns:196px minmax(0,1fr) 232px}
}

.logo{font-weight:900;font-size:19px;letter-spacing:-.04em;flex:none}
.logo b{color:var(--gold)}

/* 메인 메뉴 — 맨 텍스트로 두면 스타일 안 먹은 링크처럼 보인다.
   현재 페이지는 금색 밑줄로 표시한다. */
.gnb{display:flex;gap:4px;font-size:14.5px;font-weight:700;
  overflow-x:auto;scrollbar-width:none;min-width:0;align-items:center}
.gnb::-webkit-scrollbar{display:none}
.gnb a{white-space:nowrap;color:var(--tx2);padding:9px 12px;position:relative;
  border-radius:7px;transition:color .12s,background .12s}
.gnb a:hover,.gnb a:focus-visible{color:var(--tx);background:var(--card)}
.gnb a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--gold);transform:scaleX(0);transition:transform .15s;
  border-radius:2px;transform-origin:center}
.gnb a.on{color:var(--gold-b)}
.gnb a.on::after{transform:scaleX(1)}

/* 헤더 우측은 '행동'이다. 텍스트 링크로 두면 안 보이고 눌러지지도 않는다.
   광고 문의는 매출 경로라 금색 버튼으로 세운다. */
.hd-r{margin-left:auto;display:flex;gap:8px;flex:none;
  justify-content:flex-end;align-items:center}
@media (min-width:1280px){.hd-r{margin-left:0}}
.hbtn{display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border-radius:8px;font-size:13px;font-weight:800;white-space:nowrap;
  letter-spacing:-.02em;transition:background .12s,border-color .12s,color .12s}
.hbtn.ghost{color:var(--tx);border:1px solid var(--line2);background:var(--card)}
.hbtn.ghost:hover{border-color:var(--tx3);background:var(--card2)}
.hbtn.gold{background:linear-gradient(180deg,var(--gold-b),var(--gold));color:#1A1305;
  box-shadow:0 1px 10px -2px rgba(212,162,76,.5)}
.hbtn.gold:hover{filter:brightness(1.07)}

@media (max-width:999px){
  .hd{gap:10px;padding:9px 12px}
  .gnb{font-size:13.5px;gap:2px}
  .gnb a{padding:8px 9px}
}
@media (max-width:760px){
  .hbtn.ghost{display:none}
  .hbtn{height:32px;padding:0 12px;font-size:12.5px}
}
@media (max-width:520px){
  .logo{font-size:17px}
  .gnb{font-size:13px}
  .gnb a{padding:7px 7px}
}

/* ── 푸터 ──────────────────────────────────────────────────────── */
.ft{max-width:1400px;margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;
  justify-content:space-between}
.ft-l{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}

/* ── 검색 ──────────────────────────────────────────────────────── */
.search{display:flex;gap:5px;margin:11px 0 8px}
.search select{flex:1;min-width:0;padding:10px 7px;border-radius:7px;
  border:1px solid var(--line2);background:var(--card);color:var(--tx);
  font-size:13.5px;font-family:inherit}
.search .btn{width:auto;flex:none;padding:10px 16px;margin:0;font-size:14px}

/* ── 칩 ────────────────────────────────────────────────────────── */
.quick,.filters,.chips{display:flex;gap:5px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:none}
.quick::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;
  background:var(--card);font-size:13px;color:var(--tx2);white-space:nowrap;font-weight:600}
.chip.on{background:var(--gold-d);border-color:var(--gold);color:var(--gold);font-weight:700}
.chip.urgent-chip{background:var(--bad-d);border-color:var(--urg);color:var(--urg);font-weight:800}

/* ── 섹션 ──────────────────────────────────────────────────────── */
.slot-sec{margin:18px 0}
.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.sec-head h2{margin:0;font-size:15.5px;font-weight:900;letter-spacing:-.035em;
  display:flex;align-items:center;gap:7px}
.sec-head h2::before{content:"";display:block;width:14px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}

/* ── 브레드크럼 · 링크 행 ───────────────────────────────────────
   내부 링크는 우리가 100% 통제하는 유일한 링크다. 사람에게는 길찾기,
   크롤러에게는 2,500개 매트릭스 페이지로 들어가는 입구. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 6px;
  font-size:12px;color:var(--tx3)}
.crumb a{color:var(--tx3)}
.crumb a:hover{color:var(--gold-b)}
.crumb a+a::before{content:"›";margin-right:6px;color:var(--tx4)}
.crumb a:last-child{color:var(--tx2);font-weight:600}

.linkrow{display:flex;flex-wrap:wrap;gap:5px}
.linkrow a{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;
  border-radius:7px;background:var(--card);border:1px solid var(--line);
  font-size:12.5px;color:var(--tx2);font-weight:600}
.linkrow a:hover{border-color:var(--gold);color:var(--gold-b)}
.linkrow a.on{background:var(--gold-d);border-color:var(--gold);color:var(--gold-b)}
.linkrow a em{font-style:normal;font-size:11px;color:var(--gold);
  font-variant-numeric:tabular-nums}

/* ── 차별점 밴드 — 우리가 왜 다른지 한 줄로 ─────────────────────
   경쟁사가 못 만드는 지표를 가진 게 이 제품의 전부다. 숨기지 않는다. */
.why{display:flex;align-items:center;gap:14px;background:
  linear-gradient(100deg,var(--gold-d),var(--card) 62%);
  border:1px solid var(--gold-l);border-radius:var(--r);padding:13px 16px;margin:12px 0 4px}
.why .wr{flex:none;width:46px;height:46px;position:relative;display:grid;place-items:center}
.why .wr svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.why .wr .rbg{fill:none;stroke:var(--gold-l);stroke-width:2.8}
.why .wr .rfg{fill:none;stroke:var(--gold-b);stroke-width:2.8;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(245,206,126,.65))}
.why .wr b{position:relative;font-size:13px;font-weight:900;color:var(--gold-b);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.why-t{min-width:0}
.why-t b{display:block;font-size:13.5px;font-weight:800;color:var(--gold-b);
  letter-spacing:-.02em;margin-bottom:2px}
.why-t span{font-size:12px;color:var(--tx2);line-height:1.5}
@media (max-width:520px){.why{padding:11px 13px;gap:11px}.why-t span{font-size:11.5px}}
.sec-more{margin-left:auto;font-size:12px;color:var(--tx3);white-space:nowrap;font-weight:600}
.sec-more:hover{color:var(--gold-b)}

.grid{display:grid;gap:8px}
.grid.c1{grid-template-columns:1fr}
.grid.c2{grid-template-columns:1fr}
.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){
  .grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.c4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ── 카드 공통 ─────────────────────────────────────────────────── */
.c{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);color:inherit;overflow:hidden}
.c:active{background:var(--card2)}
.c h3{margin:0;font-size:13.5px;font-weight:600;line-height:1.38;letter-spacing:-.02em}
.c .bd{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
/* 9.5px 배지는 읽으라고 만든 게 아니게 된다. 10.5px 이 하한선. */
.b{font-style:normal;font-size:10.5px;font-weight:800;padding:2.5px 6px;border-radius:4px;
  white-space:nowrap;letter-spacing:-.02em;line-height:1.35}
.b.urg{background:var(--urg);color:#2A0605}
.b.v2{background:var(--ok-d);color:var(--ok)}
.b.v1{background:var(--gold-d);color:var(--gold-b)}
.b.pr{background:var(--ok-d);color:var(--ok)}
.b.kd{background:var(--card2);color:var(--tx2);border:1px solid var(--line2)}
.c .loc{font-size:12px;color:var(--tx3);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c .py{white-space:nowrap;display:flex;align-items:baseline;gap:3px;flex:none}
.c .py b{font-size:14.5px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.c .py b.nego{font-size:12px;color:var(--tx3);font-weight:600}
.c .py em{font-style:normal;font-size:10px;color:var(--tx3);font-weight:600}
.c .img{display:block;aspect-ratio:16/9;background:var(--card2);overflow:hidden}
.c .img.sm{aspect-ratio:2/1}
.c .img img{width:100%;height:100%;object-fit:cover;display:block}

/* 강조옵션 — 광고주가 개당 월 1만원에 사는 상품이라 확실히 보여야 한다 */
.c.eb{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-l)}
.ic{font-style:normal;color:var(--gold);margin-right:2px}
h3.bo{font-weight:900}
h3.co{color:var(--gold-b)}
h3.hl{background:linear-gradient(transparent 62%,var(--gold-l) 62%)}
h3.sp{background:linear-gradient(90deg,var(--gold),var(--bad),var(--gold-b),var(--gold));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:sp 4s linear infinite}
@keyframes sp{to{background-position:300% center}}
@media (prefers-reduced-motion:reduce){h3.sp{animation:none;color:var(--gold)}}

/* ── 약속이행률 링 (서명 요소) ───────────────────────────────────
   우리만 가진 데이터를 시각적 주인공으로 만든다.
   경쟁사는 광고주 의존 구조라 이 지표를 만들 수 없다 —
   그래서 이 링이 "여긴 다른 사이트"라는 신호가 된다. */
.ring{position:relative;flex:none;width:var(--s,44px);height:var(--s,44px);
  display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .rbg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2.6}
.ring .rfg{fill:none;stroke:var(--gold-b);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(240,196,106,.6))}
.ring .rfg.low{stroke:var(--bad)}
.ring b{position:relative;font-size:calc(var(--s,44px) * .30);font-weight:900;
  color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ring b i{font-style:normal;font-size:.62em;opacity:.75;margin-left:.5px}
/* 리스트 카드에서는 밝은 배경 위에 놓이므로 대비를 바꾼다 */
.c.row .ring .rbg{stroke:var(--line2)}
.c.row .ring b{color:var(--tx);text-shadow:none}
.c.row .ring .rfg{stroke:var(--gold)}
.ring.none{opacity:.3}
.ring.none b{font-size:14px;color:var(--tx3)}

/* ── 배너 타일 (유료 구좌 공통) ─────────────────────────────────
   광고 = 배너다. 이미지가 타일을 꽉 채우고 글자가 그 위에 얹힌다.
   실장이 50만원을 내는 이유가 이 그림이다. */
.c.bn{position:relative;display:block;background:var(--card2) center/cover no-repeat;
  border:1px solid var(--line2);overflow:hidden}
.c.bn.xl{aspect-ratio:16/8.2}
.c.bn.md{aspect-ratio:16/9.5}
.c.bn.sm{aspect-ratio:16/10}
.c.bn:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.6)}
.c.bn{transition:transform .12s,border-color .12s,box-shadow .12s}

.c.bn .ov{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:10px 11px}
.c.bn .tp{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.c.bn .bt{display:block}
.c.bn h3{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.55);
  font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0 0 4px;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.c.bn.xl h3{font-size:16.5px;-webkit-line-clamp:2}
.c.bn.md h3{font-size:14px;-webkit-line-clamp:2}
.c.bn.sm h3{font-size:12.5px;-webkit-line-clamp:2;font-weight:700}
.c.bn .mt{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;min-width:0}
.c.bn .loc{color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.9);
  font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 페이가 히어로 — 구직자가 실제로 스캔하는 건 금액이다 */
.c.bn .py{flex:none;display:flex;align-items:baseline;gap:4px}
.c.bn .py b{color:#fff;font-weight:900;font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.c.bn .py b .w{color:var(--gold-b);font-size:.62em;font-weight:800;margin-right:1px;
  vertical-align:.06em}
.c.bn.xl .py b{font-size:26px}
.c.bn.md .py b{font-size:21px}
.c.bn.sm .py b{font-size:17px}
.c.bn .py b.nego{font-size:13px;color:rgba(255,255,255,.9);font-weight:700;
  letter-spacing:-.02em}
.c.bn .py em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.72);
  font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* 구좌 리본 */
.ribbon{position:absolute;top:0;right:0;z-index:2;font-style:normal;
  background:linear-gradient(135deg,var(--gold-b),var(--gold));color:#12141A;
  font-size:10px;font-weight:900;padding:3px 10px;border-radius:0 0 0 8px;
  letter-spacing:.06em;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.ribbon.vip{background:linear-gradient(135deg,#C9CFFF,#7B8CFF);color:#0D0D2B}

/* VVIP — 금테 + 흐르는 광택. 50만원짜리 자리는 한눈에 달라 보여야 한다 */
.c.bn.vvip{border:2px solid var(--gold)}
.c.bn.vvip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 46%,
    rgba(255,255,255,.14) 54%,transparent 70%);
  background-size:260% 100%;animation:sheen 3.2s linear infinite}
@keyframes sheen{from{background-position:130% 0}to{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.c.bn.vvip::after{animation:none}}

/* 빈 구좌 — 팔 자리라는 걸 알리되 초라해 보이지 않게 */
.c.bn.empty{border:1px dashed var(--line2);background:
  repeating-linear-gradient(135deg,transparent,transparent 9px,
    rgba(217,164,65,.045) 9px,rgba(217,164,65,.045) 18px),var(--card)}
.c.bn.empty:hover{border-color:var(--gold);background:
  repeating-linear-gradient(135deg,transparent,transparent 9px,
    rgba(217,164,65,.09) 9px,rgba(217,164,65,.09) 18px),var(--card)}
.c.bn.empty .ov.center{align-items:center;justify-content:center;text-align:center;gap:4px}
.c.bn.empty strong{color:var(--tx2);font-size:13px;font-weight:800;letter-spacing:-.02em}
.c.bn.empty i{font-style:normal;color:var(--gold);font-size:11.5px;font-weight:700}

/* ── 급구 티커 ─────────────────────────────────────────────────── */
.ticker{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:0 12px;height:38px;
  overflow:hidden;margin-bottom:10px}
.ticker .tk-label{flex:none;font-size:11px;font-weight:900;color:var(--urg);
  border:1px solid var(--urg);border-radius:4px;padding:1px 7px;background:var(--bad-d)}
.tk-view{flex:1;overflow:hidden;position:relative;height:100%}
.tk-track{position:absolute;display:flex;gap:34px;align-items:center;height:100%;
  white-space:nowrap;animation:tk 30s linear infinite}
.tk-view:hover .tk-track{animation-play-state:paused}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}}
.tk-track a{font-size:12.5px;color:var(--tx2)}
.tk-track a b{color:var(--gold);font-weight:800}
.tk-track a:hover{color:var(--gold)}

/* ── 한 줄 (리스트·일반) — 밀도 최대 ──────────────────────────── */
.c.row{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:6px}
.c.row .rl{flex:1;min-width:0}
.c.row h3{margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:14px}
.c.row .py{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:0;
  text-align:right}
.c.row .py b{font-size:17px;font-weight:900;color:var(--tx);
  font-variant-numeric:tabular-nums;letter-spacing:-.045em;line-height:1.15}
.c.row .py b .w{color:var(--gold);font-size:.62em;font-weight:800;margin-right:1px;
  vertical-align:.06em}
.c.row .py b.nego{font-size:12.5px;color:var(--tx3);font-weight:700}
.c.row .py em{font-style:normal;font-size:10.5px;color:var(--tx3);font-weight:700}

/* ── 빈 구좌 ───────────────────────────────────────────────────── */
.c.empty{border-style:dashed;border-color:var(--line2);background:transparent;
  display:flex;align-items:center;justify-content:center;min-height:62px;padding:10px}
.c.empty h3{color:var(--tx3);font-weight:600;font-size:12.5px;text-align:center}
.c.empty .loc{text-align:center;margin-top:2px;color:var(--gold);opacity:.75}
.c.empty .rl{width:100%}

/* ── 지역·업종 그리드 ──────────────────────────────────────────── */
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
@media (min-width:640px){.region-grid{grid-template-columns:repeat(8,1fr)}}
.region{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 3px;
  border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:12.5px}
.region b{font-weight:600}
.region span{font-size:10.5px;color:var(--gold);font-variant-numeric:tabular-nums}

/* ── 광고주 모집 배너 ──────────────────────────────────────────── */
.cta-band{display:block;margin:22px 0 0;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--gold-d),var(--card));border:1px solid var(--gold-l)}
.cta-band b{display:block;font-size:14.5px;color:var(--gold);margin-bottom:3px;font-weight:800}
.cta-band span{font-size:12px;color:var(--tx2);line-height:1.5}

/* ── 요금표 ────────────────────────────────────────────────────── */
.price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:9px}
.price-card.top{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-d),var(--card) 55%)}
.price-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.price-head h3{margin:0;font-size:16px;font-weight:900;letter-spacing:-.03em}
.price-head .won{margin-left:auto;font-size:18px;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}
.price-head .won small{font-size:11px;color:var(--tx3);font-weight:600}
.price-card ul{margin:0;padding-left:15px;font-size:12.5px;color:var(--tx2);line-height:1.7}
.stock{font-size:10.5px;padding:2px 7px;border-radius:4px;font-weight:800;white-space:nowrap}
.stock.left{background:var(--ok-d);color:var(--ok)}
.stock.few{background:var(--bad-d);color:var(--urg)}
.stock.out{background:var(--card2);color:var(--tx3)}
.terms{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.term{flex:1;min-width:72px;text-align:center;padding:8px 3px;border-radius:7px;
  border:1px solid var(--line);background:var(--card2);font-size:11px;color:var(--tx3)}
.term b{display:block;font-size:12.5px;color:var(--tx);font-weight:800;
  font-variant-numeric:tabular-nums;margin-top:2px}
.term .off{color:var(--urg);font-size:10px;font-weight:800}

/* ── 통계 ──────────────────────────────────────────────────────── */
.stats{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin:10px 0}
.stats h2{margin:0 0 3px;font-size:13px;color:var(--tx2);font-weight:700}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.stat b{display:block;font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums;
  line-height:1.15;font-weight:800;letter-spacing:-.03em}
.stat span{font-size:11px;color:var(--tx3)}
.note{font-size:12px;color:var(--tx3);margin-top:8px;line-height:1.6}

/* ── 버튼 · 폼 ─────────────────────────────────────────────────── */
.btn{display:block;width:100%;padding:13px;border-radius:var(--r);border:0;margin-bottom:8px;
  background:var(--gold);color:#12141A;font-weight:800;font-size:14.5px;
  text-align:center;cursor:pointer;letter-spacing:-.02em}
.btn:disabled{opacity:.45}
.btn.ghost{background:var(--card);color:var(--tx);border:1px solid var(--line2)}
.btn.sm{padding:8px 13px;width:auto;display:inline-block;font-size:12.5px}
.btn.danger{background:var(--bad);color:#fff}
.btn.ok{background:var(--ok);color:#06150F}

label{display:block;font-size:12.5px;color:var(--tx2);margin:12px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px 11px;border-radius:7px;
  border:1px solid var(--line2);background:var(--card);color:var(--tx);
  font-size:14px;font-family:inherit}
textarea{min-height:150px;resize:vertical;line-height:1.6}
.row{display:flex;gap:8px}
.row>*{flex:1}
.checks{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.checks label{display:inline-flex;align-items:center;gap:4px;margin:0;padding:6px 10px;
  border:1px solid var(--line2);border-radius:999px;background:var(--card);
  font-size:12.5px;cursor:pointer}
.checks input{width:auto}

.alert{padding:11px 13px;border-radius:var(--r);font-size:12.5px;margin:10px 0;line-height:1.55}
.alert.bad{background:var(--bad-d);color:var(--bad);border:1px solid var(--bad)}
.alert.warn{background:var(--gold-d);color:var(--gold);border:1px solid var(--gold-l)}
.alert.ok{background:var(--ok-d);color:var(--ok);border:1px solid var(--ok)}
.alert.soft{background:var(--card2);color:var(--tx2);border:1px solid var(--line)}

h1{font-size:19px;margin:14px 0 3px;letter-spacing:-.03em;font-weight:900}
.sub{color:var(--tx3);font-size:13px;margin:0 0 10px}
.empty-msg,.empty:not(.c){text-align:center;color:var(--tx3);padding:44px 20px;font-size:13.5px}
.dim{color:var(--tx3)}
th{color:var(--tx3)}

.sticky{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 25%);
  padding:14px 0 10px;margin-top:14px}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
th{color:var(--tx3);font-weight:700;font-size:11px}
.num{font-variant-numeric:tabular-nums;text-align:right}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:11px;padding:2px 6px;border-radius:4px;background:var(--card2);
  color:var(--tx2);border:1px solid var(--line)}

footer{border-top:1px solid var(--line);margin-top:20px;padding:20px 14px 40px;
  font-size:11.5px;color:var(--tx3);line-height:1.75;background:var(--bg2)}
footer b{color:var(--tx2);font-weight:700}
footer a{color:var(--tx2)}