:root {
  --bg: #061018;
  --panel: #101d29;
  --panel-2: #0c1722;
  --line: rgba(148, 163, 184, .18);
  --line-strong: rgba(148, 163, 184, .28);
  --text: #f8fafc;
  --muted: #9fb0c2;
  --muted-2: #cbd5e1;
  --orange: #ff7a00;
  --orange-2: #ff9a2f;
  --blue: #38a7ff;
  --green: #32d583;
  --purple: #8b5cf6;
  --red: #fb7185;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 0%, rgba(56, 167, 255, .08), transparent 28%),
    radial-gradient(circle at 100% 16%, rgba(255, 122, 0, .13), transparent 30%),
    linear-gradient(180deg, #051018 0%, #07121b 52%, #060d14 100%);
}

button, select { font-family: inherit; }

.page-shell {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 24px 24px 32px;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-symbol {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), #ff9d2e);
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  box-shadow: 0 14px 32px rgba(255, 122, 0, .23);
}

.report-header h1 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.06em;
  text-shadow: 0 1px 0 rgba(255, 122, 0, .2);
}

.report-header p {
  margin: 7px 0 0;
  color: #9fc2e8;
  font-size: 13px;
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.header-period {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px 18px;
  background: rgba(15, 23, 42, .52);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.download-btn,
.refresh-btn {
  height: 44px;
  border: 1px solid rgba(255, 122, 0, .58);
  border-radius: 12px;
  padding: 0 18px;
  background: rgba(255, 122, 0, .12);
  color: #ffb067;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.download-btn:hover,
.refresh-btn:hover { background: rgba(255, 122, 0, .2); }

.download-btn {
  background: rgba(56, 167, 255, .12);
  border-color: rgba(56, 167, 255, .45);
  color: #b9ddff;
}

.download-btn:hover { background: rgba(56, 167, 255, .2); }

.filter-panel {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr 1.1fr 1.45fr 1.1fr auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(19, 34, 48, .96), rgba(13, 20, 29, .96));
}

.filter-item { min-width: 0; }

.filter-item label {
  display: block;
  margin: 0 0 7px;
  color: #b7c8dc;
  font-size: 12px;
  font-weight: 900;
}

.filter-help {
  margin: 6px 2px 0;
  color: #7f93a8;
  font-size: 11px;
  font-weight: 800;
}

select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  padding: 0 14px;
  color: #f8fafc;
  background: #07121d;
  font-weight: 850;
  outline: none;
}

select:disabled {
  opacity: .42;
  cursor: not-allowed;
}

select:focus {
  border-color: rgba(255, 122, 0, .7);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, .12);
}

.filter-item.is-active label { color: #ffbd7a; }
.filter-item.is-active select { border-color: rgba(255, 122, 0, .52); }

.period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.period-card {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 17px 18px;
  background: linear-gradient(135deg, rgba(18, 34, 48, .94), rgba(12, 18, 27, .94));
  min-width: 0;
}

.period-card .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.period-card.current .dot { background: var(--orange); }
.period-card.prev-month .dot { background: var(--blue); }
.period-card.prev-year .dot { background: var(--purple); }

.period-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 950;
}

.period-card p {
  margin: 0;
  color: #bcd0e7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.kpi-card {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 20px;
  padding: 20px;
  min-height: 190px;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 122, 0, .16), transparent 34%),
    linear-gradient(135deg, rgba(18, 34, 48, .97), rgba(12, 19, 28, .97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.14);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.kpi-card:hover,
.kpi-card:focus {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.24);
  outline: none;
}

.kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kpi-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 0, .38);
  background: rgba(255, 122, 0, .13);
  color: #ff8a1c;
  font-weight: 950;
}

.kpi-title {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #fff;
}

.kpi-group {
  color: #a7b8cb;
  font-size: 12px;
  font-weight: 800;
}

.kpi-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  padding: 5px 10px;
  color: #d4e2f2;
  background: rgba(2, 6, 23, .28);
  font-size: 12px;
  font-weight: 900;
}

.kpi-value {
  margin: 0 0 18px;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
  color: #f8fafc;
}

.kpi-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kpi-rate-box {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(2, 6, 23, .28);
  padding: 10px;
}

.rate-label {
  display: block;
  margin-bottom: 5px;
  color: #b8c7d7;
  font-size: 12px;
  font-weight: 900;
}

.rate-value {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  margin-bottom: 3px;
}

