@charset "utf-8";
/* ==========================================================================
   goldensalt 테마 지원 스타일시트
   대부분의 디자인은 Tailwind CDN 유틸리티 클래스로 처리하며, 이 파일은
   유틸리티만으로 표현하기 어려운 아주 작은 부분만 보완합니다.
   ========================================================================== */

/* 게시글 본문(에디터로 작성한 내용)의 기본 태그 스타일 — Tailwind는 원본 태그를
   자동으로 꾸며주지 않으므로 최소한의 가독성만 보정합니다. */
#bo_v_con, .gs-desc { line-height: 1.85; }
#bo_v_con ul, .gs-desc ul { list-style: disc; padding-left: 20px; margin: 10px 0; }
#bo_v_con ol, .gs-desc ol { list-style: decimal; padding-left: 22px; margin: 10px 0; }
#bo_v_con li, .gs-desc li { margin-bottom: 4px; }
#bo_v_con a, .gs-desc a { color: #0B6E90; text-decoration: underline; }
/* ------------------------------------------------------------------
   상세 설명 안의 이미지 정렬 (2026-09-22 수정)

   Tailwind 리셋이 모든 img를 display:block 으로 바꿔버리기 때문에, 에디터에서
   지정한 정렬(<p style="text-align:...">)이 이미지에는 먹지 않고 전부 왼쪽에
   붙습니다. 그래서 여기서 직접 정렬을 처리합니다.

     · 에디터에서 누른 정렬(왼쪽/가운데/오른쪽)을 그대로 따릅니다
     · 정렬을 지정하지 않으면 문단 기본값인 왼쪽입니다
       (에디터는 "왼쪽 정렬"을 기본값이라 아예 표시하지 않는 경우가 많아서,
        '지정 안 함'과 '왼쪽'을 HTML만으로는 구분할 수 없습니다. 그래서
        기본값을 가운데로 두면 왼쪽 정렬이 영영 안 먹습니다.)
     · 크기          : 에디터에서 조절한 폭은 그대로 존중하고,
                       화면을 넘칠 때만 max-width로 줄입니다
                       (height는 auto로 덮어써야 모바일에서 안 찌그러집니다)
   ------------------------------------------------------------------ */
#bo_v_con img, .gs-desc img {
    /* (2026-09-22) 세 번째 시도.
       1차: display:block + margin:auto (항상 가운데) -> 에디터가 지정한 왼쪽/오른쪽
            정렬을 무시하게 됨.
       2차: display:inline-block 으로 문단의 text-align을 따라가게 함 -> 왼쪽 정렬은
            해결됐지만, 이미지 여러 장이 한 문단(또는 wrapper 없이) 연달아 있으면
            글자처럼 옆으로 나란히 붙어버림 (지금 겪으신 문제).
       이번 방식: 이미지는 항상 display:block 으로 한 줄에 한 장씩 세로로 쌓되,
       가운데/오른쪽 정렬은 감싸는 문단에 그 정렬이 "명시적으로" 붙어 있을 때만
       따라갑니다. 아무 정렬도 지정하지 않은 경우(=에디터 기본값인 왼쪽)는
       margin을 auto로 두지 않아서 왼쪽에 그대로 남습니다. */
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 14px 0;
    border-radius: 12px;
}
/* 감싸는 문단에 가운데/오른쪽 정렬이 명시돼 있을 때만 이미지도 그쪽으로 */
#bo_v_con [style*="text-align:center"] img, #bo_v_con [style*="text-align: center"] img,
.gs-desc [style*="text-align:center"] img,  .gs-desc [style*="text-align: center"] img,
#bo_v_con [align="center"] img,             .gs-desc [align="center"] img {
    margin-left: auto;
    margin-right: auto;
}
#bo_v_con [style*="text-align:right"] img, #bo_v_con [style*="text-align: right"] img,
.gs-desc [style*="text-align:right"] img,  .gs-desc [style*="text-align: right"] img,
#bo_v_con [align="right"] img,             .gs-desc [align="right"] img {
    margin-left: auto;
    margin-right: 0;
}
/* 이미지를 감싸는 부모(div 등)에 style="display:flex" / "display:grid" 같은 인라인
   스타일이 붙어 있으면 그 안의 내용이 옆으로 나열됩니다. 외부에서 복사해 온 내용에
   딸려오는 경우라 세로 블록으로 되돌립니다. */
#bo_v_con [style*="flex"]:not(img), .gs-desc [style*="flex"]:not(img),
#bo_v_con [style*="grid"]:not(img), .gs-desc [style*="grid"]:not(img) {
    display: block !important;
    width: auto !important;
}

