/* 약속알바 — 밝은 테마.
   처음엔 "밤 업종이니 다크"로 갔다가 뒤집었다. 이 화면을 실제로 보는 사람은
   20~30대 여성 구직자다. 여우알바·레이디알바·퀸알바가 전부 흰 바탕인 건
   촌스러워서가 아니라 독자가 그걸 편해하기 때문이다. ("눈까리 아프다" — 실제 항의)
   원칙 셋:
   1) 바탕은 따뜻한 흰색, 글자는 잉크색. 광택·그림자·형광은 최소.
   2) 포인트는 로즈(브랜드), 신뢰 지표(이행률)는 그린, 돈(구좌·가격)만 딥골드.
   3) 카드에 이미지 배경을 깔지 않는다 — 글자가 그림 위에 얹히는 순간 눈이 아프다. */

:root{
  --bg:#F7F5F1; --bg2:#FFFFFF;
  --card:#FFFFFF; --card2:#F3F0EA; --line:#E8E3DA; --line2:#D9D2C6;
  --tx:#292330; --tx2:#5C5565; --tx3:#877F90; --tx4:#B6AFA8;
  --rose:#E14E68; --rose-b:#F4728A; --rose-d:#FDEEF1;
  --gold:#A87B1F; --gold-b:#C79A3D; --gold-d:#FBF4E3; --gold-l:#EBDCB8;
  --ok:#0E8F63; --ok-d:#E6F5EE;
  --bad:#CE4A42; --bad-d:#FBECEA;
  --urg:#DE4038;
  --r:10px;
}
:root{color-scheme:light}

/* ── 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(--rose)}

/* 메인 메뉴 — 맨 텍스트로 두면 스타일 안 먹은 링크처럼 보인다.
   현재 페이지는 금색 밑줄로 표시한다. */
.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(--rose);transform:scaleX(0);transition:transform .15s;
  border-radius:2px;transform-origin:center}
.gnb a.on{color:var(--rose)}
.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:#FFF;
  box-shadow:0 1px 10px -2px rgba(212,162,76,.5)}
.hbtn.gold:hover{filter:brightness(1.07)}

/* 모바일 헤더 = 2줄. 한 줄에 욱여넣으면 탭이 잘리고 로그인이 사라진다 —
   실제로 "탭 다 짤린다"는 항의를 받았다. 1줄: 로고+버튼, 2줄: 메뉴 전체(가로 스크롤). */
@media (max-width:999px){
  .hd{flex-wrap:wrap;gap:0 10px;padding:9px 12px 0}
  .logo{order:1}
  .hd-r{order:2;margin-left:auto}
  .gnb{order:3;flex-basis:100%;font-size:13.5px;gap:2px;margin:2px -12px 0;
    padding:0 12px 4px;
    /* 오른쪽 끝을 살짝 지워서 "더 있다, 밀어라"를 눈으로 알린다 */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .gnb a{padding:8px 9px}
}
@media (max-width:760px){
  /* 로그인을 숨겼더니 광고주가 폰에서 로그인 입구를 못 찾는다 — 축소만 하고 살린다 */
  .hbtn{height:30px;padding:0 10px;font-size:12px}
}
@media (max-width:520px){
  .logo{font-size:17px}
  .gnb{font-size:13px}
  .gnb a{padding:7px 6px}
}

/* ── 푸터 ──────────────────────────────────────────────────────── */
.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;flex-wrap:wrap;padding-bottom:8px}
@media (max-width:999px){
  .quick,.filters,.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .quick::-webkit-scrollbar,.filters::-webkit-scrollbar,.chips::-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(--rose-d);border-color:var(--rose);color:var(--rose);font-weight:800}
.chip.near{border-color:var(--rose);color:var(--rose);font-weight:800;background:var(--rose-d)}
.near-link{display:block;margin:6px 0 2px;font-size:12.5px;font-weight:800;color:var(--rose)}
.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)}}

/* ── 헤더 검색 (여우식 상시 검색) ───────────────────────────────── */
.hsearch{display:none;align-items:center;gap:5px;flex:none}
@media (min-width:1280px){.hsearch{display:flex}}
.hsearch select{padding:7px 6px;border:1px solid var(--line2);border-radius:7px;
  background:var(--card);color:var(--tx);font-size:12.5px;font-family:inherit}