.rate-up,
.rate-good { color: var(--green); font-weight: 950; }
.rate-down,
.rate-bad { color: var(--red); font-weight: 950; }
.rate-flat { color: #94a3b8; font-weight: 950; }

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, .95fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  margin-bottom: 18px;
}

.dashboard-chart-grid .chart-wide { grid-column: 1 / 2; min-width: 0; }
.dashboard-chart-grid .chart-side { grid-column: 2 / 3; min-width: 0; }

.panel,
.table-panel,
.insight-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 122, 0, .08), transparent 32%),
    linear-gradient(135deg, rgba(18, 34, 48, .97), rgba(11, 17, 25, .97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.panel {
  padding: 24px;
  min-height: 420px;
  overflow: hidden;
}

.trend-card,
.group-card,
.conversion-card,
.compare-card { height: 100%; }

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.panel-subtitle {
  margin: 7px 0 0;
  color: #9fb0c2;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.panel-header select {
  width: auto;
  min-width: 160px;
  height: 40px;
  font-size: 12px;
}

.chart-box {
  position: relative;
  width: 100%;
  height: 300px;
  min-width: 0;
}

.chart-box.tall { height: 320px; }
.chart-box.donut { height: 250px; }

.conversion-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 0 auto;
  color: #d6e4f3;
  font-size: 13px;
  font-weight: 800;
}
.conversion-legend button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 9px;
  background: rgba(2, 6, 23, .22);
  color: #d6e4f3;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.conversion-legend button:hover,
.conversion-legend button:focus-visible {
  border-color: rgba(148, 163, 184, .55);
  outline: none;
}
.conversion-legend button.is-off { opacity: .46; }
.conversion-legend button[hidden] { display: none; }
.conversion-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.conversion-swatch.call { background: #38a7ff; }
.conversion-swatch.reservation { background: #ff7a00; }

.donut-layout {
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(190px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 320px;
}

.group-legend {
  display: grid;
  gap: 12px;
}

.group-legend div {
  position: relative;
  padding: 13px 14px 13px 34px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(2, 6, 23, .22);
}

.legend-dot {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-dot.orange { background: var(--orange); }
.legend-dot.blue { background: var(--blue); }
.legend-dot.green { background: var(--green); }

.group-legend b {
  display: block;
  margin-bottom: 6px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
}

.group-legend p {
  margin: 0;
  color: #b8c7d7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.group-count {
  display: inline-block;
  margin-left: 6px;
  color: #ffbd7a;
  font-size: 12px;
  font-weight: 950;
}

.insight-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 28px;
  margin-bottom: 18px;
}

.insight-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange-2);
  font-size: 20px;
  font-weight: 950;
  white-space: nowrap;
}

.insight-panel p {
  margin: 0;
  color: #d5e3f2;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.6;
}

.insight-panel button {
  height: 48px;
  border: 1px solid rgba(255, 122, 0, .62);
  border-radius: 14px;
  padding: 0 22px;
  color: #ff9a2f;
  background: rgba(255, 122, 0, .08);
  font-weight: 950;
  cursor: pointer;
}

.table-panel { padding: 24px; }

.table-scroll {
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 16px;
}

table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
}

th, td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  text-align: right;
  font-size: 13px;
  white-space: nowrap;
}

th:first-child,
td:first-child,
th:nth-child(2),
td:nth-child(2) { text-align: left; }

th {
  color: #bcd0e7;
  background: rgba(2, 6, 23, .28);
  font-weight: 950;
}

td {
  color: #edf4fb;
  font-weight: 750;
}

tr.total-row td {
  color: #fff;
  background: rgba(255, 122, 0, .09);
  font-weight: 950;
}

.empty-state {
  margin-top: 18px;
  border: 1px solid rgba(251, 113, 133, .28);
  border-radius: 18px;
  padding: 18px;
  background: rgba(251, 113, 133, .08);
  color: #fecdd3;
  font-weight: 800;
}

.kpi-modal[hidden],
.empty-state[hidden] { display: none !important; }

.kpi-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 12, .72);
  backdrop-filter: blur(8px);
}

