/* assets/css/theme.css */
/* nuxt.config.ts 의 css 배열에 등록해서 전역 로드하세요.
   css: ['~/assets/css/theme.css']

   ⚠️ 참고: 아래 주석은 스크린샷 속 세로메뉴(사이드바) 디자인을 기준으로
   "이 변수가 사이드바의 어느 부분에 영향을 주는지"를 추정해서 달았습니다.
   실제 사이드바 컴포넌트(SubLayout.vue 등)를 보내주시면
   변수명과 실제 클래스를 1:1로 정확히 대조해서 다시 확인해드릴 수 있어요. */

:root {
  /* ===== 라이트 (낮) - 기존 SilverLogs 기본 톤 그대로 ===== */

  /* 페이지 전체 배경색. 세로메뉴 영역에서는 "사이드바 흰 배경" 그 자체.
     → 사이드바 배경을 다른 색으로 바꾸고 싶다면 이 값을 수정 (예: #fafafa, #0f0f0f 등) */
  --bg: #ffffff;

  /* 옅은 회색 섹션 배경. 카드/구역 구분용 배경.
     → 사이드바에서는 보통 "비활성 카테고리를 마우스 오버했을 때"나
        서브메뉴 목록 전체를 감싸는 배경 등에 쓰일 수 있음 */
  --bg-soft: #f3f4f6;

  /* 살짝 떠 있는(elevated) 카드/패널 배경. 그림자와 함께 쓰이는 표면색.
     → 사이드바 자체보다는 팝업/모달, 떠 있는 패널류에 주로 사용 */
  --bg-elevated: #f7f7f5;

  /* 기본 텍스트 색 (거의 검정). 제목, 본문 등 가장 진한 글자색.
     → 사이드바에서는 "SilverLogs" 로고 텍스트, 강조가 필요한 진한 글자에 해당 */
  --text: #111111;

  /* 보조 텍스트 색 (회색). 부제목, 설명, 비활성 상태 글자.
     → 스크린샷 기준: BLOG / MOTO / TRAVEL / BOARD / ABOUT 같은
        "선택되지 않은" 카테고리 글자색과, 서브메뉴 안의 일반 항목
        (자동차, 풍경, 하우스, 헤칭, 인물 등) 글자색이 바로 이 색.
        → 사이드바 메뉴 글자를 전체적으로 더 진하게/연하게 하고 싶다면 여기를 수정 */
  --text-sub: #6b7280;

  /* 옅은 테두리/구분선 색.
     → 사이드바 상단 "모토 엔진을 깨워..." 문구 아래 가로 구분선,
        카테고리 항목 사이의 미세한 경계선 등에 사용됨 */
  --border: #e5e7eb;

  /* 브랜드 포인트 컬러(주황). 강조/선택 상태의 핵심 색상.
     → 스크린샷에서 선택된 "DRAWING" 대분류 글자,
        그리고 서브메뉴 중 선택된 "전체" / "정물화" 항목의 주황색 글자가 바로 이 값.
        → 세로메뉴의 "선택된 항목" 글자색을 바꾸고 싶다면 이 값을 수정하세요
        (예: 파란#2563eb 포인트로 #FF0000바꾸려면 #DB9370 탄#DB9370 오렌지#FF2400등으로 교체) */
  --accent: #FF0000;

  /* accent보다 한 톤 진한 강조색. 버튼/링크 hover 시 등에 사용.
     → 사이드바에서는 "선택된 메뉴 위에 마우스를 올렸을 때" 글자색이 진해지는
         #e03d00 효과를 주고 싶다면 이 값을 활용 가능 (현재 사이드바에는 직접 안 쓰였을 수도 있음) */
  --accent-strong: #DB9370;

  /* accent의 아주 연한 배경 톤(살구색).
     → 스크린샷에서 선택된 "DRAWING" 대분류 뒤의 연살구색 알약(pill) 배경,
        그리고 서브메뉴의 "전체" / "정물화" 항목 뒤에 깔린 연한 배경이 바로 이 값.
        → 세로메뉴의 "선택 항목 배경색"을 바꾸고 싶다면 이 값을 수정하세요
        (예: 더 연하게 하려면 #fff9f5, 다른 색 계열이면 #eef2ff 등) */
  --accent-tint: #fff5f0;

  /* 카드 컴포넌트 전용 배경색 (--bg와 별개로 관리).
     → 사이드바보다는 게시글 카드, 썸네일 카드 배경에 주로 사용 */
  --card-bg: #ffffff;

  /* 카드/패널에 쓰이는 은은한 그림자 값.
     → 사이드바 자체엔 보통 그림자가 없지만, 사이드바 위에 뜨는
        드롭다운/툴팁 등에 적용될 수 있음 */
  --shadow: 0 2px 10px rgba(0,0,0,.06);

  /* 마우스 오버 시 살짝 덮이는 반투명 오버레이 색.
     → 세로메뉴에서 "선택되지 않은 항목에 마우스를 올렸을 때"
        배경이 살짝 어두워지는 효과를 주고 싶다면 이 값을 활용
        (현재는 없다면 hover 스타일에 background: var(--hover-overlay) 추가 가능) */
  --hover-overlay: rgba(147,141,141,0.38);

  /* accent 색상의 은은한 발광(glow) 효과용 색. box-shadow의 blur 색상 등에 사용.
     → 선택된 메뉴 항목에 은은한 광채 효과를 주고 싶을 때 활용 가능 */
  --accent-glow: rgba(255,69,0,0.4);
}

