/**
 * ベーススタイル - サイト全体で共通
 * 色・余白・フォントなどは変数で管理し、将来の機種追加時に変更しやすくする
 */
:root {
    /* カラー */
    --color-bg: #f5f5f5;
    --color-bg-card: #fff;
    --color-text: #333;
    --color-text-muted: #555;
    --color-text-sub: #666;
    --color-border: #e0e0e0;
    --color-border-input: #ccc;
    --color-primary: #333;
    --color-primary-hover: #555;
    --color-error-bg: #fff0f0;
    --color-error-text: #c00;
    --color-error-border: #fcc;
    --color-success: #2e7d32;

    /* 余白 */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;

    /* 角丸 */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    /* レイアウト */
    --max-width: 480px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Meiryo, sans-serif;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ヘッダー */
.site-header {
    background: var(--color-primary);
    color: #fff;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
}

.site-header__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.site-header__title {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
}

.site-header__sub {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* フッター */
.site-footer {
    margin-top: auto;
    padding: var(--spacing-lg);
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
    text-align: center;
}

.site-footer a {
    color: var(--color-text-sub);
    text-decoration: none;
    font-size: 0.875rem;
}

.site-footer a:hover {
    color: var(--color-primary);
}

/* メインコンテンツ */
.site-main {
    flex: 1;
    padding: var(--spacing-md);
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
}

h1 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

h2 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.subtitle {
    color: var(--color-text-sub);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

@media (min-width: 480px) {
    .site-header {
        padding: var(--spacing-lg) var(--spacing-xl);
        padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
    }

    .site-main {
        padding: var(--spacing-xl);
    }
}