/* ============================================================
   LightKeeper Design Tokens — CSS Custom Properties
   ============================================================ */
:root {
  /* 색상 — 브랜드 */
  --c-primary:        #ea5c2a;
  --c-primary-dark:   #d44f20;
  --c-primary-light:  #fdeee9;
  --c-primary-bg:     #fff8f5;
  --c-primary-ring:   rgba(234,92,42,.12);
  --c-primary-shadow: rgba(234,92,42,.08);

  /* 색상 — 텍스트 */
  --c-text:           #18181b;
  --c-text-sub:       #3f3f46;
  --c-text-secondary: #71717a;
  --c-text-muted:     #a1a1aa;
  --c-text-placeholder: #a1a1aa;
  --c-text-disabled:  #d4d4d8;

  /* 색상 — 배경/서피스 */
  --c-bg:             #fff;
  --c-surface:        #f7f7f8;
  --c-surface-alt:    #fafafa;
  --c-surface-hover:  #f6f6f7;

  /* 색상 — 테두리 */
  --c-border:         #e4e4e7;
  --c-border-subtle:  #f2f2f3;
  --c-border-medium:  #e4e4e7;
  --c-border-strong:  #d4d4d8;

  /* 색상 — 시맨틱 */
  --c-danger:         #ef4444;
  --c-danger-dark:    #dc2626;
  --c-danger-bg:      #fee2e2;
  --c-success:        #16a34a;
  --c-success-bg:     #dcfce7;
  --c-warning:        #b45309;
  --c-warning-bg:     #fef9c3;
  --c-info:           #0369a1;
  --c-info-bg:        #e0f2fe;

  /* 색상 — 중립 */
  --c-dark:           #1e1e1e;
  --c-gray-100:       #f4f4f5;
  --c-gray-200:       #e4e4e7;
  --c-gray-300:       #d4d4d8;
  --c-gray-400:       #a1a1aa;
  --c-gray-500:       #71717a;
  --c-gray-600:       #52525b;
  --c-gray-700:       #3f3f46;
  --c-gray-800:       #333;
  --c-gray-900:       #18181b;

  /* 타이포그래피 — 폰트 굵기 */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* 타이포그래피 — 크기 */
  --fs-2xs:  .5625rem;   /* 9px */
  --fs-xs:   .625rem;    /* 10px */
  --fs-sm:   .6875rem;   /* 11px */
  --fs-base: .75rem;     /* 12px */
  --fs-md:   .8125rem;   /* 13px */
  --fs-lg:   .875rem;    /* 14px */
  --fs-xl:   .9375rem;   /* 15px */
  --fs-2xl:  1rem;       /* 16px */
  --fs-3xl:  1.125rem;   /* 18px */
  --fs-4xl:  1.25rem;    /* 20px */
  --fs-5xl:  1.375rem;   /* 22px */

  /* 간격 */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;

  /* 테두리 반경 */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-card: 12px;
  --r-pill: 999px;

  /* 그림자 */
  --shadow-hover:  0 2px 8px rgba(0,0,0,.06);
  --shadow-active: 0 2px 12px rgba(0,0,0,.1);
  --shadow-panel:  -8px 0 32px rgba(0,0,0,.12);
  --shadow-card:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);

  /* 트랜지션 */
  --t-fast:   .12s ease;
  --t-base:   .15s ease;
  --t-slow:   .22s ease;

  /* 레이아웃 */
  --gnb-width:    15rem;
  --topbar-h:     3.5rem;
  --footer-h:     2.5rem;
}


/* ============================================================
   다크 테마 (html[data-theme="dark"]) — 토큰 오버라이드
   모니터링 관제 표준(Grafana·Datadog·Better Stack 다크 기본) 대응.
   컴포넌트가 토큰을 참조하므로 변수 재정의로 대부분 커버되고,
   아래에 아이콘 대비 등 예외 보정만 둔다.
   ============================================================ */
