/* 예약 화면, 예약 창, 데스크의 예약 탭 모양. 클래스는 모두 .appt- 로 시작한다 */

/* ----- 화면 틀: 왼쪽 200px(달력, 의사, 메모/보류/리콜), 오른쪽 예약표 ----- */
.appt { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 6px; }
.appt-left, .appt-right { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.appt-left .cal { padding: 3px; }
.appt-left .cal-day { padding: 2px 0; }
.appt-quick { display: flex; gap: 2px; }
.appt-quick .btn { flex: 1; padding: 1px 0; }
.appt-docs label { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 5px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.appt-docs label:hover { background: var(--hover); }
.appt-lefttabs { flex: 1 1 0; }
.appt-lefttabs > .tabs-head { padding: 0 2px; }
.appt-lefttabs > .tabs-head .tab { flex: 1; padding: 2px 0; }
.appt-leftfoot { display: flex; gap: 4px; }
.appt-leftfoot .btn { flex: 1; padding: 3px 2px; }
.appt-side { display: flex; flex-direction: column; gap: 4px; padding: 4px; flex: 1 0 auto; }
.appt-side.drop, .tab.drop { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-soft); }
.appt-side-date { font-weight: 700; background: #f1f4f8; border: 1px solid var(--line-soft); padding: 0 4px; line-height: 20px; }
.appt-side-line { padding: 2px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; line-height: 18px; word-break: break-all; }
.appt-side-line:hover { background: var(--hover); }
.appt-side-x { float: right; margin-left: 3px; }
.appt-side-empty { padding: 8px 2px; }
.appt-side-tip { font-size: 11px; margin-top: auto; }
.appt-side .appt-item { cursor: grab; }

/* ----- 예약표 위 줄 ----- */
.appt-bar { display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 5px; background: var(--head); border: 1px solid var(--line); white-space: nowrap; }
.appt-bar .appt-vtab { margin: 3px 0 -1px; align-self: flex-end; padding: 3px 12px; }
.appt-range { margin: 0 4px; }
.appt-stats-wrap { color: #3a4352; }
.appt-legend { display: flex; gap: 2px; margin-left: 6px; }
.appt-legend .appt-item { border: 1px solid #c3cad6; padding: 0 6px; cursor: default; font-size: 11px; line-height: 16px; }

/* ----- 예약표(주간: 칸마다 예약을 쌓음 / 일별: 의사별 열에 소요 시간만큼 길게) ----- */
.appt-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--line); }
.appt-board { display: grid; }
.appt-board.week { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.appt-hcell { position: sticky; top: 0; z-index: 3; background: #eef1f6; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); min-height: 26px; padding: 3px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-board.week .appt-hcell:not(.corner) { cursor: pointer; }
.appt-board.week .appt-hcell:not(.corner):hover { background: #e1e7f0; }
.appt-hcell.corner { color: var(--muted); border-right-color: var(--line); }
.appt-hcell.sun, .appt-hcell.closed { color: var(--red); }
.appt-hcell.sat { color: var(--blue); }
.appt-hcell.today { background: var(--blue-soft); }
.appt-hcell.on { border-bottom: 2px solid var(--primary); }
.appt-hn { color: var(--muted); font-size: 11px; }
.appt-hoff { color: var(--red); font-size: 11px; }
.appt-time { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); padding: 2px 3px 2px 0; text-align: right; color: #4a5361; background: #f6f7fa; font-size: 11px; white-space: nowrap; letter-spacing: -0.5px; overflow: hidden; }
.appt-time b { font-size: 12px; color: var(--text); }
.appt-times { display: flex; flex-direction: column; }
.appt-cell { min-height: 44px; min-width: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 1px; cursor: pointer; display: flex; flex-direction: column; }
.appt-cell:hover, .appt-slot:hover { background: var(--hover); }
.appt-cell.today { background: #f7fafe; }
.appt-cell.lunch, .appt-slot.lunch, .appt-time.lunch { background: #fbf5dc; }
.appt-cell.closed, .appt-col.closed .appt-slot { background: #fbeeee; }
.appt-cell.drop, .appt-slot.drop { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-soft); }
.appt-note { margin: auto; color: #b3a36d; font-size: 11px; pointer-events: none; }
.appt-cell.closed .appt-note, .appt-col.closed .appt-note { color: #c98f88; }
.appt-col { position: relative; border-right: 1px solid var(--line-soft); min-width: 0; }
.appt-slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; display: flex; }

/* ----- 예약 한 칸: 상태는 바탕색, 의사는 오른쪽 위 네모 색 ----- */
.appt-item { position: relative; border: 1px solid #c3cad6; background: #fff; padding: 0 13px 0 3px; line-height: 15px; cursor: pointer; overflow: hidden; min-width: 0; }
.appt-item + .appt-item { margin-top: 1px; }
.appt-item.compact { border-width: 0 0 1px; line-height: 13px; font-size: 11px; }
.appt-item.compact + .appt-item.compact { margin-top: 0; }
.appt-cell .appt-item:hover, .appt-col .appt-item:hover { border-color: var(--blue); }
.appt-l1, .appt-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-l2 { color: #3a4352; }
.appt-tel { color: #5a6474; }
.appt-ct { color: #3a4352; }
.appt-memo { color: var(--muted); }
.appt-doc { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, 0.3); }
.appt-doc.inline, .appt-hcell .appt-doc { position: static; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.appt-star { color: var(--red); border: 1px solid #e0a59e; background: #fbe9e7; font-size: 10px; line-height: 11px; padding: 0 2px; margin-right: 2px; font-weight: 700; }
.appt-new { color: #1c5f96; border: 1px solid #8fbfe0; background: #e4f1fb; font-size: 10px; line-height: 11px; padding: 0 2px; margin-right: 2px; }
.appt-item.s-예약 { background: #fff; }
.appt-item.s-내원 { background: #dcefe2; border-color: #a5d0b6; color: #3d4a44; }
.appt-item.s-미이행 { background: #fbdcd6; border-color: #e0a59e; color: #8f2a20; }
.appt-item.s-취소, .appt-item.s-변경 { background: #eceef1; color: #8a919c; }
.appt-item.s-취소 b, .appt-item.s-변경 b, .appt-item.s-취소 .appt-l2, .appt-item.s-취소 .appt-ct { text-decoration: line-through; font-weight: 400; }
.appt-item.s-보류 { background: var(--yellow); border-color: #d9c56a; }
.appt-item.mine { outline: 2px solid #d9621a; outline-offset: -2px; z-index: 2; }
.appt-col .appt-item { z-index: 1; }

/* ----- 예약을 누르면 뜨는 메뉴 ----- */
.appt-menu { min-width: 170px; }
.appt-menu-head { padding: 4px 12px; background: var(--head); border-bottom: 1px solid var(--line); font-weight: 700; white-space: nowrap; }
.appt-menu-sep { border-top: 1px solid var(--line-soft); margin: 2px 0; }

/* ----- 예약 창 ----- */
.appt-dlg { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 6px; align-items: start; }
.appt-dlg-wide { grid-column: 1 / -1; }
.appt-dlg-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 6px; align-items: center; }
.appt-dlg-name { font-weight: 700; font-size: 13px; }
.appt-dlg-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.appt-dlg-btns .btn { overflow: hidden; text-overflow: ellipsis; padding: 1px 2px; }
.appt-dlg-hist .grid-wrap { border: 0; }
.appt-dlg-empty { padding: 10px; }
.appt-hist { max-height: 78px; overflow: auto; }
.modal-body > .appt-hist { max-height: 360px; }
.appt-hist-line { line-height: 19px; }

/* ----- 데스크 오른쪽 아래 탭 ----- */
/* 데스크 오른쪽에서 접수목록과 예약 탭이 45:55 로 나뉘게 한다(덴트웹 데스크의 비율) */
.desk-right > .grow:has(> .appt-desktabs) { flex: 1 1 55%; }
.appt-desktabs { flex: 1 1 0; min-height: 0; }
.appt-desktabs > .tabs-body, .appt-lefttabs > .tabs-body { display: flex; flex-direction: column; }
.appt-desktabs > .tabs-body { overflow: hidden; }
.appt-desk { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.appt-deskbar { display: flex; align-items: center; gap: 5px; min-height: 26px; padding: 1px 6px; background: var(--head); border-bottom: 1px solid var(--line); white-space: nowrap; }
.appt-deskbody { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.appt-deskbody > * { flex: 1 1 0; min-height: 0; }
.appt-deskbody .grid-wrap, .appt-deskbody .appt-scroll { border: 0; }
/* 정각마다 진한 줄(30분 줄은 옅게) */
.appt-cell.last, .appt-slot.last, .appt-time.last { border-bottom-color: var(--line); }