.kpi-modal-card {
  position: relative;
  width: min(620px, 94vw);
  border: 1px solid rgba(255, 122, 0, .45);
  border-radius: 26px;
  padding: 32px;
  background:
    radial-gradient(circle at top right, rgba(255, 122, 0, .18), transparent 36%),
    linear-gradient(135deg, rgba(15, 32, 46, .98), rgba(14, 21, 30, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}

.kpi-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.modal-eyebrow {
  margin: 0 0 8px;
  color: #ff9a2f;
  font-size: 14px;
  font-weight: 950;
}

.kpi-modal-card h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.05em;
}

.modal-value {
  margin: 18px 0 24px;
  font-size: 58px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.modal-stats > div {
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 18px;
  padding: 18px;
  background: rgba(15, 23, 42, .52);
}

.modal-stats span {
  display: block;
  margin-bottom: 8px;
  color: #a8b6c8;
  font-size: 13px;
  font-weight: 900;
}

.modal-stats strong {
  display: block;
  margin-bottom: 6px;
  font-size: 25px;
}

.modal-stats p, .modal-desc { margin: 0; }

.modal-desc {
  color: #cbd5e1;
  line-height: 1.65;
  font-weight: 700;
}

@media (max-width: 1260px) {
  .filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .refresh-btn { grid-column: 1 / -1; }
  .dashboard-chart-grid { grid-template-columns: 1fr; }
  .dashboard-chart-grid .chart-wide,
  .dashboard-chart-grid .chart-side { grid-column: auto; }
}

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .page-shell { padding: 18px 14px 26px; }
  .report-header,
  .insight-panel { grid-template-columns: 1fr; display: grid; }
  .header-actions { justify-content: stretch; }
  .download-btn, .header-period { width: 100%; text-align: center; white-space: normal; }
  .filter-panel,
  .period-grid,
  .kpi-grid,
  .modal-stats { grid-template-columns: 1fr; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .panel-header select { width: 100%; }
  .conversion-legend { align-self: flex-end; margin-left: 0; }
  .donut-layout { grid-template-columns: 1fr; }
  .kpi-card { min-height: auto; }
  .modal-value { font-size: 46px; }
}


/* ─────────────────────────────────────
   헤더 로고/타이틀 정렬 보정
   ───────────────────────────────────── */
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-top: 6px;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-symbol.image-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.brand-symbol.image-logo img {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  border-radius: 0;
}

.brand-text h1 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.06em;
  color: #ffffff;
  white-space: nowrap;
}

.brand-text p {
  margin: 7px 0 0;
  color: #9fc2e8;
  font-size: 13px;
  font-weight: 800;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .report-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .brand-text h1 {
    white-space: normal;
    font-size: 24px;
  }

  .header-actions {
    justify-content: flex-start;
    width: 100%;
  }
}
/* =========================================================
   4자리 PIN 진입 화면
========================================================= */

[hidden] {
  display: none !important;
}

body.pin-locked {
  overflow: hidden;
}

.pin-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  padding: 24px;

  background:
    radial-gradient(
      circle at 15% 5%,
      rgba(56, 167, 255, 0.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(255, 122, 0, 0.16),
      transparent 35%
    ),
    linear-gradient(
      160deg,
      #061018 0%,
      #0b1722 55%,
      #071018 100%
    );
}

.pin-card {
  width: 100%;
  max-width: 410px;
  padding: 44px 36px 38px;

  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 34, 48, 0.98),
      rgba(10, 18, 27, 0.98)
    );

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  text-align: center;
}

.pin-logo {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.pin-logo img {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
  border-radius: 0;
}

/* 월간 보고서: 기존 카드 디자인을 유지하며 필터와 로고를 조정 */
#reportApp .filter-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.pin-logo {
  background: transparent;
}

@media (max-width: 900px) {
  #reportApp .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #reportApp .filter-panel { grid-template-columns: 1fr; }
}

#reportApp .kpi-coverage {
  color: #aebed0;
  font-size: 12px;
  font-weight: 700;
}

#reportApp .raw-items-panel {
  margin-top: 18px;
  padding: 18px 22px;
}

#reportApp .raw-items-panel summary {
  cursor: pointer;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 800;
}

#reportApp .raw-items-panel summary span {
  margin-left: 8px;
  color: #aebed0;
  font-size: 12px;
  font-weight: 600;
}

#reportApp .raw-items-panel .panel-subtitle { margin: 12px 0; }
#reportApp .raw-items-panel th,
#reportApp .raw-items-panel td { white-space: nowrap; }

