/*!* === nonogram.css (게임 플레이용) === *!*/
/*body {*/
/*    !* (★ 삭제) font-family, align-items: center*/
/*      -> common_game_theme.css에서 관리합니다.*/
/*    *!*/
/*}*/

/*#board-viewport {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    max-width: 95vw; !* 화면 너비에 좀 더 맞춤 *!*/
/*    margin: 20px auto;*/
/*    !* (★ 핵심 수정) Flexbox로 자식 요소를 중앙 정렬합니다. *!*/
/*    display: flex;*/
/*    justify-content: center; !* 자식 요소를 수평 중앙 정렬 *!*/
/*    align-items: flex-start; !* 위쪽에 정렬 *!*/
/*}*/
/*.reveal-img {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    opacity: 0; !* Hidden by default *!*/
/*    pointer-events: none; !* Make them unclickable *!*/
/*    transition: opacity 1.5s ease-in-out; !* Fade animation *!*/
/*    transform-origin: top left; !* Align with the game board's scaling *!*/
/*}*/

/*.guide-line-right {*/
/*    border-right: 2px solid #999 !important;*/
/*}*/

/*.guide-line-bottom {*/
/*    border-bottom: 2px solid #999 !important;*/
/*}*/

/*#game-board {*/
/*    display: grid;*/
/*    gap: 1px;*/
/*    background-color: #999;*/
/*    border: 2px solid #333;*/
/*    transform-origin: top;*/
/*}*/
/*#game-controls {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*    !* (★ 삭제) 아래 속성들은 common_game_theme.css의 #game-controls 셀렉터가 관리합니다.*/
/*      max-width: 500px;*/
/*      margin-bottom: 15px;*/
/*    *!*/
/*    font-size: 1.2em;*/
/*    flex-wrap: wrap;*/
/*    gap: 15px;*/

/*    !* (★ 참고) common_game_theme에서 이미 background: white, padding, box-shadow 등이 적용된 상태입니다.*/
/*      이 CSS는 그 내부의 flex 정렬만 담당하게 됩니다.*/
/*    *!*/
/*}*/

/*#mode-selector {*/
/*    display: flex;*/
/*    gap: 5px;*/
/*    border: 1px solid #ccc;*/
/*    border-radius: 8px;*/
/*    padding: 4px;*/
/*    background-color: #f0f0f0;*/
/*}*/

/*#mode-selector label {*/
/*    cursor: pointer;*/
/*    user-select: none;*/
/*}*/

/*#mode-selector span {*/
/*    padding: 8px 15px;*/
/*    border-radius: 5px;*/
/*    display: block;*/
/*    transition: background-color 0.2s, color 0.2s;*/
/*}*/

/*#mode-selector input[type="radio"] {*/
/*    display: none;*/
/*}*/

/*#mode-selector input[type="radio"]:checked + span {*/
/*    background-color: #007bff; !* (★ 참고) 공통 테마의 파란색과 동일하므로 유지 *!*/
/*    color: white;*/
/*    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);*/
/*}*/
/*#hint-btn {*/
/*    padding: 8px 15px;*/
/*    font-weight: bold;*/
/*    cursor: pointer;*/
/*    border-radius: 5px;*/
/*    border: 1px solid #ccc;*/
/*}*/
/*#hint-btn:disabled {*/
/*    cursor: not-allowed;*/
/*    opacity: 0.5;*/
/*}*/

/*.col-clues-container, .row-clues-container {*/
/*    display: flex;*/
/*}*/
/*.row-clues-container {*/
/*    flex-direction: column;*/
/*}*/

/*.puzzle-grid-container {*/
/*    display: grid;*/
/*    border: 2px solid #333;*/
/*}*/

/*!* nonogram.css의 .clue-cell (게임용) *!*/
/*.clue-cell {*/
/*    background-color: #f0f0f0;*/
/*    font-weight: bold;*/
/*    font-size: 14px;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    padding: 5px;*/
/*}*/

/*.row-clue {*/
/*    justify-content: flex-end;  !* 힌트 오른쪽 정렬 *!*/
/*    align-items: center;*/
/*}*/

/*.col-clue {*/
/*    justify-content: center;   !* 힌트 가운데 정렬 *!*/
/*    align-items: flex-end;     !* 힌트 아래쪽 정렬 *!*/
/*    text-align: center;*/
/*    line-height: 1.2;          !* 줄 간격 *!*/
/*}*/

/*!* nonogram.css의 .grid-cell (게임용) *!*/
/*.grid-cell {*/
/*    background-color: #fff;*/
/*    border: 1px solid #ddd;*/
/*    box-sizing: border-box;*/
/*    cursor: pointer;*/
/*}*/

/*!* nonogram.css의 .filled (게임용) *!*/
/*.grid-cell.filled {*/
/*    background-color: #333;*/
/*}*/

