/* wb-finding.css — 같은 그림 찾기 (test-workbook 원본) */

/* ── 문제 영역 ── */
.find-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 8px 0;
    gap: 10px;
}

/* ── 한 문제 행 ── */
.find-row {
    height: 195px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 18px;
    overflow: hidden;
    padding: 6px;
    gap: 8px;
}

/* ── 기준 그림 (왼쪽) ── */
.ref-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 175px;
    height: 100%;
    border: 2.5px solid #333;
    border-radius: 12px;
    padding: 4px;
}

.ref-box img {
    width: 145px;
    height: 145px;
    object-fit: contain;
}

/* ── 선택지 3개 (오른쪽) ── */
.choices {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px 12px;
}

.choice-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.choice-box img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

/* ── 2차 빈 슬롯 (choice-box) — 실선 테두리 + 흰 배경 (실 양식의 "빈 자리") ── */
/* 빈 상태는 placeholder 목적이므로 실제(130)보다 작게 → 레이아웃 여유 확보 */
.choice-box.blank {
    width: 105px;
    height: 105px;
    border: 2px solid #d0c8c0;
    border-radius: 12px;
    background: white;
    flex-shrink: 1;
}