/* ══════════════════════════════════════════════════════════════════════════
   footer.css — Footer 한 컴포넌트. **Tailwind UI 표준 패턴**을 우리 토큰으로 옮긴 것.

   구조: 브랜드 칸 + 링크 단 셋 → 구분선 → 저작권 바.
   원 패턴의 규격을 값이 아니라 토큰으로 받는다 — Tailwind 는 gray-600/900 같은 팔레트를
   직접 쓰지만, 우리는 테마 두 벌이 있으므로 `--fg-2`·`--fg` 로 받아야 어두운 계열에서도
   같은 위계가 유지된다.

   #foot 와 그 자식만 다룬다. 머리·본문의 규칙을 여기에 두지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */

#foot {
	/* 본문과의 사이는 **여기서 내지 않는다** — 지면(`#main`)의 아래 패딩(`--gap-shell`)이
	   그 자리다. 꼬리가 자기 `margin-top` 을 가지면 본문 쪽 여백과 합산돼, 머리 쪽보다
	   늘 두꺼워진다(실측: 위 22px 일 때 아래 95px).
	   꼬리 «안쪽» 의 패딩은 그대로 둔다 — 그건 사이 여백이 아니라 이 층의 안쪽 여백이다. */
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

/* mx-auto max-w-7xl px-6 lg:px-8 · py-12 sm:py-16 lg:py-20 */
.foot-inner {
	padding-block: clamp(2rem, 4vh, 2.75rem) clamp(1.25rem, 2.5vh, 1.5rem);
	padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
}

/* ── Footer 전체를 세로 두 단으로 ── 왼쪽은 읽는 것, 오른쪽은 재는 것.
   HUD 는 브랜드 칸의 이웃이 아니라 **Footer 전체의 옆**이다. 그래서 저작권·권리 문구까지
   왼쪽 단 안에 들어가고, HUD 는 그 전부와 나란히 선다. */
.foot-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.foot-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 22rem;
	min-width: 0;
}

/* 왼쪽 덩어리는 세로 flex 다. 글은 위에 붙고 아이콘 줄은 `margin-top: auto` 로 바닥에
   붙어 오른쪽 HUD 의 아래 모서리와 만난다. 그러면 사이에 남는 자리가 «빈 구멍» 이 아니라
   위아래로 고정된 두 블록 사이의 간격으로 읽힌다. */
.foot-brand {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;               /* 남는 세로 자리를 먹어 아이콘 줄을 아래로 민다 */
	min-width: 0;
	padding-bottom: clamp(1.25rem, 3vh, 1.75rem);
}

.foot-brand-name {
	margin: 0;
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fg);
}

/* text-sm leading-6 text-gray-600 */
.foot-brand-desc {
	max-width: var(--measure);
	margin: 0.6rem 0 0;
	font-size: var(--t-base);
	line-height: 1.6;
	color: var(--fg-2);
	word-break: keep-all;         /* 한글은 어절 단위로 끊는다 */
}

/* ── 아이콘 줄 ── 브랜드 글 아래. 표적은 **정사각 36px** — 아이콘(18px)보다 훨씬 큰
   이유는 SC 2.5.8(24px 최소)이고, 여백을 표적 안에 넣어야 좁은 간격에서도 옆 것을
   누르지 않는다. */
.foot-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	margin: auto 0 0;
	margin-left: -0.5rem;         /* 표적의 내부 여백만큼 당겨 글줄과 왼쪽을 맞춘다 */
	padding: 0;
	list-style: none;
}

.foot-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-sm);
	color: var(--fg-3);
	text-decoration: none;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.foot-icons svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}
.foot-icons a:focus-visible {
	color: var(--fg);
	background: var(--accent-soft);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.foot-icons a:hover {
		color: var(--fg);
		background: var(--accent-soft);
	}
}

/* ── 구분선 아래 ── border-t ... pt-8 · text-xs (저작권) */
.foot-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem clamp(1rem, 3vw, 2rem);
	padding-top: clamp(1.25rem, 3vh, 1.75rem);
	border-top: 1px solid var(--line);
}