/*.grid-cell.marked::after {*/
/*    content: 'X';*/
/*    color: #ff5c5c;*/
/*    font-weight: bold;*/
/*    font-size: 1.2em;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/*.grid-cell.incorrect {*/
/*    background-color: #ffcccc;*/
/*    animation: shake 0.5s;*/
/*}*/
/*@keyframes shake {*/
/*    0%, 100% { transform: translateX(0); }*/
/*    25% { transform: translateX(-5px); }*/
/*    75% { transform: translateX(5px); }*/
/*}*/


/*#result-overlay {*/
/*    position: fixed; !* 화면 전체에 고정 *!*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100vw; !* 뷰포트 너비 100% *!*/
/*    height: 100vh; !* 뷰포트 높이 100% *!*/
/*    background-color: rgba(0, 0, 0, 0.75); !* 반투명 검은 배경 *!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 100;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/
/*#result-overlay.visible {*/
/*    opacity: 1;*/
/*    pointer-events: auto;*/
/*}*/
/*#result-modal {*/
/*    background-color: white;*/
/*    padding: 20px 40px;*/
/*    border-radius: 10px;*/
/*    text-align: center;*/
/*    box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
/*}*/
/*#modal-title {*/
/*    margin-top: 0;*/
/*    font-size: 2.5em;*/
/*}*/
/*#modal-buttons button {*/
/*    padding: 10px 20px;*/
/*    margin: 0 10px;*/
/*    font-size: 1em;*/
/*    cursor: pointer;*/
/*    border-radius: 5px;*/
/*    border: 1px solid #ccc;*/
/*    min-width: 120px;*/
/*}*/
/*#modal-buttons button.primary {*/
/*    background-color: #4CAF50;*/
/*    color: white;*/
/*    border-color: #4CAF50;*/
/*}*/

/*.hidden {*/
/*    display: none;*/
/*}*/

/*.clue-cell.completed {*/
/*    color: #999; !* 색상을 회색으로 *!*/
/*    text-decoration: line-through; !* 취소선 *!*/
/*}*/

/*.grid-cell.locked {*/
/*    opacity: 0.8; !* 약간 투명하게 *!*/
/*}*/

/*.grid-cell.selecting {*/
/*    background-color: rgba(0, 123, 255, 0.3); !* 반투명 파란색 배경 *!*/
/*    border-color: rgba(0, 123, 255, 0.5);*/
/*}*/


/*!* === puzzle.css (업로드 미리보기용) - 충돌 해결됨 === *!*/

/*#puzzle-container {*/
/*    display: grid;*/
/*    !* We will set grid-template-columns/rows with JS *!*/
/*    grid-gap: 2px;*/
/*    margin-top: 20px;*/
/*    background-color: #333;*/
/*    border: 2px solid #333;*/
/*    width: fit-content;*/
/*}*/

/*!* (★충돌 해결) #puzzle-container 내부의 .grid-cell (미리보기 코너 셀) *!*/
/*#puzzle-container .grid-cell {*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    background-color: #f0f0f0;*/
/*    text-align: center;*/
/*    line-height: 25px;*/
/*    font-size: 14px;*/
/*    !* nonogram.css의 .grid-cell 스타일과 겹치지 않음 *!*/
/*    cursor: default;*/
/*    border: none;*/
/*}*/

/*!* (★충돌 해결) #puzzle-container 내부의 .clue-cell (미리보기 힌트 셀) *!*/
/*#puzzle-container .clue-cell {*/
/*    background-color: #cce7ff;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 5px;*/
/*    min-height: 25px;*/
/*    font-weight: bold;*/
/*    !* nonogram.css의 .clue-cell 스타일과 겹치지 않음 *!*/
/*    font-size: 14px;*/
/*}*/

/*.solution-cell {*/
/*    width: 25px;*/
/*    height: 25px;*/
/*}*/

/*!* (★충돌 해결) .filled 대신 .solution-cell.filled 사용 *!*/
/*.solution-cell.filled {*/
/*    background-color: #333;*/
/*}*/

/*!* .empty는 .solution-cell.empty로 사용 (upload.js 기준) *!*/
/*.solution-cell.empty {*/
/*    background-color: #fff;*/
/*}*/

/*#puzzle-wrapper {*/
/*    position: relative; !* Needed for absolute positioning of children *!*/
/*}*/

/*!* 이 ID는 nonogram.html에서 사용되지 않으므로 충돌 없음 *!*/
/*#success-animation-container {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    pointer-events: none; !* Allows clicking through the container *!*/
/*}*/

/*#success-animation-container img {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    opacity: 0; !* Hidden by default *!*/
/*    transition: opacity 1.0s ease-in-out; !* Fade animation *!*/
/*}*/