* { box-sizing: border-box; }
/* 메인 히어로 문구용 서체 — 원본 사이트에서 쓰던 EBS 훈민정음 새론체(성경 구절 느낌의 손글씨체) */
@font-face {
  font-family: 'EBSHunminjeongeumSaeron';
  src: url('fonts/EBSHMJESaeronRA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy: #0a1a3f;
  --navy-dark: #08152f;
  --accent: #f0a500;
  --bg: #f7f7f7;
  --card-bg: #ffffff;
  --text-muted: #6b7280;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-heading: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --page-width: 1200px;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: #3a3a38;
  /* 원본 재실측(getComputedStyle, momo2026 본문 단락): letter-spacing은 normal(0)임 —
     예전에 -0.1px로 좁혀놔서 문장 전체가 참고 사이트보다 살짝 더 압축돼 보였음
     (사용자 리포트: "아직도 작아" — 글자 수가 많은 문장일수록 누적되어 체감됨) */
  letter-spacing: normal;
  line-height: 1.7;
  /* 한글은 음절(글자)마다 줄바꿈이 가능한 게 기본값이라, 줄이 좁아지면 "합심하여"
     같은 한 단어 중간(합 / 심하여)에서도 줄바꿈이 일어남. 참고 사이트는 body에
     word-break:keep-all을 걸어 "단어" 단위(띄어쓰기 기준)로만 줄바꿈되게 함 —
     실측 확인(getComputedStyle(document.body).wordBreak === 'keep-all') 그대로 적용 */
  word-break: keep-all;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #262620;
}
a { color: var(--navy); }

/* 로그인/회원가입 줄 — 예전엔 헤더(로고/메뉴) 위에 별도의 줄로 쌓여서, 헤더 전체 높이가
   "로그인줄 + 로고줄"만큼 커졌었음(참고 사이트보다 40px 이상 큼 → 서브페이지 상단 히어로
   이미지가 그만큼 아래로 밀려 보이는 원인이 됨). 참고 사이트 실제 CSS(nav.css의
   header .util)를 다시 보니, 이 줄은 별도 줄이 아니라 헤더 오른쪽 위 구석에 떠 있는
   작은 오버레이였음(position:absolute) — 그래서 헤더는 항상 고정 높이(아래 .site-topbar
   height)만 차지하고, 로그인 줄은 그 안에 겹쳐서 뜸. 원본 그대로 이 방식으로 바꿈 */
.site-utilitybar { position: absolute; top: 0; right: 40px; z-index: 30; }
.site-utilitybar-inner {
  padding: 6px 0;
  display: flex; justify-content: flex-end; gap: 14px;
  font-size: 13px; color: #6b7280;
}
.site-utilitybar-inner a { color: #6b7280; text-decoration: none; }
.site-utilitybar-inner a:hover { color: var(--navy); }

/* 헤더 높이(100px)는 참고 사이트 실제 CSS(nav.css .id-morph-dropdown, min-width:1020px)
   값을 그대로 옮김. 1019px 이하(아래 미디어쿼리)에서는 80px — 이 값은 아래
   .site-topbar.nav-open .site-mainnav의 top:100%/max-height 계산 기준이기도 해서
   실측값 그대로 맞춰야 모바일 메뉴가 헤더 바로 밑, 정확한 높이로 펼쳐짐 */
.site-topbar { background: white; border-bottom: 1px solid #e5e7eb; position: relative; height: 100px; }
/* 헤더는 본문 콘텐츠(1200px 중앙 정렬)와 달리, 화면 끝까지 꽉 채워서
   로고는 브라우저 왼쪽 끝, 메뉴는 오른쪽 끝에 붙도록 함 (max-width 제한 없음) */
.site-topbar-inner {
  width: 100%; height: 100%; padding: 0 40px;
  display: flex; align-items: center; gap: 0;
}

/* 햄버거 버튼(참고 사이트처럼 창이 좁을 때만 보임) — 데스크탑 폭에서는 안 보이고
   가로 메뉴를 그대로 씀. 아래 @media 안에서 좁은 폭일 때만 보이게 켬 */
.nav-toggle {
  display: none; background: none; border: none; padding: 6px; cursor: pointer;
  font-size: 26px; color: #1a1a1a; line-height: 1;
}
.nav-toggle .nav-toggle-icon-close { display: none; }
.site-topbar.nav-open .nav-toggle .nav-toggle-icon-bars { display: none; }
.site-topbar.nav-open .nav-toggle .nav-toggle-icon-close { display: inline-block; }
/* 로고 칼럼 폭 = 정보페이지 콘텐츠 카드의 내부 왼쪽 여백까지 포함해서 맞춤 */
.site-logo { text-decoration: none; display: flex; align-items: center; width: 300px; flex: 0 0 300px; }
/* 로고 크기: 창을 100%(최대) 폭으로 뒀을 때는 원래(56px)보다 15% 큰 64.4px,
   창을 줄이면(반응형) 뷰포트 폭에 비례해서 같이 작아지다가 375px 폭 근처에서 48px로 멈춤 */
.site-logo img { height: clamp(48px, calc(44.02px + 1.06vw), 64.4px); width: auto; display: block; }

/* 메뉴 칼럼: 로고 칼럼(300px) 바로 뒤 남은 공간을 모두 차지함.
   각 카테고리 박스 폭을 억지로 똑같이 맞추면(flex:1) 글자 수가 다 달라서
   오히려 글자 사이 여백이 들쭉날쭉해 보이므로, 박스는 글자 길이에 맞게 두고
   flex-end로 오른쪽 끝에 모아서 붙임 */
/* 메뉴 사이 간격(gap)도 글자 크기와 같이 1400px(40px)~1020px(24px) 사이에서
   뷰포트 폭에 비례해 줄임 — gap을 40px로 고정해두면 글자를 아무리 줄여도
   1020px에서 로고(300px)+메뉴 4개가 넘쳐서 가로 스크롤이 생기는 걸 실측으로
   확인해서, 글자 크기와 함께 gap도 줄이는 쪽으로 보정함. 실제 기기(윈도우 크롬,
   세로 스크롤바 있는 상태)에서 실측했을 때 26px부터 스크롤이 사라졌는데, 폰트
   렌더링 차이에 대비해 여유를 두고 24px까지 줄임 */
/* 메뉴 글자를 헤더 세로 중앙이 아니라 헤더 "아래쪽"에 붙임 — 참고 사이트 실제 CSS
   (nav.css, min-width:1020px)는 .main-nav > ul에 padding-top:40px을 줘서 메뉴 글자가
   100px 헤더의 위 40px은 비우고 아래 60px에 딱 붙게(바닥선이 헤더 바닥과 같게) 만듦.
   로고는 그대로 세로 중앙(.site-topbar-inner의 align-items:center)에 두고, 메뉴만
   align-self:flex-end로 바닥에 붙여서 큰 이미지(히어로)와 더 가까워 보이게 함 */
.site-mainnav { display: flex; align-items: center; align-self: flex-end; flex: 1 1 auto; justify-content: flex-end; gap: clamp(24px, calc(-18.95px + 4.21vw), 40px); }
.nav-category { position: relative; }
.nav-category-label {
  display: block; padding: 10px 4px; font-weight: 700;
  /* 참고 사이트처럼 1020px 폭까지는 햄버거 대신 가로 메뉴를 그대로 보여주기 위해,
     글자 크기를 1400px(원래 크기 22px)~1020px(17px, 햄버거로 바뀌는 기준선) 사이에서
     뷰포트 폭에 비례해 부드럽게 줄임 — 위 .site-mainnav의 gap 축소와 함께 적용해야
     1020px에서 로고(300px)+메뉴 4개가 겹치거나 넘치지 않고 딱 들어감(실측 보정값) */
  font-size: clamp(17px, calc(3.58px + 1.32vw), 22px);
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  color: #666666; text-decoration: none; white-space: nowrap;
}
/* 페이지 안에서의 "활성 카테고리" 강조는 없앰 — 마우스 오버했을 때만 글자색이 바뀜.
   참고 사이트(momo2026.cafe24.com)처럼: 메뉴 중 하나에 마우스를 올리면 나머지
   메뉴 글자는 흐려지고(opacity .5), 올린 메뉴만 진남색(#183e65)으로 선명하게
   강조되는 효과를 실제 사이트 JS 동작(is-dropdown-visible 상태) 대신 순수 CSS
   :hover 조합으로 재현함 */
.site-mainnav:hover .nav-category-label { opacity: 0.5; transition: opacity .2s, color .2s; }
.nav-category:not(.disabled) .nav-category-label:hover {
  opacity: 1;
  color: #183e65;
}
.nav-category.disabled .nav-category-label { color: #c3c8d2; cursor: default; }

/* 드롭다운(2뎁스 메뉴): 참고 사이트 실제 CSS(nav.css)에서 그대로 옮긴 값 —
   진남색(#183e65, 참고 사이트의 --c-main) 배경, 그림자(0 5px 10px, 40% 검정),
   각진 모서리(border-radius 없음), 위쪽 삼각형 포인터, 항목 사이 구분선,
   항목에 마우스를 올리면 반전(흰 배경 90%+남색 글자)되는 효과까지 동일하게 맞춤.
   너비(180px)와 글자 크기(14px)도 실측값 그대로 */
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 180px;
  background: #183e65; flex-direction: column; padding: 0;
  display: none; z-index: 20;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
/* 메뉴와 드롭다운을 이어주는 작은 삼각형 포인터 (참고 사이트의 .dropdown-list::before) */
.nav-dropdown::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #183e65;
}
.nav-category:hover .nav-dropdown { display: flex; }
.nav-dropdown a {
  color: #ffffff; text-decoration: none; font-size: 14px; line-height: 24px;
  padding: 10px 0; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: rgba(255,255,255,0.9); color: #183e65; }
.nav-dropdown-disabled {
  display: block; color: #7d84a0; text-decoration: none; font-size: 14px; line-height: 24px;
  padding: 10px 0; text-align: center; cursor: default; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.nav-dropdown-disabled:last-child { border-bottom: none; }

/* 참고 사이트(momo2026.cafe24.com)와 같은 기준(1020px)으로 맞춤: 참고 사이트는
   min-width:1020px에서 가로 메뉴가 나오므로(=1020px는 가로 메뉴, 1019px 이하부터
   햄버거), 여기서도 경계값이 같도록 max-width를 1019px로 둠. 대신 그 폭에서도
   로고(300px)+메뉴 4개가 겹치지 않도록 위 .nav-category-label의 글자 크기를
   뷰포트 폭에 맞춰 미리 줄여둠(1240px로 기준을 올렸던 이전 방식 대신, 글자 크기를
   줄이는 쪽으로 해결해서 참고 사이트와 같은 폭까지 가로 메뉴를 유지함) */
@media (max-width: 1019px) {
  /* 참고 사이트 실제 CSS 기준(nav.css .id-morph-dropdown, max-width:1020px): 헤더 높이가
     100px에서 80px로 줄어듦 */
  .site-topbar { height: 80px; }
  /* 오른쪽 여백도 헤더 좌우 패딩(아래 .site-topbar-inner, 20px)에 맞춰 줄임 */
  .site-utilitybar { right: 20px; }
  /* 맨 위 관리자용 줄(관리자님/페이지관리/.../로그아웃): 태블릿 폭에서는 데스크탑과
     같이 오른쪽 정렬 유지, 폭이 좁으면 다음 줄로 자연스럽게 넘어가게 함. */
  .site-utilitybar-inner { justify-content: flex-end; flex-wrap: wrap; row-gap: 4px; padding: 6px 0; }

  /* 참고 사이트(momo2026.cafe24.com)처럼: 창이 좁아지면 가로 메뉴 줄 대신
     로고 옆에 햄버거 버튼만 보이고, 버튼을 누르면 메뉴 전체가 화면 아래로
     펼쳐지는 목록형 메뉴로 바뀜 */
  .site-topbar-inner { padding: 0 20px; }
  /* 로고도 참고 사이트처럼 이 폭부터는 flex 흐름에서 빠져나와 헤더 왼쪽에 세로
     가운데 정렬로 떠 있음(position:absolute) — 로그인 줄과 마찬가지로, 헤더 높이가
     로고 크기 때문에 늘어나지 않고 항상 고정(80px)이 되도록 하기 위함 */
  .site-logo {
    position: absolute; top: 50%; left: 20px; transform: translateY(-50%);
    width: auto; flex: none;
  }
  .nav-toggle { display: block; margin-left: auto; }

  /* 평소엔 숨어 있다가 햄버거를 눌러 header에 .nav-open이 붙으면 헤더 바로 아래에
     전체 폭으로 펼쳐짐. 참고 사이트도 같은 방식(모바일 메뉴 wrapper가 헤더 밑에 절대
     위치로 펼쳐지고, 화면 높이를 넘으면 그 안에서 스크롤됨) */
  .site-mainnav { display: none; }
  .site-topbar.nav-open .site-mainnav {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 26px;
    position: absolute; top: 100%; left: 0; width: 100%;
    background: #fff; padding: 24px 24px 32px; margin: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    max-height: calc(100vh - 80px); overflow-y: auto; z-index: 50;
  }
  /* 카테고리 제목 = 펼친 메뉴의 소제목 역할. 기존 13px가 너무 작다는 요청으로
     1.5배(19.5px)로 키웠던 크기는 유지하고, 진한 색으로 바꿔서 아래 목록(회색)과
     구분되게 함. 폭 제약이 없어서 nowrap이어도 줄바꿈 없이 한 줄로 다 들어감.
     데스크탑 가로메뉴의 서예체(EBSHunminjeongeumSaeron/Song Myung)는 펼친 메뉴에서는
     참고 사이트처럼 일반 고딕(본문 폰트)으로 바꿔서, 아래 하위목록 글자체와 통일함 */
  .nav-category-label {
    font-size: 19.5px; font-family: var(--font-body); white-space: nowrap;
    text-align: left; padding: 0; color: #1a1a1a;
  }
  .nav-category:not(.disabled) .nav-category-label:hover { color: #1a1a1a; }
  /* 하위 메뉴는 마우스오버로 뜨는 팝업이 아니라, 제목 바로 밑에 항상 펼쳐진 목록으로 —
     데스크탑용 삼각형 포인터/구분선/반전 호버는 모바일에서는 필요 없어서 끔 */
  .nav-dropdown {
    position: static; transform: none; display: flex; min-width: 0;
    background: none; box-shadow: none; padding: 10px 0 0;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a {
    color: #8a8a8a; font-size: 15px; text-align: left; padding: 7px 0; border-bottom: none;
  }
  .nav-dropdown a:hover { background: none; color: #1a1a1a; }

  /* 관리자 전용 맨 위 줄(관리자님/정보수정/페이지관리/공지사항관리/등급관리/회원관리/
     로그아웃, 총 7개)은 게스트용 "로그인/회원가입"(2개)보다 훨씬 길어서, 이 폭부터는
     떠있는(absolute, top:0) 방식 그대로 두면 오른쪽 끝이 로고 글자·햄버거 버튼과
     가로로 겹침(사용자 리포트로 발견: "플로팅으로 되어있어서 겹쳐진다"). 관리자로
     로그인했을 때만 이 줄을 다시 일반 흐름(static)으로 되돌려 로고/메뉴 줄 "위"에
     쌓이게 하고, 헤더 높이를 그 내용만큼 자동으로 늘려서 겹치지 않게 함 —
     게스트/일반 회원(줄이 짧아 원래도 안 겹침)은 기존 겹쳐 뜨는 방식 그대로 유지 */
  .site-topbar.has-admin-utilitybar { height: auto; }
  .site-topbar.has-admin-utilitybar .site-utilitybar { position: static; }
  .site-topbar.has-admin-utilitybar .site-utilitybar-inner { padding: 10px 20px; }
  .site-topbar.has-admin-utilitybar .site-topbar-inner {
    height: 80px; position: relative;
  }
}

/* 진짜 모바일 폭(640px 이하)에서만 상단 관리자용 줄을 가운데 정렬로 바꿈.
   그 위 태블릿 폭(641~1020px)에서는 위 @media(max-width:1020px)의 오른쪽 정렬을 그대로 씀 */
@media (max-width: 640px) {
  /* 참고 사이트 실제 CSS 기준(header .util{right:2px}, header .logo{left:10px}):
     이 폭부터는 구석 여백을 한 번 더 좁힘 */
  .site-utilitybar { right: 10px; }
  .site-logo { left: 10px; }
}

.container { max-width: var(--page-width); margin: 0 auto; padding: 30px 20px 60px; }

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.btn {
  background: #0a1a3f; color: white; padding: 8px 16px; border-radius: 6px;
  text-decoration: none; font-size: 14px;
}
/* .btn을 <button>에도 쓸 때(예: 선택 삭제) 브라우저 기본 버튼 테두리/폰트가
   <a class="btn">와 다르게 보이지 않도록 맞춰줌 — line-height를 안 맞춰주면 <button>은
   브라우저 기본값(line-height:normal, 폰트마다 다름)을 쓰고 <a>는 body의 line-height(1.7)를
   물려받아서, 자료실의 "삭제"(button)와 "+ 새 글 등록"(a) 버튼처럼 나란히 놓였을 때
   둘이 세로 높이가 눈에 띄게 달라 보이는 문제가 있었음(button이 더 작아 보임) */
button.btn { border: none; cursor: pointer; font-family: inherit; line-height: inherit; }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }

/* 공지사항 관리 목록 — 체크박스로 여러 개를 골라 한번에 삭제할 수 있도록
   기존 .page-list-item(a 태그 하나짜리)과 달리 체크박스 + 링크를 함께 담는 줄 */
.notice-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.notice-select-all {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: #4b5563; cursor: pointer;
}
.notice-select-all input { cursor: pointer; }
.notice-list-actions { display: flex; align-items: center; gap: 8px; }
.notice-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: white; border-radius: 6px;
  border-left: 4px solid transparent; font-size: 14px;
}
.notice-list-item.active {
  background: var(--navy); color: white; font-weight: 700; border-left-color: transparent;
}
.notice-list-item.pinned { border-left-color: #f0a500; background: #fffaf0; }
.notice-list-item.pinned.active { background: var(--navy); border-left-color: #f0a500; }
.notice-list-item .notice-checkbox { flex: none; width: 16px; height: 16px; cursor: pointer; }
.notice-list-item a { flex: 1; text-decoration: none; color: inherit; }
/* 핀 토글 아이콘 — 고정 안 된 글은 흐리게, 고정된 글은 또렷하게 보여서 상태를 바로 구분 */
.notice-list-item a.pin-toggle {
  flex: none; opacity: 0.3; font-size: 15px; line-height: 1;
}
.notice-list-item a.pin-toggle.is-pinned { opacity: 1; }
.notice-list-item a.pin-toggle:hover { opacity: 0.7; }
.notice-list-item a.pin-toggle.is-pinned:hover { opacity: 1; }
.pin-badge {
  display: inline-block; background: #f0a500; color: white; font-weight: 700;
  font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: middle;
}
.pin-checkbox-label {
  display: flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer;
}

/* 글쓰기 폼 맨 아래 줄 — 왼쪽엔 첨부파일 선택, 오른쪽엔 취소/저장 버튼 */
.notice-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 18px; flex-wrap: wrap;
}
.notice-form-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notice-form-attach-label { font-size: 14px; font-weight: 600; }
.notice-form-buttons { display: flex; gap: 8px; }
/* 전역 form button { margin-top:18px } 이 이 줄 안에서는 버튼 세로 정렬을 어긋나게 하므로 상쇄 */
.notice-form-buttons button, .notice-form-buttons a.btn { margin-top: 0; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }

.post-list { display: flex; flex-direction: column; gap: 10px; }
.post-item {
  display: flex; justify-content: space-between; align-items: center;
  background: white; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-left: 4px solid #f0a500;
}
.post-item-link {
  flex: 1; display: block; padding: 16px 20px;
  text-decoration: none; color: inherit;
}
.post-item-actions {
  display: flex; gap: 10px; padding: 0 20px; font-size: 13px; white-space: nowrap;
}
.post-item-actions a { color: #6b7280; text-decoration: none; }
.post-item-actions a:hover { color: #dc2626; }
.post-title { font-weight: 600; font-size: 16px; }
.post-meta { font-size: 12px; color: #6b7280; margin-top: 4px; }
.level-tag {
  display: inline-block; margin-left: 8px; background: #eef2ff; color: #4338ca;
  padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}

.media-block { margin: 20px 0; }
.media-name { font-size: 13px; color: #6b7280; margin-bottom: 6px; }

.post-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.post-gallery-item {
  background: white; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  text-decoration: none; color: inherit; display: block;
}
.post-gallery-thumb {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: #eef1f6; display: flex; align-items: center; justify-content: center;
}
.post-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-gallery-thumb-placeholder { color: #9aa4b7; font-size: 13px; text-align: center; padding: 10px; }
.post-gallery-thumb-placeholder .icon { font-size: 30px; display: block; margin-bottom: 6px; }
.post-gallery-title {
  padding: 10px 12px; font-size: 14px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 선택 체크박스를 썸네일 위(사진을 가림)가 아니라 이미지 없는 흰 바탕인 메타 줄로 옮김 —
   작성일자는 왼쪽, 체크박스는 오른쪽 끝에 둬서 사진을 전혀 가리지 않게 함 */
.post-gallery-meta {
  padding: 0 12px 12px; font-size: 12px; color: #6b7280;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.post-gallery-select { display: flex; align-items: center; cursor: pointer; }
.post-gallery-select .post-gallery-checkbox { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* 아기선교자료실: "삭제" + "+ 새 글 등록" 버튼 줄을 목록 아래쪽, 오른쪽 끝에 배치.
   소스 순서상 삭제 버튼이 먼저(=왼쪽) 오고 새 글 등록이 그 오른쪽에 옴 */
.gallery-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 16px 0; }
/* 전역 form button { margin-top:18px } (다른 곳의 "저장"류 버튼을 입력칸 아래로 띄우려는 용도)이
   이 삭제 버튼도 <form> 안에 있다는 이유만으로 18px 아래로 밀어내려서, 바로 옆 "+ 새 글 등록"(a)과
   세로 위치가 안 맞고 어긋나 보였음 — 다른 곳(.inline-form button 등)과 같은 방식으로 상쇄 */
.gallery-toolbar button { margin-top: 0; }

/* 게시글 상세보기 — 제목 줄 오른쪽의 "수정"+"삭제" 버튼을 나란히 붙여줌 */
.post-view-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* 공지사항 상세보기 맨 아래 줄 — 왼쪽에는 "목록" 버튼, 오른쪽에는(관리자만) 수정/삭제
   버튼을 둠. 관리자가 아니면 "목록" 버튼 하나만 남는데, space-between에 자식이 하나면
   자동으로 맨 왼쪽에 붙으므로 그대로 둬도 됨 */
.post-bottom-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
/* <button class="btn">(삭제)와 <a class="btn">(+ 새 글 등록)의 높이가 서로 달라 보이는 문제 —
   <button>은 브라우저가 내용을 자체적으로 가운데 정렬하는 내부 레이아웃을 쓰기 때문에
   padding+line-height로 계산한 높이보다 작게 나오고, <a>는 일반 블록처럼 line-height가
   그대로 박스 높이에 반영돼서(이 폰트 기준 약 18px 더 큼) 둘이 나란히 있을 때 높이 차이가
   눈에 띔. line-height를 맞춰도 이 차이는 안 없어져서, <a>도 <button>과 같은
   "내용을 가운데 정렬하는" 레이아웃(inline-flex + align-items:center)으로 만들고
   높이를 <button>의 실측값(40px)에 고정해서 완전히 맞춤 */
.gallery-toolbar a.btn {
  height: 40px; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0;
  line-height: normal;
}
@media (max-width: 640px) {
  .post-gallery { grid-template-columns: repeat(2, 1fr); }
}

.pagination {
  display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px;
  font-size: 13px; text-decoration: none; color: #374151;
}
.pagination a:hover { background: #f3f4f6; }
.pagination span.current { background: #0a1a3f; color: white; font-weight: 600; }

/* 게시판 목록(공지사항 / 아기선교나눔터) — 참고 사이트와 동일한 테이블형 게시판 디자인.
   번호/제목/작성자/작성일자/조회수 컬럼, 남색 헤더, 줄무늬 행, 호버 하이라이트, 고정글은
   번호 대신 "공지"로 표시하는 것까지 참고 사이트 스펙을 그대로 옮김. */
.board-table-wrap { width: 100%; overflow-x: auto; margin-top: 4px; }
.board-table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ccc; font-size: 14px; }
.board-table thead th {
  background: #183e65; color: #fff; font-weight: 700; font-size: 14px;
  text-align: center; padding: 12px 5px; border-right: 1px solid #3a5c82; white-space: nowrap;
}
.board-table thead th:last-child { border-right: none; }
.board-table th.bt-no, .board-table td.bt-no { width: 60px; }
.board-table th.bt-author, .board-table td.bt-author { width: 15%; }
.board-table th.bt-date, .board-table td.bt-date { width: 100px; }
.board-table th.bt-views, .board-table td.bt-views { width: 60px; }
/* 관리자용 선택 삭제 체크박스 칸 — 아기선교자료실(카드형)과 같은 방식으로,
   목록에서는 체크박스로 여러 개 골라 한번에 지우고, 개별 수정/삭제는 글을
   열었을 때(상세보기) 버튼으로 하도록 통일(기존의 행마다 수정/삭제 글자링크는 뺌) */
.board-table th.bt-select, .board-table td.bt-select { width: 40px; }

.board-table tbody tr { height: 40px; cursor: pointer; background: #fff; }
.board-table tbody tr.bt-alt { background: #f6f6f6; }
.board-table tbody tr:hover { background: #eee; }
.board-table tbody tr.bt-notice { background: #f0f5fa; }
.board-table tbody tr.bt-notice:hover { background: #e6eef7; }

/* 참고 사이트(momo2026) 실측: 목록 행(tr) 글자는 번호/제목/작성자/작성일자/조회수 전부
   16px, 색상 #666666으로 "통일"되어 있음 — 제목 칸만 큰 게 아니라 전체 행이 16px임.
   헤더(검정 파랑 바탕 "번호/제목/..." 줄)만 14px/흰색/굵게로 더 작음(이건 이미 일치).
   우리 쪽은 기존에 행 전체를 14px/#333으로 써서 참고 사이트보다 작고 진하게 보였음 —
   실측값(16px/#666666)으로 교체. padding도 실측: 제목 칸 외 나머지 칸은 0(세로 중앙정렬은
   40px 고정 행높이로만 처리), 제목 칸만 10px 전체 여백 */
.board-table td {
  padding: 0; text-align: center; font-size: 16px; color: #666;
  border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
}
.board-table td:last-child { border-right: none; }
.board-table td.bt-subject { text-align: left; padding: 10px; }
.board-table td.bt-subject a { color: #666; text-decoration: none; }
.board-table tbody tr:hover td.bt-subject a { text-decoration: underline; }
.board-table td.bt-no { color: #666; }
.board-table tr.bt-notice td.bt-no { color: #1a4a7c; font-weight: 700; }
.board-table td.bt-author, .board-table td.bt-date, .board-table td.bt-views { color: #666; }
.board-table td.bt-select { cursor: default; }
.board-table td.bt-select .bt-select-checkbox { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.board-table tr.bt-empty { cursor: default; }
.board-table tr.bt-empty:hover { background: #fff; }
.board-table td.bt-empty-cell { text-align: center; padding: 40px 10px; color: #999; }

@media (max-width: 767px) {
  .board-table th.bt-author, .board-table td.bt-author,
  .board-table th.bt-date, .board-table td.bt-date,
  .board-table th.bt-views, .board-table td.bt-views { display: none; }
}

/* 게시판 검색폼 — 옵션(제목/작성자/내용) · 검색어 · 검색버튼 한 줄, 참고 사이트처럼 가운데 정렬.
   검색어 입력칸이 옵션보다 길게 나오도록 폭을 다르게 줌. */
.board-search-form {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin: 24px 0 4px; flex-wrap: nowrap;
}
.board-search-form select,
.board-search-form input[type="text"] {
  height: 34px; border: 1px solid #ccc; border-radius: 4px; padding: 0 10px; font-size: 14px;
  box-sizing: border-box;
}
/* 사이트 공통폼 규칙(form select { width:100% })이 옵션 드롭다운을 한 줄 전체로 늘려서
   검색어/버튼이 다음 줄로 밀려나던 문제 — 여기서 폭을 명시해서 덮어씀 */
.board-search-form select { width: 110px; flex: 0 0 auto; }
.board-search-form input[type="text"] { width: 320px; flex: 0 1 320px; }
.board-search-btn {
  height: 34px; padding: 0 18px; background: #183e65; color: #fff; border: none;
  border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
  box-sizing: border-box;
  margin-top: 0; /* 전역 form button { margin-top:18px }이 검색버튼만 아래로 밀어내려서 상쇄 */
}
.board-search-btn:hover { background: #1a4a7c; }

@media (max-width: 480px) {
  .board-search-form { gap: 4px; }
  .board-search-form select { width: 84px; }
}

/* 강의실 탭(설교강해/상담) — 사용자가 보내준 참고 사이트 스크린샷을 픽셀 단위로 확인:
   바깥 테두리/탭 사이 구분선은 연한 회색(#e5e5e5) 1px이고, 남색(#000c37)은 아래쪽
   테두리에만 2px 두껍게 깔림(.content-header-row 등 다른 곳의 "두꺼운 밑줄"과 같은
   패턴). 모서리도 둥글지 않고 직각. 선택된 탭만 남색 배경+흰 글씨로 채워짐 */
.board-tabs {
  display: flex;
  border: 1px solid #e5e5e5;
  border-bottom: 2px solid #000c37;
  margin: 0 0 20px;
}
.board-tab {
  flex: 1;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 700;
  color: #000c37;
  background: #fff;
  text-decoration: none;
}
.board-tab:not(:last-child) { border-right: 1px solid #e5e5e5; }
.board-tab:hover:not(.active) { background: #f5f6f8; }
.board-tab.active { background: #000c37; color: #fff; }
@media (max-width: 480px) {
  .board-tab { padding: 14px 0; font-size: 14px; }
}

.post-body { margin-top: 24px; line-height: 1.7; }

/* Quill 편집기 들여쓰기(사용자 요청) — 에디터 안(.ql-editor)에서는 Quill 자체 CSS로
   보이지만, 저장된 HTML을 공개 페이지(.page-content — 페이지관리/게시글/공지사항이
   모두 이 클래스를 씀)에 그대로 꺼내 보여줄 때는 Quill CSS가 안 실려있어서 ql-indent-N
   클래스만 남고 들여쓰기가 사라짐. Quill 기본 들여쓰기 값(3em씩, 목록 항목은 4.5em씩)을
   그대로 옮겨와서 똑같이 보이게 함 */
.page-content .ql-indent-1 { padding-left: 3em; }
.page-content .ql-indent-2 { padding-left: 6em; }
.page-content .ql-indent-3 { padding-left: 9em; }
.page-content .ql-indent-4 { padding-left: 12em; }
.page-content .ql-indent-5 { padding-left: 15em; }
.page-content .ql-indent-6 { padding-left: 18em; }
.page-content .ql-indent-7 { padding-left: 21em; }
.page-content .ql-indent-8 { padding-left: 24em; }
.page-content li.ql-indent-1 { padding-left: 4.5em; }
.page-content li.ql-indent-2 { padding-left: 7.5em; }
.page-content li.ql-indent-3 { padding-left: 10.5em; }
.page-content li.ql-indent-4 { padding-left: 13.5em; }
.page-content li.ql-indent-5 { padding-left: 16.5em; }
.page-content li.ql-indent-6 { padding-left: 19.5em; }
.page-content li.ql-indent-7 { padding-left: 22.5em; }
.page-content li.ql-indent-8 { padding-left: 25.5em; }

/* 공지사항 첨부파일 — 관리자 글쓰기 폼(admin/notices.php)과
   공개 상세 페이지(community/notice_view.php)에서 함께 씀 */
.post-attachments { margin-top: 28px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.post-attachments h4 { font-size: 14px; color: #4b5563; margin: 0 0 8px; }
.attachment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.attachment-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.attachment-list a { color: #0a1a3f; text-decoration: none; }
.attachment-list a:hover { text-decoration: underline; }
.attachment-remove { color: #dc2626 !important; font-size: 13px; margin-left: 4px; }

.muted { color: #6b7280; font-size: 14px; }
.error { color: #dc2626; font-size: 14px; }
.success { color: #16a34a; font-size: 14px; }

/* 폼 공통 */
form label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
form input[type=text], form input[type=password], form input[type=number], form textarea, form select {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
}
/* iOS Safari는 포커스되는 입력창의 글자 크기가 16px보다 작으면 자동으로 화면을 확대함.
   확대되고 나면 화면 폭보다 콘텐츠가 커져서 옆으로 스크롤(사용자가 "사이드바"라고 표현한
   그 증상)이 생김 — 로그인 페이지의 아이디/비밀번호 입력창에 탭했을 때 이 현상이 났던 것.
   모바일 폭에서만 16px로 올려서 확대 자체가 일어나지 않게 막음(폭이 넓은 화면은 그대로 14px 유지) */
@media (max-width: 480px) {
  form input[type=text], form input[type=password], form input[type=number], form textarea, form select {
    font-size: 16px;
  }
}
/* number 타입이 위 목록에 빠져 있어서, 등급관리의 "레벨" 입력칸만 브라우저 기본 스타일(높이 낮고
   테두리도 다름)로 남아 옆의 스타일 입혀진 버튼과 크기가 확 달라 보였음. 위에서 함께 스타일 적용 */
form button {
  margin-top: 18px; background: #0a1a3f; color: white; border: none;
  padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
form button:disabled { opacity: 0.5; cursor: not-allowed; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
/* 검색창처럼 select+input+button이 한 줄에 나란히 있어야 하는 폼.
   input[type=text] 등에 전역 width:100% 규칙이 더 구체적이라(위 form input[type=text] 참고)
   여기 auto 지정이 밀려서 입력칸이 줄 전체를 차지해버려 select/input/button이 각각
   세 줄로 나뉘어 보였음 — 같은 수준의 구체성(속성 선택자)으로 맞춰서 확실히 이기도록 함 */
.inline-form input[type=text], .inline-form input[type=password], .inline-form input[type=number],
.inline-form select { width: auto; }
/* form button의 전역 margin-top:18px이 한 줄짜리 인라인폼에서는 버튼만 아래로 밀어내려서
   옆의 입력칸과 높이가 안 맞아 보였음(정렬 어긋남) — 여기서는 없애서 나란히 맞춤 */
.inline-form button { margin-top: 0; }

.auth-box {
  max-width: 360px; margin: 80px auto; background: white; padding: 30px;
  border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center;
}
.auth-box h1 { font-size: 18px; margin-bottom: 20px; }
/* 로그인 화면 제목(글자)을 헤더랑 같은 로고(메인페이지로 이동하는 링크)로 바꿈 */
.auth-logo { display: inline-block; margin-bottom: 20px; }
.auth-logo img { height: 48px; width: auto; display: block; }

/* 모바일 폭에서는 4개 칼럼(등급명/레벨/수정/삭제)이 좁아져서 "수정","삭제" 헤더와
   "저장" 버튼, "삭제" 링크가 두 줄로 쪼개져 보였음. 셀 안에서 줄바꿈을 막고,
   그래도 폭이 부족하면 표 자체를 가로 스크롤하도록 감싸서 깨져 보이지 않게 함 */
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; margin: 14px 0; background: white; }
.admin-table th, .admin-table td {
  padding: 8px 12px; border-bottom: 1px solid #e5e7eb; font-size: 14px; text-align: left;
}
/* 헤더는 그냥 설명 글자라 줄바꿈돼도 문제없지만, "레벨(숫자가 높을수록 상위 등급)"처럼
   긴 헤더까지 nowrap을 걸면 표의 최소 너비가 불필요하게 커져서 중간 폭 화면에서도
   .table-scroll 자체에 가로 스크롤바가 생겨버림(가늘게 옆에 생겨서 "사이드바"처럼 보임).
   실제로 줄바꿈되면 보기 안 좋은 건 "저장" 버튼/"삭제" 링크가 있는 td뿐이라 nowrap은 td에만 적용 */
.admin-table td { white-space: nowrap; }
.admin-table input, .admin-table select { padding: 6px 8px; font-size: 13px; }
/* 회원관리의 "변경" 버튼이 전역 form button 패딩(10px 20px)을 그대로 써서
   같은 줄의 등급 select(6px 8px, 13px)보다 훨씬 커 보였음(예: 40px vs 31px).
   select/입력칸과 같은 패딩·폰트 크기로 맞추고, select에 있는 1px 테두리만큼도
   투명 테두리로 채워서 실제 박스 높이까지 똑같이 맞춤 */
.admin-table button { padding: 6px 12px; font-size: 13px; border: 1px solid transparent; }
/* 회원관리 "변경" 칸의 select+버튼이 .inline-form의 margin-bottom:20px(단독 폼용으로 만든 값)을
   그대로 물려받아서 그 셀만 20px 더 높아졌고, 표는 한 행의 모든 칸이 같은 높이를 맞추기 때문에
   결국 행 전체가 필요 이상으로 커져서 "아이디/이름/등급" 텍스트와 select/버튼의 높이가
   서로 안 맞아 보였음. 표 안에서는 이 여백이 필요 없으므로 0으로 없앰 */
.admin-table .inline-form { margin-bottom: 0; }

/* 회원목록처럼 칼럼이 많고(아이디/이름/등급/변경/가입일) 그 중 한 칸에 select+버튼까지
   들어가는 표는, 폭이 좁은 화면에서는 가로 스크롤을 줘도 사실상 다 보기 불편해서
   아예 "표"가 아니라 "카드 목록"처럼 한 줄씩 세로로 쌓아 보여줌. .users-table처럼
   별도 클래스를 붙인 표에만 적용(등급관리 표는 form이 tr 바로 밑에 있는 특수 구조라
   여기서 건드리면 깨질 수 있어 제외) */
@media (max-width: 640px) {
  .table-scroll:has(.users-table) { overflow-x: visible; }
  .users-table thead { display: none; }
  .users-table, .users-table tbody { display: block; width: 100%; }
  .users-table { border: none; }
  /* 필드(선택/아이디/이름/등급/전화번호/변경/비밀번호/가입일) 8개를 전부 한 줄씩
     세로로 쌓으면(이전 방식) 카드 하나가 너무 길어져서 "한눈에 안 보인다"는 사용자
     피드백 — 성격이 비슷한 항목끼리 grid-template-areas로 묶어 재배치함:
     1줄(아이디/이름, 가장 중요한 식별 정보, 레이블 없이 바로 보여줌) →
     2줄(등급·전화번호, 작은 메타 정보를 나란히) → 3줄(가입일) →
     4줄(등급변경/비밀번호초기화, 실제 조작 버튼들을 한 줄에 나란히 — 처음엔 두 줄로
     나눴다가 사용자 요청으로 한 줄에 합침).
     td 자체 순서(DOM/HTML)는 그대로 두고 grid-area로 보이는 위치만 재배치해서
     users.php 마크업은 건드리지 않음 */
  .users-table tr {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas:
      "check id   name"
      ".     grade phone"
      ".     joined joined"
      ".     change pw";
    column-gap: 10px; row-gap: 6px; align-items: start;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  }
  .users-table tbody tr:last-child { margin-bottom: 0; }
  .users-table td {
    display: block; width: auto; border-bottom: none; padding: 0; white-space: normal;
  }
  .users-table td:empty { display: none; }
  .users-table td:nth-child(1) { grid-area: check; align-self: center; }
  .users-table td:nth-child(2) { grid-area: id; font-size: 15px; font-weight: 700; }
  .users-table td:nth-child(3) { grid-area: name; align-self: center; color: #4b5563; }
  .users-table td:nth-child(4) { grid-area: grade; }
  .users-table td:nth-child(5) { grid-area: phone; }
  .users-table td:nth-child(6) { grid-area: change; }
  .users-table td:nth-child(7) { grid-area: pw; }
  .users-table td:nth-child(8) { grid-area: joined; font-size: 12px; color: #9ca3af; }
  /* 아이디/이름은 그 자체로 뭔지 알 수 있어서 레이블을 생략하고, 나머지만
     "등급" 처럼 작은 레이블을 값 위에 붙임(선택 체크박스도 레이블 불필요) */
  .users-table td::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #9ca3af; margin-bottom: 2px;
  }
  .users-table td:nth-child(1)::before,
  .users-table td:nth-child(2)::before,
  .users-table td:nth-child(3)::before { content: none; }
  /* "변경" 칸(등급 select + 변경 버튼)이 칸 폭(비밀번호 칸과 나눠 쓰는 절반 폭)보다
     넓어서 select와 버튼이 두 줄로 쪼개져 보였음 — select/버튼 자체를 작게 줄이고
     줄바꿈을 막아서 한 줄 안에 나란히 들어가게 함 */
  .users-table td:nth-child(6) .inline-form {
    flex-wrap: nowrap; gap: 4px;
  }
  .users-table td:nth-child(6) .inline-form select {
    font-size: 12px; padding: 4px 2px; max-width: 72px;
  }
  .users-table td:nth-child(6) .inline-form button {
    font-size: 12px; padding: 4px 8px; flex-shrink: 0;
  }
  /* "비밀번호" 칸의 초기화 버튼도 옆 "변경" 버튼과 크기가 안 맞아 보여서 같은 값으로 맞춤 */
  .users-table td:nth-child(7) .reset-pw-btn {
    font-size: 12px; padding: 4px 8px;
  }
}

#progressArea div { font-size: 13px; color: #374151; margin: 4px 0; }

/* 페이지 관리 목록 — 카테고리(큰 제목) 아래 작은 목록으로 묶어서 표시 */
/* 페이지 관리: 카테고리별 페이지 목록(.page-groups)을 왼쪽 사이드바로, "OO 수정" 폼은
   오른쪽에 나란히 — 공개 화면의 사이드바+본문 카드 레이아웃(.info-sidebar + .info-content-card)과
   같은 구성. 왼쪽 칸 높이를 오른쪽(더 긴 쪽) 폼 높이에 맞추고(align-items 기본값 stretch),
   그 늘어난 칸 "안쪽"의 목록은 sticky로 top:20px에 붙여서 긴 폼을 스크롤해도 계속 보이게 함.
   (sticky를 늘어나는 칸 자체에 바로 주면 브라우저가 제대로 붙여주지 못해서, 늘이는 역할
   (.page-groups, flex item)과 붙는 역할(.page-groups-inner, 그 안쪽의 평범한 블록)을 나눔) */
.page-admin-intro { margin-bottom: 28px; }
.page-admin-layout { display: flex; gap: 24px; } /* align-items 기본값(stretch)을 그대로 씀 */
.page-admin-layout .page-groups { flex: 0 0 260px; width: 260px; margin-bottom: 0; }
.page-groups-inner { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.page-admin-main { flex: 1 1 auto; min-width: 0; }
/* 오른쪽 "OO 수정" 제목(h2)은 브라우저 기본 margin-top(약 20px) 때문에 왼쪽 카테고리
   제목(.page-group-title, margin-top:0 + padding-top:2px)보다 더 아래에서 시작함 —
   같은 높이에서 시작하도록 h2의 top 여백을 .page-group-title과 같은 2px로 맞춤 */
.page-admin-main > h2:first-child { margin-top: 2px; }
@media (max-width: 860px) {
  /* 좁은 화면에서는 사이드바+본문을 나란히 두면 둘 다 너무 좁아지므로 원래대로 위아래로 쌓음 */
  .page-admin-layout { flex-direction: column; }
  .page-admin-layout .page-groups { width: 100%; flex-basis: auto; }
  .page-groups-inner { position: static; }
}
.page-groups { margin-bottom: 24px; }
/* 상단 메뉴의 밑줄 강조(활성 카테고리)와 헷갈리지 않도록, 여기는 왼쪽 굵은 바로 강조 */
.page-group-title {
  font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 8px;
  padding: 2px 0 2px 10px; border-left: 4px solid var(--accent);
}
.page-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.page-groups .page-list { margin-bottom: 0; }
.page-list-item {
  padding: 7px 14px; background: white; border-radius: 6px; text-decoration: none;
  color: inherit; border-left: 4px solid transparent; font-size: 14px;
  transition: background 0.15s ease;
}
/* 마우스 올렸을 때 클릭 가능한 항목이라는 걸 바로 알 수 있도록 배경을 살짝 바꿔줌 */
.page-list-item:hover { background: #eef1f6; }
/* 활성 항목 표시 — 카테고리 제목의 왼쪽 강조 바(주황색)와 겹쳐 보이지 않도록,
   여기는 배경을 채우는 방식(사이트의 다른 활성 상태들과 같은 톤인 남색 배경)을 씀 */
.page-list-item.active {
  background: var(--navy); color: white; font-weight: 700; border-left-color: transparent;
}
/* 활성 항목은 이미 진한 남색이라 위 회색 hover를 그대로 쓰면 안 보이므로, 더 밝은 남색으로 반응 */
.page-list-item.active:hover { background: #142b63; }

/* 연혁 "새 항목 추가" 미니폼을 감싸는 카드 — 아래 HTML 편집창과 시각적으로 구분되도록 함 */
.admin-subcard {
  background: #f8f7f4; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 16px 18px; margin: 18px 0 24px;
}
.admin-subcard h3 { margin: 0 0 6px; font-size: 15px; }
/* 연도/월/내용을 한 줄에 나란히 두되, label이 전역 규칙(display:block)을 안 따르고
   그 옆의 입력칸과 나란히(세로 가운데 정렬) 붙도록 함 */
.admin-inline-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px;
}
.admin-inline-form label {
  display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 600;
}
.admin-inline-form input[type=text], .admin-inline-form input[type=number] { width: auto; }
.admin-inline-form-text { flex: 1 1 260px; }
.admin-inline-form-text input { width: 100%; }
.admin-inline-form button { margin-top: 0; }

/* 디자인이 적용된 페이지(발자취/인사말)의 항목별 입력폼 — 본문·약력처럼 여러 줄인
   칸은 일반 텍스트 글꼴로(코딩 글꼴 아님), 줄바꿈만 그대로 보이게 함 */
.admin-plain-textarea { font-family: var(--font-body); font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre-wrap; }

/* 연혁 "기존 항목 수정·삭제" 표 — 연도구간(탭)별로 표를 나누고, 칸을 좁게 잡아
   한 화면에서 여러 줄을 훑어보기 쉽게 함 */
.admin-entries-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; table-layout: fixed; }
.admin-entries-table caption {
  text-align: left; font-weight: 700; font-size: 14px; color: #ffffff;
  background: var(--navy); padding: 8px 12px; border-radius: 6px 6px 0 0;
}
.admin-entries-table th, .admin-entries-table td { padding: 6px 8px; border-bottom: 1px solid #eeeeee; }
.admin-entries-table th { background: #f8f7f4; font-size: 13px; text-align: left; }
.admin-entries-table input[type=text], .admin-entries-table input[type=number] {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px;
}
.admin-entries-table .col-year { width: 90px; }
.admin-entries-table .col-month { width: 110px; }
.admin-entries-table .col-del { width: 50px; text-align: center; }
.admin-entries-table td.col-del { text-align: center; }

/* 본문 폰트/사이즈 기본값 — Quill 편집기에서 폰트 종류/사이즈를 따로 지정하지 않은
   텍스트(위 피커에서 "기본")에 적용됨. 제목(h1~h4)은 위쪽 공통 규칙에서 별도로
   지정한 --font-heading을 계속 사용함 */
/* 원본 실측: 본문은 Pretendard 17px, 줄간격 1.8, 옅은 회색(#666666) */
/* (한때 체감상 작아 보인다는 피드백으로 1px~3px까지 키워봤으나, 비교 당시 창 줌이
   90%로 달라서 생긴 착시였던 것으로 확인되어 원본 실측값(17px/모바일 16px) 그대로
   되돌림 — .page-content/.quote-body/.info_section/.desc_text 공통) */
.page-content { margin-top: 20px; line-height: 1.8; font-family: var(--font-body); font-size: 17px; color: #666666; }
.page-content p { margin: 0 0 20px; }
.page-content img { max-width: 100%; }
.page-content::after { content: ''; display: table; clear: both; }
/* 인용구(blockquote) — 브라우저 기본 들여쓰기 대신 포인트 바 + 배경 톤으로 디자인 */
.page-content blockquote {
  margin: 0 0 24px; padding: 14px 20px; border-left: 4px solid var(--accent);
  background: #faf6ee; font-size: 16px; font-style: italic; color: #4b4b45;
}
.page-content blockquote p { margin: 0; }

form textarea[name=content] { font-family: monospace; font-size: 13px; }

.existing-files {
  background: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 14px; margin-top: 4px;
}
.file-check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: normal; padding: 4px 0; }
.file-check-row input { width: auto; }

#editor-container { background: white; min-height: 300px; }
/* 편집기 화면도 실제 공개 페이지(.page-content)와 같은 기본 폰트/사이즈로 보이도록 맞춤 */
#editor-container .ql-editor { font-family: "Noto Sans KR", sans-serif; font-size: 14px; }
/* Quill 기본값은 .ql-editor가 내용 높이만큼만 차지해서, 글이 짧을 때 흰 배경(#editor-container,
   min-height:300px) 중 글자 없는 아래쪽 빈 공간을 클릭하면 커서가 안 잡힘(첫 줄을 클릭해야만
   편집기가 활성화됨) — .ql-editor 자체도 같은 min-height를 줘서 흰 배경 전체가 실제 입력
   가능 영역이 되게 함 */
#editor-container .ql-editor { min-height: 300px; }
/* 전역 form button 스타일(margin-top:18px 등)이 Quill 툴바 버튼에도 적용되어
   드롭다운/피커(span)와 세로 정렬이 어긋나는 문제 방지 */
.ql-toolbar.ql-snow button {
  margin: 0; background: none; color: inherit; border-radius: 0; cursor: pointer;
}

/* 원본 실측: 흰 배경 + 옅은 위쪽 구분선, 패딩 20px 20px 30px, 본문 폭(1280px)에 가운데 정렬 */
.site-footer {
  background: #ffffff; border-top: 1px solid #f1f1f1; margin-top: 0; padding: 20px 20px 30px;
}
.site-footer-inner {
  max-width: 1280px; margin: 0 auto; text-align: center; font-size: 14px; color: #666666;
}
.site-footer-info {
  list-style: none; margin: 0 0 10px; padding: 0; text-align: center;
}
.site-footer-info li { line-height: 1.8; }
.site-footer-info li span { display: inline-block; padding-right: 20px; font-size: 14px; color: #666666; }
.site-footer-info li span:last-child { padding-right: 0; }
.site-footer-info li span a { color: #666666; text-decoration: none; }
.site-footer-info li span a:hover { text-decoration: underline; }
.site-footer-inner .copyright { margin-top: 0; line-height: 1.8; color: #999999; }
.site-footer-inner .copyright strong { font-weight: 700; color: #999999; }
.site-footer-inner .copyright .fa-copyright { font-size: 14px; color: #999999; }

/* ---- 정보 페이지 (발자취/인사말/입학안내/오시는길) ---- */
/* 참고 사이트(momo2026.cafe24.com)의 #sub-visual .sub-visual-wrap 실제 CSS(layout.css)를
   그대로 옮긴 값: background-size: cover, background-position: 50% 50%(=center center),
   min-height: 350px(모바일 640px 이하 150px). 이전에는 "이미지가 왼쪽으로 치우쳐 있어서"라는
   추정으로 background-position을 left로 바꿔놓았었는데, 원본 CSS 원문을 다시 확인해보니
   실제로는 center였음 — 그래서 그림이 잘려 보이는 위치가 참고 사이트와 달랐던 것.
   원본 그대로 center로 되돌림 */
.info-hero {
  background-size: cover;
  background-position: center center;
  background-color: #1a1a1a;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 히어로 위 문구(제목/인용구/출처) — 참고 사이트(#sub-visual .caption)는 어두운 박스
   없이 흰 글자를 이미지 위에 바로 얹고, 옅은 그림자(text-shadow)만 줘서 가독성을 챙김.
   칸(제목 h4/인용구 h5/인용구 옆 연도나 성구 em/출처 p)마다 글자 크기가 다름 — 실측:
   제목 28px/700, 인용구 22px/700, em 16px/700, 출처 p 16px/400 (모두 line-height 1.4) */
.info-hero-caption {
  position: relative;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
  padding: 0 20px;
}
.info-hero-caption h4 {
  margin: 0 0 5px;
  /* 참고 사이트 실측: 이 문구는 --font-heading(Pretendard)이 아니라, 상단 메뉴
     글자체(.nav-category-label)와 같은 서예체(EBSHunminjeongeumSaeron/Song Myung)를 씀 */
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  /* 전역 h1~h4 규칙(색상 #262620)이 여기 h4에도 걸려서 어두운 이미지 위에서
     글자가 거의 안 보였음 — 흰색을 다시 명시해서 이미지 위 문구답게 보이게 함 */
  color: #ffffff;
}
.info-hero-caption h5 {
  margin: 0 0 5px;
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}
.info-hero-caption h5 em {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
}
.info-hero-caption p {
  margin: 0;
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

/* 발자취/인사말/입학안내 등 사이드바가 있는 본문 페이지의 전체 폭 — 원본 실측(Foundation
   row max-width 1280px)에 맞춤. .container가 양옆에 20px씩(40px) 패딩을 이미 주고 있어서,
   그만큼을 더해(1280+40=1320) 안쪽 내용물(사이드바+본문) 실제 폭이 원본과 똑같이 1280px가
   되도록 함. 사이트 공통 --page-width(1200px, 헤더/홈 화면용)와는 다르게 이 레이아웃만
   살짝 더 넓게 잡음. */
.info-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1320px;
}
/* 왼쪽 메뉴("레프트") — 원본 실측 그대로 맞춤: 폭 216px, 그림자/둥근모서리 없이
   연한 회색 테두리(1px #eee) 하나로 감싸는 밋밋한 박스, 타이틀은 남색(#183e65)
   18px/900, 메뉴 글자는 14px/400/#666666(진하지 않은 회색), 활성 메뉴는 #000c37 배경 */
.info-sidebar {
  width: 216px;
  flex-shrink: 0;
  background: white;
  border: 1px solid #eee;
}
.sidebar-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 900;
  color: #183e65;
  line-height: 30px;
  padding: 25px 0 25px 20px;
  margin: 0;
  border-bottom: 1px solid #eee;
}
.sidebar-nav { display: flex; flex-direction: column; }
.sidebar-nav a {
  padding: 10px 5px 10px 20px;
  text-decoration: none;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  border-bottom: 1px solid #e5e5e5;
}
.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover { background: #f9fafb; }
.sidebar-nav a.active {
  background: #000c37;
  color: white;
  font-weight: 400;
}

.info-content-card {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 30px 36px 44px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.breadcrumb { font-size: 12px; color: #cccccc; white-space: nowrap; }
/* 제목 줄 레이아웃 — 처음엔 사용자가 보내준 스크린샷(좁은 창으로 비교한 것)만 보고
   "브레드크럼이 항상 제목 위에 가운데 정렬"이라고 보고 모든 폭에 그대로 적용했었는데,
   참고 사이트의 실제 CSS(layout.css — <link>가 아니라 default.css 안의 @import라
   getComputedStyle/일반 document.styleSheets 탐색만으론 안 보이고, @import까지
   재귀로 따라가야 찾을 수 있었음)를 직접 보니 폭에 따라 구조가 완전히 다름:
   - 데스크탑(768px 초과): 브레드크럼(.root)이 float:right로 오른쪽 위에 뜨고,
     제목은 기본(왼쪽) 정렬로 그 옆 공간에 흐름 — 가운데 정렬이 아님
   - 768px 이하: 브레드크럼 float 풀림(float:none) + 제목 "위"로 올라가 margin-bottom:20px,
     전체가 text-align:center로 바뀜
   (사용자 리포트: "두 선 사이에 공간이 생겼어, 두꺼운 선도 얇아짐" — 모바일 전용 쌓기
   구조를 데스크탑에도 그대로 써버려서 생긴 문제였음. float 구조에서는 브레드크럼이
   h1보다 짧아 컨테이너 높이에 영향을 안 주므로, 컨테이너의 border-bottom이 h1 바로
   아래에 고정값 추측 없이 자연스럽게 붙음.
   참고로 원본 실제 CSS(.page-title)는 padding-bottom:10px가 있어서 두 선 사이에
   10px 틈이 있지만, 이 프로젝트에서는 이전 작업(여러 차례 사용자 리포트로 "두 선이
   꼭 붙어야 한다"고 명시적으로 요청받아 확정한 사양)에 따라 padding 없이 완전히
   붙임 — 이 부분만은 원본을 그대로 베끼지 않고 사용자가 요청한 사양을 우선함 */
.content-header-row {
  margin: 0 0 60px;
  border-bottom: 1px solid #e5e5e5;
}
.content-header-row::after { content: ''; display: table; clear: both; }
.content-header-row .breadcrumb {
  float: right; margin: 20px 0 0;
}
.page-title-row { border-bottom: 1px solid #e5e5e5; }
.info-content-card h1 {
  display: inline-block;
  font-size: 36px; font-weight: 700; line-height: 1; color: #444444;
  margin: 0; padding-bottom: 5px; border-bottom: 3px solid #666666;
}
@media (max-width: 768px) {
  .content-header-row { text-align: center; }
  .content-header-row .breadcrumb { float: none; margin: 0 0 20px; }
}
/* 사이드바가 없는 페이지(세계아기선교출판국)의 제목 옆 책 모양 배지 — 사용자 요청으로
   뺌("로고를 빼자 그냥"). 이제 사이드바 유무와 상관없이 항상 위 .info-content-card h1
   하나만 쓰므로 .content-title-group/.content-icon-badge 관련 규칙은 더 이상 쓰이지
   않아 제거함 */
/* 본문 안의 소제목(h3, "약력" 등) — 도서목록처럼 구간을 나눌 때 포인트 색 바로 눈에 띄게 함.
   왼쪽 포인트 바 색은 노란색(--accent) 대신 검은바다색(#000c37, 발자취 탭 밑줄과 같은 색)으로 */
.page-content h3 {
  margin: 32px 0 14px; padding-left: 12px; font-size: 18px;
  border-left: 4px solid #000c37;
}
.page-content h3:first-child { margin-top: 0; }

/* ---- 발자취(초대원장/선교약사/연혁) 3-tab 서브 내비게이션 — 원본 실측 ---- */
/* 원본은 탭 줄(nav) 밑에 진한 남색 밑줄이 있고, 마우스를 올리면(hover) 활성 탭과
   똑같은 남색 배경+흰 글자로 바뀜(0.2s 부드러운 전환) — 실측대로 반영 */
.history-tabs { display: flex; margin: 0 0 30px; padding: 0; list-style: none; border-bottom: 2px solid #000c37; }
.history-tabs li { flex: 1; }
.history-tabs a {
  display: flex; align-items: center; justify-content: center;
  height: 60px; font-size: 18px; font-weight: 700; color: #666666; text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.history-tabs a.active { background: #000c37; color: #ffffff; }
.history-tabs a:not(.active):hover { background: #000c37; color: #ffffff; }

/* 발자취 안내 문구("할렐루야!" 등) — 원본 실측: EBS훈민정음새론체 28px,
   첫 줄만 청록→파랑 그라데이션 글자색 + 굵게, 둘째 줄은 얇게(font-weight 200).
   .page-content p(margin:0 0 20px, line 685)가 태그+클래스 선택자라 이 문구가 <p>태그라서
   셀렉터 우선순위가 같아지는 바람에 margin-bottom이 40px이 아니라 20px로 깨져 있었음
   (사용자 리포트: "위아래 여백도 똑같이") — .page-content를 붙여 우선순위를 올려서 고침 */
.page-content .history-hero-heading {
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 28px; font-weight: 200; color: #666666; line-height: 1.2; letter-spacing: -0.56px;
  margin: 0 0 40px;
}
.history-hero-heading .accent {
  font-weight: 700;
  background: linear-gradient(90deg, #009ab5, #006eb5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* "할렐루야!" 류 강조 문구(.history-hero-heading: 초대원장/선교약사/연혁/인사말,
   .quote-heading: 세계아기선교회/세계아기선교후원회) — 원본 실측(.page .heading):
   768px 초과는 왼쪽 정렬, 768px 이하에서만 가운데 정렬로 바뀜(사용자 리포트: 참고
   사이트에서는 이 문구가 가운데 정렬). 위아래 여백(margin: 0 0 40px)은 폭과 무관하게
   항상 동일 — 이미 두 클래스 모두 같은 값이라 별도 분기 불필요 */
@media (max-width: 768px) {
  .history-hero-heading, .quote-heading { text-align: center; }
}

/* 초대원장/인사말 인물사진 — 원본 실측: 280x373, 오른쪽 플로트, border-radius 180px(둥근 알약 형태).
   원본(contents.css)은 모든 img에 기본으로 height:auto가 걸려 있어서, 가로폭만 줄어들어도
   세로가 항상 비율대로 같이 줄어듦 — 우리 쪽은 height를 px로 고정해놔서(373px) 가로만
   max-width:100%로 줄고 세로는 안 줄어 사진이 눌려 보이는 문제가 있었음(사용자 리포트:
   "반응형으로 축소가 부자연스러워, width만 반영되고 특정 사이즈에서는 작아지지 않아").
   height를 auto로 바꿔서 원본처럼 항상 비율 유지되게 함.
   원본은 화면 640px 이하에서 width:40%(+height:auto)로 줄어듦. */
.history-photo {
  float: right;
  width: 280px;
  height: auto;
  max-width: 100%;
  margin: 5px 0 20px 20px;
  border-radius: 180px;
  border: 0;
}

@media (max-width: 640px) {
  .history-photo { width: 40%; height: auto; margin: 5px 0 10px 0; }
}

/* 발자취(초대원장) 사진만 20% 축소(사용자 요청) — .history-photo는 인사말 페이지와
   공유하는 클래스라 거기엔 영향 없이 발자취 페이지(.page-history, page.php에서
   slug==='history'일 때만 붙임)에서만 덮어씀. 280x373 → 224x298(비율 유지, 20% 축소).
   모바일(640px 이하)에서도 height:auto를 다시 명시해야 함 — 안 그러면 이 선택자가
   .history-photo(모바일)보다 구체적(class 2개)이라 위쪽 height:298px 고정값이 그대로
   이겨버려서 가로만 32%로 줄고 세로는 안 줄어드는 눌림 현상이 남아있었음(실측으로 확인) */
.page-history .history-photo { width: 224px; height: auto; }
@media (max-width: 640px) {
  .page-history .history-photo { width: 32%; height: auto; }
}

/* 세계아기선교회/세계아기선교후원회 — 강조 인용문 + 본문.
   원본 재실측(getComputedStyle): 이 영역은 폭에 따라 글자 크기가 또 한 번 바뀜 —
   지난번엔 640px 이하(좁은 화면)에서 잰 값(22px/16px)을 전체 폭에 그대로 써버려서
   데스크탑 폭에서 오히려 원본보다 작아지는 문제가 있었음(사용자 리포트로 발견).
   실제로는 데스크탑 기준 인용문 28px/line-height 1.2, 본문 17px/line-height 1.8이고,
   640px 이하에서만 인용문 22px/line-height 28.6px, 본문 16px/line-height 28.8px로 줄어듦
   (아래 @media (max-width: 640px) 블록에 그 축소값을 따로 둠) */
.page-content .quote-heading {
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 28px; font-weight: 200; color: #666666; line-height: 1.2;
  margin: 0 0 40px;
  /* text-align은 고정 left가 아니라 반응형(아래 768px 미디어쿼리에서만 center) —
     원본 실측(.page .heading): 768px 초과는 text-align 자체가 없어 기본값(left),
     768px 이하에서만 .page h1,.page p.lead 규칙으로 center가 됨(사용자 리포트:
     "할렐루야! 예쁜..." 문구가 참고 사이트에서는 가운데 정렬 — 전에는 항상 left로
     고정해놔서 반응형으로 안 바뀌었음) */
}
.quote-heading .accent {
  font-weight: 700;
  background: linear-gradient(90deg, #009ab5, #006eb5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.page-content .quote-body {
  font-family: var(--font-body); font-size: 17px; font-weight: 400;
  color: #666666; line-height: 1.8; text-align: left; margin: 0;
}

/* 인사말 페이지 "약력" — 왼쪽 라벨(25%) + 오른쪽 목록(75%) 2단 레이아웃.
   원본은 Foundation 그리드(grid_3/grid_9, float)를 쓰지만 결과가 같은 flex로 재현함.
   원본 실측: 라벨 24px/700/#666, 목록 글자 15px/#666, 줄간격 18px, 항목 사이 15px */
.bio-row { display: flex; clear: both; padding-top: 20px; }
.bio-label { flex: 0 0 25%; padding: 0 20px; }
.bio-label h3 { margin: 0; font-size: 24px; font-weight: 700; color: #666666; font-family: var(--font-body); }
.bio-body { flex: 0 0 75%; padding: 0 20px; }
.bio-list { list-style: none; margin: 0; padding: 0; }
.bio-list li { margin: 0 0 15px; font-size: 15px; line-height: 18px; color: #666666; }
.bio-list li:last-child { margin-bottom: 0; }

/* 입학안내 페이지 — 원본 실측 그대로: 번호 붙은 소제목(01.~05.), 표, 2단 그리드(수강자격/면접내용),
   알약 모양 뱃지 목록(구비서류), 남색 문의 박스.
   font-size는 원래 15px로 잘못 고정돼 있었음 — 원본 재실측(getComputedStyle, 데스크탑 폭):
   본문(.desc_text)/표(.info_table th,td) 전부 17px(본문 공통값과 동일), 640px 이하에서만 16px로
   줄어듦(사용자 리포트: "내용 글자 크기도 참고 사이트가 더 커" — 데스크탑에서 15<17로 실제로 작았음) */
.info_section { padding: 0 0 20px; color: #444444; line-height: 1.6; font-size: 17px; }
.info_item { margin-bottom: 40px; }
.sub_title { margin: 0 0 15px; font-size: 24px; font-weight: 700; color: #333333; display: flex; align-items: center; font-family: var(--font-body); }
.desc_text { margin: 0; font-size: 17px; color: #444444; }
.table_responsive { overflow-x: auto; }
.info_table { width: 100%; border-top: 2px solid #1a4a7c; border-collapse: collapse; }
.info_table th, .info_table td { padding: 15px; border-bottom: 1px solid #dddddd; text-align: left; }
.info_table th { background: #f8f9fa; color: #333333; font-weight: 600; }
.info_table td strong { color: #1a4a7c; }
.info_grid { display: flex; gap: 30px; flex-wrap: wrap; }
.info_grid .info_item { flex: 1 1 0; min-width: 280px; }
.list_type { list-style: none; margin: 0; padding-left: 5px; }
.list_type li { margin: 0 0 8px; }
.list_type li span { font-size: 15px; color: #1a4a7c; font-weight: bold; }
.doc_list span {
  display: inline-block; background: #e9ecef; padding: 5px 15px; border-radius: 20px;
  margin-right: 10px; font-size: 14px; color: #495057; border: 1px solid #dee2e6;
}
.contact_box { background: #1a4a7c; color: #ffffff; padding: 20px; text-align: center; border-radius: 8px; margin-top: 40px; }
.contact_box p { margin: 0; }
.contact_box a { color: #ffffff; text-decoration: none; font-size: 20px; font-weight: 700; margin-left: 10px; }

/* 세계아기선교출판국 — 원본 실측: 연한 하늘색 안내 박스(왼쪽에 남색 5px 굵은 띠) + 도서목록 2단,
   각 목록은 높이 450px로 고정된 박스 안에서 넘치면 스크롤(overflow:auto)되게 함(원본과 동일한
   "스크롤 방식"), 스크롤바 자체도 안내 박스와 같은 남색(#1a4a7c)으로 커스텀 스타일 */
.intro_box { background: #f0f7ff; border-left: 5px solid #1a4a7c; border-radius: 12px; padding: 25px; margin: 0 0 40px; }
.intro_box p { margin: 0; font-size: 16px; line-height: 1.6; color: #334e6f; }
.book_container {
  height: 450px; overflow-y: auto; overflow-x: hidden;
  background: #ffffff; border: 1px solid #e1e1e1; border-radius: 8px; padding: 20px;
  scrollbar-width: thin; scrollbar-color: #1a4a7c #f1f1f1;
}
.book_container.gray_bg { background: #fcfcfc; }
.book_container::-webkit-scrollbar { width: 6px; }
.book_container::-webkit-scrollbar-track { background: #f1f1f1; }
.book_container::-webkit-scrollbar-thumb { background: #1a4a7c; border-radius: 10px; }
.book_list { list-style: none; margin: 0; padding: 0; }
.book_list li { padding: 10px 0; border-bottom: 1px dashed #eeeeee; color: #666666; font-size: 14px; line-height: 18px; }
.book_list li:last-child { border-bottom: none; }
.book_list li strong { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 700; color: #333333; }

@media (max-width: 640px) {
  .bio-row { flex-direction: column; }
  .bio-label { flex: none; margin-bottom: 10px; }
  .bio-body { flex: none; }
  .sub_title { font-size: 16px; }
  .info_grid { flex-direction: column; }
}

/* 연혁 페이지의 연도구간 알약(pill) 탭 — 원본과 동일하게 순수 CSS(라디오+label)로 구현,
   JS 없이 작동함. 체크박스/라디오는 화면 밖으로 숨기고(.year-tab-state), 선택된 라디오를
   :checked ~ 일반형제 선택자로 짝지어진 label과 panel에 스타일/표시를 줌.
   원본 실측: 알약 border-radius 30px, 테두리 2px #e1e1e1(선택시 1px #eee + 네이비 배경),
   패널 상단 padding 60px, 탭 사이 실제 여백(margin)은 0px — 둥근 모서리끼리 맞닿아서
   생기는 렌즈 모양 틈이 여백처럼 보이는 것뿐임. */
.year-tabs .year-tab-state { position: absolute; left: -10000px; }
.year-tab-flex { display: flex; flex-wrap: wrap; }
.year-tab-flex .year-tab {
  flex-grow: 1;
  display: inline-block;
  padding: 10px;
  vertical-align: top;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  color: #888888;
  background-color: #ffffff;
  cursor: pointer;
  border: 2px solid #e1e1e1;
  border-radius: 30px;
}
.year-tab-flex .year-tab:hover { background-color: #ffffff; }
.year-tab-flex .year-panel {
  background-color: #ffffff;
  padding: 60px 0 0;
  width: 100%;
  flex-basis: auto;
  display: none;
}
#year-tab-1:checked ~ .year-tab-flex #year-tab-1-label,
#year-tab-2:checked ~ .year-tab-flex #year-tab-2-label,
#year-tab-3:checked ~ .year-tab-flex #year-tab-3-label,
#year-tab-4:checked ~ .year-tab-flex #year-tab-4-label,
#year-tab-5:checked ~ .year-tab-flex #year-tab-5-label {
  color: #ffffff;
  background: radial-gradient(at center center, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.3) 120%) #183e65;
  background-blend-mode: multiply, multiply;
  cursor: default;
  border: 1px solid #eeeeee;
}
#year-tab-1:checked ~ .year-tab-flex #year-tab-1-panel,
#year-tab-2:checked ~ .year-tab-flex #year-tab-2-panel,
#year-tab-3:checked ~ .year-tab-flex #year-tab-3-panel,
#year-tab-4:checked ~ .year-tab-flex #year-tab-4-panel,
#year-tab-5:checked ~ .year-tab-flex #year-tab-5-panel {
  display: block;
}

/* 연혁 목록 — 왼쪽 연도(굵은 큰 글씨) + 오른쪽 월/내용 2단 그리드.
   원본 실측: 연도칸 120px + 간격 40px, 항목마다 아래 얇은 구분선, 안쪽 좌우 여백 20px */
.history-list { padding: 0 20px; }
.history-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid #f0f0f0;
}
.history-item:last-child { border-bottom: none; }
.history-year { font-size: 22px; font-weight: 700; color: #333333; font-family: var(--font-body); }
.history-content { display: flex; flex-direction: column; gap: 10px; }
.history-row { }
.history-date { display: block; font-size: 15px; font-weight: 700; color: #444444; white-space: nowrap; }
.history-text { display: block; font-size: 15px; line-height: 1.5; color: #333333; }

@media (max-width: 640px) {
  .year-tab-flex .year-panel { padding-top: 30px; }
  .year-tab-flex .year-tab { font-size: 13px; margin-bottom: 5px; padding: 5px 7px; }
  .history-item { grid-template-columns: 1fr; row-gap: 6px; }
  .history-year { font-size: 18px; }
  /* 참고 사이트(#sub-visual .sub-visual-wrap) 실제 CSS(layout.css) 기준 —
     이 축소 구간의 분기점은 720px가 아니라 640px임(예전에 잘못 720px로 옮겨서
     640~720px 사이에서 높이가 참고 사이트와 달랐던 문제를 여기서 바로잡음) */
  .info-hero { height: 150px; min-height: auto; }
  .info-hero-caption { padding: 0 10px; }
  /* 히어로 문구도 이 폭에서 축소됨(실측): 제목 17px/line-height 1.2, 인용구 14px, em/출처 13px */
  .info-hero-caption h4 { font-size: 17px; line-height: 1.2; }
  .info-hero-caption h5 { font-size: 14px; }
  .info-hero-caption h5 em { font-size: 13px; }
  .info-hero-caption p { font-size: 13px; }

  /* 참고 사이트(layout.css #primary) 실측: 본문 카드 안쪽 여백이 데스크탑(30px)에서
     이 폭 이하로는 20px/10px로 확 줄어듦. 우리 쪽은 이 축소가 없어서 카드 좌우 여백
     (36px)이 그대로 남아 있었고, 그만큼 본문 한 줄에 들어가는 글자 수가 적어져서
     인용문/본문 줄바꿈이 참고 사이트보다 일찍 일어나 글자가 더 커 보이는 착시가 있었음 */
  .info-content-card { padding: 20px 10px; }

  /* 세계아기선교회/세계아기선교후원회의 인용문·본문도 이 폭 이하에서만 작아짐
     (데스크탑 기본값은 위 .quote-heading/.quote-body 참고: 28px/17px).
     .page-content를 붙인 이유: 기본 규칙도 .page-content로 우선순위를 올려놔서
     (.page-content p와의 margin 충돌 수정, 위 참고) 여기서도 똑같이 붙여야
     font-size 축소가 기본값한테 밀리지 않음 */
  .page-content .quote-heading { font-size: 22px; line-height: 28.6px; }
  .page-content .quote-body { font-size: 16px; line-height: 28.8px; }

  /* 발자취/인사말 인사문구(.history-hero-heading)와 일반 본문(.page-content)도
     위 .quote-heading/.quote-body와 똑같은 버그였음 — 데스크탑 값(28px/17px)을
     모든 폭에 고정으로 써버려서, 참고 사이트가 테블릿~PC에서 커지는 것과 달리
     우리 쪽은 "그대로 유지"되는 것처럼 보임(사용자 리포트: "테블릿~PC 사이즈로
     반응형 할 때 우리는 그대로 유지하고 참고사이트는 더 커지는 것 같아"). 원본 실측대로
     이 폭 이하에서만 작아지게 분리 — 데스크탑 기본값은 위 .history-hero-heading(28px)/
     .page-content(17px) 그대로 두고, 여기서만 축소값을 덮어씀.
     .page-content를 붙인 이유는 위 .quote-heading과 동일(기본 규칙 우선순위 충돌) */
  .page-content .history-hero-heading { font-size: 22px; line-height: 1.3; }
  .page-content { font-size: 16px; }

  /* 입학안내 페이지(.info_section/.desc_text)도 위와 같은 종류의 축소 —
     원본은 .sub_title(소제목)만 768px 이하에서 16px로 줄고, 본문/표는 640px 이하에서
     16px로 줄어듦(원본 실측) */
  .info_section, .desc_text { font-size: 16px; }
}
@media (max-width: 768px) {
  .sub_title { font-size: 16px; }
}

@media (max-width: 720px) {
  .history-tabs { flex-direction: column; }
  .history-tabs a { height: 48px; font-size: 16px; }
  .info-layout { flex-direction: column; }
  .info-sidebar { width: 100%; }
  /* .info-layout이 세로 배치(column)로 바뀌면 교차축(가로)은 더 이상 flex:1이 아니라
     align-items:flex-start(원본 유지용, 가로 모드에서 필요)의 영향을 받아 내용물 폭만큼만
     줄어듦 — 그래서 사이드바(위에서 100%로 고정)보다 본문 카드가 더 좁아져 오른쪽 끝이
     안 맞고 "사이즈가 안 맞는" 것처럼 보였음(사용자 리포트로 발견). 사이드바와 같이
     100%로 고정해서 폭을 맞춤 */
  .info-content-card { width: 100%; }
  /* 메뉴 항목이 3~5개로 페이지마다 달라서, flex:1로 남는 공간을 다 채우면
     마지막 줄에 혼자 남는 항목만 화면 폭 전체로 늘어나 버려 어색했음.
     2칸 그리드로 고정해서 항목이 몇 개든 항상 같은 크기 칸에 가지런히 배치되게 함 */
  .sidebar-nav {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sidebar-nav a {
    flex: none; text-align: center;
    border-bottom: 1px solid #f3f4f6; border-right: 1px solid #f3f4f6;
  }
  .sidebar-nav a:nth-child(2n) { border-right: none; }
  /* 세계아기선교출판국처럼 하위 메뉴가 1개뿐인 페이지는 2칸 중 왼쪽 칸에만
     걸쳐서 절반만 채워진 것처럼 보였음. 항목이 하나뿐이면 전체 폭을 다 쓰게 함 */
  .sidebar-nav a:only-child { grid-column: 1 / -1; border-right: none; }
  .sidebar-nav a:last-child { border-bottom: 1px solid #f3f4f6; }
  /* 게시글/공지 상세보기(.post-view-layout)는 목록 페이지와 달리 카테고리를
     옮겨다니는 화면이 아니라 글 하나를 읽는 화면이라, 좁은 화면에서 본문보다
     먼저 큰 메뉴 박스가 나오면 실제 내용이 그만큼 아래로 밀려 보임 —
     모바일에서는 이 사이드바를 숨김(목록 페이지의 사이드바는 그대로 유지) */
  .post-view-layout .info-sidebar { display: none; }
}

/* 태블릿 폭(721px~1019px, 모바일 2칸 그리드로 바뀌는 720px 초과 ~ 헤더가 햄버거로
   바뀌는 1019px 이하 사이)에서는 레프트(사이드바)를 아예 없애고 본문을 전체 폭으로
   넓게 씀 — 사용자 요청("테블릿 사이즈일 때 레프트 없애자"). 이 폭에서는 위
   @media(max-width:1019px)에서 헤더가 이미 햄버거 메뉴로 전체 사이트 이동을
   제공하므로, 216px 고정 사이드바가 좁은 폭에 본문과 나란히 끼어 있는 것보다
   숨기는 쪽이 나음. .info-layout이 아직 가로(row) 배치라서 사이드바를 display:none
   하면 본문 카드(flex:1)가 그 자리까지 자동으로 넓어짐(목록/상세보기 페이지 모두 적용) */
@media (min-width: 721px) and (max-width: 1019px) {
  .info-sidebar { display: none; }
}

/* ---- 메인 페이지: 상단 히어로 슬라이더 ----
   높이(880px, 810px 이하 400px, 480px 이하 250px)는 참고 사이트(momo2026.cafe24.com)의
   #intro .intro-wrap .id-Slider .item .img-fill 실제 CSS(main.css)를 그대로 옮긴 값 */
/* 히어로 이미지 바깥의 회색 여백(테두리처럼 보임) - 참고 사이트의 #intro
   (background: #e5e5e5; padding: 20px 20px 30px, 810px 이하 20px 균등,
   480px 이하 0 0 20px) 값을 그대로 옮김 */
.home-hero-frame {
  background: #e5e5e5;
  padding: 20px 20px 30px;
}
@media (max-width: 810px) {
  .home-hero-frame { padding: 20px; }
}
@media (max-width: 480px) {
  .home-hero-frame { padding: 0 0 20px; }
}

.home-hero {
  position: relative;
  height: 880px;
  overflow: hidden;
  background: #1a1a1a;
  cursor: grab;
  user-select: none;
}
.home-hero:active { cursor: grabbing; }
.home-hero-track { position: relative; width: 100%; height: 100%; }
.home-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.8s ease;
}
.home-hero-slide.active { opacity: 1; }
/* 원본 사이트처럼 문구를 히어로 하단 우측에 배치 (가운데 정렬이 아님) */
.home-hero-caption {
  position: absolute; left: 0; right: 0; bottom: 46px;
  padding: 0 60px; text-align: right; color: white;
}
/* 아래 폰트/크기/굵기/그림자/등장 효과 값은 원본 사이트(momo2026.cafe24.com/base_1)
   실제 렌더링 결과(computed style)를 그대로 옮긴 것 — 소스의 h1(첫 줄)/h2(나머지 줄)/h3(출처) 구조와 동일.
   원본은 반응형이라 화면폭 769px 이상(데스크탑)과 768px 이하(모바일/태블릿)에서 크기가 다름 —
   아래는 데스크탑(769px 이상) 기준값, 768px 이하는 밑의 미디어쿼리에서 축소 적용 */
.home-hero-line {
  margin: 0 0 10px;
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 40px; font-weight: 700; letter-spacing: normal; line-height: 1.2;
  text-shadow: 0 1px 5px rgba(0,0,0,0.2);
  opacity: 0;
}
.home-hero-line:first-child {
  font-size: 44px; letter-spacing: 2.2px; line-height: 1.1;
}
.home-hero-ref {
  margin: 12px 0 0;
  font-family: 'EBSHunminjeongeumSaeron', 'Song Myung', var(--font-heading), serif;
  font-size: 28px; font-weight: 400; letter-spacing: normal; color: white; line-height: 1.2;
  text-shadow: 0 1px 5px rgba(0,0,0,0.2);
  opacity: 0;
}
/* 원본과 동일한 768px 기준 — 이 폭 이하에서는 문구 크기를 줄임 */
@media (max-width: 768px) {
  .home-hero-line { font-size: 26px; }
  .home-hero-line:first-child { font-size: 28px; letter-spacing: 1.4px; }
  .home-hero-ref { font-size: 22px; }
}
/* 원본처럼 슬라이드가 활성화될 때 첫 줄은 위에서 내려오며, 나머지 줄과 출처는
   0.5초 뒤 이어서 페이드인 되는 효과 (비활성 슬라이드는 그대로 숨김 상태 유지) */
.home-hero-slide.active .home-hero-line:first-child {
  animation: home-hero-fadeInDown 1s 1s both;
}
.home-hero-slide.active .home-hero-line:not(:first-child),
.home-hero-slide.active .home-hero-ref {
  animation: home-hero-fadeIn 1s 1.5s both;
}
@keyframes home-hero-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-hero-fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.home-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.25); color: white; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.home-hero-arrow:hover { background: rgba(255,255,255,0.4); }
.home-hero-arrow.prev { left: 20px; }
.home-hero-arrow.next { right: 20px; }
.home-hero-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.home-hero-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.5); cursor: pointer; padding: 0;
}
.home-hero-dot.active { background: white; }

/* ---- 메인 페이지: 공지사항 / 아기선교나눔터 미리보기 ---- */
/* grid 칼럼에 그냥 1fr만 쓰면 실제로는 minmax(auto, 1fr)로 취급돼서,
   안쪽 글자(날짜 등)가 줄어들지 못하고 칼럼이 화면보다 넓어져 가로 스크롤이
   생김. minmax(0, 1fr)로 명시해야 칼럼이 화면 폭 안으로 실제로 줄어듦 */
.home-sections {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  /* 원본 사이트는 이 섹션만 본문(1200px)보다 넓은 1320px 폭을 씀(실측 확인) */
  max-width: 1320px;
  /* 원본 사이트는 히어로 이미지 아래 이 섹션 위로 실측 80px 여백을 둠 */
  padding-top: 80px;
}
/* 원본(공지사항/아기선교나눔터 위젯)은 둥근 모서리/그림자 없는 흰 바탕 + 옅은 테두리 카드 */
.home-card {
  background: white; border: 1px solid #eeeeee; border-radius: 0; padding: 20px;
}
.home-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #666666;
}
.home-card-head h2 {
  margin: 0; font-size: 20px; font-weight: 700; line-height: 36px;
  color: #666666; font-family: var(--font-body);
}
.home-card-more {
  width: 42px; height: 42px; border-radius: 0; background: #444444; color: #ffffff;
  border: 1px solid #444444;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 20px; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.home-card-more:hover { background: #2a2a2a; }
.home-list { display: flex; flex-direction: column; }
/* 원본은 각 줄 밑에 옅은 구분선을 긋고(패딩 10px), 그 아래에 다시 10px 여백을
   더 둬서(마진) 줄 사이가 촘촘하지 않고 넉넉하게 떨어져 보임(실측 확인) */
.home-list-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid #e5e5e5;
  text-decoration: none; color: #666666; font-size: 17px; line-height: 1.3;
}
.home-list-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.home-list-item:hover .home-list-title { color: var(--navy); text-decoration: underline; }
.home-list-title {
  /* flex 항목은 기본적으로 내용 전체 폭 밑으로는 줄어들지 않아서(min-width:auto),
     nowrap+ellipsis를 줘도 실제로는 줄어들지 못하고 화면 밖으로 밀려나 가로 스크롤이
     생겼음. min-width:0으로 강제로 줄어들 수 있게 해야 말줄임(...)이 실제로 동작함 */
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 5px;
}
.home-list-date { color: #999999; font-size: 14px; line-height: 1.3; white-space: nowrap; }

@media (max-width: 720px) {
  .home-hero-caption { padding: 0 20px; bottom: 28px; }
  /* 원본 사이트도 이 폭에서 문구 크기를 따로 줄이지 않으므로(실측 확인),
     .home-hero-line / .home-hero-ref 는 위쪽 기본 크기(28px/26px/22px)를 그대로 유지 */
  .home-sections { grid-template-columns: minmax(0, 1fr); padding-top: 36px; gap: 24px; }
}
/* 히어로 슬라이더 높이 자체는 참고 사이트의 실제 꺾이는 지점(810px/480px)에 맞춤 —
   위 720px 지점의 캡션 여백/그리드 조정과는 별개 기준값 */
@media (max-width: 810px) {
  .home-hero { height: 400px; }
}
@media (max-width: 480px) {
  .home-hero { height: 250px; }
}

/* ---- 회원가입(register.php) / 회원정보수정(mypage.php) — 기존 사이트의
   "회원정보수정" 화면(레이블 좌측 고정폭 + 값 우측)을 참고한 레이아웃 ---- */
.profile-section-title {
  font-size: 15px; font-weight: 800; margin: 24px 0 4px; padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.profile-row {
  display: flex; align-items: flex-start; gap: 20px; padding: 14px 4px;
  border-bottom: 1px solid #f0f0f0; flex-wrap: wrap;
}
.profile-row-label {
  width: 140px; flex: none; font-size: 14px; color: #4b5563; font-weight: 600; padding-top: 8px;
}
.profile-row-value { flex: 1; min-width: 200px; }
.profile-static { display: inline-block; font-size: 14px; padding-top: 8px; color: #262620; }
.profile-required { color: #dc2626; }
.profile-hint { font-size: 12px; color: #9ca3af; margin: 6px 0 0; }
.profile-hint-inline { font-size: 12px; color: #9ca3af; }
.profile-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; }

/* 입력칸 옆에 실시간 검증 메시지(예: 비밀번호 확인 불일치)를 붙일 때.
   input이 기본 width:100%라 flex 안에서 메시지가 들어갈 자리를 다 차지해버리므로
   입력칸 자체 폭만큼만 차지하도록 눌러줌. 위의 "비밀번호" 입력칸(max-width:280px)과
   폭이 똑같아 보이도록 auto 대신 같은 280px로 고정하고, 화면이 좁아지면(모바일)
   max-width:100%로 컨테이너 폭에 맞춰 줄어들게 함 */
.profile-inline-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-inline-group input[type=password] { width: 280px; max-width: 100%; flex: 0 0 auto; }
.profile-error-inline { font-size: 12px; color: #dc2626; font-weight: 600; }

.profile-phone-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-phone-group select { width: auto; }
.profile-phone-group input[type=text] { width: 100px; }

.profile-radio-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.profile-radio-group label { display: flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; cursor: pointer; }

.profile-actions { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.profile-actions .btn, .profile-actions button { margin-top: 0; }

/* 좁은 화면에서는 레이블을 값 위로 올려서 한 줄에 억지로 욱여넣지 않도록 함 */
@media (max-width: 560px) {
  .profile-row { flex-direction: column; gap: 4px; }
  .profile-row-label { width: auto; padding-top: 0; }
}

/* 관리자 페이지의 "+ 새 회원 추가" 등 액션 버튼 영역 */
.admin-actions-bar { margin: 4px 0 20px; }

/* 팝업(모달) — 긴 등록 폼을 페이지에 그대로 늘어놓지 않고 <dialog>로 띄움 */
dialog.modal-box {
  width: 100%;
  max-width: 640px;
  border: none;
  border-radius: 10px;
  padding: 22px 26px 26px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-height: 85vh;
  overflow-y: auto;
}
dialog.modal-box::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.modal-header h2 { margin: 0; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px 6px;
}
.modal-close:hover { color: #262620; }

@media (max-width: 560px) {
  dialog.modal-box {
    max-width: calc(100% - 24px);
    width: calc(100% - 24px);
    padding: 16px 14px 20px;
    max-height: 90vh;
  }
}