@charset "utf-8";

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

/* galleryTadi list */
[data-board="gallery_default"] {display:grid;grid-template-columns:repeat(auto-fill, minmax(252px, 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); transition:all 0.3s ease; 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); transition:all 0.2s ease;}
[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;}
/* 그림 그리기 게시판 스타일 */

/* 기본 설정 */
:root {
  --primary-color: var(--board-dark, #434a54);
  --text-color: var(--board-gray-900, #212121);
  --border-color: var(--board-gray-300, #e0e0e0);
  --bg-light: var(--board-gray-50, #fafafa);
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --border-radius: var(--board-radius-sm, 4px);
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 드로잉 영역 */
.drawing-area {}
.drawing-container {}
/* 드로잉 도구 바 */
.drawing-tools {margin-bottom:var(--spacing-md); padding:var(--spacing-md); border:1px solid var(--border-color); border-radius:var(--border-radius); background:var(--bg-light);}
.tool-row {display:flex; flex-wrap:wrap; align-items:center; gap:var(--spacing-md);}
.tool-row.bottom-row {margin-top:var(--spacing-md); padding-top:var(--spacing-md); border-top:1px solid var(--border-color);}
.tool-group {display:flex; align-items:center; gap:var(--spacing-sm); padding:4px 8px;}
.tool-group label {margin:0; color:var(--text-color); font-size:13px; white-space:nowrap;}
/* 도구 버튼 */
.tool-btn {display:flex; align-items:center; padding:8px 12px; border:1px solid var(--border-color); border-radius:var(--border-radius); background:white; font-size:13px; cursor:pointer; gap:4px;transition:all 0.2s ease; white-space:nowrap;}
.tool-btn:hover {border-color:var(--primary-color); background:var(--bg-light);}
.tool-btn.active {border-color:var(--primary-color); background:var(--primary-color); color:white;}
.tool-btn i {font-size:16px;}
/* 굵기 슬라이더 */
.size-slider {width:200px; height:8px; margin:0 8px; border:1px solid var(--board-gray-800, #424242); border-radius:4px; outline:none; background:var(--board-gray-200, #eeeeee); box-shadow:0 2px 4px rgba(0,0,0,0.1); -webkit-appearance:none;}
.size-slider::-webkit-slider-thumb {width:22px; height:22px; border:3px solid var(--board-white-only, #ffffff); border-radius:50%; background:var(--board-gray-800, #424242); box-shadow:0 3px 6px rgba(0,0,0,0.3); cursor:pointer; -webkit-appearance:none;}
.size-slider::-moz-range-thumb {width:22px; height:22px; border:3px solid var(--board-white-only, #ffffff); border-radius:50%; background:var(--board-gray-800, #424242); box-shadow:0 3px 6px rgba(0,0,0,0.3); cursor:pointer;}
.size-slider::-webkit-slider-track {height:8px; border-radius:4px; background:var(--board-gray-800, #424242);}
.size-slider::-moz-range-track {height:8px; border:none; border-radius:4px; background:var(--board-gray-800, #424242);}

#size-display {min-width:30px; color:var(--board-dark, #434a54); font-size:12px; font-weight:600;}
/* 색상 팔레트 */
.colors {gap:var(--spacing-sm);}
.color-palette {display:flex; gap:4px;}
.color-btn {width:28px; height:28px; border:2px solid transparent; border-radius:50%; cursor:pointer; transition:all 0.2s ease;}
.color-btn:hover {border-color:var(--text-color); transform:scale(1.1);}
.color-btn.active {border-color:var(--primary-color); box-shadow:var(--shadow-light); transform:scale(1.15);}
/* 캔버스 영역 */
.canvas-wrapper {text-align:center;}
#drawing-canvas {display:block; max-width:100%; height:auto; margin:0 auto; border:4px solid var(--border-color); border-radius:var(--board-radius-lg); background:white; cursor:crosshair;}
/* #drawing-canvas:hover {border-color:var(--primary-color);} */
.canvas-info {margin-top:var(--spacing-sm);}
.canvas-info small {color:var(--board-gray-600, #757575); font-size:12px;}
/* 반응형 디자인 */
@media (max-width:768px) {
  .tool-row {flex-direction:column; gap:var(--spacing-sm);}
  .tool-group {flex-wrap:wrap; justify-content:center;}
  #drawing-canvas {width:100%; max-width:100%;}
  .color-palette {flex-wrap:wrap; justify-content:center;}
  .size-slider {width: 150px;}
}

@media (max-width:480px) {
  .size-slider {width: 120px;}
}
/* 도구별 커서 */
.canvas-wrapper[data-tool="pen"] #drawing-canvas {cursor:none;}
.canvas-wrapper[data-tool="eraser"] #drawing-canvas {cursor:none;}

/* 브러시 커서 */
#drawing-canvas {
  position: relative;
}

.brush-cursor {position:fixed; z-index:1000; border:2px solid var(--board-gray-800, #424242); border-radius:50%; background:var(--board-overlay-200, rgba(15, 23, 42, 0.4)); pointer-events:none; transform:translate(-50%, -50%); transition:width 0.1s ease, height 0.1s ease;}
/* 헤더 수정 */
.boardWriteHeader h3 u {color:var(--primary-color);}
/* 버튼 텍스트 수정 */
#btn_submit {font-weight:500;}
/* 로딩 상태 */
.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(--border-radius); background:rgba(0, 0, 0, 0.8); color:white; font-size:14px; transform:translate(-50%, -50%);}
/* 그림 플레이어 스타일 */
.drawing-player {margin:var(--spacing-lg) 0;}
.player-container {}
/* 플레이어 컨트롤 */
.player-controls {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:var(--spacing-sm); padding:var(--spacing-md); border:1px solid var(--border-color); border-radius:var(--ui-radius-m); background:var(--bg-light); gap:var(--spacing-md);}
.control-group {display:flex; align-items:center; gap:var(--spacing-sm);}
.control-btn {display:flex; align-items:center; padding:8px 12px; border:1px solid var(--border-color); border-radius:var(--border-radius); font-size:13px; cursor:pointer; gap:4px;transition:all 0.2s ease;}
.control-btn:hover {border-color:var(--primary-color); background:var(--bg-light);}
.control-btn i {font-size:16px;}
.speed-control {display:flex; align-items:center; gap:var(--spacing-sm);}
.speed-control label {margin:0; font-size:13px;}
.speed-control select {padding:4px 8px; border:1px solid var(--border-color); border-radius:var(--border-radius); background:white;}
.progress-info {display:flex; align-items:center; color:var(--board-gray-900, #212121); font-size:13px; gap:4px;}
/* 진행바 */
.progress-bar {margin:var(--spacing-md) 0;}
.progress-track {position:relative; height:8px; border-radius:4px; background:var(--board-gray-300, #e0e0e0); cursor:pointer;}
.progress-fill {width:0%; height:100%; border-radius:4px; background:var(--primary-color); 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(--primary-color); 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(--border-color); border-radius:var(--ui-radius-m); 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(--border-radius); background:rgba(0, 0, 0, 0.7); color:white;}
.play-overlay {text-align:center;}
.play-overlay i {margin-bottom:var(--spacing-sm); opacity:0.9; font-size:48px;}
.play-overlay p {margin:0; font-size:16px;}
.error-overlay {color:var(--board-danger, #ed5565); text-align:center;}
.error-overlay i {margin-bottom:var(--spacing-sm); font-size:48px;}
.no-drawing {padding:var(--spacing-lg); color:var(--board-gray-600, #757575); text-align:center;}
/* 반응형 플레이어 */
@media (max-width:768px) {
  .player-controls {justify-content:center; flex-direction:column; gap:var(--spacing-sm);}
  .control-group {flex-wrap:wrap; justify-content:center;}
  #player-canvas {width:100%; max-width:100%;}
  .play-overlay i {font-size:36px;}
  .play-overlay p {font-size:14px;}
}

/* 주제어 관련 스타일 */
.topic-area {display:flex; align-items:center; padding:var(--spacing-md); border:1px solid var(--border-color); border-radius:var(--border-radius); background:var(--board-gray-50, #fafafa); gap:var(--spacing-sm);}
.topic-area label {margin:0; color:var(--board-dark, #434a54); font-size:14px; font-weight:500;}
.topic-word {padding:10px 20px; border-radius:var(--border-radius); background:var(--color-prime) !important; color:var(--board-white-only, #ffffff); font-size:20px; font-weight:600;}
/* 정답 뱃지 */
.correct-badge {display:inline-flex; align-items:center; margin-left:8px !important; padding:4px 8px !important; border-radius:12px !important; background:var(--board-mint, #48cfad) !important; color:var(--board-white-only, #ffffff) !important; font-size:12px !important; font-weight:600 !important; gap:4px;animation:correctBadge 0.5s ease;}
.correct-badge i {font-size:14px;}
/* 애니메이션 */
@keyframes correctBadge {
  0% {opacity:0; transform:scale(0.8);}
  50% {transform:scale(1.1);}
  100% {opacity:1; transform:scale(1);}
}

/* 목록용 정답 뱃지 스타일 */
[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, #48cfad); color:var(--board-white-only, #ffffff); 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, #ed5565);}
.firework.color2 {background:var(--board-lightblue, #4fc1e9);}
.firework.color3 {background:var(--board-blue, #5d9cec);}
.firework.color4 {background:var(--board-green, #a0d468);}
.firework.color5 {background:var(--board-yellow, #ffce54);}
.firework.color6 {background:var(--board-purple, #ac92ec);}
.firework.color7 {background:var(--board-mint, #48cfad);}
.firework.color8 {background:var(--board-orange, var(--board-warning));}
@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));}
}
.celebration-text {position:fixed; z-index:10000; top:30%; left:50%; color:var(--board-danger, #ed5565); 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 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);}
}



/* 주제어 영역 */