/* ═══════════════════════════════════════════════════════════════
 *  css/core.css — 테마 무관 핵심 레이아웃 & 리셋
 *
 *  포함:
 *   - 리셋 + 베이스 타이포
 *   - .layout (사이드바 + 본문 그리드)
 *   - .sidebar
 *   - .crumb (페이지 공통 breadcrumb)
 *   - .write-* (글 작성/수정 폼)
 *   - .site-footer
 * ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --content-max: 880px;  /* 모든 페이지의 가로 폭 — 한 곳만 바꾸면 메인/리스트/갤러리/방명록 등 전부 적용 */
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}
html { scrollbar-gutter: stable; }

/* 모바일에서만 가로 스크롤 차단 — PC 에선 sticky sidebar 가 영향받지 않도록 제외 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* 스크롤바 — gutter 는 잡지만(밀림 방지) 시각적으론 투명 → 호버 시에만 살짝 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background .2s;
}
html:hover ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 32%, transparent) !important;
}
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html:hover { scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ═══════════════ LAYOUT ═══════════════ */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  align-items: start;     /* sidebar 가 sticky 동작하려면 stretch 가 아니어야 함 */
}

.content {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* SPA cross-dissolve 가 페이드하는 inner wrapper.
   .content 자체의 glassmorphism 배경은 그대로 두고 안의 내용만 페이드. */
.content-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ═══════════════ SIDEBAR ═══════════════ */
.sidebar {
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid color-mix(in srgb, var(--hair) 60%, transparent);
  padding: 28px 0 24px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 2px; }

.sb-brand {
  padding: 0 24px 22px;
  border-bottom: 1px solid var(--hair-soft);
  margin-bottom: 14px;
}
.sb-brand .name {
  display: block;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}
.sb-brand .tag {
  display: block;
  font-size: 11px;
  color: var(--accent-2);
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: .04em;
}

.sb-section {
  padding: 14px 24px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-mute);
  font-weight: 600;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 8px 22px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-left: 2px solid transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
  transition: all .15s ease;
  user-select: none;
}
.sb-item:hover { background: var(--hair-soft); color: var(--ink); }
.sb-item.active {
  color: var(--ink);
  font-weight: 700;
  border-left-color: var(--accent);
  background: var(--paper);
}
.sb-item.active .ic { color: var(--accent); }
.sb-item .ic {
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
  color: var(--ink-mute);
  width: 18px;
  flex-shrink: 0;
}
.sb-item .pin {
  margin-left: auto;
  font-family: 'Material Symbols Rounded';
  font-size: 13px;
  color: var(--accent);
  opacity: .55;
}

.sb-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--hair-soft);
}

.login-pop {
  padding: 12px 24px;
  background: var(--hair-soft);
}
.login-pop form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-pop input {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  outline: none;
}
.login-pop input:focus { border-color: var(--accent); }
.login-pop button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
}
.login-error {
  color: var(--accent-2);
  font-size: 11px;
  margin-top: 6px;
  font-weight: 500;
}

/* ═══════════════ BREADCRUMB ═══════════════ */
.crumb {
  padding: 18px 36px;
  border-bottom: 1px solid var(--hair-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.crumb .path {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
}
.crumb .path a { color: var(--ink-mute); }
.crumb .path a:hover { color: var(--accent); }
.crumb .path strong {
  color: var(--ink);
  font-weight: 700;
}
.crumb .path .sep {
  color: var(--hair);
  margin: 0 8px;
}
.crumb .meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
}
.crumb .actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.crumb .meta + .actions { margin-left: 12px; }
.crumb .actions a {
  font-size: 11px;
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 700;
}
.crumb .actions a:hover {
  background: var(--accent);
  color: var(--paper);
}

/* ─── chip 변형 — path 를 시각적으로 숨기고 meta 를 칩으로 표시 ─── */
/* 사용: <div class="crumb chip"> ... 목록 페이지(방명록·게시판 list) 처럼 path 가
   사이드바 메뉴와 중복되는 곳에 사용. 스크린 리더에는 그대로 읽힘. */
.crumb.chip {
  background: transparent;
  border: none;
  position: static;
  display: block;
  text-align: right;
  padding: 18px 36px 0;
}
.crumb.chip .path {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.crumb.chip .meta {
  margin-left: 0;
  background: var(--hair-soft);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.crumb.chip .actions { margin-left: auto; }

/* ═══════════════ WRITE / EDIT FORM ═══════════════ */
.write-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 0 60px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
.write-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 36px 40px;
}
.write-title {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--hair);
  padding: 8px 0 14px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.025em;
  outline: none;
  font-family: inherit;
  width: 100%;
}
.write-title:focus { border-bottom-color: var(--accent); }

.write-category {
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  margin-top: 4px;
}
.write-category:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

.write-subtitle {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hair);
  padding: 6px 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  outline: none;
  font-family: inherit;
  width: 100%;
}
.write-subtitle:focus { border-bottom-color: var(--accent); }

