/* 메인 스타일 템플릿 */
:root {
    --primary-color: #4CAF50;
    --secondary-color: #2196F3;
    --accent-color: #FF9800;
    --success-color: #8BC34A;
    --error-color: #F44336;
    --warning-color: #FFC107;
    --background-primary: #F5F5F5;
    --background-secondary: #FFFFFF;
    --text-primary: #212121;
    --text-secondary: #757575;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    background: var(--background-primary);
    color: var(--text-primary);
}

/* 일시정지/자동재생 버튼 (practice, learn 공통) */
.tts-toggle-btn, #pause-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to right, rgba(255, 78, 255, 1), rgba(153, 179, 255, 1));
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 10px 22px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(153,179,255,0.10);
    transition: background 0.15s, box-shadow 0.15s;
}
.tts-toggle-btn:hover, #pause-btn:hover, .tts-toggle-btn:focus, #pause-btn:focus {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px rgba(255,78,255,0.18);
}

/* 구구단 단 선택 버튼 (practice, learn 공통) */
.table-select-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-content: center;
    margin: 24px 0 16px 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.table-select-row label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
    min-height: 54px;
    padding: 0 0;
    border-radius: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(to right, rgba(255, 78, 255, 1), rgba(153, 179, 255, 1));
    box-shadow: 0 2px 12px rgba(153,179,255,0.10);
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
    user-select: none;
    margin: 0;
    outline: none;
}
.table-select-row label:active {
    transform: scale(0.97);
    box-shadow: 0 4px 18px rgba(255,78,255,0.18);
}
.table-select-row .table-check {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.table-select-row .custom-check {
    display: none;
}
.table-select-row .label-text {
    width: 100%;
    text-align: center;
    z-index: 1;
    padding: 0 0;
}
/* 미선택(비활성) 상태: 연한 그라데이션, 연보라 글씨 */
.table-select-row label:not(.checked) {
    background: linear-gradient(to right, rgba(245, 180, 255, 1), rgba(200, 210, 255, 1));
    color: #a06abf;
    font-weight: 600;
    box-shadow: none;
    border: none;
}
/* 체크(선택)된 버튼: 더 강한 그라데이션, 흰색 글씨, 그림자 */
.table-select-row label.checked {
    background: linear-gradient(to right, rgba(255, 78, 255, 1), rgba(153, 179, 255, 1));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 18px rgba(255,78,255,0.18);
    border: none;
}
.table-select-row label:hover {
    filter: brightness(1.10);
    box-shadow: 0 6px 24px rgba(255,78,255,0.16);
}
/* 마지막 줄 가운데 정렬 (8,9단) */
.table-select-row label:nth-child(7),
.table-select-row label:nth-child(8) {
    grid-column: span 1;
}
.table-select-row label:nth-child(7) {
    justify-self: end;
}
.table-select-row label:nth-child(8) {
    justify-self: start;
}
@media (max-width: 600px) {
    .table-select-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 98vw;
    }
    .table-select-row label {
        min-height: 38px;
        font-size: 1rem;
        padding: 0 0;
    }
}