/* 관리자 화면 — PC 우선, 좁은 화면에서는 메뉴가 위로 올라간다. ERP 본사 화면과 같은 왼쪽 어두운 메뉴. */
body { min-height: 100vh; }
.shell { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 0; height: 100vh; }
.rail .brand { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem; }
.rail .brand .mono { width: 2.2rem; height: 2.2rem; border-radius: 8px; background: #fff; color: var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.rail .brand b { display: block; font-size: 15px; }
.rail .brand small { color: var(--rail-muted); }
.rail nav { display: flex; flex-direction: column; gap: .15rem; }
.rail nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 8px; color: var(--rail-ink); text-decoration: none; font-weight: 600; min-height: 2.75rem; }
.rail nav a:hover { background: var(--rail-2); }
.rail nav a[aria-current="page"] { background: var(--rail-2); box-shadow: inset 3px 0 0 #7BA0F0; }
.rail nav a .ic { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.rail nav a .cnt { margin-left: auto; background: var(--bad); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: 12px; font-weight: 700; min-width: 1.4rem; text-align: center; }
.rail .who { margin-top: auto; padding: .7rem; border-top: 1px solid var(--rail-2); font-size: 13px; color: var(--rail-muted); }
.rail .who b { color: var(--rail-ink); display: block; font-size: 14px; }
.rail .who button { margin-top: .5rem; background: none; border: 1px solid var(--rail-muted); color: var(--rail-ink); border-radius: 6px; padding: .3rem .7rem; cursor: pointer; }

.content { min-width: 0; display: flex; flex-direction: column; }
.page-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1.2rem 1.6rem .4rem; }
.page-head h1 { font-size: var(--fs-l); }
.page-head .sub { color: var(--muted); }
.page-head .spacer { flex: 1; }
#view { padding: .8rem 1.6rem 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; outline: none; max-width: 1400px; }

@media (max-width: 860px) {
  /* 칸 너비를 메뉴 글자 길이에 맞춰 늘리지 않게(minmax 0) — 메뉴는 옆으로 밀어 본다 */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail, .content { min-width: 0; max-width: 100vw; }
  .rail { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: .5rem .6rem; gap: .5rem; }
  .rail .brand small { display: none; }
  /* 메뉴 6개가 옆으로 숨지 않게 줄을 바꿔 모두 보인다 */
  .rail nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); flex: 1 1 100%; width: 100%; min-width: 0; order: 3; gap: .2rem; }
  .rail nav a { white-space: nowrap; padding: .4rem .55rem; min-height: 2.6rem; font-size: 14px; }
  .rail nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #7BA0F0; }
  .rail .who { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: .5rem; min-width: 0; }
  .rail .who b { display: inline; }
  .rail .who .role { display: none; }
  .rail .who button { margin: 0; }
  .page-head { padding: 1rem 1rem .2rem; }
  #view { padding: .6rem 1rem 2rem; }
}

/* 오늘 현황 */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.store-card { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit; }
.store-card:hover { border-color: var(--muted); }
.store-card h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .4rem; }
.store-card .kind { font-size: 12px; color: var(--muted); font-weight: 600; }
.store-card .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.store-card .nums div { display: flex; flex-direction: column; }
.store-card .nums b { font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.store-card .nums span { font-size: 12px; color: var(--muted); }
.store-card .nums .alert b { color: var(--warn); }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; }
.check-list li:first-child { border-top: 0; }
.check-list .k { flex: 0 0 auto; }
.check-list .what { flex: 1 1 18rem; min-width: 0; }
.check-list .what b { display: block; }
.card > .card-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.card > .card-head h2 { font-size: 1.05rem; }
.card > .card-head .spacer { flex: 1; }

/* 근태 기록 */
.filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; padding: 1rem 1.1rem; }
.filters .field { flex: 0 1 10.5rem; }
.filters .quick { display: flex; gap: .35rem; flex-wrap: wrap; width: 100%; }
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: .65rem .8rem; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: middle; }
table.grid th { font-size: 13px; color: var(--muted); font-weight: 700; background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
table.grid td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid .badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.result-line { padding: .6rem 1.1rem; color: var(--muted); font-size: 13px; border-top: 1px solid var(--rule-soft); }

@media (max-width: 700px) {
  table.grid.stack thead { display: none; }
  table.grid.stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rule-soft); }
  table.grid.stack td { border: 0; padding: .1rem 0; }
  table.grid.stack td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  table.grid.stack td.wide { grid-column: 1 / -1; }
}

/* 승인함 */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--rule); }
.tabs a { padding: .6rem .9rem; text-decoration: none; color: var(--muted); font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.req-list { display: grid; gap: .9rem; }
.req { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.req .top { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.req .top b { font-size: 1.05rem; }
.req .reason { background: var(--surface-2); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: 0; }
.req .actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.forwarded { display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.compare td.changed::after { content: " (바뀜)"; font-weight: 600; font-size: 12px; color: var(--warn); }

/* 직원 */
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .9rem 1.1rem; }
.toolbar .spacer { flex: 1; }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg button { border: 1px solid var(--rule); background: var(--surface); padding: .35rem .7rem; border-radius: 999px; cursor: pointer; min-height: 2.25rem; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.store-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .4rem; }
.store-checks label { display: flex; gap: .45rem; align-items: center; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .5rem .6rem; cursor: pointer; }
.store-checks label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* 매장·스티커 */
.stores-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .stores-layout { grid-template-columns: 1fr; } }
.tag-row { display: flex; gap: .8rem; align-items: center; padding: .7rem 1.1rem; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; }
.tag-row .place { flex: 1 1 12rem; }
.tag-row .place b { display: block; }
.guide { padding: 1rem 1.1rem; }
.guide ol { margin: .4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }

/* 설정 */
.set-list { display: flex; flex-direction: column; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: .5rem 1.2rem; padding: 1rem 1.1rem; border-top: 1px solid var(--rule-soft); align-items: center; }
.set-row:first-child { border-top: 0; }
.set-row .help { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .set-row { grid-template-columns: 1fr; } }
.unit-input { display: flex; align-items: center; gap: .4rem; }
.unit-input input { max-width: 7rem; }