@charset "utf-8";

/* --------------------------------------------------------
BOARD - LIST
----------------------------------------------------------*/
.boardListWrap {position:relative;}

/* galleryTadi list */
[data-board="gallery_default"] {display:grid;grid-template-columns:repeat(auto-fill, minmax(325px, auto)); grid-gap:20px; scrollbar-width:none;-webkit-box-pack:center;}
[data-board="gallery_default"] .cardBox {display:flex; flex-direction:column; position:relative; overflow:hidden; gap:10px; border-radius:8px; background:var(--board-white); box-shadow:0 0px 0px 1px var(--board-gray-300); opacity:0; transform:translateY(20px); animation:fadeInUp 0.6s ease forwards;}
[data-board="gallery_default"] .cardBox.active,
[data-board="gallery_default"] .cardBox:hover {z-index:1; transform:translateY(-8px) scale(1.02); box-shadow:0 0px 0px 1px var(--color-prime);}
[data-board="gallery_default"] .cardBox .checkBox {position:absolute; z-index:1; top:20px; right:20px; opacity:0; transform:scale(0.8); }
[data-board="gallery_default"] .cardBox:hover .checkBox {opacity:1; transform:scale(1);}
[data-board="gallery_default"] .cardBox .thumb {display:flex; justify-content:center; position:relative; overflow:hidden; border-radius:8px;}
[data-board="gallery_default"] .cardBox .thumb .labelBox {position:absolute; z-index:1; top:6px; left:6px;}
[data-board="gallery_default"] .cardBox:hover .thumb .labelBox {transform:translateY(0); opacity:1;}
[data-board="gallery_default"] .cardBox .thumb .picLabelBox {position:absolute; z-index:1; top:unset; bottom:6px; left:6px;}
[data-board="gallery_default"] .cardBox .thumb img {width:100%; transition:transform 0.4s ease;}
[data-board="gallery_default"] .cardBox:hover .thumb img {transform:scale(1.05);}
[data-board="gallery_default"] .cardBox .thumb .youtube_ico {display:flex; justify-content:center; align-items:center; position:absolute; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); opacity:0; transition:all 0.3s ease;}
[data-board="gallery_default"] .cardBox:hover .thumb .youtube_ico {opacity:1;}
[data-board="gallery_default"] .cardBox .thumb .youtube_ico img {width:50px; transform:scale(0.8); transition:transform 0.2s ease;}
[data-board="gallery_default"] .cardBox:hover .thumb .youtube_ico img {transform:scale(1);}
[data-board="gallery_default"] .cardBox .cardBoxContent {display:flex; flex-direction:column; justify-content:space-between; gap:20px; height:40%;}
[data-board="gallery_default"] .cardBox .cardBoxContent .titleBox {display:flex; flex-direction:column; gap:10px;}
[data-board="gallery_default"] .cardBox .cardBoxContent .titleBox .title {display:block; color:var(--board-gray-900); font-size:16px; font-weight:600; line-height:1.2; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
[data-board="gallery_default"] .cardBox .cardBoxContent .titleBox .title a {font-size:16px;}
[data-board="gallery_default"] .cardBox:hover .cardBoxContent .titleBox .title {color:var(--color-prime);}
[data-board="gallery_default"] .cardBox .cardBoxContent .titleBox .desc {display:block; color:var(--board-gray-500); font-size:13px; font-weight:400; text-align:left; line-height:1.4; opacity:0.8; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
[data-board="gallery_default"] .cardBox:hover .cardBoxContent .titleBox .desc {opacity:1;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox {justify-content:space-between; align-items:center; display:flex;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .user {display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:var(--board-gray-300); border-radius:50%; overflow:hidden; transition:transform 0.2s ease;}
[data-board="gallery_default"] .cardBox:hover .cardBoxContent .infoBox .user {transform:scale(1.1);}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .user img {width:100%; height:100%; border-radius:50%; object-fit:cover;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .info {gap:10px; display:flex; align-items:center;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .info dl {width:auto; border:0; margin:0; display:flex; align-items:center; gap:4px;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .info dl dt {color:var(--board-gray-500); font-size:14px;}
[data-board="gallery_default"] .cardBox .cardBoxContent .infoBox .info dl dd {color:var(--board-gray-600); font-size:13px; margin:0;}

.admin-topic-info {display:flex; align-items:center; padding:var(--spacing-sm); border:1px solid var(--border-color); border-radius:var(--ui-radius-m); background:var(--bg-light); margin-bottom:20px;}
.admin-topic-info .topic-wrap {display:flex; align-items:center; gap:10px;}
.admin-topic-info .topic-wrap i {}
.admin-topic-info .topic-wrap .txt {padding:6px 10px; border-radius:6px; background:var(--color-prime);}

/* 애니메이션 키프레임 */
@keyframes fadeInUp {
  0% {opacity:0; transform:translateY(20px);}
  100% {opacity:1; transform:translateY(0);}
}

/* 로딩 애니메이션 */
[data-board="gallery_default"].loading .cardBox {animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse {
  0%, 100% {opacity:0.4;}
  50% {opacity:0.8;}
}

/* 반응형 애니메이션 조정 */
@media (max-width: 768px) {
  [data-board="gallery_default"] .cardBox:hover {transform:translateY(-4px) scale(1.01);}
  [data-board="gallery_default"] .cardBox:hover .thumb img {transform:scale(1.02);}
}

@media (prefers-reduced-motion: reduce) {
  [data-board="gallery_default"] .cardBox {animation:none; opacity:1; transform:none;}
  [data-board="gallery_default"] .cardBox:hover {transform:none; transition:box-shadow 0.2s ease;}
}

/* 그림 그리기 게시판 스타일 */
.boardWriteWrap .boardWrite .boardWriteBody .writeBox .title-area {display:flex; gap:10px;}
.boardWriteWrap .boardWrite .boardWriteBody .writeBox .title-area input {font-size:16px; font-weight:600;}

/* 드로잉 에디터 컨테이너 - 수직 스택 레이아웃 */
.drawing-editor-container {display:flex; flex-direction:column; gap:16px; margin-bottom:20px; padding:20px; background:var(--board-white); border:1px solid var(--board-gray-200); border-radius:var(--board-radius-lg);}

/* 왼쪽: 에디터 섹션 (캔버스) */
.editor-section {display:flex; flex-direction:column; gap:20px;}
.editor-section .canvas-wrapper {display:flex; justify-content:center;}

/* 하단: 툴바 섹션 - 필 형태 */
.toolbar-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--board-white);
  border: 1px solid var(--board-gray-200);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* 구분선 */
.toolbar-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--board-gray-200);
}

/* AI 생성기 섹션 */
.ai-generator-section {margin-bottom:0;}
.ai-generator-section .tool-group-title {display:flex; align-items:center; gap:6px; margin-bottom:12px; font-size:14px; font-weight:600; color:var(--board-gray-800);}
.ai-generator-section .tool-group-title i {font-size:16px; color:var(--color-prime);}
.ai-generator-wrapper {display:flex; flex-direction:column; gap:10px;}
.btn-generate-ai {display:flex; align-items:center; justify-content:center; padding:6px 14px; border:none; border-radius:var(--board-radius-sm); background:var(--color-prime); color:var(--board-white-only); font-size:13px; font-weight:600; cursor:pointer; gap:6px; white-space:nowrap;}
.btn-generate-ai:hover {opacity:0.9; transform:translateY(-1px);}
.btn-generate-ai:active {transform:translateY(0);}
.btn-generate-ai:disabled {opacity:0.6; cursor:not-allowed; transform:none;}
.btn-generate-ai i {font-size:18px;}

/* 도구 버튼 그룹 - 가로 배치 */
.tool-buttons {display:flex; gap:2px;}

/* 도구 버튼 */
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--board-gray-600);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tool-btn:hover {
  background: var(--board-gray-100);
  color: var(--board-gray-900);
}
.tool-btn.active {
  background: var(--color-prime);
  color: #ffffff;
}
.tool-btn i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.tool-btn > span:not(.color-preview):not(.bg-color-preview):not(.size-number) {
  display: none;
}

/* 브러시 크기 버튼 (아이콘 + 숫자) */
.tool-btn.size-trigger-btn {
  width: auto;
  padding: 0 8px;
  gap: 2px;
}
.size-number {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  min-width: 14px;
  text-align: center;
}

/* 편집 컨트롤 - 가로 배치 */
.editor-controls {display:flex; gap:2px;}
.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--board-gray-600);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.control-btn:hover:not(:disabled) {
  background: var(--board-gray-100);
  color: var(--board-gray-900);
}
.control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.control-btn i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.control-btn span {
  display: none;
}

/* 팝업 트리거 래퍼 */
.popup-trigger-wrap {position:relative;}

/* 팝업 패널 (위로 열림) */
.toolbar-popup {display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:12px; background:var(--board-white); border:1px solid var(--board-gray-200); border-radius:var(--board-radius-sm); box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:100; white-space:nowrap;}
.toolbar-popup.active {display:block;}
.toolbar-popup::after {content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--board-white);}
.toolbar-popup::before {content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--board-gray-200);}

/* 브러시 크기 슬라이더 (팝업 내) */
.size-control {display:flex; align-items:center; gap:8px;}
.size-slider {width:150px; height:6px; margin:0; border-radius:3px; outline:none; background:var(--board-gray-300); -webkit-appearance:none;}
.size-slider::-webkit-slider-thumb {width:18px; height:18px; border:2px solid var(--board-white-only); border-radius:50%; background:var(--board-gray-800); box-shadow:0 2px 4px rgba(0,0,0,0.3); cursor:pointer; -webkit-appearance:none;}
.size-slider::-moz-range-thumb {width:18px; height:18px; border:2px solid var(--board-white-only); border-radius:50%; background:var(--board-gray-800); box-shadow:0 2px 4px rgba(0,0,0,0.3); cursor:pointer;}
.size-slider::-webkit-slider-track {height:6px; border-radius:3px; background:var(--board-gray-300);}
.size-slider::-moz-range-track {height:6px; border:none; border-radius:3px; background:var(--board-gray-300);}
#size-display {min-width:24px; font-size:11px; font-weight:600;}

/* 색상 트리거 버튼 */
.color-trigger-btn {
  padding: 0 !important;
  width: 38px;
  height: 38px;
}
.color-preview {display:block; width:20px; height:20px; border-radius:50%; border:2px solid var(--board-gray-300);}

/* 컬러 피커 (원형) */
.color-picker-circle {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--board-gray-200);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  background: none;
}
.color-picker-circle::-webkit-color-swatch-wrapper {padding:2px;}
.color-picker-circle::-webkit-color-swatch {border:none; border-radius:50%;}
.color-picker-circle::-moz-color-swatch {border:none; border-radius:50%;}