/* (2026-09-22) 에디터가 "plain(리치에디터 없음)" 모드일 때 내용이 폭 좁은 <textarea>나
   <pre>로 그대로 저장/출력되면서, 상세페이지 "상세 설명" 영역이 줄바꿈 없이 좁은 박스
   안에 스크롤로 갇혀 보이는 문제 보정. 안에 뭐가 들어있든 부모 폭 100%를 채우고
   자동으로 줄바꿈되게 강제합니다. (관리자 환경설정에서 CKEditor 등으로 에디터를 바꾸면
   애초에 이 문제 자체가 안 생깁니다.) */
#bo_v_con, .gs-desc { max-width: 100%; overflow-x: hidden; }
#bo_v_con textarea, .gs-desc textarea,
#bo_v_con pre, .gs-desc pre,
#bo_v_con code, .gs-desc code {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
    resize: none !important;
}
#bo_v_con table, .gs-desc table { max-width: 100%; }

/* 채팅창 등 외부에서 복사한 텍스트를 그대로 붙여넣으면, 원본에 딸려있던
   고정폭·스크롤 인라인 스타일(style="width:...; overflow:auto" 등)이 그대로
   저장되는 경우가 있습니다. 어떤 태그든 상관없이 폭/줄바꿈만큼은 항상
   이 값으로 덮어써서, 인라인 스타일이 있어도 좁은 스크롤 박스가 되지
   않게 막습니다. */
#bo_v_con [style]:not(img), .gs-desc [style]:not(img) {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
}

/* 목록 검색 오버레이 : Tailwind의 hidden 유틸리티로 열고 닫습니다 */
.bo_sch_bg { background: rgba(6,50,64,.45); }

/* 상세보기/댓글 더보기 팝업 그림자 (Tailwind shadow 유틸이 안 닿는 절대위치 요소) */
.more_opt { box-shadow: 0 10px 30px rgba(6,50,64,.18); }

/* ==========================================================================
   회원가입/로그인/아이디,비밀번호 찾기 등 그누보드 "코어" 페이지 보정
   이 테마는 게시판(목록/보기/글쓰기)과 메인 화면만 Tailwind 클래스로 직접
   꾸몄고, register.php 등 코어 화면은 그누보드가 만드는 원본 HTML을 그대로
   씁니다. Tailwind CDN의 reset(preflight)이 브라우저 기본 스타일까지 지워
   버려서 이 원본 HTML이 더 휑하게 보이는 문제를 아래 규칙으로 보정합니다.

   안전장치: 아래 선택자는 전부 :not([class]) 를 붙인 태그 선택자입니다.
   테마가 직접 만든 화면(게시판, 메인, 회원 화면 전체)은 모든
   table/input/select/textarea/button에 class를 지정해 두었으므로
   (실제로 전수 확인함) 이 규칙은 class가 없는, 즉 그누보드 코어가
   그대로 출력한 요소에만 적용되고 테마 자체 디자인은 절대 건드리지
   않습니다.

   주의: frm_input / btn_submit / btn_confirm 같은 그누보드 레거시
   클래스명을 직접 겨냥하는 선택자는 절대 추가하지 마세요 — 테마의
   회원 화면(skin/member/basic)이 같은 클래스명을 Tailwind 클래스와
   함께 쓰고 있어서, 그런 규칙은 의도치 않게 테마 자체 버튼/입력창
   스타일을 덮어써 버립니다 (실제로 이 문제로 버튼이 깨진 적 있음). */

table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  font-size: 14px;
}
table:not([class]) caption { display: none; }
th:not([class]), td:not([class]) {
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
th:not([class]) {
  background: #f7fafc;
  color: #0B6E90;
  font-weight: 600;
  white-space: nowrap;
}

input:not([class])[type="text"], input:not([class])[type="password"],
input:not([class])[type="email"], input:not([class])[type="tel"],
input:not([class])[type="number"], input:not([class])[type="search"],
input:not([class])[type="date"], input:not([class])[type="url"],
select:not([class]), textarea:not([class]) {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
input:not([class]):focus, select:not([class]):focus, textarea:not([class]):focus {
  outline: none;
  border-color: #0B6E90;
  box-shadow: 0 0 0 2px rgba(11,110,144,.15);
}

input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  accent-color: #C99A3D;
}

label { cursor: pointer; }

button:not([class]),
input:not([class])[type="submit"],
input:not([class])[type="button"] {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid #0B6E90;
  background: #0B6E90;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
button:not([class]):hover,
input:not([class])[type="submit"]:hover {
  opacity: .9;
}

/* 캡차 줄바꿈 보정 */
#captcha { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }