/* 사이트찾기 (/SiteFind) — Figma 11.사이트찾기 값 1:1. (프레임 rotate(-0.27deg)는 피그마 아티팩트라 미반영)
   구성: 타이틀 → 명예의 전당(보증업체 카드) → 검색바 → 필터(아코디언) + 결과. 포인트 블루 #1A56DB. px→rem(÷16).

   2026-08-12 시안 개정 — 아래 3가지는 "고쳐진 것처럼 보이지만 시안이 그렇다". 되돌리지 말 것:
     1) 평점이 **양쪽 카드에서 모두 빠졌다**(보증카드 평점행·결과카드 별점 수치). 대신 카드마다 즐겨찾기 별이 붙는다
        — 보증카드는 헤더 오른쪽(22x20), 결과카드는 맨 왼쪽(34x32). 기본색 #E8EBF0(거의 안 보이는 게 정상).
     2) 아코디언 화살표가 **접힘=∧ / 펼침=∨** 로 일반 관례와 반대다(시안 9개 섹션 전부 일관).
     3) 기업 분류 칩이 그룹/중소기업/중견기업/대기업이고 **기본 선택이 없다**(예전 '전체' 칩 활성 아님).
     4) 결과 0건 화면(11.사이트찾기 내용X)은 **흰 카드가 아니다** — 테두리·배경 없이 페이지 배경 위에 아이콘+문구만 놓이고,
        필터 패널 높이만큼 늘어나 세로 가운데 정렬된다. 이때 정렬(평점순) 버튼도 사라진다. 명예의 전당·검색바·필터는 그대로. */

.sf-main { display: flex; flex-direction: column; gap: 1.4375rem; }   /* 23px */

/* ⚠ 이 화면은 보이기/숨기기를 전부 **`hidden` 속성**으로 다룬다(브랜드 탭 패널·검색으로 걸러진 칩·선택개수 배지).
   그런데 아래 규칙들이 `display` 를 직접 지정해서 **브라우저 기본 `[hidden]{display:none}` 을 이겨 버린다**
   — 속성은 정상적으로 붙는데 화면에는 그대로 남아, 탭을 눌러도 안 바뀌고 검색도 안 먹는 것처럼 보였다.
   그래서 여기서 한 번에 못 박는다. `!important` 는 `.sf-brand-pane{display:flex}` 같은 뒤쪽 규칙을 눌러야 해서 필요하다.
   ⚠ 범위를 사이트찾기(.sf-main 목록 · .sfd-main 상세)로 한정한다 — 전역에 걸면 `hidden` 을 단 채
     보이도록 만들어진 다른 화면이 깨질 수 있다. */
.sf-main [hidden], .sfd-main [hidden] { display: none !important; }

/* 검색 + 필터/결과 묶음 — 시안상 이 안쪽만 간격이 좁다(검색↔필터 11.1px, 필터헤더↔본문 5px).
   sf-main 간격(23px)을 그대로 두면 검색바 아래가 벌어져 필터가 따로 노는 화면이 된다. */
.sf-search-block { display: flex; flex-direction: column; gap: 0.69375rem; }
.sf-filter-wrap { display: flex; flex-direction: column; gap: 0.3125rem; }

