@import url('/fonts/noto-sans-kr.css');
:root{color-scheme:light;--ink:#16395d;--muted:#526579;--line:#dbe3ec;--paper:#fff;--ground:#f2f5f9;--accent:#176eae;--error:#a51f26;--focus:#0a65c7;font-family:'Noto Sans KR',sans-serif;color:var(--ink);background:var(--ground);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;padding:64px 24px;font-size:15px}main{max-width:920px;margin:auto;background:var(--paper);padding:48px;border:1px solid var(--line);border-radius:16px}h1{font-size:clamp(23px,3.4vw,32px);line-height:1.45;margin:0;letter-spacing:-.025em;overflow-wrap:anywhere}header p{color:var(--muted);line-height:1.8;margin:14px 0 0}button,input{font:inherit}button{min-height:46px;border:1px solid transparent;border-radius:8px;padding:10px 18px;background:var(--ink);color:white;cursor:pointer;transition:background .16s ease}button:hover{background:#22527e}button:disabled{cursor:wait;opacity:.55}.secondary{background:white;border-color:#9daec1;color:var(--ink)}.secondary:hover{background:#edf4fa}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}::selection{background:#cce5f8}input{width:100%;min-height:50px;border:1px solid #8e9fb2;border-radius:8px;padding:10px 14px;caret-color:var(--accent)}label{display:block;font-weight:600;margin-bottom:10px}form{max-width:440px;margin:36px 0 0}form button{width:100%;margin-top:18px}
#error{padding:16px;background:#fff1f1;color:var(--error);border-radius:8px;line-height:1.7}
main:has(#dashboard:not([hidden])) { max-width: 1160px; }
.metrics {
  --column-padding: clamp(20px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 36px;
}
.metric { min-width: 0; }
.metric:first-child { padding-inline-end: var(--column-padding); }
.metric + .metric { border-inline-start: 1px solid var(--line); padding-inline-start: var(--column-padding); }
.metric-heading, .completion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.metric h2, .metric h3 { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; word-break: keep-all; }
.metric-value { font-size: 25px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
progress {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 10px;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  appearance: none;
  background: #e7edf3;
}
#area-bar { --accent: #218653; }
progress::-webkit-progress-bar { background: #e7edf3; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 0; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 0; }
.completion { margin-top: 22px; flex-wrap: wrap; }
.amount {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 6px;
  margin: 0 0 0 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.amount-total, .amount-completed { white-space: nowrap; }
.amount b { color: var(--ink); font-weight: 500; }
.amount .metric-value { color: var(--ink); }
.source { margin: 8px 0 0; font-size: 12px; line-height: 1.8; text-align: right; color: var(--muted); }
.notice { background: #fff8e6; color: #705017; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.8; }
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(22 42 64 / 34%);
}
.loading-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 4px 20px rgb(22 42 64 / 12%);
  font-weight: 600;
}
.spinner { width: 24px; height: 24px; flex: none; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
@media (max-width: 960px) {
  .metrics { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .metric:first-child, .metric + .metric { padding-inline: 0; }
  .metric + .metric { border-inline-start: 0; border-top: 1px solid var(--line); padding-top: 26px; }
}
@media (max-width: 650px) {
  body { padding: 20px 12px; }
  main { padding: 28px 22px; }
  .metrics { padding-top: 28px; }
  .metric h2, .metric h3 { font-size: 16px; }
  .metric-value { font-size: clamp(18px, 5vw, 21px); }
  #password { font-size: 16px; }
}
@media (max-width: 460px) {
  .completion { display: grid; grid-template-columns: minmax(0, 1fr); }
}
/* Adapted from https://transitions.dev/transitions/texts-reveal/ for the two customer views. */
@media (prefers-reduced-motion: no-preference) {
  main {
    --entry-step: 40ms;
    --entry-easing: cubic-bezier(.22, 1, .36, 1);
  }
  main[data-view="login"] header,
  main[data-view="login"] #login-form,
  main[data-view="dashboard"] #title,
  main[data-view="dashboard"] .metric {
    animation: view-enter 360ms var(--entry-easing) backwards;
  }
  main[data-view="login"] #login-form,
  main[data-view="dashboard"] .metric:first-child { animation-delay: var(--entry-step); }
  main[data-view="dashboard"] .metric + .metric { animation-delay: calc(2 * var(--entry-step)); }
  .loading-overlay { animation: scrim-enter 140ms ease-out; }
}
@keyframes view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrim-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  .spinner { animation: none; }
}