/* ══════════════════════════════════════════════════════════════
   수원청년회의소 — 「부산JC 벤치마킹」 화면 단장 (2026-08-31)

   무엇을 하는 파일인가
     기존 공통 파일(assets/site.css)은 «한 글자도» 건드리지 않고,
     그 위에 덧입히는 «껍데기(생김새) 전용» 파일이다.
     상단 파란 유틸바 · 가운데 로고 머리말 · 흰 메뉴바 · 회색/흰색 섹션 교차 — 이 넷이 전부다.

   ★왜 site.css 를 안 고쳤나
     site.css 는 16개 페이지가 함께 쓴다. 거기를 고치면 이번에 손대지 말라고 하신
     가입신청·회원수첩·특우회·관리자 화면까지 전부 함께 바뀐다.
     이 파일은 홈(index.html)과 MOU 업체(partners.html) 두 곳만 불러 쓴다.

   ★되돌리는 법 (아주 쉽다)
     아래 규칙은 «전부» `body.bs ...` 로 묶여 있다.
     두 페이지의 <body class="bs"> 에서 글자 두 개(bs)만 지우면 이 파일은 통째로 잠든다.
     (완전 복구는 _백업_2026-08-31_부산벤치마킹_직전/0.되돌리는법.txt 참고)

   ★손대지 않은 것 — 자료를 읽는 코드, 이름표(id), 링크 주소, 메뉴 낱말, 전화 표기.
     이 파일에는 자바스크립트가 한 줄도 없다. 색과 자리만 정한다.

   ★대비(WCAG AA) — 이 파일이 새로 쓰는 색만 적는다
     · 유틸바   흰 글자 / #2F5796 … 7.18 : 1  (기준 4.5 통과)
     · 메뉴 글자 #333 / 흰 바탕   … 12.63 : 1
     · 켜진 메뉴 흰 글자 / #2F5796 … 7.18 : 1
     · 회색 섹션 #EDF0F4 위 본문 --ink-2 … 7.76 : 1  (기준 4.5 통과)
     ※ --ink-3(#6E6B85)는 이 회색 위에서 4.48 : 1 로 «기준에 못 미친다» —
       그래서 아래 ⑥에서 「불러오는 중·아직 없습니다」 칸에 흰 바탕을 깔아 준다.
       회색 섹션 위에 --ink-3 로 글자를 새로 놓지 말 것(흰 카드 안에는 괜찮다).
     · 회색 섹션 위 초점 테두리 — 아래 ④ 참고(기본 하늘색은 이 바탕에서 2.87 : 1 로 미달)
     ※ 시안(GPT안)의 유틸바·메뉴 파랑 #4688E3 은 흰 글자가 3.36 : 1 뿐이라 13px 글자가
       기준에 못 미친다. 같은 계열에서 이미 site.css 가 쓰고 있는 --blue-2(#2F5796)로
       바꿔 잡았다 — 눈으로 보이는 색감은 거의 같고 대비만 두 배가 된다.
   ══════════════════════════════════════════════════════════════ */

