/* 문제은행 편집기 v3: 2학기 그림 격자 고르기 */
.v3-photo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3-photo-bar span { color: var(--editor-muted); font-size: 12px; }
.v3-open { min-height: 30px; padding: 3px 12px; border: 1.5px solid var(--editor-blue); border-radius: 8px; background: var(--editor-blue); color: #fff; font-size: 13px; font-weight: 800; }
.v3-open:hover { background: var(--editor-blue-dark); }
.v3-open.v3-open-small { min-height: 26px; padding: 1px 8px; font-size: 12px; }

/* v1의 파일명 드롭다운(기존 자료 연결, 교체할 자료 선택)은 v3에서 숨긴다. 기능 연결용으로 DOM에는 남긴다. */
.v2-photo-tools .photo-toolbar > label.form-field, .v2-photo-tools [data-photo-action="connect"], .v2-photo-tools [data-photo-candidate] { display: none !important; }
.photo-row-actions [data-photo-replace], .photo-row-actions [data-photo-action="replace"] { display: none !important; }

.v3-picker { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(15, 35, 45, .55); }
.v3-picker[hidden] { display: none; }
.v3-picker-card { display: flex; flex-direction: column; width: min(1500px, 100%); height: min(900px, 100%); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.v3-picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e1e9eb; }
.v3-picker-head strong { font-size: 16px; }
.v3-picker-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.v3-picker-count { color: var(--editor-muted); font-size: 13px; }
.v3-close { margin-left: auto; min-height: 30px; padding: 3px 12px; border: 1px solid #b9d2d7; border-radius: 8px; background: #fff; font-weight: 800; }
.v3-picker-body { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.v3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 8px; overflow: auto; padding: 12px; background: #f4f8f9; }
.v3-tile { position: relative; display: grid; grid-template-rows: 120px auto; gap: 4px; padding: 6px; border: 2px solid #dbe6e8; border-radius: 9px; background: #fff; text-align: center; cursor: pointer; }
.v3-tile img { width: 100%; height: 120px; object-fit: contain; }
.v3-tile span { color: #36586a; font-size: 12px; font-weight: 700; }
.v3-tile em { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 6px; background: #23794f; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.v3-tile em.is-used { background: #6b7a83; }
.v3-tile:hover { border-color: #8fbccb; }
.v3-tile.is-selected { border-color: var(--editor-blue); box-shadow: 0 0 0 3px rgba(25, 107, 147, .25); }
.v3-tile.is-linked { background: #effaf3; }
.v3-detail { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding: 12px; border-left: 1px solid #e1e9eb; }
.v3-detail img { width: 100%; max-height: 520px; object-fit: contain; border: 1px solid #e1e9eb; border-radius: 8px; background: #f7fafa; }
.v3-meta { margin: 0; color: #36586a; font-size: 13px; overflow-wrap: anywhere; }
.v3-apply { min-height: 40px; border: 0; border-radius: 9px; background: #23794f; color: #fff; font-size: 15px; font-weight: 900; }
.v3-apply:disabled { background: #9db3ab; cursor: default; }
.v3-status { margin: 0; color: #9a4a3c; font-size: 13px; }
.v3-empty { color: var(--editor-muted); font-size: 13px; }
@media (max-width: 999px) {
  .v3-picker-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .v3-detail { max-height: 45vh; border-top: 1px solid #e1e9eb; border-left: 0; }
}