/* =============================================
 * Botanical Skin (C안) - 기본 스킨 (무료)
 * 한지 오프화이트 + 꽃 라인아트 + 파스텔 4색
 * ChatGPT 제안 "Hanji Botanical Minimal" 적용
 * ============================================= */

/* === 1. CSS 변수 오버라이드 === */
[data-skin="botanical"] {
  /* 배경 - 한지 오프화이트 (미세한 웜톤) */
  --skin-bg: #FAF7F2;
  --skin-bg-gradient: linear-gradient(180deg, #FAF7F2 0%, #F3EDE4 100%);

  /* 표면 */
  --skin-surface: #FFFDF9;
  --skin-surface-alt: #F7F3EC;
  --skin-card: #FFFFFF;
  --skin-card-info: #FDFBF7;

  /* 테두리 - 뉴트럴 웜그레이 */
  --skin-border: rgba(80,60,50,0.10);
  --skin-border-light: rgba(80,60,50,0.06);
  --skin-line: rgba(80,60,50,0.10);

  /* 텍스트 - 차콜브라운 */
  --skin-text: #2D2926;
  --skin-text-muted: #6B5E57;
  --skin-text-light: #9A8D85;

  /* 포인트 - 생생한 뉴트럴 4색 (여성적 + 고급스러움) */
  --skin-gold: #C4956A;      /* 테라코타 골드 */
  --skin-blush: #D4A5A5;     /* 더스티 로즈 */
  --skin-lav: #A89CC8;       /* 웜 라벤더 */
  --skin-sage: #8FA798;      /* 세이지 그린 */

  /* 포인트 서브컬러 */
  --skin-coral: #D9A394;     /* 소프트 코랄 */
  --skin-mauve: #C4A4B4;     /* 모브 핑크 */
  --skin-sand: #D5C4B0;      /* 샌드 베이지 */

  /* 제목 리본 배경 */
  --skin-title-ribbon: rgba(168,156,200,0.14);

  /* 기본 포인트 (웜 라벤더) */
  --skin-primary: #A89CC8;
  --skin-primary-light: #C4B8DC;
  --skin-primary-mist: rgba(168,156,200,0.10);

  /* 액센트 (더스티 로즈 - 생동감) */
  --skin-accent: #D4A5A5;
  --skin-accent-light: #E5C4C4;

  /* 그림자 - 웜톤 소프트 */
  --skin-shadow: 0 10px 30px rgba(80,50,30,0.05);
  --skin-card-shadow: 0 8px 24px rgba(80,50,30,0.04);
  --skin-hover-shadow: 0 12px 32px rgba(168,156,200,0.12);

  --skin-radius: 14px;
  --skin-radius-lg: 16px;
  --skin-radius-pill: 999px;
}

/* === 2. 페이지 배경 === */
[data-skin="botanical"] body {
  background: var(--skin-bg-gradient);
  position: relative;
}

/* === 3. 프레임 완전 제거 (투명) === */
[data-skin="botanical"] .galaxy-posts-frame {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* 사이드 버튼 제거 */
[data-skin="botanical"] .galaxy-posts-frame::before,
[data-skin="botanical"] .galaxy-posts-frame::after {
  display: none;
}

/* === 4. 상단바 - 한지 스타일 === */
[data-skin="botanical"] .galaxy-posts-topbar {
  background: rgba(255,252,247,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-bottom: 1px solid var(--skin-border-light);
  border-radius: 12px;
  margin-bottom: 16px;
}

/* 노치 제거 */
[data-skin="botanical"] .galaxy-posts-notch {
  display: none;
}

/* === 5. 제목 - 오일 드롭 아이콘 === */
[data-skin="botanical"] .galaxy-posts-title {
  color: var(--skin-text);
  font-size: 16px;
  font-weight: 700;
}

[data-skin="botanical"] .galaxy-posts-title::before {
  content: '🍃';
  background: none;
  width: auto;
  height: auto;
  box-shadow: none;
  margin-right: 6px;
}

[data-skin="botanical"] .galaxy-posts-title span {
  color: var(--skin-text-muted);
}

/* === 6. 스크린 영역 === */
[data-skin="botanical"] .galaxy-posts-screen {
  background: transparent;
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .posts-grid-area {
  background: transparent;
}

/* === 7. 탭/필터 - pill 캡슐 + 향기 라인 === */
[data-skin="botanical"] .pill {
  background: transparent;
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius-pill);
  color: var(--skin-text-muted);
  padding: 8px 16px;
  font-size: 14px;
  position: relative;
}

[data-skin="botanical"] .pill:hover {
  background: rgba(255,255,255,0.6);
}

[data-skin="botanical"] .pill.on,
[data-skin="botanical"] .pill.active {
  background: #FFFFFF;
  border-color: transparent;
  color: var(--skin-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 활성 탭 하단 향기 라인 */
[data-skin="botanical"] .pill.on::after,
[data-skin="botanical"] .pill.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--skin-lav);
  border-radius: 2px;
}

/* === 8. 카드 - 흰색 + 소프트 쉐도우 === */
[data-skin="botanical"] .gp-card {
  background: var(--skin-card);
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-card-shadow);
}

[data-skin="botanical"] .gp-card:hover {
  box-shadow: var(--skin-hover-shadow);
  transform: translateY(-2px);
}

/* 하단 라인 → 라벤더 */
[data-skin="botanical"] .gp-card::after {
  background: var(--skin-lav);
  height: 3px;
}

/* 썸네일 위 한지 필름 */
[data-skin="botanical"] .gp-card .thumb {
  position: relative;
  background: #f0ede5;
}

[data-skin="botanical"] .gp-card .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

[data-skin="botanical"] .gp-card .info {
  background: var(--skin-card-info);
  padding: 12px;
}

[data-skin="botanical"] .gp-card .title-line {
  color: var(--skin-text);
  font-weight: 600;
}

/* 제목 리본 배경 */
[data-skin="botanical"] .gp-card .title-stack {
  background: var(--skin-title-ribbon);
  padding: 4px 8px;
  border-radius: 4px;
  margin: -4px -8px;
}

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

[data-skin="botanical"] .gp-card .dock-thumb {
  border-color: var(--skin-border-light);
  background: var(--skin-surface);
}

[data-skin="botanical"] .gp-card .dock-thumb:hover {
  border-color: var(--skin-lav);
}

/* === 9. 카테고리 배지 - 점 + 텍스트 === */
[data-skin="botanical"] .cat-badge {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-skin="botanical"] .cat-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Education - 블루 */
[data-skin="botanical"] .cat-badge.cat-education,
[data-skin="botanical"] .cat-badge[data-cat="education"],
[data-skin="botanical"] .cat-badge[data-cat="Education"] {
  color: #4A6FA5;
}
[data-skin="botanical"] .cat-badge.cat-education::before,
[data-skin="botanical"] .cat-badge[data-cat="education"]::before,
[data-skin="botanical"] .cat-badge[data-cat="Education"]::before {
  background: #4A6FA5;
}

/* Promotion - 블러쉬 */
[data-skin="botanical"] .cat-badge.cat-promotion,
[data-skin="botanical"] .cat-badge[data-cat="promotion"],
[data-skin="botanical"] .cat-badge[data-cat="Promotion"],
[data-skin="botanical"] .cat-badge[data-cat="promo"] {
  color: #C4645C;
}
[data-skin="botanical"] .cat-badge.cat-promotion::before,
[data-skin="botanical"] .cat-badge[data-cat="promotion"]::before,
[data-skin="botanical"] .cat-badge[data-cat="Promotion"]::before,
[data-skin="botanical"] .cat-badge[data-cat="promo"]::before {
  background: var(--skin-blush);
}

/* Knowledge - 세이지 */
[data-skin="botanical"] .cat-badge.cat-knowledge,
[data-skin="botanical"] .cat-badge[data-cat="knowledge"],
[data-skin="botanical"] .cat-badge[data-cat="Knowledge"] {
  color: #3D8B72;
}
[data-skin="botanical"] .cat-badge.cat-knowledge::before,
[data-skin="botanical"] .cat-badge[data-cat="knowledge"]::before,
[data-skin="botanical"] .cat-badge[data-cat="Knowledge"]::before {
  background: var(--skin-sage);
}

/* Press - 라벤더 */
[data-skin="botanical"] .cat-badge.cat-press,
[data-skin="botanical"] .cat-badge[data-cat="press"],
[data-skin="botanical"] .cat-badge[data-cat="Press"] {
  color: #6B5B95;
}
[data-skin="botanical"] .cat-badge.cat-press::before,
[data-skin="botanical"] .cat-badge[data-cat="press"]::before,
[data-skin="botanical"] .cat-badge[data-cat="Press"]::before {
  background: var(--skin-lav);
}

/* Resources - 세이지 */
[data-skin="botanical"] .cat-badge.cat-resources,
[data-skin="botanical"] .cat-badge[data-cat="resources"],
[data-skin="botanical"] .cat-badge[data-cat="Resources"],
[data-skin="botanical"] .cat-badge[data-cat="materials"] {
  color: #4A8B5C;
}
[data-skin="botanical"] .cat-badge.cat-resources::before,
[data-skin="botanical"] .cat-badge[data-cat="resources"]::before,
[data-skin="botanical"] .cat-badge[data-cat="Resources"]::before,
[data-skin="botanical"] .cat-badge[data-cat="materials"]::before {
  background: #4A8B5C;
}

/* === 10. AI바 - 한지 스타일 === */
[data-skin="botanical"] .ai-bar {
  background: rgba(246,243,237,0.9);
  border: 1px solid var(--skin-border);
  border-radius: 12px;
  box-shadow: none;
}

[data-skin="botanical"] .ai-bar::before {
  display: none;
}

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

[data-skin="botanical"] .ai-btn {
  background: #FFFFFF;
  border: 1px solid var(--skin-border);
  color: var(--skin-text);
  box-shadow: none;
}

[data-skin="botanical"] .ai-btn:hover {
  background: var(--skin-lav);
  border-color: var(--skin-lav);
  color: #fff;
}

/* === 11. 섹션 타이틀 - 여백 구분 === */
[data-skin="botanical"] .cat-section {
  margin: 32px 0;
}

/* === 12. 검색창 === */
[data-skin="botanical"] .galaxy-search-input {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--skin-border-light);
  color: var(--skin-text);
  border-radius: 8px;
}

[data-skin="botanical"] .galaxy-search-input::placeholder {
  color: var(--skin-text-light);
}

[data-skin="botanical"] .galaxy-search-btn {
  background: var(--skin-lav);
  border: 1px solid var(--skin-lav);
  color: #fff;
  border-radius: 8px;
}

[data-skin="botanical"] .galaxy-search-btn:hover {
  background: var(--skin-primary-light);
  border-color: var(--skin-primary-light);
}

/* === 13. 페이저 === */
[data-skin="botanical"] .pager-bottom .pg-btn {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--skin-border-light);
  color: var(--skin-text);
  border-radius: 8px;
}

