/* =====================
   CoreLinker Theme (global)
   - Tailwind utility 기반이지만, 공통 톤/컴포넌트는 여기서 일괄 제어
   ===================== */

:root{
  --cl-bg-0: #f7f8ff;
  --cl-bg-1: #f8fafc;
  --cl-surface: rgba(255,255,255,0.88);
  --cl-surface-strong: #ffffff;
  --cl-surface-muted: rgba(255,255,255,0.72);
  --cl-border: rgba(15,23,42,0.12);
  --cl-border-strong: rgba(15,23,42,0.18);
  --cl-text: #0b1220;
  --cl-muted: rgba(15,23,42,0.62);
  --cl-primary: #4f46e5;   /* indigo-600 */
  --cl-primary-2: #06b6d4; /* cyan-500 */
  --cl-danger: #e11d48;    /* rose-600 */
  --cl-ring: rgba(79,70,229,0.35);
  --cl-radius: 4px;
  --cl-radius-sm: 4px;
  --cl-shadow-sm: 0 6px 18px rgba(15,23,42,0.10);
  --cl-shadow: 0 12px 34px rgba(15,23,42,0.12);
}

.cl-app{
  min-height: 100vh;
  background: #ffffff;
  color: var(--cl-text);
  font-family: "IBM Plex Sans KR", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 일정관리(좌측 필터/상세 패널): 작은 폰트 가독성 개선 */
#schedule-root :where(.filter-card, .filter-card *){
  text-rendering: geometricPrecision;
  font-kerning: normal;
}
#schedule-root #assignee-list{
  font-size: 11px;
}
#schedule-root #assignee-list :where(*){
  font-size: inherit;
}
#schedule-root :where(.filter-card){
  letter-spacing: -0.01em;
}
#schedule-root :where(.filter-card .text-slate-500, .filter-card .text-slate-600){
  font-weight: 600;
}

.cl-shell{
  max-width: 96rem; /* ~ max-w-screen-2xl */
}