.write-content {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 18px 20px;
  min-height: 520px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  outline: none;
  resize: vertical;
  font-family: inherit;
}
.write-content:focus { border-color: var(--accent); }

.write-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.write-upload .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.write-upload .lbl .hint {
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 4px;
}
.write-upload input[type=file] {
  width: 100%;
  background: var(--paper-2);
  border: 1px dashed var(--hair);
  border-radius: 8px;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}
.write-upload input[type=file]:hover { border-color: var(--accent); }
.write-upload input[type=file]::file-selector-button {
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--hair);
  padding: 11px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  margin-right: 14px;
  transition: background .15s;
}
.write-upload input[type=file]::file-selector-button:hover {
  background: var(--accent-soft);
}
.write-upload input[type=file]::-webkit-file-upload-button {
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--hair);
  padding: 11px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  margin-right: 14px;
}
/* edit 폼 — 기존 이미지 그리드 (체크박스로 개별 삭제) */
.write-upload .current-imgs {
  margin-top: 14px;
}

/* 새 업로드 미리보기 — 누적된 파일들의 thumbnail */
.write-upload .upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.write-upload .upload-preview:empty { margin-top: 0; }
.upload-preview-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-2);
}
.upload-preview-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-2) 85%, transparent);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: transform .12s;
}
.upload-preview-remove:hover {
  background: var(--accent-2);
  transform: scale(1.1);
}
.write-upload .current-imgs-label {
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 8px;
  font-weight: 600;
}
.write-upload .current-imgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.write-upload .current-img-item {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hair);
  aspect-ratio: 1 / 1;
}
.write-upload .current-img-item input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.write-upload .current-img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .15s, filter .15s;
}
.write-upload .current-img-item .rm-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-2) 75%, transparent);
  color: var(--paper);
  font-size: 18px;
  opacity: 0;
  transition: opacity .15s;
}
/* 삭제 체크 시 — 흐려지고 빨간 오버레이 + 휴지통 아이콘 */
.write-upload .current-img-item:has(input:checked) img {
  opacity: .35;
  filter: grayscale(.5);
}
.write-upload .current-img-item:has(input:checked) .rm-mark {
  opacity: 1;
}
.write-upload .current-img-item:has(input:checked) {
  border-color: var(--accent-2);
}

/* ─── 외부 이미지 URL 입력 ─── */
.write-ext-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.write-ext-images .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.write-ext-images .lbl .hint {
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 4px;
}
.ext-img-input-row {
  display: flex;
  gap: 8px;
}
.ext-img-url-input {
  flex: 1;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.ext-img-url-input::placeholder { color: var(--ink-mute); }
.ext-img-url-input:focus { border-color: var(--accent); }
.ext-img-add-btn {
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ext-img-add-btn:hover {
  background: var(--accent);
  color: var(--paper);
}
/* 미리보기 — 파일 업로드의 .upload-preview 와 동일한 그리드 */
.ext-img-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.ext-img-preview:empty { display: none; }
/* 카드 — .upload-preview-item 확장 (세로 방향 + 라벨) */
.ext-img-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: auto;        /* 파일 업로드와 달리 1:1 고정 해제 */
  height: auto;
}
.ext-img-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* 로드 실패 플레이스홀더 */
.ext-img-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  font-size: 11px;
  color: var(--ink-mute);
}
/* URL 말줄임 라벨 */
.ext-img-label {
  padding: 5px 8px 6px;
  font-size: 10px;
  color: var(--ink-mute);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--paper-2);
  border-top: 1px solid var(--hair-soft);
}

