body {
    /* 2026-08-31: Noto Sans KR → 맑은 고딕으로 되돌림(작은 글씨 가독성, 사용자 요청) */
    font-family: '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif;
}

[x-cloak] { display: none !important; }
/* Alpine 시작 전에는 본문을 숨김(깜빡임 방지) - 시작/예외 처리는 tailwind-config.js 참고 */
html.sw-boot:not(.alpine-ready) body[x-data] main { visibility: hidden; }

/* ===================== 좌측 사이드바 레이아웃 (2026-08-27 리디자인) =====================
   상단 GNB를 좌측 사이드바로 교체하면서 추가된 규칙. 폭 트랜지션과 접힘(collapsed) 상태의
   라벨 숨김만 CSS로 처리하고, 나머지는 전부 Tailwind 유틸리티 클래스로 마크업에서 직접 처리함. */
.sidebar {
    width: 232px;
    transition: width 150ms ease;
}
.sidebar.collapsed {
    width: 72px;
}
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-chevron,
.sidebar.collapsed .sidebar-badge-text {
    display: none;
}
/* 로고: 펼침 상태에선 가로형 워드마크(sidebar-label)만 크게 보여주고, 접힘 상태에선 아이콘(sidebar-logo-icon)만 표시 */
.sidebar-logo-icon {
    display: none;
}
.sidebar.collapsed .sidebar-logo-icon {
    display: block;
}
.sidebar-scroll {
    scrollbar-width: thin;
}

/* ===================== 조직도 (hr.html "조직도" 탭, 2026-08-27 재작업) =====================
   순수 CSS 가로 트리 커넥터. 아이콘/기호 없이 통일된 박스(.org-box) + 정확히 맞아떨어지는 연결선만 사용.
   - .org-stem : 부모 → 자식 1:1 세로 연결선(가운데 정렬).
   - .org-branch : 부모 하나 아래로 여러 자식이 가로로 갈라지는 구간(inline-flex). 각 자식(.org-node)이
     자기 위로 세로선(::after) + 좌우 절반 가로선(::before)을 그리고, 양 끝 자식은 바깥쪽 절반을
     숨겨서 가로 막대가 첫/마지막 박스 중심까지만 정확히 이어지도록 함.
   - 잎 박스는 전부 같은 고정폭(.org-box width)이라 분기가 좌우 대칭 → 위에서 내려오는 세로선(부모
     stem)이 가로 막대 정중앙에 정확히 맞음(폭이 제각각이면 막대 중점이 틀어져 세로선이 삐뚤어 보임).
   - 크게 보이도록 박스·폰트·연결선을 키움(전체 ≈1100×470px, 구 814×253에서 확대). 9개 팀을 한 줄에
     넣어도 1400px+ 화면이면 가로 스크롤 없음. 그보다 좁으면 .org-chart 래퍼 overflow-x-auto로 왼쪽부터
     스크롤(잘림 없음), 넉넉하면 w-max+mx-auto로 가운데 정렬. 세로 여백 넉넉히(stem 38px). */
.org-stem {
    width: 2px;
    height: 38px;
    background: #cbd5e1;
    margin: 0 auto;
}
.org-branch {
    display: inline-flex;
    align-items: flex-start;
}
/* 자식 간격은 flex gap이 아니라 좌우 padding으로 줍니다. 그래야 각 자식의 가로 연결선(::before,
   width:100%)이 서로 빈틈없이 이어져 하나의 연속된 수평선으로 보입니다(gap을 쓰면 그 폭만큼 선이 끊김). */
.org-branch > .org-node {
    position: relative;
    padding: 38px 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: 0;
    font: inherit;
}
/* 9개 팀 줄은 박스 사이 간격을 조금 더 넓게 */
.org-branch-teams > .org-node {
    padding-left: 16px;
    padding-right: 16px;
}
/* Level 2 분기: 사업관리부/관리부를 각각 아래 제어2팀·원자력TF 열에 맞춰 바깥으로 벌림
   (양 끝 노드에 좌우 padding을 크게 줘서 박스를 중앙에서 232px 떨어뜨림 - 팀 노드폭 116px × 2칸).
   박스는 노드에 좌우 대칭 padding으로 들어가므로 커넥터(::before/::after의 50%)는 그대로 박스 중앙에 맞음. */
