/* 공식 사이트의 작은 안내 페이지(업데이트 노트 · 자주 묻는 질문)가 같이 쓰는 색과 기본 모양.
   색 값은 index.html 의 테마 변수와 같다 — 홈에서 고른 라이트/다크가 그대로 이어진다. */
* { font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif; }
html { scroll-behavior: smooth; }

:root {
  --primary: #8A38F5;
  --primary-light: #A855F7;
  --secondary: #D53A6B;
  --primary-rgb: 138, 56, 245;
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --badge-bg: #F3E8FF;
  --badge-text: #7C3AED;
  --badge-border: #DDD6FE;
  --btn-light-bg: #F3E8FF;
  --btn-light-text: #7C3AED;
  --btn-light-hover: #EDE9FE;
  --btn-alt-bg: #FCE7F3;
  --btn-alt-text: #BE185D;
  --bg-body: #ffffff;
  --bg-section: #F9FAFB;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.9);
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --border-color: #E5E7EB;
}

[data-theme="dark"] {
  --primary: #A78BFA;
  --primary-light: #C4B5FD;
  --secondary: #F472B6;
  --primary-rgb: 167, 139, 250;
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --badge-bg: #374151;
  --badge-text: #C4B5FD;
  --badge-border: #4B5563;
  --btn-light-bg: #374151;
  --btn-light-text: #C4B5FD;
  --btn-light-hover: #4B5563;
  --btn-alt-bg: #4B5563;
  --btn-alt-text: #F9A8D4;
  --bg-body: #0F172A;
  --bg-section: #1E293B;
  --bg-card: #1E293B;
  --bg-nav: rgba(15, 23, 42, 0.95);
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-color: #334155;
}

body { background-color: var(--bg-body); color: var(--text-primary); }

.gradient-text { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gradient-bg { background: var(--gradient); }
.theme-btn-light { background-color: var(--btn-light-bg); color: var(--btn-light-text); }
.theme-btn-light:hover { background-color: var(--btn-light-hover); }
.theme-btn-alt { background-color: var(--btn-alt-bg); color: var(--btn-alt-text); }

/* 업데이트 노트 */
.un-month { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 2.25rem 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border-color); }
.un-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border-color); align-items: baseline; }
.un-date { color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.un-title { color: var(--text-primary); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.un-ver { display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 500; color: var(--badge-text); background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; }
@media (max-width: 480px) { .un-row { grid-template-columns: 1fr; gap: .15rem; } }

/* 자주 묻는 질문 */
.faq-item { border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); margin-bottom: .75rem; overflow: hidden; }
.faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.15rem; font-weight: 700; color: var(--text-primary); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--primary); flex: none; }
.faq-item[open] > summary::after { content: '−'; }
.faq-item > .faq-a { padding: 0 1.15rem 1.1rem; color: var(--text-secondary); line-height: 1.7; overflow-wrap: anywhere; }
.faq-item > .faq-a a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.faq-cat { font-size: 1.05rem; font-weight: 800; margin: 2rem 0 .85rem; color: var(--text-primary); }