.cl-header{
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.cl-nav{
  border-radius: var(--cl-radius);
  background: linear-gradient(135deg, rgba(2,6,23,0.92), rgba(30,41,59,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 30px rgba(2,6,23,0.28);
  backdrop-filter: blur(10px);
}

/* Inputs: 레이아웃/패딩은 템플릿(Tailwind) 우선, 톤만 통일 */
.cl-app :where(input, select, textarea){
  border-color: color-mix(in srgb, var(--cl-border-strong) 85%, transparent);
}
.cl-app :where(input, select, textarea):focus{
  outline: none;
}
.cl-app :where(input, select, textarea):focus-visible{
  box-shadow: 0 0 0 3px var(--cl-ring);
  border-color: color-mix(in srgb, var(--cl-primary) 55%, var(--cl-border-strong));
}

/* 작은 아이콘 버튼(➕ 등): 배경 투명/화이트 톤 */
.cl-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  padding:0 6px;
  border-radius: 4px;
  border: 1px solid rgba(15,23,42,0.08);
  background: transparent;
  color: #334155; /* slate-700 */
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cl-icon-btn:hover{
  background: #f1f5f9; /* slate-100 */
  border-color: rgba(15,23,42,0.12);
  color: #0f172a; /* slate-900 */
}
.cl-icon-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--cl-ring);
}
.cl-icon-btn-lg{
  height:24px;
  padding:0 8px;
}
.cl-icon-btn-borderless{
  border: none;
}
.cl-icon-btn-borderless:hover{
  border: none;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* =====================
   UI Components
   버튼/ 카드 / 패널 공용 스타일
   ===================== */
   
/* 버튼 스타일 */
.cl-app :where(.cl-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:0.35rem;
  height:30px; padding:0 12px;
  border-radius: var(--cl-radius-sm);
  font-weight:700; font-size:12px;
  background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.92));
  color:#fff;
  cursor:pointer; line-height:1;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 18px rgba(2,6,23,0.10);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.cl-app :where(.cl-btn:hover){
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(2,6,23,0.14);
  border-color: rgba(255,255,255,0.22);
}
.cl-app :where(.cl-btn:active){
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(2,6,23,0.10);
}
.cl-app :where(.cl-btn:focus-visible){
  outline: none;
  box-shadow: 0 0 0 3px var(--cl-ring), 0 12px 24px rgba(2,6,23,0.12);
}

.global-tab-btn, .global-toolbar-btn {
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius: var(--cl-radius-sm);
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.9);
  font-size:12px;
  font-weight:600;
  min-height: 28px;
  padding:0.3rem 0.7rem;
  line-height: 1.05;
  transition: transform .12s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow .18s ease;
}
.global-tab-btn-disabled{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius: var(--cl-radius-sm);
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.55);
  font-size:12px;
  font-weight:600;
  min-height: 28px;
  padding:0.3rem 0.7rem;
  line-height: 1.05;
  cursor:not-allowed;
  opacity:0.85;
  user-select:none;
  pointer-events:none;
}
.global-tab-btn:hover {
  background:rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.global-tab-btn-active {
  background: linear-gradient(135deg, rgba(79,70,229,0.92), rgba(6,182,212,0.86));
  color:#fff;
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 14px 24px rgba(79,70,229,0.18);
}
.global-tab-btn .nav-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.9em;
  margin-right:0.3rem;
}
.global-toolbar-btn {
  background: rgba(255,255,255,0.92);
  color: #0b1220;
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 10px 18px rgba(2,6,23,0.10);
  font-weight:500;
}
.global-toolbar-btn:not([data-active-week="1"]):hover {
  background: rgba(255,255,255,0.98);
}
.global-toolbar-btn[data-active-week="1"] {
  background: linear-gradient(135deg, rgba(79,70,229,0.92), rgba(6,182,212,0.86));
  color:#fff;
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 14px 24px rgba(79,70,229,0.20);
}
.global-utility-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  min-height: 32px;
  padding:0.45rem 0.95rem;
  border-radius: var(--cl-radius-sm);
  border:1px solid rgba(255,255,255,0.18);
  /* 일정관리 "+ 새 일정" 버튼(.toolbar-new-btn) 톤과 맞춤 */
  background: linear-gradient(135deg, hsla(215, 40%, 30%, 1), hsla(215, 30%, 32%, 1));
  color:#f8fafc;
  font-size:12px;
  font-weight:600;
  line-height: 1.1;
  transition: transform .12s ease, background 0.2s ease,border-color 0.2s ease;
  box-shadow: 0 12px 24px rgba(2,6,23,0.18);
}
.global-utility-btn:hover {
  background: linear-gradient(135deg, hsla(215, 40%, 28%, 1), hsla(215, 30%, 28%, 1));
  border-color: rgba(255,255,255,0.26);
  transform: translateY(-1px);
}

/* 드로우 폼 취소 버튼: 저장 버튼과 동일하게 흰 글씨로 고정 */
.cl-app :where(.cl-btn)[data-close],
.cl-app :where(.cl-btn)[data-close-drawer]{
  color:#fff !important;
}

/* ⬇⬇ 비활성화 상태를 눈에 띄게 */
.cl-btn:disabled{
  background:#1f2937;
  color:#fff;
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(0.3);
  /* 필요하면 배경/테두리도 바꿔서 명확히 */
  /* background:#475569; border-color:rgba(255,255,255,.15); */
  pointer-events: none; /* 클릭 막기(시맨틱 disabled가 있으면 클릭은 원래도 막힘) */
}

