@charset "UTF-8";
/**
 * TagOnWorks PC LNB
 *
 * 원본: design/design_Sian_PC_LNB (TagOnWorks _pc.fig / main_calendar_admin 실측값).
 * 수치를 임의로 4px/8px 그리드에 맞추지 않는다 - 실측값이다.
 *
 * 원본과 다른 점 셋:
 *  1) 메뉴가 서버에서 그려진다. 원본 lnb.js 는 하드코딩 IA 를 클라이언트에서 그리는데,
 *     여기서는 company_menu 가 회사마다 달라 JSP 가 그린다. 상태는 aria 속성으로 같게 맞췄다.
 *     섹션 = 1Depth, 메뉴 = 2Depth 다(company_menu.parent_id 가 전부 0 이라 DB 에는 뎁스가 없다).
 *  2) 접기를 실제로 구현했다. 원본은 onToggle 콜백만 있고 접힌 모습이 없었다.
 *  3) 알림 종이 LNB 에 없다 - 본문 우측 상단으로 뺐다(아래 「알림 종」).
 */

/* ── 토큰 ─────────────────────────────────────── */
:root {
  --tw-lnb-bg: #1D1D26;
  --tw-lnb-fg: #A5A5BA;
  --tw-lnb-fg-strong: #FFFFFF;
  --tw-lnb-hover-bg: #343445;
  --tw-lnb-active-bg: #4F31D4;
  --tw-lnb-sub-active: #9797FF;
  --tw-lnb-divider: #343445;
  --tw-lnb-badge-bg: #EE4F4F;
  --tw-lnb-toggle-bg: #9797FF;

  --tw-lnb-width: 240px;
  /* 접힘 폭 = 인셋 10*2 + BOX 내부 패딩 10*2 + 아이콘 28 */
  --tw-lnb-width-collapsed: 68px;
  --tw-lnb-logo-height: 70px;
  --tw-lnb-profile-height: 106px;
  --tw-lnb-row-h1: 50px;
  --tw-lnb-row-h2: 44px;
  --tw-lnb-box-h1: 44px;
  --tw-lnb-box-h2: 38px;
  --tw-lnb-inset: 10px;
  --tw-lnb-pad: 10px;
  --tw-lnb-gap: 10px;
  --tw-lnb-sub-indent: 34px;

  --tw-radius: 6px;
  --tw-fs-body: 14px;
  --tw-fs-caption: 12px;
  --tw-fs-micro: 10px;
  --tw-fw-regular: 400;
  --tw-fw-medium: 500;
  --tw-duration: 120ms;
  --tw-ease: ease-out;
}

/* ── 셸 ───────────────────────────────────────── */
.tw-lnb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: var(--tw-lnb-width);
  height: 100%;
  background-color: var(--tw-lnb-bg);
  -webkit-font-smoothing: antialiased;
  transition: width var(--tw-duration) var(--tw-ease);
}
/* 본문은 LNB 폭만큼 비켜 준다. 접으면 같이 따라온다 - 같은 변수를 본다. */
.main-flex { padding-left: var(--tw-lnb-width); transition: padding-left var(--tw-duration) var(--tw-ease); }
body.lnb-collapsed { --tw-lnb-width: var(--tw-lnb-width-collapsed); }

/* ── 로고 ─────────────────────────────────────── */
.tw-lnb__brand {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--tw-lnb-logo-height);
  padding: 0 26px;
  box-sizing: border-box;
  margin: 0;
}
.tw-lnb__brand a { display: block; line-height: 0; }
.tw-lnb__brand img { height: 30px; width: auto; display: block; }
/* 접히면 워드마크가 안 들어간다 - 심볼로 바꾼다 */
.tw-lnb__brand .tw-lnb__symbol { display: none; height: 28px; }
body.lnb-collapsed .tw-lnb__brand { padding: 0; justify-content: center; }
body.lnb-collapsed .tw-lnb__brand .tw-lnb__wordmark { display: none; }
body.lnb-collapsed .tw-lnb__brand .tw-lnb__symbol { display: block; }