.write-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hair-soft);
}
.form-error {
  background: color-mix(in srgb, var(--accent-2, #c44) 15%, var(--paper));
  color: var(--accent-2, #c44);
  border: 1px solid color-mix(in srgb, var(--accent-2, #c44) 35%, var(--paper));
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px;
  font-weight: 500;
}

/* ═══════════════ FOOTER ═══════════════ */
.site-footer {
  margin-top: auto;
  text-align: center;
  padding: 28px 20px;
  font-size: 11px;
  color: var(--ink-mute);
}
.site-footer strong { color: var(--ink-soft); }

/* ═══════════════ MOBILE FALLBACK ═══════════════ */
/* mobile.css 가 사이드바 → 하단 탭바 + 드로어로 교체.
   여기는 mobile.css 가 처리하지 않는 페이지 내부 padding 만 조정. */
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .crumb { padding: 14px 18px; }
  .write-wrap { padding: 24px 18px 40px; }
  .write-title { font-size: 20px; }
}

/* ═══════════════ MENU DIVIDER ═══════════════ */
.sb-divider {
  border: none;
  border-top: 1px dashed var(--hair);
  margin: 14px 24px;
}

/* ═══════════════ ACTION BAR (공통) ═══════════════ */
/* 게시판/방명록/페이지 상단의 공통 액션바.
   `inc/post-actions.php` 의 동작과 짝을 이루며, 어떤 스킨에서든 일관된 모양을 보장.
   사용 위치:
   - inc/post-actions.php   : view 상단 (목록 / 수정 / 삭제)
   - skins/board/.../index  : 리스트 상단 (메타 + 새 글)
*/
/* 새 글 버튼 / 메타 / 액션 버튼 — 한 줄 */
.list-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 14px;
}
/* 첫 항목 (메타 또는 목록 버튼) 을 좌측으로 */
.list-actions > :first-child {
  margin-right: auto;
}
/* 모든 버튼/링크 공통 — <a> 와 <button> 의 line-height 차이 흡수 */
/* 게시판 액션바 (btn-list/new/del) + 폼 액션 (btn-cancel/submit/delete) 통합 */
.btn-list, .btn-new, .btn-del,
.btn-cancel, .btn-submit, .btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all .15s;
}
/* 회색 (목록 / 취소) */
.btn-list, .btn-cancel {
  background: var(--hair-soft);
  color: var(--ink-soft);
}
.btn-list:hover, .btn-cancel:hover {
  background: var(--ink-soft);
  color: var(--paper);
}
/* accent (수정 / 새 글 / 발행 / 저장) */
.btn-new, .btn-submit {
  background: var(--accent-soft);
  color: var(--accent);
}
.btn-new:hover, .btn-submit:hover {
  background: var(--accent);
  color: var(--paper);
}
/* accent-2 (삭제) */
.btn-del, .btn-delete {
  background: color-mix(in srgb, var(--accent-2) 18%, var(--paper));
  color: var(--accent-2);
}
.btn-del:hover, .btn-delete:hover {
  background: var(--accent-2);
  color: var(--paper);
}
/* 메타 (총 N편 · 최신순) — 알약 칩, 동일 높이 */
.list-actions .meta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--hair-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  box-sizing: border-box;
}

/* ═══════════════ SPA LOADING ═══════════════ */
/* SPA 네비게이션 중에 화면 상단에 얇은 진행 바 + 컨텐츠 fade */
html.spa-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 99999;
  animation: spa-progress 1.2s ease-in-out infinite;
  transform-origin: left;
}
@keyframes spa-progress {
  0%   { transform: scaleX(0);   opacity: 1; }
  50%  { transform: scaleX(.7);  opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0; }
}

/* Cross-dissolve 페이드는 spa.js 에서 inline transition 으로 처리.
   여기선 상단 progress bar 만 정의. */

/* ═══════════════ COMMENTS (공통) ═══════════════ */
/* 모든 게시판 스킨에서 공유하는 댓글 섹션.
   .post-view 와 함께 카드 형태로 렌더되며, 비공개 댓글 / 잠금 해제 / 관리자 분기 지원. */

