/* hidden 속성은 어떤 display 규칙보다 우선한다(개별 .x[hidden] 규칙 대신 한 줄) */
[hidden] { display: none !important; }
/* 새 화면(등록·검수 폼·상세 페이지·관리자) 추가 스타일. 디자인 토큰은 hub.css(기존 Hana Creative Hub)를 그대로 사용한다. */

.muted { color: var(--text-tertiary); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 600; margin: 0; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty-state, .error-page {
  background: var(--bg-secondary); border: 1px dashed var(--border-default); border-radius: var(--radius-200);
  padding: 48px 24px; text-align: center; color: var(--text-secondary);
}
.error-page h1 { font-size: 40px; margin: 0 0 8px; }
.badge { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--blue-500); color: #fff; font-size: 13px; line-height: 20px; text-align: center; vertical-align: middle; }
.tag-warning { background: #fff8e6; color: #9a6700; }
[data-theme="dark"] .tag-warning { background: #4a3a12; color: #ffd58a; }
.notice { padding: 10px 12px; border-radius: var(--radius-200); border: 1px solid var(--border-default); background: var(--bg-secondary); }
.notice-warning { border-color: var(--yellow-400); }
.notice a { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 0 0; color: var(--blue-500); }
.link-btn { border: 0; background: none; color: var(--blue-500); cursor: pointer; padding: 0; font-weight: 600; font-size: 13.5px; }
.btn.active { border-color: var(--blue-500); color: var(--blue-500); background: var(--blue-soft); }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* 표 (관리자·검수 대기) */
.table { width: 100%; border-collapse: collapse; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-200); overflow: hidden; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: middle; font-size: 14px; }
.table th { background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.table tr:last-child td { border-bottom: 0; }
.thumb-sm { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--bg-default); }
.thumb-xs { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.swatch-sm { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--swatch); border: 1px solid rgba(0,0,0,.16); vertical-align: -2px; margin-right: 4px; }

/* 플래시 */
.flash-area { position: fixed; top: 66px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.flash { padding: 10px 14px; border-radius: var(--radius-200); background: var(--bg-secondary); border: 1px solid var(--border-default); box-shadow: var(--shadow); }
.flash-success { border-color: var(--green-500); }
.flash-warning { border-color: var(--yellow-400); }
.flash-error { border-color: var(--red-500); }

/* 라이브러리 추가 요소 (기존 디자인 위에 얹는 것) */
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.library-toolbar .t { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.library-toolbar .form-select { width: auto; height: 32px; }
.library-desc-inline { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.7; }
.library-card { cursor: pointer; display: flex; flex-direction: column; }
.library-card:hover { border-color: var(--blue-500); }
.library-card .asset-name { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.chip-filter { cursor: pointer; background: var(--blue-soft); color: var(--blue-500); border: 0; }
.asset-list .row-link { cursor: pointer; }
.asset-list .row-link:hover td { background: var(--bg-hover); }
.pagination { display: flex; gap: 4px; justify-content: center; align-items: center; margin: 20px 0; }
.pagination .btn { min-width: 34px; justify-content: center; padding: 0 8px; }
.pagination .btn.active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

/* 상세 페이지 (기존 모달 레이아웃을 페이지로) */
.detail-title { display: flex; align-items: center; gap: 12px; }
.detail-title h1 { margin: 0; font-size: 20px; }
.detail-page .detail-layout { margin-top: 4px; }
.kv { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; margin: 0; font-size: 14px; }
.kv dt { color: var(--text-tertiary); font-size: 13px; }
.kv dd { margin: 0; color: var(--text-secondary); }
.detail-page .tag-row > .muted { width: 32px; font-size: 13px; }
.tag-row a.tag:hover { color: var(--blue-500); }
.history-items { margin: 6px 0 0; padding-left: 16px; font-size: 13px; color: var(--text-secondary); }
.similar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.similar-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--bg-default); }
.similar-item .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px; }
.section-title:first-child { margin-top: 0; }
.edit-grid { display: grid; grid-template-columns: 1fr 460px; gap: 20px; }
.detail-media { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 16px; }
.detail-media > img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--bg-default); border-radius: 8px; }
@media (max-width: 1000px) { .edit-grid { grid-template-columns: 1fr; } .similar-grid { grid-template-columns: repeat(3, 1fr); } }

/* 모달 (상세 삭제·재분석) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-card { width: min(440px, 92vw); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 14px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 10px; }
.modal-card h3 { margin: 0; }
.check { display: flex; gap: 6px; align-items: center; }

/* 소재 등록 — 드롭존 */
.dropzone { border: 2px dashed var(--border-default); border-radius: var(--radius-200); background: var(--bg-secondary); padding: 56px 24px; text-align: center; transition: border-color .15s, background .15s; }
.dropzone.dragover { border-color: var(--blue-500); background: var(--blue-soft); }
.dropzone.compact { padding: 14px 16px; margin-bottom: 16px; }
.dropzone.compact .dropzone-icon { display: none; }
.dropzone-icon { font-size: 36px; color: var(--blue-500); margin-bottom: 8px; }
.dropzone-inner p { margin: 4px 0; }

