@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* ═══ 가맹점 전용 포털 /branch/ — 미니멀 (박스/선/그림자 최소, 여백 중심) ═══ */
/* 색·규격은 게시판 스킨(theme/design/skin/board/franchise/franchise.css)과 같은 값을 쓴다 */
/* 이 파일의 토큰은 게시판 스킨(franchise.css)의 --fb-* 와 값이 하나도 어긋나면 안 된다.
   같은 헤더·같은 버튼이 두 화면에 걸쳐 나오므로 색이나 높이가 1px만 달라도 따로 논다. */
:root{
    --brp-y:#ffd400; --brp-yd:#dda600; --brp-y-soft:#fff3c4;
    --brp-ink:#1a1a1a; --brp-sub:#5a616b; --brp-mut:#8b919b;
    /* 구분선 3단계 — 게시판 스킨(franchise.css)과 같은 값 */
    --brp-sep:#2a2f36;    /* 골격 : 헤더 */
    --brp-line-d:#d8dce1; /* 섹션 : 카드 테두리, 입력창 */
    --brp-line:#f0f1f4;   /* 잔선 */
    --brp-bg:#f7f8f9;     /* 옅은 바탕 : 카드 머리, 행 호버 */
    --brp-r:10px;         /* 버튼·입력 라운드 */
    --brp-h-ctl:46px;     /* 버튼·입력 높이 — 모바일에서 50px 로 커진다 */
    --brp-top-gap:30px;   /* 헤더선 아래 여백 — 게시판과 동일 */
    /* 게시판 스킨(franchise.css)의 --fb-quick-gap 과 같은 값 — 오른쪽 플로팅 퀵메뉴를 피하는 폭 */
    --brp-quick-gap:calc(2.4vw + var(--px, 1px) * 87 + 30px);
}

.brp_wrap{
    width:100%; background:#fff; min-height:76vh; box-sizing:border-box;
    padding:calc(5.4068vw + 46px) 20px 120px;
    font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif !important;
    color:var(--brp-ink); letter-spacing:-.3px;
}
.brp_wrap *{ font-family:inherit !important; box-sizing:border-box; }
.brp_wrap a{ text-decoration:none; color:inherit; }
.brp_inner{ max-width:1060px; margin:0 auto; }

/* ── 게시판 목록 화면은 게시판(/franchiseNotice)과 같은 폭을 쓴다 ──
   테마가 부모 .container 를 1200px 로 묶어두므로 풀블리드로 빼낸다.
   왼쪽은 사이트 헤더 로고와 같은 5.5118vw, 오른쪽은 퀵메뉴만 피할 만큼만 남긴다.
   (로그인·승인대기 화면은 좁은 카드라 .brp_wide 를 안 붙여 가운데 정렬 그대로 둔다) */
.brp_wide{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:calc(5.4068vw + 42px) var(--brp-quick-gap) 96px 5.5118vw; }
.brp_wide .brp_inner{ max-width:none; }

/* ── 헤더 (제목 + 멤버박스) ──
   스타일은 branch/_header.css 한 곳에 있다 (게시판 스킨과 공통). 여기서 다시 그리지 않는다. */
