/* factory1_trend_style.css — 1공장 재고 추이 페이지 스타일
   ────────────────────────────────────────────────────────────────
   층 프레임(.f1tr-floor-container)과 제목줄은 사용량 페이지
   (factory1_usage_style.css 의 .f1us-floor-container · .panel-header-grid)
   규격 그대로입니다. 층은 셋입니다 — 조작(제목줄 + 칩) · 그래프 · 표
   (2026-08-23 오후). 이 페이지에만 있는 것은
     .f1tr-pill*    종류 · 기간 알약 (검은 알약이 누른 칸으로 미끄러짐)
     .f1tr-chip*    항목 칩 (색 점 + 이름)
     .f1tr-chart*   그래프 상자
     .f1tr-table    아래 숫자 표
   ──────────────────────────────────────────────────────────────── */

.f1tr-wrapper { gap: 14px; }

.f1tr-floor-container {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid #dcdce4;
    margin-bottom: 0;
}

/* 제목줄 — 사용량 페이지와 같은 구성 */
.panel-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.panel-header-grid .header-left  { display: flex; align-items: center; padding-left: 12px; }
.panel-header-grid .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.panel-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    letter-spacing: -0.3px;
    margin: 0;
}

/* 조회 구간 표시 — 제목 옆 작은 회색 글씨 */
.f1tr-range {
    margin-left: 10px;
    font-size: 12px;
    color: #6e6e73;
    letter-spacing: -0.2px;
}

/* ================================================
   종류 · 기간 알약 — 제목줄 오른쪽
   헤더의 1공장·3공장 전환(.gf3-fswitch)과 같은 구성입니다. 회색 트랙 안에
   칸이 있고, 검은 알약(.f1tr-pill-thumb)이 켜진 칸 아래로 미끄러집니다.
   칸 폭이 서로 달라 left 와 width 를 같이 바꾸며, 그 위에 출렁임
   (mkTrendSquash)을 얹습니다. 자리·폭은 render.js 가 재어 넣습니다.
   ================================================ */
.f1tr-pill {
    position: relative;              /* 알약의 left/top 기준 */
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #eceff4;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    flex-shrink: 0;
}
.f1tr-pill-btn {
    position: relative;
    z-index: 1;                      /* 글자는 알약 위 */
    height: 26px;
    padding: 0 13px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s, background-color 0.18s;
}
.f1tr-pill-btn:hover { background: #e2e6ec; }
/* 켜진 칸 — 배경은 알약이 맡고, 글자만 흰색으로 */
.f1tr-pill-btn.active,
.f1tr-pill-btn.active:hover { background: transparent; color: #ffffff; cursor: default; }
.f1tr-pill-btn:focus-visible { outline: 2px solid #007aff; outline-offset: 1px; }

.f1tr-pill-thumb {
    position: absolute;
    left: 0;
    top: 3px;
    height: 26px;
    border-radius: 20px;
    background: #1d1d1f;             /* 검은 알약 (요청) */
    pointer-events: none;
    z-index: 0;
    /* 자리·폭 이동. 출렁임(scale)은 아래 keyframe 이 따로 얹습니다. */
    transition: left 0.38s cubic-bezier(0.3, 0.9, 0.35, 1), width 0.38s cubic-bezier(0.3, 0.9, 0.35, 1);
}
.f1tr-pill-thumb:not(.is-ready) { opacity: 0; }   /* 아직 자리를 못 잰 동안 */

/* 가로로 늘면서(앞이 먼저 감) 세로가 줄고, 도착해서 한 번 눌렸다 펴집니다.
   기준점(transform-origin)은 render.js 가 가는 방향의 반대쪽 끝에 둡니다. */
@keyframes mkTrendSquash {
    0%   { transform: scale(1, 1); }
    25%  { transform: scale(1.28, 0.88); }
    55%  { transform: scale(1.18, 0.92); }
    80%  { transform: scale(0.94, 1.05); }
    100% { transform: scale(1, 1); }
}
.f1tr-pill-thumb.is-sliding { animation: mkTrendSquash 0.38s linear forwards; }

/* ================================================
   항목 칩 — 묶음 제목 아래 한 줄씩
   ================================================ */
.f1tr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0 12px 2px;
}
.f1tr-chip-group-title {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #6e6e73;
    margin-bottom: 5px;
}
.f1tr-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.f1tr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 8px;
    border: 1px solid #d1d1d6;
    border-radius: 13px;
    background: #ffffff;
    color: #6e6e73;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    white-space: nowrap;
}
.f1tr-chip.on { color: #1d1d1f; border-color: #1d1d1f; }
.f1tr-chip:focus-visible { outline: 2px solid #007aff; outline-offset: 1px; }

/* 색 점 — 안 고른 칩은 빈 회색 고리, 고른 칩은 그 선의 색 */
.f1tr-chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #c7c7cc;
    background: transparent;
    flex-shrink: 0;
}
.f1tr-chip.on .f1tr-chip-dot { border-color: transparent; }

/* ================================================
   그래프
   ================================================ */
.f1tr-floor-chart { padding: 16px 14px 12px; }
.f1tr-chart {
    position: relative;
    height: 380px;
}
/* ★ canvas 에 width/height 를 CSS 로 강제하지 마십시오. Chart.js 가 상자
   크기를 재어 캔버스 크기를 직접 정하는데, CSS 로 덮으면 실제 그려진
   크기와 Chart.js 가 아는 크기가 어긋나 마우스 좌표가 밀립니다 —
   포인터와 상관없는 자리의 점에 툴팁이 뜨던 원인 (2026-08-23). */

.f1tr-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #8e8e93;
    pointer-events: none;
}

/* 조회 실패 알림 — 빈 그래프를 '값 없음'으로 읽지 않게 위에 띄웁니다 */
.f1tr-msg {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff4e5;
    border: 1px solid #f5c98a;
    color: #8a4b00;
    font-size: 12.5px;
}

/* ================================================
   숫자 표 — 그래프와 같은 값을 대조하는 자리 (3층)
   머리글 배경 없음 · 날짜와 숫자 모두 가운데 정렬 (2026-08-23 요청)
   ================================================ */
.f1tr-floor-table { padding: 12px 14px; }
.f1tr-table-wrap {
    overflow-x: auto;
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #ffffff;
}
/* 세로 스크롤바가 붙박이 머리글 옆까지 뻗어 보기 싫었습니다 (2026-08-24).
   트랙 위쪽에 머리글 높이(34px + 밑줄 1px)만큼 여백을 두어 머리글 아래에서
   시작합니다. ::-webkit- 은 크롬·엣지 계열용이고, 파이어폭스는 예전대로
   전체 높이로 나옵니다 — 기능 문제가 아니라 그대로 둡니다. 트랙을 손대면
   막대(thumb)도 함께 그려 줘야 해서 표 색에 맞춰 같이 정합니다. */
.f1tr-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.f1tr-table-wrap::-webkit-scrollbar-thumb {
    background: #c7c7cc;
    border-radius: 5px;
    border: 2px solid #ffffff;      /* 표 바탕색 테를 둘러 가늘어 보이게 */
}
.f1tr-table-wrap::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }
.f1tr-table-wrap::-webkit-scrollbar-track { background: transparent; }
.f1tr-table-wrap::-webkit-scrollbar-track:vertical { margin-top: 35px; }
.f1tr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}
.f1tr-table th,
.f1tr-table td {
    padding: 0 10px;
    height: 34px;
    text-align: center;
    border-bottom: 1px solid #f0f0f3;
    white-space: nowrap;
    color: #1d1d1f;
}
/* 머리글 — 배경을 칠하지 않습니다. 스크롤해도 위에 붙어 있어야 하므로
   뒤가 비치지 않게 표 바탕과 같은 흰색만 깝니다.
   z-index: 붙박이 칸끼리는 나중에 오는 것(본문 날짜 칸)이 먼저 오는 것
   (머리글) 위에 그려집니다. 그래서 세로 스크롤 때 본문 날짜가 '날짜'
   머리글 위로 올라탔습니다 (2026-08-23). 머리글 2 · 머리글 날짜 칸 3 ·
   본문 날짜 칸 1 로 층을 정합니다. */