html[data-theme="dark"]{
  --c-primary-light:  rgba(234,92,42,.14);
  --c-primary-bg:     rgba(234,92,42,.08);
  --c-primary-ring:   rgba(234,92,42,.25);

  --c-text:           #f4f4f5;
  --c-text-sub:       #d4d4d8;
  --c-text-secondary: #a1a1aa;
  --c-text-muted:     #71717a;
  --c-text-placeholder: #52525b;
  --c-text-disabled:  #3f3f46;

  --c-bg:             #1c1c20;
  --c-surface:        #131316;
  --c-surface-alt:    #232327;
  --c-surface-hover:  #26262b;

  --c-border:         #2e2e34;
  --c-border-subtle:  #26262b;
  --c-border-medium:  #2e2e34;
  --c-border-strong:  #3f3f46;

  --c-danger-bg:      rgba(239,68,68,.16);
  --c-success-bg:     rgba(22,163,74,.18);
  --c-warning-bg:     rgba(217,119,6,.16);
  --c-info-bg:        rgba(3,105,161,.22);

  --c-gray-100:       #26262b;
  --c-gray-200:       #2e2e34;
  --c-gray-300:       #3f3f46;
  --c-gray-400:       #52525b;
  --c-gray-500:       #71717a;
  --c-gray-600:       #a1a1aa;
  --c-gray-700:       #d4d4d8;
  --c-gray-800:       #e4e4e7;

  --shadow-hover:  0 2px 8px rgba(0,0,0,.4);
  --shadow-active: 0 2px 12px rgba(0,0,0,.5);
  --shadow-panel:  -8px 0 32px rgba(0,0,0,.6);
  --shadow-card:   0 1px 3px rgba(0,0,0,.4);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.5);

  color-scheme: dark;
}
/* 다크 예외 보정 — 어두운 stroke/배경이미지 아이콘 반전 */
html[data-theme="dark"] .ds-icon-btn img,
html[data-theme="dark"] .modal .content .close,
html[data-theme="dark"] .row-act-btn,
html[data-theme="dark"] .plist-search-input button,
html[data-theme="dark"] .org-search-bar .search-input-wrap button img,
html[data-theme="dark"] .fold-btn{ filter: invert(.85) hue-rotate(180deg); }
html[data-theme="dark"] select{ 
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:calc(100% - .625rem) 50% !important;
  background-color:var(--c-bg) !important; color:var(--c-text) !important;
}
html[data-theme="dark"] input, html[data-theme="dark"] textarea{ background-color:var(--c-bg); color:var(--c-text); }
/* GNB는 원래 다크 — 페이지와 구분되는 경계만 */
html[data-theme="dark"] .header .gnb{ border-right:1px solid var(--c-border); }
html[data-theme="dark"] .header .top-ui-bar{ background:var(--c-bg); border-bottom:1px solid var(--c-border); }
html[data-theme="dark"] .footer{ background:var(--c-bg); }

/* ============================================================
   공통 기반
   ============================================================ */
*{ box-sizing:border-box; word-break:keep-all; }
body{ line-height:1.6; }
img{ vertical-align:top; }
.wrap{ transition:width 0.25s ease, padding 0.25s ease; }
.inner{ padding:1.875rem 3.75rem 3.625rem 3.4375rem; transition:0.3s; }

/* ============================================================
   타이포그래피
   ============================================================ */

/* 페이지 제목 (h2) */
h2{
  font-size:var(--fs-4xl);
  font-variation-settings:'wght' var(--fw-bold);
  letter-spacing:-.02em;
  margin:0;
}

/* 카드/섹션 제목 (h3) */
h3{
  font-size:var(--fs-xl);
  font-variation-settings:'wght' var(--fw-semibold);
}

/* 폼 레이블 */
label{
  font-variation-settings:'wght' var(--fw-medium);
  color:var(--c-text-sub);
}

/* tit */
.tit{ font-variation-settings:'wght' var(--fw-bold); font-size:var(--fs-5xl); }

/* ============================================================
   페이지 헤더 (.page-header)
   ============================================================ */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--sp-6);
}
.page-header h2{ margin:0; }

/* ============================================================
   subTit / top
   ============================================================ */
