/* =============================================
 * L3 게시판 스킨 시스템 - 베이스 CSS
 * 모든 스킨이 공유하는 CSS 변수 및 기본 구조
 * 기본값: botanical 스킨
 * ============================================= */

/* === 1. CSS 변수 선언 (기본값 = botanical) === */
:root {
  /* 배경 */
  --skin-bg: #F6F3ED;
  --skin-bg-gradient: linear-gradient(180deg, #F6F3ED 0%, #EFE7DD 100%);
  
  /* 표면 */
  --skin-surface: #FFFCF7;
  --skin-surface-alt: #F6F3ED;
  --skin-card: #FFFFFF;
  --skin-card-info: #FFFCF7;
  
  /* 테두리 */
  --skin-border: rgba(40,40,40,0.12);
  --skin-border-light: rgba(40,40,40,0.08);
  --skin-line: rgba(40,40,40,0.12);
  
  /* 텍스트 */
  --skin-text: rgba(30,30,30,0.92);
  --skin-text-muted: rgba(30,30,30,0.55);
  --skin-text-light: rgba(30,30,30,0.35);
  
  /* 포인트 */
  --skin-primary: #B8A6D9;
  --skin-primary-light: #D4C8E8;
  --skin-primary-mist: rgba(184,166,217,0.12);
  --skin-accent: #C9A86A;
  
  /* 파스텔 4색 */
  --skin-gold: #C9A86A;
  --skin-blush: #E7B6B0;
  --skin-lav: #B8A6D9;
  --skin-sage: #9FB5A6;
  
  /* 그림자 */
  --skin-shadow: 0 10px 30px rgba(0,0,0,0.06);
  --skin-card-shadow: 0 8px 24px rgba(0,0,0,0.04);
  --skin-hover-shadow: 0 12px 32px rgba(0,0,0,0.08);
  
  /* 반경 */
  --skin-radius: 14px;
  --skin-radius-sm: 8px;
  --skin-radius-lg: 18px;
  --skin-radius-pill: 999px;
  
  /* 트랜지션 */
  --skin-transition: all 0.25s ease;
  --skin-transition-fast: all 0.15s ease;
}

/* === 2. 스킨 시스템 기본 적용 === */

/* 페이지 배경 */
[data-skin] body {
  background: var(--skin-bg-gradient);
  color: var(--skin-text);
}

/* 프레임 기본 */
[data-skin] .galaxy-posts-frame {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  box-shadow: var(--skin-shadow);
  transition: var(--skin-transition);
}

/* 상단바 기본 */
[data-skin] .galaxy-posts-topbar {
  background: var(--skin-surface);
  border-bottom-color: var(--skin-border-light);
}

/* 카드 기본 */
[data-skin] .gp-card {
  background: var(--skin-card);
  border-color: var(--skin-border);
  box-shadow: var(--skin-card-shadow);
  transition: var(--skin-transition);
}

[data-skin] .gp-card:hover {
  box-shadow: var(--skin-hover-shadow);
}

[data-skin] .gp-card .info {
  background: var(--skin-card-info);
}

[data-skin] .gp-card .title-line {
  color: var(--skin-text);
}

[data-skin] .gp-card .nickname,
[data-skin] .gp-card .stat {
  color: var(--skin-text-muted);
}

/* AI바 기본 */
[data-skin] .ai-bar {
  background: var(--skin-primary-mist);
  border-color: var(--skin-primary);
}

[data-skin] .ai-title {
  color: var(--skin-text);
}

[data-skin] .ai-btn {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  color: var(--skin-text);
  transition: var(--skin-transition-fast);
}

/* 탭/필터 기본 */
[data-skin] .pill {
  background: transparent;
  border-color: var(--skin-border);
  color: var(--skin-text-muted);
  transition: var(--skin-transition-fast);
}

[data-skin] .pill.on,
[data-skin] .pill.active {
  background: var(--skin-primary);
  border-color: var(--skin-primary);
  color: #fff;
}

/* 검색창 기본 */
[data-skin] .galaxy-search-input {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  color: var(--skin-text);
}

[data-skin] .galaxy-search-btn {
  background: var(--skin-primary);
  border-color: var(--skin-primary);
  color: #fff;
}

/* 페이저 기본 */
[data-skin] .pager-bottom .pg-btn {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  color: var(--skin-text);
}

[data-skin] .pager-bottom .pg-btn:hover,
[data-skin] .pager-bottom .pg-btn.pg-current {
  background: var(--skin-primary);
  border-color: var(--skin-primary);
  color: #fff;
}

/* 분할 버튼 기본 */
[data-skin] .lens-btn {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  color: var(--skin-text);
}

[data-skin] .lens-btn.active {
  background: var(--skin-primary);
  border-color: var(--skin-primary);
  color: #fff;
}

/* === 3. 유틸리티 클래스 === */

/* 스킨 전환 애니메이션 */
[data-skin] * {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* 스킨 전환 중 깜빡임 방지 */
[data-skin].skin-transitioning * {
  transition: none !important;
}