body.bs{
  /* 머리말 높이 — 접이식 메뉴가 «머리말 바로 아래»에 내려오게 하는 기준값이기도 하다.
     (site.css 의 모바일 규칙이 top:64px 로 못박아 두었던 자리를 이 값으로 바꿔 쓴다) */
  --bs-mast-h:88px;
  /* 회색 섹션. site.css 의 --paper-2(#F7F9FB)는 흰색과 거의 같아 «띠가 바뀐 느낌»이 안 났다.
     부산JC 의 회색 띠(#EEEEEE)와 같은 밝기이되, 이 사이트 바탕이 푸른 기가 도는 흰색이라
     푸른 기를 아주 조금 섞었다(순회색은 이 화면에서 누렇게 뜬다). */
  --bs-soft:#EDF0F4;
  /* 부산JC 카드 모서리 실측 = 6px (site.css 의 12/16px 보다 각지다) */
  --bs-r:6px;
  --bs-sh:0 8px 24px rgba(19,15,45,.08);
  --bs-sh-lg:0 18px 42px rgba(19,15,45,.12);
  /* ★2026-08-31 검수에서 더함 — 카드 «모서리·그림자» 정본.
     홈·MOU 가 6px + 진한 그림자를 직접 박아 쓰고 나머지 화면은 site.css 의 12px + 아주 옅은
     그림자를 써서, 같은 회장님 카드가 화면마다 다른 모양이었다.
     여기 한 곳에 값을 모아 두고 두 화면이 이 이름표를 쓰게 한다 —
     나중에 다른 화면까지 부산결로 넓힐 때도 이 두 줄만 보면 된다. */
  /* ★2026-09-14 디자인 검수 M5 — 이 값이 사이트 토큰(12px · --sh-1)과 다른 «세 번째 카드 모양»이 되어, 같은 공지 카드가
     홈과 공지사항에서 달랐다 → 이름은 그대로 두고 사이트 토큰에 연결한다(홈·MOU 13곳이 한 번에 맞는다). */
  --card-r:var(--r-card);
  --card-sh:var(--sh-1);
  --card-sh-hi:var(--sh-2);
}

/* ── ① 상단 파란 유틸바 ─────────────────────────────
   site.css 는 이 자리를 «연회색»으로 둔다(2026-08-19 「찐한 군청 대면적 금지」 지시).
   부산JC 는 여기가 파란 띠다. 높이 36px 짜리 얇은 띠라 «대면적»에 해당하지 않는다. */
