/* ══════════════════════════════════════════════════════════════
   수원청년회의소 — 공통 디자인 시스템
   ★2026-08-28 «부산JC(jcibusan.com) 결»로 다시 잡았다 — 대표님 지시.
     가져온 것 = 짜임새·여백 리듬·글자 크기 단계·모서리·그림자 «모양»만.
     가져오지 않은 것 = 부산 로고·사진·문구(카피). 사진과 글은 수원JC 것 그대로다.
   방향: 밝고 넓은 «떠 있는 카드»(soft-elevated)
     · 흰 본문 + 아주 옅은 회색 띠(--paper-2) · 푸터만 남색(지면 아래 무게)
     · 하위 페이지 제목은 «JCI 파랑 띠»(.pagehead) 하나로 통일
     · 카드 = 둥근 모서리(12~16px) + 옅은 테두리 + 부드러운 그림자
     · 섹션 제목 옆 헤어라인은 감췄다(관공서 느낌의 주범 · .sechead .rule 참고)
   색은 JCI 공식 로고 픽셀 실측값 (Navy #130F2D · Blue #0097D7) — 부산JC 의 파랑도
     한 글자도 다르지 않은 #0097D7 이라, 색은 «거의 바꿀 것이 없었다».
   ★대비(WCAG AA) 원칙 — 이 파일에서 정한 것
     · 본문 글자 4.5:1 · 큰 글자(24px 굵게/32px) 3:1 · 누르는 것의 윤곽 3:1
     · #0097D7 위에 흰 글자는 3.28:1 뿐 → «장식(선·테두리·아이콘)»으로만 쓴다
     · 글자를 얹는 파랑은 --blue-dk #00688F (6.22:1)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ══ ① 색 ══════════════════════════════════════════════════
     2026-08-28 부산JC 결로 다시 잡으면서 확인한 것 — «색은 거의 바꿀 것이 없었다».
     부산JC 의 파랑 #0097D7 은 이 사이트가 예전부터 쓰던 --blue 와 한 글자도 같다
     (둘 다 JCI 공식 하늘색). 부산 느낌이 안 나던 진짜 까닭은 색이 아니라
     «모서리·그림자·여백·제목 띠»였다. 그래서 색은 아래 넷만 손봤다.
       ⓐ --paper-2 를 더 밝게(대표님 「바탕을 더 밝게」)
       ⓑ --line 을 더 옅게(대표님 「테두리를 더 옅게」)
       ⓒ --teal 값을 JCI 하늘색으로 통일(부산 결에 청록이 없다 · 이름은 그대로 둔다)
       ⓓ 새 색 다섯을 «더했다»(--blue-2 · --gold · --gold-ink · --ink-icon · --line-soft)
     ★변수 «이름»은 하나도 바꾸지 않았다 — 16개 페이지의 <style> 이 var(--navy) 처럼
       이 이름들을 직접 쓰고 있어서, 이름을 바꾸면 그 페이지들이 색을 잃는다. */
  --navy:#130F2D;      /* 흰 바탕 위 글자 18.52:1 — 푸터 바탕·가장 진한 글자 */
  --navy-2:#1E1A3C;
  --navy-3:#2C2752;
  /* JCI 하늘색. ★흰 글자를 얹으면 3.28:1 뿐이다(부산은 [로그인] 단추에 이 색을 써서 미달).
     → 이 색은 선·4px 띠·초점 테두리·아이콘 같은 «장식»으로만 쓴다. 작은 글자 바탕 금지. */
  --blue:#0097D7;
  --blue-dk:#00688F;   /* «글자를 얹는» 파랑. 흰 글자 6.22:1 · 흰 바탕 위 글자 6.22:1 */
  /* ★새로 더함 — 페이지 제목 띠(.pagehead)의 오른쪽 끝 색.
     부산 원본 그라데이션 끝(#3A67B1)을 한 단 어둡게 잡았다.
     왜: 부산 그대로면 띠 왼쪽 끝에서 흰 글자가 3.28:1 이라 빵부스러기(13px)·설명(16px)이
         전부 미달한다. #00688F(6.22:1) → #2F5796(7.18:1) 으로 잡으면 띠 «어느 지점에서도»
         작은 글자까지 통과한다. 밝은 #0097D7 은 띠 아래 4px 선으로 남겨 색을 살렸다. */
  --blue-2:#2F5796;
  /* ★새로 더함 — 부산이 포인트로 쓰는 금색. ★«바탕»으로만 쓰고 그 위 글자는 --navy 로 둔다(10.62:1).
     흰 글자를 얹으면 1.75:1 로 크게 미달한다(부산 [입회신청서] 단추가 실제로 그 상태다). */
  /* ★2026-08-28 대표님 지시 — "우리 JC에는 회장은 빨간색 넥타이를 맨다.
     명단에서도 회장은 빨간색이고, 상임부회장은 파란색이면 좋겠어.
     근데 너무 빨간색이면 무슨 빨갱이 같잖아?"
     → 쨍한 빨강(#C0392B 흰 글자 5.44:1)이 아니라 «깊고 탁한 빨강»을 골랐다.
       넥타이색에 가깝고, 남색·금색과도 겉돌지 않는다. */
  --red:#9E2B32;       /* 회장. 흰 글자 7.38:1 */
  --red-ink:#8A252C;   /* 그 위에 손을 올렸을 때 한 단 더 짙게 */
  --gold:#EDBE38;
  /* ★새로 더함 — 금색을 «글자»로 흰 바탕에 쓸 때(원래 금색은 흰 바탕 1.75:1). 흰 바탕 5.54:1 */
  --gold-ink:#8A6100;
  /* 예전 청록. ★2026-08-28 값을 JCI 하늘색으로 통일했다 — 부산 결에는 청록이 없고,
     이 색은 인용문·JCI신조 상자의 «왼쪽 3px 선» 한 자리에만 남아 겉돌았다.
     ★이름(--teal)은 그대로 둔다 — about-jc.html 의 .creed 가 var(--teal) 을 직접 쓴다.
       (이름을 지우면 그 상자의 왼쪽 선이 사라진다. 값만 바꿔 두면 그 페이지도 함께 파래진다) */
  --teal:#0097D7;
  /* ★새로 더함 — 아주 옅은 하늘 바탕. 부산의 「Gallery」 같은 라벨 뱃지 자리.
     이 바탕 위 --blue-dk 글자 5.71:1(흰 바탕에 겹쳤을 때 실측) — 14px 글자도 통과한다. */
  --blue-tint:rgba(0,151,215,.08);

  --paper:#FFFFFF;
  /* 2026-08-28 «바탕을 더 밝게»(대표님 지시) — #F4F6F8 → #F7F9FB (부산 gray-50 #F9FAFB 자리).
     대비도 함께 좋아졌다: 이 바탕 위 --ink-2 글자 8.49:1(전 8.18:1) · --ink-3 4.90:1(전 4.72:1). */
  --paper-2:#F7F9FB;
  /* 2026-08-28 «테두리를 더 옅게»(대표님 지시) — #E1E6EB → #E5E9EE (부산 #E5E7EB 자리).
     흰 바탕 대비 1.26:1 → 1.22:1. 카드가 그림자로 살짝 떠 있게 되어 선이 예전만큼 진할 필요가 없다.
     ★이 색은 «장식» 선(카드·표·구분선)에만 쓴다 — 누르는 칸의 윤곽은 아래 --line-input 이다. */
  --line:#E5E9EE;
  --line-2:#CFD6DE;
  /* ★새로 더함 — 카드 «안쪽» 칸막이선(부산 gray-100 자리). 흰 바탕 1.13:1.
     장식선이라 대비 기준이 걸리지 않는다. 다만 이보다 더 옅게 하면 선이 있는지조차 안 보인다. */
  --line-soft:#EEF1F4;
  /* ★2026-08-27 「글 쓰는 칸」 테두리 전용 색 — 접근성(WCAG AA) 때문에 새로 만들었다.
     왜: 지금까지 입력칸 테두리는 카드·표에 쓰던 옅은 선 색을 그대로 썼는데,
         흰 바탕 대비가 --line 1.26:1 · --line-2 1.47:1 밖에 안 됐다.
         눈이 밝지 않으신 분께는 「여기가 글 쓰는 칸」이라는 표시가 사실상 안 보인다.
         WCAG AA(1.4.11 비텍스트 대비)는 이런 조작 칸의 테두리에 3:1 이상을 요구한다.
     고른 값: #7E8EA0 — 지금 선 색과 같은 푸른 회색 계열(색상 212°)을 유지하면서
         3:1 을 겨우 넘기는 가장 옅은 값이다(불필요하게 진하게 만들지 않았다).
         실측 대비 — 흰 바탕(#FFFFFF) 3.35:1 · 연회색 바탕(--paper-2 #F7F9FB) 3.21:1.
         (2026-08-28 --paper-2 를 밝게 바꾸면서 다시 계산했다 — 3.09:1 → 3.21:1 로 오히려 나아졌다)
         (연회색까지 따진 이유: 소개 페이지 「조직기구표」의 연도 고르는 칸이
          연회색 섹션 위에 놓여 있어서, 그 위에서도 3:1 을 넘겨야 하기 때문)
     ※ 이 색은 입력칸 테두리에만 쓴다. 카드·표 선(--line/--line-2)은 그대로 두었다
        — 그 값을 건드리면 화면 전체 인상이 달라진다. */
  --line-input:#7E8EA0;

  --ink:#130F2D;       /* 흰 바탕 18.52:1 */
  /* ★2026-09-14 디자인 검수 M3 — 남색에서 파생된 «보라 기운»(색상각 247°) 회색을 선·입력칸과 같은 «파란 회색»(212~217°)으로 옮겼다.
     대비는 오히려 올라간다 — 본문 흰 9.39:1 · 회색 섹션 8.21:1 / 보조 흰 5.83:1 · 회색 섹션 5.10:1(예전 4.48 미달 해소) */
  --ink-2:#3D4757;     /* 본문 글 */
  --ink-3:#5A6677;     /* 날짜·보조 설명(작은 글자도 통과) */
  /* ★새로 더함 — 카드 안 «작은 아이콘» 색. 흰 바탕 5.97:1.
     부산은 여기에 회색 #9CA3AF(2.54:1)를 써서 「뜻을 전하는 그림 3:1」 기준에 미달한다.
     그대로 베끼지 않고 한 단 진한 값을 새로 잡았다. */
  --ink-icon:#5B6472;

  --ok:#1B7F52;
  --warn:#8A5A12;
  --warn-bg:#FDF6EC;
  --warn-line:#E8C89A;
  --err:#B3261E;
  --err-bg:#FDECEA;

  --ko:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
  --en:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;

  /* ══ ② 모서리 둥글기 ═══════════════════════════════════════
     ★새로 더한 값이다. 예전에는 3px 이 규칙마다 흩어져 박혀 있었다(12곳).
     부산JC 실측 — 작은 것 6px · 거르기 단추 8px · 카드 12px · 큰 카드/사진 16px · 뱃지·점 9999px.
     ★2026-08-28 정정 — 팀장이 「부산 단추는 알약」이라고 지시했으나 조사 담당이 실제로 재 보니
       부산JC 히어로 단추는 96×48 / 128×48 에 «모서리 6px» 이었다(알약이 아니다).
       알약(9999px)은 뱃지(「2026년도」·「Gallery」)와 슬라이드 점에만 쓴다.
       대표님 지시로 .btn 을 --r-sm(6px) 으로 되돌렸다 — 부산과 같은 모양이 된다.
       다만 사실은 적어 둔다 — 부산 히어로 단추를 실제로 재 보니 96×48 / 128×48 에 «6~8px»
       이었다(알약이 아니다). 즉 알약은 «부산보다 더 부드러운» 선택이다.
       부산과 똑같이 맞추고 싶으시면 아래 .btn 의 border-radius 를 var(--r-btn) 으로 바꾸시면
       전 페이지 단추가 한꺼번에 8px 각진 모양으로 돌아온다(다른 곳은 고칠 것이 없다).
     ★--r-btn(8px)은 «누르는 칸·거르기 단추·명단 전환 단추»가 쓴다 — 이쪽까지 알약으로 만들면
       글 쓰는 칸이 알약이 되어 오히려 어색하다(부산도 이 자리는 8px 이다). */
  --r-sm:6px;
  --r-btn:8px;
  --r-card:12px;
  --r-lg:16px;
  --r-pill:9999px;

  /* ══ ③ 그림자 ══════════════════════════════════════════════
     ★새로 더한 값이다. 예전 이 사이트에는 그림자가 «사실상 없었다»(접이식 메뉴 한 곳뿐).
     카드가 선으로만 그려져 각지고 납작해 보이던 가장 큰 까닭이다.
     부산 값(검정 10%)을 그대로 쓰지 않고 «남색이 살짝 섞인 검정»(19,15,45)으로 다시 썼다 —
     이 사이트의 바탕이 푸른 기가 도는 흰색이라, 순검정 그림자는 회색 얼룩처럼 뜬다. */
  --sh-1:0 1px 2px 0 rgba(19,15,45,.06);                                  /* 평소 카드 */
  --sh-2:0 4px 6px -1px rgba(19,15,45,.10),0 2px 4px -2px rgba(19,15,45,.08);   /* 상자·손 올렸을 때 */
  --sh-3:0 10px 15px -3px rgba(19,15,45,.10),0 4px 6px -4px rgba(19,15,45,.10); /* 채운 단추 */
  --sh-4:0 20px 25px -5px rgba(19,15,45,.12),0 8px 10px -6px rgba(19,15,45,.10);/* 큰 사진·접이식 메뉴 */

  /* ══ ④ 세로 여백 ═══════════════════════════════════════════
     ★새로 더한 값이다(부산 py-16 / py-20 / py-24~40 실측).
     각 페이지가 자기 섹션에 var(--sp-sec) 처럼 쓸 수 있게 이름을 붙여 둔다. */
  --sp-sec:64px;                     /* 섹션 위아래 기본(부산 py-16) */
  --sp-sec-lg:80px;                  /* 강조 섹션(부산 py-20) */
  --sp-hero:clamp(96px,12vw,160px);  /* 히어로(부산 py-24 → md:py-40) */

  /* ══ ⑤ 본문 폭·좌우 여백 ═══════════════════════════════════
     2026-08-28 — 부산 본문 칸 실측이 1248~1280px 이라 1200 → 1280px 으로 넓혔고,
     좌우 여백도 부산과 같은 «데스크톱 32px · 휴대전화 16px»로 줄였다.
     실측으로 달라지는 것 (본문 폭 = min(창너비,1280) − 여백×2)
       창 1440px : 1072px → 1216px  (144px 넓어짐)
       창 1024px :  907px →  948px
       창  390px :  351px →  358px  (부산 모바일 358px 과 같아진다 · 가로 넘침 없음)
     ※ 회원 카드(.mgrid)는 이 폭에서 데스크톱 3열 → 4열이 된다(카드 287.5px).
       카드 한 칸 최소 폭 280px 을 넘으므로 카드 안 글자는 예전처럼 다 들어간다. */
  --pad:clamp(16px,3vw,32px);
  --maxw:1280px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* ★2026-09-14 접근성 M1 — Shift+Tab 으로 거꾸로 갈 때 초점이 끈끈이 머리말 밑에 통째로 숨었다(WCAG 2.2 · 2.4.11).
   브라우저가 초점·앵커를 화면 안으로 끌어올 때 위 76px(휴대전화 머리말 64px + 여유) · 아래 90px(떠 있는 [문의하기] 단추)을 비워 둔다.
   ※ 앵커(#) 이동 자리는 예전과 같다 — 아래 [id] 값을 112 → 36px 로 줄여 합(76 + 36)을 112px 로 맞췄다.
     넓은 화면 값(64px)은 busan.css 의 넓은 화면 블록에 있다. */
html{scroll-padding-top:76px;scroll-padding-bottom:90px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ko);font-size:16px;line-height:1.75;
  word-break:keep-all;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
[id]{scroll-margin-top:36px}   /* ★2026-09-14 접근성 M1 — 112 → 36 (위 html 의 scroll-padding-top 76px 과 합쳐 앵커 자리는 112px 그대로) */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* ★2026-09-14 속도(CLS) — 자료를 불러오는 동안 본문이 짧아 «푸터»가 화면 안에 떠 있다가, 내용이 들어오면 아래로 밀려 나가며
   화면이 크게 흔들렸다(휴대전화 · 느린 4G 실측 CLS — 회장인사말·역대회장 0.355, 그중 99%가 푸터의 움직임).
   본문 칸을 «화면 높이 − 머리말(좁은 화면: 상단바 36 + 로고 칸 64 = 100px)» 이상으로 잡아 푸터가 처음부터 화면 아래에서 시작하게 한다.
   내용이 긴 화면은 달라지는 것이 없고, 아주 짧은 화면만 푸터가 화면 맨 아래에 붙는다. 넓은 화면 값(176px)은 busan.css. */
main{min-height:calc(100vh - 100px);min-height:calc(100svh - 100px)}
.nb{white-space:nowrap}
/* ★2026-09-14 접근성 L9 — 문단 끝줄에 낱말 하나만 홀로 떨어지는 «고아줄»을 줄인다(지원하는 브라우저만 · 없으면 예전 그대로) */
p,li,dd,td{text-wrap:pretty}
/* ★2026-09-14 디자인 검수 H3 — 영문 세리프(--en)를 뗐다. 한글이 없는 글꼴이라 「2026년도」의 「년도」가 바탕체로 떨어졌다. */
.num{font-variant-numeric:tabular-nums;font-style:normal}
/* 전화번호가 "031-248-" / "1500" 처럼 중간에서 꺾이면 안 된다(2026-08-19 대표님 지적) */
/* ★2026-08-31 검수 — 오시는길 한 화면 안에서만 전화번호가 ① 맨 위 띠 12.5px 세리프
   ② 「연락처」 카드 32px 세리프 굵기 400 ③ 푸터 13.5px 고딕 ④ 안내문 15px 파랑 — 네 벌이었다.
   전화번호는 이 사이트에서 가장 중요한 «행동 유도» 정보라 자리를 옮길 때마다 옷을 갈아입으면 안 된다.
   → 글꼴은 본문 고딕 하나로 고정하고 숫자만 폭을 맞춘다(크기·색은 자리마다 그대로 둔다).
   ※ 번호 표기는 국내형 031-248-1500 그대로다. 문자(SMS) 링크는 만들지 않는다(CLAUDE.md 규칙 7). */
a[href^="tel:"]{white-space:nowrap;font-family:var(--ko);font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── 건너뛰기 링크 ─────────────────────────────── */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip-path:none;z-index:99;
  background:#fff;color:var(--navy);padding:10px 16px;border:2px solid var(--blue);
  border-radius:var(--r-btn);box-shadow:var(--sh-3)}

/* ── 상단 얇은 바 ──────────────────────────────── */
/* 2026-08-19 대표님 지시 "찐한 군청 대면적 촌스럽다" → 상단부 전체를 밝게 전환.
   남색은 로고·제목·버튼·포인트로만 쓴다(대면적 금지). 푸터만 남색 유지(지면 아래 무게). */
.topbar{background:var(--paper-2);color:var(--ink-2);font-size:12px;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:34px}
.topbar .tel{margin-left:auto;letter-spacing:.02em;color:var(--navy);text-decoration:none}
.topbar .tel:hover{text-decoration:underline}

/* ── 헤더 ──────────────────────────────────────── */
/* 2026-08-28 — 머리말이 스크롤을 따라오는 동안 «본문 위에 얹혀 있다»가 보이게 아주 얇은
   그림자를 더했다(부산 머리말도 흰 판 + 그림자다). 선 하나만으로는 본문과 붙어 보였다. */
header.site{position:sticky;top:0;z-index:50;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
header.site .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);flex:0 0 auto}
/* JCI 공식 방패 마크. 마크 안쪽이 남색이라 어두운 헤더 위에서는 흰 바탕을 깔아 준다
   (로고 자체는 손대지 않는다 — CI 규정) */
