/* unduck — 커뮤니티 게시판 스킨
   이 파일은 포털 본문 패널(.xex-panel) 안에 들어간다. 색은 xex-brand.css 의 --xex-* 토큰을
   그대로 끌어 쓰고 여기서 새 색을 만들지 않는다. 토큰이 아직 안 실린 화면을 대비해 뒤에 같은
   값의 기본값만 적어 둔다.
   밀도는 국내 커뮤니티 게시판 기준이다 — 작은 섹션 머리, 1px 선, 좁은 여백.
   한국어가 낱말 중간에서 끊기는 문제 때문에 뿌리에 word-break: keep-all 을 건다. */

:root {
  --rh-surface: var(--xex-surface, #FFF9EE);
  --rh-canvas: var(--xex-canvas, #FFF9EE);
  --rh-line: var(--xex-line, #146B43);
  --rh-line-strong: var(--xex-line-strong, #146B43);
  --rh-text: var(--xex-ink, #146B43);
  --rh-muted: var(--xex-ink-soft, #146B43);
  --rh-red: var(--xex-red, #F27A00);
  --rh-red-dark: var(--xex-red-dim, #146B43);
  --rh-radius: var(--xex-radius, 2px);
  /* 공지 행 바탕. 붉은색을 아주 옅게 깐 것이라 3색 밖으로 나가지 않는다. */
  --rh-tint: #FFF9EE;
  --rh-bg: var(--rh-canvas);
}

.redhands-board {
  max-width: 100%;
  margin: 0;
  color: var(--rh-text);
  font-family: var(--xex-font, "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size:15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.redhands-board * { box-sizing: border-box; }
.redhands-board a { color: inherit; text-decoration: none; }
.redhands-board button,
.redhands-board input,
.redhands-board select { font: inherit; }

/* ---------------------------------------------------------- 게시판 머리
   브랜드 한 줄 + 게시판 이름 한 줄. 한 덩어리로 쓰면 '가이' / '드' 처럼 낱말이 잘린다. */

.redhands-board__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 7px 9px 8px;
  border: 1px solid var(--rh-line);
  border-left: 3px solid var(--rh-red);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}
.redhands-board__head-title { min-width: 0; }
.redhands-board__head span {
  display: block;
  color: var(--rh-red);
  font-size:15px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.4;
  white-space: nowrap;
}
.redhands-board__head h1 {
  margin: 1px 0 0;
  font-size:clamp(15px, 1.5vw, 18px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.redhands-board__head p {
  margin: 3px 0 0;
  color: var(--rh-muted);
  font-size:15px;
  line-height: 1.5;
}
.redhands-board__head-actions,
.redhands-board__tools,
.redhands-read footer,
.redhands-comment footer,
.redhands-write__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.redhands-board__head-actions { flex: 0 0 auto; justify-content: flex-end; }
.redhands-board__admin-copy {
  margin: 0 0 8px;
  color: var(--rh-muted);
  font-size:15px;
}

/* ---------------------------------------------------------- 버튼
   버튼 안 글자는 절대 줄바꿈하지 않는다. '로그인 / 후 글쓰 / 기' 로 쪼개지던 자리다. */

.redhands-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--rh-line-strong);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  color: var(--rh-text);
  font-size:15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.redhands-button:hover { border-color: var(--rh-text); background: var(--rh-text); color: #FFF9EE; }
.redhands-button.is-primary { border-color: var(--rh-red); background: var(--rh-red); color: #FFF9EE; }
.redhands-button.is-primary:hover { border-color: var(--rh-red-dark); background: var(--rh-red-dark); color: #FFF9EE; }

/* ---------------------------------------------------------- 분류·태그·추천인 칩 */

.redhands-board__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  padding: 6px 7px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}
.redhands-board__categories a {
  padding: 3px 8px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  color: var(--rh-muted);
  font-size:15px;
  white-space: nowrap;
}
.redhands-board__categories a:hover { border-color: var(--rh-red); color: var(--rh-red); }
.redhands-board__categories a.is-active {
  border-color: var(--rh-red);
  background: var(--rh-red);
  color: #FFF9EE;
  font-weight: 700;
}
/* 태그 목록은 쓰인 횟수만큼 크기를 준다. */
.redhands-board__categories a.rank1 { font-size:15px; font-weight: 800; color: var(--rh-red); }
.redhands-board__categories a.rank2 { font-size:15px; font-weight: 700; }
.redhands-board__categories a.rank3 { font-size:15px; }
.redhands-board__categories a.rank4 { font-size:15px; }

/* ---------------------------------------------------------- 글 목록 */

.redhands-board__list {
  overflow: hidden;
  border: 1px solid var(--rh-line);
  border-top: 2px solid var(--rh-text);
  border-radius: 0;
  background: var(--rh-surface);
}
.redhands-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 92px 76px 58px 58px;
  align-items: center;
  min-height: 31px;
  border-top: 1px solid var(--rh-line);
  font-size:15px;
}
.redhands-row:first-child { border-top: 0; }
.redhands-row:hover { background: var(--rh-canvas); }
.redhands-row.is-notice { background: var(--rh-tint); }
.redhands-row > * {
  min-width: 0;
  padding: 4px 6px;
  color: var(--rh-muted);
  text-align: center;
}
.redhands-row__type { font-size:15px; font-variant-numeric: tabular-nums; }
.redhands-row.is-notice .redhands-row__type { color: var(--rh-red); font-weight: 800; }
.redhands-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
  text-align: left !important;
}
.redhands-row__title img {
  flex: 0 0 auto;
  width: 36px;
  height: 26px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  object-fit: cover;
}
.redhands-row__title > a {
  overflow: hidden;
  color: var(--rh-text);
  font-size:15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.redhands-row__title > a:hover { color: var(--rh-red); text-decoration: underline; }
.redhands-row__title em {
  flex: 0 0 auto;
  color: var(--rh-red);
  font-size:15px;
  font-style: normal;
  font-weight: 700;
}
.redhands-row__author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redhands-row__author a { color: var(--rh-text); }
.redhands-row__author a:hover { color: var(--rh-red); }
.redhands-row time { font-variant-numeric: tabular-nums; }
.redhands-row__category {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--rh-line-strong);
  border-radius: var(--rh-radius);
  color: var(--rh-muted);
  font-size:15px;
  font-weight: 700;
  white-space: nowrap;
}
.redhands-board__empty {
  padding: 34px 16px;
  color: var(--rh-muted);
  font-size:15px;
  text-align: center;
}

/* ---------------------------------------------------------- 목록 아래 도구 줄 */

.redhands-board__tools { margin-top: 8px; }
.redhands-board__search {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.redhands-board__search input,
.redhands-board__search select {
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--rh-line-strong);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  color: var(--rh-text);
  font-size:15px;
}
.redhands-board__search input { width: clamp(120px, 18vw, 190px); }
.redhands-board__search button {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--rh-red);
  border-radius: var(--rh-radius);
  background: var(--rh-red);
  color: #FFF9EE;
  font-size:15px;
  font-weight: 700;
  white-space: nowrap;
}
.redhands-board__search button:hover { border-color: var(--rh-red-dark); background: var(--rh-red-dark); }
.redhands-board__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin-top: 8px;
}
.redhands-board__pages a,
.redhands-board__pages strong {
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding: 0 6px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  color: var(--rh-muted);
  font-size:15px;
  font-weight: 600;
}
.redhands-board__pages a:hover { border-color: var(--rh-red); color: var(--rh-red); }
.redhands-board__pages strong { border-color: var(--rh-red); background: var(--rh-red); color: #FFF9EE; }

/* ---------------------------------------------------------- 글 읽기
   제목 20px 안팎 / 본문 14.5px / 메타 11.5px. 위계는 이 세 단계로만 가른다. */

.redhands-read,
.redhands-comments,
.redhands-write {
  margin: 0 0 8px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}
.redhands-read > header {
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--rh-line);
}
.redhands-read h2 {
  margin: 3px 0 5px;
  font-size:clamp(16px, 1.7vw, 20px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.redhands-read header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--rh-muted);
  font-size:15px;
}
.redhands-read header a { color: var(--rh-text); font-weight: 700; }
.redhands-read header a:hover { color: var(--rh-red); }
.redhands-read__body {
  padding: 16px 14px 22px;
  font-size:15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.redhands-read__body p { margin: 0 0 1.1em; }
/* 본문·댓글 안의 링크는 눈에 보여야 한다. 게시판 전체 규칙(color: inherit)이 여기서는 방해가 된다. */
.redhands-read__body a,
.redhands-comment .xe_content a { color: var(--rh-red); text-decoration: underline; }
.redhands-read__body a:hover,
.redhands-comment .xe_content a:hover { color: var(--rh-red-dark); }
.redhands-read__body ul,
.redhands-read__body ol { margin: 0 0 1.1em; padding-left: 22px; }
.redhands-read__body li { margin: 0 0 .3em; }
.redhands-read__body img,
.redhands-read__body iframe { max-width: 100%; height: auto; }
.redhands-read__attachments {
  margin: 0 14px 14px;
  padding: 8px 10px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-canvas);
}
.redhands-read__attachments h3 { margin: 0 0 5px; font-size:15px; font-weight: 800; }
.redhands-read__attachments ul { margin: 0; padding-left: 16px; font-size:15px; }
.redhands-read__attachments a { color: var(--rh-text); }
.redhands-read__attachments a:hover { color: var(--rh-red); }
.redhands-read footer { padding: 8px 12px; border-top: 1px solid var(--rh-line); }
.redhands-read footer form { margin: 0; }
.redhands-read footer a,
.redhands-comment footer a {
  padding: 3px 8px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  color: var(--rh-muted);
  font-size:15px;
  font-weight: 600;
  white-space: nowrap;
}
.redhands-read footer a:hover,
.redhands-comment footer a:hover { border-color: var(--rh-red); color: var(--rh-red); }

/* ---------------------------------------------------------- 댓글 */

.redhands-comments { padding: 9px 12px 12px; }
.redhands-comments > header {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rh-text);
}
.redhands-comments h2 { margin: 0; font-size:15px; font-weight: 800; }
.redhands-comments ol {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.redhands-comment {
  padding: 8px 10px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}
/* 답글 들여쓰기. 템플릿이 depth-N 클래스를 붙인다. */
.redhands-comment.depth-1 { margin-left: 14px; }
.redhands-comment.depth-2 { margin-left: 28px; }
.redhands-comment.depth-3 { margin-left: 42px; }
.redhands-comment.depth-4 { margin-left: 56px; }
.redhands-comment[class*="depth-"]:not(.depth-0) { border-left: 2px solid var(--rh-line-strong); background: var(--rh-canvas); }
.redhands-comment header {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--rh-muted);
  font-size:15px;
}
.redhands-comment header a { color: var(--rh-text); font-weight: 700; }
.redhands-comment header a:hover { color: var(--rh-red); }
.redhands-comment .xe_content {
  margin: 5px 0 7px;
  font-size:15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.redhands-comment .is-deleted { margin: 5px 0 7px; color: var(--rh-muted); font-size:15px; }
.redhands-comment-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rh-line);
}
.redhands-comment-form .redhands-button { margin-top: 8px; }

/* ---------------------------------------------------------- 글쓰기·확인 화면 */

.redhands-write { padding: 12px; }
.redhands-write h2 { margin: 0 0 10px; font-size:15px; font-weight: 800; }
.redhands-write__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.redhands-write input,
.redhands-write select {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--rh-line-strong);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  color: var(--rh-text);
  font-size:15px;
}
.redhands-write input[type="checkbox"] { min-height: 0; }
.redhands-write__extra {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
}
.redhands-write__extra dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  font-size:15px;
}
.redhands-write__extra dd { margin: 0; }
.redhands-write__editor { margin-top: 8px; }
.redhands-write__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--rh-muted);
  font-size:15px;
}
.redhands-write__options label { display: flex; gap: 5px; align-items: center; }
.redhands-write__actions { justify-content: flex-end; margin-top: 12px; }

/* ---------------------------------------------------------- 좁은 화면 */

@media (max-width: 700px) {
  .redhands-board__head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 9px 9px;
  }
  /* 좁은 화면에서는 글쓰기 같은 주 버튼만 폭을 채운다. 목록·관리 버튼까지 늘리면 무게가 안 맞는다. */
  .redhands-board__head-actions .redhands-button.is-primary { flex: 1 1 auto; }
  .redhands-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title title" "author date" "views votes";
    gap: 1px 8px;
    min-height: 0;
    padding: 7px 8px;
  }
  .redhands-row > * { padding: 0; text-align: left; font-size:15px; }
  .redhands-row__type { display: none; }
  .redhands-row__title { grid-area: title; margin-bottom: 3px; padding-left: 0; }
  .redhands-row__title > a { font-size:15px; }
  .redhands-row__author { grid-area: author; }
  .redhands-row time { grid-area: date; text-align: right; }
  .redhands-row span:nth-last-child(2) { grid-area: views; }
  .redhands-row span:last-child { grid-area: votes; text-align: right; }
  .redhands-board__search { width: 100%; margin-left: 0; }
  .redhands-board__search input { flex: 1 1 auto; width: auto; }
  .redhands-read > header,
  .redhands-read footer,
  .redhands-comments,
  .redhands-write { padding: 10px; }
  .redhands-read__body { padding: 12px 10px 18px; }
  .redhands-read__attachments { margin: 0 10px 10px; }
  .redhands-write__top { grid-template-columns: minmax(0, 1fr); }
  .redhands-write__extra dl { grid-template-columns: minmax(0, 1fr); }
  .redhands-comment.depth-1 { margin-left: 8px; }
  .redhands-comment.depth-2 { margin-left: 16px; }
  .redhands-comment.depth-3 { margin-left: 24px; }
  .redhands-comment.depth-4 { margin-left: 32px; }
  .redhands-board__categories {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-inline-end: 4px solid #F27A00;
    scrollbar-color: #F27A00 #FFF9EE;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .redhands-board__categories a {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }
  .redhands-board__categories::after {
    content: "옆으로 보기 →";
    position: sticky;
    right: 0;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: #146B43;
    background: #FFC928;
    border: 1px solid #F27A00;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* ============================================================
   2026-08-24 커뮤니티 가독성 보완 candidate
   목록은 빠르게 훑고, 본문은 16px 이상으로 오래 읽을 수 있게 한다.
   ============================================================ */

.redhands-board {
  font-size:16px;
  line-height: 1.65;
}

.redhands-board__head { padding: 13px 15px 14px; }
.redhands-board__head span { font-size:15px; }
.redhands-board__head h1 { font-size:clamp(21px, 1.8vw, 26px); line-height: 1.35; }
.redhands-board__head p,
.redhands-board__admin-copy { font-size:15px; line-height: 1.65; }

.redhands-button {
  min-height: 40px;
  padding: 0 15px;
  font-size:15px;
  line-height: 1.2;
}

.redhands-board__categories { padding: 10px 12px; gap: 7px; }
.redhands-board__categories a { min-height: 38px; padding: 0 13px; font-size:15px; }
.redhands-board__categories a.rank1 { font-size:17px; }
.redhands-board__categories a.rank2 { font-size:16px; }
.redhands-board__categories a.rank3,
.redhands-board__categories a.rank4 { font-size:15px; }

.redhands-row {
  min-height: 56px;
  font-size:15px;
  line-height: 1.5;
}

.redhands-row > * { padding-top: 10px; padding-bottom: 10px; }
.redhands-row__type { font-size:15px; }
.redhands-row__title > a { font-size:16px; line-height: 1.5; }
.redhands-row__title em { font-size:15px; }
.redhands-row__category { padding: 4px 7px; font-size:15px; }
.redhands-board__empty { padding: 28px 16px; font-size:16px; }

.redhands-board__search input,
.redhands-board__search select,
.redhands-board__search button { min-height: 40px; font-size:15px; }
.redhands-board__pages a,
.redhands-board__pages strong { min-width: 40px; height: 40px; font-size:15px; }

.redhands-read > header { padding: 18px 22px 17px; }
.redhands-read h2 {
  margin-top: 10px;
  font-size:clamp(24px, 2.2vw, 30px);
  line-height: 1.35;
}
.redhands-read header > div { gap: 8px 16px; font-size:15px; line-height: 1.5; }

.redhands-read__body {
  width: min(100%, 980px);
  min-height: 260px;
  margin: 0 auto;
  padding: 30px 32px 42px;
  color: var(--rh-text);
  font-size:17px;
  line-height: 1.82;
  overflow-wrap: anywhere;
}

/* Rhymix core sets .xe_content back to 13px. Keep authored text readable
   while preserving the explicit heading scale below. */
.redhands-read__body .xe_content {
  font-size:inherit !important;
  line-height: inherit !important;
}
.redhands-read__body .xe_content :where(p, div, span, a, strong, em, li, dt, dd, th, td) {
  font-size:max(1em, 17px) !important;
  line-height: inherit !important;
}

.redhands-read__body p { margin: 0 0 1.25em; word-break: keep-all; }
.redhands-read__body h1 { font-size:30px; line-height: 1.35; }
.redhands-read__body h2 { font-size:25px; line-height: 1.4; }
.redhands-read__body h3 { font-size:21px; line-height: 1.45; }
.redhands-read__body h4 { font-size:18px; line-height: 1.5; }
.redhands-read__body blockquote {
  margin: 1.4em 0;
  padding: 12px 16px;
  border-left: 4px solid var(--rh-red);
  background: var(--rh-tint);
}

.redhands-read__attachments h3 { font-size:15px; }
.redhands-read__attachments ul { font-size:15px; line-height: 1.6; }
.redhands-read footer { padding: 12px 16px; }
.redhands-read footer a,
.redhands-comment footer a { min-height: 36px; padding: 0 11px; font-size:15px; }

.redhands-comments { padding: 15px 18px 18px; }
.redhands-comments h2 { font-size:18px; }
.redhands-comment header { font-size:15px; }
.redhands-comment .xe_content { font-size:16px; line-height: 1.75; }
.redhands-comment .is-deleted { font-size:15px; }
.redhands-comment-form textarea,
.redhands-write input,
.redhands-write select,
.redhands-write textarea { font-size:16px; line-height: 1.6; }

@media (max-width: 700px) {
  .redhands-board__head { padding: 12px 11px 13px; }
  .redhands-board__head h1 { font-size:22px; }
  .redhands-row { padding: 10px 9px; gap: 4px 10px; }
  .redhands-row > * { padding: 0; font-size:15px; }
  .redhands-row__title > a { font-size:16px; line-height: 1.5; }
  .redhands-read > header { padding: 15px 13px 14px; }
  .redhands-read h2 { font-size:23px; }
  .redhands-read header > div { font-size:15px; }
  .redhands-read__body {
    min-height: 200px;
    padding: 20px 14px 30px;
    font-size:16.5px;
    line-height: 1.78;
  }
  .redhands-read__body .xe_content :where(p, div, span, a, strong, em, li, dt, dd, th, td) {
    font-size:max(1em, 16.5px) !important;
  }
  .redhands-comments { padding: 13px 12px 15px; }
  .redhands-comment .xe_content { font-size:16px; }
}