/* The site's frame (siteframe.ts, 2026-11-05, the user): the black bar with the mark and the tabs, the footer. Values after
   campaign.hani.co.kr/regional-extinction-crisis (.site-header, .tab-item, .drawer) and stop-femicide.hani.co.kr (footer) */
:root { --topbar: 56px; } /* as TOPBAR in siteframe.ts */
body { padding-top: var(--topbar); }

/* ---- the bar: one line on every screen. The hairline under it and the white line under the tab shown */
.sf-bar { position: fixed; z-index: 8; top: 0; left: 0; right: 0; height: var(--topbar); box-sizing: border-box; display: flex; align-items: center; padding: 0 20px;
  background: #000; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .12); }
.sf-logo { display: flex; align-items: center; flex: none; margin-right: 20px; }
.sf-logo-img { display: block; height: 24px; width: auto; }
.sf-tabs { display: flex; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tab { position: relative; flex: none; display: inline-flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0 20px; color: rgb(255 255 255 / .55); font-size: 18px; font-weight: 400; white-space: nowrap; letter-spacing: -.01em; text-decoration: none;
  transition: color .2s, background .2s; }
.sf-tab::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: #fff; transform: scaleX(0); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.sf-tab.on { color: #fff; font-weight: 700; }
.sf-tab.on::after { transform: scaleX(1); }
@media (hover: hover) {
  .sf-tab:hover { color: #fff; background: rgb(255 255 255 / .06); }
  .sf-tab:not(.on):hover::after { transform: scaleX(.6); }
}
.sf-tab:focus-visible, .sf-menu:focus-visible, .sf-close:focus-visible, .sf-item:focus-visible, .sf-logo:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* the menu button and the drawer: phones only */
.sf-menu { display: none; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0 11px; border: 0; background: none; }
.sf-menu span { display: block; height: 2px; border-radius: 1px; background: #fff; }
.sf-menu span:nth-child(1), .sf-menu span:nth-child(3) { width: 22px; }
.sf-menu span:nth-child(2) { width: 16px; }
.sf-layer { display: none; }
.sf-short { display: none; }
@media (max-width: 767px) {
  .sf-bar { padding: 0 5px 0 16px; }
  /* two tabs only (2026-11-12, the user): they sit in the bar by their short names, the menu button and drawer are not used */
  /* the tabs at the right end of the bar, away from the mark (the user, the same day) */
  .sf-tabs { margin-left: auto; }
  .sf-tab { padding: 0 12px; font-size: 16px; }
  .sf-tab .sf-long { display: none; }
  .sf-tab .sf-short { display: inline; }
  /* the layer clips the drawer, so a drawer off to the side can never widen a phone's page */
  .sf-layer { display: block; position: fixed; z-index: 40; inset: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .3s; }
  .sf-layer.open { visibility: visible; transition: none; }
  .sf-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity .3s; }
  .sf-layer.open .sf-shade { opacity: 1; }
  .sf-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(280px, 85vw); overflow-y: auto; background: #111; color: #fff; box-shadow: -4px 0 24px rgb(0 0 0 / .5);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
  .sf-layer.open .sf-drawer { transform: none; }
  .sf-drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--topbar); box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .sf-drawer-head .sf-logo-img { height: 22px; }
  .sf-close { width: 44px; height: 44px; border: 0; background: none; color: rgb(255 255 255 / .55); font-size: 22px; line-height: 1; }
  .sf-drawer-nav { padding: 8px 0; }
  .sf-item { display: block; padding: 14px 24px 14px 21px; border-left: 3px solid transparent; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: none; }
  .sf-item.on { border-left-color: #fff; background: rgb(255 255 255 / .06); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .sf-tab, .sf-tab::after, .sf-layer, .sf-shade, .sf-drawer { transition: none; } }

/* ---- an empty tab: the game is hidden, not taken out, so it keeps its size and goes on where it was. The page's scroll bar
   stays, so the game's width does not change under it. The footer sits at the bottom of the screen */
html.tab-other { overflow-y: scroll; }
html.tab-other body { display: flex; flex-direction: column; min-height: 100svh; box-sizing: border-box; }
/* the game's page is at least a screen tall even before app.ts has built anything (it waits for its data first), so the
   footer is never seen at the top of an empty page while the site loads (2026-11-10, the user) */
#app { min-height: calc(100vh - var(--topbar)); min-height: calc(100svh - var(--topbar)); }
html.tab-other #app { visibility: hidden; height: 0; min-height: 0; overflow: hidden; }
html.tab-other .fast-btn { visibility: hidden; }
.sf-panel { flex: 1; padding: 64px var(--side-pad); text-align: center; }
.sf-panel[hidden] { display: none; }
/* a tab with a page of its own (the survey): one screen under the bar, scrolling inside; past its end the page goes on to the footer */
.sf-panel.framed { padding: 0; }
.sf-panel.sc-host { padding: 0; text-align: left; } /* the scroll article runs edge to edge (scrolly.css) */
.sf-frame { display: block; width: 100%; height: calc(100svh - var(--topbar)); border: 0; }
.sf-frame[hidden] { display: none; }
.sf-panel-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.sf-panel-note { margin: 0; color: var(--muted); }

/* ---- the footer, as the Hankyoreh footer the user received (2026-11-10, hani_footer.html): on a phone the credits, the fund
   and the Hankyoreh's part one under the other; from 768 px the credits and the fund side by side. Its 11 and 12 px type is
   13 px here, the site's least (the user) */
.sf-foot { position: relative; padding: 28px 20px 32px; background: #000; color: #fff; font-family: var(--font); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.sf-foot[hidden] { display: none; }
.sf-foot p, .sf-foot dl, .sf-foot dd { margin: 0; }
.sf-foot-in { max-width: 1200px; margin: 0 auto; }
.sf-foot-top { display: flex; flex-direction: column; gap: 20px; }
.sf-credits { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; line-height: 1.6; }
.sf-credits dt { color: #9a9a9a; white-space: nowrap; }
.sf-credits dd { color: #fff; }
.sf-note { display: block; margin-top: 2px; color: #8a8a8a; font-size: 13px; line-height: 1.55; }
.sf-fund { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sf-kpf { display: block; height: 28px; width: auto; }
.sf-fund p { font-size: 13px; line-height: 1.6; color: #9a9a9a; }
.sf-foot-bottom { margin-top: 24px; padding-top: 24px; border-top: 1px solid #2a2a2a; }
.sf-foot-logo { display: block; width: 59px; height: auto; margin-bottom: 12px; }
.sf-copy { font-size: 13px; line-height: 1.7; }
.sf-mail { font-size: 13px; line-height: 1.7; margin-top: 6px; }
@media (min-width: 768px) {
  .sf-foot { padding: 40px 40px 44px; }
  .sf-foot-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 48px; }
  .sf-credits { flex: 1 1 auto; }
  .sf-fund { flex: 0 1 420px; }
  .sf-kpf { height: 32px; }
  .sf-foot-bottom { margin-top: 32px; padding-top: 28px; }
  .sf-foot-logo { width: 72px; margin-bottom: 16px; }
  .sf-mail { font-size: 14px; }
}
/* the profile card stays at the bottom right after the ending: its place is kept clear (264px + its 16px margin + a gap) */
@media (min-width: 768px) { html:not(.tab-other) body:has(.profile) .sf-foot { padding-right: 296px; } }
/* during a life the game's page ends at the fork reached so far: the footer waits for the ending (body.in-life, app.ts) */
html:not(.tab-other) body.in-life .sf-foot { display: none; }
@media (max-width: 767px) {
  /* the profile card floats at the bottom right of a phone during a life: the last sentence ends above it */
  html:not(.tab-other) body:has(.profile) .sf-foot { padding-bottom: 112px; }
}