.top{ display:flex; justify-content:space-between; border-bottom:2px solid var(--c-border-strong); padding-bottom:0.625rem; margin-bottom:0.625rem; }
.top h3{ font-variation-settings:'wght' var(--fw-bold); font-size:var(--fs-3xl); color:#222; margin-top:auto; }

/* ============================================================
   유틸리티
   ============================================================ */
.borderB{ border-bottom:1px solid var(--c-gray-400); }
.paddingB{ padding-bottom:1rem; }
.marginB{ margin-bottom:1rem; }
.marginBNot{ margin-bottom:0; }

/* flex-box */
.flex-box{ display:flex; gap:10px; }
.fa-end{ align-items:flex-end; }
.fa-center{ align-items:center; }
.fj-sb{ justify-content:space-between; }

/* ============================================================
   스크롤바
   ============================================================ */
*::-webkit-scrollbar{ width:0.375rem; height:0.375rem; padding-left:10px; }
*::-webkit-scrollbar-thumb{ border-radius:0.25rem; background-color:#666; }
*::-webkit-scrollbar-track{ border-radius:0.25rem; background-color:#f0f0f0; }

/* ============================================================
   Select 화살표
   ============================================================ */
select{ background:url(../images/icon-select-arrow.svg) calc(100% - 0.875rem) 50% no-repeat; }

/* ============================================================
   top style01
   ============================================================ */
.top-ui{ display:flex; justify-content:space-between; align-items:flex-end; }
.top-ui .select-box{ min-width:9.375rem; }
.top-ui .select-box select{ width:100%; height:2.375rem; padding:0 2.1875rem 0 0.875rem; border:1.5px solid var(--c-border); border-radius:var(--r-sm); font-variation-settings:'wght' 450; font-size:var(--fs-xl); color:var(--c-text-sub); cursor:pointer; transition:border-color var(--t-base), box-shadow var(--t-base); }
.top-ui .select-box select:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-ring); color:var(--c-text); outline:none; }

/* ============================================================
   검색 박스 (.search-box)
   ============================================================ */
.search-box form{ display:flex; gap:0.3125rem; width:24.0625rem; }
/* TODO 20241205 win-width 5rem -> 6rem */
.search-box select{ min-width:6rem; height:2.375rem; padding:0 1.25rem 0 0.75rem; border:1.5px solid var(--c-border); background-position:calc(100% - 0.5rem) 50%; font-variation-settings:'wght' 450; font-size:var(--fs-xl); color:var(--c-text-sub); border-radius:var(--r-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:border-color var(--t-base), box-shadow var(--t-base); }
.search-box label{ position:relative; display:inline-block; width:100%; }
.search-box input{ width:100%; max-width:18.75rem; height:100%; border:1.5px solid var(--c-border); font-variation-settings:'wght' 450; font-size:var(--fs-xl); outline:none; border-radius:var(--r-sm); color:var(--c-text); padding:0 2.0625rem 0 0.75rem; transition:border-color var(--t-base), box-shadow var(--t-base); }
.search-box input::placeholder{ color:var(--c-text-placeholder); font-size:var(--fs-xl); }
.search-box button{ position:absolute; top:0; right:0; background:url(../images/icon-search.svg) 50% 50% / 22px 22px no-repeat; width:38px; height:38px; font-size:0; padding:0; border:none; cursor:pointer; }
.search-box input:focus,
.search-box select:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-ring); color:var(--c-text); }

/* ============================================================
   폼 필드 (.form-field)
   ============================================================ */
.form-field input,
.form-field select,
.form-field textarea{
  border:1.5px solid var(--c-border);
  border-radius:var(--r-sm);
  color:var(--c-text);
  background:var(--c-bg);
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color:var(--c-text-placeholder);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-primary-ring);
  outline:none;
}
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled{
  background:var(--c-gray-100);
  color:var(--c-text-muted);
  cursor:not-allowed;
  border-color:var(--c-border-medium);
}

/* ============================================================
   체크박스 (.common-check-box)
   ============================================================ */
.common-check-box input{ display:none; }
.common-check-box label{ display:flex; gap:0 4px; align-items:center; cursor:pointer; }
.common-check-box label span{ position:relative; width:20px; height:20px; box-sizing:border-box; border:1px solid #ddd; line-height:1.3em; border-radius:3px; margin-left:auto; }
.common-check-box label p{ font-variation-settings:'wght' var(--fw-medium); font-size:var(--fs-xl); letter-spacing:-.015em; color:var(--c-gray-800); padding-left:5px; box-sizing:border-box; line-height:1.4em; }
.common-check-box label img{ max-width:35px; }
.common-check-box input[type="checkbox"]:checked + label span{ background-image:url(../images/icon-chk-on.svg); background-color:var(--c-dark); border-color:var(--c-dark); }

/* ============================================================
   모달 (.modal)
   ============================================================ */
.modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgb(0 0 0 / 45%); z-index:1000; opacity:0; visibility:hidden; transition:0.3s; }
.modal.on{ opacity:1; visibility:visible; }
.modal .content{ position:absolute; top:50%; left:50%; width:calc(100% - 1.25rem); max-width:43.75rem; max-height:50rem; padding:2.1875rem 1.5625rem; transform:translate(-50%,-50%); background:var(--c-bg); border-radius:var(--r-card); box-shadow:0 24px 64px rgba(0,0,0,.16); }
.modal .content h3{ font-variation-settings:'wght' var(--fw-bold); font-size:var(--fs-4xl); color:var(--c-text); padding-bottom:20px; }
.modal .content h3.not-pb{ padding-bottom:0; }
.modal .content .modal-tit{ display:flex; align-items:flex-end; padding-bottom:20px; gap:10px; }
.modal .content .modal-tit span{ font-size:var(--fs-xl); }
.modal .content .close{ position:absolute; top:24px; right:20px; width:2rem; height:2rem; padding:0; cursor:pointer; border:1.5px solid var(--c-border); border-radius:var(--r-sm); background:url("../images/icon-name-delete.svg") 50% 50% / 14px 14px no-repeat; transition:0.2s; }
.modal .content .close:hover{ background-color:var(--c-gray-100); border-color:var(--c-text-sub); }
.modal select:focus,
.modal input:focus{ border-color:var(--c-primary) !important; }