/* ── 접기 버튼 ────────────────────────────────── */
.tw-lnb__collapse {
  position: absolute;
  left: 227px;
  top: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-color: var(--tw-lnb-toggle-bg);
  box-shadow: 2px 2px 4px rgba(85, 85, 110, 0.2);
  color: var(--tw-lnb-fg-strong);
  cursor: pointer;
  transition: left var(--tw-duration) var(--tw-ease);
}
/* 접히면 화살표가 반대를 가리키고, 좁아진 폭의 오른쪽 끝에 붙는다 */
.tw-lnb__collapse svg { transition: transform var(--tw-duration) var(--tw-ease); }
body.lnb-collapsed .tw-lnb__collapse { left: 55px; }
body.lnb-collapsed .tw-lnb__collapse svg { transform: rotate(180deg); }

/* ── 스크롤 영역 ──────────────────────────────── */
.tw-lnb__menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-lnb-divider) transparent;
}
.tw-lnb__menu::-webkit-scrollbar { width: 6px; }
.tw-lnb__menu::-webkit-scrollbar-thumb { background-color: var(--tw-lnb-divider); border-radius: 3px; }
.tw-lnb__menu::-webkit-scrollbar-track { background-color: transparent; }

/* ── 행 ───────────────────────────────────────── */
.tw-lnb__row {
  flex: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--tw-lnb-inset);
  border: 0;
  background: none;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tw-lnb__row--d1 { height: var(--tw-lnb-row-h1); }
.tw-lnb__row--d2 { height: var(--tw-lnb-row-h2); }

/* ── BOX ──────────────────────────────────────── */
.tw-lnb__box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--tw-lnb-gap);
  padding: 0 var(--tw-lnb-pad);
  box-sizing: border-box;
  border-radius: var(--tw-radius);
  color: var(--tw-lnb-fg);
}
.tw-lnb__box--d1 { height: var(--tw-lnb-box-h1); font-size: var(--tw-fs-body); font-weight: var(--tw-fw-medium); }
.tw-lnb__box--d2 { height: var(--tw-lnb-box-h2); padding-left: var(--tw-lnb-sub-indent); font-size: var(--tw-fs-body); font-weight: var(--tw-fw-regular); }
.tw-lnb__icon { flex: none; }

