/* --- 変数定義 --- */
:root {
    /* Colors */
    --color-primary: #003399;
    --color-accent: #e60012;
    --color-text-base: #222;
    --color-text-sub: #666;
    --color-background-light: #eee;
    --color-background-white: #fff;
    --color-border: #e0e0e0;
    --color-tag-bg: #f0f2f5;
    --color-toggle-off: #bdbdbd;
    --color-shadow: 0 4px 24px rgba(0,0,0,0.08);

    /* Typography */
    --font-family-base: 
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Noto Sans JP",
        "Meiryo",
        "Segoe UI",
        sans-serif;
    --font-size-xl: 24px;   /* ページタイトル */
    --font-size-l: 20px;    /* サブタイトル */
    --font-size-m: 18px;    /* 中見出しなど */
    --font-size-base: 15px; /* 基本文字サイズ */
    --font-size-s: 14px;    /* 補足や注釈 */
    --font-size-xs: 13px;   /* さらに小さい注釈 */
    --font-size-xxs: 12px;  /* さらに小さい */
    --font-size-xxxs: 10px; /* 最小 */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Spacing */
    --space-gutter: 32px;
    --space-card: 32px;
    --space-list-gap: 20px;

    /* Layout */
    --width-container: 1200px;
    --width-sidebar: 260px;
    --width-main: 900px;
    --radius-card: 4px;
    --radius-list: 8px;
    
    /* regist */
    --blue:#0D3B91;
    --text:#222;
    --muted:#666;
    --line:#d6d6d6;
    --bg:#f5f5f7;
    --badge:#e95497;
    --label-bg:#efefef;
}
/* --- 基本スタイル --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    color: var(--color-text-base);
    background-color: var(--color-background-light);
    font-size: var(--font-size-base);
    letter-spacing: 0.01em;
}

/* --- 媒体別ラベルカラー定義 --- */
.label.pcw {
    background-color: #36f;
    color: #fff;
}
.label.avw {
    background-color: #5e5858;
    color: #fff;
}
.label.ah {
    background-color: #ffa824;
    color: #fff;
}
.label.wf {
    background-color: #390;
    color: #fff;
}
.label.ipw {
    background-color: #19afc7;
    color: #fff;
}
.label.iw {
    background-color: #FFDE00;
    color: #333;
}
.label.dcw {
    background-color: #2e6162;
    color: #fff;
}
.label.kdw {
    background-color: #42b6ff;
    color: #FFF;
}
.label.ktw {
    background-color: #FFACB7;
    color: #333;
}
.label.clw {
    background-color: #A0D9F6;
    color: #333;
}
.label.kit {
    background-color: #102C54;
    color: #fff;
}
.label.car {
    background-color: #E30121;
    color: #fff;
}
.label.trw {
    background-color: #6EDAB8;
    color: #FFF;
}
.label.grw {
    background-color: #f583ae;
    color: #fff;
}
.label.gmw {
    background-color: #00CC66;
    color: #fff;
}
.label.hbw {
    background-color: #0e4459;
    color: #fff;
}
.label.mgw {
    background-color: #ffe200;
    color: #333;
}
.label.video {
    background-color: #0C3B91;
    color: #fff;
}
.label.ntp {
    background-color: #ea4089;
    color: #fff;
}

/* --- レスポンシブベース --- */
@media (max-width: 1200px) {
    :root {
        --width-container: 100vw;
        --width-sidebar: 220px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-xl: 20px;
        --font-size-l: 16px;
        --font-size-m: 15px;
        --font-size-base: 14px;
        --font-size-s: 13px;
        --font-size-xs: 12px;
        --radius-card: 5px;
        --radius-list: 6px;
        --space-card: 16px;
        --space-list-gap: 12px;
    }
}