/* support/board-notice-read.html — 공지사항 상세 전용 보정
 *
 * 셸(1080/1078 고정폭 2단 + quirks padding + 반응형 리플로우) 보정은
 * 같은 스킨을 쓰는 목록(support-board-notice-list.css)에서 계승했다.
 *
 * 원본(U_BP_list_0001.php?BOARD=notice)은 width="1080"/"1078"/"98%" 고정 테이블 레이아웃이다.
 * 원본 CSS(front.css)는 그대로 두고, 폭 제약만 푸는 보정을 얹는다.
 */

/* 게시글 0건(협의 미이식)으로 본문 열의 콘텐츠 폭이 사라져,
 * 테이블 auto 레이아웃이 좌측 카테고리 열(228px)에 남는 폭을 몰아준다.
 * 원본(글 2건)에서는 좌측 228 / 구분 1 / 본문 나머지 였다 — 그 비율을 고정한다.
 * (수치는 원본 td 의 width 속성값 그대로) */
@media screen and (min-width: 1081px) {
  #content table[width="1078"] {
    table-layout: fixed;
  }

  #content table[width="1078"] > tbody > tr > td[width="228"] {
    width: 228px;
  }

  #content table[width="1078"] > tbody > tr > td[width="1"] {
    width: 1px;
  }
}

/* 원본 quirks 모드(BackCompat, doctype 없음) 의 단위 없는 padding 복원.
 *
 * 원본 인라인 style="padding:10" 은 단위가 없어 표준모드에서는 무효 선언으로 버려진다.
 * 원본은 doctype 이 없어 quirks 로 렌더되므로 10 을 10px 로 해석한다 —
 * 미러 원본 브라우저 실측: 이 행 padTop/padBottom = 10px, 행 높이 20px.
 * 우리 산출물은 doctype 이 있어 표준모드라 padding 0 · 행 높이 0 으로 무너져,
 * 배너 아래 여백이 통째로 사라지고 목록/검색이 통으로 위로 끌려올라갔다
 * (정답샷 대비 '다른 게시판으로 이동' 줄이 16px 위 — 이하 전 블록 약 10px 상승).
 * 수치는 추정이 아니라 원본 computed 실측값 그대로다. */
#content table[width="98%"] > tbody > tr > td.td01[style*="padding:10"] {
  padding: 10px;
}

/* ------------------------------------------------------------------
 * 반응형 리플로우 (R3) — 1080 고정폭 2단을 좁은 폭에서 단일열로
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  /* 바깥 고정폭 테이블들을 유동으로 */
  #content table[width="1080"],
  #content table[width="1078"] {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  /* 2단 행(좌측 카테고리 + 구분선 + 본문)을 단일열로 스택 */
  #content table[width="1078"] > tbody,
  #content table[width="1078"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content table[width="1078"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }

  /* 좌측 카테고리 열은 원본 폭(228)을 넘지 않게 가운데 정렬 */
  #content table[width="1078"] > tbody > tr > td[width="228"] {
    max-width: 228px;
    margin: 0 auto;
  }

  /* 1px 세로 구분선은 단일열에서 의미가 없다 */
  #content table[width="1078"] > tbody > tr > td[width="1"] {
    display: none;
  }

  /* size="80" 고정폭 검색 입력이 넘친다 */
  .sinput {
    width: 100%;
    box-sizing: border-box;
  }

  /* 카테고리 hover 레이어(#CA_SUB_MENU)는 visibility:hidden 이어도
   * absolute 폭이 문서 스크롤폭을 늘린다 — 좁은 폭에선 레이아웃에서 뺀다.
   * (원본 hover 레이어는 포인터가 있는 화면 전용 동작) */
  #content [id="CA_SUB_MENU"] {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  /* 목록 헤더의 고정 컬럼폭을 유동으로 (원본 값: 39/540/109/79/59) */
  #content table td[width="39"],
  #content table td[width="540"],
  #content table td[width="109"],
  #content table td[width="79"],
  #content table td[width="59"] {
    width: auto;
  }

  /* '다른 게시판으로 이동' 줄이 좁은 폭에서 넘친다 */
  .grs_admin2 td[width="140"] {
    width: auto;
  }

  .grs_admin2,
  .phone_s {
    max-width: 100%;
  }

  /* 검색 영역 셀렉트/입력 줄바꿈 허용 */
  .tds,
  .phone_k {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* 폰: 게시판 리스트 표(5열)가 폭 넘으면 표 안에서 가로 스크롤 → 페이지 넘침 방지 (2026-08-21) */
  table[width="98%"] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

@media (max-width: 1080px) {
  /* 게시판 입력/미디어 폭 제한 (2026-08-21) */
  input, select, textarea, iframe, embed, object { max-width: 100% !important; box-sizing: border-box; }
  td[width="540"] { width: auto !important; }
}

/* ------------------------------------------------------------------
 * 상세 전용 (2026-08-27 board-notice read 보강 — R13 v0.4 예외 1)
 * ------------------------------------------------------------------ */

/* 3상태(로딩/없음/에러) — 목록과 동일 규격 */
.board-state td {
  border-bottom: 1px solid #dddddd;
  color: #666666;
}

/* 본문 컨테이너(패딩·줄간격·표/이미지 리셋)는 css/pages/board-read-common.css 의
 * .board-read-content 로 승격했다(MIG-36600) — 여기서 중복 정의하지 않는다.
 *
 * 태그 / 커스텀필드 / 첨부 — 한 줄에 여러 항목이 나열된다 */
.board-tags .board-tag,
.board-fields .board-field {
  display: inline-block;
  margin: 0 10px 0 0;
}

.board-files .board-file {
  display: block;
  margin: 4px 0;
  text-decoration: none;
  color: inherit;
}

.board-files .board-file:hover {
  text-decoration: underline;
}

/* 목록으로 버튼 — 원본에 상세 버튼 이미지가 없어 텍스트 링크로 둔다 */
.board-list-link {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid #aaaaaa;
  background: #f7f7f7;
  color: #666666;
  text-decoration: none;
}

.board-list-link:hover {
  background: #eeeeee;
}