/* RECOVERIC 매거진 · 공통 찾기 줄(filter-bar) — 전시·축제·지원사업·랭킹 (대표 지시 2026-10-29, 아트 디렉터)
   구성: 검색 한 줄 / 칩 한 줄(높이 32px, 넘치면 '더 보기') + 필터 단추 1개 / 접힌 상세 / 결과 수 · 조건 지우기 · 정렬.
   흰 바탕 · 검정 글자 · 네이비 #1B2438 포인트 · 얇은 선. 단추 모양은 magazine.css 의 둥근 버튼 토큰(--rv-btn-*)만 읽는다
   (변수를 바꾸면 이 줄 전체가 따라온다). 휴대폰은 body 폭(@container mg) 960px 이하에서 바뀐다.
   휴대폰 터치 영역은 44px 를 지키되 눈에 보이는 칩은 32px(::before 가 그린다). 마크업: site/partials/filter_bar.html */

.rvf,.rvf *{word-break:keep-all}
.rvf{--rvf-h:32px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin-top:36px}
.rvf-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 검색 한 줄 ---------- */
.rvf-q{position:relative;display:flex;align-items:center;gap:14px;height:56px;margin:0;border-bottom:1px solid #111111;background:#FFFFFF}
.rvf-q:focus-within{border-bottom-color:var(--rv-btn-navy,#1B2438)}
.rvf-ic{display:flex;flex:none;color:#111111}
.rvf .rvf-q #fz-q{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0;margin:0;font-family:'Noto Serif KR',serif;font-size:19px;font-weight:300;color:#111111;border-radius:0;-webkit-appearance:none;appearance:none;box-shadow:none}
.rvf .rvf-q #fz-q::placeholder{color:#8A8A8A;font-weight:300}
.rvf .rvf-q #fz-q::-webkit-search-cancel-button,.rvf .rvf-q #fz-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.rvf .rvf-q #fz-q:focus-visible{box-shadow:inset 0 -1px 0 var(--rv-btn-navy,#1B2438)}
.rvf .rvf-x{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--rv-btn-r-pill,999px);background:var(--rv-btn-soft,#F3F4F7);color:#111111;cursor:pointer}
.rvf .rvf-x[hidden]{display:none}
.rvf .rvf-x:hover{background:#E6E8EE}
.rvf .rvf-x:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}

/* ---------- 칩 한 줄 + 필터 단추 ---------- */
.rvf-bar{display:flex;align-items:flex-start;gap:14px;margin-top:16px;background:#FFFFFF}
.rvf-chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:hidden;padding:4px;margin:-4px}
.rvf-chips.is-open{flex-wrap:wrap;row-gap:8px}
.rvf-sep{flex:none;width:1px;height:16px;margin:0 6px;background:#D2D2D2}
.rvf-chips.is-open .rvf-sep{display:none}
.rvf [data-over]{display:none!important}

/* 칩(모든 칩·상세 단추 공통): 둥근 알약 32px, 켜짐은 네이비 채움 */
.rvf .rvf-c,.rvf .rvf-more,.rvf .rvf-clear,.rvf .rvf-fbtn{appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:6px;height:var(--rvf-h);margin:0;padding:0 14px;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);background:var(--rv-btn-bg,#FFFFFF);color:var(--rv-btn-ink,#111111);font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:400;line-height:1;letter-spacing:0;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--rv-btn-ease,.14s ease),border-color var(--rv-btn-ease,.14s ease),color var(--rv-btn-ease,.14s ease),transform var(--rv-btn-ease,.14s ease)}
.rvf .rvf-c[hidden],.rvf .rvf-more[hidden],.rvf .rvf-clear[hidden]{display:none}
.rvf .rvf-c:hover,.rvf .rvf-more:hover,.rvf .rvf-clear:hover{border-color:var(--rv-btn-line-hover,#1B2438);color:var(--rv-btn-ink,#111111)}
.rvf .rvf-c:active,.rvf .rvf-more:active,.rvf .rvf-clear:active,.rvf .rvf-fbtn:active{transform:var(--rv-btn-press,scale(.97))}
.rvf .rvf-c:focus-visible,.rvf .rvf-more:focus-visible,.rvf .rvf-clear:focus-visible,.rvf .rvf-fbtn:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}
.rvf .rvf-c.on,.rvf .rvf-c[aria-pressed="true"]{background:var(--rv-btn-navy,#1B2438);border-color:var(--rv-btn-navy,#1B2438);color:var(--rv-btn-on,#FFFFFF);font-weight:500}
.rvf .rvf-c.on:hover,.rvf .rvf-c[aria-pressed="true"]:hover{background:var(--rv-btn-navy-hover,#2A3652)}
.rvf .rvf-c:disabled{background:var(--rv-btn-soft,#F3F4F7);color:var(--rv-btn-disabled,#C9CCD3);border-color:var(--rv-btn-line,#D2D2D2);cursor:default}
.rvf .evf-y{margin-right:-2px;font-size:11px;color:inherit;opacity:.7}
.rvf .evf-n{font-size:12px;font-weight:400;color:inherit;opacity:.7;font-variant-numeric:tabular-nums}
.rvf .evf-n:empty{display:none}
.rvf .evf-ar{display:none}

/* 더 보기 · 필터 · 조건 지우기 */
.rvf .rvf-more{color:#444444;border-style:dashed}
.rvf .rvf-more::after{content:"";width:5px;height:5px;margin:-3px 0 0 1px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.rvf .rvf-more[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.rvf .rvf-fbtn{border-color:var(--rv-btn-navy,#1B2438);color:var(--rv-btn-navy,#1B2438);font-weight:500;padding:0 16px}
.rvf .rvf-fbtn:hover{background:var(--rv-btn-soft,#F3F4F7)}
.rvf .rvf-fbtn[aria-expanded="true"],.rvf .rvf-fbtn.has{background:var(--rv-btn-navy,#1B2438);color:var(--rv-btn-on,#FFFFFF)}
.rvf .rvf-fbtn[aria-expanded="true"]:hover,.rvf .rvf-fbtn.has:hover{background:var(--rv-btn-navy-hover,#2A3652)}
.rvf .rvf-fn{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FFFFFF;color:var(--rv-btn-navy,#1B2438);font-family:'Bodoni Moda',serif;font-size:12px;font-weight:500;line-height:1;box-sizing:border-box}
.rvf .rvf-fn[hidden]{display:none}
.rvf .rvf-clear{color:var(--rv-btn-navy,#1B2438);border-color:var(--rv-btn-line,#D2D2D2)}

/* ---------- 접힌 상세 ---------- */
.rvf-panel{margin-top:14px;padding:4px 0;border-top:1px solid #E6E6E6;border-bottom:1px solid #E6E6E6;background:#FFFFFF;animation:rvf-in .18s ease}
.rvf-panel[hidden]{display:none}
@keyframes rvf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rvf-panel{animation:none}.rvf .rvf-c,.rvf .rvf-more::after{transition:none}}
.rvf-g{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:start;padding:14px 0}
.rvf-g[hidden]{display:none}
.rvf-g+.rvf-g{border-top:1px solid #F0F0F0}
.rvf-gk{font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;line-height:var(--rvf-h);color:#555555;white-space:nowrap}
.rvf-gc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}

/* 위치(전시·축제): 시·도 선택과 지명 입력도 같은 알약 */
.rvf .evg-in{display:flex;flex-direction:column;gap:10px;min-width:0}
.rvf .evg-sel select{height:var(--rvf-h);min-width:128px;padding:0 32px 0 14px;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);font-size:13px;background-position:right 13px center}
.rvf .evg-sel select:hover:not(:disabled){border-color:var(--rv-btn-line-hover,#1B2438)}
.rvf .evg-sel select:focus-visible,.rvf .evg-name input:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}
.rvf .evg-name input{height:var(--rvf-h);max-width:320px;padding:0 16px;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);font-size:13px}
.rvf .evg-msg{margin:0;font-size:12px;line-height:1.6;color:#6B6B6B}
.rvf .evg .evf-sc{flex-wrap:wrap}

/* 작은 달력은 '기간' 묶음 아래에 펼친다 */
.rvf .evp{left:104px;top:calc(100% - 6px);border-radius:var(--rv-pop-r,14px);border-color:#D2D2D2}
.rvf .evp-ok{border-radius:var(--rv-btn-r-pill,999px);background:var(--rv-btn-navy,#1B2438)}
.evp.is-sheet{border-radius:var(--rv-pop-r,14px) var(--rv-pop-r,14px) 0 0}

/* ---------- 결과 줄 ---------- */
.rvf-res{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:20px;padding-bottom:14px;border-bottom:1px solid #111111}
.rvf-cnt{display:flex;align-items:baseline;gap:4px;margin:0;font-family:'Noto Sans KR',sans-serif;font-size:14px;color:#444444;white-space:nowrap}
.rvf-cnt b{font-size:32px;line-height:1;font-weight:500;letter-spacing:-.01em;color:var(--rv-btn-navy,#1B2438)}
.rvf-of{margin-left:10px;font-size:12.5px;color:#777777}
.rvf-of .bod{font-size:14px;color:#555555}
.rvf .fz-sort{display:flex;flex-wrap:wrap;gap:6px;order:0;flex-basis:auto;margin:0 0 0 auto;padding:0;overflow:visible}

/* 랭킹처럼 지면 구역 안에 직접 놓이는 경우(.rvf-ctx): 칩 줄만 머리 아래에 붙는다 */
.rvf-ctx{display:contents}
.rvf-ctx .rvf-q{margin-top:0}
.rvf-ctx .rvf-bar{margin-top:0;padding:12px 0;border-bottom:1px solid #E6E6E6}
.rvf-ctx .rvf-panel{margin-top:0;border-top:0}
.rvf-ctx .rvf-res{margin-top:16px}
.rvf-ctx .rvf-chips.rk-bd-tabs{padding:4px;display:flex}

/* ---------- 휴대폰 ---------- */
@container mg (max-width:960px){
 .rvf{margin-top:28px}
 .rvf-q{height:52px;gap:12px;padding-right:96px}
 .rvf .rvf-q #fz-q{font-size:17px}
 /* 필터 단추는 검색 줄 오른쪽 끝으로 올린다(칩 줄을 온전히 쓰도록) */
 .rvf:not(.rvf-ctx) .rvf-bar{position:relative}
 .rvf:not(.rvf-ctx) .rvf-fbtn{position:absolute;right:0;top:-64px}
 .rvf-g{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:14px 0}
 .rvf-gk{line-height:1.3}
 .rvf .evp{left:0}
 .rvf .evg-sel{flex:1 1 calc(50% - 4px)}
 .rvf .evg-sel select{width:100%;min-width:0}
 .rvf .evg-name input{max-width:none}
 .rvf-res{margin-top:16px}
 .rvf-cnt b{font-size:28px}
 .rvf .fz-sort{margin-left:0;flex-basis:100%}
 /* 터치 영역 44px: 단추 몸통은 44px(위아래 투명 테두리 6px), 눈에 보이는 알약은 안쪽 32px. 선은 안쪽 그림자로 그린다 */
 .rvf .rvf-c,.rvf .rvf-more,.rvf .rvf-clear,.rvf .rvf-fbtn{height:44px;min-width:44px;border-style:solid;border-color:transparent;border-width:6px 0;background-clip:padding-box!important;box-shadow:inset 0 0 0 1px var(--rv-btn-line,#D2D2D2)}
 .rvf .rvf-more{box-shadow:inset 0 0 0 1px #BDBDBD}
 .rvf .rvf-fbtn{box-shadow:inset 0 0 0 1px var(--rv-btn-navy,#1B2438)}
 .rvf .rvf-c:hover,.rvf .rvf-clear:hover{border-color:transparent;box-shadow:inset 0 0 0 1px var(--rv-btn-line-hover,#1B2438)}
 .rvf .rvf-more:hover{border-color:transparent;box-shadow:inset 0 0 0 1px var(--rv-btn-line-hover,#1B2438)}
 .rvf .rvf-c.on,.rvf .rvf-c[aria-pressed="true"]{border-color:transparent;box-shadow:inset 0 0 0 1px var(--rv-btn-navy,#1B2438)}
 .rvf .rvf-fbtn[aria-expanded="true"],.rvf .rvf-fbtn.has{border-color:transparent}
 .rvf .rvf-c:focus-visible,.rvf .rvf-more:focus-visible,.rvf .rvf-clear:focus-visible,.rvf .rvf-fbtn:focus-visible{outline:2px solid var(--rv-btn-navy,#1B2438);outline-offset:-5px;box-shadow:inset 0 0 0 1px var(--rv-btn-navy,#1B2438)}
 .rvf .rvf-c{padding:0 12px}
 .rvf .rvf-more{padding:0 12px;gap:4px}
 .rvf .rvf-chips{row-gap:0;gap:4px}
 .rvf .rvf-gc{gap:0 4px}
 .rvf .rvf-sep{display:none}
 .rvf-ctx .rvf-bar{padding:2px 0;align-items:center}
 .rvf-ctx .rvf-fbtn{position:relative;right:auto;top:auto}
 .rvf-ctx .rvf-q{padding-right:0}
}

/* 결과 없음 안내의 '조건 지우고 전체 보기'도 같은 알약 */
.fz-clr2{border-radius:var(--rv-btn-r-pill,999px)!important;height:40px!important;padding:0 22px!important;background:var(--rv-btn-navy,#1B2438)!important;transition:transform var(--rv-btn-ease,.14s ease),background var(--rv-btn-ease,.14s ease)}
.fz-clr2:hover{background:var(--rv-btn-navy-hover,#2A3652)!important}
.fz-clr2:active{transform:var(--rv-btn-press,scale(.97))}
.fz-clr2:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}
.rvf-of[hidden]{display:none}
.rvf .evg-name input::-webkit-calendar-picker-indicator{display:none!important}
/* 디자인 점검 11-02 A: 검색 칸에 들어가도 표시가 없던 것(키보드 포커스 보임) → 밑줄을 네이비 2px 로 */
#fz-q:focus-visible,.rvf .rvf-q #fz-q:focus-visible{box-shadow:inset 0 -2px 0 #1B2438}
/* 11-04 아트 디렉터: 지원사업은 머리 큰 숫자(#fz-big)가 같은 건수를 이미 보여 주므로, 조건을 걸지 않았을 때는 목록 위 건수를 감춘다(같은 정보 반복 방지) */
.rvf-cnt:has(#fz-hit):has(.rvf-of[hidden]){display:none}