/* ===========================================================================
   System C — 윈도우 영역. "영역 × 테마" 구조(model/dao/Setting.go):
     영역 A = 윈도우 본체 표면 그 자체 (기본만: 배경 + 폰트 2종 + 테두리)
     영역 B = 그 위의 컨텐츠·카드·노말버튼 (기본/강조, 폰트 3종 + 테두리)
     영역 C = 영역 B 위에 얹히는 컨텐츠 셀 (기본·강조, 키 구성은 영역 B 와 같다 —
              활동 탭 셀, 공유 기록 후기/페어 그리드 등)
     영역 D = 그 위에 다시 얹는 말풍선 (기본만, 배경 불투명 — 프로필 한마디·댓글 블록)

   여기 값은 폴백일 뿐이다 — 실제로 화면을 칠하는 건 서버가 렌더한
   <style>{{.Setting.InitialThemeCSS}}</style>(model/dto/SettingCSS.go)이고,
   그 뒤 homepage.js가 /api/homepage/info 값으로 다시 덮어쓴다.
   ========================================================================== */
:root {
  /* 영역 A — 윈도우 본체 (기본만) */
  --system-c-area-a-base-color: #000;
  --system-c-area-a-base-rgb: 0, 0, 0;
  --system-c-area-a-base-alpha: var(--surface-alpha);
  --system-c-area-a-base-font-color: #fff;
  --system-c-area-a-base-font-rgb: 255, 255, 255;
  --system-c-area-a-base-desc-font-color: rgba(255, 255, 255, .5);
  --system-c-area-a-base-border-color: #fff;
  --system-c-area-a-base-border-rgb: 255, 255, 255;
  --system-c-area-a-base-border-alpha: 1;

  /* 영역 B — 기본 */
  --system-c-area-b-base-color: #fff;
  --system-c-area-b-base-rgb: 255, 255, 255;
  --system-c-area-b-base-alpha: 1;
  --system-c-area-b-base-font-color: #fff;
  --system-c-area-b-base-font-rgb: 255, 255, 255;
  --system-c-area-b-base-desc-font-color: rgba(255, 255, 255, .5);
  --system-c-area-b-base-divider-color: #b3b3b3;
  --system-c-area-b-base-divider-rgb: 179, 179, 179;
  --system-c-area-b-base-divider-alpha: 1;
  --system-c-area-b-base-border-color: #fff;
  --system-c-area-b-base-border-rgb: 255, 255, 255;
  --system-c-area-b-base-border-alpha: 1;

  /* 영역 B — 강조 */
  --system-c-area-b-accent-color: #2b97ff;
  --system-c-area-b-accent-rgb: 43, 151, 255;
  --system-c-area-b-accent-alpha: .1;
  --system-c-area-b-accent-font-color: var(--system-c-area-b-base-font-color);
  --system-c-area-b-accent-desc-font-color: rgba(255, 255, 255, .5);
  --system-c-area-b-accent-border-color: #2b97ff;
  --system-c-area-b-accent-border-rgb: 43, 151, 255;
  --system-c-area-b-accent-border-alpha: .75;

  /* 영역 C — 영역 B 위에 얹히는 컨텐츠(활동 탭 셀, 후기/페어 그리드). 키 구성은 B와 같다. */
  --system-c-area-c-base-color: #fff;
  --system-c-area-c-base-rgb: 255, 255, 255;
  --system-c-area-c-base-alpha: 1;
  --system-c-area-c-base-font-color: #fff;
  --system-c-area-c-base-font-rgb: 255, 255, 255;
  --system-c-area-c-base-desc-font-color: rgba(255, 255, 255, .5);
  --system-c-area-c-base-divider-color: #b3b3b3;
  --system-c-area-c-base-divider-rgb: 179, 179, 179;
  --system-c-area-c-base-divider-alpha: 1;
  --system-c-area-c-base-border-color: #fff;
  --system-c-area-c-base-border-rgb: 255, 255, 255;
  --system-c-area-c-base-border-alpha: 1;
  --system-c-area-c-accent-color: #2b97ff;
  --system-c-area-c-accent-rgb: 43, 151, 255;
  --system-c-area-c-accent-alpha: .1;
  --system-c-area-c-accent-font-color: var(--system-c-area-c-base-font-color);
  --system-c-area-c-accent-desc-font-color: rgba(255, 255, 255, .5);
  --system-c-area-c-accent-border-color: #2b97ff;
  --system-c-area-c-accent-border-rgb: 43, 151, 255;
  --system-c-area-c-accent-border-alpha: .75;

  /* 영역 D — 말풍선(한마디·댓글 블록). 기본만, 배경 불투명 */
  --system-c-area-d-base-color: #fff;
  --system-c-area-d-base-rgb: 255, 255, 255;
  --system-c-area-d-base-font-color: #fff;
  --system-c-area-d-base-font-rgb: 255, 255, 255;
  --system-c-area-d-base-border-color: #fff;
  --system-c-area-d-base-border-rgb: 255, 255, 255;
  --system-c-area-d-base-border-alpha: 1;

  /* 버튼 — 노말/중요. 배경은 버튼이라 항상 불투명(투명도 없음). */
  --system-c-button-base-color: #fff;
  --system-c-button-base-rgb: 255, 255, 255;
  --system-c-button-base-font-color: #000;
  --system-c-button-base-border-color: #fff;
  --system-c-button-base-border-rgb: 255, 255, 255;
  --system-c-button-base-border-alpha: 1;
  --system-c-button-accent-color: #2b97ff;
  --system-c-button-accent-alpha: .1;
  --system-c-button-accent-rgb: 43, 151, 255;
  --system-c-button-accent-font-color: #000;
  --system-c-button-accent-border-color: #2b97ff;
  --system-c-button-accent-border-rgb: 43, 151, 255;
  --system-c-button-accent-border-alpha: 1;
  --system-c-button-primary-border-color: #2b97ff;
  --system-c-button-primary-border-rgb: 43, 151, 255;
  --system-c-button-primary-border-alpha: 1;
}