/* 팝업 타이틀 */
.popup-title {margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--board-gray-200); color:var(--board-gray-700); font-size:11px; font-weight:600; text-align:center; letter-spacing:0.5px; text-transform:uppercase;}

/* 배경색 버튼 */
.bg-color-btn {
  padding: 0 !important;
  width: 38px;
  height: 38px;
}
.bg-color-preview {display:block; width:20px; height:20px; border-radius:4px; border:2px solid var(--board-gray-300);}
.bg-palette {grid-template-columns:repeat(8, 1fr) !important;}
.bg-color-custom-picker {display:block; width:100%; height:28px; margin-top:8px; padding:0; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-sm); cursor:pointer; -webkit-appearance:none; background:none;}
.bg-color-custom-picker::-webkit-color-swatch-wrapper {padding:2px;}
.bg-color-custom-picker::-webkit-color-swatch {border:none; border-radius:2px;}
.bg-color-custom-picker::-moz-color-swatch {border:none; border-radius:2px;}

/* 도형 선택 팝업 */
.shape-options {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.shape-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--board-gray-300);
    border-radius: 8px;
    background: var(--board-white);
    color: var(--board-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.shape-option:hover {
    border-color: var(--color-prime);
    color: var(--color-prime);
}
.shape-option.active {
    background: var(--color-prime);
    border-color: var(--color-prime);
    color: #ffffff;
}
.shape-option i {
    font-size: 18px;
}
.shape-fill-option {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--board-gray-200);
}
.fill-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--board-gray-700);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.fill-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-prime);
    cursor: pointer;
}