.hsearch input{width:150px;padding:7px 9px;border:1px solid var(--line2);
  border-radius:7px;background:var(--card);color:var(--tx);font-size:13px;font-family:inherit}
.hsearch button{padding:7px 11px;border:0;border-radius:7px;background:var(--rose);
  color:#FFF;font-weight:800;font-size:12.5px;cursor:pointer}

/* ── 지역 바로가기 스트립 (홈, GNB 아래 — 여우식) ───────────────── */
.region-strip{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center;
  padding:9px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:10px;font-size:12.5px}
.region-strip b{color:var(--tx3);font-size:11.5px;font-weight:800;margin-right:2px}
.region-strip a{color:var(--tx2);font-weight:600}
.region-strip a em{font-style:normal;color:var(--rose);font-size:11px;font-weight:800}
.region-strip a:hover{color:var(--rose)}

/* ── 회원가입 두 갈래 카드 ──────────────────────────────────────── */
.join-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
@media (min-width:700px){.join-grid{grid-template-columns:1fr 1fr}}
.join-card{background:var(--card);border:1px solid var(--line2);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.jc-head{padding:13px 16px;font-weight:900;font-size:15px;color:#FFF}
.jc-head.personal{background:var(--rose)}
.jc-head.biz{background:linear-gradient(135deg,var(--gold-b),var(--gold))}
.join-card ul{margin:0;padding:14px 16px 4px 32px;line-height:2;color:var(--tx2);flex:1}
.join-card .btn{margin:12px 14px 14px;width:auto}
label{display:block;margin:10px 0 5px;font-weight:700;font-size:13.5px}
form.card input{width:100%;padding:11px;border-radius:8px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--tx);font-size:15px;font-family:inherit}

/* ── 번호 페이지네이션 (게시판식) ───────────────────────────────── */
.pager{display:flex;gap:5px;justify-content:center;align-items:center;
  margin:18px 0 6px;flex-wrap:wrap}
.pager a,.pager b{min-width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 9px;border-radius:8px;font-size:13.5px;
  font-weight:700;border:1px solid var(--line2);background:var(--card);color:var(--tx2)}
.pager a:hover{border-color:var(--rose);color:var(--rose)}
.pager b{background:var(--rose);border-color:var(--rose);color:#FFF}

/* 오픈가 표기 */
.won s{color:var(--tx4);font-weight:600;font-size:.72em;margin-right:5px}
.open-tag{font-style:normal;font-size:10px;font-weight:900;color:var(--rose);
  border:1px solid var(--rose);border-radius:4px;padding:1px 5px;margin-left:5px;
  vertical-align:2px;background:var(--rose-d)}

/* ── 업종 탭 (지역 페이지) ───────────────────────────────────────
   업종은 필터가 아니라 갈림길이다. 룸을 찾는 사람에게 마사지 공고는 소음이라
   칩 무더기보다 한 단계 큰 탭으로 세운다. 공고 있는 업종만, 개수와 함께. */
.kind-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.ktab{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;
  border:1px solid var(--line2);border-radius:9px;background:var(--card);
  font-size:13.5px;font-weight:700;color:var(--tx2)}
.ktab em{font-style:normal;font-size:11px;font-weight:800;color:var(--tx4)}
.ktab.on{background:var(--rose);border-color:var(--rose);color:#FFF}
.ktab.on em{color:rgba(255,255,255,.85)}
.ktab:not(.on):hover{border-color:var(--rose-b);color:var(--rose)}
@media (max-width:999px){
  .kind-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .kind-tabs::-webkit-scrollbar{display:none}
  .ktab{flex:none}
}

/* ── 약속이행률 링 (서명 요소) ───────────────────────────────────
   우리만 가진 데이터를 시각적 주인공으로 만든다.
   경쟁사는 광고주 의존 구조라 이 지표를 만들 수 없다 —
   그래서 이 링이 "여긴 다른 사이트"라는 신호가 된다. */
.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:var(--line);stroke-width:2.6}
.ring .rfg{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round}
.ring .rfg.low{stroke:var(--bad)}
.ring b{position:relative;font-size:calc(var(--s,44px) * .30);font-weight:900;
  color:var(--tx);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.ring b i{font-style:normal;font-size:.62em;opacity:.75;margin-left:.5px}
/* 리스트 카드에서는 밝은 배경 위에 놓이므로 대비를 바꾼다 */
.c.row .ring .rbg{stroke:var(--line2)}
.c.row .ring .rfg{stroke:var(--ok)}
.ring.none{opacity:.3}
.ring.none b{font-size:14px;color:var(--tx3)}

/* ── 구좌 타일 (유료 공고) ───────────────────────────────────────
   이미지 배경을 걷어냈다. 구직자는 그림이 아니라 조건을 읽는다.
   "돈 낸 티"는 배경이 아니라 크기·테두리·리본으로 낸다. */
.c.bn{position:relative;display:block;background:var(--card);
  border:1px solid var(--line2);overflow:hidden;border-radius:var(--r)}
.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-b);transform:translateY(-1px);
  box-shadow:0 6px 18px -10px rgba(60,45,20,.25)}
.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:11px 13px}
.c.bn .tp{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.c.bn .bt{display:block}
.c.bn h3{color:var(--tx);font-weight:700;letter-spacing:-.02em;line-height:1.35;
  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}
.c.bn .mt{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;min-width:0}
.c.bn .loc{color:var(--tx3);font-size:11.5px;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:var(--gold);font-weight:900;font-variant-numeric:tabular-nums;
  letter-spacing:-.045em}
.c.bn .py b .w{font-size:.62em;font-weight:800;margin-right:1px;vertical-align:.06em}
.c.bn.xl .py b{font-size:24px}
.c.bn.md .py b{font-size:20px}
.c.bn.sm .py b{font-size:16px}
.c.bn .py b.nego{font-size:13px;color:var(--tx2);font-weight:700;letter-spacing:-.02em}
.c.bn .py em{font-style:normal;font-size:10.5px;color:var(--tx3);font-weight:700}

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

/* VVIP — 금테 + 연한 골드 바탕. 광택 애니메이션은 뺐다(피로 유발). */
.c.bn.vvip{border:2px solid var(--gold-b);
  background:linear-gradient(180deg,var(--gold-d),var(--card) 55%)}

/* 빈 구좌 — 팔 자리라는 걸 알리되 초라해 보이지 않게 */
.c.bn.empty{border:1px dashed var(--line2);background:
  repeating-linear-gradient(135deg,transparent,transparent 9px,
    rgba(168,123,31,.05) 9px,rgba(168,123,31,.05) 18px),var(--card)}
.c.bn.empty:hover{border-color:var(--gold-b)}
.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(--rose);color:#FFF;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:#FFF}

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)}

