/* レイアウトフォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
.font-ja {
    font-family: 'Noto Serif JP', serif;
}

/* --- 白ベース（White） --- */
[data-base-color="white"] {
    --bg-main: #fbfcfd;          /* gray-50 を減らす */
    --bg-sub: #f9fafb;           /* gray-50 を増やす */
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-none: #ffffff;
    --border-main: #d1d5db;      /* gray-300 */
    --border-sub: #e5e7ebb3;     /* gray-200 */
    --text-main: #020617;        /* slate-950 */
    --text-sub: #4b5563;         /* gray-600 */
    --card-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* --- 黒ベース（Black） --- */
[data-base-color="black"] {
    --bg-main: #0a0a0a;          /*  */
    --bg-sub: #16181c;           /*  */
    --bg-glass: rgba(17, 18, 20, 0.7);
    --bg-none: #000000; 
    --border-main: rgba(255, 255, 255, 0.5);
    --border-sub: rgba(255, 255, 255, 0.1);
    --text-main: #f3f4f6;        /* gray-100 */
    --text-sub: #D1D5DBE6;       /* gray-300 90% */
    --card-shadow: 0 8px 15px -3px rgba(255, 255, 255, 0.08), 0 8px 10px -6px rgba(255, 255, 255, 0.04);
}

/* --- ユーティリティクラス割り当て --- */
.theme-bg-main     { background-color: var(--bg-main); }
.theme-bg-sub      { background-color: var(--bg-sub); }
.theme-bg-glass    { background-color: var(--bg-glass); }
.theme-bg-none     { background-color: var(--bg-none); }
.theme-bg-text     { background-color: var(--text-main); }
.theme-border-main { border-color: var(--border-main); }
.theme-border-sub  { border-color: var(--border-sub); }
.theme-border-none { border-color: var(--bg-main); }
.theme-text-main   { color: var(--text-main); }
.theme-text-sub    { color: var(--text-sub); }
.theme-shadow      { box-shadow: var(--card-shadow); }

.theme-divide-sub > :not(:first-child) {
    border-top: 1px solid var(--border-sub);
}

.theme-card {
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}
a.theme-card:hover {
    transform: translateY(-2px);
}

.theme-badge {
    border-radius: 0.5rem; /* rounded-lg */
}