.pin-eyebrow {
  margin: 0 0 10px;
  color: #ff9a2f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pin-card h1 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.pin-guide {
  margin: 16px 0 28px;
  color: #9fb0c2;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.pin-card input {
  width: 100%;
  height: 64px;

  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 15px;

  background: rgba(2, 6, 23, 0.46);
  color: #ffffff;

  font-family: inherit;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 18px;
  text-indent: 18px;
  text-align: center;

  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.pin-card input:focus {
  border-color: rgba(255, 122, 0, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.13);
}

.pin-card input.is-error {
  border-color: #fb7185;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.12);
  animation: pinShake 0.3s ease;
}

.pin-error {
  margin: 12px 0 0;
  color: #fb7185;
  font-size: 13px;
  font-weight: 800;
}

.pin-card button {
  width: 100%;
  height: 56px;
  margin-top: 20px;

  border: 0;
  border-radius: 15px;

  background: linear-gradient(135deg, #ff7a00, #ff9424);
  color: #ffffff;

  font-family: inherit;
  font-size: 16px;
  font-weight: 950;

  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 122, 0, 0.24);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.pin-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(255, 122, 0, 0.3);
}

@keyframes pinShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-7px);
  }

  75% {
    transform: translateX(7px);
  }
}

@media (max-width: 520px) {
  .pin-gate {
    padding: 18px;
  }

  .pin-card {
    padding: 38px 24px 32px;
    border-radius: 22px;
  }

  .pin-card h1 {
    font-size: 25px;
  }
}
/* =========================================================
   내부 보고서 컬러를 PIN 화면 톤으로 통일
========================================================= */

:root {
  --bg: #061018;
  --panel: #122230;
  --panel-2: #0b1722;
  --line: rgba(148, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.28);
  --text: #f8fafc;
  --muted: #9fb0c2;
  --muted-2: #cbd5e1;
  --orange: #ff8615;
  --orange-2: #ff9a2f;
  --blue: #57afff;
  --green: #32d583;
  --purple: #8b5cf6;
  --red: #fb7185;
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(56, 167, 255, 0.10), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(255, 122, 0, 0.14), transparent 35%),
    linear-gradient(160deg, #061018 0%, #0b1722 55%, #071018 100%);
}

/* 보고서 전체 카드 톤 통일 */
#reportApp .filter-panel,
#reportApp .period-card,
#reportApp .panel,
#reportApp .table-panel,
#reportApp .insight-panel {
  border-color: rgba(148, 163, 184, 0.20);
  background:
    linear-gradient(145deg, rgba(18, 34, 48, 0.98), rgba(10, 18, 27, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 36px rgba(0, 0, 0, 0.18);
}

/* KPI 카드도 PIN 카드 느낌으로 */
#reportApp .kpi-card {
  border-color: rgba(148, 163, 184, 0.20);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 122, 0, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(18, 34, 48, 0.98), rgba(10, 18, 27, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 36px rgba(0,0,0,.18);
}

/* 내부 박스류 */
#reportApp .header-period,
#reportApp select,
#reportApp .kpi-rate-box,
#reportApp .group-legend div,
#reportApp .table-scroll,
#reportApp .modal-stats > div {
  background: rgba(2, 6, 23, 0.32);
  border-color: rgba(148, 163, 184, 0.16);
}

/* 테이블 헤더/합계 */
#reportApp th {
  background: rgba(2, 6, 23, 0.36);
}

#reportApp tr.total-row td {
  background: rgba(255, 122, 0, 0.10);
}

/* 텍스트 톤 */
#reportApp .report-header h1,
#reportApp .panel-header h2,
#reportApp .kpi-title,
#reportApp .modal-value,
#reportApp td,
#reportApp .period-card strong {
  color: #ffffff;
}

#reportApp .report-header p,
#reportApp .panel-subtitle,
#reportApp .period-card p,
#reportApp .kpi-group,
#reportApp .rate-label,
#reportApp .group-legend p,
#reportApp th,
#reportApp .header-period,
#reportApp .filter-item label,
#reportApp .filter-help,
#reportApp .brand-text p {
  color: #9fb0c2;
}

/* 버튼 톤 */
#reportApp .download-btn,
#reportApp .refresh-btn,
#reportApp .insight-panel button {
  background: rgba(255, 122, 0, 0.10);
  border-color: rgba(255, 122, 0, 0.55);
  color: #ffb067;
}

#reportApp .download-btn {
  background: rgba(56, 167, 255, 0.10);
  border-color: rgba(56, 167, 255, 0.35);
  color: #b9ddff;
}

