/* ============================================================
   기본 스킨 — 사이드바 + 상단바 레이아웃
   리스트 / 뷰 / 글작성 기본 GNUBoard div 스타일
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --cl-bg:       #f5f4ef;
  --cl-surface:  #ffffff;
  --cl-surface-2:#f9f8f5;
  --cl-border:   #e8e6df;
  --cl-border-2: #d4d0c8;
  --cl-text:     #1a1a18;
  --cl-text-2:   #4a4a46;
  --cl-text-3:   #7a7a74;
  --cl-accent:   #da7756;
  --cl-accent-2: #c4613d;
  --cl-accent-bg:#fdf0ec;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 12px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; background: var(--cl-bg); font-family: var(--font); color: var(--cl-text); }

/* ══════════════════════════════════════
   공통 버튼
══════════════════════════════════════ */
.sj_btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .15s;white-space:nowrap; }
.sj_btn_primary   { background:var(--cl-accent);color:#fff;border-color:var(--cl-accent); }
.sj_btn_primary:hover { background:var(--cl-accent-2);border-color:var(--cl-accent-2);color:#fff; }
.sj_btn_secondary { background:var(--cl-surface);color:var(--cl-text-2);border-color:var(--cl-border-2); }
.sj_btn_secondary:hover { background:var(--cl-surface-2);color:var(--cl-text); }
.sj_btn_danger    { background:#fff;color:#a83020;border-color:#e8a898; }
.sj_btn_danger:hover { background:#faedeb; }
.sj_btn_sm        { padding:5px 11px;font-size:12.5px; }

/* ══════════════════════════════════════
   앱 레이아웃 (사이드바 + 메인)
══════════════════════════════════════ */
.sj_app_wrap {
  display: flex; min-height: 100vh;
  background: var(--cl-bg); font-family: var(--font);
}

/* ── 사이드바: 기본 220px, 접힘 52px ── */
.sj_sidebar {
  width: 220px; min-height: 100vh; flex-shrink: 0;
  background: var(--cl-surface-2); border-right: 1px solid var(--cl-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  z-index: 100; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}
.sj_sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.sj_app_wrap.sj_sidebar_collapsed .sj_sidebar { width: 52px; }

.sj_sidebar_name,
.sj_sidebar_section_label,
.sj_nav_label { opacity:1;width:auto;overflow:hidden;white-space:nowrap;pointer-events:auto;transition:opacity .15s .05s, width .15s; }
.sj_app_wrap.sj_sidebar_collapsed .sj_sidebar_name,
.sj_app_wrap.sj_sidebar_collapsed .sj_sidebar_section_label,
.sj_app_wrap.sj_sidebar_collapsed .sj_nav_label { opacity:0;width:0;pointer-events:none; }

/* 로고 */
.sj_sidebar_logo { display:flex;align-items:center;gap:10px;padding:14px 13px;border-bottom:1px solid var(--cl-border);min-height:52px;flex-shrink:0; }
.sj_sidebar_icon { font-size:24px;line-height:1;flex-shrink:0; }
.sj_sidebar_name { font-size:13.5px;font-weight:700;color:var(--cl-text); }
.sj_logo_link { display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0; }
.sj_logo_link:hover .sj_sidebar_name { color:var(--cl-accent); }

/* 섹션 레이블 */
.sj_sidebar_section_label { font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--cl-text-3);padding:14px 14px 4px;height:36px;display:flex;align-items:flex-end; }

/* 네비 */
.sj_sidebar_nav { display:flex;flex-direction:column;padding:4px 6px;gap:1px; }
.sj_nav_item { display:flex;align-items:center;gap:0;padding:9px 0;border-radius:var(--r-sm);font-size:13.5px;color:var(--cl-text-2);text-decoration:none;transition:background .13s, color .13s;font-weight:500;cursor:pointer;border:none;background:none;min-height:38px;justify-content:flex-start;overflow:hidden; }
.sj_nav_item i { width:40px;text-align:center;font-size:15px;flex-shrink:0; }
.sj_nav_label { font-size:13.5px;font-weight:500; }
.sj_nav_item:hover { background:var(--cl-border);color:var(--cl-text); }
.sj_nav_item.active { background:var(--cl-accent-bg);color:var(--cl-accent);font-weight:600; }
.sj_app_wrap.sj_sidebar_collapsed .sj_nav_item { justify-content:center; }
.sj_nav_write { background:var(--cl-accent) !important;color:#fff !important;margin:6px 0 2px; }
.sj_nav_write:hover { background:var(--cl-accent-2) !important; }
.sj_nav_pnumall { background:#1a4fa0 !important;color:#fff !important;margin:2px 0; }
.sj_nav_pnumall:hover { background:#153d80 !important; }
.sj_app_wrap.sj_sidebar_collapsed .sj_nav_pnumall { justify-content:center; }
.sj_nav_setup:hover { background:var(--cl-accent-bg);color:var(--cl-accent); }

/* 사이드바 하단 */
.sj_sidebar_footer { margin-top:auto;padding:14px 14px 10px;border-top:1px solid var(--cl-border);display:flex;flex-direction:column;gap:5px; }
.sj_sidebar_footer_url { font-size:11.5px;font-weight:600;color:var(--cl-accent);text-decoration:none;letter-spacing:.02em; }
.sj_sidebar_footer_url:hover { text-decoration:underline; }
.sj_sidebar_copyright { font-size:10.5px;color:var(--cl-text-3);line-height:1.6;margin:0; }
.sj_app_wrap.sj_sidebar_collapsed .sj_sidebar_footer { display:none; }

/* 상태 도트 */
.sj_status_dot_wait    { color: #7a5010 !important; }
.sj_status_dot_ok      { color: #1f6b42 !important; }
.sj_status_dot_reject  { color: #a83020 !important; }
.sj_status_dot_pnumall { color: #2a3ea0 !important; }

/* 모바일 닫기 버튼: 데스크탑 숨김 */
.sj_sidebar_close_btn { display:none; }

/* 사이드바 접기/펼치기 버튼 */
.sj_sidebar_pin_btn { margin:auto 6px 12px;background:none;border:1px solid var(--cl-border);border-radius:var(--r-sm);width:36px;height:30px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--cl-text-3);transition:all .15s;flex-shrink:0; }
.sj_app_wrap.sj_sidebar_collapsed .sj_sidebar_pin_btn { color:var(--cl-accent);border-color:var(--cl-accent); }
.sj_sidebar_pin_btn:hover { background:var(--cl-bg); }

/* ── 메인 영역 ── */
.sj_main_area { flex:1;min-width:0;display:flex;flex-direction:column; }

/* ── 상단바 ── */
.sj_topbar { height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--cl-surface);border-bottom:1px solid var(--cl-border);position:sticky;top:0;z-index:50;gap:12px; }
.sj_topbar_left  { display:flex;align-items:center;gap:10px;min-width:0;flex:1; }
.sj_topbar_right { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.sj_topbar_title { font-size:14px;font-weight:600;color:var(--cl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sj_topbar_count { font-size:12px;color:var(--cl-text-3);background:var(--cl-bg);border:1px solid var(--cl-border);padding:2px 8px;border-radius:99px;white-space:nowrap; }
.sj_topbar_login { display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--cl-border);flex-shrink:0; }
.sj_login_name   { font-size:13px;font-weight:500;color:var(--cl-text-2); }
.sj_sidebar_toggle { background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--cl-text-3);font-size:15px;transition:all .15s; }
.sj_sidebar_toggle:hover { background:var(--cl-bg);color:var(--cl-text); }
.sj_icon_btn { background:none;border:1px solid var(--cl-border);border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cl-text-3);font-size:13px;transition:all .15s; }
.sj_icon_btn:hover { background:var(--cl-bg);color:var(--cl-text);border-color:var(--cl-border-2); }

/* ── 컨텐츠 영역 ── */
.sj_content      { flex:1;padding:24px 24px 40px; }
.sj_content_view { flex:1;padding:20px 24px 40px; }

/* 모바일 딤 */
.sj_sidebar_dim { display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99; }

/* ══════════════════════════════════════
   모바일 (≤768px)
══════════════════════════════════════ */
@media (max-width: 768px) {
  .sj_sidebar { position:fixed;left:-240px;width:220px !important;transition:left .25s cubic-bezier(.4,0,.2,1);top:0;box-shadow:none; }
  .sj_sidebar .sj_sidebar_name,
  .sj_sidebar .sj_sidebar_section_label,
  .sj_sidebar .sj_nav_label { opacity:1;width:auto;pointer-events:auto; }
  .sj_sidebar .sj_nav_item { justify-content:flex-start; }
  .sj_app_wrap.sj_sidebar_open .sj_sidebar { left:0;box-shadow:4px 0 24px rgba(0,0,0,.18); }
  .sj_sidebar_dim { display:none; }
  .sj_app_wrap.sj_sidebar_open .sj_sidebar_dim { display:block; }
  .sj_sidebar_close_btn { display:flex;position:absolute;top:10px;right:10px;background:none;border:1px solid var(--cl-border);border-radius:var(--r-sm);width:30px;height:30px;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--cl-text-3);z-index:10; }
  .sj_sidebar_close_btn:hover { background:var(--cl-border);color:var(--cl-text); }
  .sj_sidebar_pin_btn { display:none; }
  .sj_content, .sj_content_view { padding:14px; }
  .sj_topbar { padding:0 12px; }
  .sj_topbar_title { font-size:13px;max-width:160px; }
  .m_none { display:none !important; }
}


/* 유틸 */
.hidden { display:none !important; }

/* ── 게시판 그룹 아코디언 ─────────────────────────────── */
.sj_acc_group { border-bottom: 1px solid var(--cl-border); }
.sj_acc_group:last-child { border-bottom: none; }

.sj_acc_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cl-text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  text-align: left;
  transition: color .15s;
  gap: 6px;
}
.sj_acc_header:hover { color: var(--cl-text); }

.sj_acc_label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sj_acc_arrow {
  font-size: 10px;
  flex-shrink: 0;
  transition: transform .22s ease;
  transform: rotate(-90deg);
}
.sj_acc_group.sj_acc_open .sj_acc_arrow { transform: rotate(0deg); }

.sj_acc_body {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
}
.sj_acc_group.sj_acc_open .sj_acc_body {
  max-height: 9999px;
  padding: 0 6px 6px;
}

/* 사이드바 접힘(collapsed) 상태: 헤더 숨기고 목록은 그대로 */
.sj_app_wrap.sj_sidebar_collapsed .sj_acc_header { display: none; }
.sj_app_wrap.sj_sidebar_collapsed .sj_acc_body {
  max-height: none;
  padding: 0 6px 4px;
  overflow: visible;
}
.sj_app_wrap.sj_sidebar_collapsed .sj_acc_group { border-bottom: none; }



/*  개인정보 마스킹 스타일 ═══════════════════════════════════ */

/* 블러 마스킹 기본 */
.saju-private {
    filter: blur(5px);
    user-select: none;
    transition: filter .25s ease;
    cursor: pointer;
    display: inline-block;
}
/* 카드 전체에 마우스 올리면 해제 */
.saju-card:hover .saju-private {
    filter: blur(0);
}
/* 마스킹 래퍼: 🔒 뱃지 */
.saju-private-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.saju-private-wrap .saju-lock-icon {
    font-size: 10px;
    opacity: .45;
    transition: opacity .25s;
    line-height: 1;
    flex-shrink: 0;
}
.saju-card:hover .saju-private-wrap .saju-lock-icon {
    opacity: 0;
}




/* V-FINAL: AI 상세 리포트 줄간격 정상화 / 중복 br 무효화 */
.saju-ai-detail br,
.saju-report br{
    display:none !important;
}
.saju-ai-detail p,
.saju-report .saju-ai-detail p{
    margin:0 0 18px !important;
    line-height:1.9 !important;
}
.saju-ai-detail h3.saju-section-title,
.saju-report .saju-ai-detail h3.saju-section-title{
    margin:44px 0 18px !important;
    line-height:1.35 !important;
}
.saju-ai-detail h3.saju-section-title:first-child,
.saju-report .saju-ai-detail h3.saju-section-title:first-child{
    margin-top:20px !important;
}
.saju-ai-detail ol,
.saju-report .saju-ai-detail ol{
    margin:18px 0 38px !important;
    padding:0 !important;
    list-style:none !important;
}
.saju-ai-detail li,
.saju-report .saju-ai-detail li{
    margin:0 0 12px !important;
    line-height:1.75 !important;
}
.saju-ai-detail > p:empty,
.saju-ai-detail p:has(br:only-child){
    display:none !important;
}