/* ==========================================================================
   애지원복지회 리뉴얼 — 디자인 시스템 (레퍼런스: happy3586.com 스타일 재현)
   ========================================================================== */

:root {
  --navy: #253988;
  --navy2: #3058a0;
  --util-bg: rgba(48, 88, 160, 0.94);
  --ink: #212121;
  --ink2: #4f4f4f;
  --muted: #757575;
  --line: #e2e2e2;
  --bg-soft: #f7f6f2;
  --beige: #f8f4ec;
  --orange: #f7941d;
  --red: #e8442e;
  --green: #4caf50;
  --footer-bg: #2b2b2b;
  --radius: 5px;
  --maxw: 1280px;
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
}

/* ---------- Reset / Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink2); background: #fff; word-break: keep-all; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--ink); }
table { border-collapse: collapse; width: 100%; }
.inner { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; }

.btn {
  display: inline-block; background: var(--navy); color: #fff; font-size: 15px; font-weight: 400;
  letter-spacing: 1px; padding: 12px 28px; border-radius: var(--radius); transition: background .2s;
}
.btn:hover { background: var(--navy2); }
.btn.sm { padding: 8px 18px; font-size: 13px; }
.btn.line { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn.line:hover { background: var(--navy); color: #fff; }
.btn.gray { background: #888; }
.btn.gray:hover { background: #6e6e6e; }

/* ==========================================================================
   헤더 (3단: 유틸바 / 로고바 / GNB)
   ========================================================================== */
.site-header { position: relative; z-index: 100; }

/* 1단 유틸바 */
.util-bar { background: var(--util-bg); color: #fff; font-size: 14px; }
.util-bar .inner { display: flex; justify-content: flex-end; align-items: center; gap: 18px; height: 44px; }
.util-links { display: flex; align-items: center; }
.util-links li { position: relative; padding: 0 10px; }
.util-links li + li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: rgba(255,255,255,.4); }
.util-links a:hover { text-decoration: underline; }
/* 로그아웃은 POST 폼이지만 유틸바에서는 링크처럼 보이게 한다. */
.logout-form { display: inline; margin: 0; }
.logout-form button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.logout-form button:hover { text-decoration: underline; }
.util-user { opacity: .9; }
.util-search { display: flex; align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); border-radius: 20px; padding: 4px 12px; }
.util-search input { background: transparent; border: 0; outline: 0; color: #fff; width: 150px; font-size: 13px; }
.util-search input::placeholder { color: rgba(255,255,255,.7); }
/* 아이콘만 있는 버튼이라 기본 크기가 14×14 였다 — 어떤 화면에서도 24×24 를 밑돌지 않게 한다 */
.util-search button { color: #fff; display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }

/* 2단 로고바 */
.logo-bar { background: #fff; }
.logo-bar .inner { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.logo img { height: 64px; width: auto; }
.logo-bar-right { display: flex; align-items: center; gap: 24px; }
.header-tel { display: flex; align-items: center; gap: 8px; color: var(--navy); white-space: nowrap; }
.header-tel .tel-label { font-size: 14px; font-weight: 400; color: #505360; }
.header-tel .tel-number { font-size: 30px; font-weight: 800; letter-spacing: .5px; color: var(--navy); }
.btn-my-apply { background: var(--navy); color: #fff; font-size: 15px; font-weight: 400; letter-spacing: 1px; padding: 10px 20px; border-radius: var(--radius); white-space: nowrap; }
.btn-my-apply:hover { background: var(--navy2); }

/* 3단 GNB */
.gnb-bar { background: #fff; border-top: 1px solid #f0f0f0; border-bottom: 1px solid var(--line); }
.gnb-bar.is-stuck { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
body.gnb-stuck-pad { padding-top: 0; }
.gnb { display: flex; justify-content: center; }
.gnb-item { position: relative; }
/* GNB 는 Noto Sans KR (기관 요청). 폰트 파일은 fonts/noto-sans-kr/ 에 자체 호스팅, head 에서 로드한다. */
.gnb-item > a { display: block; font-family: 'Noto Sans KR', var(--font); font-size: 23px; font-weight: 400; color: #000; padding: 12px 30px; transition: color .15s; }
.gnb-item:hover > a { color: var(--navy2); }
.gnb-item.on > a { color: var(--navy2); font-weight: 700; }
.gnb-sub {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 190px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy2);
  box-shadow: 0 8px 18px rgba(0,0,0,.1); padding: 8px 0; z-index: 60;
}
.gnb-item:hover .gnb-sub { display: block; }
.gnb-sub li a { display: block; padding: 9px 20px; font-family: 'Noto Sans KR', var(--font); font-size: 15.5px; color: var(--ink2); text-align: center; }
.gnb-sub li a:hover { background: var(--bg-soft); color: var(--navy2); font-weight: 600; }

/* 모바일 헤더 (기본 숨김) */
.m-util-bar, .m-logo-bar { display: none; }

/* 모바일 드로어 */
.m-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.m-drawer.open { visibility: visible; }
.m-drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
.m-drawer.open .m-drawer-bg { opacity: 1; }
.m-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84%;
  background: #fff; transform: translateX(-100%); transition: transform .25s; overflow-y: auto;
}
.m-drawer.open .m-drawer-panel { transform: translateX(0); }
.m-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.m-drawer-head img { height: 40px; width: auto; }
/* 아이콘 글자(×) 하나뿐이라 박스가 19×30 으로 잡힌다 — 포인터 타깃 요건은 폭과 무관하므로 여기서 못 박는다 */
.m-drawer-close { font-size: 30px; line-height: 1; color: var(--muted);
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.m-nav-item { border-bottom: 1px solid #f0f0f0; }
.m-nav-toggle, .m-nav-link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; }
.m-nav-toggle .arrow { width: 8px; height: 8px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg); transition: transform .2s; }
.m-nav-item.open .m-nav-toggle .arrow { transform: rotate(-135deg); }
.m-nav-sub { display: none; background: var(--bg-soft); padding: 6px 0; }
.m-nav-item.open .m-nav-sub { display: block; }
.m-nav-sub li a { display: block; padding: 10px 28px; font-size: 14.5px; color: var(--ink2); }
.m-nav-sub li a:active { color: var(--navy2); }

/* ==========================================================================
   메인 페이지
   ========================================================================== */

/* 메인 배너 슬라이드 */
.banner-slider { position: relative; overflow: hidden; }
/* 메인 배너만 화면 폭의 70%로 두고 가운데 정렬 (시설·교육신청 슬라이더는 그대로 전폭) */
.main-banner { width: 70%; margin-left: auto; margin-right: auto; }
/* 좁은 화면에서 70%면 배너가 지나치게 작아져 읽히지 않는다 — 전폭으로 되돌린다 */
@media (max-width: 768px) { .main-banner { width: 100%; } }
.bs-viewport { overflow: hidden; }
.bs-track { display: flex; will-change: transform; }
.bs-slide { flex: 0 0 100%; min-width: 100%; }
.bs-slide img { width: 100%; display: block; }
.bs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .2s;
}
.banner-slider:hover .bs-arrow { opacity: 1; }
.bs-arrow:hover { background: rgba(0, 0, 0, .55); }
.bs-arrow.prev { left: 18px; }
.bs-arrow.next { right: 18px; }
.bs-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 5; }
.bs-dots button {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); transition: background .2s, width .2s;
}
.bs-dots button.on { background: var(--navy2); width: 24px; border-radius: 5px; }

/* 메인 시설 이미지 슬라이드 (시설 밴드 자리) — 배너와 같은 1900×650 규격, 전폭 */
.facility-slider .bs-slide img { aspect-ratio: 1900 / 650; object-fit: cover; }
/* 좁은 화면에서 비율대로 줄이면 128px 남짓한 띠가 되어 기존 밴드(320px)보다 존재감이 사라진다.
   최소 높이를 두고 좌우를 잘라 밴드다운 높이를 유지한다. */
@media (max-width: 768px) { .facility-slider .bs-slide img { min-height: 180px; } }

/* 교육신청 상단 이미지 슬라이드 — 콘텐츠 폭(1240) 안에 들어간다 */
.apply-top-slider { margin-bottom: 26px; border-radius: var(--radius); }
.apply-top-slider .bs-slide img { aspect-ratio: 1240 / 400; object-fit: cover; }
/* 본문 안 슬라이더는 hover 전에도 화살표가 보이도록(터치 기기 대비) */
.apply-top-slider .bs-arrow { opacity: .55; width: 38px; height: 38px; }
.apply-top-slider .bs-arrow.prev { left: 12px; }
.apply-top-slider .bs-arrow.next { right: 12px; }

/* 섹션 공통 */
.home-section { padding: 70px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .label { display: block; font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--navy2); text-transform: uppercase; margin-bottom: 10px; }
.section-head h2 { font-size: 32px; font-weight: 800; }
.section-head p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

/* 교육과정 그리드 — 한 줄에 4개씩 고정. 화살표도 자동 롤링도 없고, 4개를 넘으면 다음 줄로 접힌다(4×2).
   폭 80%·열 간격 30px 은 카드를 기존의 80% 크기로 줄이면서 카드 사이 간격만 유지하기 위한 값이다. */
.course-section { background: #fff; }
/* grid-auto-rows:1fr — 줄이 나뉘어도 모든 줄이 가장 높은 카드에 맞춰져 카드 높이가 전부 같아진다.
   (이게 없으면 2행이 1행보다 짧아진다) */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 40px 30px;
  width: 80%; margin-left: auto; margin-right: auto; }
@media (max-width: 1200px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }
/* 좁은 화면에서는 80% 로 묶어 둘 이유가 없다 — 남는 폭을 카드에 준다.
   태블릿(Material medium, 600~839dp)에서 2열로 두면 카드가 355px 까지 커져
   정사각 썸네일 탓에 섹션이 오히려 길어진다 → 3열로 데스크톱과 비슷한 카드 크기를 유지한다. */
@media (max-width: 992px)  { .course-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; width: 100%; } }
/* 폰(Material compact, <600dp)은 2열 유지.
   1열로 두면 정사각 썸네일이 화면 폭만큼 커져 섹션 높이가 4,000px 를 넘고 스크롤이 과도해진다. */
@media (max-width: 599px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .course-card .cc-body { padding: 10px 10px 0; }
  .course-card .si-name { font-size: 14px; margin-top: 0; }
  .course-card .si-summary { font-size: 12px; }
  .course-card .si-price { font-size: 15px; }
  .course-card .si-stock { font-size: 12px; }
  /* 카드 폭이 좁아 버튼 두 개를 나란히 두면 글자가 쪼개진다 — 세로로 쌓는다 */
  .course-card .card-actions { flex-direction: column; gap: 6px; padding: 10px; }
  .course-card .card-actions .btn { padding: 10px 0; font-size: 13px; }
}
/* 카드 내부를 세로 flex 로 — 본문이 남는 공간을 흡수해 버튼이 항상 카드 바닥에 정렬된다 */
.course-card { width: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.course-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-4px); }
/* 카드 상단은 관리자가 등록한 대표 이미지(정사각 권장) 한 장이 전부다 */
/* flex 자식이라 기본값이면 정사각 비율이 찌그러질 수 있다 — 축소를 막는다 */
.course-card .card-visual { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 1 / 1; background: var(--beige); overflow: hidden; }
.course-card .card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.course-card:hover .card-visual img { transform: scale(1.03); }
/* 대표 이미지 미등록 시 과정명으로 대신 채우는 폴백 */
.course-card .card-visual .cv-title { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; font-size: 24px; font-weight: 800; color: var(--navy); text-align: center; }
/* 썸네일 아래 내용 — 교육신청 목록(/apply)의 .si-* 스타일을 그대로 쓴다(아래 '교육상품 목록' 절).
   여기서는 카드 안쪽 여백만 잡고, 첫 줄은 .si-name 의 기본 위 여백을 상쇄한다. */
.course-card .cc-body { flex: 1 0 auto; padding: 14px 16px 0; }
.course-card .cc-body > :first-child { margin-top: 0; }
.course-card .card-actions { display: flex; gap: 8px; padding: 16px; }
.course-card .card-actions .btn { flex: 1; text-align: center; padding: 11px 0; }

/* 시설 밴드 */
/* 이미지만 보여주는 밴드 — 문구를 얹지 않으므로 가독성용 흰색 오버레이도 두지 않는다 */
.facility-band { background-size: cover; background-position: center; min-height: 420px; }

/* 퀵 배너 */
.quick-section { background: #fff; }
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.quick-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 10px; color: #fff; padding: 26px 18px 20px; min-height: 170px;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  transition: transform .2s, box-shadow .2s;
}
.quick-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,20,22,.08), rgba(13,20,22,.25));
}
.quick-card.quick-fit-contain { background-size: contain; background-repeat: no-repeat; }
.quick-card > span:first-child {
  width: 100%; padding: 9px 10px; border-radius: 7px; box-sizing: border-box;
  background: rgba(18,27,29,.68);
}
.quick-card:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.quick-card .q-title { display: block; font-size: 20px; font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.quick-card .q-sub { display: block; font-size: 13.5px; opacity: .95; letter-spacing: .1px; line-height: 1.5; margin-top: 5px; overflow-wrap: break-word; }
.quick-card .q-go { margin-top: 14px; font-size: 12px; font-weight: 700; background: rgba(9,18,24,.7); border-radius: 20px; padding: 4px 12px; }
.quick-card.blue { background-color: #788273; }
.quick-card.navy { background-color: #66736d; }

/* 파트너 로고 스트립 (무한 마퀴: 오른쪽 → 왼쪽)
   폭은 다른 섹션과 같은 1280px 그리드(.inner) 안에서 %로 제한한다 */
.partner-strip { background: #fff; padding: 30px 0; border-top: 1px solid #f0f0f0; }
.partner-marquee {
  width: 97%; margin: 0 auto; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partner-track {
  display: flex; align-items: center; gap: 20px; width: max-content;
  animation: partner-marquee 36s linear infinite;
}
.partner-strip:hover .partner-track { animation-play-state: paused; }
.partner-track li { flex: 0 0 auto; }
.partner-track a {
  display: flex; align-items: center; justify-content: center;
  min-width: 225px; height: 93px; padding: 15px 33px; background: #fff; border: 1px solid #ececec; border-radius: 6px;
}
/* 기관별 공식 CI 원본을 비율 그대로 표시한다. */
.partner-track img { height: 45px; width: auto; }
/* 목록을 2벌 복제해 -50% 지점에서 이어붙이면 끊김 없이 반복된다 */
@keyframes partner-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 10px)); }
}
/* '동작 줄이기' 환경에서도 가로 스크롤바가 생기지 않도록 속도만 늦춘다 */
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation-duration: 90s; }
}