/* modal_btn */
.modal-btn{ cursor:pointer; }

/* ============================================================
   scrollX
   ============================================================ */
.scroll-x{ min-width:1500px; overflow-x:auto; }

/* ============================================================
   공통 버튼 (.common-btn)
   ============================================================ */
.common-btn button{
  display:flex;
  align-items:center;
  font-variation-settings:'wght' var(--fw-semibold);
  font-size:var(--fs-xl);
  border:none;
  color:#fff;
  background:var(--c-primary);
  border:1.5px solid var(--c-primary);
  padding:0 1.875rem;
  border-radius:var(--r-sm);
  height:2.375rem;
  cursor:pointer;
  transition:background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  margin:0 auto;
}
.common-btn.center{ text-align:center; }
.common-btn.mt10{ margin-top:0.625rem; }
.common-btn.bgf button{ color:var(--c-text); background:#fff; font-variation-settings:'wght' var(--fw-semibold); border-color:var(--c-border); }

/* common-btn hover */
.common-btn button:hover{ background:var(--c-primary-dark); border-color:var(--c-primary-dark); transform:translateY(-1px); box-shadow:0 4px 12px var(--c-primary-shadow); }
.common-btn.bgf button:hover{ color:#fff; background:var(--c-primary); border-color:var(--c-primary); transform:translateY(-1px); box-shadow:0 4px 12px var(--c-primary-shadow); }

/* common-btn active */
.common-btn button:active{ transform:translateY(0); box-shadow:inset 0 1px 3px rgba(0,0,0,.15); }

/* common-btn focus */
.common-btn button:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }

/* ============================================================
   LK 버튼 시스템 (.lk-btn)
   — 기본 .lk-btn 정의는 sub.css 단일 정의로 통합됨 (중복 제거)
   ============================================================ */

/* Primary */
.lk-btn-primary{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
}
.lk-btn-primary:hover{
  background:var(--c-primary-dark);
  border-color:var(--c-primary-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px var(--c-primary-shadow);
}
.lk-btn-primary:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}
.lk-btn-primary:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* Danger */
.lk-btn-danger{
  background:var(--c-danger);
  border-color:var(--c-danger);
  color:#fff;
}
.lk-btn-danger:hover{
  background:var(--c-danger-dark);
  border-color:var(--c-danger-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(239,68,68,.15);
}
.lk-btn-danger:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}
.lk-btn-danger:focus-visible{
  outline:2px solid var(--c-danger);
  outline-offset:2px;
}

/* Outline / Ghost */
.lk-btn-outline{
  background:#fff;
  border-color:var(--c-border);
  color:var(--c-text);
}
.lk-btn-outline:hover{
  background:var(--c-surface);
  border-color:var(--c-gray-300);
  transform:translateY(-1px);
}
.lk-btn-outline:active{
  transform:translateY(0);
}
.lk-btn-outline:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* ============================================================
   카드 (.lk-card)
   ============================================================ */
.lk-card{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  /* overflow:hidden 은 is-clickable 변형에만 적용 — sticky thead 클리핑 방지 */
}

/* 클릭 가능한 카드 */
a.lk-card,
button.lk-card,
.lk-card[role="button"],
.lk-card.is-clickable{
  cursor:pointer;
  overflow:hidden;
  transition:box-shadow var(--t-base), transform var(--t-fast);
}
a.lk-card:hover,
button.lk-card:hover,
.lk-card[role="button"]:hover,
.lk-card.is-clickable:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-1px);
}

.lk-card-header{
  padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--c-border-subtle);
}
.lk-card-header h3{
  font-size:var(--fs-xl);
  font-variation-settings:'wght' var(--fw-semibold);
  color:var(--c-text);
  margin:0;
}
.lk-card-body{
  padding:var(--sp-5) var(--sp-6);
}

