/* ============================================
   SETTING MODAL STYLES
   ============================================ */

/* Setting Modal 전용 스타일 */
/* RPG Modal 공통 스타일은 modal-common.css에 정의되어 있습니다 */

/* Setting Modal header 스타일은 modal-common.css의 .card.rpg-modal 공통 스타일을 따름 */

/* 설정 옵션 행 (음악 재생, 단어 읽기) — 다른 버튼과 비슷한 윤곽선, 폰트 키움, 좌측 정렬 */
.gold-adjuster-modal-card .setting-option-row {
    width: 80%;
    margin: 0 auto 10px;
    text-align: left;
    padding: clamp(12px, 2vh, 18px) clamp(16px, 4vw, 24px);
    border-radius: 14px;
    border: 3px solid rgba(231, 189, 105, 0.9);
    background: rgba(0, 0, 0, 0.2);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.gold-adjuster-modal-card .setting-option-row:first-of-type {
    margin-top: 0;
}

/* 버튼(.btn-main)과 동일한 폰트 크기 */
.gold-adjuster-modal-card .setting-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    margin: 0;
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 900;
    color: rgba(245, 245, 255, 0.95);
    letter-spacing: 0.5px;
    -webkit-user-select: none;
    user-select: none;
}

.gold-adjuster-modal-card .setting-checkbox-label input[type='checkbox'] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    accent-color: var(--primary);
    cursor: pointer;
}

.gold-adjuster-modal-card .setting-checkbox-label span {
    flex: 1;
}

/* Setting Menu 버튼 스타일은 buttons.css의 .modal-btn-main 사용 */

/* 설정메뉴 숫자패드 */
.setting-modal-wrapper .card.rpg-modal .num-btn {
    width: 60px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid rgba(231, 189, 105, 0.55);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(245, 245, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.setting-modal-wrapper .card.rpg-modal .num-btn:active {
    transform: translateY(1px);
}

/* Password Input */
#password-input-boxes {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.password-box {
    width: 30px;
    height: 40px;
    border: 2px solid #555;
    background-color: #222;
    border-radius: 6px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary);
}

/* Gold Adjuster */
.gold-adjuster {
    margin: 20px 0;
    text-align: center;
}

.gold-adjust-label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 5px;
}

.gold-display-box {
    background: #111;
    padding: 10px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 15px;
    min-width: 150px;
}

.gold-adjust-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.gold-arrow {
    font-size: 18px;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0 15px;
}

/* Print Modal 문제 타입 라디오 버튼 그룹 (Choice Chip 스타일) */
.print-radio-group {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    width: 100%;
    justify-content: center;
    margin: 20px 0;
}

.print-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    padding: clamp(5px, 0.7vh, 8px) clamp(12px, 1.5vw, 18px);
    border-radius: 20px;
    transition: all 0.3s ease;
    background: rgba(30, 30, 30, 0.7);
    border: 2px solid rgba(255, 213, 79, 0.4);
    color: var(--primary);
    font-size: clamp(14px, 3.5vw, 14px);
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    max-width: calc((100% - 20px) / 3);
}

.print-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.print-radio-text {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-shadow: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.print-radio:checked + .print-radio-text {
    color: var(--gold);
}

/* 선택된 라디오 버튼의 라벨 스타일 */
.print-radio-label.checked {
    background: rgba(255, 193, 7, 0.25) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow:
        0 0 15px rgba(255, 193, 7, 0.5),
        0 4px 12px rgba(255, 213, 79, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* :has() 지원 브라우저를 위한 추가 스타일 */
.print-radio-label:has(.print-radio:checked) {
    background: rgba(255, 193, 7, 0.25);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow:
        0 0 15px rgba(255, 193, 7, 0.5),
        0 4px 12px rgba(255, 213, 79, 0.4);
    transform: translateY(-2px);
}