/*
 * 일반 사용자 페이지 반응형 스타일.
 * 원본 PHP 디자인은 데스크톱 고정폭(1300px, min-width 1400px)이라, 여기서 고정폭을 풀고
 *   - 992px 이상: 원래 레이아웃(왼쪽 서브메뉴 + 본문) 유지, 단 화면이 좁으면 줄어듦
 *   - 991px 이하: 서브메뉴를 위로 올려 가로 탭으로, 본문은 한 칸, 표는 가로 스크롤
 *   - 575px 이하: 글자·여백 축소, 입력 표는 라벨/입력을 세로로 쌓음
 * 페이지별 인라인 style 을 덮어써야 해서 일부 규칙에 !important 를 쓴다. 관리자 화면은 대상이 아니다(데스크톱 전용).
 * 이 파일은 menu.jspf 안에서 페이지 고유 <style> 뒤에 로드된다.
 */

/* ---------- 공통: 고정폭 해제 ---------- */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0 !important; overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; }
.container-fluid { min-width: 0 !important; }
.container { width: 100% !important; max-width: 1300px !important; }
img, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
.col, [class*="col-"] { min-width: 0; }

/* 큰 화면에서 가로로 넘치는 표/지도 등은 본문 영역 안에서 스크롤 */
.col-9 { overflow-x: auto; }

/* 서브메뉴: 글씨뿐 아니라 블록(항목 칸) 어디를 눌러도 이동하도록 링크를 항목 전체로 넓힌다 */
.submenu2 .list-group-item > a { display: block; margin: -.75rem -1.25rem; padding: .75rem 1.25rem; }

