/* ============================================================================
   lino-daterange.css — 기간(From~To) 입력 공용 스타일 (`.ldr-*`)
   Shared styles for the project-standard date-range picker.

   짝이 되는 스크립트: /js/lino-daterange.js (`LinoDateRange.create`)
   둘은 **반드시 함께** 로드된다(index.html 전역). 이 파일 없이 스크립트만 로드하면
   팝오버가 `display:none` 해제를 못 받아 **열리지 않는다**(`.ldr-pop.open`).

   색·반경·그림자는 common.css 의 :root 토큰을 그대로 쓰고, 톤은 lino-autocomplete.css
   (같은 계열의 "입력창 아래 떠오르는 패널")에 맞춘다 — 두 위젯이 같은 검색바에 나란히
   놓이므로 테두리·그림자·선택색이 다르면 그것만으로 어수선해 보인다.
   / Tokens from common.css; tone matched to lino-autocomplete.css since both widgets
     sit side by side in the same search bar.
   ========================================================================== */

/* ── 알약(pill) — 두 입력창 + `~` + 📅 트리거를 **하나의 상자**로 보이게 ──────────
   레퍼런스 화면의 인상이 여기서 나온다: 개별 테두리를 지우고 바깥 테두리 하나만 남긴다.
   DOM 상 input 두 개는 그대로이므로(값 계약 불변) 보이는 것만 합쳐지는 셈이다.
   position:relative 는 팝오버의 위치 기준이기도 하다.
   / Looks like one control, still two independent inputs underneath. */
.ldr-pill { position: relative; display: inline-flex; align-items: center;
            background: #fff; border: 1px solid var(--gray-300, #cbd2dc);
            border-radius: var(--radius-sm, 4px); padding: 0 2px 0 4px; }