.brand img.mark,.ft__brand img.mark{
  flex:0 0 auto;background:#fff;border-radius:6px;padding:4px;object-fit:contain;
}
.brand b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.brand span{font-size:11px;letter-spacing:.14em;color:var(--ink-3)}

nav.main{margin-left:auto;display:flex;gap:clamp(10px,1.6vw,22px);align-items:center}
nav.main a{
  font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap;
}
nav.main a:hover{color:var(--navy)}
nav.main a[aria-current]{color:var(--navy);border-bottom-color:var(--blue)}
.login-btn{
  margin-left:8px;flex:0 0 auto;
  background:var(--blue-dk);color:#fff;font-size:13px;font-weight:700;
  /* 2026-08-28 모서리 3px → 8px(--r-btn) · 손가락이 닿는 높이 40px 확보 */
  min-height:40px;display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:var(--r-btn);text-decoration:none;white-space:nowrap;
}
.login-btn:hover{background:#00546F}
.menu-toggle{display:none}

/* ── 섹션 · 제목 ───────────────────────────────── */
/* 2026-08-28 세로 여백을 부산 결로 넓혔다 — 예전 56~88px 이라 섹션이 서로 붙어 보였다.
   ★2026-08-28 검수에서 다시 잡음 — 넓은 화면 상한을 96px → 80px 으로 내렸다.
     왜: 부산JC 의 «내용 섹션»을 브라우저로 직접 재 보니 위아래 여백이 64px(py-16)·64px·80px(py-20)
         뿐이었다. 96px 을 쓰는 곳은 첫 화면(히어로 160px)뿐이고 내용 섹션에는 한 곳도 없다.
         우리 쪽만 96px 이면 «부산보다 헐렁»해져서, 지금처럼 공지·갤러리에 올라온 자료가 적을 때
         화면이 텅 빈 느낌이 크게 두드러진다(홈 전체 높이 실측 4091px — 부산 3273px).
     바뀌는 값 — 창 1440px : 96 → 72px · 창 1600px 이상 : 96 → 80px · 좁은 화면 : 64px 그대로.
     ※ 늘리고 싶으시면 아래 80px 만 96px 으로 되돌리면 전 페이지가 함께 돌아간다. */
.sec{padding:clamp(64px,5vw,80px) 0}
/* ★2026-08-31 검수에서 더함 — 「아직 등록된 …이 없습니다」 한 줄뿐인 섹션이 자료가 가득 찬
   섹션과 똑같이 위아래 80px 씩 먹고 있었다. 빈 상자가 든 섹션만 여백을 절반 가까이 줄인다.
   ★자료가 한 건이라도 등록되면 .empty 가 사라지므로 여백이 «저절로» 원래대로 돌아온다
     — 나중에 이 줄을 다시 손볼 일이 없다.
   ※ :has() 를 모르는 아주 옛 브라우저는 그냥 예전 여백을 쓴다(깨지지 않는다). */
.sec:has(.empty){padding-block:clamp(36px,3vw,44px)}
.sec:has(.empty) .sechead,.sec:has(.empty) .bs-sechead{margin-bottom:18px}
.sec--tint{background:var(--paper-2)}
.sechead{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(28px,3.5vw,44px)}
/* 제목 — 2026-08-28 크기 단계를 다시 잡았다(부산 섹션 제목 30~36px/700 실측).
   · 크기 clamp(24,3vw,32) → clamp(26,3.4vw,36) : 넓은 화면에서 제목이 한 단 커진다
   · 굵기 800 → 700 : Pretendard 800 은 부산이 쓰는 Noto 700 보다 굵어 뭉쳐 보인다
   · 줄높이 : 지금까지 본문 줄높이(1.75)를 그대로 물려받아 제목 줄 사이가 헐렁했다 → 1.25 */
/* ★2026-09-14 디자인 검수 M6 — 홈(.bs-sechead)과 하위 화면(.sechead)의 섹션 제목 규격이 두 벌이었다 → 한 벌(36px · -.02em)로 */
.sechead h2{margin:0;font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;white-space:nowrap}
/* ★2026-08-28 제목 옆으로 뻗던 «가느다란 선»을 감췄다(규칙은 지우지 않고 값만 더했다).
   왜: 이 선이 화면을 가장 «관공서»처럼 보이게 하던 요소이고, 부산JC 에는 이 선이 없다.
   ★16개 페이지의 <span class="rule"></span> 은 그대로 두어도 된다 — display:none 이면
     자리조차 차지하지 않는다. 되돌리시려면 아래 display:none 한 마디만 지우면 예전 그대로다. */
.sechead .rule{display:none;flex:1 1 auto;height:1px;background:var(--line-2);transform:translateY(-6px)}
/* 선을 감췄으므로 [전체 보기 →]를 오른쪽 끝으로 미는 일은 margin-left:auto 가 맡는다
   (예전에는 늘어나는 선이 밀어 주고 있었다). 크기는 .linkmore 와 같은 14.5px/700 로 맞췄다. */
.sechead .more{flex:0 0 auto;margin-left:auto;font-size:14px;font-weight:700;color:var(--blue-dk);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sechead .more:hover{text-decoration:underline}
/* 섹션 제목 밑 한 줄 설명 — 15px/--ink-3(5.12:1) → 16px/--ink-2(8.87:1).
   부산 부제가 16px 이고, 색을 한 단 진하게 하면 작은 화면에서 훨씬 잘 읽힌다. */
.sublead{margin:-18px 0 clamp(28px,3.5vw,44px);color:var(--ink-2);font-size:16px}

/* ── 가운데 정렬 섹션 제목 (2026-08-28 ★새로 더한 것) ──────────
   부산 갤러리 섹션의 «작은 라벨 뱃지 → 큰 제목 → 부제» 3단 구성이다.
   ★지금 16개 페이지의 .sechead 는 하나도 바뀌지 않는다(왼쪽 정렬 그대로) —
     아래 이름을 «붙인 곳»만 가운데로 간다. 모든 섹션을 가운데로 돌리면 단조로워지므로
     갤러리·소개처럼 «보여 주는» 섹션에만 쓰시기를 권한다(공지·명단은 왼쪽 정렬이 낫다).
   쓰는 법
     <div class="sechead sechead--center">
       <span class="sechead__label">Gallery</span>   ← 있어도 되고 없어도 된다
       <h2>갤러리</h2>
       <p class="sechead__sub">한 줄 설명</p>          ← 있어도 되고 없어도 된다
     </div>
   실측 대비 — 라벨 뱃지 글자 #00688F / 옅은 하늘 바탕(흰 위 8% 겹침) 5.71:1 ·
     부제 #4A4762 / 흰 8.87:1. 둘 다 작은 글자 기준 4.5:1 을 넘는다. */
.sechead--center{flex-direction:column;align-items:center;text-align:center;gap:0}
.sechead--center h2{white-space:normal}
.sechead--center .more{margin:16px 0 0}
/* ── 왼쪽 정렬 섹션 제목 (2026-08-31 ★검수에서 새로 더한 것) ──────
   같은 「Notice / 공지사항」이 홈에서는 왼쪽 끝인데 공지사항 화면에서는 화면 정중앙에 떠 있어,
   한 번 눌렀을 뿐인데 제목이 좌↔중앙으로 튀었다. 가운데 정렬은 «보여 주는» 섹션에만 어울리고
   목록·안내 화면에는 왼쪽 정렬이 맞다(CLAUDE.md 규칙 10 의 «가운데정렬» 지적과도 같은 방향).
   쓰는 법 — 기존 `class="sechead sechead--center"` 를 `class="sechead sechead--flat"` 으로만 바꾼다.
   되돌리시려면 그 낱말만 --center 로 되돌리면 된다(다른 곳은 고칠 것이 없다). */
.sechead--flat{flex-direction:column;align-items:flex-start;text-align:left;gap:0}
.sechead--flat h2{white-space:normal}
.sechead--flat .sechead__label{margin-left:0}
.sechead--flat .sechead__sub{margin-left:0}
.sechead--flat .more{margin:16px auto 0 0}
.sechead__label{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;letter-spacing:.01em;
  line-height:1.3}
.sechead__sub{margin:12px 0 0;color:var(--ink-2);font-size:16px}   /* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 56ch 폭 제한 삭제 */

/* ── 페이지 머리(하위 페이지 공통) ─────────────── */
/* 2026-08-19 남색 대면적 → 옅은 블루그레이로 전환(위 상단부와 같은 지시).
   ★2026-08-28 «부산JC 결» 지시로 다시 잡았다 — 옅은 회청색 배경이 흰색과 거의 같아
     280px 이나 되는 자리를 쓰면서 «머리 영역이 있다는 느낌» 자체를 못 냈다.
     부산은 하위 페이지 제목을 파란 띠로 못 박는다(A형 큰 띠 · B형 얇은 띠) → 그 중간 크기로 통일.
   ★2026-08-19 「찐한 군청 대면적 금지」 지시와 어긋나지 않는가 —
     그 지시는 «군청(--navy) 대면적»에 대한 것이고, 머리말·상단바는 지금도 밝은 흰색 그대로다.
     이 띠는 남색이 아니라 JCI 파랑 계열(#00688F→#2F5796)이고 높이도 200px 안팎이다.
     되돌리기 쉽게 이 규칙 한 덩어리만 고치면 되도록 다른 곳에 색을 흩지 않았다.
   ★색을 왜 부산 원본(#0097D7→#3A67B1)대로 쓰지 않았나 (contrast 계산)
     부산 그대로면 띠 «왼쪽 끝»에서 흰 글자가 3.28:1 이다. 큰 제목(44px)은 통과하지만
     빵부스러기(13px)·영문 꼬리표(13px)·설명(16px)은 4.5:1 이 필요해 전부 미달한다.
     한 단 어둡게 잡은 지금 값은 흰 글자가 왼쪽 끝 6.22:1 · 오른쪽 끝 7.18:1 로,
     띠 어느 지점에서도 «작은 글자까지» 통과한다.
     밝은 #0097D7 은 띠 아래 4px 선으로 남겨 JCI 색을 살렸다(선은 장식이라 대비 기준 밖). */
.pagehead{background:linear-gradient(100deg,var(--blue-dk) 0%,var(--blue-2) 100%);color:#fff;
  border-bottom:4px solid var(--blue);padding:clamp(24px,3vw,36px) 0 clamp(22px,2.6vw,32px)}
/* ★2026-09-14 디자인 검수 M2 — 띠 여백·제목을 한 단 줄였다(1280px 첫 화면에서 본문 제목이 약 40px 위로) */
/* 영문 꼬리표(kicker) 정본. 밝은 본문 위가 기본이고,
   남색 머리(.pagehead) 안에서는 아래 규칙이 밝은 하늘색으로 덮는다.
   ※ 각 페이지 인라인 CSS 의 .kicker 중복 정의는 이 정본을 쓰고 지운다(2026-08-19). */
/* ★2026-08-31 검수에서 다시 잡음 — 영문 꼬리표가 사이트 안에서 서체 3종(이탤릭 세리프 /
   산세리프 알약 / 세리프 알약)으로 섞여 있었다. 이탤릭 세리프는 «책 표지 글씨»처럼 홀로 튀고,
   본문 글꼴로 쓰는 섹션 딱지(.sechead__label)와도 어긋났다.
   → 본문 글꼴 + 대문자 + 자간으로 한 규격으로 맞춘다(부산JC 의 같은 자리도 고딕이다).
   ※ 낱말(Notice·Partners·Members …)은 한 글자도 바꾸지 않았다 — 서체만 바뀐다. */
.kicker{font-family:var(--ko);font-size:12px;font-style:normal;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--blue-dk);margin:0 0 10px}
/* 아래 넷은 2026-08-28 파란 띠로 바뀌면서 글자색을 함께 맞춘 것이다(어두운 바탕 규칙).
   흰색을 그대로 쓰지 않고 투명도를 준 까닭 = 제목만 또렷하게 앞으로 나오게 하려는 것.
   ★투명도는 «띠에서 가장 밝은 왼쪽 끝(#00688F)»을 기준으로 계산해 4.5:1 을 넘는 값만 골랐다.
     · 흰 85% (빵부스러기·꼬리표) → 4.95:1
     · 흰 92% (설명글)            → 5.54:1
     · 흰 100% (제목)             → 6.22:1  */
.pagehead .kicker{font-size:12px;letter-spacing:.10em;color:rgba(255,255,255,.85)}
.pagehead .crumb{color:rgba(255,255,255,.85)}
/* 빵부스러기 링크에 손을 올리면 남색으로 바뀌던 규칙이 파란 띠 위에서는 2.98:1 로 어두워
   오히려 안 보인다 → 띠 안에서만 흰색으로 덮는다(6.22:1). */
.pagehead .crumb a:hover{color:#fff}
/* ★2026-08-28 (검수에서 잡은 것) 키보드 초점 테두리를 띠 «안에서만» 흰색으로 덮는다.
   왜: 이 파일 아래쪽 공통 규칙이 초점 테두리를 JCI 하늘색(--blue #0097D7)으로 그리는데,
       그 테두리는 outline-offset:2px 이라 링크 «바깥», 곧 이 파란 띠 위에 얹힌다.
       실측 대비 — #0097D7 : 띠 왼쪽 끝 #00688F 1.90:1 · 오른쪽 끝 #2F5796 2.19:1.
       「누르는 것의 윤곽 3:1」(WCAG 1.4.11)에 크게 못 미쳐, 키보드(Tab)로 다니는 분께는
       지금 어디에 가 있는지가 «사실상 안 보인다». 띠가 옅은 회청색이던 어제까지는
       같은 하늘색이 3.2:1 이라 보였는데, 띠를 파랗게 바꾸면서 함께 묻힌 자리다.
   고른 값 — 흰색. 띠 어느 지점에서도 6.22~7.18:1 이라 넉넉히 넘고,
       홈 화면 히어로가 이미 쓰는 방법(.hero a:focus-visible{outline-color:#fff})과 같은 결이다.
   ★이 띠는 15개 하위 페이지가 함께 쓰므로 여기 한 줄이면 전부 고쳐진다.
   ※ 굵기·간격(3px / offset 2px)은 그대로다 — 바뀌는 것은 «색» 하나뿐이다. */
.pagehead a:focus-visible,.pagehead button:focus-visible{outline-color:#fff}
/* 제목 — 크기 clamp(27,4.2vw,40) → clamp(28,4.4vw,44) · 굵기 800 → 700(부산 실측) ·
   줄높이는 본문값 1.75 를 물려받아 헐렁했다 → 1.2 */
.pagehead h1{margin:0;color:#fff;font-size:clamp(26px,3.2vw,36px);font-weight:700;
  letter-spacing:-.03em;line-height:1.2}
.pagehead p{margin:12px 0 0;color:rgba(255,255,255,.92);font-size:16px}   /* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 52ch 에서 꺾여 파란 띠 오른쪽이 비었다(404 등) → 폭 제한 삭제 */
.crumb{font-size:13px;color:var(--ink-3);margin:0 0 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;color:var(--navy)}

/* ── 본문 타이포 ───────────────────────────────── */
/* 2026-08-19 대표님 지적(빨간 동그라미) — 본문 오른쪽이 크게 비어 보인다 → 폭 제한 해제.
   글줄이 너무 길어지지 않게 상한만 넉넉히 둔다(본문 컨테이너 1072px 안).
   ★2026-08-28 알려 둘 것 — 본문 칸이 1072px → 1216px 으로 넓어졌으므로(위 --maxw/--pad),
     이 글줄도 그만큼 길어진다. 대표님께서 「오른쪽이 비어 보인다」고 하셔서 폭 제한을 푸신 것이라
     이번에는 그대로 두었다. 눈으로 보시고 「한 줄이 너무 길다」 하시면
     이 줄을 max-width:78ch 정도로 바꾸시면 된다(그러면 오른쪽이 다시 조금 빈다). */
/* ★2026-08-31 검수 — 본문 문단은 화면 가운데에 모아 놓고(가운데 정렬 상자), 바로 아래 카드는
   왼쪽 끝에서 시작해 «한 화면에 왼쪽 기준선이 두 개»였다(실측 차이 198px).
   → 글줄은 왼쪽에서 시작하고 «오른쪽만» 읽기 좋은 길이에서 끊는다. 카드와 같은 선에서 출발한다.
   ※ 2026-08-19 대표님 「오른쪽이 비어 보인다」 지적으로 폭 제한을 풀었던 자리다. 그때와 달리
     이번에는 «가운데로 모으지 않고» 왼쪽에 붙이므로 빈 곳이 한쪽으로 몰리지 않는다. */
/* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 78ch 폭 제한 때문에 1280px 화면에서 글이 오른쪽을 비워 두고 꺾였다.
   8/19 대표님 「오른쪽이 비어 보인다」로 풀었던 것을 8/31 검수가 다시 걸었던 자리다 → 본문 칸을 꽉 채운다(다시 걸지 말 것) */
.prose{max-width:none;margin-left:0;margin-right:0}
/* 2026-08-28 글자 크기 단계 정리 — 부산 실측(24/700 · 20/600)에 맞춰 한 단씩 올리고
   굵기는 800 → 700 으로 내렸다(Pretendard 800 은 부산이 쓰는 Noto 700 보다 굵어 뭉쳐 보인다).
   전체 단계: 히어로 60 → 페이지 제목 44 → 섹션 제목 36 → 본문 소제목 24 → 18 → 본문 16
             → 보조 14 → 뱃지 12 */
.prose h2{margin:2.2em 0 .6em;font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.02em;
  line-height:1.35}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8em 0 .5em;font-size:18px;font-weight:700;line-height:1.45}
.prose p{margin:0 0 1.1em;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;color:var(--ink-2)}
.prose li{margin-bottom:.45em}
.prose strong{color:var(--ink);font-weight:700}
/* 2026-08-28 인용문 왼쪽 선을 청록(--teal) 대신 JCI 하늘색(--blue)으로 바꿨다 —
   부산 결에 청록이 없고, 이 사이트에서도 청록이 이 한 자리에만 남아 겉돌았다.
   (--teal 변수의 값도 같은 하늘색으로 통일해 두어, 그 이름을 직접 쓰는 다른 페이지도 함께 맞는다) */
.prose blockquote{margin:1.4em 0;padding-left:18px;border-left:3px solid var(--blue);color:var(--ink-2)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.7;color:var(--ink-2);margin:0 0 1.6em}

/* ── 버튼 ──────────────────────────────────────── */
/* 2026-08-28 부산JC 단추 실측대로 다시 잡았다.
     예전 : 안여백 14px 28px · 모서리 3px · 글자 15px/700 · 그림자 없음
     지금 : 높이 48px 고정 · 안여백 12px 26px · 모서리 6px(--r-sm · 부산 실측) · 글자 16px/600 · 그림자 --sh-3
            (좌우 26px 은 홈 화면 히어로 단추와 같은 값이다 — 두 곳이 어긋나지 않게 맞췄다)
   ★모서리를 «알약»으로 한 것은 대표님·팀장 지침을 그대로 따른 것이고, 홈 화면 히어로 단추도
     같은 값(--r-sm)을 쓰고 있어 전 페이지 단추가 한 모양으로 맞는다.
     ※ 사실만 적어 둔다 — 부산 히어로 단추를 실제로 재 보면 96×48 / 128×48 에 6~8px 이라
       알약이 아니다. 부산과 «똑같이» 맞추고 싶으시면 아래 border-radius 를 var(--r-btn) 으로
       바꾸시면 전 페이지가 한꺼번에 8px 로 돌아온다(다른 곳은 고칠 것이 없다).
   ★높이 48px 로 고정한 까닭 — 손가락으로 누르는 것은 44px 이상이어야 헛누름이 없다.
   실측 대비(WCAG AA)
     · 채움 .btn--fill    흰 글자 / #00688F        6.22:1
     · 테두리 .btn--line  글자 #130F2D / 흰       18.52:1
                          ★테두리 #7E8EA0 / 흰     3.35:1
       (예전 테두리 색 --line-2 는 1.47:1 로 「누르는 것의 윤곽 3:1」 기준에 미달이었다 → 고쳤다)
     · 금색 .btn--gold    글자 #130F2D / #EDBE38  10.62:1
       (부산은 이 단추에 흰 글자를 써서 1.75:1 로 크게 미달한다 — 글자색만 바꿔 가져왔다)
     · 흰 단추 .btn--white 글자 #00688F / 흰       6.22:1
     · 사진 위 .btn--ghost 흰 80% 테두리 — 가장 불리한 자리(밝은 사진 + 검정 50% 덮개)에서도
       3.16:1 로 윤곽 기준 3:1 을 넘는다(예전 45% 는 2.2:1 로 넘지 못했다) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 26px;border-radius:var(--r-sm);
  font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.01em;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
/* ★2026-09-14 디자인 검수 L8 — 채운 단추의 큰 그림자를 뗐다(부산 단추는 평평하다 · 그림자 단계도 줄어든다). 손을 올리면 살짝 뜬다. */
.btn--fill{background:var(--blue-dk);color:#fff;box-shadow:none}
.btn--fill:hover{background:#00546F;box-shadow:var(--sh-1)}
.btn--line{background:#fff;border-color:var(--line-input);color:var(--ink)}
.btn--line:hover{border-color:var(--blue-dk);background:var(--paper-2)}
.btn--ghost{border-color:rgba(255,255,255,.8);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
/* ★새로 더한 두 가지 — 부산 히어로가 쓰는 「금색 단추 + 흰 단추」 짝이다.
   어두운 사진 위에서 두 단추가 또렷하게 갈라져 보이라고 둔다(안 쓰셔도 다른 곳에 영향이 없다). */
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:none}
.btn--gold:hover{background:#E0B024}
.btn--white{background:#fff;color:var(--blue-dk);box-shadow:none}
.btn--white:hover{background:var(--paper-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
/* 작은 단추 — 부산 실측 높이 36px · 안여백 8px 16px · 글자 14px. 그림자는 한 단 낮춘다
   (작은 단추에 큰 그림자를 두면 저 혼자 무거워 보인다) */
.btn--sm{min-height:36px;padding:8px 16px;font-size:14px;font-weight:600}
.btn--sm.btn--fill,.btn--sm.btn--gold,.btn--sm.btn--white{box-shadow:none}
.linkmore{font-size:14px;font-weight:700;color:var(--blue-dk);text-decoration:none;display:inline-flex;gap:7px}
.linkmore:hover{text-decoration:underline}

/* ── 명단 전환 단추 (현역회원 / 특우회) ────────── */
/* ★2026-08-27 3차 — 「수원JC회원」과 「수원JC특우회」 두 명단을 바로 오갈 수 있게
   명단 바로 위에 두는 단추 줄이다.

   왜 이렇게 했나
     · 두 페이지를 하나로 합치지 않았다. 위 메뉴에 「수원JC회원」과 「수원JC특우회」가
       각각 있어서, 합치면 메뉴 하나가 갈 곳을 잃는다(메뉴 이름 = 페이지 제목 규칙).
       그래서 페이지는 둘 그대로 두고, 이 단추가 서로 건너가는 길만 놓아 준다.
     · 다른 페이지로 건너가는 길이므로 <button> 이 아니라 <a>(링크)다.
       가운데 단추를 누르거나 새 탭으로 열기도 그대로 된다.
     · 지금 보고 계신 쪽 단추는 남색으로 꽉 채워 「눌린 것」처럼 보이게 하고,
       aria-current="page"(지금 이 페이지) 로 화면낭독기에도 알린다.

   ★두 페이지가 똑같이 생겨야 하므로 각 페이지의 <style> 이 아니라 이 공통 파일에 둔다.
     members.html 과 senior.html 이 아래 클래스 이름을 그대로 함께 쓴다:
       .rostertabs                       — 단추 두 개를 담는 <nav>
       .rostertabs__btn                  — 단추 하나(<a>)
       .rostertabs__btn[aria-current="page"] — 지금 보고 계신 쪽(색이 채워진다)

   실측 대비(WCAG AA) — 켜진 쪽 흰 글자/남색 18.52:1 · 꺼진 쪽 #4A4762/흰 8.87:1 ·
     테두리 #7E8EA0(--line-input)/흰 3.35:1 (누르는 단추의 윤곽 기준 3:1 통과).

   ★2026-08-28 (부산 결) 두 단추를 「붙였던 것을 떼어」 놓았다.
     왜: 붙여 놓으면 관공서 탭처럼 무거워 보인다. 부산은 이런 거르기 단추를 8px 모서리로
         하나씩 떼어 놓는다. 색·글자·대비는 하나도 바꾸지 않았고 간격과 모서리만 바뀌었다. */
.rostertabs{display:inline-flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(16px,2.2vw,24px)}
.rostertabs__btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 20px;font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;text-decoration:none;border-radius:var(--r-btn);
  color:var(--ink-2);background:#fff;border:1px solid var(--line-input);
  transition:background .15s,color .15s,box-shadow .15s}
/* 떼어 놓았으므로 「한 칸 당기기」는 더 필요 없다(규칙은 남기고 값만 0으로 둔다) */
.rostertabs__btn+.rostertabs__btn{margin-left:0}
.rostertabs__btn:first-child{border-radius:var(--r-btn)}
.rostertabs__btn:last-child{border-radius:var(--r-btn)}
.rostertabs__btn:hover{background:var(--paper-2);color:var(--navy)}
/* ★2026-09-14 디자인 검수 M4 — «지금 선택됨» 표시 색을 사이트 전체 한 가지(--blue-2 · 메뉴 현재 항목과 같은 색)로. 흰 글자 7.18:1 */
.rostertabs__btn[aria-current="page"]{background:var(--blue-2);border-color:var(--blue-2);color:#fff;
  box-shadow:var(--sh-2);position:relative;z-index:1}
.rostertabs__btn[aria-current="page"]:hover{background:#274A80;color:#fff}
/* 키보드 초점 테두리가 옆 단추에 가려지지 않게 맨 위로 올린다 */
.rostertabs__btn:focus-visible{position:relative;z-index:2}

/* ── ［카드］／［리스트］ 보기 전환 단추 ───────────────
   ★2026-08-27 (4차) — 원래 members.html 과 senior.html 두 파일의 <style> 안에
   ★똑같은 내용이 한 벌씩★ 들어 있던 규칙을, 바로 위 .rostertabs 처럼 이 공통 파일로 옮겼다.
   왜 옮겼나: 한쪽만 고치면 두 명단 화면의 단추 생김새가 슬그머니 어긋난다
     (글자 크기 하나 바꾸는 데도 두 곳을 고쳐야 했다). 이제 여기 한 곳만 고치면 둘이 함께 바뀐다.
   ★옮기면서 값은 한 글자도 바꾸지 않았다 — 두 파일에 적혀 있던 값이 서로 완전히 같았기에
     어느 쪽을 고를지 따질 일이 없었고, 그대로 옮겨 적었으므로 두 화면 생김새가 그대로다.

   쓰는 곳 (members.html · senior.html 이 같은 이름을 함께 쓴다)
     .viewsw            — 단추 두 개를 담는 상자(<div role="group" aria-label="보기 방식">)
     .viewsw__btn       — 단추 하나(<button type="button">)
     .viewsw__btn.is-on — 지금 보고 계신 쪽(진한 파랑으로 채워진다)

   실측 대비(WCAG AA) — 꺼진 쪽 글자 #4A4762/흰 8.87:1 · 켜진 쪽 흰 글자/#00688F 6.22:1 ·
     테두리 #7E8EA0(--line-input)/흰 3.35:1 (누르는 장치의 윤곽 기준 3:1 통과).
     색으로만 알리지 않고 aria-pressed 로도 함께 알린다. */
/* ★2026-08-27 (5차) align-self 를 flex-end → center 로 바꿨다.
   왜: 이 단추가 「거르기 단추 줄」 오른쪽 끝으로 올라갔는데(대표님 지시 · 아래 .chiprow),
       거르기 단추가 두 줄로 접히는 좁은 화면에서 flex-end 면 단추가 저 혼자 맨 아래로
       내려가 어긋나 보인다. 가운데 맞춤이라야 몇 줄이 되든 나란해 보인다.
   ※ 「모두 ○명」 줄에 놓일 때는 이 단추가 그 줄에서 가장 키가 커서 두 값의 결과가 같다
     — 즉 특우회 화면의 생김새는 조금도 바뀌지 않는다. */
.viewsw{margin-left:auto;display:inline-flex;align-self:center}
.viewsw__btn{font-family:inherit;font-size:14px;font-weight:700;padding:0 15px;min-height:44px;
  white-space:nowrap;cursor:pointer;
  color:var(--ink-2);background:#fff;border:1px solid var(--line-input)}
.viewsw__btn+.viewsw__btn{margin-left:-1px}
/* 2026-08-28 — 바깥 모서리만 3px → 8px(--r-btn). 두 단추는 「한 덩어리로 붙인 채」 둔다:
   같은 명단을 두 가지 방식으로 보는 전환 스위치라, 붙어 있어야 한 장치로 읽힌다. */
.viewsw__btn:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.viewsw__btn:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0}
.viewsw__btn:hover{background:var(--paper-2);color:var(--navy)}
.viewsw__btn.is-on{background:var(--blue-2);border-color:var(--blue-2);color:#fff;
  box-shadow:var(--sh-2);position:relative;z-index:1}
.viewsw__btn.is-on:hover{background:#274A80;color:#fff}
/* 키보드 초점 테두리가 옆 단추에 가려지지 않게 맨 위로 올린다 */
.viewsw__btn:focus-visible{position:relative;z-index:2}
/* 화면 오른쪽 아래에 늘 떠 있는 ［문의하기］ 단추와 겹치지 않게,
   좁은 화면에서는 ［카드］［리스트］를 오른쪽 끝이 아니라 왼쪽에 붙인다.
   (두 페이지가 각각 640px 이하에서 이 값을 똑같이 쓰고 있었다 — 그대로 옮겼다) */
@media (max-width:640px){.viewsw{margin-left:0}}

/* ══════════════════════════════════════════════════════════════
   ── 명단 화면 공통 (수원JC회원 members.html · 수원JC특우회 senior.html) ──
   ★2026-08-27 (5차) 두 페이지의 <style> 안에 ★똑같은 내용이 한 벌씩★ 들어 있던
     명단 규칙을 여기 한 곳으로 합쳤다. senior.html 맨 위 「다음 차례에 꼭 정리할 것」
     목록이 가리키던 바로 그 덩어리다.
       · 찾는 줄            .msearch
       · 「모두 ○명」 줄     .listbar · .mcount
       · ［카드］로 보기     .mgrid · .mcard · .mph · .minfo …
       · ［리스트］로 보기   .mlist · .mrow …
     왜 합쳤나: 한쪽만 고치면 두 명단 화면이 슬그머니 어긋난다(글자 크기 하나 바꾸는 데도
     두 곳을 고쳐야 했고, 실제로 어긋난 적이 여러 번 있다). 이제 여기만 고치면 둘이 함께 바뀐다.

   ★찾는 줄 이름을 예전 .toolbar 에서 .msearch 로 바꾼 까닭 —
     MOU업체(partners.html)·활동사진첩(gallery.html)도 자기 <style> 안에서 .toolbar 라는
     ★같은 이름을 다른 규격으로★ 쓰고 있다. 그 이름을 이 공통 파일에 올리면 그 두 화면까지
     끌려 바뀐다. 그래서 명단 화면 전용 이름을 새로 지었다(칸의 생김새·규격은 그대로다).
   ══════════════════════════════════════════════════════════════ */

/* ── 「이름으로 찾기」 줄 ──────────────────────────
   ★2026-08-27 (5차) 대표님 지시(노란 표시 · "오른쪽이 텅 비었다")로 자리 배분을 고쳤다.
   전에는 칸이 360px 에서 딱 끊기고 그 오른쪽 700px 가까이가 통째로 비어 있었다.
   지금은
     ① 칸이 줄을 따라 늘어난다 — 다만 480px 에서 멈춘다.
        글씨를 치는 칸은 지나치게 길면 오히려 읽기·고쳐 쓰기가 나쁘고, 넣는 글자가
        성함 두세 자·업종 몇 자뿐이라 480px 이면 넉넉하다.
     ② 남는 오른쪽은 <칸 아래에 있던 안내 글>이 올라와 채운다.
        덤으로 세로 한 줄이 줄어든다(같은 말을 옆에 두었을 뿐, 글은 한 글자도 안 바꿨다).
   좁은 화면(대략 640px 아래)에서는 안내 글이 저절로 칸 밑으로 내려가 예전 모양 그대로다. */
.msearch{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0 0 14px}
.msearch .field{flex:1 1 300px;max-width:480px;min-width:0;margin:0}
.msearch .field>label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
.msearch input[type=search]{width:100%;font-family:inherit;font-size:15px;line-height:1.5;
  color:var(--ink);background:#fff;border:1px solid var(--line-input);border-radius:var(--r-btn);
  padding:12px 14px}
/* 안내 글(「성함·업종으로 찾으실 수 있습니다…」) — 칸 오른쪽에 나란히 선다.
   글자 크기·색은 예전에 이 글이 쓰던 값 그대로다(site.css 의 .field .hint 와 같은 값). */
.msearch .hint{flex:1 1 280px;min-width:0;margin:0 0 4px;font-size:13px;color:var(--ink-3)}
/* 브라우저가 검색칸에 넣는 지우기(×) 단추 — 모양이 제각각이라 감춘다 */
.msearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* ★2026-08-27 (검수) 안내 글이 칸 밑으로 내려가는 순간부터는 칸의 480px 제한을 푼다.
   왜: 안내 글은 자기 자리(280px) + 칸 자리(300px) + 사이 16px = 596px 가 안 되면 아랫줄로 내려간다.
       본문 폭은 화면 폭의 90%(양쪽 여백 5vw씩) 이므로 그 순간 = 화면 약 662px 이다.
       그 아래에서도 칸을 480px 에서 멈춰 두면, 올려놓은 안내 글은 이미 아랫줄로 내려간
       뒤라 칸 오른쪽이 다시 텅 빈다(실측 화면 662px 에서 115.8px · 640px 에서 96px · 600px 에서 60px).
       대표님께서 노란색으로 표시하신 바로 그 빈 자리라, 이 폭에서도 칸이 줄 끝까지 차게 한다.
       (533px 아래에서는 어차피 본문 폭이 480px 보다 좁아 이미 줄 끝까지 차 있었다 — 이제 그 사이가 이어진다)
   ※ 바뀌는 것은 칸의 «폭» 하나뿐이다 — 색·테두리·글꼴·모서리는 그대로다. */
@media (max-width:662px){
  .msearch .field{max-width:none}
  /* 안내 글이 칸 밑으로 내려온 상태 — 예전처럼 칸에서 5px 띄운다.
     (예전엔 640px 에 적혀 있어서 641~662px 사이에서만 띄우기가 어긋났다 — 줄이 실제로
      내려가는 폭과 같게 맞췄다) */
  .msearch .hint{margin:5px 0 0}
}
@media (max-width:640px){
  /* 아이폰은 글자가 16px 보다 작은 칸을 누르면 화면을 제멋대로 확대한다 → 16px 로 올린다.
     (아래쪽 공통 규칙이 있지만 위 .msearch 규칙이 더 구체적이라 여기서 다시 눌러 준다) */
  .msearch input[type=search]{font-size:16px}
}

/* ── 「모두 ○명」 줄 ──────────────────────────────
   오른쪽 끝은 ［카드］［리스트］ 단추가 채운다(단추가 이 줄에 있을 때). */
.listbar{display:flex;align-items:center;justify-content:space-between;
  gap:10px 16px;flex-wrap:wrap;margin:0 0 18px}
.mcount{font-size:14px;color:var(--ink-3);margin:0}
.mcount .num{color:var(--ink);font-weight:700}

/* ── ［카드］로 보기 ──────────────────────────────
   ★2026-08-27 (5차) 대표님 지시(분홍 표시 · "카드 오른쪽 절반이 비었다")로 열 수를 바꿨다.
   전에는 화면이 아무리 넓어도 ★언제나 2열★ 이었다. 1400px 화면에서 카드 한 장이 525px 인데
   그 안에 든 것은 사진·직책·성함·업종(+입회연도)뿐이라 오른쪽 절반이 통째로 비었다.
   이제 폭이 허락하는 만큼 열이 늘어난다 — 실측(본문 폭 기준):
     1400px 화면 → 본문 1072px → 3열(카드 342.7px) · 1024px → 본문 906px → 3열(288.6px)
     768px → 본문 691px → 2열(337.9px)            · 390px → 본문 350px → 1열
   한 칸의 최소 폭 280px 은 <카드 안에 든 가장 긴 글자>로 정했다 —
   업종 이름 「제과제빵생산제조업」(9글자·14px ≒ 126px)이 한 줄에 들어가는 폭이다.
   ★auto-fit 이 아니라 auto-fill 인 까닭: 걸러 낸 결과가 한두 분일 때 auto-fit 은 그 카드를
     한 줄 폭으로 늘려 버려, 지금 고치는 「오른쪽이 빈 카드」가 도로 생긴다.
   ★minmax 안의 min(280px,100%) — 320px 같은 아주 좁은 화면에서 280px 이 화면보다 커지는 일을
     막아 준다(가로 스크롤 방지).

   ★★2026-08-27 (6차) 카드에 항목이 늘었다(직장명/직급 · 업종 · SNS 아이콘 · 사무국이 만든 항목).
     「한 칸 최소 폭 280px 을 올려야 하는가」를 ★계산해서★ 확인했고, ★올리지 않기로★ 했다.
     ─ 계산한 것 ①: 열 수와 카드 폭 (본문 폭 = min(창 너비, --maxw 1200px) − --pad×2)
         창 1400px → 여백 64  → 본문 1072.0px → 3열 · 카드 342.7px
         창 1024px → 여백 51.2 → 본문  906.6px → 3열 · 카드 288.5px   ← 여기가 가장 빠듯하다
         창  768px → 여백 38.4 → 본문  691.2px → 2열 · 카드 337.9px
         창  390px → 여백 19.5 → 본문  351.0px → 1열 · 카드 351.0px
       (1400·1024 는 데스크톱이라 세로 스크롤막대 15px 을 뺀 값, 768·390 은 손가락 화면이라 뺄 것이 없다)
     ─ 계산한 것 ②: 최소 폭을 올리면 어떻게 되나
         창 1024px 에서 3열을 지키려면 최소 폭이 288.5px 을 넘으면 안 된다.
         지금 값 280px 에서 겨우 8px 여유뿐이라, 넉넉하게 올리는 것 자체가 불가능하다.
         굳이 340px 로 올리면 1024px 창이 2열로 떨어지고 카드가 443px 이 되는데,
         그러면 대표님이 2026-08-27 에 지적하신 「카드 오른쪽 절반이 빈다」가 그대로 되돌아온다.
     ─ 계산한 것 ③: 그래서 대신 «카드 안 글자 칸» 이 새 항목을 감당하는지 재어 보았다
         (글자 칸 = 카드 − 안쪽 여백×2 − 사진(안쪽 폭의 36%) − 사진과 글자 사이 틈)
         창 1400px 173.2px · 1024px 139.1px · 768px 181.8px · 390px 190.2px
         가장 좁아지는 곳은 창이 ≒978px 일 때다(카드가 딱 최소 폭 280.4px 이 되는 순간) → 133.6px.
         SNS 아이콘 다섯 개 = 20px×5 + 사이 6px×4 = 124px → ★가장 좁은 133.6px 에도 들어간다★.
         (더 좁아지더라도 .sns 가 flex-wrap 이라 아랫줄로 접힐 뿐 가로로 넘치지 않는다)
     → 결론: 최소 폭 280px 그대로 둔다. 열 수·카드 폭은 위 표에서 하나도 바뀌지 않는다.

   ★★한 줄에 놓인 카드들의 «높이» 를 어떻게 다룰지 (판단한 내용을 남겨 둔다)
     격자는 원래 한 줄 안 카드를 «가장 긴 카드» 높이에 맞춘다(align-items 의 기본값 stretch).
     사무국 항목을 어떤 분은 세 개, 어떤 분은 하나만 넣으시면 짧은 카드 아래가 비게 된다.
     ★그래도 지금처럼 «높이를 맞추는» 쪽을 그대로 둔다. 까닭:
       ① 카드는 테두리가 보이는 상자다. 상자 아랫선이 들쭉날쭉하면 «덜 만든 화면» 으로 보인다.
          아랫선이 가지런해야 격자가 표처럼 차분하게 읽힌다(이 홈페이지의 «정제된 격식» 방향).
       ② 아래가 비는 것은 «빈 값을 그린 것» 이 아니다 — 대표님 지시(빈 값 노출 금지)는
          「모름」·「-」 같은 ★글자★ 를 못 쓰게 하신 것이지 여백을 금하신 것이 아니다.
          실제로 빈 줄·빈 라벨은 한 개도 그리지 않는다.
       ③ 지금은 새 항목이 아무에게도 없어 일곱 분 카드 높이가 모두 같다 — 이 문제가
          화면에 나타나지 않는다. 사무국이 항목을 채우기 시작하신 뒤 눈으로 보고 정하시면 된다.
     ★만약 「아래 빈 자리가 보기 싫다」 하시면 아래 .mgrid 규칙에 align-items:start 한 마디만
       더하시면 된다(카드마다 제 내용만큼만 높아진다 · 대신 아랫선이 들쭉날쭉해진다). */
/* ★★2026-08-28 (부산 결) 본문 폭이 1200 → 1280px, 좌우 여백이 64 → 32px 으로 바뀌면서
     열 수를 다시 계산했다. ★한 칸 최소 폭 280px 은 그대로 둔다(카드 안 가장 긴 글자 기준).
       창 1400px → 본문 1216px → ★4열 · 카드 287.5px  (예전 3열 342.7px)
       창 1024px → 본문  947.6px → 3열 · 카드 302.2px  (예전 3열 288.5px — 오히려 넓어졌다)
       창  768px → 본문  721.9px → 2열 · 카드 353.3px
       창  390px → 본문  358.0px → 1열 · 카드 358.0px  (가로 넘침 없음)
     ★카드가 287.5px 로 좁아지는 1400px 화면에서 「카드 안 글자 칸」을 다시 재 보았다:
       287.5 − 테두리 2 − 안여백 20×2 − 사진 92 − 사진과 글 사이 18 = 135.5px.
       SNS 아이콘 다섯 개(124px)와 업종 「제과제빵생산제조업」(126px)이 아직 들어간다.
       ★그래서 카드 안여백을 부산 값 24px 이 아니라 최대 20px 으로 잡았다 —
         24px 로 하면 글자 칸이 127.5px 로 줄어 위 두 가지가 아슬아슬해진다(아래 .mcard 참고). */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:clamp(14px,2vw,22px);list-style:none;margin:0;padding:0}
/* ★2026-08-28 (부산 결) 카드 겉모습을 바꾼 곳 — 이번 작업에서 화면 인상이 가장 크게 달라지는 자리다.
     ① 윗변의 「3px 남색 굵은 줄」을 뗐다 → 사방 1px 옅은 테두리로 통일.
        왜: 이 줄 하나가 카드를 각지고 무겁게 보이게 했다(부산 카드에는 이런 줄이 없다).
     ② 모서리 0 → 12px(--r-card)
     ③ 그림자 없음 → --sh-1 : 카드가 종이 위에 살짝 떠 있게 보인다.
   ★손을 올렸을 때의 변화는 일부러 넣지 않았다 — 이 카드는 <li>일 뿐 눌러서 들어가는
     링크가 아니다. 손 올릴 때 색이 바뀌면 「누르면 뭔가 열린다」고 잘못 알린다.
   ★overflow:hidden 도 일부러 넣지 않았다 — 카드 안 SNS 아이콘의 키보드 초점 테두리
     (3px, 바깥으로 2px)가 잘려 안 보이게 된다. */
.mcard{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  box-shadow:var(--sh-1);
  padding:clamp(16px,1.8vw,20px);display:flex;gap:clamp(14px,1.6vw,18px);align-items:flex-start;min-width:0}
/* 프로필 사진 — 왼쪽 정사각. 사진이 없는 회원은 회색 바탕에 성(姓) 한 글자(깨진 아이콘 금지).
   ★ 공용 .ph(사진 자리)를 쓰지 않는다 — 빗금 무늬와 「사진 준비 중」 글자가 이니셜 위에 겹친다.
   ★2026-08-27 (5차) 크기 기준을 <화면 폭>에서 <카드 안쪽 폭>으로 바꿨다.
     왜: 열 수가 화면에 따라 달라지면서 「화면은 넓은데 카드는 좁은」 자리가 생겼는데,
         예전 값(12vw)은 화면만 보고 사진을 128px 로 키워 글자 자리를 밀어냈다.
         카드 안쪽 폭의 36% 로 재면 어느 화면에서든 사진과 글자의 비율이 같다
         (실측: 1400px 3열 107px · 1024px 3열 92px · 768px 2열 110px · 390px 1열 116px). */
/* 2026-08-28 사진 모서리도 카드와 같은 12px 으로 둥글렸다(부산 회원 사진 실측 rounded-xl) */
.mcard .mph{flex:0 0 auto;display:block;width:clamp(92px,36%,124px);height:auto;aspect-ratio:1/1;
  object-fit:cover;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2)}
/* 사진 대신 넣는 성(姓) 한 글자 — 사진 칸이 92~124px 로 좁아졌으므로 34px 로 고정한다
   (예전 clamp 는 화면 폭을 보고 커져서, 좁은 카드에서 글자가 칸을 꽉 채우는 일이 있었다) */
/* ★2026-08-31 검수 — 성 한 글자(34px)가 성함(20px)보다 컸다. 자리표시는 물러나게 한다. */
.mcard .mph--init{display:grid;place-items:center;font-size:22px;font-weight:700;
  color:rgba(19,15,45,.30)}
.mcard .minfo{flex:1 1 auto;min-width:0;padding-top:2px}
/* 직책 배지를 담는 자리. 색·모양은 아래 .rbadge 가 정한다.
   min-height 26px(배지 높이) — 직책이 비어 배지를 안 그리는 분의 카드도 성함 줄 위치가
   옆 카드와 어긋나지 않게 한다. */
.mcard .role{display:flex;align-items:center;min-height:26px;margin:0}
/* 성함 줄 — ★2026-08-27 (6차) 성함 오른쪽에 SNS 아이콘이 나란히 서게 flex 로 바꿨다.
   flex-wrap:wrap = 성함이 길거나 카드가 좁으면 아이콘이 저절로 아랫줄로 접힌다
   → 어떤 화면에서도 가로로 넘치지 않는다(휴대전화 390px 가로 스크롤 방지).
   ※ SNS 를 하나도 안 적으신 분은 아이콘 묶음 자체를 안 그리므로 예전과 똑같이 보인다. */
/* 2026-08-28 성함 18px/800 → 20px/700 (부산 회원카드 실측은 24px/700 인데, 부산 카드는
   403px 로 넓고 수원 카드는 287~358px 이라 24px 이면 글자 칸이 좁아진다 → 20px 으로 타협했다) */
.mcard .nm{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;
  font-size:20px;font-weight:700;margin:2px 0 6px;letter-spacing:-.02em;line-height:1.4}
/* 성함 글자. min-width:0 을 주어야 긴 성함이 칸을 뚫고 나가지 않고 줄을 바꾼다. */
.mcard .nm__t{min-width:0;word-break:keep-all;overflow-wrap:anywhere}

/* ── 성함 줄 옆 SNS 아이콘 (2026-08-27 추가) ──────
   · 아이콘은 페이지 안에 SVG 로 직접 그려 넣는다 — 바깥에서 그림·아이콘 글꼴을 받아 오지
     않으므로 «안 뜨는 일» 이 없고, 색이 글자색(currentColor)을 그대로 따라간다.
   · 평소 색은 이 사이트의 옅은 글자색(--ink-3 #6E6B85) — 흰 카드 위 실측 대비 5.11:1 로
     WCAG AA 본문 기준(4.5:1)과 그림 기준(3:1)을 모두 넘는다.
     손을 올리거나 키보드 초점이 오면 파랑(--blue-dk #00688F · 6.22:1)으로 진해진다.
   · 키보드 초점 테두리는 이 파일 아래쪽 공통 규칙(a:focus-visible)이 그려 준다.
   · ★크기 20px · 사이 6px 로 잡은 까닭 — 손가락으로 누르는 것이라 서로 24px 넘게
     떨어져 있어야 한다(WCAG 2.2 «최소 크기» 의 간격 예외). 20+6 = 26px 이라 통과하고,
     다섯 개를 늘어놓아도 124px 이라 카드에서 글자 칸이 가장 좁아지는 133.6px 에도 들어간다
     (위 .mgrid 주석의 계산 참고). */
.sns{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.sns__a{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--ink-3);border-radius:var(--r-sm);
  transition:color .15s}
.sns__a:hover,.sns__a:focus-visible{color:var(--blue-dk)}
.sns__i{display:block;width:20px;height:20px}

/* ── 구분선 아래 묶음 — 「직장명 / 직급」 · 업종 · 사무국이 만든 항목 (2026-08-27 추가) ──
   ★이 묶음은 «그릴 것이 있을 때만» 만들어진다(script 의 metaBlock).
     그래서 빈 구분선이 덩그러니 그어지는 일이 없다 — 대표님 지시(빈 값은 아예 안 보이게)다.
   ※ 예전 .mcard .ind (업종 한 줄) 가 하던 일은 아래 .mmeta__row 로 옮겨 왔다.
     자리도 바뀌었다 — 예전에는 성함 바로 밑이었고, 지금은 구분선 아래 「업종: …」 이다.
     ★.ind 규칙은 바로 아래에 그대로 남겨 두었다 — 두 명단 화면의 script 에 있는
       INDUSTRY_IN_META 스위치를 false 로 돌리면 업종이 다시 이 규칙을 쓰기 때문이다
       (그 스위치가 무엇인지는 members.html·senior.html 의 ⑦-3 주석에 적어 두었다). */
/* 업종을 «예전 자리»(성함 바로 밑 · 라벨 없이)에 그릴 때 쓰는 줄.
   위 스위치가 지금처럼 true 인 동안에는 이 규칙이 쓰이지 않는다.
   ★keep-all + overflow-wrap:anywhere 를 함께 둔다 — 「제과제빵생산제조업」처럼 띄어쓰기가
     없는 긴 이름이 카드를 뚫고 나가지 않게, 끊을 데가 없을 때만 줄을 바꿔 준다. */
.mcard .ind{font-size:14px;color:var(--ink-2);margin:0;line-height:1.65;
  word-break:keep-all;overflow-wrap:anywhere}

/* 2026-08-28 카드 「안쪽」 칸막이선은 바깥 테두리보다 한 단 옅게 둔다(--line-soft 1.13:1).
   바깥 테두리와 같은 진하기면 카드가 두 칸으로 갈라져 보인다(부산도 안쪽 선이 더 옅다). */
/* ★2026-08-31 검수 — 「업종:」 라벨만 줄 끝에 홀로 남고 값이 다음 줄로 내려가,
   그 줄 카드 전체가 옆 카드보다 23px 커졌다(실측 147px vs 170px).
   min-height 로 카드 «키»를 못 박아 두면 업종 이름이 길어져도 줄이 어긋나지 않는다 —
   회원이 늘수록 나빠지는 구조를 미리 막는다. */
/* ★2026-09-14 디자인 검수 M13 — min-height 76px 이 짧은 카드에도 빈칸을 강제했다(같은 줄 카드 높이는 격자가 이미 맞춘다) */
.mcard .mmeta{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);
  min-height:0}
/* 「(주)몬스터 / 대표이사」 — 이 묶음의 머리 줄이라 한 단 진하게 둔다(--ink · 흰 바탕 18.52:1) */
/* 라벨(업종:)은 절대 끊기지 않고, 값만 다음 줄로 접힌다 */
.mcard .mmeta__k{white-space:nowrap}
.mcard .mmeta__job{margin:0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.6;
  word-break:keep-all;overflow-wrap:anywhere}
/* 직장명과 직급을 가르는 빗금. 눈으로만 보는 표시라 옅게 두고, 화면낭독기에서는 감춘다 */
.mcard .mmeta__sep{color:var(--ink-3);font-weight:400}
/* 「업종: 광고업」·「관심사: 등산, 캠핑」 같은 「라벨: 값」 줄.
   글자 크기·색·줄 간격은 예전 업종 줄(.ind)이 쓰던 값 그대로다 — 인상이 달라지지 않게.
   ★keep-all + overflow-wrap:anywhere 를 함께 둔다 — 「제과제빵생산제조업」처럼 띄어쓰기가
     없는 긴 이름이 카드를 뚫고 나가지 않게, 끊을 데가 없을 때만 줄을 바꿔 준다. */
/* ★2026-09-14 디자인 검수 M13 — 「업종:」 라벨과 값을 두 칸 격자로 — 값이 길어도 라벨만 줄 끝에 홀로 남지 않는다 */
.mcard .mmeta__row{margin:3px 0 0;font-size:14px;color:var(--ink-2);line-height:1.65;
  word-break:keep-all;overflow-wrap:anywhere;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:4px;align-items:baseline}
.mcard .mmeta__job + .mmeta__row{margin-top:5px}
/* 라벨(업종·관심사…)은 사무국이 지은 이름이 그대로 온다. ★이모지·아이콘을 쓰지 않고
   ★글자 라벨 + 이 사이트가 쓰는 옅은 색(--ink-3 · 흰 바탕 5.11:1)★ 으로만 구분한다. */
.mcard .mmeta__k{color:var(--ink-3);margin-right:0}
/* ★2026-09-14 대표님 지시 — 업종은 «업종:» 글자 없이 값만 한 줄(라벨이 없어 두 칸 격자를 쓰지 않는다 · 글자 크기·색은 그대로) */
.mcard .mmeta__row--solo{display:block}
/* 입회연도 줄 — 수원JC회원 명단에만 나온다(값이 있는 분에게만 그린다) */
.mcard .mjoin{margin:4px 0 0;font-size:13px;color:var(--ink-3);line-height:1.5}
/* 전화번호 줄 — 수원JC특우회 명단에만 나온다. 번호는 접수된 국내 표기 그대로 쓴다(+82 금지) */
.mcard .mtel{margin:4px 0 0;font-size:14px;line-height:1.5}
.mcard .mtel a{color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
.mcard .mtel a:hover,.mcard .mtel a:focus-visible{text-decoration:underline;color:var(--blue-dk)}
/* 휴대전화에서는 카드 안쪽 여백을 한 단 줄인다(글자 자리를 조금이라도 더 준다).
   ※ 「700px 아래는 무조건 1열」로 묶던 예전 규칙은 뗐다 — 위 auto-fill 이 폭을 보고
     저절로 1열로 내려온다(실측: 대략 660px 아래부터 1열). */
@media (max-width:700px){.mcard{padding:14px}}

/* ── ［리스트］로 보기 (한 줄에 한 분씩) ───────────
   카드와 달리 사진을 작게(46px) 두고 직책·성함·업종(회사)·입회연도(전화)를 한 줄에 늘어놓는다.
   회원이 많아졌을 때 눈으로 훑기 좋으라고 두는 화면이다. */
.mlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mrow{display:flex;align-items:center;gap:clamp(10px,1.6vw,16px);
  padding:11px 2px;border-bottom:1px solid var(--line);min-width:0}
.mrow__ph{flex:0 0 auto;display:block;width:46px;height:46px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2)}
.mrow__ph--init{display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--ink-3)}
/* 직책 배지와 성함을 두 칸(격자)으로 세운다 — 배지 칸을 104px 로 잡아 두면 직책 글자 수가
   달라도 성함이 세로로 가지런히 선다. min-width:200px 는 그 다음 칸(업종·회사)의 시작 자리를
   줄마다 맞춰 표처럼 읽히게 하려고 둔 최소 폭이다(더 긴 직책·성함은 그만큼 밀린다).
   ★justify-content:start 가 ★꼭★ 필요하다 — 없으면 좁은 화면(640px 아래)에서 이 격자가
     줄 폭만큼 늘어나면서 두 칸이 양쪽으로 벌어져 ★성함이 줄 오른쪽까지 밀려간다★
     (2026-08-27 검수 지적 · 390px 실측). 격자의 auto 칸은 남는 자리를 나눠 갖는 성질이 있다. */
.mrow__main{flex:0 0 auto;min-width:200px;display:grid;justify-content:start;
  grid-template-columns:minmax(104px,auto) minmax(0,auto);align-items:center;gap:10px}
.mrow__badge{min-width:0}
.mrow__nm{font-size:16px;font-weight:800;letter-spacing:-.02em;word-break:keep-all}
/* 오른쪽 칸 — ★2026-08-27 (5차) 자리 배분을 고쳤다.
   전에는 업종·입회연도(회사·전화)가 통째로 줄 오른쪽 끝에 몰려 붙어, 성함과 그 사이
   500px 넘게가 텅 비어 있었다. 이제 업종(회사)은 성함 바로 뒤에서 이어 읽히고,
   입회연도(전화번호)만 줄 오른쪽 끝에 선다 — 표처럼 읽히고 가운데가 비지 않는다. */
.mrow__sub{flex:1 1 auto;min-width:0;margin:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 14px;font-size:13px;color:var(--ink-2)}
.mrow__ind,.mrow__co{flex:0 1 auto;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
/* margin-left:auto = 「남는 자리를 왼쪽에 몰아주고 나는 오른쪽 끝에 선다」 */
.mrow__yr,.mrow__tel{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.mrow__yr{color:var(--ink-3)}
/* 전화번호는 줄을 바꾸지 않는다(가운데서 끊기면 번호로 안 보인다).
   글자색은 둘레 글과 같은 --ink-2(흰 바탕 8.87:1) — 누르면 발신 화면이 뜬다. */
.mrow__tel{font-variant-numeric:tabular-nums}
.mrow__tel a{color:var(--ink-2);text-decoration:none}
.mrow__tel a:hover,.mrow__tel a:focus-visible{text-decoration:underline;color:var(--blue-dk)}
@media (max-width:640px){
  /* 좁은 화면에서는 업종·입회연도(회사·전화)를 아랫줄로 내리고,
     사진 폭(46px + 간격 12px)만큼 들여 써서 누구의 정보인지 눈에 붙게 한다 */
  .mrow{align-items:flex-start;flex-wrap:wrap}
  .mrow__main{flex:1 1 auto;min-width:0;padding-top:2px;
    grid-template-columns:minmax(0,auto) minmax(0,auto)}
  .mrow__sub{flex:1 1 100%;padding-left:58px;margin-top:4px}
  /* 아랫줄로 내려온 뒤에는 오른쪽 끝으로 밀지 않는다 — 업종 바로 뒤에 붙여 읽히게 */
  .mrow__yr,.mrow__tel{margin-left:0}
}

/* ── 직책 배지 ─────────────────────────────────── */
/* 2026-08-27 — 명단(수원JC회원·수원JC특우회)에서 직책을 한눈에 알아보게 다는 작은 표(배지)다.
   ★같은 날 2차 손질 — 등급이 셋뿐이던 것을 여섯 단계로 늘렸다.
     app.js 의 기구표(ROLE_GROUPS)가 실제로 나누는 등급이 다섯 가지인데(회장단·고문·이사진·
     분과이사·일반회원) 배지 색이 셋뿐이라, 고문·이사진·분과이사가 모두 같은 하늘색으로
     뭉뚱그려져 눈으로 구분이 안 됐다. 여기에 「회장」 한 분을 회장단 안에서 한 단 더
     올려 모두 여섯 단계로 만들었다.

   색을 어떻게 골랐나 (무지개처럼 알록달록해지지 않게)
     · 새 색 계열을 들이지 않았다. 이 사이트가 이미 쓰는 두 가지 색 — 남색(--navy #130F2D)과
       하늘색(--blue #0097D7) — 안에서 「진하기」만 여섯 단으로 나눴다.
       ★2026-08-27 검수에서 바로잡음: 여기에 원래 「색상각 196°~203° 안에 모두 들어온다」고
         적혀 있었으나 사실과 달랐다. 실측하면 하늘색 계열 다섯(#00688F 196° · #0E3B52 200° ·
         #5B93AE 200° · #C4E4F5 201° · #E3F2FB 203°)만 그 범위이고, 남색 계열 둘
         (--navy #130F2D 248° · --ink-2 #4A4762 247°)은 남보라 쪽이다.
         두 계열 다 이 사이트가 머리말·본문 글자에 예전부터 쓰던 색이라 「알록달록해지지
         않는다」는 결론 자체는 그대로지만, 숫자를 사실대로 고쳐 적는다.
     · 위에서 아래로 갈수록 옅어진다: 남색 채움 → 파랑 채움 → 진한 하늘 → 옅은 하늘 →
       하늘 테두리만 → 회색. 색을 못 가리는 분도 「진하기 차이」로 순서를 읽을 수 있다.

   글자와 바탕의 실측 대비 (WCAG AA 본문 기준 4.5:1 — 여섯 단 모두 통과)
     ① 회장     흰 글자 / #130F2D      18.52:1
     ② 회장단   흰 글자 / #00688F       6.22:1
     ③ 고문     #0E3B52 / #C4E4F5       8.93:1
     ④ 이사진   #0E3B52 / #E3F2FB      10.40:1
     ⑤ 분과이사 #00688F / 흰            6.22:1
     ⑥ 일반회원 #4A4762 / #F7F9FB       8.49:1   (2026-08-28 바탕이 밝아져 8.18 → 8.49)
   테두리 실측 대비 (흰 카드 바탕 기준 · 조작 요소 윤곽 기준 3:1)
     · 고문 #5E97B5 3.20:1 · 분과이사 #5B93AE 3.37:1  → 둘 다 통과.
     · 일반회원의 테두리(--line-2)만 1.47:1 로 낮은데, 이 줄은 「회색 바탕」이 이미
       등급을 알려 주는 장식일 뿐이고 뜻은 배지 안의 글자(직책 이름)가 전한다.
       배지는 눌러서 조작하는 장치가 아니므로 WCAG 의 「윤곽 3:1」 기준이 걸리는 자리도 아니다.
       그래서 예전부터 쓰던 값 그대로 두었다.
       ★2026-08-27 검수에서 바로잡음: 여기에 원래 「바꾸면 특우회 명단의 인상까지 달라진다」고
         적혀 있었으나 사실이 아니다. 특우회 명단(senior.html)이 쓰는 것은 바로 아래의
         .rbadge--member 라는 <다른 줄>이라, .rbadge--gen 을 고쳐도 특우회 화면은 그대로다.
         (즉 원하시면 이 테두리만 3:1 넘는 색으로 올려 드릴 수 있다 — 다만 그러면
          ④ 이사진(테두리 없음)보다 ⑥ 일반회원이 더 또렷해져 「진하기 차례」가 뒤집힌다.
          어느 쪽이 나은지는 눈으로 보고 정하실 일이라 이번 검수에서는 값을 바꾸지 않았다.)

   그 밖
     · 두 명단 페이지가 같은 배지를 쓰도록 members.html 안이 아니라 이 공통 파일에 둔다.
     · 테두리는 여섯 등급 모두 1px 이다(색만 보였다 안 보였다 한다) — 그래야 높이가 서로
       같아 카드 줄이 어긋나지 않는다.
     · overflow-wrap:anywhere 를 함께 둔다 — 직책은 사무국이 자유롭게 적는 칸이라
       「대외정책국제교류특별위원회상임부위원장직무대행」처럼 띄어쓰기 없이 긴 직책이 들어올 수 있다.
       그때 keep-all 만 있으면 배지가 한 줄로 뻗어 휴대전화 화면이 좌우로 밀린다(390px 에서 14px 넘침 실측).
       평소(짧은 직책)에는 아무 영향이 없고, 끊을 데가 없을 때만 줄을 바꿔 준다. */
/* 2026-08-28 (부산 결) 모양만 바꿨다 — 안여백 3px 9px → 4px 12px · 모서리 3px → 12px ·
   아주 얕은 그림자 --sh-1. ★여섯 등급의 «색»은 손대지 않았다(위 표의 대비값이 그대로 유효하다).
   높이는 24 → 26px 로 2px 커지는데, .mcard .role 이 이미 min-height:26px 이라 줄이 어긋나지 않는다. */
.rbadge{display:inline-block;max-width:100%;padding:4px 12px;border:1px solid transparent;
  border-radius:var(--r-card);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.01em;
  box-shadow:var(--sh-1);word-break:keep-all;overflow-wrap:anywhere}

/* ① 회장 — ★2026-08-28 남색 → 깊은 빨강(회장 넥타이색 · 대표님 지시). 흰 글자 7.38:1 */
.rbadge--pres{background:var(--red);color:#fff}
/* ①-2 상임부회장 — ★2026-08-31 대표님 지시로 «다른 회장단과 똑같은 색»이 되었다.
   지시 원문(홈 조직도를 보시며) : "상임부회장 알약 배경색 튀게 하지말고 다른 내무부회장,
   외무부회장 등과 똑같이 해." → 그 뒤 "그쪽(회원수첩)까지 똑같이 맞추기".
   그래서 값을 아래 ②(회장단)와 «같은» --blue-dk 로 맞췄다. 흰 글자 6.22:1 (기준 4.5 통과).
   ★규칙 이름(.rbadge--vice)은 지우지 않는다 — members.html 의 스크립트가 상임부회장에게
     이 이름을 붙이고 있어서, 이름을 지우면 배지가 «색 없는 맨 알약»이 된다.
   ★되돌리시려면 아래 한 줄을 예전 값으로 바꾸시면 된다(다른 곳은 고칠 것이 없다):
       .rbadge--vice{background:var(--blue-2);color:#fff}   ← 예전(짙은 파랑 #2F5796)
   ※ 이 이름을 만들어 내는 화면은 수원JC회원(members.html) «하나뿐»이다(전 파일 확인).
     특우회(senior.html)는 top/exec/member 라는 다른 이름을 써서 영향이 없다.
   ※ 회장(빨강)은 그대로다 — 2026-08-28 「회장은 빨간색 넥타이」 지시가 살아 있다. */
.rbadge--vice{background:var(--blue-dk);color:#fff}
/* ② 회장단(회장·상임부회장을 뺀 직전회장·내무/외무부회장·감사) — 파랑 채움 */
.rbadge--board{background:var(--blue-dk);color:#fff}
/* ③ 고문 — 진한 하늘 바탕 + 진남색 글자. 테두리를 한 겹 둘러 ④보다 무겁게 보이게 한다 */
.rbadge--advisor{background:#C4E4F5;color:#0E3B52;border-color:#5E97B5}
/* ④ 이사진(사무국) — 옅은 하늘 바탕 */
.rbadge--dir{background:#E3F2FB;color:#0E3B52}
/* ⑤ 분과이사(위원장·부위원장) — 채우지 않고 하늘색 테두리만 */
.rbadge--comm{background:#fff;color:var(--blue-dk);border-color:#5B93AE}
/* ⑥ 일반회원(기구표에 없는 직책) — 색을 빼고 회색으로 */
.rbadge--gen{background:var(--paper-2);color:var(--ink-2);border-color:var(--line-2)}

/* ── 예전 이름 세 가지(그대로 둔다) ──
   특우회 명단(senior.html)의 스크립트가 아직 top/exec/member 라는 이름으로 배지를 붙인다.
   그 페이지는 지금 다른 담당이 만지고 있어 손대지 않기로 했으므로, 예전 이름을 지우지 않고
   위 여섯 단계 가운데 같은 값에 이어 둔다(특우회 화면의 생김새는 조금도 바뀌지 않는다).
   ※ 나중에 특우회 쪽 스크립트를 pres/board/advisor/dir/comm/gen 으로 바꾸시면 이 세 줄은 지워도 된다. */
.rbadge--top{background:var(--navy);color:#fff}
.rbadge--exec{background:#E3F2FB;color:var(--blue-dk)}
.rbadge--member{background:var(--paper-2);color:var(--ink-2);border-color:var(--line-2)}

/* ── 사진 자리(등록 전) ────────────────────────── */
/* 2026-08-28 모서리를 카드와 같은 12px 으로 둥글렸다(사진이 들어올 자리이므로 사진과 같은 결로) */
.ph{background:linear-gradient(152deg,#EDF1F5 0%,#E2E8EF 48%,#D8E0E9 100%),#E6EBF1;
  border-radius:var(--r-card);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(122deg,rgba(19,15,45,.045) 0 1px,transparent 1px 11px)}
/* ★2026-08-19 — 원래는 data-size(600 × 600 등) 개발용 규격을 그대로 띄웠다.
   방문자에게는 "만들다 만 티"만 나므로 공개 화면에는 안내 문구 하나만 둔다.
   (규격 숫자는 관리자 화면에서만 쓴다 · 흰 테두리 알약 상자도 없앤다) */
.ph::after{content:"사진 준비 중";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:13px;white-space:nowrap;color:var(--ink-3)}

/* ── 표 ────────────────────────────────────────── */
.tablewrap{overflow-x:auto}
/* ★2026-09-14 접근성 M3 — 옆으로 미는 표는 키보드로도 밀 수 있게 초점을 받는다(privacy.html 의 tabindex="0") → 받은 자리를 보이게 */
.tablewrap:focus-visible{outline:3px solid var(--blue-dk);outline-offset:2px}
table.data{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.data th,table.data td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
table.data th{font-size:13px;color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--line-2);
  letter-spacing:.01em;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data td.n{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 알림 박스 ─────────────────────────────────── */
/* 2026-08-28 모서리 3px → 12px · 아주 얕은 그림자. 왼쪽 4px JCI 하늘색 선은 그대로 둔다
   (페이지 제목 띠 아래의 4px 선과 같은 색이라 화면 전체가 한 결로 묶인다) */
.note{border:1px solid var(--line);border-left:4px solid var(--blue);background:var(--paper-2);
  padding:18px 20px;border-radius:var(--r-card);box-shadow:var(--sh-1);margin:1.4em 0}
.note h4{margin:0 0 8px;font-size:15px;font-weight:700}
.note p{margin:0;font-size:14px;color:var(--ink-2)}   /* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 상자는 꽉 찼는데 글만 68ch 에서 꺾였다 → 폭 제한 삭제 */
.note--warn{border-left-color:var(--warn-line);background:var(--warn-bg)}
.note--warn h4{color:var(--warn)}

/* ── 폼 ────────────────────────────────────────── */
.field{margin-bottom:18px}
.field>label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.field .req{color:var(--err);margin-left:3px}
.field .hint{font-size:13px;color:var(--ink-3);margin:5px 0 0}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],
input[type=number],select,textarea{
  /* 2026-08-28 모서리 3px → 8px(--r-btn) · 안여백 13 → 14px.
     테두리 색(--line-input 3.35:1)은 접근성 하한선이라 그대로 둔다 — 절대 옅게 바꾸지 말 것. */
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line-input);border-radius:var(--r-btn);padding:12px 14px;line-height:1.5}
textarea{min-height:130px;resize:vertical}
/* ★2026-08-27 페이지가 제 나름대로 꾸민 「찾기 칸」까지 한꺼번에 고치는 장치.
   수원JC회원·MOU업체·활동사진첩 세 페이지는 자기 <style> 안에서 찾기 칸 테두리를
   `1px solid var(--line)` 으로 적어 두었다(그 색이 1.26:1 로 가장 흐렸다).
   그 페이지들은 지금 다른 담당이 만지고 있어 손대지 않기로 했으므로,
   여기서 「입력 칸 안에서만」 --line 이라는 색이름의 값을 위 입력칸 전용 색으로 바꿔 준다.
   색이름 값은 그 요소 안쪽에만 물려 내려가므로, 카드·표·구분선의 --line 은 그대로다.
   (굵기·모양·간격은 건드리지 않았다 — 바뀌는 것은 오직 테두리 색뿐이다) */
input,select,textarea{--line:var(--line-input)}
/* 포커스 링은 사이트 전체가 한 규격이다 — 3px / offset 2px (아래 :focus-visible 규칙과 동일) */
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.checkline input{margin-top:5px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--blue)}
.formmsg{margin:14px 0 0;padding:12px 15px;border-radius:var(--r-btn);font-size:14px;display:none}
.formmsg.ok{display:block;background:#EAF6F0;border:1px solid #9FCFB8;color:var(--ok)}
.formmsg.err{display:block;background:var(--err-bg);border:1px solid #E7B4AF;color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 입력칸 상태 표시 — 페이지마다 제각각이던 것을 여기 한 곳으로 모은다(2026-08-19).
   · 오류: 폼 스크립트가 aria-invalid="true" 만 붙이면 테두리가 빨갛게 바뀐다
   · 안내문(placeholder): 흰 바탕 대비 5.1:1 인 --ink-3 (브라우저 기본 회색은 흐려서 안 쓴다)
   · 잠긴 칸: 회색 바탕으로 "지금은 못 고친다"가 눈에 보이게 */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
::placeholder{color:var(--ink-3);opacity:1}
input:disabled,textarea:disabled,select:disabled{background:var(--paper-2);color:var(--ink-3)}

/* ── 상태 ──────────────────────────────────────── */
/* ★2026-08-31 검수에서 고침 — 점선 테두리는 웹에서 관례적으로 «아직 안 채운 자리(편집 중)»를
   뜻한다. 자료가 0건인 자리 8곳에 이 점선 상자가 크게 떠 있어, 방문자에게 «자료가 아직 없다»가
   아니라 «사이트가 덜 만들어졌다»로 읽혔다.
   → 점선을 떼고 왼쪽에 3px 선을 둔 «안내 판»으로 바꾼다. 폭도 줄여 화면을 가로지르지 않게 한다.
   ※ 상자 «안의 문구»(「아직 등록된 공지사항이 없습니다」)는 자료 읽는 코드가 넣는 것이라
     한 글자도 건드리지 않았다.
   대비 — 글자 #4A4762 / 연회색 바탕 #F7F9FB 8.49:1 (전 --ink-3 4.90:1 보다 좋아졌다) */
/* ★2026-09-14 대표님 지적(오른쪽 빈 공간) — 폭 560px 라 «아직 등록된 … 없습니다» 상자가 화면 절반만 차지했다(공지사항·갤러리·특우회·홈·오시는길) → 본문 칸을 꽉 채운다 */
.empty{max-width:none;margin:0;padding:20px 22px;text-align:left;
  color:var(--ink-2);font-size:15px;line-height:1.7;
  background:var(--paper-2);border:0;border-left:3px solid var(--line-2);
  border-radius:var(--r-card)}
.loading{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:14px}

/* ── 푸터 ──────────────────────────────────────── */
/* 푸터는 남색 그대로 둔다 — 부산은 연회색이지만, 이 화면에서 남색을 빼면 지면 아래 무게가
   사라져 페이지가 붕 뜬다(2026-08-28 판단). 대신 페이지 제목 띠와 같은 4px JCI 하늘색 선을
   윗변에 둘러 위아래가 한 짝으로 보이게 했다.
   어두운 바탕 위 글자 실측 대비 — 본문 #B6B2D2 9.08:1 · 아래줄 #807CA0 4.68:1 ·
     흰 제목 18.52:1. (모두 작은 글자 기준 4.5:1 통과) */
/* ★2026-09-14 디자인 검수 M3 — 푸터 글자색도 라벤더 → 파란 회색(남색 바탕 대비 본문 10.49 · 흐린 글 6.17 · 하단 링크 14.31) */
footer.site{background:var(--navy);color:#BAC4D0;border-top:4px solid var(--blue);
  padding:clamp(40px,5vw,56px) 0 26px;font-size:14px}
.ft__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,48px);
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.13)}
.ft__brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;color:#fff}
.ft__brand b{font-size:17px;font-weight:800}
/* ★2026-08-31 검수 — 「바로가기」(13px)가 그 아래 링크(14px)보다 «작아서» 제목 구실을 못 했고,
   링크 11개를 두 칸에 흘려 놓아 오른쪽 칸에는 머리가 없는 목록이 떠 있었다.
   → 제목은 작지만 «대문자·자간·흐린 색»으로 제목임을 알리고(신문 소제목 방식), 링크를 한 단 키운다.
     제목이 두 칸 위에 걸치게 해 오른쪽 칸도 「바로가기」 밑에 속하게 만든다(세로 길이는 그대로). */
/* ★2026-09-14 접근성 L1 — 푸터 「바로가기」 제목을 h4 → h2 로 바꿨다(본문 h2 다음에 h4 로 건너뛰던 제목 순서 · 16화면).
   주 메뉴(nav#nav)에는 aria-label="주 메뉴" 를 달았다(L2). 모양은 그대로다. */
.ft h4,.ft h2{margin:0 0 14px;font-size:12px;color:#8A96A6;font-weight:700;letter-spacing:.08em}
.ft__links h4,.ft__links h2{grid-column:1/-1}
.ft ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ft ul a{text-decoration:none;font-size:15px}
.ft ul a:hover{color:#fff;text-decoration:underline}
/* 2026-08-27 — 「참여」 칸을 없애고 링크 11개를 「바로가기」 하나로 합쳤다(회장님 지시).
   한 줄로 세우면 푸터가 너무 길어져, 원래 두 칸이 쓰던 자리를 그대로 차지하고
   그 안에서만 두 줄로 흐르게 한다. 좁은 화면에서는 다시 한 줄. */
.ft__links{grid-column:span 2}
.ft__links ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.ft__meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;line-height:1.7}
.ft__meta span:nth-child(odd){color:#8A96A6}
.ft__bot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding-top:20px;font-size:13px;color:#8A96A6}
.ft__bot a{color:#DCE3EB;text-decoration:none}
.ft__bot a:hover{text-decoration:underline}
.ft__bot .made{margin-left:auto}
/* ★2026-09-14 접근성 L3 — 「제작 주식회사 찬스」 링크가 앞 글자와 색으로만 구분됐다(2.76:1) → 밑줄 */
.ft__bot .made a{text-decoration:underline;text-underline-offset:3px}
/* 사무국 로그인 — 2026-08-24 대표님 결정으로 머리말의 [로그인] 버튼을 걷어내고 여기로 옮겼다.
   일반 회원은 로그인하지 않는다(홈페이지가 전부 공개). 사무국만 찾아 들어가면 되므로
   눈에 띄지 않게, 그러나 늘 같은 자리에 둔다. */
.ft__bot .ft-admin{color:#8A96A6;font-size:12px}
.ft__bot .ft-admin:hover{color:#DCE3EB;text-decoration:underline}

/* ── 접근성 / 모션 ─────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px}
/* ★2026-09-14 접근성 L8·L10 — 생년월일 칸(안쪽 연·월·일 칸으로 들어온 초점)과 지도 틀(iframe)에도 초점 테두리 */
input[type="date"]:focus-within{outline:3px solid var(--blue);outline-offset:2px}
iframe:focus-visible{outline:3px solid var(--blue-dk);outline-offset:2px}
/* ★2026-10-21 점검수정(M8) — 안전망: 스크립트가 끝내 안 돌면(막힘·꺼짐·오류) 2.5초 뒤 저절로 보이게 한다.
   예전에는 구글 파일이 막히면 본문(오시는길 주소·전화 포함)이 영영 투명했다.
   assets/ui.js 가 돌면 <html class="js"> 를 붙여 안전망을 끄고, 예전 그대로 «화면에 들어올 때» 나타나게 한다. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;
  animation:rise-safety .55s ease 2.5s forwards}
html.js .rise{animation:none}
@keyframes rise-safety{to{opacity:1;transform:none}}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ── 반응형 ────────────────────────────────────── */
/* 메뉴는 8개(로그인 시 "수원JC회원"이 더 붙어 9개) — 좁은 화면부터 간격·글자를 줄여 한 줄에 담는다 */
@media (max-width:1500px){
  header.site .wrap{gap:clamp(14px,2vw,26px)}
  nav.main{gap:clamp(8px,1vw,14px)}
  nav.main a{font-size:13px}
}
/* 접이식(햄버거) 전환점 — 실측으로 정했다.
   .wrap 좌우 여백이 clamp(20px,5vw,64px)라 뷰포트의 약 10%가 여백으로 빠진다.
   실측(Chromium/Pretendard): 브랜드250 + 메뉴 + 로그인85 기준 한 줄 필요폭
     · 메뉴 8개(로그아웃 상태) = 뷰포트 1024px 부터
     · 메뉴 9개(로그인 시 "수원JC회원" 추가) = 뷰포트 1128px 부터
   9개 상태를 기준으로 잡고 한글 폰트 렌더 차이만큼 여유를 둬 1160px 로 둔다.
   1160 이하는 한 줄에 담기지 않는다 → 접이식(햄버거) 메뉴로 */
/* ★ 2026-08-18 메뉴가 8개 → 10개로 늘었다(회장님 요청 · 수원JC특우회 신설).
   1160~1240px 구간에서 로그인한 회원(10개)이 가로로 밀렸다(1200·1180·1165 실측 넘침).
   그 구간에서만 간격과 글자를 한 단계 더 좁힌다. */
@media (max-width:1250px){
  nav.main{gap:clamp(6px,0.7vw,10px)}
  nav.main a{font-size:12px;letter-spacing:-.03em}
}
@media (max-width:1160px){
  nav.main{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 0;border-top:1px solid var(--line);
    /* 2026-08-28 그림자를 공통 값(--sh-4)으로 통일했다 — 값은 예전과 거의 같다 */
    border-bottom:1px solid var(--line);box-shadow:var(--sh-4)}
  /* ★2026-09-14 접근성 H3 — 낮은 화면(가로로 든 휴대전화 · 400% 확대)에서 펼친 메뉴가 화면보다 길면 아래 항목에
     스크롤로도 Tab 으로도 닿지 못했다(780×360 에서 5개 · 320×256 에서 8개) → 메뉴 안에서 스크롤한다 */
  nav.main.open{display:flex;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);
    overflow-y:auto;overscroll-behavior:contain}
  nav.main a{padding:12px var(--pad);border-bottom:0;width:100%;font-size:14px}
  /* 손가락으로 누르는 버튼이라 44×44 를 지킨다(작으면 헛누름이 잦다 · 2026-08-19) */
  /* 2026-08-28 테두리 색을 --line-2(1.47:1) → --line-input(3.35:1) 으로 올렸다.
     왜: 이것은 «누르는 단추»라 윤곽이 3:1 이상이어야 한다(WCAG 1.4.11). 예전 값은 미달이었다.
     모서리도 8px 로 둥글렸다(단추와 같은 결). 크기 44×44 는 그대로 — 손가락 기준이다. */
  .menu-toggle{display:inline-grid;place-items:center;margin-left:auto;width:44px;height:44px;
    background:transparent;border:1px solid var(--line-input);border-radius:var(--r-btn);
    color:var(--navy);cursor:pointer;font-size:16px}
  /* ★2026-09-14 디자인 검수 L3 — 메뉴가 열려 있으면 단추도 «눌린» 모양이 된다(예전에는 열려도 모양이 같았다) */
  .menu-toggle[aria-expanded="true"]{background:var(--paper-2);border-color:var(--blue-dk)}
  .login-btn{margin-left:10px}
}
/* 900 이하는 푸터만 2단으로 — 헤더 규칙은 위 블록에서 이미 적용된다(중복 정의 금지) */
@media (max-width:900px){
  .ft__top{grid-template-columns:1fr 1fr}
  .ft__links{grid-column:span 1}
}
@media (max-width:640px){
  header.site .wrap{gap:8px}
  .brand span{display:none}
  .brand b{font-size:16px}
  /* 햄버거는 좁은 화면에서도 44×44 그대로 둔다(위 규칙 · 줄이지 않는다) */
  .login-btn{margin-left:6px;padding:8px 13px;font-size:13px}
  /* 아이폰 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 제먋대로 확대한다 —
     휴대전화에서는 폼 부품 글자를 16px 로 올려 그 확대를 막는다(2026-08-19).
     ※ 아래 줄은 위 [type=…] 목록과 같은 목록이라야 한다 — 화면 크기 조건(@media)은
       우선순위를 올려 주지 않아서, input 한 단어만 적으면 15px 규칙에 그대로 밀린다. */
  input,select,textarea{font-size:16px}
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],
  input[type=number],input[type=search]{font-size:16px}
  .sechead{flex-wrap:wrap;gap:10px}
  .sechead .rule{display:none}
  .sechead .more{margin-left:auto}
  .ft__top{grid-template-columns:1fr;gap:26px}
  .ft__links ul{grid-template-columns:1fr 1fr}
  .topbar .wrap>span:first-child{display:none}
  /* ★2026-09-14 디자인 검수 L5 — 휴대전화에서 푸터 링크 사이가 좁아 헛누름이 잦았다(높이 18px·간격 8px → 누르는 높이 약 30px·간격 6px) */
  .ft ul{gap:6px}
  .ft ul a{display:inline-block;padding:6px 0}
}