/* ==========================================================================
   CPIMO base.css [foundation]
   확정 디자인 community-final(커뮤니티 메인 2번 · 로고 3번 · 레벨 보석)의 토큰과 전역 틀.
   - 토큰 · 리셋 · 유틸 바 · 헤더 · 통합 검색 · 게시판 줄 · 운영 원칙 띠 · 패널 · 한 줄 목록
   - 레벨 배지 · 업체 공식 답변 배지 · 증빙 배지 · 건수 · 참고 정보 고지 · 푸터 · 모바일 하단 바 · 드로어 · 토스트
   모양 규칙: 패널은 각진 상자(0) + 네이비 윗선 2px, 입력·버튼 4px, 배지 3px
   경고색(노랑 --warn · 빨강 --err)은 임시 비공개·게시 종료·금지 표현 경고에만 쓴다.
   ========================================================================== */

:root {
  --navy-950: #0b111d;
  --navy: #121a2b;
  --navy-700: #1a2437;
  --navy-600: #243049;
  --ink-logo: #0f131a;
  --lime: #caf887;
  --lime-hi: #d8ffa9;
  --spark: #c6ef6b;
  --leaf: #285744;
  --leaf-ink: #dfedaa;

  --bg: #f1f1ea;
  --panel: #fcfcf9;
  --panel-2: #f5f5ef;
  --hover: #f2f2ea;
  --chip: #edede5;
  --field: #fdfdfb;
  --ink: #161c29;
  --ink-2: #485063;
  --ink-3: #646b7b;
  --line: #e7e7df;
  --line-2: #d8d8cd;
  --rule: #121a2b;
  --count: #2d7a1c;
  --accent-ink: #2f6a1d;
  --bar: #285744;
  --btn: #121a2b;
  --btn-hover: #243049;
  --focus: #2f6a1d;
  --err: #b42318;
  --err-bg: #fde8e4;
  --err-line: #f2b8ad;
  --warn: #7a4f00;
  --warn-bg: #fff3d1;
  --warn-line: #ecd08a;
  --info-bg: #eef1f6;
  --mark: #fde68a;
  --shadow-pop: 0 18px 40px rgba(18, 26, 43, .16);

  --r: 4px;
  --r-sm: 3px;
  --wrap: 1200px;
  --hdr-h: 70px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-en: Manrope, "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e1522;
  --panel: #151e2e;
  --panel-2: #182234;
  --hover: #1a2538;
  --chip: #1d293c;
  --field: #111a29;
  --ink: #e8ebe5;
  --ink-2: #b3bac7;
  --ink-3: #8f98a8;
  --line: #222d42;
  --line-2: #2c3953;
  --rule: #3b4b68;
  --count: #a6dc6b;
  --accent-ink: #bdea85;
  --bar: #8cc95a;
  --btn: #2b3a57;
  --btn-hover: #354767;
  --focus: #caf887;
  --err: #ff9b8e;
  --err-bg: #3a1e1e;
  --err-line: #6b302a;
  --warn: #f3c969;
  --warn-bg: #352a12;
  --warn-line: #5f4a1c;
  --info-bg: #1a2436;
  --mark: #6b5a1a;
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, fieldset, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
code, kbd, .nowrap { white-space: nowrap; }
code { font-family: var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
mark { background: var(--mark); color: inherit; border-radius: 2px; }
:root[data-theme="dark"] mark { color: var(--ink); } /* 어두운 노랑 바탕 위 흐린 글씨 대비 보정 */
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
/* 문장 줄바꿈: 본문은 짧은 꼬리 줄을 피하고(pretty), 제목은 줄 길이를 맞춘다(balance) */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
/* 내용이 짧은 화면에서도 푸터가 화면 아래에 붙게 한다 */
body.cp--default { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.cp--default > #main { flex: 1 0 auto; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.util :focus-visible, .hdr :focus-visible, .boards :focus-visible, .principles :focus-visible,
.ftr :focus-visible, .mbar :focus-visible, .drawer__hd :focus-visible { outline-color: var(--lime); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--lime); color: var(--navy); font-weight: 700; border-radius: var(--r); }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

/* 로그인 상태별 표시(서버가 html[data-state] 를 정한다) */
[data-state="guest"] .member-only { display: none !important; }
[data-state="member"] .guest-only { display: none !important; }
@media (min-width: 769px) { .m-only { display: none !important; } }
@media (max-width: 768px) { .d-only { display: none !important; } }

/* ---------- utility bar ---------- */
.util { background: var(--navy-950); color: #a4adbc; font-size: 12.5px; }
.util__in { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.util__nav { display: flex; align-items: center; gap: 18px; }
.util a, .util__link { padding: 4px 0; color: inherit; font-size: inherit; transition: color .15s; }
.util a:hover, .util__link:hover, .util a[aria-current="page"] { color: #fff; }
.util__form { display: contents; }
.util__theme { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: 2px; padding: 0 8px; border: 1px solid #ffffff2e; border-radius: var(--r); color: #dde3ec; font-size: 12px; font-weight: 700; white-space: nowrap; transition: border-color .15s, color .15s; }
.util__theme .i { width: 14px; height: 14px; }
.util__theme:hover, .util__theme[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--navy); border-bottom: 1px solid #ffffff14; }
.hdr__in { display: flex; align-items: center; gap: 18px; height: var(--hdr-h); }

/* 로고 3안: Pretendard 900 흰 글자 + 연두 별표 */
.logo { display: inline-flex; align-items: baseline; flex: none; color: #fff; font: 900 30px/1 var(--font); letter-spacing: -.05em; white-space: nowrap; }
.logo__spark { color: var(--spark); }
.logo--sm { font-size: 24px; }
.hdr__tag { align-self: center; flex: none; padding-left: 14px; border-left: 1px solid #ffffff2e; color: #c9d0db; font-size: 13.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; }

.gsearch { position: relative; flex: 0 1 540px; margin-inline: auto; }
.gsearch__field { display: flex; align-items: center; height: 44px; background: #fcfcf9; border-radius: var(--r); box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s; }
.gsearch__field:focus-within { box-shadow: 0 0 0 2px var(--lime); }
.gsearch__field > .i { margin-left: 14px; color: #646b7b; }
.gsearch input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; color: #161c29; font-size: 15px; outline: none; }
.gsearch input::placeholder { color: #6b7282; }
.gsearch input::-webkit-search-cancel-button { cursor: pointer; }
.gsearch__btn { display: grid; place-items: center; width: 46px; height: 44px; border-radius: 0 var(--r) var(--r) 0; background: var(--lime); color: var(--navy); transition: background .15s; }
.gsearch__btn:hover { background: var(--lime-hi); }
.gsearch__btn .i { stroke-width: 2.2; }

/* 통합 검색 팝업(내용은 content 모듈이 채운다) */
.gpop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 35; max-height: min(70vh, 520px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-top: 2px solid var(--rule); box-shadow: var(--shadow-pop); }
.gpop__k { padding: 12px 14px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.gpop__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.gpop__chips button, .gpop__chips a { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); background: var(--panel); }
.gpop__chips button:hover, .gpop__chips a:hover { border-color: var(--ink-3); color: var(--ink); }
.gpop__co { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 11px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; }
.gpop__co:hover { background: var(--hover); }
.gpop__co .i { color: var(--accent-ink); }
.gpop__co b { font-size: 14.5px; }
.gpop__co small { display: block; font-size: 12.5px; color: var(--ink-3); }
.gpop__co em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.gpop__list a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; }
.gpop__list a:hover, .gpop__list a[aria-selected="true"] { background: var(--hover); }
.gpop__list .tag { flex: none; min-width: 34px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.gpop__list span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gpop__list mark { background: none; color: var(--accent-ink); font-weight: 700; }
.gpop__all { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gpop__all:hover { color: var(--ink); background: var(--hover); }

.hdr__act { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); color: #e8ecf2; transition: background .15s; }
.icon-btn:hover { background: #ffffff14; }
.icon-btn .i { width: 22px; height: 22px; }
.icon-btn__count { position: absolute; top: 5px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--lime); color: var(--navy); font: 800 11px/16px var(--font-en); text-align: center; }
.hdr__login { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r); color: #e8ecf2; font-size: 14.5px; font-weight: 600; transition: background .15s; }
.hdr__login:hover { background: #ffffff14; }
.hdr__me { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; height: 40px; padding: 0 10px; border-radius: var(--r); color: #f3f4ef; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.hdr__me:hover { background: #ffffff14; }
.hdr__nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn-report { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: 4px; padding: 0 16px; border-radius: var(--r); background: var(--lime); color: var(--navy); font-size: 14.5px; font-weight: 800; white-space: nowrap; transition: background .15s, transform .1s; }
.btn-report:hover { background: var(--lime-hi); }
.btn-report:active { transform: translateY(1px); }
.btn-report .i { width: 17px; height: 17px; stroke-width: 2.1; }

/* ---------- board strip ---------- */
.boards { background: var(--navy); border-bottom: 1px solid var(--navy-950); }
.boards__in { display: flex; justify-content: space-between; align-items: stretch; height: 50px; }
.boards__list, .boards__aux { display: flex; align-items: stretch; }
.boards__aux { position: relative; padding-left: 8px; }
.boards__aux::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: #ffffff26; }
.boards a { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 13px; color: #dde3ec; font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .15s; }
.boards__list li:first-child a { padding-left: 0; }
.boards a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.boards__list li:first-child a::after { left: 0; }
.boards a:hover, .boards a[aria-current="page"] { color: #fff; }
.boards a:hover::after, .boards a:focus-visible::after, .boards a[aria-current="page"]::after { transform: scaleX(1); }
/* 현재 위치: 흰 굵은 글씨 + 옅은 바탕 + 라임 밑줄. '피해 사례'의 상시 연두 글씨와 구분된다 */
.boards a[aria-current="page"] { font-weight: 800; background: linear-gradient(#ffffff00, #ffffff14); }
.boards a.is-report { color: var(--lime); }
.boards a .i { width: 15px; height: 15px; color: #a4adbc; }
.boards a small { margin-left: 1px; padding: 2px 5px; border-radius: var(--r-sm); background: #2b3955; color: #c9d0db; font: 700 11px/1.1 var(--font-en); letter-spacing: 0; }

/* ---------- 운영 원칙 배지 띠 (공통 2번) ---------- */
.principles { background: var(--panel); border-bottom: 1px solid var(--line-2); }
.principles__in { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.principles__k { flex: none; color: var(--ink-3); font-size: 12.5px; font-weight: 800; }
.principles__list { display: flex; flex-wrap: wrap; gap: 6px; }
.pbadge { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink-2); font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color .15s, color .15s; }
.pbadge .i { width: 15px; height: 15px; color: var(--accent-ink); }
.pbadge:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---------- panel ---------- */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line-2); border-top: 2px solid var(--rule); }
.panel__hd { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.panel__hd h2, .panel__hd h3, .panel__title { display: flex; align-items: center; flex: 0 1 auto; gap: 7px; min-width: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.panel__hd h2 .i, .panel__hd h3 .i, .panel__title .i { width: 19px; height: 19px; color: var(--accent-ink); }
.panel__sub { flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.panel__more { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; font-size: 13px; color: var(--ink-3); white-space: nowrap; transition: color .15s; }
.panel__more .i { width: 15px; height: 15px; }
.panel__more:hover { color: var(--ink); }
.panel__body { padding: 14px 16px; }
.panel__foot { padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }

/* ---------- 한 줄 목록 (.rows/.row) ---------- */
.rows { padding: 4px 0 6px; }
.row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px; }
.rows--lined .row + .row { border-top: 1px solid var(--line); }
.row:hover { background: var(--hover); }
.row__k { flex: none; padding: 3px 7px; border-radius: var(--r-sm); background: var(--chip); color: var(--ink-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.row__board { flex: none; width: 88px; overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.row .ttl { flex: 1; }
.row__meta { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.row__meta > * { flex: none; }
.row time, .row__time { flex: none; color: var(--ink-3); font: 600 12px/1 var(--font-en); text-align: right; }
.row .rank { flex: none; width: 24px; text-align: center; color: var(--ink-3); font: 700 14px/1 var(--font-en); }
.row .rank.is-top { display: grid; place-items: center; height: 24px; border-radius: var(--r-sm); background: var(--navy); color: var(--lime); font-size: 13px; font-weight: 800; }
:root[data-theme="dark"] .row .rank.is-top { background: var(--lime); color: var(--navy); }

.ttl { display: flex; align-items: center; min-width: 0; color: var(--ink); font-size: 15px; }
.ttl__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
a.ttl:hover .ttl__t, .ttl a:hover .ttl__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row .ttl::after { content: ""; position: absolute; inset: 0; }
.row .ttl:focus-visible { outline: none; }
.row:has(.ttl:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.row .lv, .row .tip, .row a:not(.ttl), .row button { position: relative; z-index: 1; }
.ttl > .i { width: 15px; height: 15px; margin-right: 6px; color: var(--ink-3); }
.cmt { flex: none; margin-left: 6px; color: var(--count); font: 700 13px/1 var(--font-en); }
.like { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--ink-3); font: 600 12.5px/1 var(--font-en); white-space: nowrap; }
.like .i { width: 14px; height: 14px; }
.new { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: 5px; border-radius: 2px; background: var(--navy); color: var(--lime); font: 800 11px/1 var(--font-en); }
:root[data-theme="dark"] .new { background: var(--lime); color: var(--navy); }
.att { flex: none; width: 15px; height: 15px; margin-left: 4px; color: var(--ink-3); }
.thumb { flex: none; width: 40px; height: 30px; border-radius: var(--r-sm); object-fit: cover; background: var(--chip); }
/* 업체 공식 답변이 달린 줄: 왼쪽 진초록 띠 */
.is-vendor { box-shadow: inset 3px 0 0 var(--leaf); }
:root[data-theme="dark"] .is-vendor { box-shadow: inset 3px 0 0 #6fae4f; }

/* ---------- 배지 ---------- */
/* 업체 공식 답변: 진초록 바탕 + 연두 글씨 + 체크 아이콘(경고색 금지) */
.vbadge { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 21px; margin-right: 7px; padding: 0 7px 0 5px; border-radius: var(--r-sm); background: var(--leaf); color: var(--leaf-ink); font-size: 12px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.vbadge .i { width: 14px; height: 14px; color: var(--lime); stroke-width: 2; }
/* 증빙 확인 */
.ebadge { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; height: 22px; padding: 0 7px 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ebadge .i { width: 14px; height: 14px; color: var(--accent-ink); }
.ebadge__types { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-weight: 500; }

/* 레벨 배지(보석 아이콘 + Lv.N) — 배지 바탕은 보석 색을 가리지 않게 무채색에 가깝게 */
.lv { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 19px; padding: 0 5px 0 4px; border-radius: var(--r-sm); font: 800 11px/1 var(--font-en); letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.lv__gem { width: 16px; height: 16px; flex: none; }
.lv--md { height: 24px; padding: 0 7px 0 5px; font-size: 12.5px; gap: 3px; }
.lv--md .lv__gem { width: 20px; height: 20px; }
.lv-1, .lv-2 { background: var(--chip); color: var(--ink-2); }
.lv-3, .lv-4 { background: #e6e9f6; color: #2e3a6b; }
.lv-5 { background: var(--navy); color: #e4e2ff; }
:root[data-theme="dark"] .lv-3, :root[data-theme="dark"] .lv-4 { background: #242d4d; color: #cfd6ff; }
:root[data-theme="dark"] .lv-5 { background: #0b111d; box-shadow: inset 0 0 0 1px #a99cff66; }
.lv-op { gap: 3px; padding: 0 6px 0 4px; background: #3a4a66; color: #fff; font-family: var(--font); font-size: 11.5px; }
.lv-op .i { width: 13px; height: 13px; color: var(--lime); stroke-width: 2.1; }
.hdr .lv-1, .hdr .lv-2 { background: #ffffff1f; color: #e8ecf2; }
a.lv { position: relative; z-index: 1; transition: filter .15s; }
a.lv:hover { filter: brightness(.94); }

/* 닉네임 + 레벨 */
.nick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; vertical-align: middle; }
.nick__name { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
a.nick__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.nick--gone .nick__name { color: var(--ink-3); font-weight: 500; }

/* 철회 건수 안내(눌러도·키보드로도 열림) */
.tip { position: relative; padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: none; color: inherit; font: inherit; cursor: help; }
.tip:hover::after, .tip:focus-visible::after, .tip.is-open::after {
  content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: 260px; padding: 8px 10px;
  border-radius: var(--r); background: var(--navy-950); color: #eef1f5; font: 500 12.5px/1.5 var(--font); letter-spacing: -.01em; white-space: normal; text-align: left; box-shadow: 0 8px 20px rgba(11, 17, 29, .25);
}
.tip--left:hover::after, .tip--left:focus-visible::after, .tip--left.is-open::after { right: auto; left: 0; }

/* 업체 건수 */
.cnt { color: var(--ink-2); white-space: nowrap; }
.cnt__n { color: var(--ink); font: 800 1em/1 var(--font-en); font-variant-numeric: tabular-nums; }
.cnt__wd { color: var(--ink-2); }
.cnt-block { display: grid; gap: 6px; }
.cnt-block__num { font-size: 15px; }
.cnt-block__num .cnt__n { font-size: 22px; }
.cnt-block__note, .cnt-note { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.cnt-block__note .i, .cnt-note .i { width: 15px; height: 15px; margin-top: 1px; }

/* ---------- 참고 정보 고지 (공통 3번) ---------- */
.legal { display: flex; gap: 10px; margin-top: 4px; margin-bottom: 28px; padding: 14px 18px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.legal > .i { margin-top: 3px; color: var(--ink-3); }
.legal strong { display: block; margin-bottom: 1px; color: var(--ink); font-size: 13.5px; }
.legal p { max-width: 118ch; text-wrap: pretty; }

/* ---------- footer ---------- */
.ftr { padding: 28px 0 34px; background: var(--navy-950); color: #a4adbc; font-size: 13px; }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; }
.ftr__brand p { max-width: 520px; margin-top: 10px; line-height: 1.6; text-wrap: balance; }
.ftr__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
.ftr__nav a { color: #cfd6e0; transition: color .15s; }
.ftr__nav a:hover { color: #fff; }
.ftr__nav b { color: #fff; }
.ftr__nav .ftr__strong { color: var(--lime); font-weight: 700; }
.ftr__notes { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid #ffffff14; font-size: 12.5px; line-height: 1.65; color: #8f99ab; }
.ftr__notes p { max-width: 110ch; text-wrap: pretty; }
.ftr__takedown { display: flex; align-items: flex-start; gap: 6px; color: #cfd6e0; }
.ftr__takedown .i { width: 15px; height: 15px; margin-top: 2px; color: var(--lime); }
.ftr__copy { grid-column: 1 / -1; color: #8a94a6; font: 600 12px var(--font-en); }

/* ---------- 모바일 하단 고정 바 (공통 6번) ---------- */
.mbar { display: none; }

/* ---------- drawer (모바일 메뉴) ---------- */
.drawer { width: min(360px, 88vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0 0 24px; border: 0; background: var(--panel); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.drawer::backdrop { background: rgba(11, 17, 29, .55); }
.drawer[open] { animation: drawerIn .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes drawerIn { from { transform: translateX(28px); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer__hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px; background: var(--navy); }
.drawer__search { display: flex; align-items: center; gap: 8px; height: 46px; margin: 14px 16px 10px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--field); }
.drawer__search .i { color: var(--ink-3); }
.drawer__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16px; outline: none; }
.drawer__search input::placeholder { color: #6b7282; }
:root[data-theme="dark"] .drawer__search input::placeholder { color: #8f98a8; }
.drawer__me { display: grid; gap: 8px; padding: 0 16px 6px; }
.drawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer__row form { display: contents; }
.drawer__who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; font-size: 14px; color: var(--ink-3); }
.drawer__who b { color: var(--ink); font-size: 16px; }
.drawer__k { padding: 16px 16px 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 800; }
.drawer__boards, .drawer__links { border-top: 1px solid var(--line); }
.drawer__boards a, .drawer__links a { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; }
.drawer__boards a:hover, .drawer__links a:hover { background: var(--hover); }
.drawer__boards .i { width: 16px; height: 16px; color: var(--ink-3); }
.drawer__boards small { margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.drawer__foot { padding: 16px 16px 0; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--r); background: var(--navy-950); color: #eef1f5; font-size: 14px; line-height: 1.5; box-shadow: 0 12px 32px rgba(11, 17, 29, .3); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast b { color: var(--lime); }
.toast--error { background: #4a1712; }

/* ==========================================================================
   반응형 (1440 · 1024 · 768 · 390 · 360 가로 넘침 없음)
   ========================================================================== */
@media (max-width: 1180px) {
  .boards a { padding: 0 10px; font-size: 14.5px; }
  .boards a::after { left: 10px; right: 10px; }
  .hdr__in { gap: 14px; }
}

@media (max-width: 1023px) {
  .hdr__tag { padding-left: 12px; font-size: 13px; }
  .boards__in { overflow-x: auto; scrollbar-width: none; }
  .boards__in::-webkit-scrollbar { display: none; }
  .principles__in { overflow-x: auto; scrollbar-width: none; }
  .principles__in::-webkit-scrollbar { display: none; }
  .principles__list { flex-wrap: nowrap; }
}

/* 태블릿 폭 로그인 후에는 검색창·닉네임 자리가 모자라 로고 옆 문구를 접는다 */
@media (min-width: 769px) and (max-width: 1023px) {
  [data-state="member"] .hdr__tag { display: none; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .hdr__tag { display: none; }
}

@media (max-width: 768px) {
  :root { --hdr-h: 56px; }
  html { scroll-padding-top: 64px; }
  .wrap { width: calc(100% - 32px); }
  .util { display: none; }
  .hdr__in { gap: 4px; }
  .logo { font-size: 26px; padding-block: 9px; }
  .hdr__tag { margin-left: 6px; padding-left: 10px; font-size: 12.5px; }
  .gsearch { display: none; }
  .hdr__act { gap: 0; margin-left: auto; margin-right: -8px; }
  .icon-btn { width: 44px; height: 44px; }

  .boards__in { width: 100%; height: 46px; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .boards a { padding: 0 10px; font-size: 14.5px; }
  .boards__aux { padding-right: 24px; }
  .principles__in { width: 100%; padding: 0 16px; gap: 10px; }

  .panel { border-right: 0; border-left: 0; }
  .panel__more { min-height: 44px; padding-inline: 4px; margin-right: -4px; }
  /* 제목은 그대로 두고(너무 길 때만 줄바꿈) 보조 문구는 제목 옆 한 줄, 자리가 모자라면 말줄임 */
  .panel__hd h2, .panel__hd h3, .panel__title { white-space: normal; line-height: 1.35; padding-block: 6px; }
  .row { flex-wrap: wrap; row-gap: 4px; padding: 9px 16px; }
  .row .ttl { flex: 1 1 100%; order: -1; }
  .row__board { width: auto; }

  .legal { width: 100%; margin: 0; padding: 14px 16px; border-right: 0; border-left: 0; }
  .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .ftr__nav { justify-content: flex-start; }
  .has-mbar .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--navy); border-top: 1px solid #ffffff1a; }
  .mbar--1 { grid-template-columns: 1fr; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; border-radius: var(--r); font-size: 15.5px; font-weight: 800; }
  .mbar__line { border: 1px solid #ffffff40; color: #fff; }
  .mbar__primary { background: var(--lime); color: var(--navy); }
  .has-mbar .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  a.lv::before { content: ""; position: absolute; inset: -12px -4px; }
}

@media (max-width: 380px) {
  .hdr__tag { margin-left: 4px; padding-left: 8px; font-size: 11.5px; letter-spacing: -.02em; }
  [data-state="member"] .hdr__tag { display: none; }
}
@media (max-width: 340px) {
  .hdr__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 모바일 설명·캡션 글자는 14px 아래로 내려가지 않게 한다(모듈 CSS 보다 우선하도록 html body 를 앞에 붙임) */
@media (max-width: 768px) {
  html body :is(.ftr__biz, .ftr__copy, .field__hint, .field__opt, .panel__foot, .panel__sub, .agree__note, .agree__desc, .lookup__hint, .lookup__asof,
    .lb-search__hint, .oneline__msg, .cases__note, .sx-basis__nt, .bundle__desc, .case-card__co, .case-card__nick, .row__k, .rk-heading__desc, .rk-mine__note,
    .rk-period, .rk-board__foot, .ct-nrow__s, .ct-k, .ct-what__n, p.small, .cm-muted, .lb-row__d, .lb-dn, .lb-row__cat) { font-size: 14px; }
}