/*
 * 라공 에디션 공지 페이지 스킨 — notice.css
 * 그누보드5 라공 에디션 테마의 CSS 변수에 연동됩니다.
 *
 * 라공 에디션이 선언하는 주요 CSS 변수:
 *   --color-primary        : 테마 메인 컬러 (링크, 강조)
 *   --color-primary-light  : 메인 컬러 연하게
 *   --color-primary-dark   : 메인 컬러 진하게
 *   --color-bg             : 페이지 배경
 *   --color-bg-box         : 박스/카드 배경
 *   --color-bg-sub         : 서브 배경 (헤더 줄 등)
 *   --color-border         : 기본 테두리
 *   --color-text           : 본문 텍스트
 *   --color-text-sub       : 보조 텍스트
 *   --color-text-muted     : 흐린 텍스트
 *
 * 위 변수가 없는 환경(라공 외 테마)을 위해 :root fallback을 제공합니다.
 */

@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

@font-face {
    font-family: 'Galmuri11';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/Galmuri11.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Galmuri11';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/Galmuri11-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ── Fallback (라공 변수 없는 환경) ─────────────────────── */
:root {
  --nt-primary:        var(--color-primary,       #5685FC);
  --nt-primary-light:  var(--color-primary-light,  #eef3ff);
  --nt-primary-mid:    var(--color-primary-mid,    #6792fd);
  --nt-primary-dark:   var(--color-primary-dark,   #2b52b7);
  --nt-bg:             var(--color-bg,             #f4f2ee);
  --nt-bg-box:         var(--color-bg-box,         #ffffff);
  --nt-bg-sub:         var(--color-bg-sub,         #faf9f7);
  --nt-border:         var(--color-border,         #dddbd5);
  --nt-text:           var(--color-text,           #2c2c2a);
  --nt-text-sub:       var(--color-text-sub,       #444441);
  --nt-text-muted:     var(--color-text-muted,     #b4b2a9);
  --nt-shadow:         var(--box-shadow-card,      0 2px 10px rgba(0, 0, 0, 0.2));
  --nt-radius:         10px;
  --nt-font:           var(--font-base, 'Galmuri11', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif);
  --nt-font-serif:     var(--font-point, 'Galmuri11', 'Noto Serif KR', Georgia, serif);
}

/* ── 래퍼 ─────────────────────────────────────────────── */
.nt-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-family: var('Galmuri11');
  color: var(--nt-text);
}

/* ── 페이지 헤딩 ─────────────────────────────────────── */
.nt-heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--nt-text);
  margin-bottom: 24px;
  padding-left: 2px;
  letter-spacing: -0.3px;
}

.nt-heading::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--nt-primary);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* ── 그리드 레이아웃 ─────────────────────────────────── */
.nt-layout {
  display: grid;
  grid-template-columns: 1fr 252px;
  gap: 18px;
  align-items: start;
}

/* ── 공통 카드 ───────────────────────────────────────── */
.nt-card {
  background: var(--nt-bg-box);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  overflow: hidden;
}

/* ── 탭 네비게이션 ───────────────────────────────────── */
.nt-tabs {
  display: flex;
  background: var(--nt-bg-sub);
  border-bottom: 1px solid var(--nt-border);
}

.nt-tab-btn {
  flex: 1;
  padding: 13px 0;
  background: none;
  border: none;
  font-family: var('Galmuri11');
  font-size: 14px;
  font-weight: 400;
  color: var(--nt-text-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
  letter-spacing: -0.2px;
}

.nt-tab-btn:hover {
  color: var(--nt-primary);
  background: var(--nt-bg);
}

.nt-tab-btn.active {
  color: var(--nt-primary);
  font-weight: 500;
  background: var(--nt-bg-box);
}

.nt-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--nt-primary);
  border-radius: 2px 2px 0 0;
}

/* ── 탭 패널 ─────────────────────────────────────────── */
.nt-tab-pane {
  display: none;
  padding: 30px 34px;
}

.nt-tab-pane.active {
  display: block;
}

/* ── 글 제목 / 메타 / 구분선 ─────────────────────────── */
.nt-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--nt-text);
  margin-bottom: 6px;
  letter-spacing: -0.4px;
  line-height: 1.4;
}

.nt-meta {
  font-size: 12px;
  color: var(--nt-text-muted);
  margin-bottom: 22px;
  letter-spacing: -0.1px;
}

.nt-divider {
  height: 1px;
  background: var(--nt-border);
  margin-bottom: 22px;
  opacity: 0.6;
}

/* ── 본문 ────────────────────────────────────────────── */
.nt-body {
  font-size: 15px;
  line-height: 2;
  color: var(--nt-text-sub);
  letter-spacing: -0.1px;
}

.nt-body p {
  margin-bottom: 3px;
}

.nt-body p:last-child {
  margin-bottom: 0;
}

.nt-body strong {
  font-weight: 700;
  color: var(--nt-text);
}

.nt-body ul {
  padding-left: 18px;
  margin: 10px 0 14px;
}

.nt-body li {
  margin-bottom: 6px;
}

.nt-body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 15px 0 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nt-border);
  letter-spacing: -0.2px;
}

.nt-body h3:first-child {
  margin-top: 0;
}

/* ── 하이라이트 박스 ─────────────────────────────────── */
.nt-highlight {
  background: var(--nt-primary-light);
  border-left: 3px solid var(--nt-primary-mid);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--nt-primary);
  line-height: 1.8;
}

/* ── 접은글 ──────────────────────────────────────────── */
.nt-fold {
  border: 1px solid var(--nt-border);
  border-radius: 6px;
  margin: 14px 0;
  overflow: hidden;
}

.nt-fold summary {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nt-text-sub);
  background: var(--nt-bg-sub);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
}

.nt-fold summary::-webkit-details-marker {
  display: none;
}

.nt-fold summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--nt-primary-mid);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nt-fold[open] summary::before {
  transform: rotate(90deg);
}