/* AI 그리기 툴바 버튼 */
.tool-btn.ai-tool-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 색상 팔레트 (팝업 내) */
.color-palette {display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; margin-top:6px;}
.color-chip {width:24px; height:24px; border:2px solid transparent; outline:1px solid var(--board-gray-300); border-radius:50%; cursor:pointer; transition:transform 0.1s;}
.color-chip:hover {transform:scale(1.15);}
.color-chip.active {outline:2px solid var(--color-prime); outline-offset:1px;}

/* 캔버스 */
#drawing-canvas {display:block; width:100%; height:auto; background:var(--board-white-only); border-radius: var(--board-radius-lg); box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1); cursor:crosshair;}
.canvas-info {margin-top:8px; text-align:center;}
.canvas-info small {color:var(--board-gray-600); font-size:12px;}


/* 도구별 커서 */
.canvas-wrapper[data-tool="brush"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="pencil"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="pen"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="marker"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="eraser"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="shape"] #drawing-canvas {cursor:crosshair;}
.canvas-wrapper[data-tool="eyedropper"] #drawing-canvas {cursor:crosshair;}

/* 반응형 디자인 */
@media (max-width:768px) {
  .drawing-editor-container {padding:12px;}
  .toolbar-section {
    flex-wrap: wrap;
    border-radius: 16px;
    gap: 2px;
    padding: 6px;
  }
  .tool-btn, .control-btn {
    width: 34px;
    height: 34px;
  }
  .tool-btn i, .control-btn i {
    font-size: 18px;
  }
  .toolbar-divider {display:none;}
  .toolbar-popup {left:0; transform:none;}
  .toolbar-popup::after, .toolbar-popup::before {left:16px; transform:none;}
}
@media (max-width:480px) {
  .size-slider {width:100px;}
}