/* 노출 약속제 (광고주 대시보드) */
.promise-box{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:13px;display:flex;flex-direction:column;gap:5px}
.promise-box > b{color:var(--accent);font-size:12px;letter-spacing:.02em}
.promise-box .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.promise-box .bar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.promise-box .note{font-size:12px;color:var(--tx3)}
.promise-box .note.ok{color:var(--ok)}
details.daily summary{cursor:pointer;font-size:12.5px;color:var(--tx2)}
details.daily table{margin-top:6px}

/* GNB 6개가 375px 에서 잘리지 않게 — 스크롤 페이드 대신 한 줄에 다 들어가야 한다("탭 다 짤리잖아") */
@media (max-width:430px){
  .gnb{font-size:12px;gap:0;justify-content:space-between;letter-spacing:-.01em}
  .gnb a{padding:8px 4px}
  .gnb a::after{left:4px;right:4px}
}


/* 오픈 기념 전역 띠 — 헤더 바로 아래 한 줄. 눈에 띄되 콘텐츠를 밀지 않는다. */
.promo-strip{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:8px 14px;background:linear-gradient(90deg,var(--gold-d),var(--card) 60%,var(--gold-d));
  border-bottom:1px solid var(--gold-l);color:var(--tx);font-size:13px;text-decoration:none}
.promo-strip b{color:var(--gold);font-weight:800}
.promo-strip span{color:var(--tx2)}
@media (max-width:520px){.promo-strip{font-size:12px;padding:7px 10px}.promo-strip span{display:block;width:100%;text-align:center}}


/* 가이드 목차 — 섹션 8개 이상인 헤드 페이지에만 붙는다 */
.toc{padding:14px 16px}
.toc .linkrow a{font-size:13px}
.toc + .card{scroll-margin-top:12px}
[id^="s"]{scroll-margin-top:12px}


/* 공고 0건 지역의 상권 이름 — 링크가 아닌 텍스트(크롤 예산 보호). 모양은 링크칩과 같게 */
.linkrow .chip-flat{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--tx2);background:var(--card)}