/* 한붕선 소개 페이지: 눈 내리는 밤 골목의 포장마차. 색은 스토어 그림(Winter.swift)의 밤하늘과 맞춘다. */
:root {
  color-scheme: dark;
  --sky-top: #0e1424;
  --sky-mid: #1b2340;
  --sky-low: #2a2238;
  --surface: #1c1a2b;
  --line: #3a3247;
  --text: #fff3df;
  --muted: #cdbfae;
  --gold: #f6c27f;
  --fire: #ef6a2b;
  --fire-edge: #a8431a;
  font-family: system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--sky-top);
  color: var(--text);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
.wrap {
  width: min(1040px, 100% - 32px);
  margin: 0 auto;
}

/* The stall's own striped awning, cut from the closing screen, hangs over the top and the last call. */
.awning {
  height: 66px;
  background: url("/hanbungseon/art/awning.webp") 0 0 / auto 100% repeat-x;
  filter: drop-shadow(0 8px 12px #000a);
}

/* The top: night sky, warm lamp light from the stall, slow snow. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 56px;
  background:
    radial-gradient(60% 38% at 50% 0%, #ff9a3c59, #ff7a2a1f 55%, transparent 80%),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-low));
}
.hero::before,
.last::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 120px 90px, #fff, transparent),
    radial-gradient(2.5px 2.5px at 190px 160px, #ffffffcc, transparent),
    radial-gradient(1.5px 1.5px at 70px 200px, #fff, transparent),
    radial-gradient(3px 3px at 230px 40px, #ffffff99, transparent);
  background-size: 260px 240px;
}
.hero .wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-top: 40px;
  text-align: center;
}
.brand {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.icon {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  box-shadow:
    0 10px 30px #0009,
    0 0 0 1px #ffffff1f;
}
h1 {
  margin: 0;
  font-size: clamp(28px, 6.4vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede {
  margin: 0;
  max-width: 26em;
  color: #f3e3c9;
  font-size: 18px;
  text-wrap: balance;
}
.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  min-width: 240px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--fire);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--fire-edge);
}
.store:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--fire-edge);
}
.store svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.store[data-soon] {
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 3px 0 var(--line);
  pointer-events: none;
}
.store small {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.fine {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.film {
  width: min(960px, 100%);
  margin-top: 22px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #000;
  box-shadow:
    0 24px 60px #000b,
    0 0 0 1px #ffffff14;
}