.org-branch-lead > .org-node:first-child,
.org-branch-lead > .org-node:last-child {
    padding-left: 115px;
    padding-right: 115px;
}
button.org-node {
    cursor: pointer;
}
.org-branch > .org-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 38px;
    border-top: 2px solid #cbd5e1;
}
.org-branch > .org-node::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 38px;
    background: #cbd5e1;
    transform: translateX(-50%);
}
.org-branch > .org-node:first-child::before {
    left: 50%;
    width: 50%;
}
.org-branch > .org-node:last-child::before {
    width: 50%;
}
.org-branch > .org-node:only-child::before {
    display: none;
}

.org-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    width: 84px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 13px 8px;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.org-box-ceo {
    width: auto;
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    padding: 14px 40px;
    font-size: 15px;
}
.org-box-accent {
    width: auto;
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    padding: 13px 22px;
    font-size: 12.5px;
}
button.org-node:hover .org-box {
    border-color: #2563eb;
    color: #1d4ed8;
    box-shadow: 0 1px 8px rgba(37, 99, 235, .16);
}

/* 표 공통 규칙: 내용은 기본적으로 가운데 정렬, 셀 간격은 내용에 맞춰 타이트하게.
   Tailwind CDN 유틸리티(padding, text-left 등)보다 대체로 우선 적용됩니다.
   특정 셀에서 padding을 다르게 주려면 유틸리티 클래스가 아니라 인라인 style로 덮어쓸 것.
   (2026-08-19 timesheet.html 월간뷰 작업 중 실제로 겪은 문제 - PROJECT_STATUS 8-10 참고.)
   2026-09-04: 원래 이 주석 안에 "p-(별표)(슬래시)text-left" 문자열이 있어 (별표)(슬래시)가 주석을
   조기 종료시켜 아래 규칙이 파서 오류로 통째로 무시되고 있었음 - 표가 왼쪽 정렬로 보이던 원인. */
table td, table th {
    text-align: center;
    padding: 6px 10px;
}

/* 숫자 입력칸의 브라우저 기본 스피너(위아래 화살표)를 제거 - 직접 타이핑 입력이 기본인 화면(TimeSheet 등)에서
   화살표가 입력칸을 비대칭으로 보이게 하고 가운데 정렬을 방해하는 문제가 있었음 (2026-08-19). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.mega-menu-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* 엑셀 스타일 데이터 그리드 (기성관리 등 데이터 밀도가 높은 관리자 화면에서 사용) */
.excel-table th, .excel-table td {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
}
.excel-table th {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 700;
    text-align: center;
}
.excel-table input[type="text"],
.excel-table input[type="number"],
.excel-table input[type="date"] {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 11px;
}
.excel-table input:focus {
    outline: 2px solid #2563eb;
    background-color: #fff;
}

/* 조회 전용(2026-10-07) - 관리자가 아닌 사람이 관리 화면을 열면(메뉴 개별 부여 등) 수정·삭제·저장 진입 버튼을 숨깁니다. data-edit 표시가 붙은 요소가 대상. */
body.read-only [data-edit] { display: none !important; }

/* ---- 좁은 화면·높은 배율·모바일 안전장치 (2026-11-03) ----
   브라우저 배율 125%나 모바일처럼 화면이 좁아도 입력 칸이 사라지거나 버튼이 가려지지 않게 하는 공통 규칙입니다.
   (배경: TimeSheet 작성 표에서 Project 칸이 폭 0 으로 찌그러져 선택 칸이 안 보이던 문제 - 이용봉 전무 문의) */
/* 1) 입력 칸이 한 줄(flex)에서 자기 기본 폭(약 150~200px) 때문에 줄어들지 못해 화면 밖으로 밀려나는 것을 막음 */
input, select, textarea { min-width: 0; }
/* 2) 창(모달)이 화면 높이보다 커지면(가로로 돌린 휴대폰·낮은 노트북 화면) 창 안에서 스크롤 - 위·아래 버튼이 화면 밖에 걸려 못 누르는 일 방지.
      이미 max-h 를 직접 지정한 창과 좌측 메뉴(서랍)는 제외 */
.fixed.inset-0 > div[class*="bg-white"]:not([class*="max-h-"]):not(.h-full) {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
/* 3) 모바일 브라우저가 글자 크기를 제멋대로 키우지 않게 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 4) 휴대폰(터치 + 좁은 화면): 입력 글자가 16px 보다 작으면 아이폰 사파리가 입력칸을 누를 때 화면을 확대해 버려 입력이 불편함 → 16px 로.
      TimeSheet 시간 칸(w-8, 숫자 2~3자리)은 칸이 좁아 제외 */
@media (pointer: coarse) and (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([class~="w-8"]),
    select, textarea { font-size: 16px; }
}