/* =====================================================
   Global Base & Theme
   - 프리뷰와 동일한 컬러/폰트 시스템
===================================================== */

:root {
  --bg-main:       #f7f5f0;
  --bg-panel:      #ffffff;
  --bg-soft:       #f0ede6;
  --bg-deep:       #1e3a5f;
  --primary:       #1e3a5f;
  --primary-hover: #152d4a;
  --accent:        #c9a84c;
  --accent-light:  #e8d48a;
  --accent-deep:   #a07828;
  --text-main:     #1a1a1a;
  --text-muted:    #7a7467;
  --text-light:    #b0a896;
  --text-on-dark:  #f0ede6;
  --border:        #ddd8ce;
  --border-gold:   rgba(201,168,76,0.35);
  --shadow-sm:     0 2px 8px rgba(26,26,46,0.07);
  --shadow-md:     0 8px 28px rgba(26,26,46,0.10);
  --font-serif:    'Noto Serif KR', Georgia, serif;
  --font-sans:     'Noto Sans KR', system-ui, sans-serif;
  --ease:          cubic-bezier(.25,.46,.45,.94);
}

html, body {
  max-width: 100vw;
}

/* overflow-x: hidden은 스크롤 컨테이너를 만들어 position: sticky/fixed를 깨뜨린다.
   clip을 지원하면 clip(스크롤 컨테이너를 만들지 않음)을 쓰고, 구형 브라우저만 hidden. */
@supports (overflow-x: clip) {
  html, body {
    overflow-x: clip;
  }
}
@supports not (overflow-x: clip) {
  html, body {
    overflow-x: hidden;
  }
}

body {
  width: 100%;
  font-family: var(--font-sans);
  background: var(--bg-main);
  color: var(--text-main);
  /* 프리뷰와 비슷한 은은한 배경 텍스처 */
  background-image:
      radial-gradient(ellipse at 20% 0%, rgba(201,168,76,0.05) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 100%, rgba(30,58,95,0.05) 0%, transparent 55%);
}

/* =====================================================
   Global Base Override
===================================================== */


/* =====================================================
   Global Tabs (Tree + Clan 공통)
   - .side-panel 구조 기준
   - tree.css 와 충돌 없음
===================================================== */

.side-panel .tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.side-panel .tab {
  flex: 1 1 160px;
  min-width: 0;
  padding: 10px 0;
  border: 1px solid #e4e6ea;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  transition: all .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-panel .tab:hover {
  border-color: #111;
}

.side-panel .tab.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* clan list: person finder와 동일한 nav-tabs (Bootstrap) */
.side-panel .nav-tabs .nav-link {
  font-weight: 700 !important;
}


/* =====================================================
   Side Panel Safety (Tree + Clan 공통 패치)
===================================================== */

.side-panel {
  overflow-x: hidden;
}

.side-panel .layout {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  align-items: stretch !important;
}

.side-panel .panel {
  width: 100% !important;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* 위험 배지 */
.badge-danger {
  background: #fdecea;
  color: #c62828;
}

/* 보드 리스트 카드 배경 (결의와 동일: 선택/비선택, 답변완료 구분) */
.board-page .list-detail-item.board-item {
  background: var(--bg-panel, #fff);
}
.board-page .list-detail-item.board-item.active {
  background: var(--accent-light);
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.08);
}
.board-page .list-detail-item.board-item.board-item--answered {
  background: #e2dfd9;
}
.board-page .list-detail-item.board-item.board-item--answered.active {
  background: #e8e5df;
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.1);
}

/* 종중 리스트 카드 배경 (선택/비선택) */
.clan-page .list-detail-item.clan-item {
  background: var(--bg-panel, #fff);
}
.clan-page .list-detail-item.clan-item.active {
  background: var(--accent-light);
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.08);
}

/* 종중원 카드 레이아웃: 리스트 메인 폭에 맞춰 반응형 (최대 8열 근처까지) */
.clan-page .clan-members-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
}
.clan-page .clan-member-col {
  width: 100%;
}
@media (min-width: 1200px) {
  .clan-page .clan-members-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .clan-page .clan-members-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 모바일 햄버거 메뉴: 인물 아이콘 + 이름 → 마이페이지 */
.header-dropdown-mypage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.header-dropdown-mypage:hover {
  color: #2563eb;
}
.header-dropdown-mypage-icon {
  font-size: 1.1em;
}
.header-dropdown-mypage-name {
  font-weight: 600;
}

/* 리스트·홈 템플릿에서도 헤더와 바로 붙도록 상단 패딩 제거 */
.list-detail-page .site-main,
.template-homepage .site-main {
  padding-top: 0 !important;
}

/* =====================================================
   Rich content (CKEditor 본문 표시)
   - 이미지가 본문 폭에 맞게 반응형으로 표시
   - 에디터에서 줄인 크기(style="width: N%")도 반영
===================================================== */
.rich-content {
  overflow-wrap: break-word;
}
.ck-content {
  /* 에디터 편집 영역 줄간 간격을 기본보다 약간 줄임 */
  line-height: 1.4;
}
.rich-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
/* CKEditor figure (이미지+캡션) */
.rich-content figure {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.rich-content figure.image {
  display: block;
  box-sizing: border-box;
}
.rich-content figure.image img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.rich-content figure.image_resized {
  display: block;
  box-sizing: border-box;
}
.rich-content figure.image_resized img {
  width: 100%;
  height: auto;
}

/* =====================================================
   CKEditor 편집 영역 (에디터 내부 줄간격)
   - 보기용 rich-content 는 그대로 두고
   - 에디터 안에서만 줄 간격을 더 촘촘하게
===================================================== */
.ck-editor__editable,
.ck-editor__editable.ck-editor__editable_inline,
.ck-content.ck-editor__editable {
  line-height: 1.4 !important;
}

/* =====================================================
   인물 폼 오버레이 (전역 — 패널에서 수정/추가 시)
   person-panel.js 가 쓰는 #person-form-overlay
===================================================== */
#person-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  pointer-events: auto;
}
#person-form-overlay .person-form-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}
#person-form-overlay .person-form-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  z-index: 1;
  pointer-events: auto;
}
#person-form-overlay .person-form-panel {
  padding: 16px 20px;
  position: relative;
}
#person-form-overlay .person-form-panel .form-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
#person-form-overlay .person-form-panel .form-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
#person-form-overlay .person-form-panel form { padding: 16px 20px; }
#person-form-overlay .person-form-panel fieldset { border: none; margin: 0 0 16px; padding: 0; }
#person-form-overlay .person-form-panel .form-row { margin-bottom: 12px; }
#person-form-overlay .person-form-panel label { display: block; font-size: 12px; margin-bottom: 4px; }
#person-form-overlay .person-form-panel input,
#person-form-overlay .person-form-panel textarea { width: 100%; padding: 6px 8px; font-size: 13px; box-sizing: border-box; }
#person-form-overlay .person-form-panel .form-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 8px; }
#person-form-overlay .person-form-panel .btn-primary { background: #111827; color: #fff; border: none; padding: 6px 14px; cursor: pointer; }
#person-form-overlay .person-form-panel .btn-secondary { background: #e5e7eb; border: none; padding: 6px 14px; cursor: pointer; }