#reportApp select:focus {
  border-color: rgba(255, 122, 0, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}
/* PIN 화면 그라데이션 제거 */
.pin-gate {
  background: #061018 !important;
  background-image: none !important;
}

.pin-card {
  background: #101e2b !important;
  background-image: none !important;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.pin-card input {
  background: #091522 !important;
  background-image: none !important;
}

.pin-card button {
  background: #ff8615 !important;
  background-image: none !important;
}

.pin-card button:hover {
  background: #ff9424 !important;
}
/* PIN 입력 화면 배경 그라데이션만 제거 */
body.pin-locked .pin-gate {
  background: #061018 !important;
  background-image: none !important;
}
/* 전체 페이지 배경 그라데이션 제거 */
html,
body {
  background: #061018 !important;
  background-color: #061018 !important;
  background-image: none !important;
}

/* 보고서 내부 바깥 배경도 단색으로 고정 */
#reportApp {
  background: #061018 !important;
  background-color: #061018 !important;
  background-image: none !important;
}
/* =========================================================
   내부 전체 배경 + 상세 모달 주황 그라데이션 제거
========================================================= */

/* 보고서 바깥 전체 배경을 네이비 단색으로 */
html,
body,
body.pin-locked,
#reportApp {
  background: #061018 !important;
  background-color: #061018 !important;
  background-image: none !important;
}

/* 지표 클릭 시 열리는 어두운 뒷배경 */
.kpi-modal {
  background: rgba(2, 6, 12, 0.82) !important;
  background-image: none !important;
}

/* 클릭해서 열리는 상세 카드 */
.kpi-modal-card {
  background: #101e2b !important;
  background-color: #101e2b !important;
  background-image: none !important;

  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

/* 상세 카드 내부 비교 박스 */
.kpi-modal-card .modal-stats > div {
  background: #0b1722 !important;
  background-color: #0b1722 !important;
  background-image: none !important;
}

/* 가상 장식이 있을 경우 제거 */
.kpi-modal-card::before,
.kpi-modal-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* PIN 제목은 두 줄 모두 카드 중앙, 보고서 제목은 한 줄 */
.report-title {
  display: flex;
  margin: 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
}

.pin-card .report-title {
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  white-space: normal;
}

#reportApp .brand-text .report-title--header {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  font-weight: 400;
}

.report-title-team {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.report-title-en {
  color: #aebfd0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

@media (max-width: 480px) {
  .report-title-team { font-size: 18px; }
  .report-title-en { font-size: 12px; }
}

/* 기간 범위, 담당 매장 요약, 전년 → 전월 → 당월 비교 */
#reportApp .filter-panel {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

#reportApp .manager-summary {
  margin-bottom: 18px;
  padding: 17px 20px;
  border: 1px solid rgba(56, 167, 255, .28);
  border-radius: 18px;
  background: #101e2b;
}

#reportApp .manager-summary[hidden] { display: none !important; }

.manager-summary-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.manager-summary-heading span {
  color: #9fb0c2;
  font-size: 12px;
  font-weight: 800;
}

.manager-summary-heading strong {
  color: #fff;
  font-size: 18px;
}

.manager-summary p {
  margin: 9px 0 5px;
  color: #dbeafe;
  line-height: 1.5;
  font-weight: 750;
}

.manager-summary small { color: #9fb0c2; }

#reportApp .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#reportApp .kpi-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 238px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 122, 0, .06), transparent 35%),
    linear-gradient(145deg, rgba(18, 34, 48, .98), rgba(10, 18, 27, .98));
}

#reportApp .kpi-card .kpi-head { margin-bottom: 18px; }
#reportApp .kpi-card .kpi-icon { width: 46px; height: 46px; font-size: 20px; }
#reportApp .kpi-card .kpi-title { font-size: 21px; }
#reportApp .kpi-card .kpi-coverage { margin: 0 0 3px; line-height: 1.3; }
#reportApp .kpi-card .kpi-period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  margin-top: auto;
}
#reportApp .kpi-card .kpi-period-column { min-width: 0; }
#reportApp .kpi-card .kpi-period-box {
  box-sizing: border-box;
  min-width: 0;
  min-height: 81px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background: rgba(2, 6, 23, .32);
}
#reportApp .kpi-card .kpi-period-box.current {
  border-color: rgba(255, 122, 0, .65);
  background: rgba(255, 122, 0, .1);
}
#reportApp .kpi-card .kpi-period-box .rate-label { color: #acd4f2; }
#reportApp .kpi-card .kpi-period-box strong {
  display: block;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 29px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
