/* ==========================================================================
   변형 D · E · F
   --------------------------------------------------------------------------
   A·B·C 는 사실 한 디자인의 설정값 세 개였다. 전부 흰 바탕에 같은 단 구조,
   괘선 위치와 글자 굵기만 달랐다. 여기 셋은 '구성'을 바꾼다.

   D bleed    — 사진이 화면 끝까지 간다. 잡지 펼침면.
   E midnight — 먹 바탕. 사진만이 빛난다. 저녁 예식.
   F margin   — 라벨을 왼쪽 여백에 세운다. 날짜는 화면 밖으로 흘러 잘린다.

   사진 경로는 js/main.js 가 --photo-1 … --photo-8 로 올려 둔다.
   마크업은 여전히 하나다.
   ========================================================================== */

/* ==========================================================================
   D — BLEED · 사진이 지면을 연다
   ========================================================================== */
[data-theme='bleed'] {
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-label: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-num: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --fs-title: 1.5rem;
  --fs-date: 3.25rem;
  --fs-count: 1.5rem;
  --ls-label: 0.26em;
  --sec: 3.5rem;
}
[data-theme='bleed'] .sec,
[data-theme='bleed'] .foot { text-align: left; }
/* 사진이 장을 가르므로 괘선은 없앤다. motion.css 가 그리는 선까지 꺼야
   실제로 사라진다 — border 만 지우면 그 선은 그대로 남는다. */
[data-theme='bleed'] .sec + .sec { border-top: 0; }
[data-theme='bleed'] .sec + .sec[data-reveal='rule']::before { display: none; }
[data-theme='bleed'] .label { font-weight: 600; color: var(--ink); font-size: 0.625rem; }
[data-theme='bleed'] .title { font-weight: 700; letter-spacing: -0.04em; }

/* 표지 — 사진이 화면을 가득 채우고 그 아래에서 글이 시작된다 */
[data-theme='bleed'] .hero {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  padding: calc(56vh + 2.75rem) var(--gutter) var(--sec);
}
[data-theme='bleed'] .hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 56vh;
  background: var(--photo-1) center 28% / cover no-repeat;
  background-color: var(--fill);
}
/* 사진 아래 끝을 종이로 녹인다 — 자른 자국이 나지 않게 */
[data-theme='bleed'] .hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(56vh - 5rem);
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
[data-theme='bleed'] .hero > * { position: relative; }
[data-theme='bleed'] .names__row { justify-content: flex-start; }
[data-theme='bleed'] .names__name { font-weight: 700; letter-spacing: -0.03em; }
[data-theme='bleed'] .cue { margin-left: 0; }

/* 날짜 — 숫자가 지면을 가른다 */
[data-theme='bleed'] .date__big { font-weight: 800; letter-spacing: -0.05em; }
[data-theme='bleed'] .cal { margin-left: 0; max-width: 100%; border-width: 2px 0 0; border-color: var(--ink); }
[data-theme='bleed'] .count { justify-content: flex-start; }
[data-theme='bleed'] .count__num { font-weight: 700; }

/* 사진과 지도는 지면 밖으로 나간다 */
[data-theme='bleed'] .maps,
[data-theme='bleed'] .gal__stage { margin-inline: calc(-1 * var(--gutter)); }
[data-theme='bleed'] .gal__thumbs { margin-top: 0.75rem; }
[data-theme='bleed'] .map img { border: 0; }

[data-theme='bleed'] .tabs { margin-left: 0; border-radius: 0; }
[data-theme='bleed'] .tab,
[data-theme='bleed'] .btn { border-radius: 0; }
[data-theme='bleed'] .acct__card { text-align: left; border-width: 0 0 1px; padding-inline: 0; }
[data-theme='bleed'] .acct__who,
[data-theme='bleed'] .acct__line { justify-content: flex-start; }
[data-theme='bleed'] .acct__copy { margin-left: auto; }

/* ==========================================================================
   E — MIDNIGHT · 먹 바탕, 사진만이 빛난다
   ========================================================================== */
[data-theme='midnight'] {
  --paper: #0b0b0d;
  --ink: #f4f1ea;
  --ink-2: #b4afa5;
  --ink-3: #75706a;
  --rule: #23232a;
  --fill: #16161a;

  --font-display: 'Gowun Batang', 'Apple SD Gothic Neo', serif;
  --font-num: 'Cormorant Garamond', 'Gowun Batang', serif;
  --fs-date: 3rem;
  --lh-body: 1.95;
}
[data-theme='midnight'] body { background: var(--paper); }
[data-theme='midnight'] .title,
[data-theme='midnight'] .names__name { font-family: var(--font-display); font-weight: 400; }
[data-theme='midnight'] .invite { color: var(--ink-2); }
[data-theme='midnight'] .date__big { font-weight: 300; letter-spacing: 0.03em; }