/* 저작권과 권리 문구는 한 덩어리다 — 위쪽에서 `.foot-legal` 로 묶어 오른쪽 판 정보와
   갈라 놓는다. 좁아지면 판 정보가 아래로 내려간다. */
.foot-legal {
	flex: 1 1 26rem;
	min-width: 0;
}

.foot-copy {
	margin: 0;
	font-size: var(--t-legal);    /* 12px — Footer 저작권의 관행 크기 */
	line-height: 1.6;
	color: var(--fg-2);
}

/* 권리 문구 — 저작권과 **같은 크기**다. 위계는 크기가 아니라 색이 만든다:
   크기로 벌리면 둘째 줄이 각주로 밀려나 한 덩어리로 안 읽힌다.

   **폭을 가두지 않는다.** `--measure`(68ch = 454px)로 가둬 뒀더니 줄이 「…복제·」/「배포·2차적…」
   처럼 낱말 중간에서 끊겼다. 끊는 자리는 폭이 아니라 **문장 구조가 정한다**(아래 절 규칙) —
   그러니 폭 상한은 필요 없다. `--measure` 는 «읽는 글» 을 글자 수로 가두는 토큰이고, 이건
   두 절짜리 고지 문장이라 그 대상이 아니다. */
.foot-notice {
	margin: 0.3rem 0 0;
	font-size: var(--t-legal);
	line-height: 1.65;
	color: var(--fg-3);
}

/* 한글은 어절 단위로 끊는다. **`:lang()` 으로 건다** — 영문 문단에 걸면 긴 단어가
   통째로 다음 줄로 넘어가 오른쪽이 심하게 들쭉날쭉해진다. */
.foot-notice:lang(ko) {
	word-break: keep-all;
}

/* 두 절은 **항상 각자 한 줄이다.** 폭이 되면 한 줄로 붙이는 방식도 됐지만(nowrap 두 개),
   그러면 화면 폭에 따라 한 줄과 두 줄을 왔다갔다해서 같은 문구가 화면마다 다르게 앉는다.
   `display: block` 이면 어디서나 같은 자리에서 끊기고, 좁은 화면에서는 각 절이 자기 안에서
   다시 접히므로 가로로 넘치지도 않는다(nowrap 은 320px 에서 넘쳤다). */
.foot-notice > span {
	display: block;
}

.foot-copy b {
	font-weight: 700;
	color: var(--fg);
}

/* ══════════════════════════════════════════════════════════════════════════
   시각 HUD — 폭 전체를 쓰는 계기 띠.

   발사 중계 화면의 HUD 를 우리 도메인에 옮긴 것이다. 옮긴 것: **값 하나를 크게 두고
   그 값을 규정하는 것들을 작게 붙이는 위계**, **칸을 가르는 얇은 선**, **대문자 라벨**,
   **살아 있음을 알리는 박동**. 버린 것: 검은 바탕·형광 초록·계조·글로 — 그건 그 화면의
   «분위기» 지 장치가 아니고, 우리 화면은 밝음/어두움 두 벌로 서야 한다.
   ══════════════════════════════════════════════════════════════════════════ */

.hud {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 30rem;
	min-width: 0;
	padding: 0.8rem 0.9rem 0.75rem;

	/* 유리판: 반투명 바탕 + 뒤를 흐리는 필터.
	   **판 뒤에 광원을 두지 않는다** — 그래서 흐림은 실제로 흐릴 것이 없고, 이 판은
	   «색을 띠지 않는 반투명 판» 으로 선다. 색이 있는 빛을 넣으면 그게 곧 광원이다. */
	background: var(--glass);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--glass-line);

	/* 두 겹: ① 아래로 떨어지는 그림자(판을 띄운다) ② 윗변 안쪽 1px 광택 —
	   이 선 하나가 «유리의 두께» 를 만든다. 발광(네온)은 쓰지 않는다. */
	box-shadow:
		0 22px 45px -22px var(--shadow),
		inset 0 1px 0 var(--glass-shine);
}

