/* 게시판 스킨 — Tailwind 로 잡을 수 없는 자리만 여기서 손본다.
 *
 * 왜 CSS 파일이 따로 필요한가. 스킨 안에서 우리가 쓰는 마크업은 전부 Tailwind 로 적지만,
 * 그누보드가 **문자열로 만들어 넘겨주는 덩어리**는 우리가 클래스를 붙일 수 없다 —
 * 페이징(`$write_pages`), 분류 목록(`$category_option`), 검색어 강조(`search_font`),
 * 글쓰기 옵션 체크박스(`$option`), 임시저장 창, 그리고 에디터로 쓴 본문이 그렇다.
 * 그것들만 여기서 잡는다.
 *
 * 싣는 순서 — 그누보드 `css/default.css`(먼저) → 이 파일(add_stylesheet 0) →
 * 우리 `assets/css/app.css`(9). 그래서 이 파일은 default.css 를 이기고,
 * 우리가 스킨에 직접 적은 Tailwind 클래스는 이 파일을 이긴다. 순서를 뒤집지 말 것.
 *
 * 색은 `php/src/app.css` 의 팔레트 값을 그대로 적어 둔다. Tailwind v4 는 쓰이지 않는
 * 테마 변수를 결과물에서 빼기 때문에 var(--color-…) 로 참조하면 빈 값이 될 수 있다.
 *   ink-100 #e2e6ec · ink-200 #c7d0de · ink-300 #9fb0c9 · ink-400 #5a6d8e
 *   ink-600 #2a4b7c · ink-700 #1e3e6b · ink-800 #12294a · ink-900 #0a1729
 *   pink-50 #fdf4f6 · pink-100 #f9dee3 · pink-200 #f2c2cc · pink-600 #a34e66
 *   rose-500 #b8465f · cream #fbf9f8 · ink-50 #f5f7fa
 * 읽는 글자는 파란기를 뺀 중성색을 쓴다(2026-08-18) —
 *   본문 #14181e · 보조 #545c68. ink 계열 남색은 제목·버튼·배지에만 쓴다.
 */

/* ── 분류 (게시판 목록 위의 칩) ────────────────────────────────
   `$category_option` 은 <li><a>…</a></li> 만 준다. 선택된 항목에는
   그누보드가 id="bo_cate_on" 을 박아 준다 — 그것으로 현재 분류를 표시한다. */
.jj-cate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jj-cate li { list-style: none; }
.jj-cate a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid #e2e6ec;
  border-radius: 9999px;
  background: #fff;
  color: #14181e;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.jj-cate a:hover { border-color: #9fb0c9; background: #f5f7fa; }
.jj-cate a#bo_cate_on {
  background: #12294a;
  border-color: #12294a;
  color: #fff;
}

/* ── 페이징 ────────────────────────────────────────────────────
   default.css 의 `.pg_wrap` 은 float:left 다. 그대로 두면 다음 블록이 옆으로 붙는다.
   「처음·이전·다음·맨끝」은 기본 스킨에서 배경 그림에 text-indent:-999px 로 글자를
   숨기는데, 회색 화살표 그림이 우리 화면과 안 어울려서 글자를 되살린다. */