/* ============================================================
   툴팁 (.tooltip)
   ============================================================ */
.tooltip-box{ display:flex; align-items:center; gap:5px; }
.tooltip{ position:relative; display:inline-block; width:1.0625rem; height:1.0625rem; vertical-align:middle; }
.tooltip img{ width:100%; height:100%; cursor:pointer; font-size:1rem; margin-top:-1px; }
.tooltip p{ position:absolute; top:14px; left:14px; z-index:10; min-width:160px; border:1px solid var(--c-primary); font-variation-settings:'wght' 350; font-size:13px; background:var(--c-primary); color:#fff !important; border-radius:0 10px 10px 10px; padding:5px; opacity:0; visibility:hidden; transition:opacity 0.3s; text-align:left; }
.tooltip.on p{ opacity:1; visibility:visible; }
.tooltip p.right{ top:auto; bottom:14px; left:auto; right:14px; border-radius:10px 10px 0 10px; }
.tooltip p.top{ top:auto; top:-45px; border-radius:10px 10px 10px 0; }

/* ============================================================
   헤더 (.header)
   ============================================================ */
.header{ position:relative; z-index:500; }

/* ============================================================
   상단바 (.top-ui-bar) — Topbar
   ============================================================ */
.header .top-ui-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  top:0; left:0;
  width:100%;
  height:var(--topbar-h);
  padding:0 1.5rem 0 0;
  background:#fff;
  border-bottom:1px solid var(--c-border);
  box-shadow:0 1px 0 var(--c-border);
  z-index:400;
}
.header .top-ui-bar .date{ padding-left:calc(var(--gnb-width) + 1.5rem); transition:padding 0.25s ease; }
.header .top-ui-bar .date p{ font-variation-settings:'wght' var(--fw-semibold); font-size:var(--fs-lg); color:var(--c-text-secondary); letter-spacing:.01em; }
.header .top-ui-bar ul{ display:flex; gap:0; height:100%; justify-content:flex-end; align-items:center; margin-left:auto; }
.header .top-ui-bar ul li{ font-variation-settings:'wght' var(--fw-semibold); font-size:var(--fs-lg); }
.header .top-ui-bar ul li.name-modify a{ color:var(--c-text-secondary); cursor:pointer; text-decoration:none; font-variation-settings:'wght' var(--fw-medium); font-size:var(--fs-md); }
.header .top-ui-bar ul li.name-modify a b{ color:var(--c-text); font-variation-settings:'wght' var(--fw-semibold); }
.header .top-ui-bar .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-bg); color:var(--c-text-secondary); cursor:pointer; transition:border-color var(--t-base), color var(--t-base); }
.header .top-ui-bar .theme-toggle:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.header .top-ui-bar ul li a{ display:inline-flex; align-items:center; height:var(--topbar-h); padding:0 1rem; color:var(--c-text-secondary); text-decoration:none; transition:color var(--t-base); font-size:var(--fs-lg); font-variation-settings:'wght' var(--fw-semibold); }
.header .top-ui-bar ul li a:hover{ color:var(--c-text); }
.header .top-ui-bar ul li:first-of-type{ padding:0 1rem; border-right:1px solid var(--c-border); margin-right:0.5rem; }
.header .top-ui-bar ul li.my a{ padding-left:0.75rem; }

/* ============================================================
   GNB 사이드바 (.gnb)
   ============================================================ */
.header .gnb{
  position:fixed;
  left:0; top:0;
  width:var(--gnb-width);
  height:100dvh;
  background:var(--c-dark);
  transition:width 0.25s ease, padding 0.25s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:500;
}

/* 로고 영역 — 하단 구분선 강화 */
.header .gnb .logo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:var(--topbar-h);
  padding:0 1rem 0 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.header .gnb .logo a{ display:flex; align-items:center; overflow:hidden; white-space:nowrap; }
.header .gnb .logo a img{ height:22px; width:auto; flex-shrink:0; filter:brightness(0) invert(1); opacity:.9; }
.header .gnb .logo .fold-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  width:2rem;
  height:2rem;
  border-radius:var(--r-sm);
  cursor:pointer;
  flex-shrink:0;
  background:url(../images/img-arrow-fold.svg) 50% 50% no-repeat;
  background-size:16px;
  transition:background-color var(--t-base);
}
.header .gnb .logo .fold-btn:hover{ background-color:rgba(255,255,255,.12); }