[data-skin="botanical"] .pager-bottom .pg-btn:hover:not(.disabled),
[data-skin="botanical"] .pager-bottom .pg-btn.pg-current {
  background: var(--skin-lav);
  border-color: var(--skin-lav);
  color: #fff;
}

/* === 14. 분할 버튼 === */
[data-skin="botanical"] .lens-btn {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--skin-border-light);
  color: var(--skin-text);
  border-radius: 8px;
}

[data-skin="botanical"] .lens-btn:hover {
  border-color: var(--skin-lav);
}

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

/* === 15. 하단 네비 === */
[data-skin="botanical"] .galaxy-posts-bottom {
  background: transparent;
}

/* === 16. ADV(확장보기) 스타일 === */
[data-skin="botanical"] .adv-container {
  background: rgba(255,252,247,0.95);
  border: 1px solid var(--skin-border-light);
  border-radius: var(--skin-radius-lg);
  box-shadow: var(--skin-shadow);
}

[data-skin="botanical"] .adv-container::before,
[data-skin="botanical"] .adv-container::after {
  display: none;
}

[data-skin="botanical"] .adv-head {
  background: transparent;
  border-bottom: 1px solid var(--skin-border-light);
  border-radius: 16px 16px 0 0;
}

[data-skin="botanical"] .adv-notch {
  display: none;
}

