/* ---- 상단 내비게이션 (하드코딩) ---- */
.gw-topnav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 16px;
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #dfe3e8;
}
.gw-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1B3A6B;
    white-space: nowrap;
}
.gw-tabs {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow: hidden;
}
.gw-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    padding: 4px 2px;
    cursor: default;
}
.gw-tab .gw-tab-ic { font-size: 15px; }
.gw-tab.active {
    color: #1B3A6B;
    font-weight: 700;
    border-bottom: 2px solid #1B3A6B;
}
.gw-user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #555;
    white-space: nowrap;
}
.gw-user .gw-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #dde5f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.gw-user .gw-user-info { line-height: 1.3; }
.gw-user .gw-user-info b { display: block; color: #222; }

/* ---- 본문 3단 구성 ---- */
.gw-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* ---- 좌측 트리 사이드바 (하드코딩) ---- */
.gw-side-left {
    /* 항목 이름(예: '기록물철 등록부', '정산연구비관리')이 잘리지 않을 만큼 */
    flex: 0 0 176px;
    max-width: 176px;
    overflow-y: auto;
    background: #fafbfc;
    border-right: 1px solid #e5e8ec;
    padding: 8px 0;
    font-size: 11px;
    color: #555;
}
.gw-tree-group { margin-bottom: 4px; }
.gw-tree-head {
    padding: 4px 10px;
    font-weight: 700;
    color: #444;
    cursor: default;
}
.gw-tree-item {
    padding: 3px 10px 3px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.gw-tree-item.selected {
    background: #e8eefb;
    color: #1B3A6B;
    font-weight: 700;
}
.gw-tree-sub { padding-left: 12px; }

/* ---- 중앙 문서함(=채팅) ---- */
.gw-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.gw-page-title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #222;
}
.gw-page-title .gw-fav { font-size: 11px; font-weight: 400; color: #888; }

.gw-filter-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 14px;
    border-bottom: 1px solid #e5e8ec;
    font-size: 11px;
    color: #666;
}
.gw-filter-row .gw-f-item { display: flex; align-items: center; gap: 4px; }
.gw-filter-row input[type=text], .gw-filter-row input[type=date] {
    width: 84px;
    padding: 3px 6px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 11px;
    color: #999;
    background: #f8f9fb;
}
.gw-filter-row .gw-search-btn {
    padding: 4px 12px;
    background: #eef1f5;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 11px;
    color: #555;
    cursor: default;
}

.gw-toolbar-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid #e5e8ec;
}
.gw-toolbar-row .gw-tb-left { display: flex; gap: 6px; }
.gw-toolbar-row .gw-tb-btn {
    padding: 4px 10px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 11px;
    color: #555;
    background: #fff;
    cursor: default;
}
.gw-toolbar-row .gw-tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #888;
}
.gw-toolbar-row .gw-refresh { color: #1B3A6B; cursor: pointer; font-weight: 700; }
.gw-toolbar-row .gw-refresh:hover { text-decoration: underline; }

/* 표 = 채팅/게시글 목록. 픽셀 고정폭 대신 열마다 비율(flex-grow)만 정해서
   폭을 나눈다 — flex-basis 를 0 으로 주면 열 폭의 합이 항상 표 폭 100% 로
   딱 맞아떨어져서 창을 아무리 줄여도 넘치는 열이 생기지 않는다 (넘치던
   내용은 줄어든 제 칸 안에서 말줄임표로 잘릴 뿐). 한 행 = 한 줄 그대로. */
.gw-table-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /* 비율 열이 감당 못 할 만큼 창이 극단적으로 좁아지면(고정폭인 체크박스+
       상태만으로도 자리가 빠듯해지는 수준) flex-basis:0 짜리 열들은 그냥
       0폭이 되면서 내용이 스크롤도 없이 화면 밖으로 사라져버린다. 평소엔
       절대 안 뜨는 안전망으로만 가로 스크롤을 둔다 — 사라지는 것보단 낫다. */
    overflow-x: auto;
}
.gw-table-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f5f6f8;
    border-bottom: 1px solid #dfe3e8;
    font-size: 11px;
    font-weight: 700;
    color: #5b6472;
}
.gw-table-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.gw-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f3;
    font-size: 11.5px;
    color: #333;
}
.gw-row:hover { background: #f5f8ff; }
.gw-row.mine .col-author,
.gw-row.mine .col-no,
.gw-row.mine .col-title { font-weight: 700; }

.gw-table-head > span, .gw-row > span {
    /* min-width: 0 이면 flex-basis: 0 짜리 열들이 진짜로 0px 까지 쪼그라들어서
       내용이 사라진다(그러면 위의 overflow-x: auto 안전망도 스크롤할 게 없어
       무용지물). 최소 폭을 조금 남겨야 열이 대신 표를 넘치게 만들고, 그걸
       가로 스크롤로 볼 수 있다. 열 사이 간격은 padding 이 아니라 위
       .gw-table-head/.gw-row 의 gap 하나로만 준다 — 예전에 이 공통 규칙의
       padding-right 가 명시도(specificity) 때문에 열별 padding-right 를
       계속 덮어써서(체크박스 4px, 일시 0 이 다 10px 로 강제됐었다) 체크박스·
       상태 열이 항상 이상하게 넓어 보이는 원인이었다. */
    min-width: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 열마다 글자 크기·정렬을 따로 주지 않는다 — 표 전체가 한 크기(헤더 11px /
   본문 11.5px), 전부 왼쪽 정렬. 구분은 오직 색으로만 한다(부가정보는 회색).
   상태는 아이콘 한 글자로 내용이 절대 안 변해서 체크박스처럼 고정폭 —
   비율 칸으로 두면 넓은 창에서 아이콘 하나 찍고 뒤에 큰 빈 공간만 남는다.
   나머지는 비율(flex-grow) — 문서함 등록구분:문서번호:첨부번호:제목:작성자:일시
   = 1:2:1:10:2:1 (제목 위주로, 짧고 안 변하는 열은 최소로). */
.col-chk { flex: 0 0 20px; }
.col-chk input { pointer-events: none; }
.col-status { flex: 0 0 26px; }
.col-type { flex: 1 1 0; color: #444; }
.col-no { flex: 2 1 0; color: #7a8290; }
.col-attach { flex: 1 1 0; color: #999; }
.col-title { flex: 10 1 0; }
.col-title .row-img-icon { margin-left: 6px; cursor: pointer; }
.col-author { flex: 2 1 0; color: #444; }
.col-datetime { flex: 1 1 0; color: #8a92a0; }

/* 자료실/공지사항 — 번호:분류:제목:작성자:조회:작성일 = 1:1:10:2:1:1 */
.col-bd-no, .col-nt-no { flex: 1 1 0; color: #8a92a0; }
.col-bd-cat, .col-nt-cat { flex: 1 1 0; }
.col-bd-title, .col-nt-title { flex: 10 1 0; cursor: pointer; }
.col-bd-title:hover, .col-nt-title:hover { text-decoration: underline; color: #1B3A6B; }
.col-bd-author, .col-nt-author { flex: 2 1 0; color: #444; }
.col-bd-views, .col-nt-views { flex: 1 1 0; color: #999; }
.col-bd-date, .col-nt-date { flex: 1 1 0; color: #8a92a0; }
.col-bd-cat { color: #1B3A6B; }
.col-nt-cat { color: #c0392b; font-weight: 700; }

/* 진짜 좁은(폰 정도) 창에서는 비율을 아무리 조정해도 8개 열이 물리적으로
   안 들어간다 — 체크박스+상태만 해도 46px, 나머지 6열이 못해도 한두 글자는
   보여야 하는데 그 합만 130px+ 다. 이 폭에서는 장식성 열(등록구분/문서번호/
   첨부번호/체크박스, 자료실·공지사항은 번호/분류/조회)을 통째로 숨겨서
   제목·작성자·일시(진짜 내용)만 남긴다 — 그러면 그 셋은 비율 그대로,
   스크롤 없이 항상 들어간다. */
@media (max-width: 480px) {
    .col-chk, .col-type, .col-no, .col-attach,
    .col-bd-no, .col-bd-cat, .col-bd-views,
    .col-nt-no, .col-nt-cat, .col-nt-views { display: none; }
}
.gw-empty {
    padding: 40px 20px;
    text-align: center;
    color: #9aa1ab;
    font-size: 12px;
}

/* ---- 등록(=실제 전송) 입력줄 ---- */
.gw-compose {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid #e5e8ec;
    background: #fafbfc;
}
.gw-compose input#nickname {
    flex: 0 0 84px;
    padding: 7px 8px;
    border: 1px solid #d7dbe2;
    border-radius: 3px;
    font-size: 11.5px;
}
.gw-compose .icon-btn {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 1px solid #d7dbe2;
    background: #fff;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gw-compose .icon-btn:hover { background: #f0f2f5; }
.gw-compose textarea#chat-body {
    flex: 1 1 140px;
    min-width: 140px;
    resize: none;
    max-height: 90px;
    overflow-y: auto;
    padding: 7px 10px;
    border: 1px solid #d7dbe2;
    border-radius: 3px;
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
}
.gw-compose textarea#chat-body:focus { border-color: #1B3A6B; }
.gw-compose button#chat-send {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 16px;
    background: #1B3A6B;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.gw-compose button#chat-send:hover { background: #16305a; }
.pending-attachment {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    margin-bottom: -3px;
    background: #eef1f5;
    border: 1px solid #dde2e8;
    border-radius: 3px;
    font-size: 11px;
    color: #1B3A6B;
    order: -1;
}
.pending-attachment span { flex: 1; }
.pending-attachment button { border: none; background: none; cursor: pointer; color: #8a92a0; font-size: 12px; }

.gw-pagination {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-top: 1px solid #e5e8ec;
    font-size: 11px;
    color: #777;
}
.gw-pagination .gw-pg-btn {
    padding: 2px 7px;
    border: 1px solid #dfe3e8;
    border-radius: 2px;
    color: #666;
    cursor: default;
}
.gw-pagination .gw-pg-btn.active { background: #1B3A6B; color: #fff; border-color: #1B3A6B; }

/* 우측 사이드바(사용자·조직도)는 제거됨 — 본문이 그만큼 넓어진다. */

/* ---- 게시판 (문서함과 같은 톤) ---- */
.bd-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.gw-tab.clickable { cursor: pointer; }
.gw-tab.clickable:hover { color: #1B3A6B; }
.bd-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-bottom: 1px solid #e5e8ec;
    font-size: 11px;
}
.bd-toolbar select, .bd-toolbar input {
    padding: 4px 8px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 11px;
    font-family: inherit;
}
.bd-toolbar input { flex: 0 1 200px; }
.bd-btn {
    padding: 4px 12px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 11px;
    color: #555;
    background: #fff;
    cursor: pointer;
}
.bd-btn:hover { background: #f0f2f5; }
.bd-btn.primary { background: #1B3A6B; color: #fff; border-color: #1B3A6B; font-weight: 700; }
.bd-btn.primary:hover { background: #16305a; }
.bd-btn.danger { color: #c0392b; border-color: #e3b7b1; }
.bd-btn.danger:hover { background: #fdf0ee; }
.bd-spacer { flex: 1; }

.col-bd-cat { color: #1B3A6B; }
.col-bd-title, .col-nt-title { cursor: pointer; }
.col-bd-title:hover, .col-nt-title:hover { text-decoration: underline; color: #1B3A6B; }

/* ---- 공지사항 (결재 탭) — 자료실과 같은 표, 분류 색만 다르다 ---- */
.col-nt-cat { color: #c0392b; font-weight: 700; }

/* ---- 일정 달력 (설비예약 탭) ---- */
.sc-cal-toolbar { align-items: center; }
.sc-month-label {
    font-size: 13px;
    font-weight: 700;
    color: #1B3A6B;
    min-width: 96px;
    text-align: center;
}
.sc-calendar { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 10px; }
.sc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid #dfe3e8;
    border-left: 1px solid #dfe3e8;
}
.sc-cal-dow {
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #5b6472;
    background: #f5f6f8;
    border-right: 1px solid #dfe3e8;
    border-bottom: 1px solid #dfe3e8;
}
.sc-cal-dow.sun { color: #c0392b; }
.sc-cal-dow.sat { color: #1a5fb4; }

.sc-cal-cell {
    min-height: 92px;
    padding: 4px 5px 6px;
    border-right: 1px solid #dfe3e8;
    border-bottom: 1px solid #dfe3e8;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.sc-cal-cell:hover { background: #f5f8ff; }
.sc-cal-cell.empty { background: #fafbfc; cursor: default; }
.sc-cal-cell.empty:hover { background: #fafbfc; }
.sc-cal-cell.today { background: #fffdf0; }
.sc-cal-cell.today .sc-cal-daynum {
    background: #1B3A6B;
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
}
.sc-cal-daynum {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #444;
    margin-bottom: 3px;
}
.sc-cal-daynum.sun { color: #c0392b; }
.sc-cal-daynum.sat { color: #1a5fb4; }

.sc-cal-items { display: flex; flex-direction: column; gap: 2px; }
.sc-chip {
    padding: 2px 5px;
    border-radius: 3px;
    background: #e8eefb;
    color: #1B3A6B;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.sc-chip:hover { background: #d4e0f7; }
.sc-chip.mine { background: #dcf0e2; color: #1e6b3a; }
.sc-chip.mine:hover { background: #c7e6d1; }
.sc-chip b { font-weight: 700; }
.sc-more { font-size: 10px; color: #8a92a0; padding-left: 4px; }

.sc-cal-hint {
    flex: 0 0 auto;
    padding: 8px 2px 0;
    font-size: 10.5px;
    color: #8a92a0;
}

.sc-editor { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 4px; }
.sc-editor .sc-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sc-editor .sc-row > div { flex: 1; min-width: 0; }
.sc-editor label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #5b6472;
    margin-bottom: 3px;
}
.sc-editor input, .sc-editor textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d7dbe2;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: inherit;
}
.sc-editor textarea { min-height: 90px; resize: vertical; }
.sc-editor .sc-actions {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #e5e8ec;
    margin-top: 6px;
}

/* 게시판 글쓰기/보기 패널 */
.bd-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    gap: 8px;
    overflow-y: auto;
}
.bd-editor-row { display: flex; gap: 8px; align-items: center; }
.bd-editor-row select, .bd-editor-row input {
    padding: 6px 10px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 12px;
    font-family: inherit;
}
.bd-editor-row input.bd-title-input { flex: 1; font-size: 13px; }
.bd-editor-row input.bd-author-input { flex: 0 0 130px; }
.bd-editor textarea {
    flex: 1;
    min-height: 220px;
    resize: vertical;
    padding: 12px;
    border: 1px solid #d7dbe2;
    border-radius: 2px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.75;
    outline: none;
}
.bd-editor textarea:focus { border-color: #1B3A6B; }
.bd-editor-actions { display: flex; gap: 6px; justify-content: flex-end; }

.bd-viewer { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.bd-viewer .bd-v-cat { font-size: 11px; color: #1B3A6B; font-weight: 700; }
.bd-viewer .bd-v-title { font-size: 18px; font-weight: 700; color: #222; margin: 4px 0 8px; line-height: 1.4; }
.bd-viewer .bd-v-meta {
    font-size: 11px;
    color: #8a92a0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e8ec;
    display: flex;
    gap: 12px;
}
.bd-viewer .bd-v-body {
    padding: 18px 0;
    font-size: 14px;
    line-height: 1.95;
    color: #2c2c2c;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 본문에 쓴 URL 은 자동으로 링크가 된다 (board.js 의 linkify) */
.bd-viewer .bd-v-body a { color: #1a5fb4; text-decoration: underline; }
.bd-viewer .bd-v-body a:hover { color: #12417d; }
.bd-viewer .bd-v-actions { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid #e5e8ec; }