:root {
  --bg: #fff; --fg: #111; --muted: #666; --line: #e4e4e7;
  --good: #16a34a; --warn: #ca8a04; --bad: #dc2626; --unknown: #71717a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0d10; --fg: #f4f4f5; --muted: #a1a1aa; --line: #27272a; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 1rem; max-width: 34rem;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  line-height: 1.5;
}
header { display: flex; align-items: center; gap: .5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spotpick { flex: 1; display: flex; gap: .35rem; min-width: 0; }
.spotpick select {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; font-weight: 600;
  color: var(--fg); background: transparent; border: 1px solid var(--line);
  border-radius: .4rem; padding: .3rem 1.6rem .3rem .5rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right .8rem center, right .55rem center;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
}
.spotpick button {
  font: inherit; font-size: .8rem; padding: .3rem .5rem;
  border: 1px solid var(--line); border-radius: .4rem;
  background: transparent; color: var(--fg); cursor: pointer;
}
.age, .unjudged { color: var(--muted); font-size: .8rem; }
.refresh { text-decoration: none; font-size: 1.2rem; color: var(--fg); }

.verdict { text-align: center; padding: 1.5rem 1rem; border-radius: .75rem; margin: 1rem 0; }
.verdict .grade { font-size: 1.75rem; font-weight: 700; margin: 0 0 .5rem; }
.verdict .reason { margin: 0; color: var(--muted); font-size: .9rem; }
.grade-good { background: color-mix(in srgb, var(--good) 14%, transparent); }
.grade-good .grade { color: var(--good); }
.grade-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.grade-warn .grade { color: var(--warn); }
.grade-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.grade-bad .grade { color: var(--bad); }
.grade-unknown { background: color-mix(in srgb, var(--unknown) 14%, transparent); }
.grade-unknown .grade { color: var(--unknown); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.card { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem; text-align: center; }
.card h2 { font-size: .75rem; margin: 0 0 .25rem; color: var(--muted); font-weight: 500; }
.card p { margin: 0; font-size: 1rem; font-weight: 600; }
.card small { color: var(--muted); font-size: .7rem; }
/* 값의 출처가 해변이 아님을 카드에서 바로 보이게 한다 */
.card small.warnlabel { color: var(--warn); display: block; }
/* 결측 카드는 사선 배경으로 '값이 없음'을 눈에 띄게 한다 */
.card.g-none {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px);
}

.reference { color: var(--muted); font-size: .8rem; margin: .5rem 0 1rem; }

.timeline table { width: 100%; border-collapse: collapse; }
.timeline th { text-align: left; font-weight: 500; color: var(--muted); font-size: .8rem; }
.timeline td { text-align: center; padding: .35rem 0; font-size: .75rem; cursor: pointer; }
.timeline .empty { color: var(--muted); font-size: .85rem; }
.g-good { color: var(--good); } .g-warn { color: var(--warn); }
.g-bad { color: var(--bad); } .g-unknown { color: var(--unknown); }

.others { margin-top: 1rem; }
.others h2, .timeline h2 { font-size: .85rem; color: var(--muted); font-weight: 500; }
.other {
  display: flex; align-items: baseline; gap: .5rem; padding: .6rem .25rem;
  border-top: 1px solid var(--line); text-decoration: none; color: inherit; font-size: .9rem;
}
.oname { flex: 1; }
.ovals { color: var(--muted); font-size: .85rem; }
.notice { color: var(--bad); font-size: .85rem; }
footer { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: .75rem; }
footer p { margin: .2rem 0; color: var(--muted); font-size: .75rem; }
footer a { color: var(--muted); }