.f1tr-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid #d1d1d6;
}
.f1tr-table thead .f1tr-th-date { z-index: 3; }
.f1tr-table tbody .f1tr-td-date { z-index: 1; }
.f1tr-table thead th .f1tr-chip-dot {
    display: inline-block;
    margin-right: 6px;
    border-color: transparent;
    vertical-align: -1px;
}
.f1tr-table .f1tr-th-date,
.f1tr-table .f1tr-td-date {
    position: sticky;
    left: 0;
    background: #ffffff;
    color: #6e6e73;
    font-weight: 600;
}
/* 날짜 열 폭 고정 (2026-08-24). 표가 width: 100% 라 항목을 한둘만 고르면
   열들이 넓어지면서 가운데 정렬된 날짜가 화면 중앙까지 밀렸습니다.
   폭을 못 박으면 나머지 폭은 항목 열들이 나눠 갖고, 날짜는 늘 왼쪽 끝입니다. */
.f1tr-table .f1tr-th-date { width: 96px; min-width: 96px; }
/* 일요일 날짜는 붉게 (2026-08-24 요청) — 달력 관례 그대로입니다.
   위 .f1tr-td-date 의 회색보다 뒤에 와야 이 색이 이깁니다. */
.f1tr-table .f1tr-td-sun { color: #c0392b; }
.f1tr-table tbody tr:hover td { background: #fafafc; }
.f1tr-table .f1tr-td-empty { color: #c7c7cc; }
/* 실재고−ERP 전용 — + 는 짙은 녹색, − 는 붉은색. 다른 종류는 검정 그대로. */
.f1tr-table .f1tr-td-pos { color: #1e7b34; font-weight: 600; }
.f1tr-table .f1tr-td-neg { color: #c0392b; }

/* ================================================
   폰
   ================================================ */
@media (max-width: 640px) {
    .f1tr-floor-container { padding: 14px 12px; }
    /* 제목줄을 세로로 — 알약 두 개가 제목 아래 줄로 내려옵니다 */
    .panel-header-grid { grid-template-columns: 1fr; row-gap: 10px; }
    .panel-header-grid .header-center { display: none; }
    .panel-header-grid .header-left { flex-direction: column; align-items: flex-start; padding-left: 4px; }
    .panel-header-grid .header-right { justify-content: flex-start; flex-wrap: wrap; }
    /* 종류 4칸이 한 줄에 들어가야 합니다 — 375px 폭에서 좌우 여백 포함 약 340px */
    .f1tr-pill-btn { padding: 0 6px; font-size: 11.5px; }
    .f1tr-chips { padding: 0 4px 2px; gap: 8px 14px; }
    .f1tr-floor-chart { padding: 10px 6px 6px; }
    .f1tr-chart { height: 280px; }
    .f1tr-range { display: block; margin: 2px 0 0; }
}