/* /public/assets/base.css */

html, body {
  height: 100%;
}

/* 페이지 루트 공용 셸 — 라우트별 ID 열거를 main 기본값으로 통합(2026-08-16).
   예외는 아래처럼 ID 오버라이드로(ID가 항상 이김). 404·offline은 base.css를
   안 불러오고 이 셸을 인라인 사본으로 갖고 있다. */
main {
  display: flex; flex-direction: column;
  width: 100%; max-width: 600px;
  margin: 0 auto; padding-top: var(--safe-top);
  padding-left: var(--space-2); padding-right: var(--space-2);
}
#home {
  padding-left: 0; padding-right: 0;
}
#column {
  max-width: 42rem;
}

.sc-layout {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 0;
  margin-top: var(--space-4); margin-bottom: var(--space-6);
}
#home .sc-layout, #shuffle .sc-layout, #draw .sc-layout {
  margin-bottom: var(--space-4);
}

/* ───────────────── HEADER ───────────────── */
/* 앱 헤더(.sc-appheader, src/app.css)와 통일(이낙 2026-08-28) — 풀블리드 스티키 바.
   main이 가운데 42rem 컬럼이라 100vw breakout으로 빼낸다(가로 넘침은 global.css의
   overflow-x: clip이 받친다). ← 화살표는 서브 페이지→홈 복귀 기호라 여기에만 있다. */
.sc-header {
  position: sticky; top: 0; z-index: var(--z-upper-3);
  width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; align-items: center;
  /* 내용 44 + 상하 패딩 16 + 하단 보더 1 = 총 61px — 앱 헤더는 높이 무지정이라
     콘텐츠+보더로 61인데, 여기 min-height는 border-box라 보더 1px을 포함하므로
     같은 값이 되려면 +1이 필요하다(이낙 2026-08-28, 61 vs 60 실측).
     가로 패딩은 없음 — 컨테이너 역할은 .sc-brand가 한다(아래). */
  min-height: calc(var(--height-1) + var(--space-2) * 2 + 1px);
  padding: var(--space-2) 0;
  padding-top: calc(var(--space-2) + var(--safe-top));
  background: color-mix(in srgb, var(--color-gray-4) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sc-home {
  line-height: 1;
  text-decoration: none;
  display: inline-flex; align-items: center;
  color: var(--color-text-2);
}
.sc-home:focus-visible {
  border-radius: var(--radius-1);
}
.sc-home svg {
  color: var(--color-point-2);
  flex-shrink: 0;
  inline-size: 20px; block-size: 20px;
  margin-right: var(--space-2);
}
/* 앱 헤더의 .sc-appheader__inner와 같은 1160 컨테이너 — 타이틀이 화면 폭이
   아니라 홈과 같은 본문 왼쪽줄에 선다(이낙 2026-08-28) */
.sc-brand {
  line-height: 1;
  display: flex; align-items: center;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.sc-brand__name {
  color: var(--color-text-2); font-size: var(--font-size-5); font-weight: 600;
  letter-spacing: .02em;
}
.sc-brand__tail {
  color: var(--color-text-3); font-size: var(--font-size-5);
  letter-spacing: .02em;
}

/* ───────────────── FOOTER ───────────────── */
/* 앱 푸터(.sc-appfooter, src/app.css)와 통일(이낙 2026-08-28) — 헤더와 같은
   breakout. 본진 base.css의 사업자 아코디언 등 SPA 전용 규칙은 라이트에 해당
   마크업이 없어서 걷어냈다. */
.sc-footer {
  margin-top: auto;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
  border-top: 1px solid rgba(255,255,255,.06);
  display: grid; gap: var(--space-2);
  justify-items: center; text-align: center;
}
.sc-footer__etc a {
  color: var(--color-text-3); font-size: var(--font-size-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 1px;
}
.sc-footer__etc a:hover {
  color: var(--color-text-1);
}
.sc-footer a:focus-visible {
  border-radius: var(--radius-1);
}
.sc-footer__copyright {
  color: var(--color-text-5); font-size: var(--font-size-1);
}

/* ───────────────── HR ───────────────── */
.hr--gold {
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-yellow-1) 50%, #000), transparent);
  opacity:.6;
}
.hr--silver {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0)
  );
}