body.bs .topbar{background:var(--blue-2);color:#fff;border-bottom:0;font-size:13px}
body.bs .topbar .wrap{height:36px;gap:18px}
body.bs .topbar .tel{color:#fff}
body.bs .topbar a:focus-visible{outline-color:#fff}

/* ── ② 가운데 로고 머리말 ───────────────────────────
   HTML 짜임새만 «위(로고) / 아래(메뉴)» 두 층으로 나눴다.
   브랜드 링크 안쪽(<img>·<b>·<span>)은 하나도 건드리지 않고 격자로만 세로로 세운다 —
   여기에 <div> 를 새로 끼우면 site.css 의 `.brand span{display:none}`(좁은 화면 규칙)이
   상호까지 통째로 감춰 버린다. */
body.bs header.site{border-bottom:0;box-shadow:0 3px 8px rgba(19,15,45,.09)}
body.bs .bs-mast{background:#fff;height:var(--bs-mast-h)}
body.bs .bs-mast>.wrap{display:flex;align-items:center;justify-content:center;
  position:relative;height:100%;gap:0}
body.bs .brand{display:grid;grid-template-columns:auto auto;column-gap:13px;row-gap:1px;
  align-items:center;justify-content:center}
body.bs .brand img.mark{grid-row:1/3;width:48px;height:48px}
body.bs .brand b{grid-column:2;grid-row:1;font-size:24px;font-weight:800;line-height:1.15;
  letter-spacing:-.035em}
body.bs .brand span{grid-column:2;grid-row:2;font-size:12px;line-height:1.2;letter-spacing:.14em}

/* 오른쪽 끝 단추 — 메뉴에 이미 있는 「가입안내/신청」과 «같은 주소·같은 낱말»이다.
   부산JC 머리말 오른쪽의 [입회신청서] 자리를 그대로 옮긴 것으로, 새 기능이 아니다.
   (right 는 0 이 아니라 var(--pad) — 0 이면 .wrap 의 좌우 여백 바깥까지 밀려난다) */
body.bs .bs-mast__actions{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;gap:8px}
/* 높이 44px = 손가락으로 누르기 편한 최소 크기(이 프로젝트가 지켜 온 값).
   부산 원본은 38px 이지만 그 값은 이 사이트의 다른 단추들과 어긋난다. */
body.bs .bs-mast__actions .btn{min-height:44px;padding:10px 18px;font-size:14px;font-weight:700;
  border-radius:var(--bs-r)}
/* ★2026-09-14 디자인 검수 M9 — 첫 화면에 같은 «가입안내/신청» 채운 단추가 둘(머리말·히어로) + 떠 있는 문의 단추로 시선이 흩어졌다.
   자리·낱말·주소는 그대로 두고, 머리말 쪽만 테두리 단추로 한 단 낮춘다(글자 6.22:1 · 테두리 3.35:1). */
body.bs .bs-mast__actions .btn{background:#fff;color:var(--blue-dk);border-color:var(--line-input);box-shadow:none}
body.bs .bs-mast__actions .btn:hover{background:var(--paper-2);border-color:var(--blue-dk)}

/* ── ③ 흰 메뉴바 ────────────────────────────────────
   ★ nav.main 은 <a> 를 «직접» 자식으로 두어야 한다(가운데 <div> 를 끼우지 않는다).
     site.css 의 좁은 화면 접이식 규칙이 `nav.main a` 를 곧바로 겨냥하고 있어서,
     한 겹만 끼워도 휴대전화 메뉴가 통째로 무너진다.
   ★ 넓은 화면 규칙은 반드시 @media (min-width:1160.02px) 안에 둔다.
     ★2026-08-31 재검토에서 고침 — 처음에는 1161px 로 적었는데, 그러면 «1160 초과 1161 미만»
       (화면 배율 125%·브라우저 확대에서 실제로 생기는 소수점 폭)이 두 규칙 «어디에도»
       걸리지 않아 메뉴바가 통째로 민얼굴이 된다. site.css 의 접이식 전환점이 max-width:1160px
       이므로 그 바로 위에서 이어받게 1160.02px 로 맞췄다.
     이 파일 선택자가 site.css 보다 «세서», 밖에 두면 좁은 화면에서 접이식으로 숨어야 할
     메뉴를 도로 펼쳐 버린다(가로 스크롤의 원인이 된다). */
@media (min-width:1160.02px){
  body.bs nav.main{margin-left:0;display:flex;justify-content:center;align-items:center;gap:0;
    background:#fff;border-top:1px solid var(--line)}
  /* 글자·여백을 화면 폭에 맞춰 줄인다. 메뉴 10개 실측 필요폭 —
     창 1280px 에서 967px · 창 1161px 에서 891px → 어느 쪽도 넘치지 않는다. */
  body.bs nav.main a{padding:17px clamp(9px,1.25vw,22px);font-size:14px;
    font-weight:700;color:var(--ink-2);line-height:1.2;border-bottom:0}
  body.bs nav.main a:hover{background:var(--blue-2);color:#fff}
  /* 지금 보고 계신 메뉴 — app.js 가 aria-current="page" 를 붙여 준다(그 코드는 그대로다).
     밑줄 한 줄이던 표시를 부산처럼 «파란 칸»으로 바꾼다. 색만으로 알리지 않도록
     글자 굵기(800)도 함께 올린다. */
  body.bs nav.main a[aria-current]{background:var(--blue-2);color:#fff;font-weight:700;
    border-bottom-color:transparent}

  /* ★2026-08-31 재검토에서 더함 — 「본문 바로가기」·앵커(#…)로 건너뛴 자리가 머리말에 가리지 않게.
     왜: 공통 파일이 [id]{scroll-margin-top:112px} 로 잡아 둔 값은 «예전 머리말 64px» 기준이다.
         부산 결에서는 머리말이 위(로고 88px) + 아래(메뉴바) 두 층이라 141px 이 따라다녀,
         112px 만 비우면 건너뛴 자리의 첫머리가 메뉴바 밑에 깔린다.
     ※ 이 규칙은 «넓은 화면 블록 안»에 둔다 — 좁은 화면은 메뉴바가 접혀 머리말이 64px 이라
       공통 파일의 112px 이면 넉넉하다(밖에 두면 좁은 화면까지 끌려간다). */
  /* ★2026-09-14 디자인 검수 M2 — 스크롤 내내 머리말 140px(로고 칸 88 + 메뉴바 52)이 화면을 가렸다.
     로고 칸만 위로 올려 보내고 메뉴바는 남긴다(가림 140 → 52px). 부산 구조(로고·메뉴바 두 층)는 그대로다. */
  body.bs header.site{top:calc(-1 * var(--bs-mast-h))}
  /* ★2026-09-14 접근성 M1 — 초점이 메뉴바(52px) 밑에 숨지 않게 화면 위 여백을 64px 로(site.css 의 76px 을 넓은 화면만 줄임).
     앵커(#) 이동 자리는 예전과 같다 — [id] 를 72 → 8px 로 줄여 합(64 + 8)을 72px 로 맞췄다. */
  html{scroll-padding-top:64px}
  body.bs [id]{scroll-margin-top:8px}
  /* ★2026-09-14 속도(CLS) — site.css 의 main 최소 높이를 넓은 화면 머리말(상단바 36 + 로고 칸 88 + 메뉴바 52 = 176px)에 맞춘다 */
  body.bs main{min-height:calc(100vh - 176px)}
}
/* 좁은 화면(접이식) — site.css 가 `top:64px` 으로 못박아 둔 자리를 머리말 실제 높이로 바꾼다.
   이 한 줄이 없으면 머리말이 88px 일 때 메뉴가 24px 겹쳐서 내려온다. */
@media (max-width:1160px){
  body.bs{--bs-mast-h:64px}
  body.bs nav.main{top:var(--bs-mast-h);border-top:0}
  body.bs nav.main a{font-size:15px;font-weight:700;color:var(--ink-2)}
  body.bs nav.main a[aria-current]{background:var(--blue-2);color:#fff;font-weight:700}
  body.bs .bs-mast>.wrap{justify-content:flex-start}
  body.bs .bs-mast__actions{display:none}   /* 좁은 화면은 햄버거 단추가 그 자리를 쓴다 */
  body.bs .brand img.mark{width:40px;height:40px}
  body.bs .brand b{font-size:19px}
  body.bs .brand span{font-size:11px}
}
@media (min-width:1280px){ body.bs nav.main a{font-size:15px} }
/* ★2026-09-14 디자인 검수 H2 — 640px 아래는 «JCI SUWON»(2행)이 숨어 상호(1행)가 위 절반에만 앉았다 → 두 행을 함께 쓰게 해 마크와 가운데를 맞춘다 */
@media (max-width:640px){ body.bs .brand b{grid-row:1 / 3} }

/* ── ④ 회색 / 흰색 섹션 교차 ────────────────────────
   ★ 어느 섹션이 회색이 될지는 예전처럼 index.html 맨 아래 스크립트가 정한다
     (보이는 섹션만 한 칸 걸러 .sec--tint 를 붙이는 그 코드 — 손대지 않았다).
     여기서는 그 «회색의 진하기»만 한 단 올린다. */
body.bs .sec--tint{background:var(--bs-soft)}
/* ★2026-08-31 재검토에서 더함 — 회색 섹션 «위»에서만 초점 테두리를 진한 파랑으로 바꾼다.
   왜: 공통 규칙의 초점 테두리는 JCI 하늘색(#0097D7)인데, 이 회색(#EDF0F4) 위에서 2.87 : 1 로
       「누르는 것의 윤곽 3 : 1」(WCAG 1.4.11)에 못 미친다. 예전 옅은 회색(#F7F9FB)에서는
       3.11 : 1 로 겨우 통과하던 것이 바탕을 진하게 하면서 함께 내려갔다.
       --blue-dk(#00688F)로 바꾸면 같은 바탕에서 5.44 : 1 이다.
   ※ 굵기·간격(3px / 2px 띄움)은 그대로다 — 바뀌는 것은 색 하나뿐이고, 회색 섹션 밖은 그대로다. */
body.bs .sec--tint a:focus-visible,
body.bs .sec--tint button:focus-visible{outline-color:var(--blue-dk)}
/* ★2026-09-14 접근성 M6 — 홈 「MOU 업체」 띠(#secPartners)는 .sec--tint 없이 스스로 회색이라 위 규칙에서 빠져 있었다(2.87:1 → 5.44:1) */
body.bs #secPartners a:focus-visible,
body.bs #secPartners button:focus-visible{outline-color:var(--blue-dk)}

/* ── ⑤ 섹션 제목 (왼쪽 정렬 + 오른쪽 「전체 보기」) ──
   부산JC 방식 = 작은 딱지 → 큰 제목 → 한 줄 설명 을 왼쪽에 쌓고,
   「전체 보기 →」는 같은 줄 오른쪽 끝에 둔다(주소·낱말은 예전 그대로다). */
body.bs .bs-sechead{display:flex;align-items:flex-end;gap:20px;
  margin:0 0 clamp(24px,3vw,34px)}
body.bs .bs-sechead>div{min-width:0}
body.bs .bs-sechead .sechead__badge{display:inline-block;margin:0 0 12px;padding:6px 14px;
  border-radius:var(--r-pill);background:var(--blue-tint);color:var(--blue-dk);
  font-size:13px;font-weight:700;line-height:1.3;font-style:normal;letter-spacing:.01em}
body.bs .bs-sechead h2{margin:0;color:var(--navy);font-size:clamp(26px,3vw,36px);
  font-weight:700;letter-spacing:-.02em;line-height:1.25;white-space:normal}
body.bs .bs-sechead .sechead__sub{margin:9px 0 0;color:var(--ink-2);font-size:16px;
  line-height:1.7;text-wrap:pretty}   /* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 58ch 폭 제한 삭제 */
body.bs .bs-more{flex:0 0 auto;margin-left:auto;min-height:44px;display:inline-flex;
  align-items:center;gap:7px;color:var(--blue-dk);font-size:14px;font-weight:600;
  text-decoration:none;white-space:nowrap}
body.bs .bs-more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  body.bs .bs-sechead{display:block}
  body.bs .bs-more{margin:10px 0 0}
  body.bs .bs-sechead h2{font-size:26px}
}

/* ── ⑥ 빈 상태 / 불러오는 중 ───────────────────────
   회색 섹션 위에서도 «칸» 이 보이도록 흰 바탕을 깔아 준다(부산 게시판과 같은 결). */
/* ★2026-08-31 검수 — 예전에는 여기서 흰 바탕 + 점선을 다시 씌우고 있었다.
   1단계에서 공통 파일(site.css)의 .empty 를 «점선 없는 안내 판»으로 바꿨으므로,
   여기서 도로 점선을 덮으면 헛일이 된다 → 바탕만 흰색으로 올려 회색 섹션 위에서도 보이게 한다. */
/* ★2026-09-14 디자인 검수 M7 — 흰 섹션에서는 흰 상자 위 «둥글게 휜 3px 선»만 보여 괄호 모양이었다 → 옅은 테두리 + 곧은 왼쪽 막대 */
body.bs .empty{background:#fff;border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 var(--r-card) var(--r-card) 0}
body.bs .loading{background:#fff;border:0;border-radius:var(--r-card)}

/* ── ⑦ 움직임 줄이기 ───────────────────────────────
   운영체제에서 「동작 줄이기」를 켜신 분께는 이 파일이 더한 움직임도 함께 끈다. */
@media (prefers-reduced-motion:reduce){
  body.bs *{animation:none!important;transition:none!important}
}