/* 한끼패스 — 베이스 + 컴포넌트 (DESIGN.md §4, §7, §14 준수) */

/* ============================================================
   1. Reset & base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* 한국어는 어절 단위로 줄바꿈한다 — 단어 중간에서 끊기지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--c-dark);
  outline-offset: 2px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   2. Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--s-xl);
}

.page {
  padding: 48px 0 96px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-xl);
  margin-bottom: var(--s-xxl);
}

.page-title {
  font-size: var(--t-title-size);
  line-height: var(--t-title-lh);
  font-weight: 700;
  color: var(--c-heading);
  letter-spacing: -0.02em;
}

.page-desc {
  margin-top: var(--s-md);
  color: var(--c-muted);
}

.section {
  margin-top: 48px;
}

.section + .section {
  margin-top: 48px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-base);
  margin-bottom: var(--s-base);
}

.section-title {
  font-size: var(--t-search-size);
  line-height: var(--t-search-lh);
  font-weight: 700;
  color: var(--c-heading);
}

.section-note {
  color: var(--c-muted);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-base);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-base);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-base);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--s-xl);
  align-items: start;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  flex-wrap: wrap;
}

.row-end {
  justify-content: flex-end;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-base);
}

/* ============================================================
   3. Header / Footer (컴포넌트 — components.js가 주입)
   ============================================================ */
/* 커스텀 엘리먼트는 기본이 inline.
   sticky는 래퍼(hqp-header)에 걸어야 페이지 전체 기준으로 고정된다. */
hqp-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 20;
}

hqp-footer {
  display: block;
}

.site-header {
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-hairline);
}

.site-header__inner {
  height: var(--h-header);
  display: flex;
  align-items: center;
  gap: var(--s-xxl);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--t-search-size);
  font-weight: 700;
  color: var(--c-heading);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__mark {
  width: 20px;
  height: 20px;
  border-radius: var(--r-cta);
  background: var(--c-primary);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__link {
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
  padding: var(--s-sm) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-state);
}

.site-nav__link:hover {
  color: var(--c-heading);
}

.site-nav__link[aria-current="page"] {
  color: var(--c-heading);
  border-bottom-color: var(--c-primary);
}

.site-footer {
  border-top: 1px solid var(--c-hairline);
  padding: var(--s-xxl) 0 48px;
  color: var(--c-muted);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-xxl);
  flex-wrap: wrap;
}

.site-footer__links {
  display: flex;
  gap: var(--s-lg);
  flex-wrap: wrap;
}

.site-footer__links a:hover {
  color: var(--c-heading);
}

.site-footer__note {
  margin-top: var(--s-md);
  max-width: 520px;
}

/* ============================================================
   4. Buttons (DESIGN.md §4)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background-color var(--motion-state), border-color var(--motion-state),
    color var(--motion-state);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 주요 CTA — 화면당 하나 */
.btn--primary {
  height: var(--h-cta);
  padding: 0 var(--s-xl);
  border-radius: var(--r-cta);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--t-body-size);
  font-weight: 500;
}

.btn--primary:hover:not(:disabled) {
  background: #85ef64;
}

/* 아웃라인 보조 CTA */
.btn--outline {
  height: var(--h-cta);
  padding: 0 var(--s-xl);
  border-radius: var(--r-control);
  background: var(--c-canvas);
  color: var(--c-heading);
  border: 1px solid var(--c-control-border);
  font-size: var(--t-body-size);
  font-weight: 500;
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--c-heading);
}

/* 어두운 헤더 액션 */
.btn--dark {
  height: var(--h-control);
  padding: 0 var(--s-base);
  border-radius: var(--r-control);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: var(--t-label-size);
  font-weight: 500;
}

.btn--dark:hover:not(:disabled) {
  background: #35373b;
}

/* 필터/표 상단 소형 컨트롤 */
.btn--control {
  height: var(--h-control);
  padding: 0 var(--s-md);
  border-radius: var(--r-control);
  background: var(--c-canvas);
  color: var(--c-heading);
  border: 1px solid var(--c-panel-border);
  font-size: var(--t-label-size);
  font-weight: 400;
}

.btn--control:hover:not(:disabled) {
  border-color: var(--c-control-border);
}

.btn--control[aria-pressed="true"] {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-on-dark);
  font-weight: 500;
}

.btn--block {
  width: 100%;
}

