/* IUSHELL BI: Gold #9F7750 · Gray #D8D8D6 · Orange #D1572C.
   Darker text shades and lighter dark-mode shades are UI contrast adaptations. */
/* 공식 원본 WOFF2 · 굵기 400/700/800/900 · 라이선스: fonts/NanumSquareNeo-LICENSE.txt */
@font-face {
  font-family: 'NanumSquare Neo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NanumSquareNeoTTF-bRg-1.000.woff2') format('woff2');
}
@font-face {
  font-family: 'NanumSquare Neo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/NanumSquareNeoTTF-cBd-1.000.woff2') format('woff2');
}
@font-face {
  font-family: 'NanumSquare Neo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/NanumSquareNeoTTF-dEb-1.000.woff2') format('woff2');
}
@font-face {
  font-family: 'NanumSquare Neo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/NanumSquareNeoTTF-eHv-1.000.woff2') format('woff2');
}
:root {
  --brand-gold: #9f7750;
  --brand-gray: #d8d8d6;
  --brand-orange: #d1572c;
  --bg: #fff;
  --panel: #fff;
  --soft: #f6f4f1;
  --soft-blue: #f5eee6;
  --ink: #292621;
  --muted: #625d56;
  --line: #dedbd6;
  --accent: #805c37;
  --accent-dark: #654524;
  --teal: #69735a;
  --red: #b14621;
  --green: #805c37;
  --bar: #baa184;
  --shadow: 0 8px 30px #30251b08;
  --overlay: #21170e88;
  --font-body:
    'NanumSquare Neo', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}