/* 소재 등록 — 3단 작업 영역 */
.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr) 440px; gap: 16px; min-height: 480px; }
.file-list-pane, .preview-pane, .form-pane { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-200); box-shadow: var(--shadow); }
.file-list-pane { display: flex; flex-direction: column; }
.file-list { list-style: none; margin: 0; padding: 8px; flex: 1; overflow: auto; }
.file-item { padding: 8px 10px; border-radius: var(--radius-200); cursor: pointer; border: 1px solid transparent; }
.file-item:hover { background: var(--bg-hover); }
.file-item.selected { border-color: var(--blue-500); background: var(--blue-soft); }
.file-item.status-duplicate { opacity: .7; }
.file-item.status-error .file-meta { color: var(--red-500); }
.file-item.status-published { opacity: .6; }
.file-item.status-published .file-meta { color: var(--green-500); }
.file-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.file-meta { font-size: 13px; color: var(--text-tertiary); }
.file-error { font-size: 13px; color: var(--red-500); margin-top: 4px; }
.bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--blue-500); transition: width .2s; }
.file-list-footer { padding: 10px; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 8px; }
.preview-pane { padding: 16px; display: flex; align-items: center; justify-content: center; }
.preview-pane figure { margin: 0; width: 100%; text-align: center; align-self: flex-start; }
.preview-pane img { max-width: 100%; max-height: 60vh; border-radius: 8px; background: var(--bg-default); }
.preview-pane figcaption { margin-top: 8px; }
.preview-pane .notice { margin-top: 12px; text-align: left; }
.form-pane { padding: 16px; }
@media (max-width: 1100px) { .workspace { grid-template-columns: 1fr; } }

/* 소재 폼 (기존 편집 패널 .asset-edit-panel 위에 얹음) */
.asset-form { display: flex; flex-direction: column; gap: 12px; }
.asset-form .asset-tag-group { margin-top: 0; padding-top: 0; border-top: 0; }
.asset-form .field input[type="text"], .asset-form .field input[type="date"], .asset-form .field select, .asset-form .field textarea { border-radius: 10px; padding: 10px 12px; background: var(--bg-secondary); }
.asset-form .tag-input { border-radius: 10px; background: var(--bg-secondary); padding: 8px 10px; }
.asset-form .field-grid { gap: 10px; }
.asset-form.is-empty > :not(.form-status) { opacity: .45; pointer-events: none; }
.form-status { font-size: 13px; }
.form-status.is-error { color: var(--red-500); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.field-label em { color: var(--red-500); font-style: normal; }
.field input[type="text"], .field input[type="date"], .field select, .field textarea {
  border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 8px 10px; background: var(--bg-default); color: var(--text-default); font-size: 14px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(61,108,255,.15); }
.field.has-error input, .field.has-error select { border-color: var(--red-500); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 6px 0; }
.ai-badge { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--blue-soft); color: var(--blue-500); font-size: 11px; font-weight: 700; line-height: 16px; }
.form-errors { padding: 8px 10px; border-radius: var(--radius-200); background: rgba(236,34,31,.08); border: 1px solid var(--red-500); color: var(--red-500); font-size: 13px; }
.form-actions { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--border-default); }
.form-actions .spacer { flex: 1; }
/* 소재 등록 화면 : 버튼 줄(전체 등록 · 삭제/다시 분석/등록)을 각 칸의 맨 위에 둔다 */
.workspace .file-list-footer { order: -1; border-top: 0; border-bottom: 1px solid var(--border-default); }
.workspace .form-actions { order: -1; padding-top: 0; padding-bottom: 12px; border-top: 0; border-bottom: 1px solid var(--border-default); }
.workspace .reanalyze-menu { bottom: auto; top: calc(100% + 6px); }


/* 태그 입력 */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 6px 8px; background: var(--bg-default); }
.tag-input:focus-within { border-color: var(--blue-500); }
.tag-chips { display: contents; }
.tchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.tchip-x { border: 0; background: none; cursor: pointer; color: var(--text-tertiary); font-size: 14px; line-height: 1; padding: 0 2px; }
.tchip-x:hover { color: var(--red-500); }
.tag-text { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; padding: 2px; color: var(--text-default); }

/* 관리자 */
.admin-subnav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.admin-subnav a { padding: 8px 14px; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid transparent; }
.admin-subnav a.active { color: var(--blue-500); border-bottom-color: var(--blue-500); }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { padding: 6px 12px; border-radius: var(--radius-200); color: var(--text-secondary); font-weight: 700; border: 1px solid transparent; }
.tab.active { background: var(--bg-secondary); border-color: var(--border-default); color: var(--text-default); }
.input-sm { height: 30px; border: 1px solid var(--border-default); border-radius: 6px; padding: 0 8px; background: var(--bg-default); color: var(--text-default); }
.select-sm { height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-200); background: var(--bg-default); color: var(--text-default); padding: 0 8px; font-size: 14px; }
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
tr.is-inactive td { opacity: .55; }
.add-form { margin-top: 20px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input { height: 34px; border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 0 10px; background: var(--bg-default); color: var(--text-default); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.stat strong { font-size: 24px; }

/* 대표컬러 줄: 색이 늘어나도 줄바꿈으로 확장 */
.srch-row-colors .color-filter { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; }
/* 이미지만 보기: 테두리 없이 이미지만 */

.brand-row { display: flex; gap: 6px; align-items: center; }
.brand-row select { flex: 1 1 auto; min-width: 0; }
.brand-row input { width: 150px; }

/* 검색 패널 — 하나애드 인트라넷(hanaai2 board.css) 검색 UI 소스를 현재 토큰에 맞게 이식 */
.srch { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.srch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srch-label { flex: 0 0 58px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.srch-label.srch-inline { flex: 0 0 auto; margin-left: 10px; color: var(--text-tertiary); }
.srch-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.srch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.srch .form-select { width: 130px; height: 36px; flex: none; }
.srch .form-input { height: 36px; }
.srch .srch-q { width: 260px; max-width: 420px; }
.srch .w-limit { width: 88px; }
.srch .btn { height: 36px; flex: none; }
.limit-label { flex: none; margin-left: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-tertiary); }
.datef { display: inline-flex; align-items: center; gap: 7px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-200); padding: 0 12px; background: var(--bg-default); color: var(--text-tertiary); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.datef:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-soft); }
.datef input { border: 0; outline: 0; width: 92px; font-size: 14px; color: var(--text-default); background: transparent; font-family: inherit; }
.datef .datepicker { width: 104px; cursor: pointer; }
.datef .icon { color: var(--text-default); }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 36px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-default); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; user-select: none; }
.chip:hover { border-color: var(--text-tertiary); background: var(--bg-hover); }
.chip.is-on { background: var(--bg-tertiary); border-color: var(--text-tertiary); color: var(--text-default); font-weight: 600; }
.chip-reset { border-style: dashed; color: var(--text-tertiary); }
.chip-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-disabled); }
.chip-dot.is-on::before { background: var(--text-default); }
.chip-filter { background: var(--blue-soft); color: var(--blue-500); border: 0; height: 26px; padding: 0 10px; font-size: 13px; }
.btn-excel { background: #1d6f42; border: 1px solid #1d6f42; color: #fff; }
.btn-excel:hover { background: #175935; border-color: #175935; }
.srch .color-filter { min-height: 32px; }
.srch .color-chip { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; }
.srch-row-colors .color-filter { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; }
#libraryPage .library-panel { padding: 14px 20px 12px; }
#libraryPage .library-title { margin-bottom: 2px; }
@media (max-width: 1100px) { .srch-right { margin-left: 0; width: 100%; } }

/* 업로드 미리보기: AI 분석 중 로딩 표시 */
.preview-frame { position: relative; display: inline-block; max-width: 100%; }
.analyzing-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,.72); border-radius: 8px; }
[data-theme="dark"] .analyzing-overlay { background: rgba(30,30,30,.72); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--blue-soft); border-top-color: var(--blue-500); animation: spin .9s linear infinite; }
.spinner-sm { display: inline-block; width: 11px; height: 11px; border-width: 2px; vertical-align: -1px; margin-right: 4px; }
.analyzing-text { font-size: 14px; font-weight: 600; color: var(--blue-500); background: var(--bg-secondary); padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 전역 페이지 로딩 */
.page-loading { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,.55); backdrop-filter: blur(1px); }
[data-theme="dark"] .page-loading { background: rgba(20,20,20,.55); }