.comments {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 32px 40px 36px;
  margin-top: 18px;
}
.comments-head {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.comments-head .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* 알림 (등록 실패 등) */
.cm-flash {
  margin-bottom: 16px;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.cm-flash.success { background: var(--accent-soft);                                        color: var(--accent); }
.cm-flash.error   { background: color-mix(in srgb, var(--accent-2) 18%, var(--paper));     color: var(--accent-2); }

/* ─ 댓글 목록 ─ */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.comment {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 14px 18px;
}
.comment.private { border-style: dashed; }
.comment .head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.comment .who {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.comment .head .lock {
  color: var(--ink-mute);
  font-size: 11px;
}
.comment .when {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-mute);
  font-weight: 500;
}
.comment .body {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.comment .body.locked {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--hair-soft);
  border-radius: 8px;
  align-items: flex-start;
}
.comment .body .placeholder {
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.comment .unlock-form {
  display: flex;
  gap: 6px;
}
.comment .unlock-form input[type=password] {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  width: 130px;
}
.comment .unlock-form button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ─ 댓글 폼 (관리자 / 방문자 분기) ─ */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment-form .row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.comment-form .cm-name { flex: 1; min-width: 140px; }
.comment-form .cm-pw   { flex: 1.5; min-width: 200px; }
.comment-form input[type=text],
.comment-form input[type=password],
.comment-form textarea {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--accent); }
.comment-form textarea {
  min-height: 90px;
  resize: vertical;
  width: 100%;
}
.comment-form button {
  align-self: flex-end;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.comment-form button:hover { opacity: .92; }

.comment-form .admin-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  padding: 0 4px;
}
.comment-form .admin-tag {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.comment-form .private-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  height: 38px;
}
.comment-form .private-toggle input { accent-color: var(--accent); }
.comment-form .private-toggle .ico {
  font-size: 12px;
  color: var(--ink-mute);
}
.comment-form .private-toggle input:checked ~ .ico { color: var(--accent); }

/* 모바일 — 댓글 카드 풀폭 + 폼 한 줄 */
@media (max-width: 768px) {
  .comments {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 24px 16px;
  }
  .comment-form .row { flex-wrap: nowrap; gap: 6px; }
  .comment-form .cm-name { min-width: 0; }
  .comment-form .cm-pw   { min-width: 0; }
  .comment-form .private-toggle .lbl { display: none; }
}

/* ═══════════════ DEFAULT BOARD UI (공통) ═══════════════ */
/* 게시판의 기본 리스트·상세 UI. 모든 게시판 스킨에서 자동 사용.
   새 스킨이 다른 디자인을 원하면 이 룰들을 자기 style.css 에서 override. */

/* ─ 게시글 리스트 ─ */
.post-list {
  padding: 12px 36px 24px;
}

.post {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  transition: padding-left .15s ease;
}
.post:last-child { border-bottom: none; }
.post:hover { padding-left: 6px; }
.post:hover .title { color: var(--accent); }

.post .date {
  font-size: 12px;
  color: var(--ink-mute);
  padding-top: 4px;
  text-align: right;
  border-right: 1px solid var(--hair-soft);
  padding-right: 24px;
  line-height: 1.5;
  font-weight: 500;
}
.post .date b {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.post-body-col { min-width: 0; }
.post .title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 6px;
  color: var(--ink);
  transition: color .15s;
}
.post .excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-msg {
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
  padding: 80px 20px;
  line-height: 1.7;
}
.empty-msg strong { color: var(--accent); }

/* ─ 페이지네이션 ─ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 24px 36px 40px;
}
.pagination a,
.pagination .pg-disabled {
  font-size: 12px;
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-weight: 600;
}
.pagination a {
  color: var(--ink);
  text-decoration: none;
}
.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination .pg-disabled {
  color: var(--ink-mute);
  opacity: .5;
}
.pg-info {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
}

/* ═══════════════ POST VIEW ═══════════════ */
.post-view {
  padding: 40px 36px 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.post-head {
  border-bottom: 1px solid var(--hair-soft);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.post-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin-bottom: 14px;
  color: var(--ink);
}
.post-meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
  font-weight: 500;
  align-items: center;
}
.post-meta .dot { color: var(--hair); }
.post-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: break-word;
}
.post-body p { margin-bottom: 1em; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 768px) {
  .post-list { padding: 12px 18px 24px; }
  .post {
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .post .date {
    padding-right: 12px;
    font-size: 10px;
  }
  .post .date b { font-size: 12px; }
  .post .title { font-size: 15px; }
  .post .excerpt { font-size: 12px; }

  .post-view { padding: 28px 18px 0; }
  .post-title { font-size: 22px; }

  .pagination { padding: 18px 18px 30px; }
}

/* ═══════════════════════════════════════════════════════════════
 *  v1.3.0 — list-wrap: 게시판 영역 폭 고정 + 새 헤더 구조
 * ═══════════════════════════════════════════════════════════════ */

.list-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 0 40px;
  width: 100%;
  box-sizing: border-box;
}

/* 메타 헤더 (글 개수 + 정렬) — 새 글 버튼 아래, 리스트 위 */
.list-header {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
  margin-bottom: 14px;
}
.list-header .path-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.list-header .meta {
  background: var(--hair-soft);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.list-wrap .post-view { padding: 0; max-width: none; margin: 0; }
.list-wrap .pagination { padding: 24px 0 0; }

/* ─ 리스트 아이템에 부제목 표시 ─ */
.post .subtitle {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ─ 글 상세 — 최상단 이미지 (단일/다중) ─ */
.post-images {
  margin-bottom: 28px;
}
.post-images.multi {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.post-image {
  border-radius: 14px;
  overflow: hidden;
  /* 세로로 긴 캐릭터 이미지의 좌우 여백을 자연스럽게 처리 */
  background: transparent;
}
/* 단일 이미지 — 비율 유지하며 화면 높이의 85%까지 허용
   (캐릭터 전신 등 세로로 긴 이미지가 잘리지 않도록 contain 사용) */
.post-images.single .post-image img {
  max-height: 85vh;
  object-fit: contain;
}
/* 다중 이미지 — 원본 비율 그대로 표시 (잘리지 않음) */
.post-images.multi .post-image img {
  object-fit: contain;
}
.post-image img {
  display: block;
  width: 100%;
  height: auto;
  /* 세로 이미지가 가운데 정렬되도록 (양옆 빈 공간 균등 분배) */
  margin: 0 auto;
}

/* ─ 글 상세 — 부제목 ─ */
.post-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-bottom: 14px;
  letter-spacing: -.01em;
  line-height: 1.55;
}

/* ─ 모바일 — 100% 가로 ─ */
@media (max-width: 768px) {
  .list-wrap {
    max-width: none;
    padding: 18px 14px 32px;
  }
  .post-image { border-radius: 0; margin-left: -14px; margin-right: -14px; }
  .post .date {
    border-right: none;
    padding-right: 0;
    text-align: left;
  }
  .post .date b {
    display: inline;
    margin-right: 6px;
  }
  .post {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  v1.3.2 — post-view 카드화 + 댓글 비공개/관리자 분기
 * ═══════════════════════════════════════════════════════════════ */

/* ─ 글 상세를 카드로 감싸기 ─ */
.list-wrap .post-view {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 36px 40px;
}
.list-wrap .post-view .post-head {
  border-bottom: 1px solid var(--hair-soft);
  padding-bottom: 24px;
  margin-bottom: 28px;
}

/* 모바일 — post-view 풀폭 카드 */
@media (max-width: 768px) {
  .list-wrap .post-view {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 24px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  v1.3.3 — 리스트 카드화 + 목록/삭제 버튼
 * ═══════════════════════════════════════════════════════════════ */

/* 게시판 리스트도 카드로 */
.list-wrap .post-list {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 8px 28px;
}

/* 모바일 — 리스트 카드도 풀폭 */
@media (max-width: 768px) {
  .list-wrap .post-list {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 8px 14px;
  }
}


/* ═══════════════ INLINE EDIT / DELETE (공통) ═══════════════ */
/* 방명록 / 댓글에서 사용하는 수정·삭제 액션 버튼 + 인라인 폼 */

/* ─── 수정 / 삭제 액션 버튼 ─── */
.entry-action-btn {
  background: none;
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute);
  cursor: pointer;
  font-family: inherit;
}
.entry-action-btn:hover { color: var(--ink); border-color: var(--ink-mute); }

/* ─── 수정 폼 (인라인) ─── */
.edit-form {
  width: 100%;
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.edit-form[style*="block"] { display: flex !important; }
.edit-form textarea {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 80px;
}
.edit-form textarea:focus { border-color: var(--accent); }
.edit-form .edit-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.edit-form input[type=password] {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  width: 130px;
}
.edit-form button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* 잠금 해제 / 삭제 폼 (인라인) */
.unlock-form,
.del-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.unlock-form input[type=password],
.del-form input[type=password] {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  width: 130px;
}
.unlock-form button,
.del-form button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}


/* ═══════════════ TOAST (공통) ═══════════════ */
.spa-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.spa-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════ POST CATEGORY ═══════════════ */
/* view 페이지 — 제목 위에 큰 뱃지 */
.post-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: .02em;
}

/* 리스트/갤러리 카드 — 작은 칩 */
.post-cat-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* ═══════════════ CATEGORY NAV ═══════════════ */
/* 게시판 액션바 안의 카테고리 탭 — 메타 칩 자리에 위치 */
.cat-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.cat-nav .cat-tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  background: var(--hair-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .15s;
  box-sizing: border-box;
}
.cat-nav .cat-tab:hover {
  background: var(--hair);
  color: var(--ink);
}
.cat-nav .cat-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ═══════════════ WRITE: 비공개 토글 ═══════════════ */
.write-private {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
}
.write-private-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  user-select: none;
}
.write-private-toggle input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.write-private-toggle i { color: var(--ink-mute); font-size: 12px; }
.write-private-pw {
  width: 100%;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.write-private-pw:focus { border-color: var(--accent); }
.write-private-pw::placeholder { color: var(--ink-mute); }

/* ═══════════════ POST LOCKED (잠금 화면) ═══════════════ */
.post-locked {
  text-align: center;
  padding: 80px 32px 100px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  margin-top: 16px;
}
.post-locked-icon {
  font-size: 42px;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.post-locked-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}
.post-locked-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.post-locked-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 24px;
  line-height: 1.7;
}
.post-locked-error {
  display: inline-block;
  font-size: 12px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, var(--paper));
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
  font-weight: 600;
}
.post-locked-form {
  display: flex;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
}
.post-locked-form input[type=password] {
  flex: 1;
  padding: 10px 16px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  text-align: center;
  letter-spacing: .15em;
}
.post-locked-form input[type=password]:focus { border-color: var(--accent); }
.post-locked-form .btn-submit { flex-shrink: 0; }
.post-locked-form .btn-submit .lbl-icon { display: none; }
@media (max-width: 768px) {
  .post-locked-form { max-width: none; }
  .post-locked-form .btn-submit .lbl-text { display: none; }
  .post-locked-form .btn-submit .lbl-icon { display: inline-flex; font-size: 14px; }
  .post-locked-form input[type=password] { flex: 0 0 80%; }
  .post-locked-form .btn-submit { flex: 0 0 calc(20% - 8px); padding: 0; }
}

/* 리스트/갤러리 카드의 자물쇠 아이콘 */
.post-lock-icon {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-mute);
  margin-right: 4px;
  vertical-align: baseline;
}

/* ═══════════════ COMMENT REPLIES (대댓글) ═══════════════ */
.comment-thread {
  margin-bottom: 4px;
}
.comment-replies {
  margin-left: 28px;
  padding-left: 16px;
  border-left: 2px solid var(--hair-soft);
  margin-top: 4px;
}
.comment-replies .comment {
  margin-bottom: 6px;
}
.reply-form {
  margin: 10px 0 4px;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
}
.reply-form .row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.reply-form .row input[type=text],
.reply-form .row input[type=password] {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}
.reply-form .row input:focus { border-color: var(--accent); }
.reply-form .private-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.reply-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.reply-form textarea:focus { border-color: var(--accent); }
.reply-form button[type=submit] {
  margin-top: 8px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  float: right;
}

@media (max-width: 600px) {
  .comment-replies { margin-left: 12px; padding-left: 10px; }
  .reply-form { margin-left: 12px; }
}

/* ═══════════════ BGM PLAYER ═══════════════ */
#bgm-player {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}
#bgm-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--hair);
  color: var(--ink-mute);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transition: all .2s ease;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#bgm-toggle:hover {
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
#bgm-toggle.playing {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--hair));
}
#bgm-toggle.playing::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: bgm-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes bgm-pulse {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(1.4); opacity: 0; }
}
#bgm-yt {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  #bgm-player {
    bottom: 84px;  /* 모바일 탭바 위로 올림 */
    right: 16px;
  }
  #bgm-toggle { width: 44px; height: 44px; }
}