/* ===== 다크 · 유튜브풍 (검정 배경 + 레드 포인트) ===== */
html.dark[data-theme-variant="youtube"] {
  /* 다크 모드의 사이드바/전체 배경 (짙은 브라운블랙) */
  --bg: #1b1712;

  /* 다크 모드에서 섹션 배경(약간 밝은 톤) */
  --bg-soft: #241f18;

  /* 다크 모드의 떠 있는 패널 배경 */
  --bg-elevated: #181818;

  /* 다크 모드 기본 텍스트 (거의 흰색) → 로고 등 진한 글자용 */
  --text: #f1f1f1;

  /* 다크 모드 보조 텍스트 (회색) → 비활성 카테고리/서브메뉴 글자색.
     라이트 모드의 --text-sub와 대응되는 값이므로, 라이트에서 글자 톤을 바꿨다면
     다크에서도 균형을 맞추려면 이 값도 함께 조정 권장 */
  --text-sub: #aaaaaa;

  /* 다크 모드 구분선 색 (짙은 회색) */
  --border: #303030;

  /* 다크 모드 포인트 컬러 (레드). 라이트의 --accent(주황)와 달리
     다크에서는 빨강 계열로 바뀌어 있음.
     → 다크 모드에서 선택된 메뉴 글자색을 바꾸려면 이 값을 수정 */
  --accent: #ff3b3b;

  /* 다크 모드 강조색의 진한 버전 (hover 등) */
  --accent-strong: #ff6b6b;

  /* 다크 모드에서 선택 항목 배경 (반투명 레드 틴트).
     → 다크 모드에서 선택된 메뉴 뒤의 배경색을 바꾸려면 이 값을 수정 */
  --accent-tint: rgba(255,59,59,0.12);

  /* ✅ 본문 문단(긴 글) 전용 글자색. --text(#f1f1f1, 거의 순백)는
     제목·로고처럼 짧고 강조가 필요한 글자엔 적당하지만,
     문단 전체에 쓰면 너무 밝아 눈이 피로해짐.
     그래서 본문만 이 값을 쓰도록 main.css의 .prose p에서 별도 지정함.
     → 본문 글자를 더 밝게/어둡게 하고 싶으면 이 값만 조정하면 됨 */
  --text-body: #d8d5cd;

  /* 다크 모드 카드 배경 */
  --card-bg: #181818;

  /* 다크 모드 그림자 (더 진하고 넓게 퍼짐) */
  --shadow: 0 2px 14px rgba(0,0,0,.5);

  /* 다크 모드 hover 오버레이 (흰색 계열, 살짝 밝아지는 효과) */
  --hover-overlay: rgba(54, 54, 54, 0.63);

  /* 다크 모드 강조색 글로우 효과 (레드) */
  --accent-glow: rgba(255,59,59,0.5);
}

/* ===== 다크 · HEH 브랜드풍 (완전한 블랙 + 오렌지 포인트) =====
   2026-09-28: 기존 오렌지/베이지 계열 다크 톤(#1b1712 등 갈색기 도는 배경)을
   순수 블랙(#000000)으로 교체. 배경·카드·구분선은 갈색기를 뺀 무채색 블랙 계열로,
   글자색(크림)과 포인트 컬러(오렌지)는 HEH 브랜드 톤 그대로 유지했습니다. */
html.dark[data-theme-variant="heh"] {
  /* 페이지/사이드바 전체 배경: 완전한 블랙 */
  --bg: #000000;
  /* 옅은 섹션·썸네일 자리표시 배경: 블랙보다 아주 살짝만 밝은 무채색 */
  --bg-soft: #0a0a0a;
  /* 떠 있는 패널 배경 */
  --bg-elevated: #0f0f0f;

  /* 글자색은 브랜드 크림 톤 유지 (순백보다 눈이 편함) */
  --text: #f3ead9;
  --text-sub: #b8a98d;

  /* 블랙 위에서 카드/구획이 또렷하게 보이도록 구분선만 약간 밝게 */
  --border: #2a2a2a;

  --accent: #FF6E3D;
  --accent-strong: #FF9662;
  --accent-tint: rgba(255,110,61,.14);

  /* 카드도 블랙에 가깝게 (테두리로 구분) */
  --card-bg: #0a0a0a;
  --shadow: 0 2px 14px rgba(0,0,0,.7);
  --hover-overlay: rgba(255,255,255,0.07);

  /* 본문 문단 전용 글자색 (--text보다 한 톤 죽여서 눈부심 완화) */
  --text-body: #ddd2ba;

  /* ⚠️ 이 테마만 accent-glow가 파란색(#0000FF)입니다. 의도한 색이 아니라면
     오렌지 계열(예: rgba(255,110,61,0.5))로 바꾸는 걸 권장합니다. (이번엔 손대지 않음) */
  --accent-glow: #0000FF;
}

html, body {
  background: var(--bg);
  color: var(--text);
  transition: background .25s ease, color .25s ease;
}

/* 다크 모드에서 이미지가 너무 쨍하지 않도록 살짝 톤 다운 (선택 적용) */
html.dark img:not(.no-dim) { filter: brightness(.92) contrast(1.02); }