/* 대관 캘린더 화면 스타일.

   셸(base.html)이 Tailwind CDN을 싣는다. Preflight는 맨 요소 선택자(button, h1)를
   같은 특이도로 나중에 덮으므로, 캘린더 규칙은 #cal / #detail-card로 감싸 특이도를
   올린다. 동시에 셸의 <header>·<button>에 캘린더 스타일이 새는 것도 막는다.
   상세 카드는 document.body에 붙어 #cal 밖이라 따로 적는다. */
:root {
  --hall: #3b6fb5;
  --practice: #3f9668;
  --unclassified: #8a8a8a;
  --line: #e3e3e3;
}
/* 셸(base.html)이 Tailwind CDN을 싣는다. Preflight는 맨 요소 선택자(button, h1)를
   같은 특이도로 나중에 덮으므로, 캘린더 규칙은 #cal / #detail-card로 감싸 특이도를
   올린다. 동시에 셸의 <header>·<button>에 캘린더 스타일이 새는 것도 막는다.
   상세 카드는 document.body에 붙어 #cal 밖이라 따로 적는다. */
#cal, #detail-card { font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #222; }
#cal *, #detail-card * { box-sizing: border-box; }
#cal header { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
#cal header h1 { font-size: 18px; font-weight: bold; margin: 0 auto 0 0; }
#cal button, #detail-card button { padding: 6px 12px; border: 1px solid #bbb; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; }
#cal button:hover:not(:disabled), #detail-card button:hover { background: #f2f2f2; }
/* 조회 범위의 끝에서 멈춘 이동 버튼(#346). 눌리지 않는 것이 눈에 보여야 한다 —
   활성과 똑같이 생긴 채 아무 일도 안 하면 화면이 먹통으로 읽힌다. */