/* 페이지 타이틀 — 파란 bar + 사이트찾기 22/700 */
.sf-title-row { display: flex; align-items: center; gap: 0.5rem; }
.sf-title-bar { width: 0.25rem; height: 1.25rem; background: #1A56DB; border-radius: 999px; }
.sf-title { font-size: 1.375rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.025em; color: #1F2430; margin: 0; }

/* ===== 명예의 전당 ===== */
.sf-hall { display: flex; flex-direction: column; gap: 0.625rem; }
.sf-hall-head { display: flex; align-items: center; gap: 0.375rem; padding: 0 0.25rem; }
.sf-hall-ic { width: 1.6875rem; height: 1.5rem; flex-shrink: 0; color: #FFA64D; }   /* 왕관 27x24 */
.sf-hall-title { font-size: 0.875rem; font-weight: 800; line-height: 1.1875rem; color: #1F2430; }
.sf-hall-sub { font-size: 0.71875rem; font-weight: 700; line-height: 1.0625rem; color: #98A0AE; }

.sf-hall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65625rem; }

/* 보증업체 카드 */
.sf-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 1rem; overflow: hidden;
}
/* 카드 헤더 — 연파랑 그라데 띠. gap 7px는 로고↔텍스트, 별은 오른쪽 끝(sf-card-id가 남는 폭을 먹는다) */
.sf-card-head {
    display: flex; align-items: center; gap: 0.4375rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(238, 243, 255, 0.7) 0%, rgba(238, 243, 255, 0.1) 100%);
    border-bottom: 0.8px solid #E8EBF0;
}
.sf-card-logo { width: 3.5625rem; height: 3.5625rem; flex-shrink: 0; border-radius: 0.5rem; background: #EEF1F5; object-fit: cover; }
.sf-card-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sf-card-name-row { display: flex; align-items: center; gap: 0.5625rem; min-width: 0; }
.sf-card-name { font-size: 0.9375rem; font-weight: 800; line-height: 1.375rem; color: #1F2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 기업규모 · 타입 — 타입을 여러 개 고른 업체가 있어 폭을 넘길 수 있다(.sf-card-id 가 min-width:0 이라 말줄임이 먹는다) */
.sf-card-cat { font-size: 0.75rem; font-weight: 600; line-height: 1.0625rem; color: #98A0AE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-card-badge {
    display: inline-flex; align-items: center; gap: 0.125rem; flex-shrink: 0;
    padding: 0.125rem 0.375rem; background: #1A56DB; border-radius: 0.25rem;
    font-size: 0.625rem; font-weight: 800; line-height: 0.875rem; color: #fff;
}
.sf-card-badge i { font-size: 0.7rem; }
/* 카드 본문 — 평점 행은 시안에서 빠졌다(설명 + 혜택칩만).
   flex:1 은 실데이터 대응이다 — 그리드가 3장의 높이를 맞추는데 본문이 안 늘어나면
   글이 짧은 카드만 푸터가 위로 뜨고 아래에 흰 공백이 남는다. */
.sf-card-body { display: flex; flex-direction: column; gap: 0.36875rem; padding: 0.75rem 1rem; flex: 1 1 auto; }
/* 단문 인트로는 최대 100자라 시안 더미보다 길어질 수 있다 — 2줄에서 자른다.
   min-height 는 **인트로가 비어 있을 때도 한 줄을 차지하게** 한다 — 없으면 그 카드만
   혜택 칩이 한 줄 위로 올라와 나란한 카드끼리 줄이 어긋난다. */
.sf-card-desc {
    font-size: 0.78125rem; font-weight: 400; line-height: 1.125rem; color: #5B6473;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 1.125rem;
}
.sf-card-benefit {
    align-self: flex-start;
    padding: 0.21875rem 0.5rem 0.125rem; background: #EEF3FF; border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 700; line-height: 1.125rem; color: #1A56DB;
}
/* 카드 푸터 — 바로가기 / 입장 */
.sf-card-foot { display: flex; align-items: stretch; gap: 0.5rem; padding: 0.75rem; border-top: 0.8px solid #E8EBF0; }
.sf-card-link, .sf-card-enter {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
    height: 2.25rem; border-radius: 0.5rem; font-size: 0.78125rem; font-weight: 700; text-decoration: none;
    transition: background 0.15s ease, filter 0.15s ease;
}
.sf-card-link { border: 1px solid #E8EBF0; color: #5B6473; background: #fff; }
.sf-card-link:hover { background: #F5F7FA; color: #5B6473; }
.sf-card-enter { background: #1A56DB; color: #fff; }
.sf-card-enter:hover { color: #fff; filter: brightness(1.06); }
/* 홈페이지 주소가 없는 업체 — [더보기]가 혼자 남는다.
   ⚠ 그대로 두면 `flex: 1 1 0` 이 푸터 전체를 먹어 카드마다 버튼 폭이 달라진다.
     자기 자리(오른쪽 절반)만 쓰고 왼쪽은 비운다. 절반 = 50% - gap(0.5rem)의 절반. */
.sf-card-enter:only-child { flex: 0 0 calc(50% - 0.25rem); margin-left: auto; }

/* 즐겨찾기 별 — 보증카드(22x20/별16)·결과카드(34x32/별21) 공용. 기본(미등록)색은 시안대로 #E8EBF0(연한 외곽선).
   ⚠ 마크업이 `<span>` 에서 `<button>` 으로 바뀌었다(클릭 토글 — favorite.js). 버튼 기본 스타일
     (배경·테두리·폰트·패딩)이 아이콘을 밀어내므로 여기서 전부 지운다. `color: inherit` 은 쓰지 않는다 —
     아이콘 색이 곧 상태 표시라 아래 규칙이 직접 정해야 한다. */
.sf-card-star, .sf-rc-star {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none;
    color: #E8EBF0; line-height: 1; cursor: pointer; transition: color 0.12s ease;
}
.sf-card-star { width: 1.375rem; height: 1.25rem; font-size: 1rem; }
.sf-rc-star { width: 2.125rem; height: 2rem; font-size: 1.3125rem; }
.sf-card-star:hover, .sf-rc-star:hover { color: #FFA64D; }
/* 등록됨 — hover 색과 같은 계열이되 hover 보다 진하게 둔다(마우스를 올려도 켜진 별이 흐려지지 않게) */
.sf-card-star.is-on, .sf-rc-star.is-on, .sf-card-star.is-on:hover, .sf-rc-star.is-on:hover { color: #FFA600; }

/* ===== 검색바 ===== */
.sf-search-row { display: flex; align-items: stretch; gap: 0.5rem; }
.sf-search { position: relative; flex: 1 1 auto; }
.sf-search > i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #98A0AE; font-size: 1rem; }
.sf-search-input {
    width: 100%; box-sizing: border-box; height: 2.5rem;
    padding: 0 0.75rem 0 2.25rem; border: 1px solid #E8EBF0; border-radius: 0.5rem;
    font-size: 0.875rem; color: #1F2430; background: #fff;
}
.sf-search-input::placeholder { color: rgba(31, 36, 48, 0.5); }
.sf-search-input:focus { outline: none; border-color: #1A56DB; box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1); }
.sf-search-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 12.5rem; padding: 0 0.5rem; border: 1px solid #E8EBF0; border-radius: 0.5rem; background: #fff;
    font-size: 0.84375rem; font-weight: 600; color: #5B6473; cursor: pointer;
}
.sf-search-btn:hover { background: #F5F7FA; }

/* ===== 필터 헤더 행 — 본문 2단(461px 1fr)에 맞춰 [필터 … 초기화] [검색결과 … 정렬] ===== */
.sf-filter-head { display: grid; grid-template-columns: 461px 1fr; gap: 1.5625rem; align-items: center; padding: 0 0.25rem; }
.sf-fh-left { display: flex; align-items: center; justify-content: space-between; }
.sf-filter-title { font-size: 0.875rem; font-weight: 800; line-height: 1.25rem; color: #1F2430; }
.sf-filter-reset { font-size: 0.75rem; font-weight: 500; color: #98A0AE; background: none; border: none; cursor: pointer; }
.sf-filter-reset:hover { color: #5B6473; }
.sf-fh-right { display: flex; align-items: center; justify-content: space-between; }
.sf-result-count { font-size: 0.84375rem; font-weight: 700; line-height: 1.25rem; color: #5B6473; }
.sf-result-num { color: inherit; font-weight: 700; }   /* 시안은 건수도 같은 회색 — 파랑 강조 없음 */
.sf-sort { padding: 0.3rem 0.96rem; border: 1px solid #E8EBF0; border-radius: 0.5rem; background: #fff; font-size: 0.6875rem; font-weight: 600; color: #5B6473; cursor: pointer; }

/* ===== 본문 2단 (필터 사이드 + 결과) ===== */
/* 필터(고정 461px) + 결과(나머지).
   ⚠ **두 열 모두 `minmax(0, …)`** 이어야 한다. 그냥 `461px 1fr` 로 두면 `1fr` 의 최소값이
     **결과 카드의 min-content** 라 열이 그 아래로 줄지 않고, 폭이 모자라면 `.sf-body` 가 통째로 넘친다.
     그런데 상위 `.content` 는 `overflow-x: hidden` 이라(가로 스크롤 금지가 프로젝트 하드 규칙)
     **넘친 만큼 잘려서 사라진다** — 스크롤바도 안 생겨 사용자는 버튼이 없어진 것처럼 본다.
     minmax(0,…) 는 그 사고를 구조적으로 막는 안전장치다(폭이 모자라면 잘리는 대신 줄어든다). */
.sf-body { display: grid; grid-template-columns: minmax(0, 461px) minmax(0, 1fr); gap: 1.5625rem; align-items: start; }

/* 필터 패널 (아코디언) */
.sf-filter-panel { background: #fff; border: 1px solid #E8EBF0; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 1rem; padding: 0 0.96875rem; }
/* 접힘 섹션도 60.5px(헤더 44 + 아래 16) — 패딩을 body가 아니라 섹션에 둬야 접힌 상태에서도 유지된다 */
.sf-fsec { border-bottom: 0.52px solid #E8EBF0; padding-bottom: 1rem; }
.sf-fsec:last-child { border-bottom: none; }
.sf-fsec-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 0; cursor: pointer; list-style: none;
}
.sf-fsec-head::-webkit-details-marker { display: none; }
.sf-fsec-title { font-size: 0.84375rem; font-weight: 800; line-height: 1.25rem; color: #1F2430; }
/* ⚠ 시안 기준 접힘=∧ / 펼침=∨ (일반 관례와 반대) */
/* inline-flex + line-height 1 — 안 주면 bi 아이콘의 inline 박스가 헤더를 2~3px 늘려 섹션 높이가 어긋난다 */
.sf-fsec-chevron { display: inline-flex; line-height: 1; color: #98A0AE; font-size: 0.9rem; transform: rotate(180deg); transition: transform 0.18s ease; }
.sf-fsec[open] .sf-fsec-chevron { transform: none; }
.sf-fsec-body { display: flex; flex-direction: column; gap: 0.4375rem; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.19625rem 0.60714rem 0.2125rem; background: #fff; border: 1px solid #E8EBF0; border-radius: 999px;
    font-size: 0.78125rem; font-weight: 700; line-height: 1.1875rem; color: #5B6473; cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.sf-chip:hover { border-color: #C9D2E3; }
.sf-chip.is-active { background: #1A56DB; border-color: #1A56DB; color: #fff; }
.sf-fsec-note { font-size: 0.71875rem; line-height: 1.0625rem; color: #98A0AE; padding: 0 0.4rem; }

/* 선택개수 배지 — 섹션 제목 옆. 0이면 뷰/JS가 hidden 처리(시안도 0일 땐 안 보인다) */
.sf-fsec-count {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 1.125rem; height: 1.125rem; padding: 0 0.375rem; margin-left: 0.3125rem;
    background: #1A56DB; border-radius: 999px;
    font-size: 0.625rem; font-weight: 800; line-height: 1; color: #fff;
}
.sf-fsec-head { gap: 0.5rem; }
.sf-fsec-title { flex-shrink: 0; }
.sf-fsec-chevron { margin-left: auto; }

/* 하위 라벨(첫충 요율 · 롤링 요율 …) — 섹션 안에 DB 그룹이 여러 줄 들어갈 때 */
.sf-fsec-body > .sf-fsub + .sf-fsub { margin-top: 0.75rem; }
.sf-fsub { display: flex; flex-direction: column; gap: 0.4375rem; }
.sf-fsub-label { font-size: 0.75rem; font-weight: 700; line-height: 1.0625rem; color: #5B6473; }

/* 조건부 노출 잠금(parent_item_id 미선택) — 클릭은 JS가 막고, 여기선 잠긴 걸 보이게만 한다 */
.sf-chips.is-locked { opacity: 0.45; }
.sf-chips.is-locked .sf-chip { cursor: not-allowed; }

/* ── 게임 / 콘텐츠 (브랜드 탭) ── */
.sf-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-brand-tabs {
    display: flex; gap: 0.25rem; padding: 0.25rem; background: #F4F6F9; border-radius: 0.5rem;
    overflow-x: auto; scrollbar-width: none;                 /* 탭이 5개라 좁은 폭에선 가로로 넘긴다 */
}
.sf-brand-tabs::-webkit-scrollbar { display: none; }
.sf-brand-tab {
    display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
    padding: 0.3125rem 0.75rem; border: none; border-radius: 0.375rem; background: transparent;
    font-size: 0.75rem; font-weight: 700; color: #5B6473; cursor: pointer; white-space: nowrap;
}
.sf-brand-tab:hover { color: #1F2430; }
/* 탭 상태는 **둘이고 서로 다른 정보**다 — `is-active`=지금 보고 있는 탭(테두리만) / `has-sel`=고른 항목이 있는 탭(채움).
   겹치면 채움이 이긴다(조건이 걸렸다는 게 더 강한 신호라 규칙을 뒤에 둔다).
   ⚠ 테두리를 `border` 가 아니라 **inset box-shadow** 로 그린다 — 기본이 `border:none` 이라
     border 를 주면 그 탭만 2px 커져 옆 탭들이 밀린다(누를 때마다 탭 줄이 흔들린다). */
.sf-brand-tab.is-active { background: #fff; box-shadow: inset 0 0 0 1px #1A56DB; color: #1A56DB; }
.sf-brand-tab.has-sel { background: #1A56DB; box-shadow: none; color: #fff; }
.sf-brand-tab-num { font-size: 0.6875rem; font-weight: 800; }
/* 개수는 has-sel(1개 이상)일 때만 보이므로 사실상 흰색만 쓰인다 — 나머지는 안전값 */
.sf-brand-tab.has-sel .sf-brand-tab-num { color: #fff; }
.sf-brand-tab:not(.has-sel) .sf-brand-tab-num { color: #1A56DB; }
.sf-brand-pane { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-brand-none { margin: 0; font-size: 0.71875rem; color: #98A0AE; }
.sf-chip--all { border-style: dashed; }

/* 칩 검색창(제공사 · 이벤트) */
.sf-brand-search, .sf-evt-search {
    width: 100%; box-sizing: border-box; height: 2.125rem; padding: 0 0.75rem;
    border: 1px solid #E8EBF0; border-radius: 0.5rem; background: #fff;
    font-size: 0.78125rem; color: #1F2430;
}
.sf-brand-search::placeholder, .sf-evt-search::placeholder { color: rgba(31, 36, 48, 0.45); }
.sf-brand-search:focus, .sf-evt-search:focus { outline: none; border-color: #1A56DB; }
.sf-evt-chips { margin-top: 0.5rem; }

/* ── 충전 · 환전 · 한도 (금액 슬라이더) ── */
.sf-frange-group { display: flex; flex-direction: column; gap: 0.625rem; }
.sf-frange-group + .sf-frange-group { margin-top: 1rem; }
.sf-frange-gtitle { font-size: 0.75rem; font-weight: 700; line-height: 1.0625rem; color: #5B6473; }
.sf-frange { display: flex; flex-direction: column; gap: 0.25rem; }
.sf-frange-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* 시안(사이트찾기 필터)은 라벨 11px · 값 10px 로 가입/마이페이지(12px/11px)보다 한 단계 작다 — 사이드 패널이라 폭이 좁다. */
.sf-frange-label { font-size: 0.6875rem; font-weight: 500; color: #5B6473; }
.sf-frange-val { font-size: 0.625rem; font-weight: 500; color: #5B6473; text-align: right; white-space: nowrap; }
/* 채움 막대는 --sf-fill(=JS가 넣는 %)로 그린다 — range의 진행 구간은 표준 스타일이 없다 */
.sf-frange-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 0.3125rem; margin: 0.3125rem 0;
    border-radius: 999px; cursor: pointer;
    background: linear-gradient(to right, #1A56DB 0 var(--sf-fill, 0%), #E8EBF0 var(--sf-fill, 0%) 100%);
}
/* 손잡이는 시안대로 11px 단색 원이다 — 흰 테두리를 두르면 실제 원이 7px 로 줄어 눌러 잡기 어렵다. */
.sf-frange-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 0.6875rem; height: 0.6875rem; border: 0; border-radius: 999px; background: #1A56DB;
    box-shadow: 0 2px 3px rgba(69, 69, 69, 0.2); cursor: pointer;
}
.sf-frange-slider::-moz-range-thumb {
    width: 0.6875rem; height: 0.6875rem; border: 0; border-radius: 999px; background: #1A56DB;
    box-shadow: 0 2px 3px rgba(69, 69, 69, 0.2); cursor: pointer;
}
.sf-frange-slider:focus-visible { outline: 2px solid rgba(26, 86, 219, 0.35); outline-offset: 2px; }

/* 결과 영역 — 카드 리스트(결과 있음) 또는 빈 상태 겸용 */
.sf-result { display: flex; flex-direction: column; gap: 0.75rem; min-height: 18.4375rem; }

/* 결과 카드 (사이트 1건) — [별] [로고] [본문] [버튼] 모두 12px 간격, 높이 108px */
.sf-rc {
    display: flex; align-items: center; gap: 0.75rem; min-height: 6.75rem;
    padding: 0.98rem; background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 0.75rem; text-decoration: none;
}
.sf-rc-logo { width: 4rem; height: 3.5625rem; flex-shrink: 0; border-radius: 0.5rem; background: #EEF1F5; object-fit: contain; }
.sf-rc-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }
.sf-rc-row1 { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
/* ⚠ 업체명은 `white-space: nowrap` 이라 **말줄임이 없으면 긴 이름이 카드를 밀어낸다**(옆 태그가 잘려 나간다).
   명예의 전당 카드(.sf-card-name)는 처음부터 말줄임이 있었는데 여기만 빠져 있었다. */
.sf-rc-name { min-width: 0; font-size: 0.9375rem; font-weight: 800; line-height: 1.375rem; color: #1F2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-rc-tag { flex-shrink: 0; padding: 0.08rem 0.375rem; background: rgba(244, 246, 249, 0.8); border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 700; line-height: 1rem; color: #5B6473; }
.sf-rc-desc { font-size: 0.78125rem; font-weight: 400; line-height: 1.125rem; color: #5B6473; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-rc-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; min-width: 0; }
.sf-rc-badge { flex-shrink: 0; padding: 0.07rem 0.375rem; background: #EEF3FF; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 800; line-height: 0.875rem; color: #1A56DB; }
.sf-rc-benefit { font-size: 0.71875rem; font-weight: 700; line-height: 1.0625rem; color: #1A56DB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 오른쪽 — 평점은 시안에서 빠지고 버튼 2개(각 89px)만 남는다 */
.sf-rc-actions { display: flex; align-items: center; gap: 0.375rem; width: 11.53125rem; flex-shrink: 0; }
.sf-rc-home, .sf-rc-more {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
    height: 2.0625rem; padding: 0 0.5rem; border-radius: 0.5rem;
    font-size: 0.75rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.sf-rc-home { border: 1px solid #E8EBF0; color: #5B6473; background: #fff; }
.sf-rc-home:hover { background: #F5F7FA; color: #5B6473; }
.sf-rc-more { background: #1A56DB; color: #fff; border: none; }
.sf-rc-more:hover { color: #fff; filter: brightness(1.06); }
/* 명예의 전당 카드와 같은 이유 — 혼자 남은 [더보기]는 오른쪽 절반만 쓴다. gap 은 여기가 0.375rem. */
.sf-rc-more:only-child { flex: 0 0 calc(50% - 0.1875rem); margin-left: auto; }
/* 업체명은 링크다(카드 전체를 <a>로 감싸면 내부 [홈페이지]·[더보기]와 중첩된다) — 밑줄만 없앤다 */
/* 업체명 링크(명예의 전당 .sf-card-name · 결과 카드 .sf-rc-name) — 둘 다 상세로 간다.
   글자 모양은 그대로 두고 밑줄만 없앤다(카드 안에서 밑줄이 뜨면 제목이 아니라 본문 링크처럼 읽힌다).
   hover 색만 파랑으로 바꿔 '누를 수 있다'를 알린다 — 더보기 버튼과 같은 색. */
.sf-card-name, .sf-rc-name { text-decoration: none; }
.sf-card-name:hover, .sf-rc-name:hover { color: #1A56DB; }

/* 페이저 — **커뮤니티(.cm-pager)·픽스터(.pk-pager)와 같은 규격**(시안 공통)이라 값을 그대로 옮겼다.
   숫자 = 36×36 흰배경+테두리 / 이전·다음 = 32px 높이·배경 없음·13px / 활성 = #1A56DB / 비활성 = opacity .4
   ⚠ 셋 중 하나를 고치면 나머지도 같이 고친다(같은 화면군에서 페이저가 두 모양이면 안 된다). */
.sf-pager { display: flex; justify-content: center; align-items: center; gap: 0.375rem; padding-top: 0.9375rem; }
.sf-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
    border: 1px solid #E8EBF0; border-radius: 0.5rem; background: #fff;
    font-size: 0.84375rem; font-weight: 700; color: #5B6473; text-decoration: none;
    transition: all 0.12s ease;
}
.sf-page:hover { border-color: #1A56DB; color: #1A56DB; }
.sf-page.is-active { background: #1A56DB; border-color: #1A56DB; color: #fff; }
/* 이전/다음 — 배경 선언이 없다(투명). 흰 배경은 숫자 버튼 전용이라 여기서 되돌린다. */
.sf-page-text { height: 2rem; padding: 0 0.75rem; background: transparent; font-size: 0.8125rem; }
.sf-page.is-disabled { opacity: 0.4; pointer-events: none; }

/* 빈 상태 — ⚠ 흰 카드가 아니다(테두리·배경 없이 페이지 배경 위에 아이콘+문구만). 결과 카드와 다른 점:
   ① 카드 껍데기 없음 ② 필터 패널 높이만큼 늘려 세로 가운데 ③ 정렬(평점순) 버튼 미노출(뷰에서 분기) */
.sf-result.is-empty { align-self: stretch; }   /* .sf-body 가 align-items:start 라 빈 상태만 예외로 늘린다 */
.sf-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.125rem; padding: 1.4375rem 1rem; text-align: center; }
.sf-empty-ic { width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 999px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 1.5rem; }
.sf-empty-text { display: flex; flex-direction: column; align-items: center; }   /* 두 줄 사이 간격 없음(시안) */
.sf-empty-title { font-size: 1rem; font-weight: 700; line-height: 1.3125rem; color: #64748B; }
.sf-empty-sub { font-size: 0.875rem; font-weight: 400; line-height: 1.125rem; color: #94A3B8; }

/* ===================== 상세 페이지 (/SiteFind/Detail) ===================== */
/* 상세 셸 — 목록으로 / 헤더카드 / 홈페이지 버튼 / 2단 본문 사이 간격(시안 15.8px) */
.sfd-main { display: flex; flex-direction: column; gap: 0.9875rem; }

/* 목록으로 */
.sfd-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; color: #5B6473; text-decoration: none; align-self: flex-start; }
.sfd-back:hover { color: #1A56DB; }

/* 업체 헤더 카드 */
.sfd-head { border: 1px solid rgba(26, 86, 219, 0.3); box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 1rem; overflow: hidden; }
.sfd-head-inner { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: linear-gradient(90deg, rgba(238, 243, 255, 0.7) 0%, rgba(238, 243, 255, 0.1) 100%); }
.sfd-head-logo { width: 4.375rem; height: 4.375rem; flex-shrink: 0; border-radius: 0.625rem; background: #EEF1F5; object-fit: cover; }
.sfd-head-id { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.sfd-head-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sfd-head-name { font-size: 1.1875rem; font-weight: 800; line-height: 1.75rem; color: #1F2430; }
.sfd-badge { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem 0.375rem; background: #1A56DB; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 800; line-height: 1rem; color: #fff; }
.sfd-badge i { font-size: 0.7rem; }
/* 규모·추천 태그 — ⚠ 배경이 **#EEF3FF 가 아니라 #DBEAFE** 다(다른 곳의 연파랑 칩보다 한 단계 진하다).
   #EEF3FF 로 두면 헤더 카드의 그라데이션(rgba(238,243,255,0.7)→0.1, 같은 색 계열)에 묻혀
   **배경이 없는 것처럼 보인다** — 태그 위치에서 실측 RGB 차이가 (8, 6, 0)이었다.
   흰 카드 위에 있는 결과 카드의 `.sf-rc-badge`·베팅 옵션의 `.sfd-fold-tag` 는 #EEF3FF 로도 읽히므로 그대로 둔다. */
.sfd-tag { padding: 0.125rem 0.375rem; background: #DBEAFE; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 800; line-height: 1rem; color: #1A56DB; }
.sfd-head-desc { font-size: 0.8125rem; font-weight: 400; line-height: 1.1875rem; color: #5B6473; }
.sfd-head-hall { font-size: 0.71875rem; font-weight: 700; line-height: 1.0625rem; color: #1A56DB; }
/* 헤더 오른쪽 — 2026-08-12 시안에서 **평점·추천 수가 빠지고 즐겨찾기 별만 남았다**(42x40, 별 28px).
   기본색 #E8EBF0(거의 안 보이는 게 정상) — 목록·명예의 전당 카드의 별과 같은 규칙이다. */
.sfd-head-star {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none;   /* button 기본 스타일 제거 */
    width: 2.625rem; height: 2.5rem; font-size: 1.75rem;
    color: #E8EBF0; line-height: 1; cursor: pointer; transition: color 0.12s ease;
}
.sfd-head-star:hover { color: #FFA64D; }
.sfd-head-star.is-on, .sfd-head-star.is-on:hover { color: #FFA600; }   /* 등록됨 */

/* 입장 버튼 */
.sfd-enter { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.8125rem; background: #1A56DB; box-shadow: 0 4px 14px rgba(26, 86, 219, 0.25); border-radius: 0.75rem; font-size: 0.90625rem; font-weight: 700; color: #fff; text-decoration: none; }
.sfd-enter:hover { color: #fff; filter: brightness(1.06); }

/* 2단 컬럼 */
.sfd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.sfd-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* 섹션 */
.sfd-sec { background: #fff; border: 1px solid #E8EBF0; border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sfd-sec-head { display: flex; align-items: center; gap: 0.5rem; }
.sfd-sec-bar { width: 0.25rem; height: 0.875rem; background: #1A56DB; border-radius: 999px; flex-shrink: 0; }
.sfd-sec-title { font-size: 0.875rem; font-weight: 800; line-height: 1.25rem; color: #1F2430; }
/* 사이트 소개 본문 — 가입 3단계가 평문 textarea 라 개행이 그대로 저장된다(pre-line 으로 보존).
   pre-wrap 이 아니라 pre-line 인 이유: 앞뒤 들여쓰기·연속 공백까지 살리면 붙여넣은 글이 어긋나 보인다. */
/* ⚠ `margin: 0` 필수 — 이 요소만 `<p>` 라 브라우저 기본 `margin: 1em 0`(여기선 13px)이 붙는다.
   `.sfd-sec` 이 flex 라 margin 이 상쇄되지 않고 gap 에 그대로 더해져, **사이트 소개만 제목↔본문이
   21px 로 벌어졌다**(다른 섹션은 본문이 div 라 8px). 아래 여백도 13px 늘어 섹션 높이까지 달라진다. */
.sfd-sec-desc { margin: 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.3125rem; color: #5B6473; white-space: pre-line; }

/* 충전 혜택 */
.sfd-charge-main { font-size: 0.84375rem; font-weight: 700; line-height: 1.25rem; color: #1A56DB; }
.sfd-chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sfd-chip { padding: 0.125rem 0.375rem; background: #F6F8FA; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 500; line-height: 1rem; color: #98A0AE; }
.sfd-chip.soft { background: rgba(244, 246, 249, 0.8); }
.sfd-toggle { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.75rem; font-weight: 700; line-height: 1.0625rem; color: #1A56DB; }

/* 레벨 테이블 */
.sfd-table { width: 100%; border: 1px solid #E8EBF0; border-radius: 0.5rem; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.sfd-table th, .sfd-table td { padding: 0.375rem 0.5rem; text-align: left; font-size: 0.75rem; line-height: 1.0625rem; }
.sfd-table thead th { background: rgba(244, 246, 249, 0.6); font-weight: 700; color: #98A0AE; }
.sfd-table tbody tr { border-top: 0.8px solid #F1F3F7; }
.sfd-table tbody td { font-weight: 600; color: #5B6473; }
.sfd-table tbody td:first-child { font-weight: 800; color: #1A56DB; }

/* 베팅/폴더 행 */
.sfd-fold-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0; border-bottom: 0.8px solid #F1F3F7; }
.sfd-fold-row:last-child { border-bottom: none; }
/* 라벨 폭은 시안 96px 고정 — 값(가능/최대 10개…)의 시작 위치를 네 행에서 맞추는 값이다 */
.sfd-fold-label { width: 6rem; flex-shrink: 0; white-space: nowrap; font-size: 0.78125rem; font-weight: 700; color: #98A0AE; }
.sfd-fold-tag { padding: 0.125rem 0.375rem; background: #EEF3FF; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 800; color: #1A56DB; flex-shrink: 0; }
.sfd-fold-value { font-size: 0.78125rem; font-weight: 400; color: #5B6473; }
.sfd-fold-link { margin-left: auto; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.75rem; font-weight: 700; color: #1A56DB; flex-shrink: 0; }

/* 게임/콘텐츠 제공사 */
.sfd-prov { display: flex; flex-direction: column; gap: 0.25rem; }
.sfd-prov-label { font-size: 0.75rem; font-weight: 700; line-height: 1.0625rem; color: #98A0AE; }
.sfd-prov-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sfd-prov-tag { padding: 0.06rem 0.375rem; border: 1px solid #E8EBF0; border-radius: 0.25rem; font-size: 0.71875rem; font-weight: 600; line-height: 1.0625rem; color: #5B6473; }

/* 이용 정보 */
.sfd-info-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 0.8px solid #F1F3F7; }
.sfd-info-row:last-child { border-bottom: none; }
.sfd-info-label { width: 5rem; flex-shrink: 0; font-size: 0.78125rem; font-weight: 700; line-height: 1.1875rem; color: #98A0AE; }
.sfd-info-value { font-size: 0.8125rem; font-weight: 400; line-height: 1.1875rem; color: #1F2430; }

/* 충전·환전 한도 */
/* 유형별 묶음(공통·카지노·스포츠) — 9칸을 한 그리드에 쏟으면 `[최대 환전 금액 | 슬롯 당첨 한도]` 가
   한 줄에 붙어 어느 유형인지 안 읽힌다(2026-09-16 지시). 제목 + 줄바꿈으로 가른다.
   ⚠ 제목 규격은 좌측 필터의 `.sf-frange-gtitle` 과 **같은 값**이다 — 같은 9개를 보여 주는 화면이라 모양이 갈리면 안 된다. */
.sfd-limit-group + .sfd-limit-group { margin-top: 0.75rem; }
.sfd-limit-gtitle { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 700; line-height: 1.0625rem; color: #5B6473; }
.sfd-limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.sfd-limit-box { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.75rem; background: rgba(244, 246, 249, 0.7); border-radius: 0.5rem; }
.sfd-limit-label { font-size: 0.6875rem; font-weight: 400; line-height: 1rem; color: #98A0AE; }
.sfd-limit-value { font-size: 0.8125rem; font-weight: 800; line-height: 1.1875rem; color: #1A56DB; }

/* 이벤트 */
/* 이벤트 칩 — 신규 보너스 칩(.sfd-chip)과 **다른 스타일**이다(시안 600/#5B6473 vs 500/#98A0AE).
   같은 클래스를 돌려 쓰면 이벤트 줄이 회색으로 흐려져 읽히지 않는다. */
.sfd-evt-chip { padding: 0.075rem 0.375rem 0.17rem; background: rgba(244, 246, 249, 0.8); border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; line-height: 1rem; color: #5B6473; }
.sfd-event-hi { padding: 0.15rem 0.375rem; background: #EEF3FF; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 700; line-height: 1rem; color: #1A56DB; }
.sfd-event-note { font-size: 0.71875rem; font-weight: 400; line-height: 1.0625rem; color: #98A0AE; }

/* ===== 반응형 ===== */
/* 필터 + 결과 2단은 **결과 열에 카드가 들어갈 만큼 남을 때만** 유지한다.
   ⚠ 계산 근거(실측): 필터 열 461 + gap 25 + 결과 카드 min-content 최대 489 = 975 가 `.sf-body` 에 필요하고,
     `.sf-body` 폭 = 뷰포트 − 314(사이드바 226 + 좌우 여백 64 + 레이아웃 gap 24)다 → 뷰포트 약 1290px.
     예전 기준(1100px)으로는 **1100~1290 구간에서 결과 열이 300~480px 밖에 안 돼** 카드가 눌리거나
     넘쳐서 잘렸다(상위 `.content` 가 overflow-x:hidden 이라 스크롤바 없이 그냥 사라진다).
   ⚠ 사이드바가 드로어로 바뀌는 지점은 1023.98px 이라(site.css) 그 아래는 여백이 더 생기지만,
     어차피 여기서 1단이 되므로 문제되지 않는다. */
@media (max-width: 1289.98px) {
    .sf-body { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .sf-hall-grid { grid-template-columns: 1fr; }
    .sf-filter-head { grid-template-columns: 1fr; gap: 0.5rem; }
    .sfd-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    /* 구 `.sfd-head-right`(평점·추천 묶음)를 100% 폭으로 내리던 규칙은 제거했다 — 시안에서 그 묶음이 없어졌고,
       남은 즐겨찾기 별은 작아서 이름줄 오른쪽에 그대로 둬도 넘치지 않는다. */
    .sfd-head-inner { flex-wrap: wrap; }
    .sfd-limit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sf-search-btn { width: 5rem; }
    /* 명예의 전당 카드 푸터 — **세로로 쌓지 않는다**(구 `.sf-card-foot { flex-direction: column }` 제거).
       ⚠ 세로로 쌓으면 버튼의 `flex: 1 1 0` 이 **높이 기준**이 되어 `height: 2.25rem` 선언을 덮어쓰고,
         컨테이너 높이가 auto 라 글자 한 줄까지 눌린다 — 버튼이 납작해 보이던 원인이다.
         모바일은 카드가 한 줄(343px)이라 가로로 둘 자리가 충분하다.
       높이도 결과 카드의 [홈페이지][더보기](.sf-rc-home/.sf-rc-more)와 같은 값으로 맞춘다 —
       두 영역의 같은 버튼이 화면마다 다른 높이로 보일 이유가 없다. */
    .sf-card-link, .sf-card-enter { height: 2.0625rem; }
    /* 혼자 남은 [더보기]의 '오른쪽 절반만' 규칙은 **PC 전용**이다 — 모바일은 카드가 한 줄이라
       절반짜리 버튼 옆에 빈 자리가 남으면 어색하고, 누르는 면적도 좁아진다. 전체 폭으로 되돌린다. */
    .sf-card-enter:only-child, .sf-rc-more:only-child { flex: 1 1 0; margin-left: 0; }
    .sf-rc { flex-wrap: wrap; align-items: flex-start; }
    .sf-rc-star { order: 2; margin-left: auto; }
    .sf-rc-body { flex: 1 1 8rem; }
    .sf-rc-actions { order: 3; width: 100%; }
}