/* [Define404] */
/* 회사 소개 구간과 첫 화면 버튼 묶음 */
.about { border-top: var(--bw) solid var(--line-1); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.about-copy .d404-label { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.about-copy h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 750; letter-spacing: -0.03em; }
.about-copy .chapter-lead { margin-top: var(--s5); }
.about-facts { margin: 0; border-top: var(--bw) solid var(--ink-1); }
.about-row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--s4); padding: 18px 0; border-bottom: var(--bw) solid var(--line-1); }
.about-row dt { font-size: var(--fs-small); font-weight: 650; color: var(--ink-3); }
.about-row dd { margin: 0; font-weight: 600; }
.about-row dd a { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn-ghost { background: transparent; color: var(--ink-1); border: var(--bw) solid var(--ink-1); }
.btn-ghost:hover { background: var(--ink-1); color: var(--paper); }

/* 상태판: 처음에는 시계만. 게임을 시작하면(카드를 누르거나 첫 화면을 지나면) 나머지 숫자를 펼친다 */
html:not(.hud-on) #hud .hud-item { display: none; }
#hud .hud-item { animation: hud-in var(--t-std) var(--ease); }
@keyframes hud-in { from { opacity: 0; transform: translateY(-4px); } }

/* 첫 화면 오프닝: 손님 문의와 답 말풍선 */
.town-bubble { position: fixed; left: 0; top: 0; z-index: 4; max-width: 260px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.45; font-weight: 600; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(.92); transform-origin: 50% 100%; transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
.town-bubble.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
.town-bubble.is-in { background: var(--ink-1); color: var(--paper); }
.town-bubble.is-out { background: var(--paper-raised); color: var(--ink-1); border: var(--bw) solid var(--sky-ink); }
.town-bubble.is-out small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: var(--tr-label); color: var(--sky-ink); }
.town-bubble.is-typing::after { content: "···"; letter-spacing: 2px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-row { grid-template-columns: 1fr; gap: 4px; }
}