#cal button:disabled { opacity: .4; cursor: default; }
.legend { display: flex; gap: 12px; padding: 8px 16px; font-size: 13px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.meta { margin-left: auto; color: #777; }
.stale { color: #b45309; font-weight: bold; }
.admin-badge { color: var(--hall); font-weight: bold; }
#chips { display: none; gap: 4px; padding: 8px 16px; }
#cal .chip-btn { flex: 1; padding: 6px 2px; border: 1px solid #bbb; background: #fff; border-radius: 6px;
  cursor: pointer; font-size: 12px; line-height: 1.35; text-align: center; }
#cal .chip-btn.today { background: #fff7e0; }
#cal .chip-btn.selected { background: var(--hall); border-color: var(--hall); color: #fff; }
#grid-wrap { overflow-x: auto; }
#grid { display: grid; grid-template-columns: 48px repeat(7, minmax(96px, 1fr)); min-width: 760px; }
#grid.mobile { grid-template-columns: 48px 1fr 1fr; min-width: 0; }
.head-cell { padding: 6px 4px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--line); }
.head-cell.today { background: #fff7e0; border-radius: 6px 6px 0 0; }
/* 미니 달력으로 옮겨 온 날(#402). 주간 보기에서는 어느 날을 눌렀는지가 달리
   안 보인다. 오늘 표시(노랑)와 겹쳐도 읽히도록 배경 대신 밑줄로 구분한다. */
.head-cell.picked { box-shadow: inset 0 -3px 0 var(--hall); font-weight: bold; }
.head-cell.facility-head { display: flex; align-items: center; justify-content: center; gap: 4px; }
.allday-cell { min-height: 22px; border-bottom: 1px solid var(--line); padding: 1px 2px; }
.allday-block { font-size: 11px; color: #fff; border-radius: 3px; padding: 1px 4px; margin: 1px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.time-col { position: relative; }
.time-label { position: absolute; right: 4px; transform: translateY(-50%); font-size: 11px; color: #888; }
.day-col { position: relative; border-left: 1px solid var(--line); }
/* 장식용 선이라 클릭을 먹으면 안 된다 — 빈 칸 클릭(붙여넣기 대상 지정)이
   정시 위치에서만 먹통이 된다. */
.hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f0f0f0;
  pointer-events: none; }
.block { position: absolute; border-radius: 4px; color: #fff; font-size: 11px; padding: 2px 3px; overflow: hidden; opacity: 0.92; }
.block .t { display: block; font-weight: bold; }
.facility-홀 { background: var(--hall); left: 2%; width: 46%; }
.facility-연습실 { background: var(--practice); left: 52%; width: 46%; }
.facility-미분류 { background: var(--unclassified); left: 2%; width: 96%; }
#grid.mobile .day-col .facility-홀,
#grid.mobile .day-col .facility-연습실 { left: 2%; width: 96%; }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid #e11d48; z-index: 5; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -1px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; }
#error { color: #b91c1c; padding: 12px 16px; }
.block.clickable { cursor: pointer; }
.block.clickable:hover { opacity: 1; }
/* 목표는 미연결 0건 — 연결된 것을 꾸미지 않고 남은 일감만 눈에 띄게 한다.
   outline이 아니라 inset box-shadow를 쓴다: outline은 단일 프로퍼티라
   .selected(#111)·.conflict(#dc2626)가 잡으면 미연결 표시가 통째로 사라진다.
   box-shadow는 그 둘과 공존하므로 선택·겹침 중에도 남는다. */
.block.unsettled, .allday-block.unsettled { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
/* 편집 — 선택·드래그·겹침 표시 */
#cal .block.editable { cursor: grab; }
#cal .block.dragging { cursor: grabbing; opacity: 1; z-index: 6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
#cal .block.selected { outline: 2px solid #111; outline-offset: 1px; }
#cal .block.conflict { outline: 2px solid #dc2626; outline-offset: 1px; }
#cal .block .resize-handle { position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; cursor: ns-resize; }
#cal .drop-hint { position: absolute; left: 2%; width: 96%; border: 1px dashed #666;
  border-radius: 4px; background: rgba(0, 0, 0, 0.05); pointer-events: none; z-index: 4; }
/* 상세 카드 — 데스크탑은 블록 옆 팝오버, 모바일은 하단 시트(아래 미디어쿼리) */
#detail-backdrop { position: fixed; inset: 0; z-index: 20; background: transparent; }
#detail-card { position: fixed; z-index: 21; width: 300px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 14px 16px; font-size: 13px; }
.detail-head { display: flex; align-items: flex-start; gap: 8px; }
.detail-title { font-size: 15px; font-weight: bold; margin: 0 auto 0 0; word-break: break-all; }
#detail-card .detail-close { border: none; background: none; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
#detail-card .detail-close:hover { background: none; color: #666; }
.detail-when { color: #666; margin: 4px 0 10px; }
.detail-row, .detail-edit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid #f2f2f2; }
.detail-row .label { flex: none; width: 44px; color: #666; }
.detail-row .value { flex: 1 1 auto; }
.detail-row .muted { color: #999; }
.detail-note { flex: 1 1 100%; color: #b45309; font-size: 12px; }
.detail-row .light-when { color: #666; font-size: 12px; }
.detail-row .value.ok { color: #15803d; }
.detail-row .value.warn { color: #b45309; font-weight: bold; }
.chat-log { flex: 1 1 100%; margin-top: 6px; max-height: 180px; overflow-y: auto;
  background: #fafafa; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.chat-line { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; font-size: 12px; }
.chat-at { flex: none; color: #999; font-size: 11px; }
.chat-text { word-break: break-word; }
.chat-out .chat-text { color: var(--hall); }
.chat-empty { color: #999; font-size: 12px; }
.reply-box { flex: 1 1 100%; margin-top: 6px; }
.reply-templates { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.reply-box textarea { width: 100%; padding: 6px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
.reply-box textarea:disabled { background: #f5f5f5; color: #999; }
.reply-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; }
.reply-queued { color: #15803d; font-size: 12px; }
.detail-picker { flex: 1 1 100%; display: flex; gap: 6px; }
.detail-picker select { flex: 1 1 auto; min-width: 0; padding: 5px; font-size: 13px; }
#detail-card button.mini { padding: 3px 8px; font-size: 12px; }
.edit-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.edit-row label { flex: none; width: 44px; color: #666; font-size: 12px; }
.edit-row select, .edit-row input { flex: 1 1 auto; min-width: 0; padding: 5px; font-size: 13px; }
.edit-actions { display: flex; gap: 6px; margin-top: 10px; }
#detail-card button.danger { margin-top: 8px; border-color: #dc2626; color: #dc2626; }
/* 미니 달력 팝오버(#402) — 달력 아이콘 아래에 뜬다.

   행 하나가 곧 한 주다. 행에 올리면 일곱 칸이 함께 물들어, 고르는 단위가 날짜가
   아니라 주라는 것이 눌러 보기 전에 읽힌다. */
#jump-pop { position: absolute; top: calc(100% - 6px); right: 16px; z-index: 28;
  background: #fff; border: 1px solid #bbb; border-radius: 10px; padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.jump-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jump-title { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: bold; }
#cal #jump-pop button.jump-nav { padding: 2px 8px; font-size: 13px; }
.jump-week { display: grid; grid-template-columns: repeat(7, 32px); }
.jump-dow { text-align: center; font-size: 11px; color: #777; padding-bottom: 2px; }
.jump-dows:hover .jump-dow { background: none; }
#cal #jump-pop button.jump-day { padding: 4px 0; border: none; border-radius: 0;
  background: none; font-size: 13px; line-height: 20px; }
.jump-day.other { color: #bbb; }
.jump-day.today { font-weight: bold; color: var(--hall); }
/* 행 전체가 하나의 클릭 대상이라는 것을 호버로 말한다. 잠긴 주는 물들지 않는다 —
   갈 수 없는 곳에 가겠다는 신호를 주면 안 된다. */
#cal #jump-pop .jump-week:not(.jump-dows):hover button.jump-day:not(:disabled) {
  background: #eef2ff; }
#cal #jump-pop .jump-week.current button.jump-day:not(:disabled) { background: #dbeafe; }
#cal #jump-pop button.jump-day:disabled { opacity: .3; }

/* 하단 토스트 — 저장 결과와 실행취소 */
#cal-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 30; display: flex; align-items: center; gap: 12px;
  background: #222; color: #fff; border-radius: 10px; padding: 10px 16px;
  font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); max-width: calc(100vw - 32px); }
#cal-toast .toast-warn { color: #fbbf24; }
#cal-toast button { border: none; background: none; color: #93c5fd;
  font-size: 13px; font-weight: bold; cursor: pointer; padding: 2px 4px; }
#cal-toast button:hover { background: none; color: #bfdbfe; }
/* 집기 하단 바 — 모바일 터치 편집. 토스트와 같은 자리라 동시에 뜨지 않는다. */
#cal-pickup-bar { position: fixed; left: 8px; right: 8px; bottom: 16px; z-index: 29;
  display: flex; align-items: center; gap: 10px;
  background: #1f2937; color: #fff; border-radius: 12px; padding: 12px 14px;
  font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
#cal-pickup-bar .pickup-text { flex: 1 1 auto; min-width: 0; }
#cal-pickup-bar button { flex: none; border: 1px solid #4b5563; background: #374151;
  color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
#cal-pickup-bar button:hover { background: #4b5563; }
#cal-pickup-bar button.pickup-danger { border-color: #b91c1c; background: #7f1d1d; }
#cal-pickup-bar button.pickup-confirm { border-color: #1d4ed8; background: #1e40af; }
#cal .block.picked { opacity: 0.5; outline: 2px dashed #111; outline-offset: 1px; }
#cal .day-col.not-droppable { background: repeating-linear-gradient(
  45deg, #f6f6f6, #f6f6f6 6px, #eee 6px, #eee 12px); }
.pricing-adjust { margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 6px; }
.pricing-adjust summary { font-size: 12px; color: #475569; cursor: pointer; }
.pricing-adjust input, .pricing-adjust select { font-size: 12px; }

@media (max-width: 700px) {
  /* 위 기본 규칙을 #cal / #detail-card로 감쌌으므로 여기서도 같은 특이도를
     써야 한다. 맨 요소 선택자로 두면 특이도에 져서 축소가 먹지 않는다. */
  #chips { display: flex; }
  #cal header { padding: 8px 10px; gap: 6px; }
  #cal header h1 { font-size: 15px; }
  #cal button, #detail-card button { padding: 5px 8px; font-size: 13px; }
  .legend { padding: 6px 10px; font-size: 12px; gap: 8px; }
  /* 좁은 화면에서 오른쪽으로 넘치지 않게 헤더 안쪽으로 당긴다. */
  #jump-pop { right: 10px; left: auto; max-width: calc(100vw - 20px); }
  #detail-backdrop { background: rgba(0, 0, 0, 0.25); }
  #detail-card { left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: auto; max-width: none; border-radius: 14px 14px 0 0; padding-bottom: 20px; }
}