/* 이미지만 보기: Pexels식 벽돌(masonry) — 3열 고정, 등록순으로 가장 짧은 열에 배치(JS가 위치 계산), 원본 비율 유지 */
.gallery-grid { position: relative; display: block; width: 100%; }
.gallery-grid:not(.is-laid-out) { column-count: 3; column-gap: 20px; }
.gallery-grid:not(.is-laid-out) .gallery-item { break-inside: avoid; margin: 0 0 20px; }
.gallery-grid.is-laid-out .gallery-item { position: absolute; top: 0; left: 0; margin: 0; }
.gallery-item { display: block; border: 0; box-shadow: none; background: var(--bg-secondary); border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.gallery-item img { width: 100%; height: auto; display: block; object-fit: unset; border-radius: 12px; background: var(--bg-secondary); }
.gallery-grid.is-laid-out .gallery-item img { height: 100%; object-fit: contain; margin: 0 auto; }
.gallery-grid.is-laid-out .gallery-item { display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); }
.gallery-item:hover { outline: 0; }
.gallery-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px; border-radius: 12px; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%); opacity: 0; transition: opacity .15s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-name { color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-dl { flex: 0 0 auto; padding: 9px 14px; border-radius: 8px; background: #05a081; color: #fff; font-size: 14px; font-weight: 700; }
.gallery-dl:hover { background: #048f73; }


.history-changes { margin: 2px 0 6px; padding-left: 14px; font-size: 13px; }
.history-changes li { margin: 1px 0; }

/* 즐겨찾기 버튼(카드 우상단) */
.library-card { position: relative; }
.fav-btn { position: absolute; top: 22px; right: 22px; z-index: 2; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-secondary); color: var(--text-disabled); font-size: 15px; cursor: pointer; box-shadow: var(--shadow); opacity: .85; }
.fav-btn:hover { opacity: 1; color: var(--red-500); }
.fav-btn.is-on { color: #fff; background: var(--red-500); border-color: var(--red-500); opacity: 1; }
#favToggleBtn.is-on { color: var(--red-500); border-color: rgba(236,34,31,.35); }
/* 컬렉션 카드 */
.collection-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); display: grid; gap: 14px; }
.collection-card { display: block; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-200); overflow: hidden; box-shadow: var(--shadow); }
.collection-card:hover { border-color: var(--blue-500); }
.collection-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg-default); aspect-ratio: 16 / 9; }
.collection-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.collection-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
/* 브랜드 타임라인 */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline-month { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.timeline-label { font-weight: 700; color: var(--blue-500); padding-top: 6px; border-right: 2px solid var(--blue-soft); }
.timeline-items { display: flex; flex-wrap: wrap; gap: 10px; }
.timeline-item { display: flex; gap: 10px; align-items: center; width: 320px; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; }
.timeline-item:hover { border-color: var(--blue-500); }
.timeline-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--bg-default); flex: none; }
.timeline-meta { min-width: 0; font-size: 13.5px; }
.timeline-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 상단바와 본문 사이 간격 축소(모든 메뉴). hub.css의 .main{padding:28px 32px 44px} 덮어씀 */
.main { padding: 8px 32px 32px; }
.page-head, .page-header { margin-bottom: 8px; }
.library-hero { margin-bottom: 8px; }
@media (max-width: 900px) { .main { padding: 8px 16px 32px; } }

/* 가독성: 엠베스트 퍼포먼스 대시보드 타이포 토큰 적용 (Inter+Pretendard Variable, 자간 0, 줄간격 1.55, ink 텍스트 색) */
:root[data-theme="light"] { --ink-900: #0f172a; --ink-800: #1e293b; --ink-700: #334155; --ink-500: #4b5563; --line-200: #e2e8f0; --line-100: #f1f5f9;
  --text-default: var(--ink-800); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --border-default: var(--line-200); --border-subtle: var(--line-100); }