/* ============================================================
   5. Form controls
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.field__label {
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--c-muted);
}

.field__hint {
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  color: var(--c-muted);
}

.input,
.select {
  height: var(--h-cta);
  padding: 0 var(--s-base);
  border-radius: var(--r-control);
  border: 1px solid var(--c-control-border);
  background: var(--c-canvas);
  color: var(--c-heading);
  font-size: var(--t-body-size);
  width: 100%;
  transition: border-color var(--motion-state);
}

.input::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}

.input:hover,
.select:hover {
  border-color: var(--c-heading);
}

.select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-heading) 50%),
    linear-gradient(135deg, var(--c-heading) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 15px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 소형 필터 셀렉트 */
.select--control {
  height: var(--h-control);
  border-color: var(--c-panel-border);
  font-size: var(--t-label-size);
  padding: 0 32px 0 var(--s-md);
  width: auto;
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
}

/* 대형 입력 셸 (DESIGN.md §4 — 검색)
   ⚠ 클래스명 주의: 관리자 레이아웃은 body.shell 이므로 이름을 겹치지 말 것.
   이전에 둘 다 .shell 이라 body에 테두리·그림자가 새는 버그가 있었다. */
.search-shell {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  height: var(--h-shell);
  padding: 0 var(--s-xxl);
  border-radius: var(--r-shell);
  border: 1px solid var(--c-control-border);
  background: var(--c-canvas);
  box-shadow: var(--shadow-shell);
}

.search-shell__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--t-search-size);
  line-height: var(--t-search-lh);
  color: var(--c-heading);
}

.search-shell__input:focus {
  outline: none;
}

.search-shell__input::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}

/* ============================================================
   6. Panel / Card / Stat
   ============================================================ */
.panel {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-xxl) var(--s-xl);
}

.panel--tight {
  padding: var(--s-xl);
}

.panel__title {
  font-size: var(--t-body-size);
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: var(--s-base);
}

.stat {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-xl);
}

.stat__label {
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--c-muted);
}

.stat__value {
  margin-top: var(--s-sm);
  font-size: var(--t-title-size);
  line-height: var(--t-title-lh);
  font-weight: 700;
  color: var(--c-heading);
  letter-spacing: -0.02em;
}

.stat__unit {
  font-size: var(--t-search-size);
  font-weight: 500;
  margin-left: var(--s-xxs);
}

.stat__sub {
  margin-top: var(--s-sm);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  color: var(--c-muted);
}

/* ============================================================
   7. Table (DESIGN.md §4)
   ============================================================ */
.table-wrap {
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-panel);
  overflow: hidden;
  /* 넓은 표가 페이지 가로 스크롤을 만들지 않도록 오버플로를 이 상자에 가둔다.
     overflow:hidden 만으로는 문서 scrollWidth 가 늘어나는 경우가 있다 (FR-COM-002). */
  contain: paint;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-canvas);
}

.table th {
  text-align: left;
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--c-muted);
  padding: var(--s-md) var(--s-base);
  border-bottom: 1px solid var(--c-panel-border);
  white-space: nowrap;
}

.table td {
  padding: var(--s-base);
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-ink);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table .cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 사번·토큰·일시처럼 하이픈이 들어간 식별자는 줄바꿈하지 않는다 */
.table td.num,
.table th.num {
  white-space: nowrap;
}

.table .cell-strong {
  color: var(--c-heading);
  font-weight: 500;
}

.table .cell-muted {
  color: var(--c-muted);
}

