/* --- 基本スタイル (ライトモード) --- */
body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    width: 100%;
    max-width: 640px; 
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

header h1 {
    font-size: 1.4em; /* 少し調整 */
    color: #444;
    margin: 0;
    text-align: left;
    flex-grow: 1;
    /* ★★★ 改行の高さを調整 ★★★ */
    line-height: 1.3; 
}

.theme-switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


.control-group {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

.control-group legend {
    font-weight: bold;
    padding: 0 5px;
    margin-left: 10px;
}

.radio-group label {
    cursor: pointer;
}

.dice-input {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#result-text {
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* --- ダークモードのスタイル --- */
body.dark-mode { background-color: #2c2c2c; color: #e0e0e0; }
body.dark-mode .container { background-color: #383838; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
body.dark-mode header { border-bottom-color: #444; }
body.dark-mode header h1 { color: #f0f0f0; }
body.dark-mode .control-group { border-color: #555; }
body.dark-mode .control-group legend { color: #e0e0e0; }
body.dark-mode .dice-input { background-color: #444; color: #e0e0e0; border-color: #666; }
body.dark-mode #result-text { background-color: #2a2a2a; color: #e0e0e0; border-color: #666; }
body.dark-mode #copy-button { background-color: #555; color: #e0e0e0; border-color: #777; }
body.dark-mode #copy-button:hover { background-color: #666; }
body.dark-mode .options-area { color: #ccc; }


/* --- トグルスイッチのスタイル --- */
.theme-toggle-label { margin-right: 8px; font-size: 0.8em; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #007bff; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 20px; }
.slider.round:before { border-radius: 50%; }


/* --- その他のスタイル --- */
.radio-group { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.input-group { display: flex; justify-content: center; gap: 10px; }
.dice-input { width: 60px; padding: 8px; font-size: 1.2em; text-align: center; }
.button-area { text-align: center; margin: 15px 0; }
#generate-button { padding: 12px 25px; font-size: 1.1em; font-weight: bold; color: #fff; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
#generate-button:hover { background-color: #0056b3; }
.options-area { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; font-size: 0.9em; }
.options-area label { cursor: pointer; display: inline-flex; align-items: center; }
.result-area { margin-top: 15px; }
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.result-header label { font-weight: bold; }
#copy-button { padding: 6px 12px; font-size: 0.9em; border-radius: 4px; cursor: pointer; }
#result-text { width: 100%; height: 180px; padding: 10px; border-radius: 4px; font-size: 1.1em; resize: vertical; }

/* --- レスポンシブ対応 --- */
@media (max-width: 600px) {
    body { padding: 0; }
    .container { padding: 15px; border-radius: 0; box-shadow: none; min-height: 100vh; }
    /* ★★★ タイトルのスタイルを調整 ★★★ */
    header h1 { 
        font-size: 1.1em;
        line-height: 1.2;
    }
    /* ★★★ ラベル非表示の指定を削除 ★★★ */
    /* .theme-toggle-label { display: none; } */
    .theme-switcher {
        gap: 5px; /* ラベルとスイッチの間隔を少し詰める */
    }
    .radio-group { flex-direction: column; align-items: flex-start; gap: 12px; }
    .input-group { justify-content: space-around; }
    .dice-input { width: 28%; padding: 10px 5px; }
    #result-text { height: 150px; font-size: 1em; }
    .options-area { flex-direction: column; align-items: center; gap: 8px; }
}