/* ═══════════════ MARKDOWN BODY ═══════════════
 * inc/post-view.php 에서 hp_render_markdown() 의 결과물에 적용.
 * 키트 톤(paper / accent / ink-soft)과 어우러지도록 디자인.
 */

/* 단락 — .post-body 의 기본 line-height/color 위에 margin 만 */
.markdown-body p { margin-bottom: 1em; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }
/* 긴 URL / 단어 자동 wrap — 모바일 가로 폭 초과 방지 */
.markdown-body { word-break: break-word; overflow-wrap: anywhere; }
.md-content .ProseMirror { word-break: break-word; overflow-wrap: anywhere; }

/* 헤더 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
  margin: 1.6em 0 .6em;
  letter-spacing: -.02em;
}
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 19px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4 { font-size: 14px; }
.markdown-body h5 { font-size: 13px; color: var(--ink-soft); }
.markdown-body h6 { font-size: 12px; color: var(--ink-mute); }

/* 인용 */
.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 1em 0;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 6px 6px 0;
}
.markdown-body blockquote p { margin-bottom: .4em; }
.markdown-body blockquote p:last-child { margin-bottom: 0; }

/* 링크 */
.markdown-body a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color .15s;
}
.markdown-body a:hover {
  border-bottom-color: var(--accent);
}