/* ---------- 태블릿·모바일 (≤ 991px) ---------- */
@media (max-width: 991.98px) {
  .container { padding-left: 15px !important; padding-right: 15px !important; }

  /* 각 페이지 head 의 hover 펼침 규칙이 터치에서 닫히지 않는 문제 방지: 열림(show) 상태일 때만 표시 */
  .dropdown:hover .dropdown-menu:not(.show) { display: none; }
  .navbar-nav .nav-link { padding: .6rem .25rem; }
  .navbar-nav .dropdown-menu { border: 0; background: #f8f9fa; }

  /* 상단 파란 배너: 절대 위치 → 일반 흐름 */
  .showscreen {
    position: static !important;
    height: auto !important;
    padding: .6rem 15px !important;
    text-align: left !important;
  }
  .showscreen > div { margin: 0 !important; padding-top: 0 !important; line-height: 1.1rem !important; }
  .showscreen span { font-size: .85rem !important; }

  /* 왼쪽 서브메뉴 → 위쪽 가로 탭 */
  .container > .row > .col-3 { flex: 0 0 100%; max-width: 100%; padding: 0; }
  .submenu2 { position: static !important; width: 100%; margin-bottom: .5rem; }
  .submenu2 > .col { height: auto !important; padding: .6rem 1rem !important; }
  .submenu2 > .col table { height: auto !important; width: auto !important; }
  .submenu2 h3 { font-size: 1.2rem; margin: 0; }
  .submenu2 h6 { margin: 0; font-size: .8rem; }
  .submenu2 .list-group { flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #dee2e6; }
  .submenu2 .list-group-item { flex: 1 1 auto; text-align: center; border: 0; padding: .6rem .9rem; white-space: nowrap; }
  .submenu2 .list-group-item > a { margin: -.6rem -.9rem; padding: .6rem .9rem; }
  .submenu2 .list-group-item.disabled { opacity: .55; }

  /* 본문 */
  .container > .row > .col-9 {
    flex: 0 0 100%; max-width: 100%;
    margin-top: 1rem !important; min-height: 0 !important;
  }

  /* 메인 페이지: 두 칸 → 세로로 */
  .container-fluid[style*="padding:2rem"] { padding: 1rem !important; }
  .container > .row > .col { flex: 0 0 100%; max-width: 100%; margin: 0 0 1rem 0 !important; overflow-x: auto; }
  .container > .row > .col[style*="padding:2.0rem"] { padding: 1rem !important; }
  .card[style*="width: 24rem"], .card[style*="width:24rem"] { width: 100% !important; max-width: 24rem; margin-left: auto; margin-right: auto; }
  table[style*="height: 379px"], table[style*="height:379px"] { height: auto !important; }
  .carousel, .carousel-inner { width: 100%; }
  .carousel-inner img { width: 100%; }
  .navbar > table { max-width: calc(100% - 70px); }
  .navbar img { max-width: 100%; }
  .navbar-toggler { margin-left: auto; }

  /* 푸터 */
  footer table, footer tbody, footer tr, footer td { display: block; width: 100% !important; text-align: left; }
  footer td { padding: .25rem 0 !important; }
  footer td div[style*="float"] { float: none !important; margin-top: .5rem; }
  footer .btn { margin-bottom: .4rem; }
}

/* ---------- 모바일 (≤ 767px) ---------- */
@media (max-width: 767.98px) {
  [style*="font-size:1.5rem"] { font-size: 1.2rem !important; }
  [style*="font-size:1.3rem"] { font-size: 1rem !important; }
  [style*="font-size:1.2rem"] { font-size: 1.05rem !important; }
  [style*="line-height:2.5rem"] { line-height: 1.9rem !important; }
  [style*="line-height:2.2rem"] { line-height: 1.9rem !important; }
  /* 인사말처럼 문장 중간을 <br> 로 끊어 둔 문단: 한 줄 바꿈은 풀고, 빈 줄(<br><br>)만 유지 */
  p[style*="line-height:2.5rem"] br { display: none; }
  p[style*="line-height:2.5rem"] br + br,
  p[style*="line-height:2.5rem"] br:has(+ br) { display: inline; }
  .table { font-size: .9rem; }
  .table td, .table th { padding: .45rem; }
  h5.col, .col > h5 { font-size: 1.05rem; }
}

/* ---------- 작은 모바일 (≤ 575px) ---------- */
@media (max-width: 575.98px) {
  .navbar img { max-height: 44px; width: auto; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .container > .row { margin-left: -12px; margin-right: -12px; }

  /* 입력 표: 라벨과 입력을 위아래로 */
  .table-stack, .table-stack thead, .table-stack tbody, .table-stack tr,
  .table-stack th, .table-stack td { display: block; width: 100% !important; }
  .table-stack th { text-align: left !important; padding-bottom: 0; border-top: 0; }
  .table-stack td { padding-top: .2rem; }
  .table-stack tr { border-top: 1px solid #dee2e6; padding: .35rem 0; }
  .table-stack input[type="text"], .table-stack input[type="tel"], .table-stack input[type="email"],
  .table-stack input[type="password"], .table-stack select, .table-stack textarea { max-width: 100%; }
  .table-stack .form-control { width: 100% !important; }
  .table-stack .form-check-inline { margin-right: .75rem; }

  /* 게시판: 부가 열 숨김 */
  .board-table .hide-xs { display: none; }
  .board-view-body { font-size: 1rem; }
  .pagination { flex-wrap: wrap; }
  .pagination .page-link { padding: .4rem .65rem; }
}

/* 인쇄할 때는 반응형 보정을 쓰지 않는다(위탁계약서 등) */
@media print {
  .showscreen, .submenu2, footer, .navbar { display: none !important; }
}

/* ---------- 기타 보정 ---------- */
@media (max-width: 991.98px) {
  #map { width: 100% !important; max-width: 930px; height: 70vw !important; min-height: 280px; max-height: 500px !important; }
  .table.mr-4.ml-4 { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- 표 → 카드 (table-cards): 좁은 화면에서 행 하나를 카드 하나로 ---------- */
@media (max-width: 767.98px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100% !important; }
  .table-cards tr { border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: .75rem; padding: .5rem .75rem; background: #fff; }
  .table-cards td { border: 0 !important; padding: .2rem 0 !important; text-align: left !important; display: flex; gap: .75rem; align-items: baseline; }
  .table-cards td[data-label]::before { content: attr(data-label); flex: 0 0 5.2rem; color: #6c757d; font-size: .85rem; }
  .table-cards td:first-child { font-size: 1.05rem; }
  .table-cards td:first-child::before { content: none; }
  .table-cards td[colspan] { display: block; text-align: center !important; }
}

/* 게시판 날짜가 두 줄로 꺾이지 않게, 푸터 들여쓰기 제거 */
.board-table td:nth-child(4), .board-table th:nth-child(4) { white-space: nowrap; }
@media (max-width: 991.98px) {
  footer table.container { padding: 0; width: 100% !important; }
}
@media (max-width: 575.98px) {
  .board-table th:first-child, .board-table td:first-child { width: 3.2rem; padding-left: .25rem; padding-right: .25rem; }
}