/* =============================================
   common_base_20260507.css
   全ツール共通ベース（最小構成・安全版）
   作成日: 2026-05-07
   ※ break_zyokyo.css とは干渉しないよう設計
   ============================================= */

:root {
    --c-primary: #007bff;
    --c-primary-dark: #0056b3;
    --c-primary-deep: #003087;
    --c-bg: #fdfdfd;
    --c-surface: #f0f4ff;
    --c-surface2: #fafafa;
    --c-border: #ddd;
    --c-text: #333;
    --c-text-muted: #555;
    --c-text-dim: #666;
    --c-heading: #222;
    --c-btn-main: #007bff;
    --c-btn-copy: #43a047;
    --c-btn-sub: #757575;
    --c-btn-danger: #c62828;
    --c-warn-bg: #fff8e1;
    --c-warn-border: #f9a825;
    --c-warn-text: #5d4037;
    --c-error: #d32f2f;
    --radius: 4px;
}

/* ベース */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', Meiryo, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    max-width: 960px;
    margin: 0 auto;
    padding: 0 12px 40px;
}

/* ヘッダー・ナビゲーション */
header {
    margin-top: 16px;
    margin-bottom: 1em;
}

nav[aria-label="関連リンク"] {
    font-size: 0.88em;
    padding: 0.5em 0.8em;
    background-color: var(--c-surface);
    border-bottom: 2px solid var(--c-primary);
}

nav[aria-label="関連リンク"] a {
    color: var(--c-primary-dark);
    text-decoration: none;
    padding: 0 0.3em;
}

nav[aria-label="関連リンク"] a:hover {
    color: var(--c-primary-deep);
    text-decoration: underline;
}

/* 見出し */
h2 {
    font-size: 1.1em;
    margin: 1.3em 0 0.5em;
    color: var(--c-heading);
    border-left: 3px solid var(--c-primary);
    padding-left: 0.5em;
}

/* フォーム部品 */
label {
    display: block;
    font-size: 0.88em;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}

textarea, select {
    width: 100%;
    padding: 0.55em;
    border: 1px solid #ccc;
    border-radius: var(--radius);
    background: #fff;
    color: var(--c-text);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

textarea:focus, select:focus {
    outline: 2px solid var(--c-primary);
    border-color: var(--c-primary);
}

textarea[readonly] {
    background: #f8f8f8;
    cursor: default;
}

/* ボタン共通 */
.action-btn {
    display: inline-block;
    padding: 0.45em 0.95em;
    border: none;
    border-radius: var(--radius);
    font-size: 0.88em;
    cursor: pointer;
    color: #fff;
    background-color: var(--c-btn-main);
    transition: filter 0.18s ease, transform 0.1s ease;
    margin: 4px 2px;
}

.action-btn:hover:not(:disabled) {
    filter: brightness(0.88);
    transform: translateY(-1px);
}

.action-btn:disabled {
    background-color: #bdbdbd;
    cursor: not-allowed;
}

/* 役割別ボタン */
.btn-copy   { background-color: var(--c-btn-copy); }
.btn-sub    { background-color: var(--c-btn-sub); }
.btn-danger { background-color: var(--c-btn-danger); }

/* ユーティリティ */
.hidden { display: none !important; }

.warning {
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: 4px;
    padding: 0.6em 0.9em;
    font-size: 0.88em;
    color: var(--c-warn-text);
}

.error {
    color: var(--c-error);
    font-size: 0.85em;
}

/* 基本レイアウト */
.input-output-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0;
}

.input-output-wrapper section {
    flex: 1;
    min-width: 280px;
}

/* レスポンシブ */
@media (max-width: 600px) {
    body { padding: 0 8px 30px; }
    h2 { font-size: 1em; }
    .input-output-wrapper {
        flex-direction: column;
        gap: 12px;
    }
    .input-output-wrapper section {
        min-width: auto;
        width: 100%;
    }
}