.tmb_primary{ padding:9px 20px; background:var(--brp-y); color:#191919; font-weight:800; border-radius:8px; }
.tmb_primary:hover{ background:var(--brp-ink); color:#fff; }

/* ── 게시판 카테고리 — 분류 하나가 카드 하나. 제목줄과 목록을 한 테두리 안에 묶는다 ── */
/* 카드마다 게시판 수가 다르다. 아래가 들쭉날쭉하면 지저분해서 같은 줄끼리는 높이를 맞춘다.
   줄 높이는 그 줄에서 가장 긴 카드가 정한다(grid-auto-rows:auto + 기본 stretch).
   예전엔 1fr 로 모든 줄을 통째로 같은 높이로 세웠는데, 포털에서 게시판을 추가할 수 있게
   되면서 한 분류가 8개만 돼도 나머지 카드가 전부 그 높이로 늘어나 2/3이 빈칸이 됐다.
   min-height 로 숫자를 박으면 게시판이 늘 때마다 다시 고쳐야 한다. */
.brp_boards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-rows:auto; }
.brp_cat{ display:flex; flex-direction:column;
    border:1px solid var(--brp-line-d); border-radius:14px; background:#fff; overflow:hidden; }
/* 제목줄 = 카드 머리. 검은 알약 대신 옅은 바탕 + 노란 점, 아래는 잔선으로 목록과 나눈다 */
.brp_cat_tit{ display:flex; align-items:center; gap:8px; margin:0; padding:12px 15px;
    background:var(--brp-bg); border-bottom:1px solid var(--brp-line);
    color:var(--brp-ink); font-size:14.5px; font-weight:800; letter-spacing:-.4px; line-height:1.35; }
.brp_cat_tit:before{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--brp-yd); }
/* 게시판은 카드 안쪽 목록 행 — 테두리 없이 여백과 호버로만 구분 */
.brp_cat_list{ list-style:none; margin:0; padding:8px; display:grid; gap:2px;
    flex:1 1 auto; align-content:start; }
.brp_cat_list li a{ display:block; padding:9px 12px; border-radius:8px;
    color:var(--brp-sub); font-size:14.5px; font-weight:500; transition:background .13s, color .13s; }
.brp_cat_list li a:hover{ background:var(--brp-bg); color:var(--brp-ink); }
/* 새 글이 올라온 게시판 — 게시판 안 목록의 N(.fb_new)과 같은 모양·같은 기준(bo_new)이다.
   이름 오른쪽에 둔다. 왼쪽에 두면 행마다 이름 첫 글자가 들쭉날쭉해지고, 모바일에서는
   오른쪽 끝을 화살표(li a:after)가 이미 쓰고 있어 이름 바로 뒤가 남는 자리다. */
.bl_new{ display:inline-block; min-width:19px; height:19px; padding:0 5px; margin-left:7px;
    background:var(--brp-y); color:#191919; font-size:11.5px; font-weight:800; line-height:19px;
    text-align:center; border-radius:5px; vertical-align:1px; }


/* ── 게시판 추가·삭제 (운영 담당자 10등급에게만 그려진다) ──
   관리 화면을 따로 두지 않고 보고 있는 카드에서 바로 고치게 한다.
   버튼은 늘 떠 있되 색을 옅게 잡아 게시판 이름이 먼저 읽히게 둔다. */
.brp_saved{ margin:0 0 16px; padding:11px 16px; border:1px solid #cbe9d6; border-radius:10px;
    background:#f2fbf5; color:#1c6b3c; font-size:13.5px; font-weight:600; }
/* 삭제 버튼이 붙으면 링크가 행 전체를 못 덮는다 — 배경 하이라이트를 행(li)으로 올려야
   버튼 자리만 허옇게 뜨지 않는다. 링크 자신의 hover 배경은 그래서 끈다. */
.brp_cat_mng .brp_cat_list li{ display:flex; align-items:center; gap:4px; border-radius:8px;
    transition:background-color .13s; }
.brp_cat_mng .brp_cat_list li a{ flex:1 1 auto; min-width:0; }
.brp_cat_none{ padding:10px 12px; color:var(--brp-mut); font-size:13.5px; }
.brp_bd_edit, .brp_bd_del{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; margin-right:4px;
    padding:6px 9px; border:0; border-radius:7px; background:transparent;
    color:#c8ccd3; font-size:12.5px; font-weight:600; line-height:1; cursor:pointer;
    transition:background-color .13s, color .13s; }
.brp_bd_del i{ font-style:normal; font-size:11px; }
.brp_bd_del:focus-visible{ outline:2px solid #d33; outline-offset:1px; }
.brp_bd_edit{ color:var(--brp-mut); white-space:nowrap; }
.brp_bd_edit:focus-visible{ outline:2px solid var(--brp-yd); outline-offset:1px; }
.brp_bd_edit:active{ background:var(--brp-y-soft); color:var(--brp-ink); }
.bl_name{ overflow-wrap:anywhere; }

@media (hover:hover){
    /* 행에 올리면 행 전체가 밝아지고 삭제 글씨가 한 단계 진해진다(있다는 신호),
       삭제 버튼에 직접 올렸을 때만 빨갛게 바뀐다(누르면 지워진다는 신호). */
    .brp_cat_mng .brp_cat_list li:hover{ background:var(--brp-bg); }
    .brp_cat_mng .brp_cat_list li:hover a{ background:transparent; color:var(--brp-ink); }
    .brp_cat_mng .brp_cat_list li:hover .brp_bd_del{ color:var(--brp-mut); }
    .brp_bd_edit:hover{ background:var(--brp-y-soft); color:var(--brp-ink); }
    .brp_bd_del:hover, .brp_cat_mng .brp_cat_list li:hover .brp_bd_del:hover{
        background:#fdecec; color:#d63232; }
}
/* 추가 버튼은 카드 맨 아래 별도 띠로 둔다 — 제목줄(카드 머리)과 짝이 되는 카드 발이다.
   목록이 위 공간을 다 차지하므로(.brp_cat_list flex:1) 게시판 수가 달라도 버튼은 늘
   카드 바닥에 붙고, 같은 줄 카드끼리 높이가 같아 가로로 줄이 맞는다. */
.brp_cat_foot{ display:flex; justify-content:center; margin-top:auto; padding:9px 8px;
    background:var(--brp-bg); border-top:1px solid var(--brp-line); }
/* 버튼은 글자만 한 알약이다. 띠 전체를 채우면 눌렀을 때 카드 발이 통째로 물드는데,
   그건 버튼 hover 가 아니라 경고 띠처럼 보인다.
   hover 는 공지 배너(.brp_quick)와 같은 '흰색으로 떠오르기'로 맞춘다. */
.brp_bd_add{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 14px;
    border:1px solid transparent; border-radius:999px; background:transparent;
    color:var(--brp-mut); font-size:13px; font-weight:700; cursor:pointer;
    transition:background-color .13s, border-color .13s, color .13s; }
.brp_bd_add i{ font-style:normal; font-size:15px; line-height:1; }
.brp_bd_add:hover{ background:#fff; border-color:var(--brp-line-d); color:var(--brp-ink); }
.brp_bd_add:active{ background:var(--brp-bg); border-color:#b9bec6; }
.brp_bd_add:focus-visible{ outline:2px solid var(--brp-yd); outline-offset:2px; }

/* ── 게시판 추가 팝업 ──
   <dialog> 라 브라우저 최상위 레이어에 뜬다. 테마의 떠 있는 퀵메뉴·하단 상담바가
   z-index 를 11자리로 잡고 있어서 일반 레이어로는 덮을 수가 없다. */
/* margin:auto 를 직접 준다 — 테마 리셋의 *{margin:0} 이 브라우저 기본 dialog{margin:auto}
   를 덮어써서, 안 주면 화면 왼쪽 위에 처박힌다. */
.brp_modal{ --brp-h-input:58px;
    width:100%; max-width:520px; max-height:calc(100vh - 40px); margin:auto; overflow:auto;
    padding:30px 30px 26px; border:0; border-radius:18px; background:#fff; color:var(--brp-ink);
    box-shadow:0 18px 50px rgba(0,0,0,.22);
    font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
    letter-spacing:-.3px; }
.brp_modal::backdrop{ background:rgba(17,19,22,.5); }
.brp_modal *{ box-sizing:border-box; }
.brp_modal_tit{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.5px; color:var(--brp-ink); }
/* 어느 분류에 만드는지 — 카드에서 눌러 왔으므로 고르게 하지 않고 한 줄로 알려만 준다 */
.brp_modal_sub{ margin:9px 0 26px; font-size:13.5px; color:var(--brp-mut); line-height:1.5; }

/* 입력칸이 주인공이다 — 라벨과 설명은 옆에서 거들기만 하도록 작고 흐리게 둔다 */
.brp_fld{ margin-bottom:20px; }
.brp_fld label{ display:block; margin-bottom:8px; font-size:13.5px; font-weight:700; color:var(--brp-sub); }
.brp_fld input[type=text]{ width:100%; height:var(--brp-h-input); padding:0 16px;
    border:1px solid var(--brp-line-d); border-radius:12px; background:#fff;
    font-size:17px; font-weight:600; color:var(--brp-ink); }
.brp_fld input[type=text]::placeholder{ font-weight:400; color:#c3c8d0; }
.brp_fld input[type=text]:focus{ outline:none; border-color:var(--brp-yd);
    box-shadow:0 0 0 3px var(--brp-y-soft); }
.brp_fld em{ display:block; margin-top:8px; font-style:normal; font-size:12px; line-height:1.6; color:var(--brp-mut); }

.brp_fld input[type=text].is_bad{ border-color:#e0a3a3; }
.brp_fld input[type=text].is_bad:focus{ border-color:#d63232; box-shadow:0 0 0 3px #fdecec; }
.brp_hint{ display:block; margin-top:8px; font-size:12px; line-height:1.6; color:#c0392b; }
.brp_hint:empty{ display:none; }

.brp_modal_btns{ display:flex; gap:9px; margin-top:26px; }
.brp_mbtn{ flex:1 1 0; height:var(--brp-h-ctl); border:1px solid var(--brp-line-d); border-radius:var(--brp-r);
    background:#fff; color:var(--brp-ink); font-size:14.5px; font-weight:700; cursor:pointer;
    transition:background-color .13s, border-color .13s; }
.brp_mbtn:hover{ background:var(--brp-bg); border-color:#b9bec6; }
.brp_mbtn:focus-visible{ outline:2px solid var(--brp-yd); outline-offset:2px; }
.brp_mbtn_solid{ border-color:var(--brp-ink); background:var(--brp-ink); color:#fff; }
.brp_mbtn_solid:hover{ background:#000; border-color:#000; }

/* ── 단독 게시판 바로가기 (공지사항) — 카드 그리드 위 가로 배너 ──
   분류에 게시판이 하나뿐이면 카드로 만들 게 없다. 가장 자주 보는 곳이므로
   맨 위에 넓게 깔고, 최근 7일 안에 올라온 글을 제목 줄에서 아래→위로 돌린다.
   라벨·순번·화살표는 고정이고 .brp_roll 안쪽만 움직인다. */
.brp_quick{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:16px;
    padding:0 8px 0 18px; height:56px; border:1px solid var(--brp-line-d); border-radius:12px;
    background:var(--brp-bg); transition:border-color .16s, background-color .16s; }
.brp_quick:hover{ background:#fff; border-color:#b9bec6; }

/* 배너의 빈 영역은 게시판 목록으로 연결한다. 게시물 제목과 슬라이드 버튼은 위 레이어에서 각자 동작한다. */
.brp_quick_link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.brp_quick_link:focus-visible{ outline:2px solid var(--brp-yd); outline-offset:2px; }

/* 게시판 이름 — 눌러서 목록으로 */
.brp_quick_tit{ position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; gap:8px;
    pointer-events:none;
    font-size:15px; font-weight:800; color:var(--brp-ink); letter-spacing:-.4px; }
.brp_quick_tit:before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brp-yd); }
.brp_quick_tit:after{ content:""; width:1px; height:15px; margin-left:6px; background:var(--brp-line-d); }
.brp_quick_tit:hover{ color:#000; }

/* 순환 창 — 한 줄 높이만 보이고 나머지는 잘린다 */
.brp_roll{ position:relative; z-index:2; flex:1 1 auto; min-width:0; height:24px; overflow:hidden;
    pointer-events:none; }
.brp_roll_track{ list-style:none; margin:0; padding:0; will-change:transform; }
.brp_roll_track li{ display:flex; align-items:center; gap:9px; height:24px; min-width:0; }
.brp_roll_tit{ display:block; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    pointer-events:auto;
    font-size:14.5px; color:var(--brp-sub);
    background:linear-gradient(var(--brp-y),var(--brp-y)) left bottom/0 1px no-repeat;
    transition:color .18s ease, background-size .18s ease; }
.brp_roll_tit:hover,
.brp_roll_tit:focus-visible{ color:var(--brp-y);
    background-size:100% 1px; }
.brp_roll_tit:focus-visible{ outline:2px solid var(--brp-y); outline-offset:2px; border-radius:2px; }
/* 올린 지 7일 안 지난 글에만 붙는다 */
.brp_roll_new{ flex:0 0 auto; padding:2px 6px; border-radius:5px; background:var(--brp-y);
    font-size:10px; font-weight:800; color:#191919; letter-spacing:.3px; line-height:1.5; }
.brp_roll_day{ flex:0 0 auto; margin-left:auto; padding-left:12px;
    font-size:13px; color:var(--brp-mut); font-variant-numeric:tabular-nums; }

/* 글이 한 건도 없는 게시판 — 배너 오른쪽이 통째로 비어 보이지 않게 한 줄 넣는다 */
.brp_roll_none{ position:relative; z-index:2; flex:1 1 auto; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; pointer-events:none;
    font-size:14.5px; color:var(--brp-mut); }

/* ── 조작부 : 순번 + 이전/다음 ── */
.brp_roll_nav{ position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; gap:6px; padding-left:12px;
    pointer-events:none;
    border-left:1px solid var(--brp-line-d); }
.brp_roll_num{ font-size:12.5px; font-weight:600; color:var(--brp-mut);
    font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.brp_roll_num b{ color:var(--brp-ink); font-weight:700; }
.brp_roll_num i{ font-style:normal; margin:0 1px; opacity:.5; }
.brp_roll_btn{ width:26px; height:26px; padding:0; border:1px solid var(--brp-line-d);
    border-radius:8px; background:#fff no-repeat center/5px 9px; cursor:pointer;
    pointer-events:auto;
    transition:border-color .14s, background-color .14s; }
.brp_roll_prev{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none"><path d="M5.5 1 1.5 6l4 5" stroke="%238a909a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.brp_roll_next{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none"><path d="M1.5 1 5.5 6l-4 5" stroke="%238a909a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.brp_roll_btn:hover{ border-color:var(--brp-ink); background-color:#f2f3f5; }
.brp_roll_prev:hover{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none"><path d="M5.5 1 1.5 6l4 5" stroke="%231a1a1a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.brp_roll_next:hover{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none"><path d="M1.5 1 5.5 6l-4 5" stroke="%231a1a1a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.brp_roll_btn:active{ background-color:#e7e9ec; }
.brp_roll_btn:focus-visible{ outline:2px solid var(--brp-yd); outline-offset:1px; }

@media (max-width:599px){
    .brp_quick{ height:auto; padding:12px 10px 12px 16px; gap:8px; flex-wrap:wrap; }
    .brp_quick_tit:after{ display:none; }
    .brp_roll{ flex:1 1 100%; order:3; height:22px; }
    .brp_roll_track li{ height:22px; }
    .brp_roll_tit{ font-size:13.5px; }
    .brp_roll_day{ display:none; }
    .brp_roll_nav{ margin-left:auto; border-left:0; padding-left:0; }
}

/* ── 회원 로그인 ── */
.brl_page{ max-width:430px; margin:0 auto; }
.brl_title{ font-size:26px; font-weight:800; text-align:center; margin:0 0 40px; letter-spacing:-1px; }
.brl_card{ border-top:1px solid var(--brp-sep); padding:34px 0 0; }
.brl_cap{ font-size:15px; font-weight:800; margin:0 0 16px; letter-spacing:-.4px; }
.brl_notice{ margin:0 0 20px; padding:14px 16px; background:#fff8dd; border-radius:var(--brp-r); font-size:14px; color:#7a6300; line-height:1.6; }

.brl_input{ display:block; width:100%; height:var(--brp-h-ctl); padding:0 16px; margin-bottom:10px;
    border:1px solid var(--brp-line-d); border-radius:var(--brp-r); background:#fff; font-size:15px; color:#222; outline:none; transition:border-color .15s; }
.brl_input::placeholder{ color:#b5bac2; }
.brl_input:focus{ border-color:var(--brp-ink); }

.brl_row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 22px; }
.brl_keep{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:#4a4f57; cursor:pointer; user-select:none; }
.brl_keep input{ width:16px; height:16px; accent-color:var(--brp-ink); margin:0; cursor:pointer; }
.brl_find{ display:inline-flex; align-items:center; font-size:14px; color:#6a707b; }
.brl_find a{ position:relative; padding:0 11px; transition:color .15s; }
.brl_find a:hover{ color:#111; text-decoration:underline; }
.brl_find a:before{ content:"·"; position:absolute; left:-2px; color:#c8ccd2; }
/* 가운뎃점은 링크 '사이'에만 — 첫 링크 앞의 점은 가를 대상이 없어 군더더기로 보인다.
   양 끝 패딩도 함께 걷어 아래 버튼들과 왼·오른쪽 끝을 맞춘다 */
.brl_find a:first-child{ padding-left:0; }
.brl_find a:first-child:before{ display:none; }
.brl_find a:last-child{ padding-right:0; }

.brl_btn{ display:flex; align-items:center; justify-content:center; width:100%; height:var(--brp-h-ctl); margin-bottom:10px;
    border:1px solid var(--brp-ink); border-radius:var(--brp-r); font-size:15px; font-weight:700; letter-spacing:-.4px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.brl_btn_solid{ background:var(--brp-ink); color:#fff; }
.brl_btn_solid:hover{ background:var(--brp-y); color:#191919; border-color:var(--brp-y); }
.brl_btn_line{ background:#fff; color:var(--brp-sub); border-color:var(--brp-line-d); }
.brl_btn_line:hover{ color:var(--brp-ink); border-color:var(--brp-ink); }

/* ── 승인 대기 안내 ── */
.brp_wait{ max-width:520px; margin:0 auto; text-align:center; padding:40px 0 20px; }
.brp_wait_ico{ font-size:42px; line-height:1; margin-bottom:18px; }
.brp_wait_tit{ font-size:24px; font-weight:800; margin:0 0 16px; letter-spacing:-.8px; }
.brp_wait_msg{ font-size:15.5px; color:#5a616b; line-height:1.85; margin:0 0 10px; }
.brp_wait_msg strong{ color:#111; font-weight:800; }
.brp_wait_sub{ font-size:14px; color:#8a9099; margin:0 0 34px; }
.brp_wait_sub b{ color:#3a3f47; font-weight:700; }
.brp_wait_btns{ display:flex; gap:10px; }
.brp_wait_btns .brl_btn{ margin-bottom:0; }

@media (max-width:1100px){ .brp_wide{ padding-left:3.5vw; } }
@media (max-width:960px){ .brp_boards{ grid-template-columns:repeat(2,1fr); gap:16px; } }

/* ── 상단바는 branch/_header.css 가 860px 이하까지 전부 맡는다 ── */
@media (max-width:860px){ :root{ --brp-h-ctl:50px; } }

/* ── 모바일: 헤더(15vw) 안 가리게 + 진짜 모바일 레이아웃(단일 컬럼 큰 탭) ── */
@media (max-width:599px){
    .brp_wrap{ padding:calc(15vw + 28px) 16px 84px; }
    /* 한 줄로 쌓이는 화면에서 높이를 맞추면 빈 칸만 길어진다 — 내용만큼만 */
    .brp_boards{ grid-template-columns:1fr; gap:14px; grid-auto-rows:auto; }
    .brp_cat_tit{ font-size:14px; padding:12px 16px; }
    /* 카드가 화면 폭을 다 쓰니 행 사이 여백은 빼고 잔선으로만 나눈다 (붙은 목록이 덜 허전하다).
       마지막 행 배경은 .brp_cat 의 overflow:hidden 이 둥근 모서리에 맞춰 잘라준다 */
    .brp_cat_list{ padding:0; gap:0; }
    .brp_cat_list li + li{ border-top:1px solid var(--brp-line); }
    /* 호버가 없는 화면이라 글자는 처음부터 잉크색, 오른쪽 화살표로 누를 곳임을 알린다 */
    .brp_cat_list li a{ display:flex; align-items:center; gap:10px; padding:13px 16px;
        border-radius:0; color:var(--brp-ink); font-size:15px; }
    /* 행이 flex(gap:10px)로 바뀌니 배지 margin 은 겹치지 않게 뺀다 */
    .bl_new{ flex:0 0 auto; margin-left:0; }
    .brp_cat_list li a:after{ content:""; flex:0 0 7px; margin-left:auto; height:12px;
        background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" fill="none"><path d="M1.5 1.5 6.5 6.5l-5 5" stroke="%23c3c8d0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain; }
    .brp_cat_list li a:active{ background:var(--brp-bg); }
    /* 관리 행은 오른쪽 화살표 자리를 삭제 버튼에게 넘긴다 (손가락으로 집을 크기로 키운다) */
    .brp_cat_mng .brp_cat_list li a:after{ display:none; }
    /* 잔선으로 나누는 목록이라 행 모서리는 각지게 두고, 누른 티는 :active 로만 낸다 */
    .brp_cat_mng .brp_cat_list li{ padding-right:6px; border-radius:0; }
    .brp_cat_mng .brp_cat_list li:active{ background:var(--brp-bg); }
    .brp_bd_del:active{ background:#fdecec; color:#d63232; }
    .brp_cat_none{ padding:13px 16px; }
    .brp_bd_edit, .brp_bd_del{ padding:11px 10px; min-height:44px; }
    /* 손가락으로 누르는 화면에서는 알약 대신 띠 전체를 누를 수 있게 넓힌다 */
    .brp_cat_foot{ padding:6px 10px; }
    .brp_bd_add{ width:100%; justify-content:center; height:44px; border-radius:10px; font-size:13.5px; }
    /* 팝업은 아래에서 올라오는 시트로 — 한 손으로 닿는 자리에 버튼이 온다 */
    .brp_modal{ --brp-h-input:54px;
        max-width:none; max-height:88vh; margin:auto auto 0; padding:24px 18px 20px;
        border-radius:18px 18px 0 0; }
    .brp_modal_tit{ font-size:19px; }
    .brp_modal_sub{ margin-bottom:22px; }
    .brp_fld input[type=text]{ font-size:16px; }   /* 16px 미만이면 iOS 가 화면을 확대한다 */
    .brl_title{ font-size:22px; margin-bottom:28px; }
    .brl_card{ padding-top:26px; }
    .brl_row{ gap:10px; margin:6px 0 18px; }
    /* 체크박스·찾기 링크는 글자 높이(16px)라 손가락으로 집기 어렵다 — 세로 패딩으로 40px 을 만든다 */
    .brl_keep{ min-height:40px; }
    .brl_keep input{ width:18px; height:18px; }
    .brl_find a{ padding:12px 11px; }
    .brp_wait_btns{ flex-direction:column; }
    .brp_wait_btns .brl_btn{ margin-bottom:0; }
}