/* 흐림을 지원하지 않는 브라우저에서는 반투명 판이 그냥 옅은 판이 되어 글자 대비가
   떨어진다. 그럴 때는 불투명 배경으로 되돌린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hud {
		background: var(--surface);
	}
}

/* 모서리 조준 마크 넷. 테두리를 다 그리면 카드가 되고, 모서리에 짧은 선만 겹치면 계기가
   된다. 두 개의 가상요소가 각각 «왼위+오위» / «왼아래+오아래» 를 그린다. */
.hud::before,
.hud::after {
	content: '';
	position: absolute;
	inset-inline: -1px;
	height: 20px;                 /* 모서리 마크가 세로로 내려오는 길이 */
	border-inline: 2px solid var(--accent);
	pointer-events: none;
}

.hud::before {
	top: -1px;
	border-top: 2px solid var(--accent);
}

.hud::after {
	bottom: -1px;
	border-bottom: 2px solid var(--accent);
}

/* ── 머리줄 ── */
.hud-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding-bottom: 0.55rem;
	margin-bottom: 0.7rem;
	border-bottom: 1px solid var(--line);
}

.hud-title {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fg-2);
}

.hud-status {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	color: var(--fg-3);
}

.hud-live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--accent);
}

/* 초마다 한 번 뛴다. **이 띠에서 유일하게 움직이는 장식**이라 「지금 도는 중」이라는
   뜻을 갖는다. 움직임을 줄인 사용자에게는 켜 둔 채 멈춘 점이 된다. */
.hud-live i {
	width: 6px;
	height: 6px;
	background: var(--accent);
	animation: hud-pulse 1s steps(1, end) infinite;
}

@keyframes hud-pulse {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
	.hud-live i { animation: none; }
}

.hud-elapsed b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fg-2);
}

/* ── 네 칸 ── */
/* 왼쪽 단이 더 길면 남는 세로 자리를 네 칸이 나눠 갖는다 — 위쪽에 몰아 두면 오른쪽 단
   아래가 비어 «덜 채워진 상자» 로 보인다. */
/* 2×2 격자에 **세로로 채운다**(`grid-auto-flow: column`). 마크업 순서는 UTC → Seoul →
   Singapore → New York 이고, 가로로 채우면 서울이 UTC 오른쪽에 앉는다 — 기준시 바로 아래에
   우리 시간이 오는 편이 읽기 쉽다(사용자 지적). 마크업은 그대로 두고 배치만 돌린다:
   순서는 회귀 검사(`test_footer_clocks_tick_in_four_zones`)가 지키는 계약이다.

       UTC        Singapore
       Seoul      New York
*/
/* HUD 는 자기 폭으로 판단한다 — 꼬리는 왼쪽 단(브랜드)과 폭을 나눠 쓰므로 뷰포트와
   비례하지 않는다. 이름을 준다: 이름 없는 질의는 «가장 가까운 컨테이너» 를 잡는다. */
.hud {
	container: hud / inline-size;
}

.hud-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	flex: 1;
	align-content: space-between;
	gap: 0.8rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hud-cell {
	padding-inline: 0.85rem;
	border-left: 1px solid var(--line);
}

/* 세로 구분선은 **오른쪽 열에만** 붙는다. 격자를 세로로 채우므로(`grid-auto-flow: column`)
   왼쪽 열은 1·2번, 오른쪽 열은 3·4번이다 — `nth-child(odd)` 로 지우던 시절의 규칙은 가로로
   채울 때만 맞았고, 배치를 돌리자 선이 서울(2번) 왼쪽에 붙고 싱가포르(3번)에서는 사라졌다
   (실측). **선의 근거는 «몇 번째 자식인가» 가 아니라 «어느 열인가» 다.** */
.hud-cell:nth-child(-n + 2) {
	padding-left: 0;
	border-left: 0;
}

.hud-cell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	margin: 0 0 0.1rem;
}