/* ---------------------------------------------------------------------------
   영역 C 셀 — 영역 B 판 위에 얹히는 컨텐츠(활동 탭 카드, 공유 기록 후기/페어).
   셀 안의 부품(.grid-cell-title, .grid-cell-meta, .activity-title,
   .avatar-chip-label …)은 전부 --system-c-area-b-* 를 !important
   로 참조하므로, 셀 배경만 영역 C 로 바꾸면 글자는 영역 B 에 남아 따로 논다.
   규칙마다 덮어쓰는 대신 셀에서 영역 B 변수를 영역 C 값으로 다시 정의해 통째로
   물려준다 — 안쪽은 손대지 않아도 되고, 나중에 붙는 부품도 자동으로 따라온다.
   말풍선(.activity-comment)은 영역 D 를 직접 쓰므로 여기 영향이 없다.
   --------------------------------------------------------------------------- */
/* 좁은 창에서 접힌 메뉴(.shared-side)는 영역 B 판이 된다 — 그 위에 얹힌 카드
   (기록/사용자/기념일/메뉴)는 여기 규칙으로 영역 C 가 된다(요청). */
.shared-layout.is-nav-small .shared-side > *,
.activity-post,
.shared-review-grid > .grid-cell,
.shared-pair-cell {
  --system-c-area-b-accent-alpha: var(--system-c-area-c-accent-alpha);
  --system-c-area-b-accent-border-alpha: var(--system-c-area-c-accent-border-alpha);
  --system-c-area-b-accent-border-color: var(--system-c-area-c-accent-border-color);
  --system-c-area-b-accent-border-rgb: var(--system-c-area-c-accent-border-rgb);
  --system-c-area-b-accent-color: var(--system-c-area-c-accent-color);
  --system-c-area-b-accent-desc-font-color: var(--system-c-area-c-accent-desc-font-color);
  --system-c-area-b-accent-font-color: var(--system-c-area-c-accent-font-color);
  --system-c-area-b-accent-rgb: var(--system-c-area-c-accent-rgb);
  --system-c-area-b-base-alpha: var(--system-c-area-c-base-alpha);
  --system-c-area-b-base-border-alpha: var(--system-c-area-c-base-border-alpha);
  --system-c-area-b-base-border-color: var(--system-c-area-c-base-border-color);
  --system-c-area-b-base-border-rgb: var(--system-c-area-c-base-border-rgb);
  --system-c-area-b-base-color: var(--system-c-area-c-base-color);
  --system-c-area-b-base-desc-font-color: var(--system-c-area-c-base-desc-font-color);
  --system-c-area-b-base-divider-alpha: var(--system-c-area-c-base-divider-alpha);
  --system-c-area-b-base-divider-color: var(--system-c-area-c-base-divider-color);
  --system-c-area-b-base-divider-rgb: var(--system-c-area-c-base-divider-rgb);
  --system-c-area-b-base-font-color: var(--system-c-area-c-base-font-color);
  --system-c-area-b-base-font-rgb: var(--system-c-area-c-base-font-rgb);
  --system-c-area-b-base-rgb: var(--system-c-area-c-base-rgb);
}