/* 성경 방탈출 · 소개 페이지
 *
 * 어두운 방에 등불 하나. 게임이 실제로 쓰는 색에서 가져왔습니다.
 * 벽화의 금색, 정원의 이끼색, 그리고 아직 빛이 없는 첫째 날의 검정.
 *
 * 한 가지 화면 모드만 씁니다. 방탈출은 어두운 방이고, 밝은 판으로 뒤집으면
 * 그 방이 사라집니다. 그래서 색을 전부 명시해 어느 배경 위에서도 버팁니다.
 */

:root {
  --night:   #0E1014;
  --room:    #171A21;
  --raised:  #1F232C;
  --ink:     #EFEDE5;
  --soft:    #B6B3A8;
  --faint:   #7E7C74;
  --rule:    #2B303A;
  --gold:    #D9B15E;
  --gold-dim:#8A6F2E;
  --moss:    #7E9A6B;

  /* 함렛: 획이 또렷한 요즘 명조. 제목과 숫자. 고운돋움: 둥글고 조용한 본문 활자.
   * 작은 이름표도 고운돋움을 자간 벌려 쓴다 - 모노스페이스 이름표는 이 이야기의 것이 아니다. */
  --f-display: "Hahmlet", "Nanum Myeongjo", serif;
  --f-body: "Gowun Dodum", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-mono: "Gowun Dodum", "Apple SD Gothic Neo", system-ui, sans-serif;

  --measure: 36rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── 첫 화면 ─────────────────────────────────────────── */

.hero {
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--rule);
  /* 어둠 속에서 등불 하나가 위에서 비치는 것처럼. */
  background:
    radial-gradient(60rem 32rem at 50% -8rem, rgba(217, 177, 94, .13), transparent 70%),
    var(--night);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.5vw, 4.1rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: 1rem 0 1.2rem;
  text-wrap: balance;
  max-width: 20ch;
}

.lede {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--soft);
  max-width: 34ch;
  margin: 0 0 2.4rem;
  line-height: 1.75;
}

.actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; }

.button {
  display: inline-block;
  background: var(--gold);
  color: #17140C;
  font-weight: 700;
  text-decoration: none;
  padding: .85rem 1.6rem;
  border-radius: 2px;
  transition: background .15s ease;
}
.button:hover { background: #E7C273; }

.button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 400;
}
.button.ghost:hover { border-color: var(--gold-dim); background: var(--room); }

.by { font-size: .85rem; color: var(--faint); margin: 1.6rem 0 0; }

/* ── 본문 ───────────────────────────────────────────── */

section { padding: 4.5rem 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: none; }

h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.3;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .4rem;
}

p { max-width: var(--measure); margin: 0 0 1.1rem; color: var(--soft); }
p strong { color: var(--ink); font-weight: 700; }
section > .wrap > p:last-child { margin-bottom: 0; }

/* ── 두 편 ───────────────────────────────────────────── */

.episodes { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.episode {
  background: var(--room);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.episode img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.episode .text { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.episode .verse { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--gold-dim); }
.episode h3 { font-family: var(--f-display); font-size: 1.3rem; margin: 0; }
.episode p { margin: 0; font-size: .94rem; }
.episode ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--soft); font-size: .9rem; }
.episode li { margin-bottom: .15rem; }
.episode li::marker { color: var(--moss); }

/* ── 노는 방법 ───────────────────────────────────────── */

.plays { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.play { background: var(--night); padding: 1.2rem 1.4rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.play .when { font-family: var(--f-mono); font-size: .74rem; color: var(--gold-dim); padding-top: .2rem; }
.play .what { color: var(--soft); font-size: .95rem; }
.play .what b { color: var(--ink); }

/* ── 만드는 방식 ─────────────────────────────────────── */

.flow {
  font-family: var(--f-mono);
  font-size: .8rem;
  line-height: 2.2;
  color: var(--soft);
  background: var(--room);
  border-left: 3px solid var(--gold-dim);
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0 0;
  overflow-x: auto;
  white-space: pre;
}

/* ── 일정 ───────────────────────────────────────────── */

.dates { border-top: 1px solid var(--rule); margin-top: .5rem; }
.date {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.date dt { font-family: var(--f-mono); font-size: .78rem; color: var(--gold-dim); font-variant-numeric: tabular-nums; }
.date dd { margin: 0; color: var(--soft); }

.small { font-size: .86rem; color: var(--faint); max-width: var(--measure); }

/* ── 마무리 ─────────────────────────────────────────── */

.close { text-align: left; padding: 5rem 0 6rem; }
.close h2 { max-width: 18ch; }

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--faint);
  line-height: 2;
}

@media (max-width: 34rem) {
  .play { grid-template-columns: 1fr; gap: .1rem; }
  .date { grid-template-columns: 1fr; gap: .1rem; }
}

/* ── 머리 ───────────────────────────────────────────── */
/* 두 페이지가 같은 머리를 쓴다: 왼쪽 로고, 가운데 페이지 둘, 오른쪽 채널 셋. */

.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
}

/* 로고는 남색 글자에 금색 해라 어두운 판 위에서는 글자가 묻힌다. 색을 뒤집고
 * 색상환을 반 바퀴 돌리면 남색은 크림색이 되고 금색은 금색으로 돌아온다 -
 * 어두운 판용 로고를 따로 그리기 전까지의 방법이다. */
.brand { display: block; line-height: 0; }
.brand img { height: clamp(28px, 4vw, 40px); width: auto; filter: invert(1) hue-rotate(180deg); }

.social { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center; width: 3.9rem; height: 3.9rem;
  color: var(--soft); border: 1px solid rgba(239, 237, 229, .18); border-radius: 50%;
  transition: color .15s, border-color .15s;
}
.social a:hover, .social a:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.social svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ── 사업자 정보 (Tools/web_footer.py 가 모든 페이지 아래에 넣음, 2026-10-17) ── */

footer.biz {
  border-top: 1px solid var(--rule);
  padding: 2rem 1.25rem 3rem;
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--faint);
  word-break: keep-all;
}
.biz-in { max-width: 44rem; margin: 0 auto; }
.biz-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .6rem; }
.biz-links a { color: var(--soft); text-decoration: none; }
.biz-links a:hover { color: var(--ink); }
footer.biz p { max-width: none; margin: 0; color: var(--faint); }
.biz-who { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.biz-who b { font-weight: 400; color: var(--soft); margin-right: .3rem; }
.biz-who a { color: var(--faint); }
footer.biz .biz-mark { margin-top: .5rem; font-size: .76rem; }