/* 브러시 커서 */
.brush-cursor {position:fixed; z-index:1000; border:2px solid var(--board-gray-800); border-radius:50%; background:var(--board-overlay-200); pointer-events:none; transform:translate(-50%, -50%); transition:width 0.1s ease, height 0.1s ease;}

/* 로딩 상태 */
.drawing-container.loading {opacity:0.7; pointer-events:none;}
.drawing-container.loading::after {content:"로딩 중..."; position:absolute; top:50%; left:50%; padding:8px 16px; border-radius:var(--board-radius-sm); background:rgba(0, 0, 0, 0.8); color:white; font-size:14px; transform:translate(-50%, -50%);}
/* 그림 플레이어 스타일 */
.drawing-player {margin:24px 0;}
.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--board-white);
    border: 1px solid var(--board-gray-200);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.player-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--board-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.player-btn:hover {
    background: var(--board-gray-100);
    color: var(--board-gray-900);
}
.player-btn i {
    font-size: 20px;
}
.player-divider {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--board-gray-200);
}
.speed-control {display:flex; align-items:center; gap:8px;}
.speed-control label {margin:0; font-size:13px;}
.speed-control select {padding:4px 8px; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-sm); background:white;}
.progress-info {display:flex; align-items:center; padding:0 8px; color:var(--board-gray-600); font-size:13px; font-weight:500; gap:2px;}
.time-separator {color:var(--board-gray-400);}
.progress-bar {margin:16px 0;}
.progress-track {position:relative; height:8px; border-radius:4px; background:var(--board-gray-300); cursor:pointer;}
.progress-fill {width:0%; height:100%; border-radius:4px; background:var(--color-prime); transition:width 0.1s ease;}
.progress-thumb {position:absolute; top:50%; left:0%; width:16px; height:16px; border:2px solid white; border-radius:50%; background:var(--color-prime); cursor:pointer; transform:translate(-50%, -50%);}
.player-container .canvas-wrapper {position:relative; text-align:center;}
#player-canvas {display:block; width:100%; max-width:100%; height:auto; margin:0 auto; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-lg); background:white;}
.canvas-overlay {display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:var(--board-radius-sm); background:rgba(0, 0, 0, 0.7); color:white;}
.play-overlay {text-align:center;}
.play-overlay i {margin-bottom:8px; opacity:0.9; font-size:48px;}
.play-overlay p {margin:0; font-size:16px;}
.error-overlay {color:var(--board-danger); text-align:center;}
.error-overlay i {margin-bottom:8px; font-size:48px;}
.no-drawing {padding:24px; color:var(--board-gray-600); text-align:center;}

