/* wb-coloring.css — 색칠하기 (test-workbook 원본, Phase 3) */

/* ── 컨텐츠 영역 ── */
.color-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px;
    overflow: hidden;
}

/* ── 참고 이미지 + 단어 ── */
.top-reference {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: flex-start;
}

.original-thumb {
    width: 220px;
    height: 220px;
    object-fit: contain;
    flex-shrink: 0;
}

.word-label {
    font-size: 38px;
    font-weight: 900;
    color: #555;
    letter-spacing: 4px;
}

/* ── 선화 영역 ── */
.coloring-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.coloring-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.coloring-img .img-placeholder {
    width: 480px;
    height: 480px;
    border-radius: 28px;
    border: 3px dashed #d0c8c0;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 48px;
}

/* ── 빈 미리보기 (단어 0개 상태) ── */
/* 상단 참고 썸네일 자리 */
.coloring-thumb-slot {
    width: 220px;
    height: 220px;
    border: 3px dashed #D4CCBE;
    border-radius: 20px;
    background: #fafafa;
    flex-shrink: 0;
}
/* 선화 영역 큰 네모 + 중앙 숫자 */
.coloring-blank-slot {
    width: 480px;
    height: 480px;
    border: 3px dashed #D4CCBE;
    border-radius: 28px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coloring-blank-num {
    font-size: 220px;
    font-weight: 800;
    color: #C9BFAD;
    line-height: 1;
    letter-spacing: -6px;
}