body { 
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    transition: background-color 0.3s ease;
}

/* 入力済みの文字の色 */
.romaji-typed {
    color: #28a745; /* 緑 */
}

/* 入力中の文字（入力済み部分） */
.romaji-typing {
    color: #111827; /* 黒に近いグレー */
}

/* ★修正点: これから打つ文字の、最初の1文字に適用するスタイル */
.current {
    background-color: #e9ecef; /* グレーの背景 */
    border-radius: 2px;
    color: #111827; /* 黒に近いグレー */
}

/* まだ手をつけていない未来の文字 */
.romaji-untyped {
    color: #a1a1aa; /* 薄いグレー */
}

/* ★修正点: 共通のタイピングボックススタイル */
.typing-box { 
    font-family: 'Courier New', Courier, monospace; 
    font-weight: bold;
    line-height: 1.6; /* 行間 */
    overflow-wrap: break-word; /* 単語単位で折り返す */
    word-break: normal; /* ★修正: 単語の途中で切らない */
    white-space: pre-wrap; /* スペースや改行をそのまま表示 */
}

/* spanタグが改行に影響しないようにする */
.typing-box span {
    display: inline;
    white-space: pre-wrap;
}

/* チェックボックスのカスタムスタイル */
.form-checkbox { appearance: none; -webkit-appearance: none; height: 1.25rem; width: 1.25rem; background-color: #fff; border-radius: 0.25rem; border: 1px solid #ccc; display: inline-block; position: relative; cursor: pointer; margin-right: 0.5rem; vertical-align: middle; }
.form-checkbox:checked { background-color: #3b82f6; border-color: #3b82f6; }
.form-checkbox:checked::after { content: '✔'; position: absolute; color: white; font-size: 0.8rem; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.screen {
    display: none;
}