/* 카드 스타일 */
.cl-card {
  border-radius: var(--cl-radius);
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  box-shadow: var(--cl-shadow);
  backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.cl-card:hover {
  border-color: var(--cl-border-strong);
  box-shadow: 0 16px 40px rgba(15,23,42,0.14);
}

/* 로그인 카드: hover 시 위치 이동(움찔) 제거 */
.cl-login-card:hover{
  transform: none;
}

/* 패널 스타일 */
.cl-panel {
  border-radius: var(--cl-radius);
  background: linear-gradient(180deg, var(--cl-surface-strong) 0%, var(--cl-surface-muted) 100%);
  border: 1px solid color-mix(in srgb, var(--cl-border) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--cl-shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.cl-panel:hover {
  border-color: color-mix(in srgb, var(--cl-border-strong) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(15,23,42,0.12);
}
.cl-colhead { display:flex; align-items:center; height:28px; margin-bottom:4px; }
.diff-compact .diff-line { white-space: pre-wrap; line-height: 1.35; margin: 0 }
.diff-compact .diff-ins  { background: #d1fae5; color: #065f46 }
.diff-compact .diff-del  { background: #fee2e2; color: #991b1b }

/* 스크롤 위치가 다른 영역 갱신으로 튀는 것을 방지 */
#devices-scroll { overflow-anchor: none; }

/* Scrollbar 숨김(스크롤은 유지) */
.no-scrollbar{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge Legacy */
}
.no-scrollbar::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

/* Number input spinner 숨김 */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin[type=number]{ -moz-appearance: textfield; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Devices table rows: override default black focus ring to blue */
#deviceTbody tr:focus,
#deviceTbody tr:focus-visible,
#deviceTbodyMobile tr:focus,
#deviceTbodyMobile tr:focus-visible {
  outline: 2px solid #2563eb; /* blue-600 */
  outline-offset: -2px;
}

/* 공통: 기본 상태 초기화 */
#month-grid [data-schedule-id] {
  outline: none;
  box-shadow: none;
  transition: box-shadow 120ms ease;
}

/* 호버/키보드 포커스/JS로 준 is-focused 상태에서 테두리 표시 (빨간색) */
#month-grid [data-schedule-id]:hover,
#month-grid [data-schedule-id].is-focused,
#month-grid [data-schedule-id]:focus-visible {
  /* overflow-hidden 부모에 안 잘리도록 inset 사용 */
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.95);
}

/* 겹쳐 보일 때 위로 살짝 띄워줌(시각 우선순위) */
#month-grid [data-schedule-id]:hover {
  position: relative;
  z-index: 9;
}

/* =====================
   Device Management: 공용 버튼 (기존 dm-btn 인라인 제거용)
   ===================== */
.vpn-table tbody::before {
  content: "";
  display: block;
  height: 2px;
}
.vpn-table select#vpn-entry-select {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.1;
  min-height: 20px;
  height: 20px;
}
#vpn-row td {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.3;
}
#vpn-message-row td {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.2;
}

.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  height: 22px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  border-radius: 4px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.9);
  transition: transform .12s ease, box-shadow .18s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 8px 16px rgba(15,23,42,0.10);
}
.dm-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(15,23,42,0.24);
  box-shadow: 0 12px 22px rgba(15,23,42,0.12);
}
.dm-btn:active { transform: translateY(0); }
.dm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cl-ring), 0 12px 22px rgba(15,23,42,0.12); }
.dm-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  filter: saturate(0.65);
  background: rgba(255,255,255,0.65);
  border-color: rgba(15,23,42,0.12);
  color: rgba(15,23,42,0.55);
  pointer-events: none;
}
.dm-btn-primary {
  background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(6,182,212,0.10));
  border-color: rgba(79,70,229,0.28);
}
.dm-btn-primary:hover { background: linear-gradient(135deg, rgba(79,70,229,0.18), rgba(6,182,212,0.14)); }
.dm-btn-muted {
  background: rgba(248,250,252,0.95);
  border-color: rgba(15,23,42,0.16);
  color: rgba(15,23,42,0.76);
}
.dm-btn-rose {
  background: color-mix(in srgb, var(--cl-danger) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--cl-danger) 32%, rgba(15,23,42,0.12));
  color: color-mix(in srgb, var(--cl-danger) 92%, #0b1220);
}
.dm-btn-rose:hover { background: color-mix(in srgb, var(--cl-danger) 16%, #ffffff); }