/* 성경 방탈출 · 소개 페이지
 *
 * 2026-10-24: 홈(index.html)과 같은 브랜드 색의 밝은 판으로 바꿨습니다.
 *   주 #F7B267 · 보조 #ECDFDF · 강조 #DADC89 · 바탕 #F8F7F7, 글자 짙은 밤색 #3A2E2C
 * 예전 어두운 판의 색 이름(--night, --gold, --soft …)은 그대로 두고 밝은 값을 넣었습니다.
 * 페이지 안의 var(--gold) 같은 것들이 고치지 않아도 새 판에 맞게 보입니다.
 * 바꾸기 전: docs/unused/web_2026-10-24/styles-before-brand.css
 */

:root {
  --brand:      #F7B267;  /* 주 */
  --brand-deep: #D48E45;  /* 주색 단추의 그림자 */
  --sub:        #ECDFDF;  /* 보조 */
  --accent:     #DADC89;  /* 강조 */
  --ink-deep:   #29201F;  /* 아래 띠 */
  --on-ink:     #EFE6E4;
  --on-ink-soft:#CBBDBA;

  --night:   #F8F7F7;   /* 바탕 */
  --room:    #FFFFFF;   /* 카드 */
  --raised:  #F6EFEF;
  --ink:     #3A2E2C;   /* 글자 */
  --soft:    #5E504C;
  --faint:   #7A6A66;
  --rule:    #E6DAD9;
  --gold:    #9C5410;   /* 링크와 소제목 (예전 금색 자리, 바탕 위 대비 5.3:1) */
  --gold-dim:#8E5A2E;   /* 작은 이름표 */
  --moss:    #6F7A2A;

  /* 함렛: 획이 또렷한 요즘 명조. 제목과 숫자. 고운돋움: 둥글고 조용한 본문 활자.
   * 작은 이름표도 고운돋움을 자간 벌려 쓴다 - 모노스페이스 이름표는 이 이야기의 것이 아니다. */
  --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(247, 178, 103, .26), 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(--brand);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding: .85rem 1.6rem;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--brand-deep);
  transition: background .15s ease;
}
.button:hover { background: #F9C287; }

.button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: none;
  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; }

.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(58, 46, 44, .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 {
  background: var(--ink-deep);
  padding: 2rem 1.25rem 3rem;
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--on-ink-soft);
  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(--on-ink); text-decoration: none; }
.biz-links a:hover { color: #FFFFFF; }
.biz-links a b { color: #FFFFFF; }
footer.biz p { max-width: none; margin: 0; color: var(--on-ink-soft); }
.biz-who { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.biz-who b { font-weight: 400; color: var(--on-ink); margin-right: .3rem; }
.biz-who a { color: var(--on-ink-soft); }
footer.biz .biz-mark { margin-top: .5rem; font-size: .76rem; }