:root[data-theme='dark'] {
  --bg: #121110;
  --panel: #1d1b18;
  --soft: #27241f;
  --soft-blue: #30271f;
  --ink: #f3eee8;
  --muted: #c3b9ad;
  --line: #514a41;
  --accent: #dec09c;
  --accent-dark: #efd5b4;
  --teal: #bac6a3;
  --red: #ffa883;
  --green: #dec09c;
  --bar: #9c8060;
  --shadow: none;
  --overlay: #000b;
}
html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font: 400 1rem/1.65 var(--font-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font-family: var(--font-body);
  letter-spacing: inherit;
}
button,
select {
  min-height: 40px;
}
input:not([type='checkbox']) {
  min-height: 42px;
}
input[type='checkbox'] {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
input::placeholder {
  color: var(--muted);
  opacity: 1;
}
button:disabled {
  opacity: 0.6;
}
h1,
h2,
h3 {
  letter-spacing: -0.025em;
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1 {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 760;
}
h2 {
  font-size: 22px;
  line-height: 1.45;
}
h3 {
  font-size: 17px;
}
small {
  font-size: 13px;
}
.muted,
.table-note {
  font-size: 14px;
  line-height: 1.7;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 650;
}
.brand {
  font-size: 22px;
  letter-spacing: -0.035em;
}
.brand svg {
  color: var(--brand-gold);
}
.brand small {
  font-size: 12px;
  letter-spacing: 0.1em;
}
.topbar {
  border-top: 3px solid var(--brand-gold);
}
.header-caption {
  font-size: 14px;
}
.top-actions {
  gap: 18px;
}
.source-link,
.theme-label select {
  font-size: 14px;
}
.sidebar nav a {
  font-size: 16px;
  font-weight: 550;
  padding: 14px 12px;
  line-height: 1.5;
}
.sidebar nav a.active {
  background: var(--accent);
  color: #fff;
  font-weight: 650;
}
:root[data-theme='dark'] .sidebar nav a.active {
  background: var(--accent);
  color: #241a11;
}
.sidebar nav a.reserve-menu > span:last-child {
  font-size: 15px;
  line-height: 1.55;
}
.sidebar-note {
  font-size: 13px;
}
.profile-group dl > div {
  font-size: 14px;
  line-height: 1.65;
  padding: 10px 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.profile-group h3 {
  font-size: 13px;
  font-weight: 600;
}
.profile-name {
  font-size: 15px;
  line-height: 1.65;
}
.profile-title h2 {
  font-size: 19px;
}
.profile-title .eyebrow {
  font-size: 11px;
}
.profile-source,
.profile-help,
.profile-warning,
.profile-basis,
.profile-date {
  font-size: 13px;
}
.profile-existing {
  font-size: 12px;
}
.profile-title button {
  font-size: 12px;
  min-height: 34px;
}
.breadcrumb,
.intro-top {
  font-size: 13px;
}
.intro-card {
  border-top: 3px solid var(--brand-gold);
}
.heading .muted {
  font-size: 15px;
  line-height: 1.7;
}
.intro-hint {
  font-size: 14px;
  line-height: 1.75;
}
.intro-hint span {
  font-size: 14px;
}
.source-chip {
  font-size: 13px;
}
.period select {
  font-size: 16px;
  font-weight: 600;
}
.month-chips button {
  font-size: 14px;
  min-width: 64px;
  min-height: 38px;
  letter-spacing: 0;
}
.month-chips button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:root[data-theme='dark'] .month-chips button.active {
  color: #241a11;
}
.tools {
  font-size: 13px;
  line-height: 1.75;
  gap: 16px;
}
.notice {
  font-size: 14px;
  line-height: 1.8;
}
.section-heading {
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.section-heading button {
  font-size: 13px;
  white-space: nowrap;
}
.section-heading .muted {
  font-size: 14px;
}
.section-heading .actions {
  flex-wrap: wrap;
}
.statement-tools {
  gap: 12px;
  flex-wrap: wrap;
}
.statement-tools select,
.search-field input {
  font-size: 14px;
}
.search-field {
  min-width: 180px;
  flex: 1;
}
.statement-head {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.statement-head span:last-child {
  font-size: 13px;
}
.statement-row {
  padding: 20px 0;
  gap: 14px;
}
.item-title strong {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 650;
}
.item-title small {
  font-size: 13px;
  line-height: 1.65;
  margin-top: 5px;
}
.item-price {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.item-price small {
  font-size: 13px;
}
.item-comparison {
  font-size: 14px;
  line-height: 1.6;
}
.item-comparison small {
  font-size: 12px;
}
.item-icon {
  flex-shrink: 0;
}
.primary-value strong {
  font-size: 40px;
  letter-spacing: -0.035em;
}
.primary-value > span {
  font-size: 14px;
  line-height: 1.6;
}
.summary-row {
  font-size: 14px;
  line-height: 1.6;
  flex-wrap: wrap;
}
.summary-row button {
  font-size: 14px;
}
.total-box p {
  font-size: 13px;
  line-height: 1.7;
}
.total-box strong {
  font-size: 27px;
}
.total-box strong small {
  font-size: 15px;
}
.breakdown span {
  font-size: 14px;
  line-height: 1.7;
}
.breakdown strong {
  font-size: 23px;
  letter-spacing: -0.025em;
}
.pill,
.tag {
  font-size: 12px;
  font-weight: 550;
}
.type b {
  font-size: 15px;
}
.type small {
  font-size: 12px;
  line-height: 1.6;
}
.type strong {
  font-size: 20px;
}
.formula,
details {
  font-size: 14px;
  line-height: 1.75;
}
.source {
  font-size: 14px;
  line-height: 1.85;
}
table {
  font-size: 14px;
  line-height: 1.65;
}
th {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
th,
td {
  padding: 15px 13px;
  font-variant-numeric: tabular-nums;
}
td {
  font-weight: 450;
}
td .cell-link {
  min-height: 30px;
}
tbody tr:hover td {
  background: var(--soft);
}
tfoot td,
.sum td,
.reserve-own td {
  background: var(--soft-blue);
  font-weight: 650;
}
.bar {
  background: var(--bar);
}
.bar.current,
.reserve-hbar i {
  background: var(--brand-gold);
}
.bar-slot small,
.bar-value {
  font-size: 12px;
}
.bar-slot {
  min-width: 42px;
}
.chart {
  height: 210px;
}
.source a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.complex-option strong {
  font-size: 15px;
}
.complex-option small {
  font-size: 13px;
  line-height: 1.65;
}
.compare-controls label,
.dialog-controls label {
  font-size: 13px;
}
.compare-controls select,
.dialog-controls select {
  font-size: 15px;
}
.compare-summary > div,
.dialog-summary > div {
  font-size: 14px;
}
.compare-summary small {
  font-size: 13px;
}
.compare-summary strong,
.dialog-summary strong {
  font-size: 28px;
  letter-spacing: -0.025em;
}
.ranking td:last-child,
.prose-table td:last-child,
#catalog-table td:last-child,
#coverage-table td:last-child {
  font-size: 13px;
  line-height: 1.7;
}
#rank-note,
#middle-explanation,
.status-note {
  font-size: 14px;
  line-height: 1.8;
}
.compare-bar {
  font-size: 14px;
  line-height: 1.55;
  padding: 12px;
}
.compare-bar strong {
  font-size: 16px;
}
.dialog-note,
.dialog-status {
  font-size: 14px;
}
.dialog-header h2 {
  font-size: 23px;
}
.focus-row {
  font-size: 14px;
  grid-template-columns: 24px minmax(150px, 1.3fr) 2fr 125px;
  line-height: 1.6;
}
.focus-name small {
  font-size: 12px;
}
.focus-row > strong {
  font-size: 16px;
}
.dialog-table td:last-child {
  font-size: 13px;
}
.reserve-hero {
  background: linear-gradient(115deg, var(--soft-blue), var(--panel));
  border-top: 3px solid var(--brand-gold);
}
.reserve-hero h1 {
  font-size: 34px;
}
.reserve-hero p {
  font-size: 16px;
  line-height: 1.85;
}
.reserve-controls label,
.reserve-filters label,
.reserve-inputs label {
  font-size: 14px;
}
.reserve-controls select,
.reserve-filters select,
.reserve-filters input,
.reserve-inputs input {
  font-size: 16px;
}
.reserve-kpis span {
  font-size: 14px;
  line-height: 1.6;
}
.reserve-kpis strong {
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.reserve-kpis small {
  font-size: 13px;
  line-height: 1.6;
}
.reserve-evidence-grid h3 {
  font-size: 18px;
}
.reserve-evidence-grid p {
  font-size: 15px;
  line-height: 1.85;
}
#reserve-city-table td:last-child {
  font-size: 13px;
  line-height: 1.7;
  min-width: 170px;
}
.reserve-age-row {
  font-size: 14px;
  grid-template-columns: 130px 1fr 115px;
  gap: 14px;
}
.reserve-hbar {
  flex-basis: 52px;
}
.reserve-hbar small,
.reserve-hbar em {
  font-size: 12px;
}
.reserve-hbar em {
  height: 20px;
}
.resident-message,
.scenario-callout {
  font-size: 16px;
  line-height: 1.9;
}
.reserve-steps {
  font-size: 15px;
  line-height: 1.85;
}
.reserve-widget .section-heading h2 {
  font-size: 20px;
}
.reserve-widget .pill {
  font-size: 12px;
}
.reserve-widget-stats span {
  font-size: 13px;
  line-height: 1.6;
}
.reserve-widget-stats strong {
  font-size: 22px;
  letter-spacing: -0.025em;
}
.reserve-widget-tools {
  flex-wrap: wrap;
}
.reserve-widget-tools select,
.reserve-widget-tools button {
  font-size: 13px;
}
.reserve-report-link {
  font-size: 14px;
  line-height: 1.75;
}
.reserve-widget .table-note {
  font-size: 13px;
}
.reserve-widget small.source-type {
  font-size: 12px;
}
.mini-reserve-chart {
  gap: 5px;
  overflow-x: auto;
  height: 112px;
}
.mini-reserve-chart .reserve-hbar {
  min-width: 30px;
}
.mini-reserve-chart .reserve-hbar small {
  font-size: 11px;
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
  }
  .statement-row,
  .statement-head {
    grid-template-columns: minmax(0, 1.1fr) 0.9fr 1fr;
    gap: 10px;
  }
  .item-price {
    font-size: 18px;
  }
  .item-title strong {
    font-size: 15px;
  }
  .primary-value strong {
    font-size: 36px;
  }
}
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .topbar {
    padding: 0 14px;
    gap: 10px;
  }
  .brand {
    font-size: 19px;
    min-width: 0;
    gap: 7px;
  }
  .brand small {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .theme-label select {
    font-size: 13px;
    padding: 8px;
    max-width: 110px;
  }
  .top-actions {
    gap: 5px;
  }
  h1 {
    font-size: 27px;
    line-height: 1.4;
  }
  h2 {
    font-size: 21px;
  }
  .heading .muted {
    font-size: 14px;
  }
  .intro-top {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 10px;
  }
  .intro-card {
    padding: 20px;
  }
  .intro-hint,
  .intro-hint span {
    font-size: 14px;
  }
  .period {
    align-self: stretch;
    justify-content: flex-end;
    gap: 8px;
  }
  .period select {
    font-size: 16px;
    max-width: calc(100% - 88px);
  }
  .period button {
    min-width: 40px;
  }
  .tools {
    font-size: 13px;
    flex-wrap: wrap;
  }
  .notice {
    font-size: 14px;
    padding: 14px;
  }
  .card {
    padding: 20px 18px;
  }
  .section-heading .muted {
    font-size: 14px;
  }
  .section-heading button {
    font-size: 13px;
    min-height: 38px;
  }
  .statement-tools {
    gap: 10px;
  }
  .statement-tools select,
  .search-field input {
    font-size: 16px;
  }
  .search-field {
    flex-basis: 100%;
  }
  .statement-tools > select {
    width: 100%;
  }
  .statement-head,
  .statement-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
  }
  .statement-head span:first-child {
    grid-column: 1/-1;
    display: none;
  }
  .statement-head span:last-child {
    font-size: 12px;
  }
  .statement-head {
    font-size: 12px;
  }
  .statement-row {
    padding: 20px 0;
  }
  .statement-row .item-title {
    grid-column: 1/-1;
  }
  .item-title strong {
    font-size: 17px;
  }
  .item-title small {
    font-size: 14px;
    line-height: 1.65;
  }
  .item-icon {
    display: none;
  }
  .item-price {
    font-size: 22px;
    text-align: center;
  }
  .item-comparison {
    font-size: 14px;
  }
  .item-comparison small {
    font-size: 12px;
  }
  .primary-value strong {
    font-size: 40px;
  }
  .types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .type {
    padding: 14px;
  }
  .type small {
    font-size: 12px;
  }
  .type strong {
    font-size: 20px;
  }
  .breakdown span {
    font-size: 14px;
  }
  .breakdown strong {
    font-size: 23px;
  }
  .source {
    padding: 20px;
    font-size: 14px;
  }
  .profile-mobile {
    padding: 18px;
  }
  .profile-mobile .profile-name {
    font-size: 15px;
  }
  .profile-mobile .profile-source {
    font-size: 13px;
  }
  .profile-group dl > div {
    font-size: 14px;
  }
  .profile-mobile .profile-help,
  .profile-mobile .profile-warning,
  .profile-mobile .profile-basis {
    font-size: 13px;
  }
  .profile-mobile > summary span {
    font-size: 12px;
  }
  .profile-mobile .profile-title h2 {
    font-size: 20px;
  }
  .compare-summary {
    grid-template-columns: 1fr;
  }
  .compare-summary > div:last-child {
    grid-column: auto;
  }
  .compare-summary strong {
    font-size: 30px;
  }
  .compare-summary > div {
    padding: 20px;
  }
  .compare-bar {
    font-size: 14px;
    grid-template-columns: minmax(0, 1fr) 105px;
  }
  .compare-bar strong {
    font-size: 16px;
  }
  .complex-option strong {
    font-size: 15px;
  }
  .complex-option small {
    font-size: 13px;
  }
  .section-nav a {
    font-size: 13px;
    min-height: 40px;
  }
  .dialog-summary {
    grid-template-columns: 1fr;
  }
  .dialog-summary > div:last-child {
    display: block;
    grid-column: auto;
  }
  .dialog-summary strong,
  .dialog-summary > div:last-child strong {
    font-size: 28px;
  }
  .dialog-header h2 {
    font-size: 22px;
  }
  .dialog-body {
    padding: 18px;
  }
  .dialog-note {
    font-size: 14px;
  }
  .focus-row {
    grid-template-columns: 20px minmax(0, 1fr) 105px;
    padding: 12px 6px;
    gap: 10px;
  }
  .focus-name {
    font-size: 14px;
  }
  .focus-name small {
    font-size: 12px;
  }
  .focus-row > strong {
    font-size: 15px;
  }
  .reserve-hero {
    padding: 22px 18px;
  }
  .reserve-hero h1 {
    font-size: 28px;
  }
  .reserve-hero p {
    font-size: 15px;
  }
  .reserve-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .reserve-kpis > div {
    padding: 17px 14px;
  }
  .reserve-kpis span {
    font-size: 13px;
  }
  .reserve-kpis strong {
    font-size: 24px;
    overflow-wrap: anywhere;
  }
  .reserve-kpis small {
    font-size: 12px;
  }
  .reserve-evidence-grid article {
    padding: 20px;
  }
  .reserve-evidence-grid p {
    font-size: 15px;
  }
  .reserve-inputs {
    grid-template-columns: 1fr;
  }
  .reserve-inputs label {
    font-size: 14px;
  }
  .reserve-inputs input {
    font-size: 16px;
  }
  .reserve-age-row {
    grid-template-columns: 94px minmax(0, 1fr) 90px;
    gap: 8px;
    font-size: 13px;
  }
  .resident-message {
    padding: 16px;
    font-size: 16px;
  }
  .reserve-widget-stats strong {
    font-size: 24px;
  }
  .mini-reserve-chart .reserve-hbar {
    min-width: 0;
  }
  .mini-reserve-chart .reserve-hbar small {
    font-size: 10px;
  }
  .reserve-scatter svg {
    min-width: 340px;
  }
  .mobile-nav {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mobile-nav a {
    font-size: 12px;
    line-height: 1.4;
    min-height: 46px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer > span {
    font-size: 12px;
  }
  footer {
    padding-bottom: 104px;
  }
}
@media (max-width: 359px) {
  .brand {
    font-size: 17px;
  }
  .brand small {
    font-size: 10px;
  }
  .brand svg {
    width: 23px;
    height: 23px;
  }
  .theme-label select {
    max-width: 91px;
    font-size: 12px;
  }
  .reserve-kpis {
    grid-template-columns: 1fr;
  }
  .reserve-age-row {
    grid-template-columns: 85px minmax(0, 1fr) 80px;
    font-size: 12px;
  }
  .types {
    gap: 8px;
  }
  .type {
    padding: 12px 9px;
  }
  .type strong {
    font-size: 18px;
  }
  .item-price {
    font-size: 20px;
  }
}
@media print {
  :root,
  :root[data-theme='dark'] {
    color-scheme: light;
    --bg: #fff;
    --panel: #fff;
    --soft: #f6f4f1;
    --soft-blue: #f5eee6;
    --ink: #292621;
    --muted: #625d56;
    --line: #d8d8d6;
    --accent: #805c37;
    --teal: #69735a;
    --red: #b14621;
    --bar: #baa184;
  }
  body {
    font-size: 11pt;
  }
  .reserve-report table {
    font-size: 8pt;
  }
  .reserve-report th {
    font-size: 8pt;
  }
  .reserve-report td,
  .reserve-report th {
    padding: 5px;
  }
  .reserve-report #reserve-city-table td:last-child {
    font-size: 8pt;
    min-width: 0;
  }
  .reserve-report .reserve-kpis small {
    font-size: 9pt;
  }
  .reserve-report h2 {
    font-size: 16pt;
  }
}
/* Date labels retain their full width inside the mobile month selector. */
@media (max-width: 760px) {
  .period label {
    min-width: 0;
    max-width: 210px;
    flex: 1;
  }
  .period label select {
    width: 100%;
    max-width: none;
  }
  .heading .muted {
    word-break: keep-all;
  }
}
.reserve-inputs label {
  min-width: 0;
}
.reserve-inputs input {
  width: 100%;
  box-sizing: border-box;
}
.higher .mini-track i {
  background: var(--brand-orange);
}
/* Keep chart labels readable instead of shrinking an entire SVG on a phone. */
.reserve-scatter {
  overflow-x: auto;
}
.reserve-scatter svg {
  min-width: 640px;
}
.reserve-scatter svg text {
  font-size: 18px;
}
.mini-reserve-chart .reserve-hbar small {
  font-size: 12px;
}
@media print {
  .reserve-scatter svg {
    min-width: 0;
  }
  .reserve-scatter svg text {
    font-size: 15px;
  }
}

/* Monthly overview */
.home-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 8px;
  align-items: start;
}
.overview-item {
  min-width: 0;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  text-align: left;
  color: var(--ink);
  margin: 0;
}
.overview-item span,
.overview-item small {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.overview-item strong {
  display: block;
  font-size: 22px;
  line-height: 1.4;
  margin: 5px 0;
  font-variant-numeric: tabular-nums;
}
.overview-item summary {
  padding: 0;
  cursor: pointer;
  list-style: none;
}
.overview-item summary::-webkit-details-marker {
  display: none;
}
.overview-item button {
  background: none;
}
.overview-calculation {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.overview-calculation p {
  font-size: 13px;
  line-height: 1.7;
  margin: 6px 0;
}
.overview-calculation b {
  display: block;
}
.overview-item:focus-visible,
.overview-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.overview-yoy[open] {
  grid-column: span 2;
}
@media (max-width: 1250px) {
  .home-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .overview-item {
    padding: 12px;
  }
  .overview-item strong {
    font-size: 20px;
  }
  .overview-item span,
  .overview-item small {
    font-size: 13px;
  }
}

/* Four primary navigation items */
.mobile-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 650px) {
  .mobile-nav a {
    white-space: normal;
    min-width: 0;
  }
}

/* Five report menus: two columns on small screens for readable labels. */
@media (max-width: 760px) {
  .mobile-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-nav a {
    white-space: normal;
    min-width: 0;
  }
  .mobile-nav a:last-child {
    grid-column: 1/-1;
  }
}

.staff-big {
  font-size: 24px;
  color: var(--accent-dark);
}
.staff-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.staff-inputs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.staff-inputs input {
  width: 100%;
  min-width: 0;
}
.staff-bars {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}
.staff-bars i {
  height: 13px;
  background: var(--accent);
  border-radius: 4px;
}
.staff-bars i.peer {
  background: var(--muted);
}
@media (max-width: 760px) {
  .staff-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-nav a:last-child {
    grid-column: auto;
  }
}
@media print {
  .staff-inputs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .staff-big {
    font-size: 18px;
  }
  .reserve-filters button {
    display: none;
  }
}

/* 상단 페이지 경로 표시 숨김 */
.breadcrumb {
  display: none;
}

/* 클릭 한 번으로 화면 테마 전환 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--soft);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 자료 조회·업데이트 안내 우측 정렬 */
#sync-state {
  margin-left: auto;
  text-align: right;
}