/* 9개 컨셉이 공유하는 구조 규칙. 색·타이포 같은 정체성은 각 컨셉의 style.css가 정한다. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript { padding: var(--s-8) var(--gutter); max-width: 40rem; }
body { word-break: keep-all; overflow-x: hidden; }

.head span { display: block; }
.lede, .head { text-wrap: balance; }
.hero__art { min-width: 0; }
.hero__frame { position: relative; display: inline-block; }
.mascot { display: block; height: auto; }

.table-wrap { overflow-x: auto; }
.ledger { width: 100%; min-width: 32rem; border-collapse: collapse; text-align: left; }

.quotes, .points, .stamps, .stages, .steps, .voices { list-style: none; padding: 0; }
.voices { display: grid; gap: 1rem; }
.voice__quote, .voice__quote p { margin: 0; }
.voice__by { display: grid; }
.points li { display: flex; gap: .7rem; align-items: flex-start; }
.points svg { flex: none; margin-top: .22rem; }
.tally { display: inline-flex; gap: 2px; }
.tally i { display: block; width: 2px; height: 13px; border-radius: 1px; background: currentColor; }
.tally i:nth-child(5n) { transform: rotate(24deg) translateX(-4px); }

.fig dt { display: flex; align-items: baseline; gap: .15rem; }
.fig__v { font-variant-numeric: tabular-nums; }
.fig__note { display: block; }

.btn { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; cursor: pointer; }
.btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

/* 진입 애니메이션 기본 상태. 모션을 끄거나 캡처 모드면 보이는 상태로 둔다. */
.js-rise { opacity: 0; transform: translateY(18px); }
[data-still='1'] .js-rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-rise { opacity: 1; transform: none; } }