/* 흑백 약도는 그대로 두면 지면을 태운다. 뒤집어서 먹 위의 흰 선으로 만든다. */
[data-theme='midnight'] .map img { filter: invert(1); }

/* 사진은 유일한 빛이다. 가장자리를 눌러 종이에서 떠 보이게 한다. */
[data-theme='midnight'] .gal__item,
[data-theme='midnight'] .gal__thumb { background: var(--fill); }
[data-theme='midnight'] .gal__item img { filter: brightness(0.96) contrast(1.02); }
/* difference 합성은 밝은 바탕을 전제한 것이라 먹 위에서 사라진다 */
[data-theme='midnight'] .gal__arrow {
  mix-blend-mode: normal;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
[data-theme='midnight'] .acct__card { border-color: var(--rule); background: var(--fill); }
[data-theme='midnight'] .tabs { border-color: var(--rule); }
[data-theme='midnight'] .tab[aria-selected='true'] { background: var(--ink); color: var(--paper); }
[data-theme='midnight'] .btn { border-color: var(--ink-3); }
[data-theme='midnight'] .btn:hover { background: var(--ink); color: var(--paper); }
[data-theme='midnight'] .acct__copy { border-color: var(--rule); }

/* ==========================================================================
   F — MARGIN · 라벨을 여백에 세운다
   ========================================================================== */
[data-theme='margin'] {
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-label: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-num: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --ls-label: 0.34em;
  --sec: 4.5rem;
  --rail: 2.75rem;          /* 라벨이 서 있는 왼쪽 띠 */
}
[data-theme='margin'] .sec,
[data-theme='margin'] .foot { text-align: left; }
[data-theme='margin'] .sec { position: relative; padding-left: var(--rail); }
[data-theme='margin'] .foot { padding-left: var(--rail); }

/* 라벨은 눕지 않고 선다. 본문은 그만큼 안으로 들어간다. */
[data-theme='margin'] .label {
  position: absolute;
  left: 0;
  top: var(--sec);
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink);
}
/* 라벨 옆으로 세로선 하나 — 본문이 어디서 시작하는지 알려준다 */
[data-theme='margin'] .sec::after {
  content: '';
  position: absolute;
  left: calc(var(--rail) - 1.25rem);
  top: var(--sec);
  bottom: var(--sec);
  width: 1px;
  background: var(--rule);
}
[data-theme='margin'] .sec + .sec { border-top: 0; }

[data-theme='margin'] .title { font-weight: 600; letter-spacing: -0.035em; }
[data-theme='margin'] .names__row { justify-content: flex-start; }
[data-theme='margin'] .names__name { font-weight: 700; letter-spacing: -0.03em; }
[data-theme='margin'] .cue { margin-left: 0; }

/* 날짜는 지면보다 크다. 오른쪽 끝에서 잘린다 — 마스크 창이 화면 끝까지
   늘어나므로 넘쳐 흐르지 않고 정확히 화면 모서리에서 끊긴다. */
[data-theme='margin'] .date__big {
  font-size: 19vw;
  font-weight: 800;
  letter-spacing: -0.06em;
  white-space: nowrap;
  margin-right: calc(-1 * var(--gutter));
}
[data-theme='margin'] .cal { margin-left: 0; max-width: 100%; }
[data-theme='margin'] .count { justify-content: flex-start; }
[data-theme='margin'] .count__num { font-weight: 700; letter-spacing: -0.03em; }

[data-theme='margin'] .tabs { margin-left: 0; border-radius: 0; }
[data-theme='margin'] .tab,
[data-theme='margin'] .btn { border-radius: 0; }
[data-theme='margin'] .acct__card { text-align: left; }
[data-theme='margin'] .acct__who,
[data-theme='margin'] .acct__line { justify-content: flex-start; }
[data-theme='margin'] .acct__copy { margin-left: auto; }

/* 좁은 화면에서는 띠를 줄인다 — 본문 폭이 먼저다 */
@media (max-width: 22.5rem) {
  [data-theme='margin'] { --rail: 2.25rem; }
  [data-theme='margin'] .date__big { font-size: 17vw; }
}