.hud-zone {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;   /* 보기만 대문자다 — 복사하면 `Etc/UTC` 그대로다 */
	color: var(--fg-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 상태 칩 — 발사 화면의 단계 표시 자리. 색만으로 말하지 않고 글자(WORK/OFF)를 함께 쓴다. */
.hud-flag {
	flex: none;
	padding: 0.05rem 0.3rem;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--fg-3);
	border: 1px solid var(--line-strong);
}

.hud-flag[data-on='1'] {
	color: var(--on-accent);
	background: var(--accent);
	border-color: var(--accent);
}

/* 이 띠의 값. 크기가 곧 «무엇을 보라» 는 지시다. */
.hud-time {
	display: block;
	font-family: var(--font-mono);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

.hud-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: 0.1rem 0 0;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hud-off {
	color: var(--accent);
	letter-spacing: 0.05em;
}

.hud-date {
	color: var(--fg-3);
}

/* ── 하루 눈금 막대 ── 추진제 잔량 막대에서 가져온 장치.
   24칸 = 24시간. 채운 만큼이 오늘 진행, 밝은 구간이 업무 시간, 세로 선이 지금이다.
   칸은 DOM 이 아니라 **가상요소의 반복 그라디언트**로 판 배경색을 덧그어 만든다 —
   24개 × 4칸 = 96개 노드를 매초 만지지 않기 위해서다. */
.hud-bar {
	position: relative;
	display: block;
	height: 7px;
	margin-top: 0.45rem;
	background: var(--line);
	overflow: hidden;
}

.hud-bar i {
	position: absolute;
	inset-block: 0;
	display: block;
}

/* 업무 구간은 **채움 위에 얹는 반투명 띠**다. 아래에 깔면 지나간 구간에서 채움에 가려져
   「지금 업무 시간 안인가」 를 막대에서 읽을 수 없다 — 그 판독이 이 막대의 목적이다. */
.hud-bar-work {
	background: var(--accent);
	opacity: 0.32;
}

.hud-bar-fill {
	left: 0;
	background: var(--fg-3);
	opacity: 0.5;
}

.hud-bar-now {
	width: 2px;
	background: var(--accent);
	z-index: 1;
}

/* 칸 사이는 **잘라 낸다**(덧칠하지 않는다). 판이 유리라 뒤가 비치므로, 판 색으로 덧칠하면
   그 자리만 불투명해져 유리가 끊긴다. 마스크로 도려내면 틈으로 유리가 그대로 보인다. */
.hud-bar {
	-webkit-mask-image: repeating-linear-gradient(90deg,
		#000 0 calc(100% / 24 - 1px),
		transparent calc(100% / 24 - 1px) calc(100% / 24));
	mask-image: repeating-linear-gradient(90deg,
		#000 0 calc(100% / 24 - 1px),
		transparent calc(100% / 24 - 1px) calc(100% / 24));
}

/* ── 좁으면 시계를 한 줄로 세운다 ── **기준은 HUD 자신의 폭**(뷰포트가 아니다).

   한때 이 규칙이 **두 벌**이었다(`@media 30rem` 과 `@media 26rem`). 뒤쪽이 앞쪽의 부분집합
   이라 26rem 블록은 `grid-auto-flow` 만 더 얹고 있었고, 어느 값이 실제로 쓰이는지 읽어야
   알 수 있었다. 하나로 합쳤다.

   옛 주석은 「두 열을 유지하면 `America/New_York` 라벨이 잘린다」고 적어 뒀는데 **사실이
   아니다** — 그 폭에서 잘리는 글자는 0개고, 넘치는 것은 격자 자체다(실측).

   실측: HUD 폭 **360px 까지 두 열이 들어가고 356px 에서 격자가 넘친다.** 경계는 28rem
   (448px)으로, 전 규칙(`@media 30rem`)이 접던 자리와 같다 — 접는 시점을 바꾸는 것은 조판
   결정이라 여기서 함께 하지 않았다. 필요하면 22.5rem(360px)까지 미룰 수 있다. */
@container hud (max-width: 28rem) {
	.hud-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	.hud-cell {
		padding-left: 0;
		border-left: 0;
	}
}