@charset "UTF-8";
/*
    일정 > 부서일정 (/sched/dept) · 미팅일정 (/sched/meet)

    두 화면이 같은 달력 마크업(sc-*)을 쓴다 — 동작을 SCHED_CALENDAR 하나가 맡는다.

    월 달력 한 장. 칸마다 그 날의 외근 · 휴가가 막대로 쌓인다.
    기간 일정은 걸치는 날마다 한 칸씩 그리되 시작 · 중간 · 끝의 모서리만 다르게 줘
    하나의 막대로 이어 보이게 한다 (칸을 가로지르는 절대배치를 쓰면 주가 바뀌는 곳에서
    계산이 복잡해지고, 창 크기가 바뀔 때마다 어긋난다).
*/

.sc-page{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

/* ── 도구줄 ─────────────────────────────────────────────── */

/*
   index.css 의 기본값이 서로 달라 줄이 들쭉날쭉했다 —
     .btn          width:90px  · height:48px  (고정 폭)
     .search-box   width:400px · height:48px
     .form-control width:100%
   게다가 .btn 은 flex 줄 안에서 줄어들어(flex-shrink 기본 1)
   '+ 미팅 등록' 같은 긴 문구가 세로로 깨졌다.

   그래서 도구줄 안에서만 한 줄 높이(36px)로 맞추고,
   조각들이 줄어들지 않게(flex:0 0 auto) 막는다.
   자리가 모자라면 찌그러지는 대신 다음 줄로 내려보낸다.
*/

.sc-tool{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:12px; flex-wrap:wrap;
}
.sc-tool__left,
.sc-tool__right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* 도구줄 안의 입력칸 · 버튼 · 검색박스는 모두 같은 높이 */
.sc-tool .btn,
.sc-tool .form-control,
.sc-tool .search-box,
.sc-tool .sc-view{
    flex:0 0 auto;
    height:36px;
    box-sizing:border-box;
}

.sc-tool .btn{
    width:auto;                /* .btn 의 90px 고정폭을 푼다 */
    min-width:0;
    padding:0 14px;
    font-size:14px;
    white-space:nowrap;        /* 문구가 세로로 깨지지 않게 */
}

/* 월 이동 화살표는 정사각형으로 */
.sc-tool #scPrev,
.sc-tool #scNext{ width:36px; padding:0; font-size:19px; line-height:1; }

.sc-tool .form-control{
    width:auto;                /* .form-control 의 width:100% 를 푼다 */
    padding:0 30px 0 10px;     /* 셀렉트 화살표 자리 */
    font-size:14px;
}

.sc-ym{
    margin:0; min-width:130px; text-align:center;
    font-size:18px; font-weight:700; color:#18263c;
}
.sc-mgrsel{ min-width:148px; }

/* ── 종류 안내 ──────────────────────────────────────────── */

.sc-legend{
    display:flex; flex-wrap:wrap; gap:6px 14px;
    padding:8px 10px; margin-bottom:10px;
    border:1px solid #eef1f6; border-radius:6px; background:#fafbfd;
    font-size:12px; color:#41506a;
}
.sc-lg{ display:inline-flex; align-items:center; gap:5px; }
.sc-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ── 달력 ───────────────────────────────────────────────── */

.sc-cal{ border:1px solid #dfe5ee; border-radius:8px; overflow:hidden; }

.sc-dow{
    display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
    background:#f4f7fb; border-bottom:1px solid #dfe5ee;
}
.sc-dow span{
    padding:8px 0; text-align:center;
    font-size:13px; font-weight:700; color:#41506a;
}
.sc-dow .is-sun{ color:#d93a45; }
.sc-dow .is-sat{ color:#2f6fd0; }

.sc-grid{
    display:grid;
    /* minmax(0, 1fr) 이어야 한다. 그냥 1fr 이면 칸의 최소폭이 '내용 폭' 이라
       긴 제목 하나가 그 열을 통째로 벌려 달력이 어긋난다 */
    grid-template-columns:repeat(7, minmax(0, 1fr));
    /* 행 수(5주 · 6주)는 달마다 달라서 JS 가 grid-template-rows 를 넣는다 */
    background:#dfe5ee; gap:1px;
}
.sc-loading{ grid-column:1 / -1; background:#fff; margin:0; padding:40px 0; text-align:center; color:#8b95a6; }

.sc-cell{
    background:#fff; padding:4px 4px 6px; min-height:96px;
    cursor:pointer; position:relative;
}
.sc-cell:hover{ background:#f8fbff; }
.sc-cell.is-out{ background:#fafbfd; }
.sc-cell.is-out .sc-day{ color:#b9c1cd; }
.sc-cell.is-today{ box-shadow:inset 0 0 0 2px #0a529d; }
/* 드롭 대상. 끌고 있는 동안 어디에 놓이는지 분명해야 한다 */
.sc-cell.is-drop{ background:#eaf3ff; box-shadow:inset 0 0 0 2px #4a8de0; }

.sc-day{
    font-size:12px; font-weight:700; color:#41506a;
    padding:2px 4px 4px; line-height:1;
}
.sc-cell.is-sun .sc-day{ color:#d93a45; }
.sc-cell.is-sat .sc-day{ color:#2f6fd0; }
.sc-cell.is-today .sc-day{ color:#0a529d; }

.sc-evs{ display:flex; flex-direction:column; gap:3px; }

/* ── 일정 막대 ──────────────────────────────────────────── */

.sc-ev{
    font-size:11.5px; line-height:1.5; padding:2px 6px;
    color:#fff; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:grab; user-select:none;
    border-radius:3px;
}
.sc-ev:hover{ filter:brightness(1.08); }
.sc-ev.is-dragging{ opacity:.45; cursor:grabbing; }

/* 기간의 어느 자리인가로 모서리를 준다 — 이어 붙은 막대처럼 보이게 */
.sc-ev.is-one  { border-radius:3px; }
.sc-ev.is-start{ border-radius:3px 0 0 3px; margin-right:-4px; }
.sc-ev.is-mid  { border-radius:0;           margin:0 -4px; }
.sc-ev.is-end  { border-radius:0 3px 3px 0; margin-left:-4px; }

/* ── 종류별 색 ──────────────────────────────────────────── */

/* --evi : 막대 안 흰 알약에 쓰는 글씨색.
   막대 바탕색을 그대로 쓰면 노란 계열이 흰 바탕에서 안 읽혀,
   같은 계열을 흰 바탕 기준 대비 4.5:1 넘게 어둡게 낮춘 값을 따로 둔다 */
.sc-t-VAC_FULL   { background:#d93a45; --evi:#b52533; }  /* 연차 — 하루 비는 것이라 가장 진하게 */
.sc-t-VAC_AM_HALF{ background:#e8833a; --evi:#a35a12; }
.sc-t-VAC_PM_HALF{ background:#c9772b; --evi:#94530f; }
.sc-t-VAC_AM_QTR { background:#e0b23c; --evi:#8a6a00; }
.sc-t-VAC_PM_QTR { background:#c39a2c; --evi:#7d6000; }

/* 업무일정 — 내부 미팅은 차분한 청록, 외부 미팅은 눈에 띄는 보라.
   외부는 상대가 있어 날짜를 함부로 못 옮기므로 더 도드라지게 둔다.
   업무는 미팅이 아니라 혼자 하는 일이라 가라앉은 남색으로 구분한다 */
.sc-t-INTERNAL   { background:#2f8f86; --evi:#1f6f66; }
.sc-t-EXTERNAL   { background:#7b4fc4; --evi:#5b34a0; }
.sc-t-WORK       { background:#4a6b8a; --evi:#33506b; }

/* 서비스일정 — 휴가(붉은 계열) · 미팅(청록 · 보라) · 할 일(파랑) 어느 것과도
   겹치지 않는 자주색. 내업무 달력에서 넷이 한 칸에 모이기 때문이다 */
.sc-t-SVC        { background:#b5387f; --evi:#9c2a6c; }

.sc-hint{ margin:10px 2px 0; font-size:12px; color:#77839a; }
.sc-hint b{ color:#41506a; }

/* ── 모달 ───────────────────────────────────────────────── */

.sc-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.sc-modal .modal__box{
    position:relative; width:min(620px, calc(100% - 32px)); max-height:92vh;
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}
.sc-modal .modal__body{ overflow-y:auto; }
.sc-modal .modal__card{ padding:20px 24px; }

.sc-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sc-ta{ height:90px; padding:10px 12px; resize:vertical; line-height:1.6; }

/* 종류 고르기. 라디오 동그라미 대신 색 칩을 누르게 한다 */
.sc-types{ display:flex; flex-wrap:wrap; gap:6px; }
.sc-type{
    position:relative; display:inline-flex; align-items:center;
    padding:6px 12px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; cursor:pointer; font-size:13px; color:#41506a;
}
.sc-type input{ position:absolute; opacity:0; width:0; height:0; }
.sc-type b{ font-weight:600; }
.sc-type::before{
    content:''; width:9px; height:9px; border-radius:3px;
    margin-right:6px; background:currentColor; opacity:.85;
}
/* 칩의 색 점은 종류 색을 그대로 쓴다 (.sc-t-* 는 배경색이라 글자색으로 옮겨 온다) */
.sc-type.sc-t-VAC_FULL   { color:#d93a45; background:#fff; }
.sc-type.sc-t-VAC_AM_HALF{ color:#e8833a; background:#fff; }
.sc-type.sc-t-VAC_PM_HALF{ color:#c9772b; background:#fff; }
.sc-type.sc-t-VAC_AM_QTR { color:#e0b23c; background:#fff; }
.sc-type.sc-t-VAC_PM_QTR { color:#c39a2c; background:#fff; }
.sc-type.sc-t-INTERNAL   { color:#2f8f86; background:#fff; }
.sc-type.sc-t-EXTERNAL   { color:#7b4fc4; background:#fff; }
.sc-type.sc-t-WORK       { color:#4a6b8a; background:#fff; }

.sc-type:has(input:checked){
    border-color:currentColor; font-weight:700;
    box-shadow:inset 0 0 0 1px currentColor;
}
/* :has 를 못 쓰는 브라우저 대비 — 최소한 눌린 게 보이게 */
.sc-type input:checked + b{ text-decoration:underline; }

.sc-days{
    margin:2px 0 12px; font-size:12.5px; color:#0a529d; font-weight:600;
}
.sc-warn{ color:#d93a45; }

/* ── 미팅일정 ───────────────────────────────────────────
   미팅은 제목 · 내용 · 참석자까지 들어가 부서일정 모달보다 넓다. */

.sc-modal .sc-meetbox{ width:min(720px, calc(100% - 32px)); }

/* 상자 높이를 고정해 개요와 회의록이 같은 칸을 쓰게 한다.
   내용에 맡기면 탭을 오갈 때마다 모달이 늘었다 줄었다 해서,
   버튼 자리가 움직이고 화면이 덜컹거린다.
   머리 · 탭줄 · 발은 제 높이를 쓰고(flex:none) 몸이 나머지를 채운다. */
.sc-modal .sc-meetbox{ height:min(780px, 92vh); }
.sc-meetbox .modal__body{ flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }

.sc-sub{ font-style:normal; font-weight:400; color:#8b95a6; font-size:12px; margin-left:4px; }
.sc-ta--sm{ height:60px; }

/* 참석자 고르기. 여러 명이라 체크박스를 칩으로 깐다 */
.sc-att{
    display:flex; flex-wrap:wrap; gap:6px;
    max-height:132px; overflow-y:auto;
    padding:8px; border:1px solid #dfe5ee; border-radius:6px; background:#fafbfd;
}
.sc-chk{
    position:relative; display:inline-flex; align-items:center;
    padding:5px 11px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; cursor:pointer; font-size:13px; color:#41506a;
}
.sc-chk input{ position:absolute; opacity:0; width:0; height:0; }
.sc-chk b{ font-weight:600; }
.sc-chk:has(input:checked){
    border-color:#0a529d; background:#eaf3ff; color:#0a529d;
}
/* :has 를 못 쓰는 브라우저 대비 — 최소한 고른 게 보이게 */
.sc-chk input:checked + b{ text-decoration:underline; }

/* 달력 막대 안의 구분 글자 — 업무일정의 내부 · 외부 · 업무,
   휴가일정의 연차 · 오후반차 … 가 모두 이 자리에 온다.
   막대와 같은 흰 글씨라 묻혔다. 반대로 뒤집어 흰 알약에 제 색 글씨로 둔다.
   투명도를 주면 막대 색이 비쳐 다시 흐려지므로 완전한 흰색으로 깐다 */
.sc-ev i{
    font-style:normal; font-weight:700;
    padding:0 5px; margin-right:3px; border-radius:3px;
    background:#fff; color:var(--evi, #33506b); opacity:1;
}

/* ── 미팅일정 : 보기 전환 (달력 · 목록) ─────────────────── */

.sc-view{
    display:inline-flex; align-items:stretch;
    border:1px solid #dfe5ee; border-radius:18px; overflow:hidden;
}
.sc-viewbtn{
    padding:0 16px; border:0; background:#fff;
    color:#41506a; font-size:13px; cursor:pointer; white-space:nowrap;
}
.sc-viewbtn + .sc-viewbtn{ border-left:1px solid #dfe5ee; }
.sc-viewbtn:hover{ color:#0a529d; }
.sc-viewbtn.is-on{ background:#0a529d; color:#fff; font-weight:700; }

/* 달력 · 목록 전용 영역. 보이고 감추는 것은 JS 가 한다 (span 과 div 를 섞어 쓴다) */
.sc-tool__left > .sc-calonly,
.sc-tool__left > .sc-listonly,
.sc-tool__right > .sc-listonly{ display:inline-flex; align-items:center; gap:8px; }

.sc-total{ font-size:13px; color:#41506a; white-space:nowrap; }
.sc-total b{ color:#0a529d; font-weight:700; }

/* 검색박스. index.css 기본이 400px · 48px 라 도구줄에서 혼자 컸다 */
.sc-tool .sc-search{ width:250px; }
.sc-tool .sc-search input{
    height:100%; width:100%; padding:0 12px; font-size:14px;
}

/* ── 미팅일정 : 목록 ────────────────────────────────────── */

.sc-listscroll{ max-height:calc(100vh - 300px); }
.sc-table tbody tr.sc-lrow{ cursor:pointer; }
.sc-table tbody tr.sc-lrow:hover{ background:#f6faff; }
.sc-when{ font-size:12.5px; color:#41506a; white-space:nowrap; }
.sc-ltitle{ font-weight:600; color:#1b2b46; }
.sc-ext{ font-style:normal; color:#5b34a0; }

/* 목록 · 시트의 구분 배지.
   연한 바탕 + 연한 글씨로 뒀더니 흰 카드 위에서 거의 안 보였다.
   바탕을 진하게 깔고 글씨를 희게 둔다 (흰 글씨 기준 대비 4.5:1 이상). */
.cfg-st.sc-st-INTERNAL,
.cfg-st.sc-st-EXTERNAL,
.cfg-st.sc-st-WORK,
.cfg-st.sc-st-SVC{
    color:#fff; font-weight:700; letter-spacing:-.2px;
    padding:2px 9px; border-radius:10px;
}
.cfg-st.sc-st-INTERNAL{ background:#1f6f66; }
.cfg-st.sc-st-EXTERNAL{ background:#5b34a0; }
.cfg-st.sc-st-WORK    { background:#3a5772; }
.cfg-st.sc-st-SVC     { background:#9c2a6c; }

/* ── 미팅일정 : 달력 막대의 장소 ────────────────────────── */

/* 시각 · 제목 다음에 오는 장소. 제목보다 흐리게 둬야 제목이 먼저 읽힌다 */
.sc-ev u{ text-decoration:none; opacity:.82; font-weight:400; }

/* ── 미팅일정 : 모달 ────────────────────────────────────── */

/* 시작일 · 시작시각 · 종료일 · 종료시각 네 칸 */
.sc-row4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }
@media (max-width: 720px){
    .sc-row4{ grid-template-columns:1fr 1fr; }
}

/* 등록자가 아닐 때 뜨는 안내 */
.sc-readonly{
    margin:0 0 14px; padding:10px 12px;
    border:1px solid #ffe0b2; border-left-width:4px; border-radius:6px;
    background:#fffaf2; color:#8a5a00; font-size:13px; line-height:1.6;
}
.sc-readonly b{ color:#6b4500; }

/* 회의록. 제 탭을 가졌으니 개요와 끊던 선은 없앤다 */
.sc-minutes__head{
    display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
}
.sc-minutes__head h4{ margin:0; font-size:14px; font-weight:700; color:#1b2b46; }
.sc-minutes__head i{ font-style:normal; font-size:12px; color:#8a94a6; }
.sc-ta--lg{ height:200px; }

/* 회의록 탭은 편집기가 칸을 채운다.
   편집기 안에 또 스크롤을 두지 않는다 — 모달 몸이 이미 스크롤이라 2중이 된다 */
.sc-minutes .ed__body{ min-height:390px; max-height:none; }

/* 잠긴 칸은 눌러도 소용없다는 게 보여야 한다 */
.sc-modal input:disabled,
.sc-modal textarea:disabled,
.sc-modal select:disabled{ background:#f5f7fa; color:#6b7688; cursor:not-allowed; }
.sc-type input:disabled + b,
.sc-chk  input:disabled + b{ color:#8a94a6; }

/* ── 종일 체크 ──────────────────────────────────────────── */

.sc-allday{
    display:flex; align-items:center; gap:8px;
    margin:0 0 12px; padding:9px 12px;
    border:1px solid #dfe5ee; border-radius:8px; background:#fafbfd;
    cursor:pointer;
}
.sc-allday input{ width:18px; height:18px; flex:0 0 auto; cursor:pointer; }
.sc-allday b{ font-size:13.5px; font-weight:700; color:#1b2b46; }
.sc-allday i{ font-style:normal; font-size:12px; color:#626f85; }

/* 종일이면 시각 칸을 쓰지 않는다는 게 보이게 */
.sc-row4 input:disabled{ background:#f2f5f9; color:#a9b2c1; }

.sc-edhint{ margin-top:6px; }