[data-skin="botanical"] .adv-title {
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-close {
  border: 1px solid var(--skin-border);
  background: rgba(255,255,255,0.8);
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-close:hover {
  background: var(--skin-lav);
  border-color: var(--skin-lav);
  color: #fff;
}

[data-skin="botanical"] .adv-body {
  background: var(--skin-surface-alt);
  border-color: transparent;
}

[data-skin="botanical"] .adv-preview-module {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .adv-comments-module {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .adv-comments-header {
  background: var(--skin-card-info);
  border-bottom-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-comments-header .comment-title::before {
  background: var(--skin-lav);
}

[data-skin="botanical"] .adv-comments-header .count {
  color: var(--skin-lav);
}

[data-skin="botanical"] .comment-tab {
  background: rgba(255,255,255,0.8);
  border-color: var(--skin-border-light);
  color: var(--skin-text-muted);
}

[data-skin="botanical"] .comment-tab:hover {
  border-color: var(--skin-lav);
}

[data-skin="botanical"] .comment-tab.active {
  background: var(--skin-lav);
  color: #fff;
  border-color: var(--skin-lav);
}

[data-skin="botanical"] .adv-comment-author {
  color: var(--skin-lav);
}

[data-skin="botanical"] .adv-comments-input {
  background: var(--skin-card-info);
  border-top-color: var(--skin-border-light);
}

[data-skin="botanical"] .adv-comments-input input {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-comments-input button {
  background: var(--skin-lav);
  border-color: var(--skin-lav);
  color: #fff;
}

[data-skin="botanical"] .adv-comments-input button:hover {
  background: var(--skin-primary-light);
}

[data-skin="botanical"] .adv-grid-module {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .adv-gp-card {
  background: var(--skin-card);
  border-color: transparent;
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .adv-gp-card:hover,
[data-skin="botanical"] .adv-gp-card.active {
  border-color: var(--skin-lav);
  box-shadow: var(--skin-hover-shadow);
}

[data-skin="botanical"] .adv-gp-card .gpc-info {
  background: var(--skin-card-info);
}

[data-skin="botanical"] .adv-gp-card .gpc-title {
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-gp-card .gpc-author {
  color: var(--skin-text-muted);
}

[data-skin="botanical"] .adv-recommend-module {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  border-radius: var(--skin-radius);
}

[data-skin="botanical"] .adv-recommend-item {
  background: var(--skin-card-info);
  border-radius: 8px;
}

[data-skin="botanical"] .adv-recommend-item:hover {
  background: var(--skin-card);
  box-shadow: var(--skin-card-shadow);
}

[data-skin="botanical"] .adv-recommend-title {
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-bottom-layer {
  background: transparent;
  border-top: 1px solid var(--skin-border-light);
  border-radius: 0 0 16px 16px;
}

[data-skin="botanical"] .adv-bottom-indicator {
  background: linear-gradient(90deg, transparent, var(--skin-lav), transparent);
}

[data-skin="botanical"] .adv-datetime {
  color: var(--skin-text-muted);
}

[data-skin="botanical"] .adv-lens-btn {
  background: rgba(255,255,255,0.8);
  border-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .adv-lens-btn.active {
  background: var(--skin-lav);
  border-color: var(--skin-lav);
  color: #fff;
}

/* === 17. MyPage 전용 스타일 === */
[data-skin="botanical"] .wrap {
  background: transparent;
}

[data-skin="botanical"] .panel {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  box-shadow: var(--skin-card-shadow);
}

[data-skin="botanical"] .card {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  box-shadow: var(--skin-card-shadow);
}

[data-skin="botanical"] .card:hover {
  box-shadow: var(--skin-hover-shadow);
  transform: translateY(-2px);
}

[data-skin="botanical"] .topbar .btn {
  background: rgba(255,255,255,0.8);
  border-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .topbar .btn:hover {
  border-color: var(--skin-lav);
}

[data-skin="botanical"] .meta {
  background: var(--skin-card-info);
}

[data-skin="botanical"] .meta .title {
  color: var(--skin-text);
}

[data-skin="botanical"] .meta .desc {
  color: var(--skin-text-muted);
}

[data-skin="botanical"] .chip {
  border-color: var(--skin-border-light);
  background: var(--skin-card);
  color: var(--skin-text-muted);
}

/* === 18. 모달/시트 스타일 === */
[data-skin="botanical"] .sheet {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .sheet h2 {
  color: var(--skin-text);
}

[data-skin="botanical"] .ip,
[data-skin="botanical"] .ta,
[data-skin="botanical"] select {
  background: var(--skin-card);
  border-color: var(--skin-border-light);
  color: var(--skin-text);
}

[data-skin="botanical"] .dropzone {
  border-color: var(--skin-lav);
  background: var(--skin-primary-mist);
  color: var(--skin-text-muted);
}

[data-skin="botanical"] .dropzone.drag {
  background: rgba(184,166,217,0.15);
  border-color: var(--skin-lav);
}

/* === 19. 핫소식/전문지식 레이어 === */
[data-skin="botanical"] .hotnews-layer,
[data-skin="botanical"] .knowledge-layer {
  border-color: var(--skin-border-light);
  background: var(--skin-card);
}

[data-skin="botanical"] .hotnews-layer-title,
[data-skin="botanical"] .knowledge-layer-title {
  background: var(--skin-gold);
  color: #fff;
}

/* === 20. 꽃 장식 (선택적 - SVG 에셋 필요) === */
/*
 * 꽃 장식은 SVG 에셋이 준비되면 활성화
 * 현재는 CSS pseudo-element로 대체
 */

/* 좌상단 꽃 힌트 */
[data-skin="botanical"] .wrap::before {
  content: '';
  position: fixed;
  top: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at center, var(--skin-lav) 0%, transparent 70%);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

/* 우상단 꽃 힌트 */
[data-skin="botanical"] .wrap::after {
  content: '';
  position: fixed;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at center, var(--skin-blush) 0%, transparent 70%);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

/* === 21. 스킨 전환 애니메이션 최적화 === */
[data-skin="botanical"] .gp-card,
[data-skin="botanical"] .pill,
[data-skin="botanical"] .ai-btn,
[data-skin="botanical"] .lens-btn {
  transition: all 0.25s ease;
}