.ldr-pill:focus-within { border-color: var(--brand-cyan, #0090d3);
                         box-shadow: 0 0 0 3px rgba(0, 144, 211, .14); }
.ldr-pill.open { border-color: var(--brand-cyan, #0090d3); }

/* 입력창의 개별 테두리·반경 제거.
   ⚠ 선택자를 이렇게 좁게 잡는 이유: 페이지들이 `.search-row input[type="text"]`
     (테두리·패딩·반경)을 자기 <style> 안에 갖고 있고, 그 규칙이 이 전역 CSS보다 **뒤에**
     로드된다. 클래스 2개 + 속성 1개로 특이성을 올려 두어야 로드 순서와 무관하게 이긴다.
   / Specificity must beat the page-local `.search-row input[type=text]` rule,
     which is injected after this global stylesheet. */
.ldr-pill .ldr-in[type="text"] {
  border: none; outline: none; background: transparent; box-shadow: none;
  padding: 5px 2px; margin: 0; width: 86px; text-align: center;
  font-size: .875rem; letter-spacing: .5px; color: var(--gray-800, #1f242e);
}
.ldr-pill .ldr-in[type="text"]::placeholder { color: var(--gray-400, #9aa3b2); letter-spacing: 0; }

.ldr-sep { color: var(--gray-400, #9aa3b2); font-size: .8rem; padding: 0 1px; user-select: none; }

/* ⚠ 2026-09-17 확대 롤아웃 중 실측 발견 — 클래스 1개(0,1,0)로는 페이지 지역 <style>의
   `.search-wrap button`/`.dept-box-filter button`류(class+type=0,1,1)에 밀려 트리거·프리셋
   버튼·날짜칸·하단바 버튼의 테두리·패딩·배경색이 페이지마다 다르게 침범당했다(리포트 계열
   8화면 중 4화면에서 실제 발생, 스크린샷으로 발견). `.ldr-in[type="text"]`(위 39행)와 같은
   이유로 여기도 클래스 2개(0,2,0)로 특이성을 올려 로드 순서·페이지 CSS와 무관하게 이기게
   한다 — 개별 화면마다 `.search-wrap > button`식으로 매번 방어하지 않아도 되게 하는 근본
   해결책. / Same specificity defense as .ldr-in above: two classes beat any page-local
   `.foo button` rule regardless of load order. */
.ldr-pill .ldr-trigger { border: none; background: transparent; cursor: pointer; padding: 3px 5px;
               font-size: .9rem; line-height: 1; color: #888; border-radius: 3px; }
.ldr-pill .ldr-trigger:hover { background: var(--gray-100, #eef0f4); color: var(--brand-cyan, #0090d3); }

/* ── 팝오버 본체 ─────────────────────────────────────────────────────────────
   폭은 듀얼 캘린더 두 벌이 각각 7열을 쾌적하게 담는 최소치(620px)로 고정한다. 내용
   기반(max-content)으로 두면 달마다 자릿수 차이로 폭이 미세하게 흔들려 눈에 거슬린다.
   / Fixed width: content-based sizing would jitter as month lengths change. */
.ldr-pop { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 320;
           width: 620px; max-width: calc(100vw - 24px);
           background: #fff; border: 1px solid var(--gray-300, #cbd2dc);
           border-radius: var(--radius-md, 8px);
           box-shadow: 0 10px 28px rgba(17, 20, 26, .16);
           padding: 10px 12px 8px; text-align: left; }
.ldr-pop.open { display: block; }
/* 아래 공간이 모자랄 때만 JS 가 붙인다(위로 펼침) */
.ldr-pop.up { top: auto; bottom: calc(100% + 4px); }

/* ── 프리셋 버튼 3행 ─────────────────────────────────────────────────────────
   한 줄을 가득 채우도록 flex:1 로 늘린다(레퍼런스와 동일). 화면이 좁아지면 wrap 이 접는다. */
.ldr-presets { display: flex; flex-direction: column; gap: 5px; }
.ldr-prow    { display: flex; flex-wrap: wrap; gap: 4px; }

/* 아래 .ldr-pop .ldr-* 전부 — 위 트리거와 같은 특이성 방어(클래스 2개, 0,2,0). 전부 팝오버
   (.ldr-pop) 자손이므로 그 클래스를 공용 접두로 쓴다. */
.ldr-pop .ldr-pbtn { flex: 1 1 auto; min-width: 50px; padding: 5px 6px; white-space: nowrap;
            font-size: .78rem; font-family: inherit; cursor: pointer;
            border: 1px solid var(--gray-300, #cbd2dc); border-radius: 3px;
            background: #fff; color: var(--gray-700, #323843); }
.ldr-pop .ldr-pbtn:hover  { background: var(--gray-50, #f7f8fa);
                   border-color: var(--brand-cyan, #0090d3); color: var(--brand-navy, #04367b); }
/* 활성 = 지금 pending 범위와 정확히 일치하는 프리셋. "무엇이 걸려 있는지"를 읽게 한다. */
.ldr-pop .ldr-pbtn.active { background: var(--brand-cyan, #0090d3); border-color: var(--brand-cyan, #0090d3);
                   color: #fff; font-weight: 700; }
/* 월 버튼은 12개라 한 줄에 몰린다 — 최소폭만 낮춰 같은 행에 들어가게 */
.ldr-months .ldr-pbtn { min-width: 36px; }

/* ── 듀얼 캘린더 ─────────────────────────────────────────────────────────────
   align-items:start — 5주/6주 달이 섞여 좌우 높이가 달라도 위쪽이 나란히 정렬되게. */
.ldr-cals { display: grid; grid-template-columns: 1fr 1fr; align-items: start;
            margin-top: 10px; padding-top: 8px;
            border-top: 1px solid var(--gray-100, #eef0f4); }
.ldr-cal  { padding: 0 10px; }
.ldr-cal + .ldr-cal { border-left: 1px solid var(--gray-100, #eef0f4); }

.ldr-cal-head  { display: flex; align-items: center; justify-content: space-between;
                 padding: 2px 0 8px; }
.ldr-cal-title { flex: 1; text-align: center; font-size: 1.02rem; font-weight: 700;
                 letter-spacing: .02em; color: var(--gray-800, #1f242e); }
.ldr-pop .ldr-nav { border: none; background: transparent; cursor: pointer; padding: 3px 6px;
           font-size: .95rem; line-height: 1; border-radius: 3px;
           color: var(--gray-400, #9aa3b2); }
.ldr-pop .ldr-nav:hover { background: var(--gray-100, #eef0f4); color: var(--brand-navy, #04367b); }

.ldr-dow, .ldr-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ldr-dow span { text-align: center; padding: 4px 0; font-size: .72rem;
                color: var(--gray-500, #6b7384); }

/* 날짜 칸 — 범위 배경이 옆 칸과 끊기지 않도록 radius 0 / 여백 0 으로 붙인다.
   (양 끝만 아래에서 radius 를 되살린다) */
.ldr-pop .ldr-day { height: 30px; padding: 0; border: none; border-radius: 0; cursor: pointer;
           background: transparent; font-family: inherit; font-size: .8rem;
           color: var(--gray-800, #1f242e); }
/* 일=빨강 / 토=파랑 — 주말 판독이 업무상 중요(마감·납기) */
.ldr-dow span.sun, .ldr-pop .ldr-day.sun { color: #e5544b; }
.ldr-dow span.sat, .ldr-pop .ldr-day.sat { color: #2f6fd0; }
/* 앞뒤 달 채움 칸 — 지우지 않고 흐리게 둔다(범위가 달을 걸칠 때 연속성이 보여야 한다) */
.ldr-pop .ldr-day.out { opacity: .42; }
.ldr-pop .ldr-day:hover { box-shadow: inset 0 0 0 1px var(--brand-cyan, #0090d3); }
/* 오늘 — 선택되지 않은 상태에서만 옅은 테두리로 표시(선택색과 경쟁하지 않게) */
.ldr-pop .ldr-day.today:not(.edge) { box-shadow: inset 0 0 0 1px var(--gray-400, #9aa3b2); }
/* 범위 내부 */
.ldr-pop .ldr-day.in { background: var(--primary-soft, #e6eff8); }
/* 양 끝(시작·종료) — .sun/.sat 색 규칙보다 **뒤에** 둬서 글자색을 덮는다(!important 불필요) */
.ldr-pop .ldr-day.edge { background: var(--brand-cyan, #0090d3); color: #fff; font-weight: 700;
                border-radius: 3px; opacity: 1; }

/* ── 하단바 ─────────────────────────────────────────────────────────────────── */
.ldr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            margin-top: 8px; padding-top: 8px;
            border-top: 1px solid var(--gray-100, #eef0f4); }
.ldr-span   { font-size: .78rem; color: var(--gray-500, #6b7384); }
.ldr-span b { color: var(--brand-navy, #04367b); font-weight: 700; }
.ldr-actions { display: flex; gap: 6px; }
.ldr-pop .ldr-btn { padding: 5px 16px; font-size: .8rem; font-family: inherit; cursor: pointer;
           border: 1px solid var(--gray-300, #cbd2dc); border-radius: 3px;
           background: #fff; color: var(--gray-700, #323843); }
.ldr-pop .ldr-btn:hover     { background: var(--gray-50, #f7f8fa); }
.ldr-pop .ldr-btn.ok        { background: var(--brand-cyan, #0090d3);
                     border-color: var(--brand-cyan, #0090d3); color: #fff; font-weight: 700; }
.ldr-pop .ldr-btn.ok:hover  { background: var(--brand-navy, #04367b);
                     border-color: var(--brand-navy, #04367b); }

/* ── 좁은 화면 — 달력 2벌이 나란히 못 들어가면 세로로 쌓는다 ───────────────────── */
@media (max-width: 680px) {
  .ldr-pop  { width: calc(100vw - 24px); }
  .ldr-cals { grid-template-columns: 1fr; }
  .ldr-cal + .ldr-cal { border-left: none; border-top: 1px solid var(--gray-100, #eef0f4);
                        margin-top: 8px; padding-top: 8px; }
}