h1, h2, h3, .library-title, .modal-title, .topbar-logo { letter-spacing: -0.01em; }
table, .num, .stat strong, .asset-meta, .muted time { font-variant-numeric: tabular-nums; }
th, td { line-height: 1.45; }
tbody td { padding-top: 10px; padding-bottom: 10px; }
thead tr { border-bottom: 2px solid var(--border-default); }
tbody tr { border-bottom: 1px solid var(--border-subtle); }
tbody tr:hover { background: #f7faff; }
:root[data-theme="dark"] tbody tr:hover { background: var(--bg-hover); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c0d4f5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ebef1; }

/* 관리자 분류 코드: 툴바·상태 배지 */
.admin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.admin-toolbar .tag { height: 26px; font-size: 12.5px; }
.tag-warn { background: #fff4e5; color: #b45309; }
.tag-ai { background: #eef3ff; color: var(--blue-500); font-size: 11px; height: 20px; margin-left: 6px; }
.text-warn { color: #b45309; font-weight: 600; }

/* 페이지네이션: 이동 입력 */
.pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.page-jump input[type=number] { width: 64px; height: 30px; border: 1px solid var(--border-default); border-radius: var(--radius-100); padding: 0 8px; background: var(--bg-default); color: var(--text-default); }

/* 1단계: 다중 선택 · 일괄 작업 바 · 리스트 정렬 헤더 · 반응형 카드 그리드 */
.library-card { position: relative; }
.library-card .sel { position: absolute; left: 22px; top: 22px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; cursor: pointer; }
.library-card:hover .sel, .library-card.is-selected .sel, .library-card .sel:has(input:checked) { opacity: 1; }
.library-card.is-selected { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.sel input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue-500); cursor: pointer; }
.sel-inline { display: inline-flex; }
.row-link.is-selected td { background: #eef3ff; }
:root[data-theme="dark"] .row-link.is-selected td { background: #1f2d4c; }
.th-sel, .td-sel { width: 28px; text-align: center; }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort::after { content: " ↕"; color: var(--text-disabled); font-size: 11px; }
.th-sort.is-sorted { color: var(--blue-500); }
.th-sort.is-sorted::after { content: " ↓"; color: var(--blue-500); }
.th-sort:hover { color: var(--blue-500); }
.bulk-bar { position: sticky; bottom: 12px; z-index: 50; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--blue-500); border-radius: 12px; box-shadow: 0 10px 30px rgba(19,25,39,.16); }
.bulk-sep { width: 1px; height: 22px; background: var(--border-default); margin: 0 4px; }
/* 카드 그리드 반응형 (기존 5열 고정 → 화면 폭별) */
@media (max-width: 1500px) { .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .library-grid { grid-template-columns: 1fr; } }

/* 2단계: 자동완성 · 저장된 검색 · 컬러 모드 */
.srch-q-wrap { position: relative; flex: 1 1 260px; min-width: 200px; display: flex; }
.srch-q-wrap .srch-q { width: 100%; }
.suggest-box { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 120; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(19,25,39,.16); max-height: 360px; overflow: auto; padding: 6px 0; text-align: left; }
.suggest-group + .suggest-group { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 4px; }
.suggest-title { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.suggest-item { padding: 7px 12px; font-size: 13.5px; cursor: pointer; }
.suggest-item:hover, .suggest-item.is-active { background: var(--bg-hover); color: var(--blue-500); }
.saved-searches .saved-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.saved-chip a { color: inherit; text-decoration: none; }
.saved-chip .saved-del { border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.saved-chip .saved-del:hover { color: var(--red-500); }
.w-color-mode { width: 150px; height: 30px; font-size: 12.5px; margin-right: 6px; }

/* 3단계: 누락 배지 · 재분석 메뉴 · 변형 등록 */
.tag-missing { background: #fff4e5; color: #b45309; }
.tag-ready { background: #e6f7ef; color: #047857; }
.reanalyze-wrap { position: relative; display: inline-block; }
.reanalyze-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 10px 28px rgba(19,25,39,.16); white-space: nowrap; }
.similar-pick { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }

/* 6단계: 이미지 보기 무한 스크롤 안내 */
.gallery-more { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 8px; color: var(--text-tertiary); font-size: 13px; }

/* 상단바 고정 규칙: 메뉴 이동 때 위치가 흔들리지 않도록
   1) 세로 스크롤바 폭을 항상 확보(페이지마다 스크롤 유무로 17px씩 밀리는 현상 제거)
   2) 상단바 높이·좌우 여백을 모든 화면에서 동일하게 고정 */
html { overflow-y: scroll; scrollbar-gutter: stable; }
.topbar { height: 58px; padding: 0 32px; box-sizing: border-box; }
.topbar-nav a { white-space: nowrap; }
.topbar-actions { flex: 0 0 auto; }
.user-chip { min-width: 150px; }
.subnav, .admin-subnav { padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px) { .topbar, .subnav, .admin-subnav { padding-left: 16px; padding-right: 16px; } }

/* 본문 상단 간격 통일: 소재 라이브러리 기준(상단바 아래 12px)으로 모든 메뉴 동일. 첫 블록의 위 여백은 0 */
.main { padding-top: 12px; }
.main > :first-child, .app-page > :first-child, .page-head, .page-header, .library-hero { margin-top: 0; }
.page-head { margin-bottom: 12px; }
.flash-area:empty { display: none; }

/* 컬렉션 담기 레이어 팝업 + 카드 아이콘 */
.col-dialog { z-index: 320; }
.col-dialog-box { width: min(520px, 94vw); max-height: 86vh; }
.col-dialog-body { display: flex; flex-direction: column; gap: 10px; }
.col-dialog-new { display: flex; gap: 8px; }
.col-dialog-new input { flex: 1; height: 38px; border: 1px solid var(--border-default); border-radius: 8px; padding: 0 12px; background: var(--bg-default); color: var(--text-default); font-size: 14px; }
.col-dialog-new input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(61,108,255,.15); }
.col-dialog-hint { font-size: 12.5px; }
.col-dialog-list { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow: auto; }
.col-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-secondary); color: var(--text-default); cursor: pointer; font: inherit; }
.col-row:hover { border-color: var(--blue-500); background: var(--bg-hover); }
.col-row.is-on { border-color: var(--blue-500); background: #eef3ff; }
:root[data-theme="dark"] .col-row.is-on { background: #1f2d4c; }
.col-row-check { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 700; }
.col-row.is-on .col-row-check { background: var(--blue-500); color: #fff; }
.col-row-main { display: flex; flex-direction: column; min-width: 0; }
.col-row-title { font-weight: 600; font-size: 14px; }
.col-row-meta { font-size: 12px; }
.col-row-action { font-size: 12.5px; color: var(--blue-500); font-weight: 600; white-space: nowrap; }
.col-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; }
.col-dialog-empty { padding: 18px; text-align: center; border: 1px dashed var(--border-default); border-radius: 10px; }
.library-card .col-btn { position: absolute; right: 60px; top: 22px; z-index: 3; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border-default); background: rgba(255,255,255,.92); color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.library-card:hover .col-btn { opacity: 1; }
.library-card .col-btn:hover { color: var(--blue-500); border-color: var(--blue-500); }

/* 상세 이미지: 칸에 맞춰 확대하지 않고 원본 크기(작은 소재는 작게), 큰 소재만 칸 폭·높이에 맞춰 축소 */
.detail-shot { width: auto; max-width: 100%; max-height: 66vh; height: auto; display: block; margin: 0 auto; object-fit: contain; }
.detail-shot-wrap { display: flex; align-items: center; justify-content: center; min-height: 240px; }

/* 검색어 줄: 1280px 폭에서 오른쪽 버튼 묶음이 다음 줄로 밀리지 않도록 검색창 최소 폭 축소 */
.srch-q-wrap { flex: 1 1 200px; min-width: 160px; }
.srch-right { margin-left: auto; }
/* 리스트 보기: 소재명 잘림 방지(최소 폭 + 줄바꿈), 등록일은 날짜만 */
.asset-list td:nth-child(3) { min-width: 200px; white-space: normal; }
.asset-list th, .asset-list td { white-space: nowrap; }
.asset-list td:nth-child(3) a { white-space: normal; }

/* 원본보다 큰 칸에서는 확대하지 않는다(전체 공통): 카드 썸네일 · 등록 미리보기 · 상세/팝업 이미지 */
.asset-thumb-box { width: 100%; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: var(--bg-default); border: 1px solid var(--border-subtle); border-radius: var(--radius-100); margin-bottom: 12px; overflow: hidden; }
.asset-thumb-box .asset-thumb { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto; border: 0; margin: 0; background: transparent; object-fit: contain; }
#preview-img { width: auto; height: auto; max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }

/* 관련 소재 그리드(팝업·상세): 이미지가 잘리거나 칸을 넘치지 않도록 — 열 자동 배치, 이미지는 contain, 이름은 말줄임 */
.similar-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.similar-item { display: block; min-width: 0; text-decoration: none; color: inherit; }
.similar-item img { width: 100%; height: 130px; aspect-ratio: auto; object-fit: contain; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; display: block; }
.similar-item .muted { display: block; margin-top: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.similar-item:hover img { outline: 2px solid var(--blue-500); outline-offset: -2px; }

/* 로딩 표시: 상단 진행 막대(메뉴·검색·정렬·보기 전환 모두), 이미지 보기 추가 로딩 스켈레톤 */
.top-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--blue-500); z-index: 500; box-shadow: 0 0 8px rgba(61,108,255,.6); transition: width 8s cubic-bezier(.1,.6,.2,1), opacity .3s; }
.top-progress.is-active { width: 85%; }
.top-progress.is-done { width: 100%; opacity: 0; transition: width .15s ease-out, opacity .3s .1s; }
.gallery-more.is-loading .spinner { display: inline-block; }
.gallery-more.is-loading { color: var(--blue-500); }
.gallery-skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 1024px) { .gallery-skeleton-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery-skeleton-row { grid-template-columns: 1fr; } }
.gallery-skeleton { height: 220px; border-radius: 12px; background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 37%, var(--bg-tertiary) 63%); background-size: 400% 100%; animation: shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* 컬러 칩의 색상 코드 표기 */
.tag code.hex { font-family: Inter, Consolas, monospace; font-size: 11px; color: var(--text-tertiary); margin-left: 2px; background: transparent; }

/* A단계: 상세 필터 접기 · 연관 태그 · 0건 제안 · OCR 하이라이트 · 스마트 컬렉션 · 키보드 포커스 */
.btn-toggle-more .caret { display: inline-block; transition: transform .15s; }
.btn-toggle-more.is-open .caret { transform: rotate(180deg); }
.related-tags .chip-tag { cursor: pointer; border: 0; }
.related-tags .chip-tag:hover { background: var(--blue-soft); color: var(--blue-500); }
.relax-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.relax-list .chip-tag { text-decoration: none; }
.asset-ocr-hit { font-size: 12px; color: var(--text-secondary); background: var(--bg-tertiary); border-radius: 6px; padding: 4px 8px; margin: 6px 0 0; line-height: 1.5; }
.asset-ocr-hit mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px; }
:root[data-theme="dark"] .asset-ocr-hit mark { background: #5a4a00; }
.library-card:focus { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.smart-section { margin-bottom: 20px; }
.smart-section .section-title small { font-weight: 400; font-size: 12.5px; }
.smart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.smart-card { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.smart-title { font-weight: 700; font-size: 15px; color: var(--text-default); text-decoration: none; }
.smart-title:hover { color: var(--blue-500); }
.smart-actions { display: flex; gap: 12px; margin-top: 6px; }
.link-btn.danger { color: var(--red-500); }
#shuffle-btn { margin-left: 6px; }

/* B단계 */
/* 카드 아이콘 상시 노출 */
.library-card .sel, .library-card .col-btn, .library-card .fav-btn { opacity: 1; }
.library-card .col-btn { background: var(--bg-secondary); }
.variant-badge { position: absolute; left: 22px; top: 52px; z-index: 3; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(17,24,39,.78); color: #fff; }
/* 대표컬러 플레이스홀더(이미지 로딩 전) */
/* 썸네일 칸 배경은 흰색 고정 — 대표 컬러를 섞으면 디자인 본래 색과 헷갈린다(2026-10-01 사용자 결정). 다크 모드는 아래 보정. */
.asset-thumb-box, .gallery-grid.is-laid-out .gallery-item { background: #fff; }
[data-theme="dark"] .asset-thumb-box, [data-theme="dark"] .gallery-grid.is-laid-out .gallery-item { background: #f3f4f6; }
/* 리스트 열 숨김 */
.asset-list .is-hidden { display: none; }
.col-settings { position: relative; display: inline-block; margin-left: 6px; }
.col-settings-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; gap: 6px; min-width: 160px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 10px 28px rgba(19,25,39,.16); }
.group-toggle { margin-left: 10px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
/* 도움말·비교 */
.help-glyph { font-weight: 800; font-size: 15px; }
.help-box { width: min(1000px, 94vw); }
.help-cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.help-body h3 { font-size: 14px; margin: 0 0 8px; }
.help-body ul { padding-left: 18px; margin: 0 0 14px; line-height: 1.7; font-size: 13.5px; }
/* hub.css의 table{min-width:1040px;table-layout:fixed}·td{text-align:center;nowrap}가 도움말 표를 넘치게 해 되돌린다 */
.help-keys { border-collapse: collapse; font-size: 13px; margin-bottom: 14px; width: 100%; min-width: 0; table-layout: auto; }
.help-keys td { padding: 5px 10px 5px 0; text-align: left; white-space: normal; overflow: visible; }
.help-keys td:first-child { white-space: nowrap; width: 1%; }
.help-keys tr { cursor: default; }
.help-keys tr:hover td { background: transparent; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-tertiary); font-family: inherit; font-size: 12px; }
.compare-box { width: min(1500px, 96vw); max-height: 94vh; }
.compare-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 14px; }
.compare-col img { width: 100%; max-height: 42vh; object-fit: contain; background: var(--bg-tertiary); border-radius: 10px; border: 1px solid var(--border-subtle); }
.compare-cell { padding: 8px 6px; border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.5; }
.compare-key { font-size: 11px; color: var(--text-tertiary); font-weight: 600; margin-bottom: 2px; }
/* 다크 모드 보정 (라이트 전용 색 사용 요소) */
:root[data-theme="dark"] .tag-warn, :root[data-theme="dark"] .tag-missing { background: #4a2e05; color: #fbbf24; }
:root[data-theme="dark"] .tag-ai { background: #1f2d4c; color: #a8c2ff; }
:root[data-theme="dark"] .tag-ready { background: #0b3d2a; color: #6ee7b7; }
:root[data-theme="dark"] tbody tr:hover { background: var(--bg-hover); }
:root[data-theme="dark"] .library-card .sel, :root[data-theme="dark"] .library-card .col-btn { background: rgba(44,44,44,.92); }
:root[data-theme="dark"] .text-warn { color: #fbbf24; }
:root[data-theme="dark"] .gallery-dl { background: #05a081; }
/* 모바일 상단바: 메뉴 가로 스크롤, 사용자 정보 축약 */
@media (max-width: 900px) {
  .topbar { gap: 12px; }
  .topbar-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav a { padding: 6px 8px; font-size: 13px; }
  .user-meta { display: none; }
  .topbar-divider { display: none; }
  .help-cols { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-toolbar { flex-wrap: wrap; gap: 8px; }
  .srch-row { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .topbar-nav { min-width: 0; flex: 1 1 0; }
  .user-chip { min-width: 0; }
  .topbar-actions { flex: 0 0 auto; }
}
@media (max-width: 900px) {
  .table-wrap, .board { overflow-x: auto; max-width: 100%; }
  .admin-toolbar, .tabs { flex-wrap: wrap; }
}

/* C1단계 */
.stat-warn strong { color: #b45309; }
.stat-danger strong { color: var(--red-500); }
.notice { padding: 10px 14px; border-radius: 10px; background: var(--bg-tertiary); margin: 10px 0; font-size: 13.5px; }
.notice-warning { background: #fff4e5; color: #b45309; }
.notice-danger { background: #fde8e8; color: #b91c1c; }
:root[data-theme="dark"] .notice-warning { background: #4a2e05; color: #fbbf24; }
:root[data-theme="dark"] .notice-danger { background: #4c1d1d; color: #fca5a5; }
.defaults-cell { display: flex; flex-wrap: wrap; gap: 4px; min-width: 260px; }
.select-xs { height: 26px; font-size: 11.5px; padding: 0 4px; max-width: 110px; }

/* C2a단계: AI 제안 태그 · 일괄 편집 · 가져오기 · URL 등록 */
.tchip.is-suggested { border: 1px dashed var(--blue-500); background: transparent; color: var(--blue-500); }
.tchip-ok { border: 0; background: transparent; color: #047857; cursor: pointer; font-weight: 700; padding: 0 2px 0 4px; }
.tag-review-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--blue-soft); font-size: 12.5px; }
.bulk-edit { z-index: 330; }
.bulk-edit-box { width: min(560px, 94vw); }
.bulk-edit-grid { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.bulk-edit-row { display: grid; grid-template-columns: 22px 110px 1fr; align-items: center; gap: 8px; }
.bulk-edit-row input[type=text], .bulk-edit-row input[type=url], .bulk-edit-row input[type=date], .bulk-edit-row select { height: 34px; border: 1px solid var(--border-default); border-radius: 8px; padding: 0 10px; background: var(--bg-default); color: var(--text-default); font-size: 13.5px; width: 100%; }
.bulk-edit-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.io-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.io-card { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 12px; padding: 18px; }
.io-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.io-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-tertiary); font-size: 13px; }
.io-result ul { margin: 6px 0 0 18px; }
.url-upload { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; }
.url-upload input { width: min(520px, 70%); height: 36px; border: 1px solid var(--border-default); border-radius: 8px; padding: 0 12px; background: var(--bg-default); color: var(--text-default); }
.dropzone.compact .url-upload { margin-top: 8px; }

/* C2b단계: 동영상·GIF 배지, 미리보기 비디오 */
.asset-thumb-box, .gallery-item { position: relative; }
.media-badge { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(17,24,39,.82); color: #fff; font-size: 11px; font-weight: 700; }
video.detail-shot { background: #000; }
#preview-video { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; background: #000; border-radius: 8px; }

/* D단계: 배지·대시보드·태그 관리 */
.perf-badge { position: absolute; right: 22px; top: 58px; z-index: 3; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #fde68a; color: #78350f; }
.rights-badge { position: absolute; right: 22px; bottom: 22px; z-index: 3; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #fff4e5; color: #b45309; border: 1px solid #fcd9b6; }
.rights-badge.is-expired { background: #fde8e8; color: #b91c1c; border-color: #fbc4c4; }
.library-card { overflow: visible; }
.library-card .rights-badge, .library-card .perf-badge { pointer-events: none; }
.dash-cards .stat { text-decoration: none; color: inherit; }
.dash-cards a.stat:hover { border-color: var(--blue-500); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.dash-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.dash-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.dash-list.errors li { display: block; font-size: 12.5px; line-height: 1.5; word-break: break-all; }
.history-revert { margin-left: 6px; font-size: 11.5px; }
#tags-table .tag { margin-right: 4px; }

/* ===== 3차 점검 3단계: 화면·모바일 보정 (2026-10-01) ===== */
/* D-2 리스트: 이름 열 넉넉하게·좌측 정렬, 날짜·크기 잘림 방지 */
.asset-list { table-layout: auto; min-width: 1040px; }
.asset-list th[data-col="name"], .asset-list td:nth-child(3) { text-align: left; min-width: 260px; max-width: 420px; }
.asset-list td:nth-child(3) a { color: var(--text-default); font-weight: 600; }
.asset-list td:nth-child(2) { width: 72px; }
.asset-list th[data-col="date"], .asset-list td:last-child { min-width: 96px; white-space: nowrap; }
.asset-list th[data-col="filesize"], .asset-list th[data-col="type"], .asset-list th[data-col="style"] { width: 72px; }
.asset-list td.td-sel { width: 36px; }

/* E-1 관리자 표: 전역 table{min-width:1040px}가 모바일에서 페이지를 밀어내던 문제 → 표는 자연 폭, 스크롤은 감싸는 요소가 */
table.table { min-width: 0; table-layout: auto; }
.table-wrap, .table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  /* E-2 관리자 탭: 글자 단위로 꺾이지 않게 가로 스크롤 */
  .admin-subnav { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; scrollbar-width: thin; }
  .admin-subnav a { flex: 0 0 auto; }
  /* E-4 결과 툴바 */
  .library-toolbar .t { flex-wrap: wrap; }
  /* E-5 중간 폭 넘침 */
  .timeline-item { width: min(320px, 100%); }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* D-7 모바일: 검색 패널 설명 문구 숨김 */
  .library-desc-inline { display: none; }
}
@media (max-width: 600px) { .stat-cards { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .detail-layout { grid-template-columns: 1fr; } }
/* E-3 모바일 상단 메뉴: 더 있다는 표시(오른쪽 페이드) */
@media (max-width: 900px) {
  .topbar-nav { position: relative; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  .topbar-nav::-webkit-scrollbar { display: none; }
}

/* D-6 다크 모드 보정 */
[data-theme="dark"] a { color: #8fb0ff; }
[data-theme="dark"] .btn, [data-theme="dark"] .topbar-nav a, [data-theme="dark"] .admin-subnav a, [data-theme="dark"] .chip, [data-theme="dark"] .tag { color: inherit; }
[data-theme="dark"] .admin-subnav a.active, [data-theme="dark"] .topbar-nav a.active { color: var(--blue-500); }
[data-theme="dark"] .color-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 0 1px rgba(255,255,255,.18); }
[data-theme="dark"] .stat-warn strong { color: #fbbf24; }
[data-theme="dark"] .perf-badge { background: rgba(251,191,36,.18); color: #fcd34d; }
[data-theme="dark"] .rights-badge, [data-theme="dark"] .tag-warn, [data-theme="dark"] .tag-warning { background: rgba(248,113,113,.18); color: #fca5a5; }
[data-theme="dark"] .tchip-ok { color: #6ee7b7; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4252; }
/* 분류 코드 비활성 행 투명도 이중 적용(.55×.55) 제거 */
/* 공용 toast */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 600; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 10px; background: #1f2937; color: #fff; font-size: 13.5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 1; transition: opacity .3s, transform .3s; max-width: 360px; }
.toast-warn { background: #b91c1c; } .toast-ok { background: #047857; }
.toast.is-out { opacity: 0; transform: translateY(6px); }
[data-theme="dark"] .toast { background: #374151; }
/* 플래시 메시지: 닫기 버튼·자동 숨김 */
.flash-close { margin-left: 8px; background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: inherit; opacity: .7; }
.flash.is-out { opacity: 0; transition: opacity .4s; }
/* 결과 툴바 오른쪽: 액션 + 보기 전환 */
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 컬러 검색은 항상 보이는 기본 패널에 */
.srch-row-colors { align-items: center; }
table.table thead th { white-space: nowrap; }
table.table td { white-space: normal; min-width: 72px; }
/* 브랜드 목록 썸네일 */
.brand-previews { white-space: nowrap; }
.brand-previews img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; margin-right: 4px; background: var(--bg-default); vertical-align: middle; }
/* 팝업 '소재 태깅' 우상단 액션(AI 재분석 · 수정) */
.copy-actions { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; }
.copy-actions .muted { font-size: 12px; }
/* AI 동작 버튼은 보라 계열로 구분(수정=파랑, 삭제=빨강) */
.btn-ai { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn-ai:hover { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.btn-ai:disabled { opacity: .6; }
[data-theme="dark"] .btn-ai { background: #8b5cf6; border-color: #8b5cf6; }
/* AI 확신 낮음 → 검수 화면 '확인 필요' 배지 */
.review-badge { display: inline-block; padding: 0 6px; border-radius: 4px; background: #fef3c7; color: #b45309; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: middle; }
[data-theme="dark"] .review-badge { background: rgba(251,191,36,.18); color: #fcd34d; }
.card-review-badge { position: absolute; left: 44px; top: 10px; z-index: 2; }
/* 재분석으로 바뀐 항목 강조 */
.field.is-changed, .is-changed { animation: changed-flash 1.6s ease-out; border-radius: 8px; }
.field.is-changed select, .field.is-changed input, .field.is-changed textarea { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.changed-badge { display: inline-block; padding: 0 6px; border-radius: 4px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: middle; }
@keyframes changed-flash { 0% { background: rgba(245,158,11,.35); } 100% { background: transparent; } }
/* 팝업 수정 폼의 상태 문구가 우상단 버튼(AI 재분석·닫기)과 겹치지 않게 */
.copy-form #form-status { padding-right: 170px; min-height: 28px; }
/* 태그 입력 '추가' 버튼 — Enter를 모르는 사용자용 */
.tag-input .tag-add { flex: 0 0 auto; height: 26px; padding: 0 10px; font-size: 12px; }
.tag-input .tag-add.is-ready { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
/* 검수 완료(확정) 버튼 */
.btn-confirm { background: #059669; border-color: #059669; color: #fff; }
.btn-confirm:hover { background: #047857; border-color: #047857; color: #fff; }
/* AI 학습: 골든셋 썸네일 목록 */
.golden-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.golden-list a { display: block; font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.golden-list img { width: 100%; height: 84px; object-fit: contain; background: #fff; border: 1px solid var(--border-subtle); border-radius: 6px; }
.golden-list span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* AI 도구: 변형 묶기 제안 */
.variant-suggest { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 4px 12px 12px; margin: 10px 0; }
/* OCR 점검: 그림과 추출 텍스트 나란히 */
.ocr-row { display: grid; grid-template-columns: minmax(200px, 38%) 1fr; gap: 14px; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; margin: 10px 0; }
.ocr-row.is-done { opacity: .6; }
.ocr-thumb img { width: 100%; max-height: 360px; object-fit: contain; background: #fff; border: 1px solid var(--border-subtle); border-radius: 6px; display: block; }
.ocr-body textarea { width: 100%; margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
.ocr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .ocr-row { grid-template-columns: 1fr; } }
.brand-logo { height: 22px; max-width: 70px; object-fit: contain; vertical-align: middle; background: #fff; border: 1px solid var(--border-subtle); border-radius: 4px; }
/* 도움말: 사용 가이드(펼침 목록) */
.help-guide details { border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 6px; background: var(--bg-default); }
.help-guide summary { cursor: pointer; padding: 9px 12px; font-size: 13.5px; font-weight: 700; color: var(--text-default); }
.help-guide details[open] summary { border-bottom: 1px solid var(--border-subtle); }
.help-guide ol, .help-guide details ul { margin: 0; padding: 10px 14px 10px 30px; line-height: 1.7; font-size: 13.5px; color: var(--text-secondary); }
.help-guide li + li { margin-top: 3px; }
.help-guide em { color: var(--red-500); font-style: normal; font-weight: 700; }
.help-guide-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.logout-form { margin: 0; display: flex; }
/* 로그인 사용자: '부서 팀 / 직급  이름'을 한 줄로 */
.user-meta.user-meta-line { flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
.user-meta-line .user-role { font-size: 13px; }
.user-meta-line .user-name { font-size: 14px; }
.topbar .topbar-nav { min-width: 0; }
/* 상단바: 화면이 좁아지면 메뉴 쪽이 줄어들고(가로 스크롤) 오른쪽 사용자 표시·로그아웃은 잘리지 않는다 */
.topbar { gap: 16px; }
.topbar-nav { min-width: 0; flex: 1 1 0; overflow-x: auto; scrollbar-width: none; }
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-actions { flex: 0 0 auto; }
.user-chip { min-width: 0; }
.logout-btn { white-space: nowrap; }
@media (max-width: 1500px) { .topbar-nav a { padding: 6px 9px; } .topbar { padding: 0 20px; } }
@media (max-width: 1180px) { .user-meta-line .user-role { display: none; } }
.help-guide li ul { padding: 4px 0 4px 18px; }
.admin-manual { max-width: 900px; }
/* 상단 '사용 매뉴얼' 버튼: ? 아이콘만으로는 찾기 어려워 글자를 붙인다 */
.icon-btn.help-btn { width: auto; padding: 0 10px; gap: 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 1180px) { .help-btn .help-label { display: none; } }
/* 매뉴얼: 항목 사이 구분선으로 읽기 쉽게 */
.help-guide details li { padding: 3px 0; }
.help-guide details > ul > li + li, .help-guide details > ol > li + li { border-top: 1px dashed var(--border-subtle); margin-top: 4px; padding-top: 6px; }
/* 보기 전용(viewer): 등록·수정·삭제·재분석·이력·관리자 관련 버튼 숨김 — 서버도 같은 요청을 403으로 막는다 */
.role-viewer [data-role="edit-only"], .role-viewer #assetReanalyzeBtn, .role-viewer #assetEditToggle, .role-viewer #libraryDeleteBtn,
.role-viewer #bulk-edit, .role-viewer [data-bulk="group"], .role-viewer [data-bulk="ungroup"], .role-viewer [data-bulk="set_rep"], .role-viewer [data-bulk="delete"],
.role-viewer #detailHistory, .role-viewer .detail-section:has(> #detailHistory), .role-viewer .toolbar-right a[href*="/upload"], .role-viewer .empty-state a[href*="/upload"] { display: none !important; }