/* 1Depth - hover 는 BOX 컬러만, 레이블 색은 원본 규격대로 유지 */
.tw-lnb__row--d1:hover .tw-lnb__box { background-color: var(--tw-lnb-hover-bg); }
.tw-lnb__row--d1[aria-current="true"] .tw-lnb__box,
.tw-lnb__row--d1[aria-current="true"]:hover .tw-lnb__box {
  background-color: var(--tw-lnb-active-bg);
  color: var(--tw-lnb-fg-strong);
}
/* 2Depth - 박스 없이 텍스트에만 */
.tw-lnb__row--d2:hover .tw-lnb__box { color: var(--tw-lnb-fg-strong); }
.tw-lnb__row--d2[aria-current="page"] .tw-lnb__box,
.tw-lnb__row--d2[aria-current="page"]:hover .tw-lnb__box {
  color: var(--tw-lnb-sub-active);
  font-weight: var(--tw-fw-medium);
}
.tw-lnb__label { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 불릿 · 배지 · New dot · 셰브론 ───────────── */
.tw-lnb__bullet { flex: none; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; }
.tw-lnb__badge {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: var(--tw-lnb-badge-bg);
  color: var(--tw-lnb-fg-strong);
  font-size: var(--tw-fs-micro);
  font-weight: var(--tw-fw-medium);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* 2Depth 는 셰브론 폭(14) + 간격(8) + gap(10) 만큼 비워 1Depth 와 x 를 맞춘다 */
.tw-lnb__box--d2 .tw-lnb__badge { margin-right: 32px; }
.tw-lnb__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: var(--tw-lnb-badge-bg);
  align-self: flex-start;
  margin-top: 12px;
  margin-left: calc(-1 * var(--tw-lnb-gap));
}
.tw-lnb__chevron { flex: none; margin-left: auto; transition: transform var(--tw-duration) var(--tw-ease); }
.tw-lnb__badge + .tw-lnb__chevron { margin-left: 8px; }
.tw-lnb__row[aria-expanded="true"] .tw-lnb__chevron { transform: rotate(180deg); }

/* ── 2Depth 그룹 ──────────────────────────────── */
.tw-lnb__group { flex: none; display: flex; flex-direction: column; }
/* [hidden] 은 브라우저 기본 스타일이라 위 display:flex 가 이긴다 - 여기서 되돌린다.
   (2026-09-10 알림 말풍선에서 같은 함정을 밟았다) */
.tw-lnb__group[hidden] { display: none; }

/* ── 구분선 ───────────────────────────────────── */
.tw-lnb__rule { flex: none; height: 1px; margin: 24px 20px; background-color: var(--tw-lnb-divider); }
body.lnb-collapsed .tw-lnb__rule { margin: 16px 14px; }

/* ── 프로필 ───────────────────────────────────── */
.tw-lnb__profile {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--tw-lnb-profile-height);
  padding: 0 20px;
  box-sizing: border-box;
  border-top: 1px solid var(--tw-lnb-divider);
}
.tw-lnb__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background-color: var(--tw-lnb-divider); }
.tw-lnb__identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-lnb__name { color: var(--tw-lnb-fg-strong); font-size: var(--tw-fs-body); font-weight: var(--tw-fw-medium); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-lnb__name:hover { text-decoration: underline; }
.tw-lnb__email { color: var(--tw-lnb-fg); font-size: var(--tw-fs-caption); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-lnb__logout { flex: none; margin-left: auto; padding: 0; border: 0; background: none; color: var(--tw-lnb-fg); cursor: pointer; }
.tw-lnb__logout:hover { color: var(--tw-lnb-fg-strong); }

/* ── 접힘 ─────────────────────────────────────── */
/* 아이콘만 남는다. 레이블·배지·셰브론·불릿은 감추고, 2Depth 그룹은 통째로 접는다 -
   좁은 폭에서는 들여쓴 텍스트를 보여 줄 자리가 없다. */
body.lnb-collapsed .tw-lnb__label,
body.lnb-collapsed .tw-lnb__chevron,
body.lnb-collapsed .tw-lnb__dot,
body.lnb-collapsed .tw-lnb__group,
body.lnb-collapsed .tw-lnb__identity,
body.lnb-collapsed .tw-lnb__logout { display: none; }
body.lnb-collapsed .tw-lnb__box { gap: 0; justify-content: center; padding: 0; }
body.lnb-collapsed .tw-lnb__profile { padding: 0; justify-content: center; }
/* 접혀도 미확인 건수는 보여야 한다 - 숫자를 지우고 아이콘 위 점으로 줄인다 */
body.lnb-collapsed .tw-lnb__badge {
  position: absolute;
  margin: 0;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  transform: translate(12px, -12px);
  font-size: 0;
  overflow: hidden;
}
body.lnb-collapsed .tw-lnb__box--d1 { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .tw-lnb, .main-flex, .tw-lnb__chevron, .tw-lnb__collapse, .tw-lnb__collapse svg { transition: none; }
}

/* ── 고정 상단 바(.top)를 LNB 폭에 맞춘다 ────────
   .top 은 position:fixed · left:0 · width:100% 라 사이드바 밑까지 깔린다. 그래서
   padding-left 로 240+40 을 비워 두는데, 그 값이 style.css 에 **박혀 있어** 접어도
   따라오지 않았다. 같은 변수를 보게 한다. */
.top { padding-left: calc(var(--tw-lnb-width) + 40px); }

/* ── 알림 종 (고정 상단 바 오른쪽 끝) ─────────────
   새 LNB 디자인에는 종이 없고 로고 줄 오른쪽 끝은 접기 버튼 자리라, 본문 쪽으로 뺐다.

   **.top 은 빈 띠가 아니다**(2026-09-11 에 잘못 봤다). position:fixed · height:80px ·
   z-index:50 인 페이지 액션 바이고, 29개 화면이 그 오른쪽에 버튼을 둔다. 그래서
   z-index 를 그 위(60)로 올리고, .top 의 오른쪽 패딩을 종 폭만큼 더 비운다.
   top:20px 은 80px 바의 세로 중앙이다((80-40)/2).

   fixed 인 이유는 sidebar.jsp 가 sitemesh 레이아웃에 있어서다. 한 번만 그려도
   모든 화면의 같은 자리에 뜬다.

   아이콘을 PNG 에서 인라인 SVG 로 바꿨다 - 예전 것은 사이드바(어두운 배경)용
   회색/흰색 고정이라 흰 본문에서 안 보인다. currentColor 면 배경에 맞춰 쓸 수 있다. */
/* 종이 들어갈 자리를 비운다. 간격 20px 는 .top .right 가 버튼 사이에 쓰는 값과 같아서,
   종이 마지막 버튼과 같은 간격으로 떨어져 한 줄로 읽힌다.
   .top 이 없는 화면(대시보드·팝업)에서는 이 규칙이 아무 일도 하지 않고,
   종은 .container 의 상단 패딩(120px) 안 빈 자리에 그대로 뜬다. */
.top { padding-right: 100px; }  /* 40(원래 여백) + 40(종) + 20(간격) */
.tw-bell-wrap { position: fixed; top: 20px; right: 40px; z-index: 60; }
.tw-bell {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: #4E4E69;
  cursor: pointer;
}
.tw-bell:hover { background-color: #F4F4FA; color: #343445; }
.tw-bell[aria-expanded="true"] { background-color: #EBEBFF; color: #4F31D4; }
.tw-bell svg { display: block; margin: 0 auto; }
.tw-bell .badge {
  position: absolute;
  top: 2px;
  right: 0;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  background-color: var(--tw-lnb-badge-bg);
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
}

/* 말풍선 - 종 아래로, 오른쪽 끝을 맞춰 편다(예전에는 사이드바 오른쪽이었다) */
.tw-bell-wrap .alarm-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 1;
  width: 360px;
  max-height: 60vh;
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e3e9;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(35, 35, 60, 0.18);
  cursor: default;
}
.tw-bell-wrap .alarm-pop[hidden] { display: none; }
/* 꼬리 - 종을 가리킨다. 위를 향하므로 좌우가 아니라 아래/위 테두리로 만든다. */
.tw-bell-wrap .alarm-pop:before,
.tw-bell-wrap .alarm-pop:after {
  content: '';
  position: absolute;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.tw-bell-wrap .alarm-pop:before { top: -9px; border-bottom: 9px solid #e3e3e9; }
.tw-bell-wrap .alarm-pop:after  { top: -8px; border-bottom: 9px solid #fff; }

/* ── 말풍선 내부 ─────────────────────────────────
   원래 `.sidebar .logo .alarm-pop-*` 였다. 종이 사이드바를 떠나 그 선택자가 죽어
   여기로 옮겼다 - 모양은 그대로다. */
.tw-bell-wrap .alarm-pop-head { display: flex; align-items: center; padding: 12px 16px 10px; border-bottom: 1px solid #f0f0f5; }
.tw-bell-wrap .alarm-pop-head strong { font-size: 14px; font-weight: 600; color: #343445; line-height: 1.2; }
.tw-bell-wrap .alarm-pop-list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.tw-bell-wrap .alarm-pop-list li { padding: 10px 10px 12px; border-radius: 6px; line-height: 1.45; }
.tw-bell-wrap .alarm-pop-list li + li { border-top: 1px solid #f0f0f5; }
.tw-bell-wrap .alarm-pop-list li.is-new { background: #f7f5ff; }
.tw-bell-wrap .alarm-pop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tw-bell-wrap .alarm-pop-subject { font-size: 13px; font-weight: 600; color: #343445; min-width: 0; }
.tw-bell-wrap .alarm-pop-list li.is-new .alarm-pop-subject:before {
  content: 'NEW'; margin-right: 5px; padding: 1px 5px; border-radius: 9px;
  font-size: 10px; font-weight: 600; color: #4f31d4; background: #ebebff; vertical-align: 1px;
}
.tw-bell-wrap .alarm-pop-date { flex: none; font-size: 11px; color: #a5a5ba; font-variant-numeric: tabular-nums; }
.tw-bell-wrap .alarm-pop-body { margin-top: 5px; font-size: 12px; color: #4e4e69; }
.tw-bell-wrap .alarm-pop-body * { font-size: inherit; color: inherit; }
.tw-bell-wrap .alarm-pop-go { display: inline-block; margin-top: 7px; font-size: 12px; color: #6b6bda; }
.tw-bell-wrap .alarm-pop-empty { margin: 0; padding: 22px 16px 26px; text-align: center; font-size: 13px; color: #a5a5ba; }