#reportApp .kpi-card .kpi-period-box.current strong { color: #ffad68; }
#reportApp .kpi-card .kpi-period-change {
  margin-top: 12px;
  color: #acd4f2;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}
#reportApp .kpi-card .kpi-period-change .rate-up,
#reportApp .kpi-card .kpi-period-change .rate-down,
#reportApp .kpi-card .kpi-period-change .rate-flat { white-space: nowrap; }

.kpi-modal-card .modal-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-modal-card .modal-stats > div { min-width: 0; padding: 14px; }
.kpi-modal-card .modal-stats > .modal-current { border-color: rgba(255, 122, 0, .55); }
.kpi-modal-card #modalValue { color: #ffb067; overflow-wrap: anywhere; }

@media (max-width: 1260px) {
  #reportApp .filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  #reportApp .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #reportApp .filter-panel,
  #reportApp .kpi-grid { grid-template-columns: 1fr; }
  #reportApp .kpi-card { min-height: 238px; }
  .kpi-modal-card .modal-stats { grid-template-columns: 1fr; }
}

/* 기간별 담당 매장, 유입 구성 및 지표별 매장 순위 */
#reportApp .manager-store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.manager-store-chip {
  padding: 7px 10px;
  border: 1px solid rgba(56, 167, 255, .38);
  border-radius: 999px;
  background: rgba(56, 167, 255, .12);
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 800;
}

#reportApp .audience-section {
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 22px;
  background: linear-gradient(145deg, #142636, #0b1722);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 36px rgba(0, 0, 0, .18);
}
.audience-section-heading { margin: 0 0 18px; }
.audience-section-heading h2 { margin: 0 0 5px; color: #fff; font-size: 21px; }
.audience-section-heading p { margin: 0; color: #aebed0; font-size: 13px; }

#reportApp .audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

#reportApp .audience-card {
  min-width: 0;
  padding: 21px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18, 34, 48, .98), rgba(10, 18, 27, .98));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

#reportApp .audience-card:last-child { display: flex; flex-direction: column; }
#reportApp #demographic-summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}
#reportApp #demographic-summary > .gender-summary { width: 100%; }