/* 메뉴 목록 */
.header .gnb .gnb-list{ flex:1; overflow-y:auto; overflow-x:hidden; padding:0.5rem 0; }
.header .gnb .gnb-list ul{ list-style:none; }

/* 기본 메뉴 아이템 */
.header .gnb .gnb-list ul li a{
  display:flex;
  align-items:center;
  margin:2px 0.625rem;
  border-radius:var(--r-md);
  padding:0.6875rem 0.875rem;
  font-variation-settings:'wght' var(--fw-medium);
  font-size:var(--fs-xl);
  color:rgba(255,255,255,.55);
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--t-base), color var(--t-base), border-color var(--t-base);
  border-left:3px solid transparent;
}
.header .gnb .gnb-list ul li a img{
  width:1.125rem;
  height:1.125rem;
  margin-right:0.75rem;
  flex-shrink:0;
  opacity:.6;
  transition:opacity var(--t-base), filter var(--t-base);
  filter:brightness(0) invert(1);
}
.header .gnb .gnb-list ul li a span{ transition:opacity .25s, width .25s; overflow:hidden; }

/* 호버 */
.header .gnb .gnb-list ul li:hover a{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.header .gnb .gnb-list ul li:hover a img{ opacity:.9; }

/* 활성 메뉴 — primary 액센트 */
.header .gnb .gnb-list ul li.on a{
  background:var(--c-primary-bg);
  color:var(--c-primary);
  font-variation-settings:'wght' var(--fw-bold);
  border-left-color:var(--c-primary);
}
.header .gnb .gnb-list ul li.on a img{
  opacity:1;
  filter:invert(40%) sepia(90%) saturate(600%) hue-rotate(350deg) brightness(100%);
}

/* 서브메뉴 아이템 */
.header .gnb .gnb-list ul li.sub a,
.header .gnb .gnb-list ul ul li a{
  font-size:var(--fs-lg);
  color:rgba(255,255,255,.45);
  padding-left:2.625rem;
  margin-left:0.625rem;
  border-left-color:transparent;
}
.header .gnb .gnb-list ul li.sub:hover a,
.header .gnb .gnb-list ul ul li:hover a{
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
}
.header .gnb .gnb-list ul li.sub.on a,
.header .gnb .gnb-list ul ul li.on a{
  color:var(--c-primary);
  background:var(--c-primary-bg);
  border-left-color:var(--c-primary);
}

/* 하단 유저 영역 */
.header .gnb .gnb-user{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.875rem 1.125rem;
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  overflow:hidden;
}
.header .gnb .gnb-user .avatar{
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--c-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-variation-settings:'wght' var(--fw-extrabold);
  font-size:var(--fs-lg);
  flex-shrink:0;
}
.header .gnb .gnb-user .user-name{
  font-size:var(--fs-lg);
  font-variation-settings:'wght' var(--fw-semibold);
  color:rgba(255,255,255,.75);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .25s;
}

/* ============================================================
   GNB 접힘 상태 (.gnb.on)
   ============================================================ */
.header .gnb.on{ width:3.5rem; }
.header .gnb.on .logo{ padding:0; justify-content:center; }
.header .gnb.on .logo a{ width:0; overflow:hidden; margin:0; }
.header .gnb.on .logo .fold-btn{ background-image:url(../images/icon-nav-open-w.svg); }
.header .gnb.on .gnb-list ul li a{ margin:2px 0.375rem; padding:0.6875rem; justify-content:center; border-left:none; }
.header .gnb.on .gnb-list ul li a img{ margin-right:0; }
.header .gnb.on .gnb-list ul li a span{ width:0; opacity:0; }
.header .gnb.on .gnb-user{ justify-content:center; padding:0.875rem 0; }
.header .gnb.on .gnb-user .user-name{ width:0; opacity:0; }

/* ============================================================
   wrap / topbar 연동
   ============================================================ */
.wrap{ padding:var(--topbar-h) 0 0 var(--gnb-width); background:var(--c-surface); }
.wrap.on{ padding:var(--topbar-h) 0 0 3.5rem; }
.wrap.on .inner{ padding:1.875rem 1.875rem 3.75rem 1.875rem; }
.header .top-ui-bar.on .date{ padding-left:5.5rem; }
.inner{ padding:1.875rem 3rem 3.625rem 2.75rem; }

/* ============================================================
   푸터 (.footer)
   ============================================================ */
.footer{ position:fixed; bottom:0; left:0; width:100%; height:var(--footer-h); padding:0 1.5rem 0 var(--gnb-width); display:flex; align-items:center; background:#fff; border-top:1px solid var(--c-border); transition:padding 0.25s ease; z-index:300; }
.footer.on{ padding-left:4rem; }

/* ── 접힘 상태 첫 페인트 반영(FOUC 방지) — html.nav-closed는 .on과 동일 레이아웃.
   header.blade 최상단 스크립트가 localStorage를 읽어 페인트 전에 붙인다 ── */
@media (min-width:1201px){
    html.nav-closed .header .gnb{ width:3.5rem; }
    html.nav-closed .header .gnb .logo{ padding:0; justify-content:center; }
    html.nav-closed .header .gnb .logo a{ width:0; overflow:hidden; margin:0; }
    html.nav-closed .header .gnb .logo .fold-btn{ background-image:url(../images/icon-nav-open-w.svg); }
    html.nav-closed .header .gnb .gnb-list ul li a{ margin:2px 0.375rem; padding:0.6875rem; justify-content:center; border-left:none; }
    html.nav-closed .header .gnb .gnb-list ul li a img{ margin-right:0; }
    html.nav-closed .header .gnb .gnb-list ul li a span{ width:0; opacity:0; }
    html.nav-closed .header .gnb .gnb-user{ justify-content:center; padding:0.875rem 0; }
    html.nav-closed .header .gnb .gnb-user .user-name{ width:0; opacity:0; }
    html.nav-closed .wrap{ padding:var(--topbar-h) 0 0 3.5rem; }
    html.nav-closed .wrap .inner{ padding:1.875rem 1.875rem 3.75rem 1.875rem; }
    html.nav-closed .header .top-ui-bar .date{ padding-left:5.5rem; }
    html.nav-closed .footer{ padding-left:4rem; }
}
.footer p{ font-variation-settings:'wght' var(--fw-regular); font-size:var(--fs-md); color:var(--c-text-muted); }

/* ============================================================
   반응형 미디어 쿼리
   ============================================================ */
@media all and (max-width:1600px) {
  .top-ui .select-box.item-count{ display:none; }
}
@media all and (max-width:1200px) {
  select{ background:url(../images/icon-select-arrow.svg) calc(100% - clamp(10px,1.167vw,14px)) 50% no-repeat; }
  .wrap{ padding:3.75rem 0 0 3.75rem; }
  .inner{ padding:1.875rem 1.875rem 3.75rem 1.875rem; }
  .search-box form{ width:clamp(300px,32.083vw,385px); }
  .top-ui .select-box{ min-width:clamp(80px,12.5vw,150px); }
  .top-ui.mobile .search-box button{ height:clamp(35px,3.333vw,38px); width:clamp(35px,3.333vw,38px); background-size:clamp(20px,1.833vw,22px); }
  .top-ui.mobile .search-box select,
  .top-ui.mobile .search-box input,
  .top-ui.mobile .select-box select{ font-size:clamp(14px,1.333vw,16px); height:clamp(35px,3.333vw,38px); }
}
@media all and (max-width:768px) {
  .header .top-ui-bar{ justify-content:flex-end; }
  .header .top-ui-bar .date{ display:none; }
  .top-ui.mobile{ flex-wrap:wrap; }
  .top-ui.mobile .flex-box{ width:100%; margin-bottom:6px; justify-content:flex-end; }
  .top-ui.mobile .search-box,
  .top-ui.mobile .search-box form{ width:100%; }
  .top-ui.mobile .search-box input{ max-width:none; }
  .modal .content h3{ font-size:clamp(20px,3.125vw,24px); padding-bottom:clamp(10px,2.604vw,20px); }
  .modal .content{ padding:clamp(15px,4.557vw,35px) clamp(15px,3.255vw,25px) 0; }
  .modal .content .close{ top:clamp(15px,3.906vw,30px); right:clamp(15px,3.255vw,25px); }
  .modal .content .close img{ width:clamp(24px,3.906vw,30px); }
  .tooltip-box{ gap:clamp(3px,0.651vw,5px); }
  .tooltip{ width:clamp(14px,2.344vw,17px); height:clamp(14px,2.344vw,17px); }
  .tooltip p{ top:clamp(13px,2.214vw,17px); left:clamp(13px,2.214vw,17px); font-size:clamp(11px,1.693vw,13px); min-width:clamp(100px,20.833vw,160px); }
}
@media all and (max-width:500px) {
  .inner{ padding:1rem 1rem 3.125rem; }
  .top-ui{ padding-bottom:0.625rem; margin-bottom:0.625rem; }
  .header .top-ui-bar ul{ gap:0 1.25rem; }
  .header .top-ui-bar ul li:first-of-type{ margin-right:0; }
  .footer{ padding:10px 0 10px 3.75rem; }
  .footer p{ font-size:clamp(11px,2.8vw,14px); }
}
@media all and (max-width:480px) {
  select{ background:url(../images/icon-select-arrow.svg) calc(100% - clamp(4px,2.083vw,10px)) 50% no-repeat; }
  .top-ui.mobile .flex-box{ gap:5px; }
  .top-ui.mobile .select-box{ min-width:clamp(80px,12.5vw,150px); }
  .top-ui.mobile .search-box input,
  .top-ui.mobile .search-box select,
  .top-ui.mobile .select-box select{ font-size:clamp(12px,2.917vw,14px); height:clamp(30px,7.292vw,35px); padding:0 clamp(14px,7.292vw,30px) 0 clamp(10px,2.917vw,14px); }
  .top-ui.mobile .search-box select{ min-width:clamp(60px,16.667vw,80px); }
  .top-ui.mobile .search-box input::placeholder,
  .top-ui.mobile .search-box input{ font-size:clamp(12px,2.917vw,14px); }
  .top-ui.mobile .search-box button{ height:clamp(30px,7.292vw,35px); width:clamp(30px,7.292vw,35px); background-size:clamp(18px,4.167vw,20px); }
  .header .top-ui-bar ul{ flex-wrap:wrap; height:100%; padding:0.3125rem 0; }
  .header .top-ui-bar ul li{ font-size:var(--fs-md); }
  .header .top-ui-bar ul li:first-of-type{ width:100%; text-align:right; }
  .header .top-ui-bar ul li a{ padding:0.4rem 0 0.4rem 19px; background-size:16px; background-position:0 40%; }
  .modal .content h3{ font-size:clamp(16px,4.167vw,20px); }
  .modal .content .close{ top:clamp(10px,3.125vw,15px); right:clamp(10px,3.125vw,15px); }
  .modal .content .close img{ width:clamp(20px,3.125vw,24px); }
}

/* ============================================================
   TODO / 기타
   ============================================================ */
.box figure img { width:100%; height:100%; object-fit:cover; }
.server-error-box { border:10px solid rgb(255,97,97); }

/* 241015 전체화면 */
.full{ background-color:#252424; }
.full .header{ display:none; }
.full .footer{ display:none; }

/* ── 공용 알림/확인 모달 (lkAlert / lkConfirm) ── */
.lk-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; }
.lk-modal.on{ display:flex; }
.lk-modal-dim{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.lk-modal-box{ position:relative; z-index:1; width:min(92vw, 24rem); background:var(--c-bg); border-radius:1rem; box-shadow:0 20px 50px rgba(0,0,0,.25); padding:1.75rem 1.5rem 1.25rem; text-align:center; animation:lkModalIn .15s ease; }
@keyframes lkModalIn{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
.lk-modal-icon{ width:3rem; height:3rem; border-radius:50%; margin:0 auto .875rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-variation-settings:'wght' var(--fw-bold); }
.lk-modal-icon.info{ background:#e0f2fe; color:#0369a1; }
.lk-modal-icon.success{ background:#dcfce7; color:#15803d; }
.lk-modal-icon.warn{ background:#fef3c7; color:#b45309; }
.lk-modal-icon.error{ background:#fee2e2; color:#dc2626; }
.lk-modal-msg{ margin:0 0 1.25rem; font-size:.9375rem; line-height:1.6; color:var(--c-text); white-space:pre-line; word-break:break-word; }
.lk-modal-actions{ display:flex; gap:.5rem; justify-content:center; }
.lk-modal-actions .lk-btn{ min-width:5rem; justify-content:center; }
.full .index-full{ padding:0; }
.full .index-full .top-ui{ display:none; }
.full .inner{ padding:40px; }
.full .main .scroll-box{ max-height:calc(100dvh - 80px); }

/* 초기 숨김 유틸 — 인라인 style="display:none" 대체. JS는 classList.add/remove('u-hidden') 사용 */
.u-hidden{ display:none !important; }

/* ── 접근성 ──
   reset.css의 전역 outline:none이 키보드 포커스를 지우므로 :focus-visible로 복원.
   (마우스 클릭에는 안 뜨고 키보드 탐색에만 표시) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--c-primary); outline-offset:2px; border-radius:var(--r-sm);
}
/* 모션 최소화 선호 시 전환·애니메이션 제거 */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}