.nt-fold[open] summary {
  color: var(--nt-primary);
  border-bottom: 1px solid var(--nt-border);
}

.nt-fold-body {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--nt-text-sub);
}

.nt-fold-body p:last-child {
  margin-bottom: 0;
}

/* ── 사이드바 ────────────────────────────────────────── */
.nt-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 프로필 헤더 ─────────────────────────────────────── */
.nt-profile-header {
  background: linear-gradient(
    135deg,
    var(--nt-primary-dark, #26215c) 0%,
    var(--nt-primary-mid, #7f77dd) 100%
  );
  padding: 26px 20px 18px;
  text-align: center;
}

.nt-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.45);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.nt-avatar--img {
  background: none;
  padding: 0;
  overflow: hidden;
}

.nt-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nt-pname {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}

.nt-ptag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

/* ── 프로필 본문 ─────────────────────────────────────── */
.nt-profile-body {
  padding: 18px 20px;
}

.nt-prow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
}

.nt-prow:last-child {
  margin-bottom: 0;
}

.nt-plabel {
  min-width: 48px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: var(--nt-primary-mid);
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0.1px;
}

.nt-pval {
  color: var(--nt-text-sub);
}

/* ── 바로가기 카드 ───────────────────────────────────── */
.nt-links-inner {
  padding: 16px 18px;
}

.nt-links-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--nt-text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.nt-link-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nt-border);
  text-decoration: none;
  color: var(--nt-text-sub);
  font-size: 13px;
  transition: color 0.15s;
  letter-spacing: -0.1px;
}

.nt-link-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nt-link-item:hover {
  color: var(--nt-primary);
}

.nt-link-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nt-primary-mid);
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .nt-layout {
    grid-template-columns: 1fr;
  }

  .nt-sidebar {
    order: -1;
  }

  .nt-tab-pane {
    padding: 22px 18px;
  }
}