.jj-paging .pg_wrap { float: none; clear: both; display: block; }
.jj-paging .pg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}
.jj-paging .pg_page,
.jj-paging .pg_current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 1px solid #e2e6ec;
  border-radius: 9999px;
  background: #fff;
  color: #14181e;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  text-indent: 0;
  overflow: visible;
  background-image: none;
}
.jj-paging .pg_page:hover { border-color: #9fb0c9; background: #f5f7fa; }
.jj-paging .pg_current {
  background: #12294a;
  border-color: #12294a;
  color: #fff;
  font-weight: 700;
}

/* ── 검색어 강조 ───────────────────────────────────────────────
   default.css 는 형광 분홍(#ff005a) 바탕을 깐다. 우리 액센트로 바꾼다. */
.sch_word {
  margin: 0 1px;
  padding: 1px 3px;
  border-radius: 3px;
  background: #f9dee3;
  color: #a34e66;
  line-height: inherit;
}

/* ── 정렬 링크 ─────────────────────────────────────────────────
   `subject_sort_link()` 는 여는 <a> 태그만 돌려주므로 클래스를 붙일 자리가 없다. */
.jj-sort a {
  color: #545c68;
  font-size: 0.9375rem;
  text-decoration: none;
}
.jj-sort a:hover { color: #12294a; text-decoration: underline; text-underline-offset: 2px; }

/* ── 본문 (에디터로 쓴 글) ─────────────────────────────────────
   회원이 쓴 HTML 에는 클래스가 없다. Tailwind preflight 가 여백과 목록 표시를
   전부 지워 놓기 때문에, 글 본문에서는 그것을 되돌려 놔야 읽을 수 있다.
   글자 크기는 14px 아래로 내리지 않는다. */
.jj-prose {
  color: #14181e;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.jj-prose > :first-child { margin-top: 0; }
.jj-prose > :last-child { margin-bottom: 0; }
/* ⚠ 한 줄이 68자까지 늘어났다. 한글은 35~45자가 읽기 좋다.
   긴 글일수록 이게 크게 작용한다. 문단과 목록만 좁힌다 — 표와 그림은 그대로 둔다. */
.jj-prose p,
.jj-prose li { max-width: 46em; }
.jj-prose p { margin: 0 0 1.1em; }
.jj-prose br + br { line-height: 1.4; }
.jj-prose a {
  color: #a34e66;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.jj-prose strong, .jj-prose b { font-weight: 700; }
.jj-prose em, .jj-prose i { font-style: italic; }
.jj-prose ul { list-style: disc; margin: 0 0 1.1em; padding-left: 1.4em; }
.jj-prose ol { list-style: decimal; margin: 0 0 1.1em; padding-left: 1.4em; }
.jj-prose li { display: list-item; margin: 0.3em 0; }
.jj-prose h1, .jj-prose h2, .jj-prose h3, .jj-prose h4 {
  margin: 1.7em 0 0.6em;
  font-weight: 700;
  line-height: 1.35;
  color: #0a1729;
}
.jj-prose h1 { font-size: 1.45rem; }
.jj-prose h2 { font-size: 1.3rem; }
/* 소제목은 강조색으로만 구분한다. 왼쪽 세로줄은 넣지 않는다(2026-08-21 지시).
   긴 글에서 「어느 발급처 이야기인지」를 눈으로 훑을 수 있어야 한다. */
.jj-prose h3 { font-size: 1.15rem; color: #b03a5b; }
.jj-prose h4 { font-size: 1.05rem; }
.jj-prose blockquote {
  margin: 0 0 1.1em;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #f2c2cc;
  border-radius: 0.5rem;
  background: #fdf4f6;
  color: #14181e;
}
.jj-prose img, .jj-prose video, .jj-prose iframe, .jj-prose embed {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
.jj-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.1em;
  border-collapse: collapse;
  overflow-x: auto;
  font-size: 0.95rem;
}
.jj-prose th, .jj-prose td { padding: 0.5rem 0.7rem; border: 1px solid #e2e6ec; }
.jj-prose th { background: #f5f7fa; font-weight: 700; }
/* 단락이 바뀌는 자리를 눈으로 알아볼 수 있게 한다(2026-08-21 지시).
   긴 글에서는 이 선이 유일한 쉼표다.

   ⚠ **그누보드 기본 CSS(default.css)가 `hr { display: none }` 으로 숨긴다.**
     우리 style.css 가 뒤에 실려도 `display` 를 다시 켜 주지 않으면 안 보인다.
     실제로 본문에 <hr> 이 14개 들어가 있는데도 화면에는 한 줄도 안 나왔다.
   ⚠ 색도 #e2e6ec 은 흰 바탕에서 거의 안 보인다. 한 단계 진하게 둔다. */
.jj-prose hr {
  display: block;
  height: 0;
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid #ccd4de;
}
.jj-prose pre {
  margin: 0 0 1.1em;
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
  background: #f5f7fa;
  overflow-x: auto;
  font-size: 0.95rem;
}

/* ── 글 안의 상자 ──────────────────────────────────────────────
   글쓴이가 본문에 `[요약] … [/요약]`, `[주의] … [/주의]` 로 적으면
   view.skin.php 가 이 상자로 바꿔 준다. 에디터로는 못 만드는 모양이라 이렇게 둔다.

   요약은 맨 위에 온다. 손님은 전문을 안 읽고 여기서 갈지 말지 정한다 —
   그래서 줄간격을 본문보다 좁히고 항목이 눈에 한 번에 들어오게 한다. */
/* 회색 라운드 상자는 걷어냈다 (2026-08-18). 어디서나 보는 모양이라는 지적이 맞고,
   여기서 요약이 하는 일은 「예쁜 강조」가 아니라 금액·시간을 **표처럼 확인시키는 것**이다.
   그래서 배경을 없애고 줄만 남긴다 — 비용 안내 화면의 표와 결이 같아진다. */
.jj-prose .jj-sum {
  margin: 0 0 1.5em;
  padding: 0.2rem 0 0.9rem;
  border: 0;
  border-top: 2px solid #14181e;      /* 표의 머리선 */
  border-bottom: 1px solid #c7d0de;
  border-radius: 0;
  background: none;
  line-height: 1.65;
}
.jj-prose .jj-sum p {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.62rem 0.1rem;
  border-bottom: 1px solid #e2e6ec;
}
.jj-prose .jj-sum p:last-child { border-bottom: 0; }
.jj-prose .jj-sum ul { margin: 0.3em 0; padding-left: 1.2em; }
.jj-prose .jj-sum li { margin: 0.25em 0; }
.jj-prose .jj-sum strong { color: #0a1729; }
/* 「걸리는 시간 | 3시간 반」의 앞쪽. 라벨은 흐리게 둬서 값이 먼저 읽히게 한다 */
.jj-prose .jj-sum .lb {
  flex: 0 0 7rem;
  color: #6b7482;
  font-weight: 600;
  font-size: 0.94em;
}
/* 좁은 화면에서는 라벨 칸을 고집하면 값이 두세 글자씩 끊긴다. 위아래로 쌓는다. */
@media (max-width: 30rem) {
  .jj-prose .jj-sum p { flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.1rem; }
  .jj-prose .jj-sum .lb { flex: none; }
}

/* 주의 상자도 같은 결로. 분홍 바탕을 빼고 선만 남긴다 */
.jj-prose .jj-warn {
  margin: 0 0 1.3em;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border: 0;
  border-left: 3px solid #cc5c76;
  border-radius: 0;
  background: none;
}
.jj-prose .jj-warn p { margin: 0.35em 0; }
.jj-prose .jj-warn strong { color: #a34e66; }

/* 댓글 본문. 본문보다 한 단계 작지만 14px 아래로는 내리지 않는다. */
.jj-cmt-body { color: #14181e; font-size: 0.975rem; line-height: 1.75; }
.jj-cmt-body p { margin: 0 0 0.7em; }
.jj-cmt-body > :last-child { margin-bottom: 0; }
.jj-cmt-body a { color: #a34e66; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.jj-cmt-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }
/* 「댓글내용 확인」 — 비밀 댓글을 여는 링크 */
.jj-cmt-body a.s_cmt {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid #e2e6ec;
  border-radius: 9999px;
  background: #fff;
  color: #14181e;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ── 글쓰기 옵션 체크박스 ──────────────────────────────────────
   `$option` 문자열이 <li class="chk_box"><input><label><span></span>공지</label> 형태다.
   빈 <span>은 기본 스킨이 그림 체크박스를 넣던 자리라 우리는 감춘다. */
.jj-opt { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.jj-opt li { display: inline-flex; align-items: center; gap: 0.45rem; }
.jj-opt label { display: inline-flex; align-items: center; color: #14181e; font-size: 0.95rem; cursor: pointer; }
.jj-opt label span { display: none; }
.jj-opt input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #b8465f; }

/* ── 에디터 자리 ───────────────────────────────────────────────
   에디터를 안 쓰는 게시판에서는 맨 textarea 가 그대로 나온다. 그 경우만 손본다
   (에디터를 쓰면 자기 마크업을 만들어 넣으므로 직계 자식 선택자에 걸리지 않는다). */
.jj-editor > textarea {
  width: 100%;
  min-height: 20rem;
  padding: 1rem;
  border: 1px solid #c7d0de;
  border-radius: 0.75rem;
  background: #fff;
  color: #0a1729;
  font: inherit;
  line-height: 1.8;
}
.jj-editor > textarea:focus { outline: none; border-color: #e9a0ae; box-shadow: 0 0 0 3px #f9dee3; }
/* 에디터가 만든 iframe·표가 좁은 화면에서 밖으로 나가지 않게 */
.jj-editor iframe, .jj-editor table { max-width: 100%; }

/* ── 임시 저장된 글 ────────────────────────────────────────────
   autosave.js 가 이 창을 열고 닫는다. 기본은 닫힘이어야 한다. */
.jj-autosave { position: relative; }
#autosave_pop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  width: min(22rem, calc(100vw - 3rem));
  padding: 1rem 1.1rem;
  border: 1px solid #e2e6ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(10, 23, 41, 0.12);
  text-align: left;
}
#autosave_pop strong { display: block; margin-bottom: 0.6rem; color: #0a1729; font-size: 0.95rem; }
#autosave_pop ul { margin: 0 0 0.6rem; padding: 0; list-style: none; max-height: 14rem; overflow-y: auto; }
#autosave_pop li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid #f5f7fa; font-size: 0.9375rem; }
#autosave_pop li a { color: #14181e; text-decoration: none; }
#autosave_pop li a:hover { text-decoration: underline; }
#autosave_pop .autosave_close,
#autosave_pop .autosave_del {
  padding: 0.3rem 0.7rem;
  border: 1px solid #e2e6ec;
  border-radius: 9999px;
  background: #fff;
  color: #545c68;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ── 자동등록방지 ──────────────────────────────────────────────
   캡차는 플러그인이 만든 마크업이다. 자리만 잡아 준다. */
.jj-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.jj-captcha #captcha_key {
  height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid #c7d0de;
  border-radius: 0.75rem;
  font: inherit;
}
.jj-captcha #captcha_mp3, .jj-captcha #captcha_reload {
  padding: 0.45rem 0.8rem;
  border: 1px solid #e2e6ec;
  border-radius: 9999px;
  background: #fff;
  color: #14181e;
  font-size: 0.9rem;
  cursor: pointer;
}
.jj-captcha #captcha_info { width: 100%; color: #545c68; font-size: 0.9rem; }

/* ── 이름 옆 사이드뷰 ──────────────────────────────────────────
   글쓴이 이름을 누르면 그누보드가 작은 메뉴를 띄운다(default.css 가 그린다).
   우리 화면에서 글자색만 맞춰 준다. */
.sv_member, .sv_guest { color: #545c68; }
.sv_wrap .sv { z-index: 40; }