/* /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-home {
  line-height: 1;
  text-decoration: none;
  display: inline-flex; align-items: center;
  height: 38px;
}
.sc-home:focus-visible {
  border-radius: var(--radius-1);
}
.sc-home svg {
  color: var(--color-point-3);
  flex-shrink: 0;
  inline-size: 18px; block-size: 18px;
  margin-right: var(--space-1);
}
.sc-brand {
  line-height: 1;
  display: flex; justify-content: space-between; align-items: center;
  block-size: var(--height-2);
}
.sc-brand__name {
  color: var(--color-point-3); font-size: var(--font-size-2); font-weight:600;
  letter-spacing: .4px;
}
.sc-brand__tail {
  color: var(--color-point-2); font-size: var(--font-size-1);
  letter-spacing: .4px; text-transform: uppercase;
  transform: translateY(1px);
}
.sc-brand__actions {
  display:flex; align-items:center; gap: var(--space-1);
}

/* ───────────────── FOOTER ───────────────── */
.sc-footer {
  color: var(--color-text-5); font-size: var(--font-size-1);
  text-align: center; white-space: nowrap;
  display: flex; flex-direction: column; gap: .1rem;
  padding: var(--space-4) var(--space-2);
}
/* 푸터는 어느 화면에서든 같은 자리에 선다 — main의 좌우 패딩이 홈만 0이고
   나머지는 space-2라, 그대로 두면 푸터가 홈 8px · 서브 라우트 16px로 어긋난다
   (이낙 2026-08-24). 콘텐츠 박스의 여백은 화면마다의 설계라 건드리지 않고,
   푸터만 홈 기준(8px)으로 모은다. 정적 문서(#legal·#column·#about)도 같이 모인다. */
main:not(#home) > .sc-footer {
  padding-left: 0;
  padding-right: 0;
}
.sc-footer a {
  color: var(--color-text-5);
  text-decoration: none;
  padding-inline: 2px;
}
.sc-footer button {
  color: var(--color-text-5);
  font: inherit;
  text-decoration: none;
  padding-inline: 2px;
}
.sc-footer a:focus-visible {
  border-radius: var(--radius-1);
}
.sc-footer button:focus-visible {
  border-radius: var(--radius-1);
}
.sc-footer__contact {
  white-space: normal;
}
.sc-footer__contact a {
  overflow-wrap: anywhere;
}

/* 사업자정보 아코디언(2026-08-24) — 카카오페이 가맹점 심사가 "홈페이지 하단 푸터
   캡쳐 한 장"에 상호·대표자·사업자등록번호·통신판매업 신고번호·주소·연락처를
   요구해서, 별도 페이지 링크 대신 제자리에서 펼친다. 값과 사본 목록은
   src/components/Footer.svelte 머리 주석이 원본. 정적 문서 푸터(docShell.js)는
   링크를 그대로 두므로 아래 규칙은 SPA 푸터에서만 쓰인다. */
.sc-footer__toggle {
  gap: 1px;
  /* 탭이 텍스트 선택으로 새지 않게 — .sc-btn과 같은 관례. */
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sc-footer__togglecaret {
  display: inline-flex;
  transform: translateY(1px);
  transition: transform .16s ease;
}
.sc-footer__toggle[aria-expanded="true"] .sc-footer__togglecaret {
  transform: translateY(1px) rotate(180deg);
}
/* .sc-footer가 nowrap·가운데 정렬이라 패널에서 둘 다 되돌린다. 글자는 캡쳐에서
   읽혀야 하므로 푸터(font-size-1·text-5)보다 한 단계씩 올린다. */
.sc-footer__business {
  white-space: normal;
  text-align: left;
  width: min(100%, 28rem);
  margin: var(--space-2) auto;
  /* 하단만 space-2인 건 아래 "자세히 보기" 링크가 탭 타깃용 padding-block을
     space-1만큼 갖기 때문 — 8+4로 위쪽 12와 눈높이가 맞는다. 둘은 한 쌍이라
     한쪽만 고치지 말 것. */
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--color-muted-1);
  border-radius: var(--radius-2);
  font-size: var(--font-size-2);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-footer__business {
    animation: sc-footer-reveal .18s ease-out both;
  }
  @keyframes sc-footer-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* max-content 열 — 라벨이 가장 긴 "통신판매업 신고번호"에 맞춰 저절로 정렬된다. */
.sc-footer__bizfacts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
.sc-footer__bizfacts dt {
  color: var(--color-text-4);
}
/* anywhere는 띄어쓰기가 없는 이메일이 상자를 넘지 않게 받친다 — 주소가
   "금당로/39번길"처럼 낱말 가운데서 끊기는 건 global.css의 전역 keep-all이 막는다. */
.sc-footer__bizfacts dd {
  margin: 0;
  color: var(--color-text-3);
  overflow-wrap: anywhere;
}
.sc-footer__bizfacts dd a {
  color: var(--color-text-3);
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 아주 좁은 기기(≤359px)에서는 라벨 열이 값 열을 150px 남짓으로 눌러서
   이메일이 "…gmail.co / m"으로 끊긴다. 그 구간만 값을 라벨 아래로 내린다 —
   패널은 길어지지만 심사 캡쳐는 데스크톱에서 찍으므로 높이보다 가독성이 앞선다. */
@media (max-width: 359px) {
  /* 링크 줄은 ≤359px에서 이미 4px 넘쳐 "라이선스"가 잘렸고, 토글 카레트가 그 폭을
     더 밀었다. 이 구간에서만 nowrap을 풀어 두 줄로 접히게 한다(2026-08-24). */
  .sc-footer__etc {
    white-space: normal;
  }
  .sc-footer__bizfacts {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sc-footer__bizfacts dt {
    margin-top: var(--space-2);
  }
  .sc-footer__bizfacts dt:first-child {
    margin-top: 0;
  }
}
/* 값 줄의 이메일이 이미 밑줄을 쓰고 있어서 여기까지 밑줄이면 두 겹이 된다.
   대신 홈 사이드바의 칼럼 "더 보기 →"(.sc-rmenu__morelink)와 같은 문법 —
   밑줄 없이 우측 끝, 화살표로 이동을 알린다(이낙 2026-08-24). */
.sc-footer__bizmore {
  display: flex;
  justify-content: flex-end;
  margin: var(--space-2) 0 0;
}
.sc-footer__bizmore a {
  color: color-mix(in srgb, var(--color-point-2) 70%, var(--color-text-1));
  padding-inline: 0;
  /* 사이드바 원본(.sc-rmenu__morelink)은 목록 사이 터치 간격을 min-block-size
     32px로 벌지만, 여기선 패널의 마지막 줄이라 그 여분이 그대로 아래 여백으로
     보인다. 높이를 늘리는 대신 상하 패딩으로 타깃(28px)을 확보한다. */
  padding-block: var(--space-1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ───────────────── 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)
  );
}