@charset "utf-8";

/* ========================================
   공통 CSS 변수 및 기본 설정
======================================== */
:root {
    --transition-base: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --focus-outline: 2px solid var(--color-prime);
    --focus-offset: 2px;
}


/* ========================================
   게시판 설정 팝업 스타일
======================================== */
/* 설정 폼 컨테이너 */
#boardSettingPop .settingForm {margin-bottom:25px;}
#boardSettingPop .settingForm:last-child {margin-bottom:0;}
/* 설정 제목 */
#boardSettingPop .settingTitle {margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid var(--board-gray-300); color:var(--board-gray-900); font-size:15px; font-weight:700; letter-spacing:-0.02em;}
/* ========================================
   라디오 버튼 그룹 스타일
======================================== */
#boardSettingPop .radioGroup {display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; padding:4px;}
#boardSettingPop .radioItem {position:relative;}
#boardSettingPop .radioItem .opt {display:block; width:100%; height:100%;}
#boardSettingPop .radioItem input[type="radio"] {outline:none;}
#boardSettingPop .radioItem label {display:flex; align-items:center; height:100%; padding:12px 15px; border:2px solid var(--board-gray-200); border-radius:var(--board-radius); background:var(--board-white); cursor:pointer; transition:all 0.3s ease;}
#boardSettingPop .radioItem label:hover {border-color:var(--board-gray-300); background:var(--board-gray-50);}
#boardSettingPop .radioItem input[type="radio"]:checked + label {border-color:var(--color-prime);}
#boardSettingPop .radioItem input[type="radio"]:checked + label::before {border-color:var(--color-prime); background:var(--color-prime);}
#boardSettingPop .radioItem input[type="radio"]:checked + label::after {content:''; position:absolute; left:22px; width:8px; height:8px; border-radius:50%; background:var(--board-white-only);}
#boardSettingPop .radioItem input[type="radio"]:focus ~ label {outline:none;}
#boardSettingPop .radioItem .text {display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
#boardSettingPop .radioItem .text strong {color:var(--board-gray-900); font-size:14px; font-weight:600; line-height:1.3;}
#boardSettingPop .radioItem .text small {display:none; color:var(--board-gray-500); font-size:11px; font-weight:400; line-height:1.3;}
#boardSettingPop .radioItem input[type="radio"]:checked + label .text strong {color:var(--color-prime);}
/* ========================================
   스위치 토글 스타일
======================================== */
#boardSettingPop .switchGroup {display:flex; flex-direction:column; gap:15px;}
#boardSettingPop .switchItem {display:flex; align-items:center; padding:15px; border:1px solid var(--board-gray-200); border-radius:var(--board-radius); background:var(--board-white); gap:15px;}
#boardSettingPop .switchText {display:flex; flex-direction:column; gap:2px;}
#boardSettingPop .switchText strong {color:var(--board-gray-900); font-size:14px; font-weight:600; line-height:1.3;}
#boardSettingPop .switchText small {color:var(--board-gray-500); font-size:12px; font-weight:400; line-height:1.3;}
/* ========================================
   버튼 스타일
======================================== */
#boardSettingPop .buttonWrap {display:flex; padding:20px; border-top:1px solid var(--board-gray-200); background:var(--board-gray-50); gap:10px;}
#boardSettingPop .buttonWrap .button {padding:12px 20px; font-size:14px; font-weight:600; flex:1;transition:all 0.3s ease;}
#boardSettingPop .buttonWrap .button.bg-pr:hover {background:var(--board-primary-dark); box-shadow:0 4px 12px var(--board-overlay-300); transform:translateY(-2px);}
#boardSettingPop .buttonWrap .button.shadowline-gray-300:hover {border-color:var(--board-gray-400); background:var(--board-gray-100);}
/* ========================================
   로딩 상태 표시
======================================== */
.loading-spinner {display:inline-block; width:20px; height:20px; border:3px solid var(--board-gray-300); border-top-color:var(--color-prime); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin {
    to {transform:rotate(360deg);}
}
.loading-overlay {display:flex; justify-content:center; align-items:center; position:absolute; z-index:9999; top:0; left:0; right:0; bottom:0; background:rgba(255, 255, 255, 0.8);}

/* ========================================
   반응형 디자인
======================================== */
/* 태블릿 크기 */
@media (max-width: 1024px) {
    #boardSettingPop .radioGroup {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .boardListWrap .toolBox {
        flex-direction: column;
        gap: 10px;
    }
}

/* 모바일 크기 */
@media (max-width:768px) {
    #boardSettingPop .radioGroup {grid-template-columns:1fr;}
    #boardSettingPop .radioItem label {padding:10px 12px;}
    #boardSettingPop .radioItem label::before {width:18px; height:18px; margin-right:10px;}
    #boardSettingPop .radioItem input[type="radio"]:checked + label::after {left:20px; width:6px; height:6px;}
    #boardSettingPop .switch {width:50px; height:28px;}
    #boardSettingPop .switch_handle {width:22px; height:22px;}
    #boardSettingPop .switch_input:checked + .switch_label + .switch_handle {transform:translateX(22px);}
}
/* ========================================
   애니메이션 효과
======================================== */
@keyframes radioSelect {
    0% {opacity:0; transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {opacity:1; transform:scale(1);}
}
#boardSettingPop .radioItem input[type="radio"]:checked + label::after {animation:radioSelect 0.3s ease;}
/* 모달 열림 애니메이션 */
#boardSettingPop.active .settingForm {animation:fadeInUp 0.4s ease;}
@keyframes fadeInUp {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}
/* 첫번째 폼 */
#boardSettingPop.active .settingForm:nth-child(1) {animation-delay:0.1s;}
/* 두번째 폼 */
#boardSettingPop.active .settingForm:nth-child(2) {animation-delay:0.2s;}