/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ 카드 설정 패널 (시안 이미지의 컬럼표시/검색·필터/기타/디자인 4탭) ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

.tpl-settings{position:absolute;top:46px;right:10px;width:280px;
  max-height:calc(100% - 60px);
  background:var(--glass-strong);backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.15),var(--glow-md);
  z-index:60;display:none;flex-direction:column;overflow:hidden;}
.dark .tpl-settings{box-shadow:0 16px 48px rgba(0,0,0,.6),var(--glow-md);}
.tpl-settings.open{display:flex;animation:tpsIn .25s cubic-bezier(.16,1,.3,1);}
@keyframes tpsIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}

.tps-head{display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .85rem;border-bottom:1px solid var(--glass-border);flex-shrink:0;}
.tps-title{font-size:.75rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.4rem;}
.tps-title svg{width:13px;height:13px;color:var(--primary);}
.tps-close{width:22px;height:22px;border:none;background:transparent;color:var(--text-muted);
  cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;line-height:1;transition:all .15s;}
.tps-close:hover{background:rgba(255,71,87,.12);color:var(--red);}

.tps-tabs{display:flex;gap:.15rem;padding:.45rem .55rem 0;
  border-bottom:1px solid var(--border-subtle);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.tps-tabs::-webkit-scrollbar{display:none;}
.tps-tab{padding:.4rem .7rem;font-size:.6rem;font-weight:600;color:var(--text-muted);
  cursor:pointer;border:none;background:transparent;font-family:inherit;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .15s;}
.tps-tab:hover{color:var(--text-sec);}
.tps-tab.on{color:var(--primary);border-bottom-color:var(--primary);}

.tps-body{flex:1;overflow-y:auto;padding:.55rem .85rem .85rem;}
.tps-pane{display:none;}
.tps-pane.on{display:block;}

.tps-sec-title{font-size:.55rem;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:.08em;margin:.5rem 0 .35rem;
  display:flex;align-items:center;gap:.35rem;padding:.3rem 0;
  border-bottom:1px solid var(--border-subtle);}
.tps-sec-title:first-child{margin-top:0;}
.tps-sec-title svg{width:11px;height:11px;}

.tps-row{display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .1rem;}
.tps-row + .tps-row{border-top:1px dashed var(--border-subtle);}
.tps-row-label{font-size:.7rem;font-weight:500;color:var(--text-sec);}
.tps-row-label.required{color:var(--text);font-weight:600;}
.tps-row-label.required::after{content:' *';color:var(--primary);}
.tps-row-input{width:120px;padding:.3rem .55rem;border-radius:7px;
  border:1px solid var(--glass-border);background:var(--surface);color:var(--text);
  font-size:.62rem;font-family:inherit;}
.tps-row-input:focus{outline:none;border-color:var(--primary);}

/* Toggle switch */
.toggle-sw{position:relative;width:32px;height:18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--glass-border);cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;}
.toggle-sw::after{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;
  border-radius:50%;background:var(--text-muted);transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.15);}
.toggle-sw.on{background:linear-gradient(135deg,var(--primary),var(--primary-light));border-color:transparent;box-shadow:var(--glow-sm);}
.toggle-sw.on::after{left:15px;background:white;}
.toggle-sw.disabled{opacity:.45;cursor:not-allowed;}

/* 색상/스타일 prefab 패널 (카드 디자인 탭) */
.tps-color-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem;}
.tps-color{width:24px;height:24px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:all .15s;}
.tps-color:hover{transform:scale(1.1);}
.tps-color.on{border-color:var(--primary);box-shadow:var(--glow-sm);}

.tps-style-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.35rem;}
.tps-style-btn{padding:.45rem .3rem;border-radius:8px;border:1px solid var(--glass-border);
  background:var(--surface);color:var(--text-sec);font-size:.55rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;text-align:center;}
.tps-style-btn:hover{border-color:var(--primary);color:var(--primary);}
.tps-style-btn.on{background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(108,92,231,.04));
  color:var(--primary);border-color:rgba(108,92,231,.25);}

.tps-placeholder{padding:1.5rem .5rem;text-align:center;color:var(--text-muted);
  font-size:.62rem;line-height:1.6;}
.tps-placeholder b{color:var(--text-sec);}

/* 컬럼 hide 클래스 — 토글로 켜고 끔 */
.hr-col-hidden{display:none !important;}

/* 편집 모드 버튼 활성 상태 */
.cv-btn.on{background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:white;border-color:transparent;box-shadow:var(--glow-sm);}
.cv-btn.on:hover{transform:translateY(-1px);box-shadow:var(--glow-md);color:white;}

/* Toast 알림 */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--glass-strong);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:12px;padding:.65rem 1.1rem;
  font-size:.7rem;font-weight:600;color:var(--text);
  box-shadow:0 12px 40px rgba(0,0,0,.15),var(--glow-md);
  z-index:300;opacity:0;pointer-events:none;
  transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:.5rem;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.success{border-color:rgba(0,184,148,.4);}
.toast.success::before{content:'✓';color:var(--green);font-weight:900;}
.toast.info::before{content:'ℹ';color:var(--primary);font-weight:900;}
.toast.warn{border-color:rgba(253,203,110,.4);}
.toast.warn::before{content:'⚠';color:var(--amber);font-weight:900;}

/* 인사 테이블의 검색 필터 결과 — 숨길 row */
.hr-table tr.filtered-out{display:none;}

/* 라이브러리 카드 — clickable hint */
.lib-card:not(.dim){cursor:pointer;}
.lib-card:not(.dim)::after{content:'＋';position:absolute;top:.6rem;right:.7rem;
  width:18px;height:18px;border-radius:50%;background:var(--primary);color:white;
  font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;}
.lib-card{position:relative;}
.lib-card:not(.dim):hover::after{opacity:1;}

