/* ══════════════════════════════════════════
   홈 대시보드 (/) 전용
   ★색·간격 토큰은 style.css 것을 그대로 쓴다 — 여기서 새 색을 만들지 않는다.
   ══════════════════════════════════════════ */

.home-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.home-title p { margin-top: 8px; font-size: 12px; color: var(--text-mid); }

.page-wrap .home-blk + .home-blk,
.page-wrap .home-blk + .home-two-col { margin-top: 28px; }

.home-blk { display: flex; flex-direction: column; gap: 11px; }
.home-blk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-blk-head h2 {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    color: var(--text); letter-spacing: 0.02em;
}
.home-blk-hint { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.home-blk-more {
    margin-left: auto; font-family: var(--mono); font-size: 11px;
    color: var(--accent); text-decoration: none;
}
.home-blk-more:hover { text-decoration: underline; }

/* ── 처리해야 할 일 카드 ── */
.home-queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qcard {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 3px;
    padding: 15px 16px 14px 19px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    text-decoration: none; color: inherit;
    transition: border-color 0.15s, transform 0.12s;
}
.qcard:hover { border-color: var(--border-hover); }
.qcard:active { transform: scale(0.995); }
.qcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 좌측 심각도 띠 — 숫자만으론 무엇이 급한지 안 읽힌다. 0건이면 회색으로 죽인다. */
.qcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); }
.qcard.is-crit::before { background: var(--error); }
.qcard.is-warn::before { background: var(--warn); }
.qcard.is-ok::before { background: var(--ok); }
.qcard-top { display: flex; align-items: center; gap: 8px; }
.qcard-label { font-family: var(--mono); font-size: 11.5px; color: var(--text-mid); letter-spacing: 0.02em; }
/* ※ 구 .qcard-pill(본사/매장 칩) 제거 — 워크스페이스로 갈라서 필요 없어졌다.
   보이는 카드가 곧 내 일이다. HQ_STORE_SPLIT_PLAN.md §7 */
.qcard-n {
    font-family: var(--mono); font-size: 27px; font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.25; font-variant-numeric: tabular-nums;
}
.qcard-n small { font-size: 13px; color: var(--text-mid); margin-left: 3px; letter-spacing: 0; }
.qcard.is-zero .qcard-n { color: var(--text-dim); }
.qcard-foot { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }

/* ── 매출 KPI ── */
.home-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
    display: flex; flex-direction: column; gap: 5px;
    padding: 15px 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.kpi-label { font-family: var(--mono); font-size: 11px; color: var(--text-mid); }
.kpi-val {
    font-family: var(--mono); font-size: 21px; font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.kpi-val small { font-size: 12px; color: var(--text-mid); margin-left: 2px; }
.kpi-sub { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

/* ── 2단 ── */
.home-two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }

/* ⚠️ 그리드 blowout 방지 — `1fr` 은 `minmax(auto, 1fr)` 이라 트랙이 **내용의
   최소폭까지 벌어진다**. 재고 피드의 상품명은 `white-space:nowrap` 이라
   최소폭이 곧 문장 전체 길이(실측 569px)여서, 375px 화면에서 트랙이 750px 로
   벌어지고 문서가 782px 이 됐다. 그러면 `position:fixed` 오버레이·스크림도
   그 넓이를 기준으로 잡혀 **워크스페이스 선택 창이 화면 밖 우측 하단**에
   그려진다(제보된 증상). 그리드 자식에 min-width:0 을 줘야 트랙이 컨테이너를
   따른다 — .home-queue/.home-kpis 도 같은 이유로 함께.
   ※ 이걸 풀면 피드의 말줄임(text-overflow)도 같이 무력화된다. */
.home-two-col > *,
.home-queue > *,
.home-kpis > * { min-width: 0; }

/* ── 매장 워크스페이스 ──
   시스템 상태(웹훅 끊김·크론)와 매출은 매장이 손쓸 수 있는 일이 아니다.
   못 하는 일을 띄워두면 화면만 시끄러워진다 → 블록째 감추고, 남은 한 칸이
   2단 격자에서 반쪽으로 쪼그라들지 않게 한 단으로 편다.
   (body.ws-store 는 js/layout.js 가 붙인다) */
body.ws-store #home-sys-blk,
body.ws-store #home-revenue-blk { display: none; }
body.ws-store .home-two-col { grid-template-columns: 1fr; }

/* ── 최근 재고 변동 ── */
.home-feed, .home-sys {
    padding: 2px 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.feed-row, .sys-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--surface2);
}
.feed-row:last-child, .sys-row:last-child { border-bottom: none; }
.feed-time {
    font-family: var(--mono); font-size: 11px; color: var(--text-dim);
    min-width: 40px; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.feed-src {
    font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 5px;
    background: var(--surface2); white-space: nowrap; flex-shrink: 0;
}
.feed-main { min-width: 0; flex: 1; }
.feed-name {
    font-family: var(--mono); font-size: 12px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-code {
    font-family: var(--mono); font-size: 11px; color: var(--text-mid);
    background: none; border: none; padding: 0; cursor: pointer;
}
.feed-code:hover { color: var(--accent); text-decoration: underline; }
.feed-delta {
    font-family: var(--mono); font-size: 12px; margin-left: auto; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.feed-delta.plus { color: var(--ok); }
.feed-delta.minus { color: var(--error); }
.feed-delta.set { color: var(--text-mid); }

/* ── 시스템 상태 ── */
.led { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.led-ok { background: var(--ok); }
.led-warn { background: var(--warn); }
.led-crit { background: var(--error); }
.sys-name { font-family: var(--mono); font-size: 12px; }
.sys-when {
    margin-left: auto; font-family: var(--mono); font-size: 11px;
    color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.home-empty {
    padding: 26px 0; text-align: center;
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
}

@media (max-width: 1100px) {
    .home-queue { grid-template-columns: repeat(2, 1fr); }
    .home-kpis { grid-template-columns: repeat(2, 1fr); }
    .home-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .home-title { flex-direction: column; align-items: stretch; gap: 12px; }
    .home-queue { grid-template-columns: 1fr; }
    .home-kpis { grid-template-columns: 1fr; }
}