/* 주제어 관련 스타일 */
.topic-area {display:flex; align-items:center; flex-wrap:wrap; padding:16px; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-sm); background:var(--board-gray-50); gap:8px;}
.topic-area label {margin:0; font-size:14px; font-weight:500;}
.topic-word {padding:10px 20px; border-radius:var(--board-radius-lg); background:var(--color-prime) !important; color:var(--board-white-only); font-size:20px; font-weight:600;}
.topic-area .ai-btn {margin-left:auto; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#ffffff; border:none; transition:all 0.3s ease;}
.topic-area .ai-btn:hover {background:linear-gradient(135deg, #764ba2 0%, #667eea 100%); transform:translateY(-2px); box-shadow:0 4px 12px rgba(102, 126, 234, 0.4);}
.topic-area .ai-btn i {font-size:16px; margin-right:4px;}
.topic-area .ai-btn:disabled {opacity:0.6; cursor:not-allowed; transform:none;}

/* AI 상태 표시 */
.ai-status {display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--board-radius-sm); background:#e3f2fd; color:#1976d2; font-size:13px; animation:fadeIn 0.3s ease;}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(-10px);}
  to {opacity:1; transform:translateY(0);}
}
.loading-spinner {display:inline-block; width:14px; height:14px; border:2px solid rgba(25, 118, 210, 0.2); border-top-color:#1976d2; border-radius:50%; animation:spin 0.8s linear infinite;}

/* 정답 뱃지 */
.correct-badge {display:inline-flex; align-items:center; margin-left:8px !important; padding:4px 8px !important; border-radius:12px !important; background:var(--board-mint) !important; color:var(--board-white-only) !important; font-size:12px !important; font-weight:600 !important; gap:4px; animation:correctBadge 0.5s ease;}
.correct-badge i {font-size:14px;}
[data-board="uxc_list"] .iconBox.correct-badge {display:inline-flex; justify-content:center; align-items:center; width:auto; height:auto; min-width:auto; margin-left:4px; padding:2px 6px; border-radius:10px; background:var(--board-mint); color:var(--board-white-only); font-size:10px; font-weight:600; gap:2px; animation:correctBadge 0.5s ease;}
[data-board="uxc_list"] .iconBox.correct-badge i {margin:0; font-size:14px;}
[data-board="uxc_list"] .cardBox:hover .iconBox.correct-badge {transform:scale(1.1);}

/* 폭죽 효과 */
.fireworks-container {position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; overflow:hidden; pointer-events:none;}
.firework {position:absolute; width:8px; height:8px; border-radius:50%; animation:firework 2s ease-out forwards;}
.firework.color1 {background:var(--board-danger);}
.firework.color2 {background:var(--board-lightblue);}
.firework.color3 {background:var(--board-blue);}
.firework.color4 {background:var(--board-green);}
.firework.color5 {background:var(--board-yellow);}
.firework.color6 {background:var(--board-purple);}
.firework.color7 {background:var(--board-mint);}
.firework.color8 {background:var(--board-orange);}
.celebration-text {position:fixed; z-index:10000; top:30%; left:50%; color:var(--board-danger); font-size:48px; font-weight:bold; text-shadow:2px 2px 4px rgba(0,0,0,0.3); transform:translate(-50%, -50%); pointer-events:none; animation:celebrationBounce 2s ease-out forwards;}

/* 애니메이션 */
@keyframes spin {to {transform:rotate(360deg);}}
@keyframes correctBadge {
  0% {opacity:0; transform:scale(0.8);}
  50% {transform:scale(1.1);}
  100% {opacity:1; transform:scale(1);}
}
@keyframes firework {
  0% {opacity:1; transform:scale(0) translate(0, 0);}
  20% {opacity:1; transform:scale(1.5) translate(var(--dx), var(--dy));}
  100% {opacity:0; transform:scale(0) translate(var(--dx), var(--dy));}
}
@keyframes celebrationBounce {
  0% {opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-10deg);}
  30% {opacity:1; transform:translate(-50%, -50%) scale(1.2) rotate(5deg);}
  60% {transform:translate(-50%, -50%) scale(0.9) rotate(-2deg);}
  80% {transform:translate(-50%, -50%) scale(1.05) rotate(1deg);}
  100% {opacity:0; transform:translate(-50%, -50%) scale(1) rotate(0deg);}
}

/* 반응형 플레이어 */
@media (max-width:768px) {
  .player-controls {border-radius: 16px; padding: 6px;}
  #player-canvas {width:100%; max-width:100%;}
  .play-overlay i {font-size:36px;}
  .play-overlay p {font-size:14px;}
}

/* ========================================
   게시판 설정 팝업 스타일
======================================== */
#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 .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; width:calc(100% - 70px);}
#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);}
/* 모달 열림 애니메이션 */
#boardSettingPop.active .settingForm {animation:settingFadeInUp 0.4s ease;}
@keyframes settingFadeInUp {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}