/* 앨범 스트립 */
.gallery-section { background: var(--beige); }
.gallery-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.gallery-item { display: block; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.07); transition: transform .2s; }
.gallery-item:hover { transform: translateY(-4px); }
.gallery-item .g-thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-item .g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .g-title { font-size: 13.5px; color: var(--ink2); padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   서브페이지 공통
   ========================================================================== */

.sub-wrap { padding: 55px 0 90px; }
.sub-wrap .inner { display: flex; gap: 46px; align-items: flex-start; }

/* LNB */
.lnb { flex: 0 0 260px; }
.lnb-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.lnb-head { background: linear-gradient(135deg, var(--navy2), var(--navy)); color: #fff; padding: 34px 22px 20px; }
.lnb-head .lh-en { display: block; font-size: 11px; letter-spacing: 3px; opacity: .8; text-transform: uppercase; }
.lnb-head .lh-title { font-size: 22px; font-weight: 800; margin-top: 30px; display: block; }
.lnb-head .lh-bar { width: 100%; height: 2px; background: rgba(255,255,255,.5); margin-top: 12px; }
.lnb-menu li { border-top: 1px solid #f0ede6; background: var(--beige); }
.lnb-menu li:first-child { border-top: 0; }
.lnb-menu a { display: block; padding: 11px 20px; font-size: 15px; color: var(--ink2); }
.lnb-menu li.on { background: #5b79ad; }
.lnb-menu li.on a { color: #fff; font-weight: 700; }
.lnb-menu li:not(.on) a:hover { color: var(--navy2); }

.lnb-center { margin-top: 26px; padding: 4px 6px; }
.lnb-center .lc-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.lnb-center .lc-title small { font-size: 12px; color: #b0a999; font-weight: 500; margin-left: 6px; }
.lnb-center .lc-tel { display: block; font-size: 27px; font-weight: 800; color: var(--navy2); margin-top: 10px; letter-spacing: .5px; }
.lnb-center .lc-tel small { font-size: 11px; color: var(--muted); font-weight: 500; margin-right: 4px; vertical-align: 3px; }
.lnb-center .lc-fax { display: block; font-size: 17px; font-weight: 700; color: var(--navy2); margin-top: 2px; }
.lnb-center .lc-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.lnb-center .lc-hours { font-size: 12.5px; color: #c0392b; margin-top: 4px; }

/* 콘텐츠 영역 */
.sub-content { flex: 1 1 auto; min-width: 0; }
.breadcrumb { display: flex; justify-content: flex-end; gap: 6px; font-size: 15px; color: var(--ink2); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.breadcrumb a:hover { color: var(--navy2); }
.breadcrumb .sep::before { content: '>'; margin: 0 2px; color: #bbb; }
.page-title { margin-top: 26px; margin-bottom: 30px; font-size: 26px; font-weight: 800; text-align: center; }

/* 찾아오시는길 (원본 구조: 지도 + 정보 카드 2단) */
.loc-wrap { display: flex; gap: 26px; align-items: stretch; }
.loc-map { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.loc-map .root_daum_roughmap { width: 100% !important; }
.loc-map .root_daum_roughmap .wrap_map { height: 510px !important; }
.loc-info { flex: 0 0 380px; border: 1px solid var(--line); border-radius: 4px; padding: 26px 24px; }
.loc-name { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.loc-dl { display: flex; align-items: flex-start; gap: 10px; margin: 9px 0; font-size: 14px; }
.loc-dl dt { flex: 0 0 92px; display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 700; }
.loc-dl dt svg { flex: 0 0 auto; color: var(--navy2); }
.loc-dl dd { margin: 0; color: var(--ink2); line-height: 1.5; }
.loc-dl dd a { color: var(--ink2); }
.loc-dl dd a:hover { color: var(--navy2); text-decoration: underline; }
.loc-divider { border-top: 1px solid var(--line); margin: 22px 0 18px; }
.loc-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.loc-btn { background: #79a845; color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 4px; padding: 7px 12px; white-space: nowrap; }
.loc-btn:hover { background: #6a9439; }
.loc-video-box { position: relative; padding-top: 45%; background: #000; border-radius: 4px; overflow: hidden; }
.loc-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 992px) {
  .loc-wrap { flex-direction: column; }
  .loc-info { flex: 1 1 auto; }
  .loc-map .root_daum_roughmap .wrap_map { height: 360px !important; }
  .loc-video-box { padding-top: 56.25%; }
}

/* 협약기관 — 3열로 아래로 계속 이어짐 (페이지네이션·화살표 없음) */
.pstack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; list-style: none; padding: 0; }
.pstack li { list-style: none; }
.pstack a, .pstack img { display: block; }
.pstack img { width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 768px) { .pstack { grid-template-columns: repeat(2, 1fr); } }

/* 페이지 내 소제목 (예: 시설전경) */
.section-sub-title { font-size: 21px; font-weight: 800; color: var(--ink); margin: 46px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-sub-title small { font-size: 13px; font-weight: 500; color: #b3ab9d; margin-left: 8px; letter-spacing: .5px; }

/* 편집 가능한 본문(기관소개 등) */
.intro-body { font-size: 15.5px; line-height: 1.85; }
.intro-body > div { margin: 0; }
.intro-body br + br { line-height: 1.2; }

/* 에디터(Quill) 출력 서식 + 기존 사이트에서 이관된 크기 클래스 */
.page-fragment .ql-align-center { text-align: center; }
.page-fragment .ql-align-right { text-align: right; }
.page-fragment .ql-align-justify { text-align: justify; }
.page-fragment .ql-size-small { font-size: 0.8em; }
.page-fragment .ql-size-large { font-size: 1.35em; }
.page-fragment .ql-size-huge { font-size: 1.8em; }
.page-fragment .ql-indent-1 { padding-left: 3em; }
.page-fragment .ql-indent-2 { padding-left: 6em; }
.page-fragment .ql-indent-3 { padding-left: 9em; }
.page-fragment ol, .page-fragment ul { padding-left: 1.4em; margin: 8px 0; }
.page-fragment ol li { list-style: decimal; }
.page-fragment ul li { list-style: disc; }
.page-fragment .xx-small { font-size: xx-small; }
.page-fragment .x-small { font-size: x-small; }
.page-fragment .small { font-size: small; }
.page-fragment .medium { font-size: medium; }
.page-fragment .large { font-size: large; }
.page-fragment .x-large { font-size: x-large; }
.page-fragment .xx-large { font-size: xx-large; }

/* 조직도 등 단일 이미지 */
.single-image { text-align: center; margin: 0 0 30px; }
.single-image img { max-width: 100%; height: auto; }
.single-image figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* 페이지 갤러리 (9장 단위 페이징, 9장 이하면 화살표 없음) */
.pgal { position: relative; margin-top: 6px; }
.pgal-viewport { overflow: hidden; }
.pgal-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.pgal-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-content: start; }
.pgal-item { margin: 0; }
.pgal-item img { width: 100%; aspect-ratio: 370 / 230; object-fit: cover; border-radius: 4px; background: var(--bg-soft); }
.pgal-item figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
.pgal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy);
  border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.pgal-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.pgal-arrow.prev { left: -14px; }
.pgal-arrow.next { right: -14px; }
.pgal-arrow[hidden] { display: none; }
.pgal-counter { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
.pgal-counter .cur { color: var(--navy2); font-weight: 700; }

/* --------------------------------------------------------------------------
   사업안내 등 이관 콘텐츠의 원본 레이아웃 재현
   (원본은 플랫폼 CSS에 의존: 좌측 제목 컬럼 220px + 우측 본문)
   -------------------------------------------------------------------------- */
.page-fragment .sub_box { position: relative; padding: 6px 0 34px; }
.page-fragment .sub_box::after { content: ''; display: block; clear: both; }
.page-fragment .sub_title5 { float: left; width: 200px; }
/* 기관 모집 포스터의 '│ 교육 대상' 처럼 제목 왼쪽에 색 막대를 세운다 */
.page-fragment .sub_title5 .title,
.page-fragment .sub_box > .title {
  font-size: 24px; font-weight: 800; color: #222; line-height: 1.3; letter-spacing: -.5px; margin: 0 0 8px;
  padding-left: 14px; border-left: 4px solid var(--navy2);
}
.page-fragment .sub_title5 .sub_cont { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* 제목 컬럼 오른쪽으로 본문 배치 */
.page-fragment .sub_title5 ~ *,
.page-fragment .sub_box > .cont_text,
.page-fragment .sub_box > .con_list,
.page-fragment .sub_box > .con_box,
.page-fragment .sub_box > .table_wrap,
.page-fragment .sub_box > .img,
.page-fragment .sub_box > .dl_wrap { margin-left: 220px; }
.page-fragment .sub_box > .blank_20,
.page-fragment .sub_box > .blank_30,
.page-fragment .sub_box > .blank_40 { margin-left: 220px; height: 0; }

.page-fragment .cont_text { font-size: 15px; line-height: 1.85; color: #666; letter-spacing: -.2px; margin: 0 0 6px; }
.page-fragment .con_list { margin-bottom: 26px; }
.page-fragment .con_list + .con_list { margin-top: 4px; }
.page-fragment .con_list h2 { font-size: 17px; font-weight: 700; color: #222; letter-spacing: -.5px; line-height: 1.4; margin: 0 0 10px; }
.page-fragment .con_list ul { padding-left: 0; margin: 0; }
.page-fragment .con_list li { position: relative; padding-left: 15px; font-size: 16px; line-height: 1.9; color: var(--ink2); letter-spacing: -.2px; list-style: none; }
/* 회색 점(3px) 은 눈에 걸리지 않아 항목 시작을 못 잡아준다 — 네이비 점 4px 로 키운다 */
.page-fragment .con_list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--navy2); }
/* 하위 항목(- 로 시작하는 부연) 은 한 단 들여쓰고 톤을 낮춘다 */
.page-fragment .con_list li p,
.page-fragment .con_list li .sub { margin: 2px 0 6px; padding-left: 10px; font-size: 15px; color: var(--muted); line-height: 1.8; }
/* .sub 는 톤을 낮춘 보조문구라 그 안의 강조가 묻힌다 — 체류자격처럼 값 자체가 핵심인 줄은 본문 색으로 올린다 */
.page-fragment .con_list li .sub strong { color: var(--ink); font-weight: 700; }
.page-fragment .con_list li .point,
.page-fragment .point { color: #c0392b; }
/* 포스터의 둥근 톤 카드 — 강조할 묶음을 감싼다 */
.page-fragment .con_box {
  border: 1px solid #e6ecf6; border-left: 4px solid var(--navy2); border-radius: 10px;
  background: #f7faff; padding: 20px 24px; margin-top: 14px; margin-bottom: 22px;
}
/* 포스터의 컬러 칩 (예: '외국인 가능', '교육시간 40시간') */
.page-fragment .tag {
  display: inline-block; background: var(--navy2); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.2px;
  padding: 5px 12px; border-radius: 999px; margin: 0 6px 6px 0;
}
.page-fragment .tag.beige { background: #a99a7c; }
.page-fragment .lead { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.6; margin: 0 0 6px; }
.page-fragment .con_box .type1,
.page-fragment .con_box .type2 { font-size: 15px; line-height: 1.9; color: #666; }
.page-fragment .con_box h2, .page-fragment .con_box h3, .page-fragment .con_box .title { font-size: 15.5px; font-weight: 700; color: #222; margin: 10px 0 4px; }
.page-fragment .con_box > *:first-child { margin-top: 0; }
/* 마지막 요소의 아래 여백은 다음 항목과 띄우려고 넣은 것인데, 마지막이면 그냥 빈 공간으로 남는다.
   교육안내 맨 아래에서 마지막 줄 뒤로 102px 가 비어 보이던 원인 — 끝에서는 걷어낸다. */
.page-fragment .con_box > *:last-child { margin-bottom: 0; }
.page-fragment .sub_box > *:last-child { margin-bottom: 0; }
.page-fragment .sub_box:last-child { padding-bottom: 0; }
.page-fragment .dl_wrap dl { display: flex; gap: 10px; font-size: 15px; line-height: 1.9; color: #666; }
.page-fragment .dl_wrap dt { flex: 0 0 auto; font-weight: 700; color: #222; }
.page-fragment .dl_wrap dd { margin: 0; }
.page-fragment .b_line { border-top: 1px solid #ececec; margin: 0 0 34px; clear: both; }
.page-fragment .blank_20 { height: 20px; }
.page-fragment .blank_30 { height: 30px; }
.page-fragment .blank_40 { height: 40px; }
.page-fragment .img { margin: 18px 0; }
.page-fragment .img img { max-width: 100%; height: auto; }
/* 가로 스크롤은 .table_wrap 이 맡는다 — 모바일 스크롤 힌트(아래 미디어쿼리)가 이 요소에 걸려 있고,
   내부 div 는 일부 페이지에만 있어 여기에 걸어야 전 페이지가 같게 동작한다. */
.page-fragment .table_wrap { margin: 14px 0 22px; overflow-x: auto; }
.page-fragment .table_wrap table { min-width: 560px; margin: 0; }
/* 표 아래 ※ 주석 — 표와 붙어 보이지 않게 띄우고 톤을 낮춘다 */
.page-fragment .table_wrap .text { margin: 10px 0 0; font-size: 15px; color: var(--muted); line-height: 1.7; }
.page-fragment .table_wrap .text a { color: var(--navy2); font-weight: 600; text-decoration: underline; }
/* 제목 컬럼 옆 첫 콘텐츠는 제목과 같은 기준선에서 시작 (원본 동일) */
.page-fragment .sub_title5 + * { margin-top: 0; }
.page-fragment .sub_title5 + * > table:first-child,
.page-fragment .sub_title5 + table { margin-top: 0; }

@media (max-width: 768px) {
  .page-fragment .sub_title5 { float: none; width: auto; margin-bottom: 12px; }
  .page-fragment .sub_title5 ~ *,
  .page-fragment .sub_box > .cont_text,
  .page-fragment .sub_box > .con_list,
  .page-fragment .sub_box > .con_box,
  .page-fragment .sub_box > .table_wrap,
  .page-fragment .sub_box > .img,
  .page-fragment .sub_box > .dl_wrap,
  .page-fragment .sub_box > .blank_20,
  .page-fragment .sub_box > .blank_30,
  .page-fragment .sub_box > .blank_40 { margin-left: 0; }
  .page-fragment .sub_title5 .title, .page-fragment .sub_box > .title { font-size: 20px; padding-left: 11px; border-left-width: 3px; }
  /* 좁은 화면에서는 셀을 한 단계 조인다. 15px 은 유지 — 이보다 작으면 읽기 어렵다. */
  .page-fragment table th, .page-fragment table td { padding: 12px 10px; font-size: 15px; }
  .page-fragment .con_box { padding: 16px 18px; }
}


/* 재가장기요양 STEP 목록 (원본: 5개 버튼 → 상세 페이지 이동) */
.page-fragment .menu-A-list-wrap { margin-top: 6px; }
.page-fragment .menu-A-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 0; margin: 0; list-style: none; }
.page-fragment .menu-A-list li { list-style: none; float: none; width: auto; margin: 0; }
.page-fragment .menu-A-list li a {
  display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 12px 22px; background: #fff;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.page-fragment .menu-A-list li a:hover { border-color: var(--navy2); box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-3px); }
.page-fragment .menu-A-list .step {
  display: inline-block; background: var(--navy2); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; padding: 5px 14px; border-radius: 0 0 6px 6px; margin-bottom: 16px; white-space: nowrap;
}
.page-fragment .menu-A-list .figure { display: block; margin: 0 0 12px; }
.page-fragment .menu-A-list .figure img { width: 70px; height: 70px; object-fit: contain; margin: 0; }
.page-fragment .menu-A-list .subject { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.page-fragment .menu-A-list .text-cont { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.page-fragment .menu-A-list .text-cont span { display: block; }
.homecare-step .menu-A-contents { font-size: 15px; line-height: 1.9; color: #666; }
.homecare-step .menu-A-contents img { max-width: 100%; height: auto; }
.homecare-step-exp { font-size: 16px; font-weight: 600; color: var(--navy2); margin-bottom: 16px; }
@media (max-width: 992px) { .page-fragment .menu-A-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .page-fragment .menu-A-list { grid-template-columns: repeat(2, 1fr); gap: 10px; } }


/* 사회공익사업 슬라이더 (5초 자동 전환 · 무한 반복 · 썸네일) */
.pslider { position: relative; margin-top: 26px; }
.ps-viewport { overflow: hidden; border-radius: 4px; background: #f2f2f2; }
.ps-track { display: flex; will-change: transform; }
.ps-slide { flex: 0 0 100%; min-width: 100%; }
.ps-slide img { width: 100%; aspect-ratio: 19 / 10; object-fit: cover; display: block; }
.ps-arrow {
  position: absolute; top: calc(50% - 46px); transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.32); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.ps-arrow:hover { background: rgba(0,0,0,.6); }
.ps-arrow.prev { left: 14px; }
.ps-arrow.next { right: 14px; }
.ps-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.ps-thumb { padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; line-height: 0; opacity: .6; transition: opacity .2s, border-color .2s; }
.ps-thumb img { width: 100%; aspect-ratio: 19 / 10; object-fit: cover; }
.ps-thumb:hover { opacity: 1; }
.ps-thumb.on { opacity: 1; border-color: var(--navy2); }
@media (max-width: 768px) {
  .ps-thumbs { grid-template-columns: repeat(3, 1fr); }
  .ps-arrow { width: 36px; height: 36px; }
}

/* 마이그레이션 콘텐츠 프래그먼트 기본 스타일 */
.page-fragment { font-size: 15.5px; color: var(--ink2); }
.page-fragment img { max-width: 100%; height: auto; }

/* 본문 표 — 격자선 대신 '흰 여백으로 셀을 떼어 놓는' 방식.
   레퍼런스(happy3586 교육안내)와 기관 모집 포스터가 모두 이 형태이고,
   얇은 회색 격자보다 열 구분이 훨씬 또렷하다.
   border-spacing 을 쓰려면 border-collapse 가 separate 여야 한다. */
.page-fragment table {
  width: 100%; margin: 16px 0 18px;
  border-collapse: separate; border-spacing: 3px;
}
.page-fragment table th,
.page-fragment table td {
  padding: 15px 14px; font-size: 15.5px; line-height: 1.6;
  text-align: center; vertical-align: middle; word-break: keep-all;
}
/* 색 띠는 '열 머리글'(thead th)에만 두른다. 열 순서에 따라 네이비/베이지를 번갈아 줘 경계를 만든다. */
.page-fragment table thead th { background: var(--navy2); color: #fff; font-weight: 700; }
.page-fragment table thead th:nth-child(even) { background: #a99a7c; }
/* '행 머리글'(tbody th)은 그 줄의 항목 이름이다. 여기에도 색 띠를 두르면
   본문이 통째로 색 덩어리가 된다(방문목욕 급여비용 표에서 폭 75% 짜리 네이비 블록 두 개가 됐다).
   항목 이름답게 옅은 바탕 + 진한 글자로 둔다. */
.page-fragment table tbody th { background: #eaf0fa; color: var(--ink); font-weight: 700; }
/* 본문 셀은 단일 톤으로 둔다.
   nth-child 로 열마다 색을 번갈아 주면 rowspan 이 있는 표에서 열 번호가 밀려
   같은 열인데 색이 달라진다(교육개설 표의 '5일/4일' 칸에서 실제로 어긋났다).
   셀 사이 3px 흰 여백이 이미 열을 갈라 주므로 단일 톤으로도 충분히 읽힌다. */
.page-fragment table td { background: #f7f9fc; color: var(--ink2); }
/* 항목 이름 칸 — 어느 열에 있든 마크업에서 직접 지정한다(rowspan 과 무관하게 정확하다) */
.page-fragment table td.k { background: #eaf0fa; font-weight: 700; color: var(--ink); }
/* 셀 안 보조 문구 (예: 자격증 소지자 아래 자격 목록) */
/* 이관 콘텐츠가 쓰던 정렬 클래스 — CSS 에 정의가 없어 그동안 아무 효과가 없었다.
   가운데 정렬을 기본으로 두면 긴 설명문까지 가운데로 몰리므로 여기서 되살린다. */
.page-fragment table .ta_l { text-align: left; }
.page-fragment table .ta_r { text-align: right; }
.page-fragment table .ta_c { text-align: center; }
.page-fragment table small,
.page-fragment table .cell-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 400; }
.page-fragment table ul { margin: 6px 0 0; padding-left: 0; }
.page-fragment table li { list-style: none; font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* 이용약관은 본문 안에서 이관된 레거시 스타일시트(/img_up/_addon/_styles/agree/agree.css)를 함께 불러오는데,
   그쪽이 본문을 13px 로 못 박아 72개 문단이 전부 작게 나왔다. 끝까지 읽어야 하는 문서라 크기를 되돌린다.
   레거시 시트가 site.css 보다 뒤에 실리므로 특이도로 이긴다(.page-fragment 를 앞에 붙여 한 단계 높였다). */
.page-fragment .agreementBody { font-size: 15.5px; }
.page-fragment .agreementBody p,
.page-fragment .agreementBody ol,
.page-fragment .agreementBody ol li { font-size: 15.5px; line-height: 1.85; }
.page-fragment .agreementBody .acon div { font-size: 15.5px; line-height: 1.85; }
.page-fragment .agreementBody h3 { font-size: 20px; }

.page-fragment h1, .page-fragment h2, .page-fragment h3 { margin: 20px 0 10px; }
.page-fragment p { margin: 8px 0; }
.page-fragment iframe { max-width: 100%; }

/* ==========================================================================
   게시판
   ========================================================================== */
.board-actions-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }
/* width·table-layout 이 없으면 긴 제목이 표를 늘려 좁은 화면에서 화면 밖으로 밀려난다.
   고정 레이아웃이면 각 열이 선언 폭을 지키고 제목 칸만 남는 폭을 받아 말줄임이 실제로 동작한다. */
.board-table { border-top: 2px solid var(--ink); width: 100%; table-layout: fixed; }
.board-table th { border-bottom: 1px solid var(--line); padding: 13px 10px; font-size: 14px; color: var(--ink); font-weight: 700; }
.board-table td { border-bottom: 1px solid #eee; padding: 13px 10px; font-size: 14px; text-align: center; color: var(--ink2); }
.board-table td.subject { text-align: left; }
.board-table td.subject a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.board-table td.subject a:hover { color: var(--navy2); text-decoration: underline; }
.board-table tr.notice-row { background: var(--bg-soft); }
.board-table .badge-notice { display: inline-block; background: var(--navy2); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 3px; padding: 2px 8px; }
.board-table .ico-file { display: inline-block; margin-left: 6px; color: var(--muted); font-size: 12px; }
/* 제목 셀 안의 모바일 전용 보조 요소 — 넓은 화면에서는 각자 제 열이 있으므로 숨긴다 */
.board-table .bt-meta, .board-table .bt-notice-m { display: none; }

.board-search { display: flex; justify-content: center; margin-top: 30px; }
.board-search .box { display: flex; align-items: center; border-bottom: 1px solid var(--ink); padding: 6px 4px; width: 280px; }
/* flex 자식의 기본 min-width 는 auto 라 콘텐츠 폭 아래로 줄지 않는다.
   0 으로 풀지 않으면 입력이 제 폭을 고집해 옆의 검색 버튼을 상자 밖으로 밀어낸다. */
/* 높이·버튼 크기는 폭과 무관한 포인터 타깃 요건이라 전역으로 둔다 (WCAG 2.5.8 은 화면 폭을 가리지 않는다) */
.board-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; font-size: 14px; background: transparent; }
.board-search button { color: var(--muted); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* 갤러리 게시판 */
.album-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.album-tabs a { font-size: 13.5px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink2); }
.album-tabs a.on, .album-tabs a:hover { background: var(--navy2); border-color: var(--navy2); color: #fff; }
.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.album-card { display: block; border: 1px solid #eee; border-radius: 6px; overflow: hidden; background: #fff; transition: box-shadow .2s; }
.album-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.album-card .a-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.album-card .a-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.album-card:hover .a-thumb img { transform: scale(1.05); }
/* 카드 내부가 전부 <span>(inline) 이라 display:block 이 없으면 overflow·text-overflow 가 먹지 않아
   긴 제목이 카드 밖으로 삐져나간다. */
.album-card .a-body { display: block; padding: 12px 14px 14px; min-width: 0; }
.album-card .a-cat { display: block; font-size: 11.5px; color: var(--navy2); font-weight: 700; }
.album-card .a-title { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-card .a-date { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* 페이지네이션 */
/* 페이지 수가 많으면 한 줄에 다 들어가지 않아 화면 밖으로 밀린다 — 좁은 화면에서는 줄바꿈시킨다 */
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 34px; }
.pagination a, .pagination span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; font-size: 13.5px; color: var(--ink2); }
.pagination a:hover { border-color: var(--navy2); color: var(--navy2); }
.pagination .cur { background: var(--navy2); border-color: var(--navy2); color: #fff; font-weight: 700; }

/* 게시글 뷰 */
.post-head { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 20px 6px; }
.post-head h3 { font-size: 21px; font-weight: 700; }
.post-head .meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.post-body { padding: 30px 6px 40px; overflow-x: auto; font-size: 15px; }
.post-body img { max-width: 100%; height: auto; }
/* 에디터 산출물 서식 (신규 저장분은 인라인 style, 과거 저장분은 클래스) */
.post-body ol, .post-body ul { padding-left: 1.4em; margin: 8px 0; }
.post-body ol li { list-style: decimal; }
.post-body ul li { list-style: disc; }
.post-body h1 { font-size: 30px; font-weight: 800; margin: 20px 0 10px; }
.post-body h2 { font-size: 24px; font-weight: 800; margin: 20px 0 10px; }
.post-body h3 { font-size: 19px; font-weight: 700; margin: 20px 0 10px; }
.post-body .ql-indent-1 { padding-left: 3em; }
.post-body .ql-indent-2 { padding-left: 6em; }
.post-body .ql-indent-3 { padding-left: 9em; }
.post-body .ql-align-center { text-align: center; }
.post-body .ql-align-right { text-align: right; }
.post-body .ql-align-justify { text-align: justify; }
.post-body .ql-size-small { font-size: 0.8em; }
.post-body .ql-size-large { font-size: 1.35em; }
.post-body .ql-size-huge { font-size: 1.8em; }
.post-attach { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); padding: 14px 18px; margin: 0 0 26px; }
.post-attach .pa-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.post-attach li { font-size: 13.5px; color: var(--muted); padding: 2px 0; }
.post-attach li .size { color: #aaa; margin-left: 6px; font-size: 12px; }
.post-attach .pa-note { font-size: 12.5px; color: #c0392b; margin-top: 8px; }
.post-nav { border-top: 1px solid var(--line); }
.post-nav li { display: flex; gap: 14px; border-bottom: 1px solid #eee; padding: 12px 6px; font-size: 14px; }
.post-nav .dir { flex: 0 0 60px; font-weight: 700; color: var(--ink); }
/* 글줄 높이만큼(22px)만 차지해 포인터 타깃 24 를 밑돌았다 */
.post-nav a { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 24px; line-height: 24px; }
.post-nav a:hover { color: var(--navy2); }
.post-actions { display: flex; justify-content: center; margin-top: 26px; }

/* 빈 게시판 */
.board-empty-box { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 70px 20px; text-align: center; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   폼 (후원/자원봉사/교육신청/로그인/회원가입)
   ========================================================================== */
.form-intro { margin-bottom: 26px; }
.form-table { border-top: 2px solid var(--ink); }
.form-table th { width: 170px; background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 12px 14px; font-size: 14px; text-align: left; color: var(--ink); vertical-align: top; }
.form-table td { border-bottom: 1px solid #eee; padding: 10px 14px; }
.form-table .req::after { content: ' *'; color: var(--red); }
/* 값 옆에 붙는 짧은 당부 (예: 입금자명 값 뒤 '반드시 입금자명으로 입금').
   내용 칸은 폭이 넉넉해 같은 줄에 잇고, 좁은 화면에서 꺾이면 자연스럽게 줄바꿈된다. */
.form-table .td-hint { font-size: 12.5px; font-weight: 600; color: var(--red); word-break: keep-all; }
.form-table input[type=text], .form-table input[type=tel], .form-table input[type=email], .form-table input[type=date], .form-table input[type=password], .form-table select, .form-table textarea {
  width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px; outline: 0;
}
.form-table textarea { max-width: 640px; min-height: 110px; resize: vertical; }
.form-table input:focus, .form-table textarea:focus, .form-table select:focus { border-color: var(--navy2); }
.form-table .radio-group { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 0; font-size: 14px; }
.form-agree-box { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); max-height: 200px; overflow-y: auto; padding: 16px 18px; font-size: 13px; color: var(--muted); margin-top: 26px; }
.form-agree-check { margin-top: 12px; font-size: 14px; color: var(--ink); }
.form-submit { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.form-error { background: #fdecea; border: 1px solid #f5c6c0; color: #b7133f; border-radius: 6px; padding: 12px 16px; font-size: 14px; margin-bottom: 20px; }
/* 테스트 상점(결제 미교체) 경고 */
.admin-warn { background: #fff8e1; border: 1px solid #ffe082; color: #8a6d00; border-radius: 6px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.admin-warn code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* 인증 카드 (로그인/회원가입) */
.auth-wrap { max-width: 460px; margin: 70px auto 110px; padding: 0 20px; }
.auth-card { border: 1px solid var(--line); border-radius: 10px; padding: 40px 36px; box-shadow: 0 8px 26px rgba(0,0,0,.06); }
.auth-card h2 { text-align: center; font-size: 26px; font-weight: 800; }
.auth-card .auth-sub { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.auth-field { margin-top: 16px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.auth-field input { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px; font-size: 14.5px; outline: 0; }
.auth-field input:focus { border-color: var(--navy2); }
.auth-extra { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
.auth-card .btn { width: 100%; text-align: center; margin-top: 22px; padding: 13px 0; font-size: 15px; }
.auth-links { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
/* 단독 링크라 문장 속 인라인 예외에 해당하지 않는다 — 24×24 이상을 갖도록 세운다 */
.auth-links a, .auth-extra a { display: inline-flex; align-items: center; min-height: 24px; }
.auth-links a { color: var(--navy2); font-weight: 600; }
.auth-wide { max-width: 760px; }

/* 신청내역 */
.apply-course-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.apply-course-pick label { display: block; border: 2px solid var(--line); border-radius: 8px; padding: 18px; cursor: pointer; }
.apply-course-pick input { margin-right: 8px; }
.apply-course-pick label:has(input:checked) { border-color: var(--navy2); background: #f2f6fc; }
.apply-course-pick .c-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.apply-course-pick .c-price { color: var(--red); font-weight: 800; margin-left: 8px; }
.apply-course-pick .c-info { font-size: 13px; color: var(--muted); margin-top: 6px; }


/* ==========================================================================
   교육신청 (쇼핑몰형 목록·상세)
   ========================================================================== */
.shop-intro { margin-bottom: 22px; }
.shop-intro-lead { font-size: 16px; font-weight: 700; color: var(--ink); }
.shop-intro-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }

.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; list-style: none; padding: 0; margin: 0; }
.shop-item a { display: block; }
.si-thumb { position: relative; display: block; aspect-ratio: 1 / 1; border: 1px solid #d8d8d9; border-radius: 4px; overflow: hidden; background: var(--bg-soft); }
.si-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.shop-item a:hover .si-thumb img { transform: scale(1.04); }
.si-noimg { display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px; font-size: 16px; font-weight: 700; color: var(--navy2); text-align: center; }
/* 대표 이미지 좌측 상단에 얹는 라벨 묶음 — 기수와 마감이 함께 있어도 겹치지 않게 세로로 쌓는다.
   위치는 이 컨테이너가 잡고, 안쪽 라벨은 흐름에 맡긴다(.si-thumb / .card-visual 이 position:relative). */
.si-tags { position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 20px); }
.si-cohort { background: #f6d878; color: #3d2a00; font-size: 12px; font-weight: 700; letter-spacing: .2px;
  padding: 4px 10px; border-radius: 3px; word-break: keep-all; }
.si-badge { background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 3px; }
/* 마감 처리는 목록(/apply)과 메인 카드 양쪽에서 같게 보인다 */
.shop-item.soldout .si-thumb img,
.course-card.soldout .card-visual img { filter: grayscale(1) opacity(.55); }
.si-name { display: block; margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.si-summary { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 대상/시간 두 줄로 나눠 쓰는 형태 — 줄 수가 늘어나므로 두 줄 자르기를 풀고 라벨을 세로로 맞춘다 */
.si-summary.si-rows { display: block; overflow: visible; }
.ss-row { display: flex; gap: 5px; align-items: baseline; }
.ss-row + .ss-row { margin-top: 2px; }
.ss-k { flex: 0 0 auto; color: var(--ink2); font-weight: 700; }
.si-price { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: #c50250; }
.si-stock { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.si-stock strong { color: var(--navy2); }

/* 상세 — 좌 이미지 / 우 정보 50:50 */
.pv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pv-visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.pv-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-soft); font-size: 22px; font-weight: 800; color: var(--navy2); text-align: center; padding: 20px; }
.pv-name { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.pv-summary { font-size: 14.5px; color: var(--ink2); margin-top: 8px; line-height: 1.6; }
.pv-price { font-size: 24px; font-weight: 800; color: #830000; margin-top: 14px; }
.pv-meta { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.pv-meta dt { font-weight: 700; color: var(--ink); }
.pv-meta dd { margin: 0; color: var(--ink2); }
.pv-stock { color: var(--navy2); font-weight: 700; }
.pv-stock-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 400; }
/* 신청 화면 개인정보 동의 — 회원가입의 .form-agree-box 를 그대로 쓰되 제목 간격만 맞춘다 */
.pv-agree-title { margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pv-agree-title + .form-agree-box { margin-top: 8px; max-height: 160px; }
.pv-options { margin-top: 20px; display: grid; gap: 14px; }
.pv-opt-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pv-opt select, .pv-opt input[type=text], .pv-opt input[type=date], .pv-opt input[type=number],
.pv-opt input[type=file], .pv-opt textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font-size: 14px; background: #fff; }
.pv-opt select:focus, .pv-opt input:focus, .pv-opt textarea:focus { border-color: var(--navy2); outline: 0; }
.pv-opt .pv-qty { max-width: 120px; }
/* 파일 선택 버튼(브라우저 기본 위젯)을 다른 입력칸과 같은 톤으로 맞춘다. 버튼 안의 글자는 브라우저 언어를 따르므로 바꿀 수 없다. */
.pv-opt input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-soft); font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.pv-opt input[type=file]::file-selector-button:hover { border-color: var(--navy2); color: var(--navy2); }
/* 안내문은 입력칸 옆이 아니라 아래 줄에 놓는다 — 인라인이면 파일 선택 버튼 오른쪽에서 시작해 문장이 끊겨 보인다. */
.pv-opt .af-hint { display: block; margin-top: 6px; line-height: 1.55; }
.pv-opt .af-hint + .af-hint { margin-top: 2px; }
.pv-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pv-choice { font-size: 14px; color: var(--ink2); }
.pv-choice.off { color: #bbb; }
.pv-total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 16px 18px; background: var(--bg-soft); border-radius: 6px; }
.pv-total span { font-size: 14.5px; color: var(--ink2); }
.pv-total strong { font-size: 24px; font-weight: 800; color: #830000; }
.pv-buyer { margin-top: 22px; }
.pv-buyer th { width: 110px; }
.pv-actions { display: flex; gap: 10px; margin-top: 20px; }
.pv-actions .btn { flex: 1; text-align: center; }
.pv-actions .pv-pay { background: var(--navy); font-size: 16px; font-weight: 700; letter-spacing: 0; padding: 15px 0; }
.pv-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.pv-detail { margin-top: 6px; }
.pv-detail-images { margin-top: 10px; text-align: center; }
.pv-detail-images img { display: block; width: 100%; max-width: 800px; height: auto; margin: 0 auto; }

@media (max-width: 1200px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) {
  .pv-wrap { grid-template-columns: 1fr; gap: 24px; }
  /* 1열로 접히면 정사각 대표 이미지가 본문 폭(최대 950px)을 그대로 차지해
     과정명·가격·신청 버튼이 전부 첫 화면 밖으로 밀린다 — 폭에 상한을 두고 가운데 정렬한다. */
  .pv-visual { max-width: 400px; margin-left: auto; margin-right: auto; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media (max-width: 768px) {
  .pv-name { font-size: 19px; }
  .pv-price, .pv-total strong { font-size: 20px; }
  .pv-actions { flex-direction: column; }
}

/* 결제 화면 */
.pay-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
/* 왼쪽 첫 제목에는 .section-sub-title 의 위 여백(46px)이 그대로 걸려 있는데
   오른쪽 결제 금액 상자에는 그런 여백이 없어, 두 단의 시작 높이가 46px 어긋나 있었다.
   두 열이 같은 줄에서 시작하도록 첫 제목의 위 여백만 없앤다(아래 제목들의 간격은 그대로). */
.pay-main > .section-sub-title:first-child { margin-top: 0; }
.pay-extra { color: var(--muted); font-size: 13px; }
.pay-moid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.pay-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-method { flex: 1 1 150px; border: 2px solid var(--line); border-radius: 8px; padding: 14px 16px; font-size: 15px; cursor: pointer; }
.pay-method:has(input:checked) { border-color: var(--navy2); background: #f2f6fc; font-weight: 700; color: var(--navy2); }
.pay-method.off { opacity: .5; cursor: not-allowed; }

/* 무통장입금 선택 시 열리는 계좌 안내 + 입금자명 */
.deposit-box { margin-top: 14px; border: 1px solid var(--line); border-left: 3px solid var(--navy2); border-radius: 6px; padding: 16px 18px; background: var(--bg-soft); }
.deposit-box .dp-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.deposit-box .dp-account { font-size: 18px; color: var(--navy); line-height: 1.5; word-break: break-all; }
.deposit-box .dp-account .dp-holder { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.deposit-box .af-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.deposit-box .af-row label { flex: 0 0 84px; font-size: 14px; font-weight: 600; color: var(--ink); }
.deposit-box .af-row input { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px; font-size: 14px; }
.deposit-box .af-row input:focus { border-color: var(--navy2); }
.deposit-box .result-note { margin-bottom: 0; }
.pay-summary { border: 1px solid var(--line); border-radius: 8px; padding: 22px 20px; position: sticky; top: 20px; }
.pay-summary h4 { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.ps-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink2); padding: 6px 0; }
.ps-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 15px; }
.ps-row.total strong { font-size: 22px; font-weight: 800; color: #830000; }
.pay-go { width: 100%; text-align: center; margin-top: 16px; padding: 15px 0; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.pay-back { width: 100%; text-align: center; margin-top: 8px; }

.pay-result { text-align: center; padding: 34px 20px 30px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 26px; }
.pay-result .pr-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; font-size: 30px; line-height: 56px; color: #fff; }
.pay-result.ok .pr-icon { background: #2e7d32; }
.pay-result.wait .pr-icon { background: var(--orange); }
.pay-result.fail .pr-icon { background: #c0392b; }
.pay-result .pr-title { font-size: 22px; font-weight: 800; }
.pay-result .pr-sub { font-size: 14.5px; color: var(--ink2); margin-top: 8px; line-height: 1.6; }

/* 신청내역 확인 — 신청 1건 = 카드 1장 */
.mycheck-card { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px 20px; margin-bottom: 18px; }
.mc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.mc-head .mc-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mc-head .mc-title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.mycheck-card .order-detail { border-top: 0; }
.mycheck-card .order-detail th { width: 130px; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mc-note { font-size: 13px; color: var(--ink2); margin-top: 12px; line-height: 1.6; }

@media (max-width: 768px) {
  .mycheck-card { padding: 14px 14px 16px; }
  .mc-head .mc-title { font-size: 15.5px; }
  .mycheck-card .order-detail th { width: 96px; }
}

@media (max-width: 992px) {
  .pay-wrap { grid-template-columns: 1fr; }
  .pay-summary { position: static; }
}

/* ==========================================================================
   관리자 화면
   ========================================================================== */
.admin-wrap { max-width: 1280px; margin: 40px auto 80px; padding: 0 20px; }
/* 결제·접수 현황처럼 열이 많은 표는 넓은 폭을 쓴다 */
.admin-wrap.wide { max-width: 1560px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.admin-head h2 { font-size: 26px; font-weight: 800; }
.admin-head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.admin-head-actions { display: flex; gap: 8px; }

/* 좌측 세로 메뉴 + 본문 2단 */
.admin-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 22px; }
.admin-side { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.as-group { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 9px 16px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.as-group:first-child { border-top: 0; }
.as-menu li + li { border-top: 1px solid #f2f0eb; }
.as-menu a { display: block; padding: 11px 16px; font-size: 14px; line-height: 1.35; color: var(--ink2); }
.as-menu a:hover { background: var(--bg-soft); color: var(--navy2); }
.as-menu a.on { background: var(--navy2); color: #fff; font-weight: 700; }
.admin-main { min-width: 0; }
.admin-main > .admin-card:first-child { margin-top: 0; }
.admin-side-toggle { display: none; }
.admin-msg { background: #eef6ee; border: 1px solid #cfe3cf; color: #2e7d32; border-radius: 6px; padding: 12px 16px; font-size: 14px; margin-top: 16px; }
.admin-card { border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; margin-top: 22px; }
.admin-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.admin-card h3 .count { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.admin-guide { background: var(--bg-soft); border-radius: 6px; padding: 14px 18px; font-size: 13.5px; color: var(--ink2); margin-bottom: 18px; }
.admin-guide ul { margin-top: 6px; }
.admin-guide li { position: relative; padding-left: 12px; margin: 3px 0; }
.admin-guide li::before { content: '·'; position: absolute; left: 2px; }
.admin-guide code { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; font-size: 12.5px; }
.admin-guide a { color: var(--navy2); text-decoration: underline; }
.admin-form .af-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-form .af-row label { flex: 0 0 130px; font-size: 14px; font-weight: 600; color: var(--ink); }
.admin-form .af-row input[type=text] { flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px; }
.req-mark { color: var(--red); }
.admin-textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7; resize: vertical; margin-bottom: 14px; }
/* 리치 텍스트 에디터(Quill) */
.editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.editor-head-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.editor-head .btn { white-space: nowrap; padding: 6px 12px; font-size: 12.5px; letter-spacing: 0; }
#editorToolbar { border-radius: 6px 6px 0 0; }
#editor { min-height: 320px; border-radius: 0 0 6px 6px; margin-bottom: 14px;
          font-family: var(--font); font-size: 15px; line-height: 1.85; color: var(--ink2); }
#editor .ql-editor { min-height: 320px; }
#editor .ql-editor p { margin: 8px 0; }
#editor .ql-editor h1 { font-size: 30px; font-weight: 800; margin: 20px 0 10px; }
#editor .ql-editor h2 { font-size: 24px; font-weight: 800; margin: 20px 0 10px; }
#editor .ql-editor h3 { font-size: 19px; font-weight: 700; margin: 20px 0 10px; }
#editor .ql-editor img { max-width: 100%; height: auto; }
/* 크기·제목 픽커 라벨: quill.snow.css 가 뒤에 로드되므로 #id 로 특이도 확보 */
#editorToolbar .ql-picker.ql-size { width: 84px; }
#editorToolbar .ql-picker.ql-header { width: 132px; }
#editorToolbar .ql-picker.ql-size .ql-picker-label::before { content: '기본'; }
#editorToolbar .ql-picker.ql-header .ql-picker-label::before { content: '본문 (15px)'; }
#editorToolbar .ql-picker.ql-size .ql-picker-label[data-label]::before,
#editorToolbar .ql-picker.ql-header .ql-picker-label[data-label]::before { content: attr(data-label); }
.admin-table th { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 10px 12px; font-size: 13.5px; text-align: left; }
.admin-table td { border-bottom: 1px solid #eee; padding: 12px; font-size: 13.5px; vertical-align: middle; }
.admin-thumb { width: 100%; max-width: 180px; border: 1px solid var(--line); border-radius: 4px; }
.admin-meta p { margin: 2px 0; color: var(--ink2); }
.admin-meta .src { font-size: 12px; color: var(--muted); word-break: break-all; }
.admin-meta .warn, .ag-meta .warn { color: #c0392b; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions .inline, .ag-actions .inline { display: inline; }
.admin-empty { padding: 30px 0; text-align: center; color: var(--muted); font-size: 14px; }
/* 정원 그룹: 표 안 인라인 수정 폼(이름 + 정원 + 저장) */
.cg-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cg-edit input { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 13px; }
.cg-edit input[type=text] { flex: 1 1 120px; min-width: 100px; }
.cg-edit input[type=number] { width: 72px; }
/* 상품 목록 상단의 그룹 현황 요약 */
.admin-inline-list { margin: -6px 0 18px; font-size: 13.5px; color: var(--ink2); }
.admin-inline-list li { padding: 3px 0; }
.admin-inline-list strong { color: var(--navy2); }
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ag-item { border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.ag-item img { width: 100%; aspect-ratio: 370 / 230; object-fit: cover; border-radius: 4px; }
.admin-grid.contain .ag-item img { aspect-ratio: 320 / 210; object-fit: contain; background: #fff; }
.ag-no { font-size: 13px; font-weight: 700; color: var(--navy2); margin-top: 8px; }
.ag-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ag-caption { font-size: 12.5px; color: var(--ink2); margin-top: 2px; }
.ag-actions { display: flex; gap: 4px; margin-top: 8px; }
.ag-link { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ag-link input { border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.ag-link .btn { align-self: flex-start; padding: 4px 10px; font-size: 11.5px; letter-spacing: 0; }
.ag-actions .btn, .admin-actions .btn { padding: 5px 10px; font-size: 12px; letter-spacing: 0; }
.ag-actions .btn[disabled], .admin-actions .btn[disabled] { opacity: .35; cursor: default; }


/* 관리자 게시판 화면 */
.admin-card-action { float: right; }
.admin-search { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.admin-search input { flex: 0 1 280px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 14px; }
.admin-thumb-sm { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.admin-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: var(--bg-soft); color: var(--muted); font-size: 11.5px; }
.admin-chip.member { background: #eef4fb; color: var(--navy2); }
.admin-table td.subject { text-align: left; }
.admin-table td.subject a:hover { color: var(--navy2); text-decoration: underline; }
.af-check { font-weight: 400 !important; font-size: 14px; flex: none !important; }
.af-stack { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; }
/* 관리자 폼 안의 구획 구분(예: 메인 화면 카드 표시 정보) */
.admin-form .af-section { border-top: 1px solid var(--line); margin: 22px 0 14px; padding-top: 16px; }
.admin-form .af-section-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.admin-form .af-section .af-hint { display: block; line-height: 1.6; }
.af-hint { font-size: 12.5px; color: var(--muted); }
.af-thumb img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.af-attach li { padding: 3px 0; font-size: 13.5px; }
.af-attach .warn { color: #c0392b; margin-left: 6px; font-size: 12px; }
.admin-form .af-row select { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 14px; min-width: 200px; }
.admin-form .af-row input[type=date] { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; }

.admin-thumb-sm.square { aspect-ratio: 1 / 1; }
.af-thumb.square img { aspect-ratio: 1 / 1; }
.admin-table-scroll { overflow-x: auto; }
.option-form { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.option-form-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.order-status { display: flex; gap: 4px; align-items: center; }
.order-status select { border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font-size: 12px; }
/* 결제·접수 현황의 '관리' 칸: 상태 변경(1줄) + 보조 동작(2줄)로 명시적으로 나눈다.
   예전에는 한 줄에 flex-wrap 으로 흘려서 영수증 버튼이 칸을 벗어난 것처럼 보였다. */
.order-actions { flex-direction: column; align-items: stretch; gap: 6px; }
.order-actions form { margin: 0; }
.order-actions .order-status select { flex: 1 1 auto; min-width: 0; }
.order-actions .order-status .btn { flex: 0 0 auto; }
.admin-actions-sub { display: flex; gap: 6px; flex-wrap: wrap; }
/* 관리 칸 버튼은 열 폭(165px)에 맞춰 한 단계 더 조인다 — 기본 크기로는 표가 카드 밖으로 밀려났다 */
.order-actions .btn { padding: 4px 8px; font-size: 11.5px; }
.order-table .order-status select { padding: 4px; font-size: 11.5px; }
.admin-guide .warn { color: #c0392b; }
/* 결제 상태 배지: 게시판 밖(관리자 표·결과 화면)에서도 같은 모양을 갖도록 기본형을 따로 둔다 */
.badge-notice { display: inline-block; background: var(--navy2); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 3px; padding: 3px 9px; white-space: nowrap; }
/* 관리자 표: 열이 좁아 글자가 세로로 쪼개지지 않도록 최소 폭을 주고 가로 스크롤로 넘긴다.
   기존 값에서 15% 넓혔다 — 1280px 노트북(표 영역 약 1242px)에서도 가로 스크롤 없이 들어가는 상한이다. */
.admin-table-scroll .admin-table { min-width: 1242px; }
/* 결제·접수 현황은 주문번호 열을 뺀 만큼 좁다 */
.admin-table-scroll .admin-table.order-table { min-width: 1046px; }
/* 교육과정·옵션 열은 남는 폭을 가져가는 auto 열이다 — 관리 열을 165→290px 로 넓힌 만큼(125px)
   그대로 줄어 416→291px(기존의 70%)이 된다. 표 전체 폭(1046px)은 그대로다.
   여기 최소 폭이 291px 를 넘으면 표가 다시 넓어지므로 안쪽 여백(24px)을 뺀 값 아래로 둔다.
   아래 `.admin-table td.subject`(345px)가 같은 특이도로 뒤에 오므로 `.admin-table` 을 붙여 이긴다. */
.admin-table.order-table td.subject { min-width: 264px; }
/* 주문번호·TID 는 줄바꿈 지점이 없어 열을 밀어내므로 강제로 접는다 */
.admin-table td.pay-moid { word-break: break-all; }
.admin-table td.subject { min-width: 345px; }
.ao-options { margin: 6px 0 0; }
.ao-options li { font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.ao-options li span { display: inline-block; min-width: 74px; color: var(--muted); }
.ao-options li em { color: #c50250; font-style: normal; }
/* 신청 첨부(자격증 사본 등): 보기·받기 + 파일명·용량 */
.ao-file { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: 2px; }
.ao-file .btn { padding: 2px 8px; font-size: 11.5px; letter-spacing: 0; }
.ao-file .af-hint { word-break: break-all; }
.badge-notice.status-결제완료 { background: #2e7d32; }
.badge-notice.status-입금대기 { background: var(--orange); }
.badge-notice.status-결제실패, .badge-notice.status-결제취소 { background: #c0392b; }
.badge-notice.status-결제진행중, .badge-notice.status-결제중 { background: var(--muted); }

/* 주소 입력 (카카오 우편번호 API) */
.addr-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.addr-row .addr-postcode { flex: 0 1 150px; min-width: 0; }
.auth-card .addr-row .addr-search {
  flex: 0 0 auto; width: auto; margin-top: 0; padding: 0 18px; font-size: 13.5px;
  letter-spacing: 0; white-space: nowrap; display: inline-flex; align-items: center;
}
.addr-main { margin-bottom: 8px; }
.addr-main[readonly], .addr-postcode[readonly] { background: var(--bg-soft); cursor: pointer; }

@media (max-width: 992px) {
  .admin-body { display: block; }
  .admin-side-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 14px; font-weight: 700; color: var(--ink); }
  .ast-bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .ast-bars span { display: block; width: 18px; height: 2px; background: var(--navy2); border-radius: 2px; }
  .ast-cur { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
  .admin-side { position: static; max-height: none; display: none; margin-top: 8px; }
  .admin-side.open { display: block; }
  .admin-main { margin-top: 18px; }
}

@media (max-width: 768px) {
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form .af-row label { flex: 1 0 100%; }
  .admin-table thead { display: none; }
  .admin-table td { display: block; border: 0; padding: 4px 0; }
  .admin-table tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
  /* 좁은 화면에서는 표를 세로 카드로 펼치므로 가로 최소폭(1080px)이 필요 없다.
     그대로 두면 카드가 1080px 폭을 유지해 화면 밖으로 밀려난다. */
  .admin-table-scroll .admin-table,
  .admin-table-scroll .admin-table.order-table { min-width: 0; }
  .admin-table td.subject, .admin-table.order-table td.subject { min-width: 0; }
  /* 검색 폼도 한 줄을 고집하면 화면을 넘긴다 */
  .admin-search { flex-wrap: wrap; }
  .admin-search select, .admin-search input { flex: 1 1 100%; min-width: 0; }
}

/* 검색 결과 / 404 / 스텁 */
.result-note { font-size: 14px; color: var(--muted); margin: 14px 0 20px; }
.stub-box { text-align: center; padding: 90px 20px 110px; }
.stub-box h2 { font-size: 30px; }
.stub-box p { color: var(--muted); margin: 16px 0 26px; }

/* ==========================================================================
   푸터
   ========================================================================== */
/* 기존 홈페이지(aejiwon.org) 푸터 구조 그대로: 흰 배경 · 1100px · 로고 좌측 float · 좌측 정렬 정보 */
.site-footer { background: #fff; border-top: 1px solid #e5e5e5; position: relative; }
.f-inner { max-width: 1100px; margin: 0 auto; padding: 25px 20px; }
.f-inner::after { content: ''; display: block; clear: both; }
.f-logo { float: left; margin-bottom: 10px; }
/* 링크가 inline 이면 박스가 글줄 높이(18px)로 접혀 이미지보다 작아진다 → 탭 타깃 미달 */
.f-logo a { display: inline-block; }
.f-logo img { width: 180px; height: 30px; object-fit: contain; display: block; }
.f-info { margin-left: 250px; }
.f-line { font-size: 14px; line-height: 18px; color: #646464; margin: 0; }
.f-line .f-item { display: inline-block; margin-right: 18px; }
.f-line a { color: #646464; }
.f-line a:hover { text-decoration: underline; }
.f-policy { margin-top: 8px; font-size: 13px; }
.f-policy a { color: #646464; margin-right: 14px; }
.f-policy a:hover { color: var(--navy2); text-decoration: underline; }
.f-copy { margin-top: 6px; line-height: 16px; font-size: 13px; color: #9a9a9a; }
.btn-top {
  position: fixed; right: 26px; bottom: 30px; width: 40px; height: 40px; border-radius: 50%;
  background: #fcb034; color: #fff; display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 90;
}
.btn-top.show { display: inline-flex; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1200px) {
  .gnb-item > a { padding: 12px 20px; font-size: 18px; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-strip { grid-template-columns: repeat(4, 1fr); }
  .partner-marquee { width: 98%; }
}

@media (max-width: 992px) {
  .lnb { display: none; }
  .sub-wrap .inner { display: block; }
  .album-grid { grid-template-columns: repeat(3, 1fr); }
  /* 태블릿·폰 가로(769~992px): 로고+상담문의+버튼이 한 줄에 다 들어가야 한다.
     전화번호·버튼이 줄바꿈되며 겹쳐 보이던 문제 — 크기를 줄이고 간격을 좁힌다. */
  .logo img { height: 48px; }
  .logo-bar-right { gap: 14px; }
  .header-tel { gap: 6px; }
  .header-tel .tel-number { font-size: 20px; }
  .btn-my-apply { font-size: 13.5px; letter-spacing: 0; padding: 9px 14px; }
  .gnb-item > a { padding: 12px 12px; font-size: 16px; }
}

@media (max-width: 768px) {
  .util-bar, .logo-bar, .gnb-bar { display: none; }
  .m-util-bar { display: block; background: var(--navy2); color: #fff; font-size: 13px; }
  .m-util-bar ul { display: flex; justify-content: flex-end; gap: 16px; padding: 9px 16px; }
  .m-logo-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
  .m-logo img { height: 34px; width: auto; }
  .m-menu-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0; }
  .m-menu-btn span { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; }
  .m-menu-btn em { font-size: 9px; font-style: normal; color: var(--ink2); margin-top: 2px; }
  .m-my-apply { background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 4px; white-space: nowrap; }

  .home-section { padding: 48px 0; }
  .section-head h2 { font-size: 24px; }
  .facility-band { min-height: 320px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .quick-card { min-height: 180px; padding: 16px 12px; }
  .quick-card > span:first-child { padding: 9px; }
  .quick-card .q-title { font-size: 19px; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .partner-strip { padding: 22px 0; }
  .partner-marquee { width: 100%; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .partner-track { gap: 12px; animation-duration: 26s; }
  .partner-track a { min-width: 177px; height: 75px; padding: 12px 21px; }
  .partner-track img { height: 39px; }
  .album-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page-title { font-size: 21px; }
  .board-table .col-hide-m { display: none; }
  .form-table th { width: 110px; font-size: 13px; }
  .auth-card { padding: 28px 20px; }
  .apply-course-pick { grid-template-columns: 1fr; }
  .f-inner { text-align: center; }
  .f-logo { float: none; margin: 0 auto 12px; }
  .f-info { margin-left: 0; }
  .f-line { font-size: 12.5px; line-height: 1.8; }
  .f-line .f-item { margin: 0 8px; }
  .f-copy, .f-policy { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   모바일 정비 — 판정 기준을 명시해 둔다(주관 조정이 아니라 표준 수치를 맞춘 것)
     · WCAG 1.4.10 Reflow(AA)      320 CSS px 에서 정보 손실·가로 스크롤 없이
     · WCAG 2.5.8 Target Size(AA)  포인터 타깃 24×24 CSS px 이상
     · Apple HIG / Material 3      주요 컨트롤 44pt / 48dp
     · iOS Safari                  입력 글자 16px 미만이면 포커스 시 화면이 강제 확대된다
   -------------------------------------------------------------------------- */

/* 폰·태블릿 전 구간. iPad(768~834px)도 iOS Safari 라 같은 확대 규칙을 받는다. */
@media (max-width: 1024px) {
  /* 16px 미만이면 포커스 순간 화면이 확대되고 되돌아오지 않는다 → 가로 스크롤 상태에 갇힌다 */
  input[type=text], input[type=tel], input[type=email], input[type=password],
  input[type=date], input[type=number], input[type=search], select, textarea {
    font-size: 16px;
  }
  /* 체크박스·라디오는 기본 13×13 이라 24×24 미달 (WCAG 2.5.8).
     flex 컨테이너 안에서는 기본 flex-shrink 로 다시 줄어들므로 축소를 막는다. */
  input[type=checkbox], input[type=radio] { width: 24px; height: 24px; flex: none; }
  /* 라벨 전체를 누를 수 있게 해 실제 타깃을 넓힌다 */
  .form-agree-check { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
  /* 퀵메뉴 설명은 손에 든 화면에서도 읽을 수 있게 태블릿(834px iPad Pro)까지 키운다. */
  .quick-card .q-sub { font-size: 14px; }
  .lnb-head .lh-en { font-size: 12px; }
  /* 769~1024px 태블릿은 데스크톱 헤더를 손가락으로 조작한다 — 상단 검색 컨트롤을 손에 맞게 키운다.
     (768px 이하에서는 이 헤더가 숨겨지고 모바일 헤더가 대신 나온다) */
  .util-search { padding: 4px 10px; }
  .util-search input { min-height: 44px; width: 130px; }
  .util-search button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 768px) {
  /* 모바일 최상위 내비 — 27×29 였다. Apple 44pt / Material 48dp 기준으로 올린다. */
  .m-menu-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .m-my-apply { min-height: 44px; display: inline-flex; align-items: center; }
  /* 검색 상자 폭만 여기서 손본다(크기 요건은 전역 규칙에 있다).
     max-width 를 100% 로 두는 이유: 검색 결과 화면(search.ejs)의 상자에 인라인 width:360px 가 붙어 있어
     고정 상한(320px)만으로는 좁은 화면에서 부모를 넘긴다. */
  .board-search .box { width: 100%; max-width: 100%; min-width: 0; }
  /* 레거시 표는 520px 고정이라 컨테이너 안에서 가로 스크롤한다(데이터표는 1.4.10 예외).
     스크롤이 가능하다는 사실이 보이지 않아 오른쪽에 그림자 힌트를 준다. */
  .page-fragment .table_wrap {
    overscroll-behavior-x: contain;
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
      linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right / 12px 100% no-repeat scroll;
  }
}

/* 폰 세로 (Material compact, <600dp — 폰 세로의 99.96%) */
@media (max-width: 599px) {
  /* 320px 에서 제목 열이 100px 밖에 못 받아 제목이 잘렸다(번호 70 + 날짜 110 이 고정 폭).
     제목만 남겨 한 행을 다 쓰게 하고, 감춘 값은 .bt-meta 로 되살린다.
     열을 감출 뿐 <table> 구조는 그대로라 스크린리더 의미는 유지된다. */
  .board-table { table-layout: auto; }
  .board-table thead { display: none; }
  .board-table td:not(.subject) { display: none; }
  .board-table td.subject { padding: 13px 4px; }
  .board-table td.subject a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; max-width: none; min-height: 24px;
  }
  .board-table .bt-notice-m { display: inline-block; margin-right: 6px; }
  .board-table .bt-meta { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
  /* 제목이 2줄 클램프(-webkit-box)라 블록이 되어, 뒤따르는 첨부 아이콘이 홀로 한 줄을 차지한다.
     첨부 여부는 .bt-meta 안에 글자로 넣었으므로 여기서는 감춘다. */
  .board-table td.subject .ico-file { display: none; }
}