.audience-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.audience-icon {
  display: grid;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 11px;
  font-size: 20px;
  font-weight: 800;
}
.gender-icon { color: #f472b6; background: rgba(244, 114, 182, .14); }
.audience-card h3 { margin: 0; color: #fff; font-size: 17px; }
.audience-card-heading p { margin: 4px 0 0; color: #aebed0; font-size: 12px; }
.audience-meta { margin: 0 0 12px; color: #bcd0e7; font-size: 12px; font-weight: 700; }
.no-source-data { color: #aebed0; font-size: 13px; line-height: 1.55; }

.source-track { height: 6px; margin-top: 7px; border-radius: 99px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.source-track > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7a00, #ffba65); }
.audience-note { margin: 16px 0 0; color: #a8b8c8; font-size: 11px; line-height: 1.5; }

.gender-summary { display: flex; align-items: center; gap: 18px; max-width: 540px; margin: 0 auto; }
.gender-donut {
  --gender-size: clamp(170px, 13vw, 200px);
  display: grid;
  flex: 0 0 var(--gender-size);
  width: var(--gender-size);
  height: var(--gender-size);
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#438aff 0 var(--male-share), #fb6d93 var(--male-share) 100%);
}
.gender-donut::before { content: ''; grid-area: 1 / 1; width: 62%; height: 62%; border-radius: 50%; background: #101e2b; }
.gender-donut > span { z-index: 1; grid-area: 1 / 1; color: #eaf2fa; font-size: 15px; font-weight: 900; }
.gender-legend { flex: 1; display: grid; gap: 12px; min-width: 0; }
.gender-legend > div { display: flex; align-items: center; gap: 7px; color: #d6e3ef; font-size: 12px; }
.gender-legend strong { margin-left: auto; color: #fff; font-size: 17px; }
.gender-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.gender-dot.male { background: #438aff; }
.gender-dot.female { background: #fb6d93; }
.gender-insight {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 13px 15px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 13px;
  background: rgba(2, 6, 23, .24);
  color: #cbd9e8;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.gender-insight strong { color: #fff; font-size: 13px; }
.age-section { margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(148, 163, 184, .18); }
.age-section h4 { margin: 0 0 8px; color: #edf4fb; font-size: 13px; }
.age-empty { margin: 0; color: #9fb0c2; font-size: 12px; line-height: 1.55; }
.age-list { display: grid; gap: 8px; }
.age-line { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: 8px; color: #d6e3ef; font-size: 11px; }
.age-line .source-track { margin-top: 0; }
.age-line b { text-align: right; }

#reportApp .ranking-control { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ranking-control label { color: #bcd0e7; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ranking-control select { min-width: 140px; }
#reportApp .ranked-table { min-width: 1260px; }
#reportApp .top-store-row td { background: rgba(255, 122, 0, .10); }
#reportApp .top-store-row td:nth-child(3),
#reportApp .top-store-row td:nth-child(4) { color: #ffb567; font-weight: 950; }
.rank-badge { display: inline-flex; min-width: 38px; justify-content: center; padding: 4px 8px; border-radius: 999px; color: #bcd0e7; background: rgba(148, 163, 184, .11); font-weight: 900; }
.rank-badge.rank-first { color: #071018; background: #ff9a2f; }

@media (max-width: 1240px) {
  #reportApp .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #reportApp .audience-card:last-child { grid-column: 1 / -1; }
  #reportApp .gender-donut { --gender-size: 220px; }
}

@media (max-width: 720px) {
  #reportApp .audience-section { padding: 16px; }
  #reportApp .audience-grid { grid-template-columns: minmax(0, 1fr); }
  #reportApp .audience-card:last-child { grid-column: auto; }
  #reportApp .audience-card { padding: 16px; }
  #reportApp .ranking-control { width: 100%; }
  #reportApp .ranking-control select { flex: 1; }
}

/* 유입경로·유입키워드는 고객 구성 영역에서 성별 카드와 함께 표시합니다. */
#reportApp .source-kpi-card { cursor: default; }
#reportApp .source-kpi-card:hover {
  transform: none;
  border-color: rgba(148, 163, 184, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.18);
}
.source-kpi-card .kpi-head { margin-bottom: 14px; }
.source-card-meta { margin: 0 0 10px; color: #aebed0; font-size: 11px; font-weight: 750; }
.source-stat-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.source-stat-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, .15);
  background: rgba(2, 6, 23, .17);
  overflow: hidden;
}
.source-stat-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--share);
  background: rgba(148, 163, 184, .06);
  content: '';
}
.source-stat-item.is-leading { background: rgba(36, 134, 99, .13); }
.source-stat-item.is-leading::before { background: rgba(52, 211, 153, .14); }
.source-stat-item > * { position: relative; z-index: 1; }
.source-stat-position { color: #e2e8f0; font-size: 13px; font-weight: 900; text-align: center; }
.source-stat-term { color: #eaf2fa; font-size: 12px; font-weight: 760; overflow-wrap: anywhere; }
.source-stat-share { color: #f1f5f9; font-size: 12px; font-weight: 950; white-space: nowrap; }
.source-stat-item.is-leading .source-stat-position,
.source-stat-item.is-leading .source-stat-term,
.source-stat-item.is-leading .source-stat-share { color: #4ee0a3; }
.source-card-note { margin: 13px 0 0; color: #a8b8c8; font-size: 10px; line-height: 1.45; }

@media (max-width: 720px) {
  #reportApp .brand-text .report-title--header {
    flex-wrap: wrap;
    white-space: normal;
    gap: 2px 8px;
  }
  #reportApp .brand-text,
  #reportApp .header-actions { min-width: 0; }
  #reportApp .source-stat-term { font-size: 12px; }
}

@media (max-width: 480px) {
  #reportApp .gender-summary { flex-direction: column; gap: 16px; }
  #reportApp .gender-donut { width: min(220px, 100%); height: auto; aspect-ratio: 1; flex: 0 0 auto; }
  #reportApp .gender-legend { width: 100%; }
}

@media (max-width: 420px) {
  #reportApp .kpi-card { padding: 20px; }
  #reportApp .kpi-card .kpi-period-grid { gap: 6px; }
  #reportApp .kpi-card .kpi-period-box { min-height: 73px; padding: 9px; }
  #reportApp .kpi-card .kpi-period-box strong { font-size: clamp(16px, 5vw, 24px); }
  #reportApp .kpi-card .kpi-period-change { font-size: 10.5px; }
}