/* 全要素の共通設定 */
* { box-sizing: border-box; }

:root { 
    --bg: #f2f2f7; 
    --card: #ffffff; 
    --text: #1c1c1e; 
    --sub: #86868b; 
    --accent: #5856d6; 
    --link: #007afc;
}

body { 
    font-family: 'Noto Sans JP', sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    padding: 20px 15px; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 850px; margin: 0 auto; }

/* ヘッダー・ナビゲーション */
.back-link { 
    display: inline-block; 
    text-decoration: none; 
    color: var(--link); 
    font-weight: bold; 
    margin-bottom: 20px; 
    font-size: 0.9rem; 
    transition: opacity 0.2s; 
}
.back-link:hover { opacity: 0.7; }

h1 { font-size: 1.5rem; text-align: center; margin-bottom: 25px; font-weight: 700; }

/* カードスタイル */
.card { 
    background: var(--card); 
    border-radius: 18px; 
    padding: 25px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}
.card-h { 
    font-size: 0.85rem; 
    font-weight: bold; 
    color: var(--sub); 
    margin-bottom: 15px; 
    border-left: 4px solid var(--accent); 
    padding-left: 12px; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

/* フォーム・ボタン（共通） */
input[type="text"] { 
    width: 100%; 
    border: 1px solid #d1d1d6; 
    border-radius: 10px; 
    padding: 12px; 
    font-size: 1rem; 
    box-sizing: border-box; 
    margin-bottom: 12px; 
}
.btn { 
    width: 100%; 
    background: var(--accent); 
    color: white; 
    border: none; 
    padding: 14px; 
    border-radius: 10px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 1rem; 
    transition: opacity 0.2s;
}
.btn:hover { opacity: 0.9; }

/* モノスペース（結果表示用） */
pre, code, .mono { 
    font-family: 'JetBrains Mono', monospace; 
}

footer { text-align: center; margin-top: 40px; font-size: 0.75rem; color: var(--sub); }

@media (max-width: 600px) {
    .card { padding: 15px; }
    h1 { font-size: 1.3rem; }
}