/* wb-memory.css — 기억하기 (test-workbook 원본, 난이도별 스코핑) */

/* ── 공통 (기억 페이지) ── */
.memory-content {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
}

.memory-instruction {
    font-size:26px;
    font-weight:800;
    color:#555;
    background:#f3eaf9;
    border-radius:16px;
    padding:14px 32px;
    letter-spacing:1px;
}

.memory-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.memory-img-wrap {
    border:4px solid #e8d5f5;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
}

.memory-img {
    object-fit:contain;
}

.memory-label {
    font-weight:900;
    color:#333;
}

/* ── 공통 (찾기 페이지) ── */
.select-instruction {
    font-size:22px;
    font-weight:800;
    color:#555;
    text-align:center;
    margin:16px 0 20px;
    flex-shrink:0;
}

.select-grid {
    flex:1;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
    align-content:center;
}

.select-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:14px 10px;
    border:2.5px solid #e0d0f0;
    border-radius:16px;
    background:white;
}

.select-img {
    width:100%;
    aspect-ratio:1;
    object-fit:contain;
}

.select-label {
    font-size:18px;
    font-weight:800;
    color:#555;
    text-align:center;
}

/* ==========================================================================
   빈 슬롯 — Remember 페이지는 점선+회색+번호 / Select 페이지는 실선+흰
   ========================================================================== */

/* Remember 페이지: 점선+회색+중앙 숫자 */
.memory-img-wrap.blank {
    border: 3px dashed #D4CCBE !important;
    background: #fafafa;
}
.memory-img-wrap.blank .wbk-cell-num {
    font-weight: 800;
    color: #C9BFAD;
    line-height: 1;
    letter-spacing: -4px;
}
/* 난이도별 번호 크기 (img-wrap 크기에 맞춤) */
.memory-easy   .memory-img-wrap.blank .wbk-cell-num { font-size: 220px; }
.memory-medium .memory-img-wrap.blank .wbk-cell-num { font-size: 150px; }
.memory-hard   .memory-img-wrap.blank .wbk-cell-num { font-size: 120px; }
.memory-expert .memory-img-wrap.blank .wbk-cell-num { font-size: 140px; }

/* 라벨 자리 유지 (높이는 기존 font-size가 유지) */
.memory-label.blank {
    color: transparent;
    user-select: none;
}

/* Select 페이지: 실선+흰 배경 (2차 슬롯) */
.select-card.blank {
    background: white;
    /* 기존 select-card의 border 유지 (그림자/테두리 톤 일관) */
}
.select-img.blank {
    border: 2px solid #d0c8c0;
    border-radius: 12px;
    background: white;
}
.select-label.blank {
    color: transparent;
    user-select: none;
}

/* ── easy (1개 기억) ── */
.memory-easy .memory-content { gap:24px; }
.memory-easy .memory-img-wrap {
    width:320px;
    height:320px;
}
.memory-easy .memory-img {
    width:280px;
    height:280px;
}
.memory-easy .memory-label {
    font-size:52px;
    letter-spacing:4px;
}

/* ── medium (2개 기억) ── */
.memory-medium .memory-content { gap:28px; }
.memory-medium .memory-imgs {
    display:flex;
    gap:28px;
    justify-content:center;
    align-items:flex-start;
}
.memory-medium .memory-img-wrap {
    width:240px;
    height:240px;
    border-radius:24px;
}
.memory-medium .memory-img {
    width:200px;
    height:200px;
}
.memory-medium .memory-label {
    font-size:40px;
    letter-spacing:3px;
}

/* ── hard (3개 기억) ── */
.memory-hard .memory-content { gap:28px; }
.memory-hard .memory-imgs {
    display:flex;
    gap:18px;
    justify-content:center;
    align-items:flex-start;
}
.memory-hard .memory-card { gap:10px; }
.memory-hard .memory-img-wrap {
    width:185px;
    height:185px;
    border-width:3.5px;
    border-radius:20px;
}
.memory-hard .memory-img {
    width:155px;
    height:155px;
}
.memory-hard .memory-label {
    font-size:30px;
    letter-spacing:2px;
}

/* ── expert (4개 기억, 2×2 그리드) ── */
.memory-expert .memory-content { gap:28px; }
.memory-expert .memory-imgs {
    display:grid;
    grid-template-columns: repeat(2, 210px);
    gap:20px;
}
.memory-expert .memory-card { gap:10px; }
.memory-expert .memory-img-wrap {
    width:210px;
    height:210px;
    border-width:3.5px;
    border-radius:22px;
}
.memory-expert .memory-img {
    width:178px;
    height:178px;
}
.memory-expert .memory-label {
    font-size:28px;
    letter-spacing:2px;
}