/* =====================================================================
   레거시 정적페이지 호환 스타일
   board/bbs/sub_*.php 의 본문을 그대로 이관했으므로, 그누보드 테마의
   유틸리티 클래스를 .page-body 안에서만 재현한다.
   (원본을 변형하지 않기 위한 호환 레이어 — 디자인 단계에서 페이지별로 걷어낸다)
   ===================================================================== */

/* ---- 본문 기본 ---- */
.page-body{font-size:15px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.page-body img{max-width:100%;height:auto}
.page-body a{color:var(--brand)}
.page-body p{margin:0 0 12px}
.page-body br+br{line-height:1.2}

/* ---- 글자 ---- */
.page-body .f-s-8{font-size:8px}
.page-body .f-s-12{font-size:12px}
.page-body .f-s-14{font-size:14px}
.page-body .f-s-16{font-size:16px}
.page-body .f-s-18{font-size:18px}
.page-body .f-s-20{font-size:20px}
.page-body .f-s-28{font-size:26px}
.page-body .bold,.page-body .f-w-600,.page-body .f-w-700{font-weight:700}
.page-body .l-h-25{line-height:25px}
.page-body .color-black{color:var(--ink)}
.page-body .color-white{color:#fff}
.page-body .color-blue{color:var(--brand-ink)}
.page-body .color-red,.page-body .red{color:#b3402a}

/* ---- 정렬 · 플로트 ---- */
.page-body .text-center{text-align:center}
.page-body .text-left{text-align:left}
.page-body .text-right{text-align:right}
.page-body .m-auto{margin-left:auto;margin-right:auto}
.page-body .pull-left{float:left}
.page-body .pull-right{float:right}
.page-body .pull-clear,.page-body .full-right{clear:both}
/* 원본이 float 뒤 clear 를 빠뜨린 곳이 있어 컨테이너에서 정리 */
.page-body .width-800::after,.page-body .width-700::after{content:"";display:block;clear:both}

/* ---- 크기 (고정폭 → 반응형 상한으로 완화) ---- */
.page-body .width-full{width:100%}
.page-body .width-200{max-width:200px;width:100%}
.page-body .width-220{max-width:220px;width:100%}
.page-body .width-300{max-width:300px;width:100%}
.page-body .width-350{max-width:350px;width:100%}
.page-body .width-400{max-width:400px;width:100%}
.page-body .width-700{max-width:700px;width:100%}
.page-body .width-800{max-width:800px;width:100%}
.page-body .height-30{height:30px}
.page-body .height-300{height:300px}

/* ---- 여백 ---- */
.page-body .p-0{padding:0}
.page-body .p-10{padding:10px}
.page-body .p-20{padding:20px}
.page-body .p-30{padding:30px}
.page-body .p-40{padding:32px 0}      /* 원본 40px 좌우 패딩은 새 레이아웃에서 불필요 */
.page-body .p-t-5{padding-top:5px}
.page-body .p-t-10{padding-top:10px}
.page-body .p-t-30{padding-top:30px}
.page-body .p-b-5{padding-bottom:5px}
.page-body .p-b-20{padding-bottom:20px}
.page-body .p-b-30{padding-bottom:30px}
.page-body .p-l-20{padding-left:20px}
.page-body .p-l-40{padding-left:32px}
.page-body .p-l-50{padding-left:40px}
.page-body .m-b-10,.page-body .mb-10{margin-bottom:10px}

/* ---- 배경 (그누보드 팔레트를 새 민트 색조에 맞춰 재현) ---- */
.page-body .bg-silver-transparent-3{background:rgba(90,125,113,.05)}
.page-body .bg-silver-transparent-7{background:rgba(90,125,113,.11)}
.page-body .bg-silver-transparent-9{background:rgba(90,125,113,.15)}
.page-body .bg-light-silver{background:var(--surface-2)}
.page-body .bg-green-50{background:#EAF7F1}
.page-body .bg-green-100{background:#D5F0E4}
.page-body .bg-green-300{background:#A8DEC4}
/* 표 머리행에 쓰이던 색들 — 본문 글자가 4.5:1 을 넘도록 옅게 깐다 */
.page-body .bg-yellow-transparent-3{background:rgba(214,168,72,.20)}
.page-body .bg-orange-transparent-2{background:rgba(200,124,52,.10)}
.page-body .bg-orange-transparent-3{background:rgba(200,124,52,.16)}
.page-body .bg-blue-transparent-3{background:rgba(60,120,175,.12)}
.page-body .bg-teal-transparent-2{background:rgba(40,140,140,.11)}
.page-body .bg-brown-transparent-6{background:rgba(150,110,80,.18)}
.page-body .bg-light-blue-500{background:#1F6FA0;color:#fff}

/* ---- 테두리 ---- */
.page-body .b-lt{border-left:1px solid var(--line);border-top:1px solid var(--line)}
.page-body .b-r{border-right:1px solid var(--line)}
.page-body .b-b,.page-body .b-b-1{border-bottom:1px solid var(--line)}
.page-body .out_line1{border:1px solid var(--line)}
.page-body .out_line2{border:2px solid var(--line)}
.page-body .box{border:1px solid var(--line);border-radius:8px}

/* ---- 표 ---- */
.page-body table{border-collapse:collapse;max-width:100%}
.page-body .table,.page-body .main,.page-body .table_group,.page-body .table_gray{width:100%}
.page-body .table td,.page-body .table th,
.page-body .main td,.page-body .main th,
.page-body .table_group td,.page-body .table_group th,
.page-body .borderd td,.page-body .borderd th{border:1px solid var(--line);padding:8px 10px;font-size:14px;line-height:1.5}
.page-body .table_group>thead,.page-body .table_gray>thead{background:var(--surface-2)}
.page-body .table_group>thead>tr>th,.page-body .table_group>tbody>tr>th{background:var(--surface-2);font-weight:600}
.page-body .table-valign-middle td,.page-body .table-valign-middle th{vertical-align:middle}
/* 넓은 표는 가로 스크롤로 (모바일에서 레이아웃이 밀리지 않게) */
.page-body .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px}

/* ---- 기타 ---- */
.page-body .hide{display:none}
.page-body .cursor-pointer{cursor:pointer}
.page-body .btn_a{display:inline-block;padding:8px 16px;border:1px solid var(--brand);border-radius:8px;
  color:var(--brand);font-size:14px;font-weight:600}
.page-body .btn_a:hover{background:var(--brand);color:#fff}

/* ---- 좁은 화면 ---- */
@media(max-width:760px){
  .page-body .pull-left,.page-body .pull-right{float:none}
  .page-body .p-l-40,.page-body .p-l-50,.page-body .p-l-20{padding-left:0}
  .page-body .p-40{padding:20px 0}
  .page-body .width-300,.page-body .width-400,.page-body .width-350{max-width:100%}
  .page-body .table td,.page-body .table th,
  .page-body .main td,.page-body .main th,
  .page-body .table_group td,.page-body .table_group th{padding:6px 7px;font-size:13px}
}