/* 강조 */
.markdown-body strong { color: var(--ink); font-weight: 800; }
.markdown-body em { font-style: italic; }
.markdown-body del { color: var(--ink-mute); }

/* 인라인 코드 */
.markdown-body code {
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'D2Coding', monospace;
  font-size: .9em;
  color: var(--accent);
}

/* 코드 블록 */
.markdown-body pre {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: 14px 18px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
  line-height: 1.65;
}
.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
}

/* 리스트 */
.markdown-body ul,
.markdown-body ol {
  margin: .6em 0 1em;
  padding-left: 1.6em;
}
.markdown-body li { margin-bottom: .3em; }
.markdown-body li > p { margin-bottom: .4em; }
.markdown-body li > ul,
.markdown-body li > ol { margin: .3em 0; }

/* 표 */
.markdown-body table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  font-size: 13px;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--hair);
  padding: 8px 12px;
  text-align: left;
}
.markdown-body th {
  background: var(--paper-2);
  font-weight: 700;
  color: var(--ink);
}

/* 수평선 */
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--hair);
  margin: 2em 0;
}

/* 본문 안 이미지 */
.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: .6em 0;
}

/* ═══════════════ MARKDOWN EDITOR (Tiptap) ═══════════════ */
.md-input {
  /* hidden — 폼 제출 직전에 마크다운 채워서 전송 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.md-editor {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  margin-top: 4px;
}
.md-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hair-soft);
  background: var(--paper-2);
  flex-wrap: wrap;
  align-items: center;
}
.md-toolbar button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: all .15s;
  position: relative;
  padding: 0;
}
.md-toolbar button:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hair);
}
.md-toolbar button.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.md-toolbar button sup {
  font-size: 8px;
  margin-left: 1px;
  opacity: .8;
}
.md-toolbar .sep {
  width: 1px;
  height: 22px;
  background: var(--hair);
  margin: 0 4px;
}
.md-content {
  background: var(--paper);
}
.md-content .ProseMirror {
  min-height: 280px;
  padding: 22px 26px;
  outline: none;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink);
  font-family: inherit;
}
.md-content .ProseMirror p { margin-bottom: .8em; }
.md-content .ProseMirror p:last-child { margin-bottom: 0; }
.md-content .ProseMirror p.is-editor-empty:first-child::before {
  content: "내용을 입력하세요…";
  color: var(--ink-mute);
  pointer-events: none;
  height: 0;
  float: left;
}
/* ProseMirror 안의 마크다운 요소 — .markdown-body 와 동일한 룩 */
.md-content .ProseMirror h1,
.md-content .ProseMirror h2,
.md-content .ProseMirror h3,
.md-content .ProseMirror h4,
.md-content .ProseMirror h5,
.md-content .ProseMirror h6 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
  margin: 1.4em 0 .5em;
  letter-spacing: -.02em;
}
.md-content .ProseMirror h1 { font-size: 22px; }
.md-content .ProseMirror h2 { font-size: 19px; }
.md-content .ProseMirror h3 { font-size: 16px; }
.md-content .ProseMirror blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 1em 0;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 6px 6px 0;
}
.md-content .ProseMirror code {
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'D2Coding', monospace;
  font-size: .9em;
  color: var(--accent);
}
.md-content .ProseMirror pre {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: 14px 18px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
  line-height: 1.65;
}
.md-content .ProseMirror pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
}
.md-content .ProseMirror ul,
.md-content .ProseMirror ol {
  margin: .6em 0 1em;
  padding-left: 1.6em;
}
.md-content .ProseMirror li { margin-bottom: .3em; }
.md-content .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--hair);
  margin: 1.6em 0;
}
.md-content .ProseMirror strong { color: var(--ink); font-weight: 800; }
.md-content .ProseMirror em { font-style: italic; }
.md-content .ProseMirror del { color: var(--ink-mute); }

