/* ================================================================
   list.css — 갤러리 리스트 페이지 전용
   list.skin.php 에서만 로드합니다.
================================================================ */

:root { --color-main: #3d5afe; }

#bo_list { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
#bo_list * { font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; }

/* ── 전체선택 pill ── */
.jkg-chk-all-pill       { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; background: #f0f3ff; border: 1.5px solid #dde3f8; border-radius: 30px; cursor: pointer; }
.jkg-chk-all-pill .pill-label { font-size: 13px; font-weight: 600; color: #555; cursor: pointer; white-space: nowrap; }

/* ── 커스텀 체크박스 ── */
.art_chk_box { position: relative; display: inline-block; line-height: 0; }
.art_selec_chk { position: absolute; opacity: 0; width: 0; height: 0; }
.art_chk_box label { cursor: pointer; display: block; }
.art_chk_box label span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 2px solid #dde0ea;
  background: #fff; border-radius: 50%; transition: all .18s;
}
.art_chk_box label span::after {
  content: ''; width: 6px; height: 10px;
  border-right: 2.5px solid transparent; border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translate(-1px,-2px); transition: border-color .15s;
}
.art_chk_box .art_selec_chk:checked + label span { background: var(--color-main); border-color: var(--color-main); box-shadow: 0 2px 8px rgba(61,90,254,.4); }
.art_chk_box .art_selec_chk:checked + label span::after { border-right-color: #fff; border-bottom-color: #fff; }

/* ── 갤러리 그리드 ── */
.jkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; margin-bottom: 28px; }

/* ── 카드 래퍼 + 체크박스 레이어 ── */
.jkg-card-wrap { position: relative; }
.jkg-chk-layer { position: absolute; top: 12px; right: 12px; z-index: 3; pointer-events: all; }
.jkg-chk-layer .art_chk_box label span { width: 26px; height: 26px; background: rgba(255,255,255,.9); border-color: #ccc; backdrop-filter: blur(4px); box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.jkg-chk-layer .art_chk_box .art_selec_chk:checked + label span { background: var(--color-main); border-color: var(--color-main); }

/* ── 카드 ── */
.jkg-card { display: block; text-decoration: none; background: #fff; border-radius: 20px; border: 1.5px solid #edf0f7; overflow: hidden; transition: all .22s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 2px 10px rgba(0,0,0,.05); cursor: pointer; }
.jkg-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.13); border-color: #c5cff8; }
.jkg-card-wrap.is-checked .jkg-card { border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(61,90,254,.15), 0 4px 16px rgba(0,0,0,.08); }

/* ── 카드 비주얼 ── */
.jkg-card-visual { height: 200px; position: relative; overflow: hidden; background: #f0f4f8; display: flex; align-items: center; justify-content: center; }
.jkg-preview-img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .22s cubic-bezier(.34,1.56,.64,1); display: block; }
.jkg-card:hover .jkg-preview-img { transform: scale(1.04); }
.jkg-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #b0bac9; width: 100%; height: 100%; }
.jkg-placeholder img  { width: 72px; opacity: .28; object-fit: contain; }
.jkg-placeholder span { font-size: 11px; font-weight: 500; }

/* ── 배지 ── */
.jkg-top-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(6px); z-index: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.jkg-top-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; flex-shrink: 0; }
.jkg-top-badge.recv   { background: rgba(235,244,255,.92); color: #2563eb; }
.jkg-top-badge.make   { background: rgba(240,255,244,.92); color: #16a34a; }
.jkg-top-badge.done   { background: rgba(255,245,245,.92); color: #dc2626; }
.jkg-top-badge.locked { background: rgba(229,62,62,.92); color: #fff; }
.jkg-top-badge.locked::before { background: #fff; }
.jkg-top-badge.prog::before { display: none; }
.jkg-top-badge.prog-1 { background: rgba(240,253,244,.95); color: #166534; }
.jkg-top-badge.prog-2 { background: rgba(239,246,255,.95); color: #1d4ed8; }
.jkg-top-badge.prog-3 { background: rgba(254,252,232,.95); color: #854d0e; }
.jkg-top-badge.prog-4 { background: rgba(253,244,255,.95); color: #7e22ce; }
.jkg-top-badge.prog-5 { background: rgba(240,253,244,.95); color: #065f46; }
.jkg-notice-chip { position: absolute; top: 12px; left: 12px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 8px; z-index: 10; }
.jkg-new-chip    { position: absolute; bottom: 10px; right: 10px; background: var(--color-main); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 7px; z-index: 10; }

/* ── 카드 본문 ── */
.jkg-card-body    { padding: 14px 17px 16px; display: flex; flex-direction: column; gap: 6px; }
.jkg-card-dept    { font-size: 15px; font-weight: 900; color: #1a1a2e; letter-spacing: -.4px; line-height: 1.3; }
.jkg-card-meta    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jkg-card-manager { font-size: 12px; color: #8b95a8; }
.jkg-card-phone   { font-size: 11px; color: #888; background: #c6c5c540; padding: 2px 10px; border-radius: 10px; font-weight: 500; letter-spacing: .3px; }
.jkg-card-footer  { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid #f0f3fa; }
.jkg-card-members span { background: #eef1ff; color: var(--color-main); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.jkg-card-members span.zero { background: #f5f7fc; color: #b0bac9; }
.jkg-card-date    { font-size: 11px; color: #adb5c7; }

/* ── 빈 상태 ── */
.jkg-empty       { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: #b0bac9; gap: 12px; background: #fafbff; border-radius: 20px; border: 1.5px dashed #dde3f0; }
.jkg-empty .icon { font-size: 52px; opacity: .5; }
.jkg-empty p     { font-size: 15px; font-weight: 500; }

/* ── 페이지 / 검색 ── */
.jkg-pages { text-align: center; margin: 4px 0 16px; }
.jkg-search-bar { background: #fff; border: 1.5px solid #e2e6f0; border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.jkg-search-bar select { background: #f5f7fc; border: 1px solid #e2e6f0; color: #555; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; cursor: pointer; flex-shrink: 0; }
.jkg-search-bar input[type="text"] { flex: 1; min-width: 0; background: #f5f7fc; border: 1px solid #e2e6f0; color: #1a1a2e; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-family: inherit; outline: none; }
.jkg-search-bar input:focus { border-color: var(--color-main); }
.jkg-search-bar input::placeholder { color: #b0bac9; }
.jkg-search-btn { background: var(--color-main); color: #fff; border: none; border-radius: 8px; padding: 7px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; white-space: nowrap; }
.jkg-search-btn:hover { background: #536dfe; }

/* ── 반응형 ── */
@media (max-width: 640px) {
  .jkg-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .jkg-card-visual { height: 160px; }
  .jkg-card-dept { font-size: 13px; }
  .jkg-search-bar { flex-direction: row; }
  .jkg-search-bar select { flex: 0 0 auto; }
  .jkg-search-bar input[type="text"] { flex: 1; min-width: 0; }
  .jkg-search-btn { flex: 0 0 auto; }
}
@media (max-width: 400px) { .jkg-grid { grid-template-columns: 1fr; } }






/* ══ list.skin.php 추가 인라인 스타일 ══ */
.jkg-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.jkg-toolbar-spacer { flex:1; }
.jkg-count-label { font-size:12px; color:#8b95a3; font-weight:500; }

.jkg-color-dots { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0; }
.ls-dot { display:inline-block; width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12); flex-shrink:0; }

/* 카드 캔버스 썸네일 */
.jkg-card-visual { position:relative; }
.jkg-canvas-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; filter:drop-shadow(0 4px 20px rgba(0,0,0,.25)); }
.jkg-canvas-thumb { aspect-ratio:1/1; width:auto !important; height:auto !important; max-width:100%; max-height:100%; margin:auto; }
.jkg-canvas-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.jkg-canvas-placeholder img { width:60px; opacity:.2; }
.jkg-canvas-thumb.loaded + .jkg-canvas-placeholder { display:none; }

/* 빠른 액션 */
.jkg-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0;
  min-height: 22px;
}
.jkg-card-actions {
  display: flex;
  gap: 4px;
  flex-direction: row;
  flex-shrink: 0;
}
.jkg-act-btn {
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.92); border:1px solid #e2e6f0;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none; transition:background .15s;
  backdrop-filter:blur(4px); box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.jkg-act-btn:hover { background:#f0f4ff; }
.jkg-act-btn.del:hover { background:#fff0f0; }
.jkg-search-clear { font-size:12px; color:#8b95a3; text-decoration:none; padding:4px 6px; }
.jkg-search-clear:hover { color:#374151; }

/* ══ 모달 ══ */
.ls-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:1000; backdrop-filter:blur(3px);
}
.ls-modal-overlay.open { display:block; }

.ls-modal {
  display:none; position:fixed;
  top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1001; width:min(480px,94vw);
  background:#fff; border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.22);
  overflow:hidden; flex-direction:column;
}
.ls-modal.open { display:flex; }

.ls-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid #f0f3fa;
}
.ls-modal-title { font-size:15px; font-weight:700; color:#1a1d23; }
.ls-modal-close {
  width:30px; height:30px; border-radius:8px;
  border:none; background:#f4f5f7; cursor:pointer;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  color:#6b7280; transition:background .15s;
}
.ls-modal-close:hover { background:#e8eaed; }

.ls-modal-tabs {
  display:flex; padding:10px 20px 0; gap:4px;
}
.ls-modal-tabs button {
  flex:1; padding:8px 0; border:none;
  border-radius:8px 8px 0 0; font-size:13px; font-weight:600;
  cursor:pointer; color:#8b95a3; background:#f4f5f7;
  transition:all .15s; font-family:inherit;
}
.ls-modal-tabs button.active { background:#3b5bdb; color:#fff; }

.ls-modal-canvas-wrap {
  background:#f0f4f8; display:flex;
  align-items:center; justify-content:center;
  padding:12px; margin:0 20px;
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
#ls-modal-canvas {
  max-width:100%; width:100%; height:auto; aspect-ratio:1/1; display:block;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.25)); background:transparent;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s ease;
}
#ls-modal-canvas.slide-out-left  { transform: translateX(-60px); opacity: 0; transition: none; }
#ls-modal-canvas.slide-out-right { transform: translateX(60px);  opacity: 0; transition: none; }
#ls-modal-canvas.slide-in-left   { transform: translateX(60px);  opacity: 0; transition: none; }
#ls-modal-canvas.slide-in-right  { transform: translateX(-60px); opacity: 0; transition: none; }
#ls-modal-canvas.slide-active    { transform: translateX(0);     opacity: 1; }

.ls-modal-legend {
  display:flex; flex-wrap:wrap; gap:6px 12px;
  padding:12px 20px 6px; max-height:80px; overflow-y:auto;
}
.ls-legend-item { display:flex; align-items:center; gap:5px; font-size:12px; color:#4a5568; }
.ls-legend-swatch { width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.12); flex-shrink:0; }

.ls-modal-footer {
  display:flex; gap:8px; padding:10px 20px 18px;
  justify-content:flex-end; border-top:1px solid #f0f3fa; margin-top:4px;
}

@media (max-width:500px) {
  .ls-modal { width:96vw; }
  .ls-modal-canvas-wrap { padding:8px; margin:0 10px; }
  #ls-modal-canvas { width:100%; height:auto; }
}
/* ── 카드 썸네일 앞/뒤 토글 버튼 ── */

/* ── 진행사항 배지 ── */
.jkg-card-footer {
    flex-wrap: wrap;
    gap: 4px;
}
.jkg-progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.6;
}
.jkg-progress-badge.step-1 { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.jkg-progress-badge.step-2 { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.jkg-progress-badge.step-3 { background:#fefce8; color:#854d0e; border:1px solid #fde68a; }
.jkg-progress-badge.step-4 { background:#fdf4ff; color:#7e22ce; border:1px solid #e9d5ff; }
.jkg-progress-badge.step-5 { background:#f0fdf4; color:#065f46; border:1px solid #6ee7b7; }

/* ── 마스킹 ── */
.ls-mask { color: #9ca3af; letter-spacing: 1px; }

.jkg-footer-order-cnt { background:#ede9fe; color:#6d28d9; border-radius:8px; padding:3px 10px; font-size:12px; font-weight:700; }