.table tbody tr.is-new {
  animation: rowIn var(--motion-enter) both;
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ============================================================
   8. Badge (DESIGN.md §4, §14)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--s-sm);
  border-radius: var(--r-cta);
  font-size: var(--t-label-size);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.badge--ok {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.badge--deny {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.badge--neutral {
  background: var(--c-hairline);
  color: var(--c-muted);
}

/* ============================================================
   9. Empty state (DESIGN.md §14)
   ============================================================ */
.empty {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: 48px var(--s-xl);
  text-align: center;
  color: var(--c-muted);
}

.empty__cta {
  margin-top: var(--s-lg);
}

/* ============================================================
   10. QR card (DESIGN.md §4)
   ============================================================ */
.qr-card {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-xxl) var(--s-xl);
  text-align: center;
}

.qr-card__frame {
  background: var(--c-canvas);
  border-radius: var(--r-panel);
  padding: var(--s-xl);
  display: inline-block;
}

.qr-card__code {
  width: 240px;
  height: 240px;
  image-rendering: pixelated;
}

.qr-card__name {
  margin-top: var(--s-lg);
  font-size: var(--t-search-size);
  line-height: var(--t-search-lh);
  font-weight: 700;
  color: var(--c-heading);
}

.qr-card__meta {
  margin-top: var(--s-xxs);
  color: var(--c-muted);
}

.qr-card__valid {
  margin-top: var(--s-base);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.qr-card__token {
  margin-top: var(--s-sm);
  font-size: var(--t-label-size);
  color: var(--c-muted);
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ============================================================
   11. 결과 알림 (폼 제출 후 성공/거부 — DESIGN.md §14)
   ============================================================ */
.result-note {
  margin-top: var(--s-base);
  padding: var(--s-md) var(--s-base);
  border-radius: var(--r-control);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
}

.result-note--ok {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.result-note--deny {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.result-note[hidden] {
  display: none;
}

/* ============================================================
   11-b. 가로 막대 차트
   ============================================================ */
.bars {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.bar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 160px;
  align-items: center;
  gap: var(--s-md);
}

.bar__label {
  font-size: var(--t-label-size);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.bar__track {
  height: 24px;
  background: var(--c-hairline);
  border-radius: var(--r-cta);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-cta);
  transition: width var(--motion-state);
}

.bar__value {
  text-align: right;
  font-size: var(--t-label-size);
  font-weight: 500;
  color: var(--c-heading);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .bar {
    grid-template-columns: 56px minmax(0, 1fr) 104px;
  }
}

/* ============================================================
   12. 데모 안내 스트립
   ============================================================ */
.demo-note {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-base);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-control);
  color: var(--c-muted);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  margin-bottom: var(--s-xl);
}

.demo-note__tag {
  flex: none;
  background: var(--c-hairline);
  color: var(--c-heading);
  border-radius: var(--r-cta);
  padding: var(--s-xxs) var(--s-sm);
  font-weight: 500;
}

/* ============================================================
   13. Responsive (DESIGN.md §8)
   ============================================================ */
@media (max-width: 1200px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .page {
    padding: var(--s-xxl) 0 64px;
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .page-title {
    font-size: 28px;
    line-height: 36px;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .container {
    padding: 0 var(--s-lg);
  }

  .search-shell {
    padding: 0 var(--s-lg);
  }
}

/* ============================================================
   14. 모바일 (FR-COM-002)
   360px 폭에서 페이지 가로 스크롤이 생기지 않아야 한다.
   표는 자체 컨테이너 안에서만 가로 스크롤한다.
   ============================================================ */
@media (max-width: 560px) {
  .container {
    padding: 0 var(--s-base);
  }

  .section,
  .section + .section {
    margin-top: var(--s-xxl);
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-md);
  }

  .section-head > .row {
    width: 100%;
  }

  /* 필터 줄의 입력·셀렉트는 전폭으로. 페이지에 인라인 width가 박힌 곳도 덮는다. */
  .row > .input,
  .row > .select,
  .row > input[type='search'],
  .row > input[type='date'] {
    width: 100% !important;
    min-width: 0;
  }

  .row > .btn {
    flex: 1 1 auto;
  }

  .panel,
  .empty {
    padding: var(--s-lg) var(--s-base);
  }

  .stat {
    padding: var(--s-base);
  }

  .stat__value {
    font-size: 28px;
    line-height: 36px;
  }

  .stat__unit {
    font-size: var(--t-body-size);
  }

  /* 표는 컨테이너 안에서만 가로 스크롤 */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td {
    padding: var(--s-md) var(--s-md);
  }

  .table td {
    font-size: var(--t-label-size);
    line-height: var(--t-label-lh);
  }

  /* 셀 안의 액션 묶음은 좁은 화면에서 줄바꿈되게 */
  .table td .row {
    flex-wrap: wrap !important;
  }

  /* 막대는 값이 아래로 내려가게 */
  .bar {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--s-xxs);
  }

  .bar__value {
    grid-column: 2;
    text-align: left;
  }

  .demo-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .demo-note .btn {
    width: 100%;
  }

  .btn--primary,
  .btn--outline {
    height: 48px;
    padding: 0 var(--s-lg);
  }

  .search-shell {
    height: 56px;
    padding: 0 var(--s-base);
    border-radius: 28px;
  }

  .search-shell__input {
    font-size: var(--t-body-size);
  }

  .qr-card {
    padding: var(--s-lg) var(--s-base);
  }

  .qr-card__frame {
    padding: var(--s-base);
  }
}

/* 아주 좁은 화면 (360px 기준) */
@media (max-width: 380px) {
  .site-header__inner {
    gap: var(--s-base);
  }

  .brand {
    font-size: var(--t-body-size);
  }

  .page-title {
    font-size: 24px;
    line-height: 32px;
  }
}