/* 에디터에 포커스 시 */
.md-editor:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hair));
}

/* ═══════════════ MARKDOWN CUSTOM SYNTAX ═══════════════
 * 블러 / 접기 / 루비 — view 와 에디터 양쪽에 적용.
 */

/* 블러 — 클릭/호버 시 잠시 보임 */
.markdown-body .md-blur,
.md-content .ProseMirror .md-blur {
  background: var(--ink);
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
  -webkit-user-select: none;
  text-shadow: none;
}
.markdown-body .md-blur:hover,
.markdown-body .md-blur:focus,
.markdown-body .md-blur:active {
  background: transparent;
  color: var(--ink);
  user-select: text;
  -webkit-user-select: text;
}

/* 접기 — details/summary 박스 */
.markdown-body .md-fold {
  margin: 1em 0;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper-2);
  overflow: hidden;
}
.markdown-body .md-fold > summary {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
.markdown-body .md-fold > summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
.markdown-body .md-fold > summary::-webkit-details-marker { display: none; }
.markdown-body .md-fold > summary::before {
  content: "▶";
  display: inline-block;
  font-size: 9px;
  color: var(--ink-mute);
  transition: transform .2s ease;
}
.markdown-body .md-fold[open] > summary::before {
  transform: rotate(90deg);
}
.markdown-body .md-fold[open] > summary {
  border-bottom: 1px solid var(--hair-soft);
}
.markdown-body .md-fold-body {
  padding: 14px 18px;
  color: var(--ink-soft);
  line-height: 1.85;
}

/* 루비 — 한자 위에 작은 발음 */
.markdown-body ruby {
  ruby-position: over;
  ruby-align: center;
}
.markdown-body ruby rt {
  font-size: .55em;
  color: var(--ink-mute);
  letter-spacing: .05em;
  font-weight: 500;
}

/* ═══════════════ SIDEBAR SECTION TABS ═══════════════ */
.sb-sections {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px 16px 14px;
  border-bottom: 1px solid var(--hair-soft);
  margin-bottom: 8px;
}
.sb-section-tab {
  flex: 1 1 0;             /* 섹션 개수에 따라 가로 자동 균등 분배 */
  min-width: 0;            /* 긴 이름이 다른 탭을 밀어내지 않게 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  background: var(--hair-soft);
  color: var(--ink-soft);
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-section-tab:hover {
  background: var(--hair);
  color: var(--ink);
}
.sb-section-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ═══════════════ 커스텀 툴팁 ═══════════════
 * JS 가 hover 시 .hp-tooltip element 를 body 에 동적 추가 + fixed 위치.
 * 부모 overflow:hidden 에 영향 받지 않음.
 */
.hp-tooltip {
  position: fixed;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 240px;
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 22%, transparent);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}
.hp-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
.hp-tooltip[data-wrap="1"] {
  white-space: normal;
}

/* ───────────────────────────────────────────────────────────────
 * 이미지 모달 (lightbox) — js/lightbox.js 가 제어
 * ─────────────────────────────────────────────────────────────── */
.hp-img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 32px 20px;
  cursor: zoom-out;
  animation: hp-img-modal-fade 160ms ease;
}
.hp-img-modal.open { display: flex; }
.hp-img-modal img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.hp-img-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .12);
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.hp-img-modal-close:hover { background: rgba(255, 255, 255, .25); }
@keyframes hp-img-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* lightbox 영역 안의 이미지에 클릭 가능 시각 표시 */
[data-lightbox] img { cursor: zoom-in; }