/* 사내 업무 포털 — 원본 데모 CSS(ss24-original/) 대비 의도적 차이만 둔다 (OPS-WS-01).
   기록: docs/development/plan-staff-workspace.md §7 */

/* 1. 원본은 lucide 스크립트가 <i data-lucide> 를 SVG 로 바꾼다. 여기서는 같은 아이콘의 인라인 SVG 를 <i> 안에 둔다. */
i[aria-hidden] { display: inline-flex; flex-shrink: 0; }
i[aria-hidden] svg { width: 100%; height: 100%; display: block; }
.btn-logout i, .area__chip i, .hub__footer .fitem i { width: 16px; height: 16px; }
.area__ic i { width: 26px; height: 26px; }

/* 2. 원본 업무영역 카드는 div+onClick 이다. 외부 서비스로 가는 링크라 <a> 를 쓰고 링크 모양을 지운다. */
a.area { display: block; color: inherit; text-decoration: none; }
a.area.is-disabled { cursor: default; }
.hub { padding-top: var(--sp-12); }
.ws-brand { display: inline-flex; align-items: center; }

/* 2-1. 원본 .hub-row 는 3열이다. 카드가 HOME·메일·클라우드·ERP 네 장이므로 넓은 화면은 4열, 중간은 2열로 둔다. */
.hub-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .hub-row { grid-template-columns: repeat(2, 1fr); } }

/* 3. 원본 760px 이하 규칙은 방사형 허브용으로 .area 를 폭 30%·설명 숨김으로 줄인다(1615~1623행).
      포털은 카드가 세 장뿐이므로 1열 전체 폭으로 쌓고 설명을 남긴다. */
@media (max-width: 760px) {
  .hub { padding: var(--sp-8) var(--sp-4) var(--sp-10); }
  .hub-row { grid-template-columns: 1fr; }
  .hub-row .area { width: 100%; min-width: 0; padding: var(--sp-5) var(--sp-4); }
  .hub-row .area__desc { display: block; min-height: 0; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar__who { display: none; }
  .ws-brand img { height: 28px; }
}

/* 4. 로그인 확인 중·권한 없음 안내(원본에 없는 관문 상태). */
.ws-gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-6); text-align: center; color: var(--fg-secondary); font-size: var(--fs-body); }
.ws-gate[hidden] { display: none; }

/* 5. IC-6 관리 콘솔에서 게시한 공지(원본에 없는 관문 안내). 원본 토큰 색만 쓴다. */
.ws-notice { width: 100%; box-sizing: border-box; max-width: 1080px; margin: 0 auto var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); color: var(--fg-body); font-size: var(--fs-body-sm); line-height: 1.6; white-space: pre-line; }
.ws-notice[hidden] { display: none; }
.ws-notice--warning { border-color: var(--caution); background: var(--caution-bg); color: var(--caution-strong); font-weight: 700; }

/* 6. OPS-NOTICE-01 사내 공지(원본에 없는 관문 영역). 원본 .card/.card__head 를 그대로 쓰고(색은 .brand-green 토큰)
      폭·목록 행·'새 글' 표시만 둔다. head-meta 는 원본에서 글자이므로 링크 밑줄만 지운다. */
.ws-ann { width: 100%; box-sizing: border-box; max-width: 1080px; margin: 0 auto var(--sp-6); }
.ws-ann[hidden] { display: none; }
.ws-ann .card__head a.head-meta { color: var(--blue-600); text-decoration: none; }
.ws-ann__list { list-style: none; margin: 0; }
.ws-ann__list li + li { border-top: 1px solid var(--border); }
.ws-ann__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; color: inherit; text-decoration: none; }
.ws-ann__item[href]:hover .ws-ann__subject { text-decoration: underline; }
.ws-ann__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-ann__subject { font-size: var(--fs-body); font-weight: 700; color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ann__new { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--caution-bg); color: var(--caution-strong); font-size: var(--fs-caption); font-weight: 800; }
.ws-ann__meta { flex-shrink: 0; font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; }
.ws-ann__empty { padding: var(--sp-3) 0; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
@media (max-width: 760px) {
  .ws-ann__item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ws-ann__title { max-width: 100%; }
}