/* ══════════════════════════════════════════════════════════════════════════
   Closer — 로그인 앞 페이지 · 「작업대」

   2026-08-26 에 **통째로 다시 짰다.** 옛 판이 「올드하다」는 지적을 받았고,
   시안 셋(법전·봉인·작업대) 중 사용자가 **작업대**를 골랐다.

   ── 옛 판의 무엇이 옛것이었나 (진단) ────────────────────────────────────
   ① **가짜 브라우저 창틀**(동그라미 셋). 제품을 액자에 넣던 시절의 표시다
   ② **반투명 카드 + 1px 테두리**가 화면마다 반복. 지금은 테두리를 거의 안 쓴다
   ③ **밝은 앱 화면이 어두운 와인색 위에 떠 있었다.** `shots/*.png` 는 크림색인데
      바탕이 버건디라 그림만 붕 떴다 — 가장 큰 이물감이 이것이었다
   ④ **전부 가운데 정렬.** 읽을 게 적을 때만 통하는 배치다
   ⑤ **버건디 한 겹이 화면 전체.** 색이 강한 게 아니라 **눈이 쉴 곳이 없었다**

   ── 이 판이 하는 것 ────────────────────────────────────────────────────
   ① **첫 화면에 제품이 크게.** 왼쪽은 문장과 단추, 오른쪽은 실제 작업 화면이
      오른쪽 끝까지 흘러 나간다 — 자르는 것이 곧 「더 있다」는 신호다
   ② **절마다 한 화면.** 기능 다섯은 세로 갈피로 접고, 보안은 사다리와 카드를
      나란히. 끝까지 보는 데 스크롤 몇 번이면 된다
   ③ **테두리 대신 흰 면과 아주 옅은 그림자**
   ④ **밝다** — 스크린샷이 페이지의 일부가 된다

   ── 🔵 색은 **아직 안 정했다.** 지금은 밝게 가 보는 중이다 ────────────────
   사용자가 「작업대는 버건디를 잃었다」고 짚었고, 이어서 **「일단 버건디 없이
   예시로 가보고, 완성 후에 다시 고려하자」**고 정했다 (2026-08-26).

   그래서 **억지로 버건디를 넣지 않았다.** 대신 **되돌릴 수 있게** 짰다 —
   아래 「팔레트」 절의 원색 열 개만 바꾸면 화면 전체가 갈아입혀진다.
   🔴 **이 파일에 색 리터럴은 그 열 개뿐이다.** 나머지는 전부 토큰을 참조한다.
      새 색을 아래가 아닌 곳에 적으면 그 순간 갈아입히기가 깨진다.
   갈아입히는 법과 **실제로 검증한 버건디 값**은 「팔레트」 절 안에 적어 뒀다.

   ⚠️ **로그인 화면(`server/authweb.py` 의 `_PAGE`)은 버건디 그대로다.**
      지금은 문 앞과 로그인의 톤이 **일부러 어긋나 있다** — 색을 확정한 뒤
      한꺼번에 맞춘다. 둘을 지금 억지로 맞추면 양쪽 다 어정쩡해진다
      (사용자 결정 2026-08-26). 그러니 여기를 고쳤다고 저기를 따라 고치지 마라.

   ── 글꼴 — CDN 없음. 자체 호스팅 파일만 ─────────────────────────────────
   의뢰인 자료를 다루는 서비스라 문 앞 페이지부터 밖으로 나가지 않는다.
     · 세리프 `CloserSerif` → Nanum Myeongjo. ⚠️ 2026-08-26 정정: 랜딩만
       **잘라 쓰므로**(`closer-serif.woff2`) 로그인과 파일을 더는 공유하지 않는다 —
       대신 랜딩이 524KB 대신 73KB 만 받는다. 아래 `@font-face` 머리말 참조
     · 🔴 **세리프는 인장에만** — `.wordmark` 와 `.tag` 둘뿐이다.
       제목까지 명조로 두니 화면 전체가 옛날 문서처럼 보였다 (사용자 2026-08-25).
       「올드하다」는 지적이 바로 그 지점이라 이 판도 제목은 Pretendard 다
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 **랜딩만 잘라 쓴다.** 첫 화면이 4.4MB 였고 그중 2.5MB 가 글꼴이었다
   (실측 2026-08-26). 이 세 쪽은 글이 저장소 안에 다 있어 안전하게 자를 수 있다.

     PretendardVariable  2,009KB → closer-ui     436KB
     NanumMyeongjo-Reg     524KB → closer-serif   73KB

   🔴 **로그인(`authweb.py`)과 앱(`web/src/index.css`)은 통짜 그대로 둔다** —
      거기엔 사무실 이름·의뢰인 이름·한자가 온다. 잘랐다가 두부(□)가 나면
      그건 글꼴 문제가 아니라 사고다.

   ⚠️ **문구를 고치면 다시 잘라야 한다** — `tools/landing-fonts.py`.
      `--check` 가 두부 날 글자를 잡는다 (배포 전에 돈다). */
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/closer-ui.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* 세리프는 인장(`.wordmark`·`.tag`)에만 — 그래서 굵은 판이 필요 없다.
   전에 걸어 둔 Bold 는 **쓰이지 않아 받아지지도 않았다** (실측) */
@font-face {
  font-family: "CloserSerif";
  src: url("/fonts/closer-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ══ 팔레트 — **여기만 바꾸면 옷이 갈아입혀진다** ═══════════════════════════

   이 파일에서 색 리터럴이 적히는 곳은 **아래 열 줄뿐이다.** 그 밖의 모든 색은
   여기서 파생된다(선·틴트·그림자는 `color-mix` 로 잉크/강조에 알파를 먹인 것).
   그래서 테마를 갈아입히는 일은 **열 줄을 고치는 일**이다.

   ── 버건디로 되돌리는 법 (실제로 적용해 렌더·명암비까지 확인한 값) ──────────
       --c-bg:        #2A0A0F     --c-ink:       #F7E9E3
       --c-bg-2:      #1E070B     --c-ink-2:     #D5BEB8
       --c-panel:     #3A1219     --c-ink-3:     #A98D88
       --c-accent:    #E8B98A     --c-on-dark:   #2B1114
       --c-gold:      #D8B784     --c-on-dark-2: #6B4A3E
   ⚠️ 뒤집을 때 **`--c-on-dark` 두 개도 같이 뒤집어야 한다.** 이 둘은
      「짙은 면 위의 글자」다 — 바닥(`.foot`)과 단추(`.cta`)가 그 면이다.
      밝은 테마에서는 흰 글자, 어두운 테마에서는 **어두운 글자**가 된다.
      이걸 안 바꾸면 바닥이 흰 바탕에 흰 글자가 된다 (실측으로 확인).
   ⚠️ HTML 세 곳의 `<meta name="theme-color">` 도 같이 바꾼다 —
      `index.html` · `privacy.html` · `terms.html`. CSS 가 못 미치는 자리다.
   ⚠️ 그때 `color-scheme` 도 `light` → `dark` 로 (같은 세 파일 + 아래 `:root`).

   괄호 안은 명암비 실측 (WCAG 상대휘도, `--bg` 위) */
:root {
  /* ── 원색 열둘. **색을 바꾸려면 여기만** ──────────────────────────────

     2026-08-26 「면」으로 갈아입혔다 (시안 셋 중 사용자 선택).
     바꾼 것은 둘이다:
       ① 종이가 **중성 회색에서 장밋빛으로** — 브랜드가 바탕에도 있다
       ② 짙은 면이 **검정에서 버건디로** — 머리띠·단추·바닥이 그 면이다

     ⚠️ 옛 값(중성)을 지우지 않고 남긴다. 무엇이 뒤집혔는지가 정보다:
        --c-bg #FAFAFB · --c-bg-2 #F1F2F4 · --c-ink #15171B · --c-ink-2 #545A63
        --c-ink-3 #858B95 · --c-accent #7A1622 · --c-on-dark #FFFFFF
        --c-on-dark-2 #B9BEC7 · 짙은 면 = var(--ink) (거의 검정)          */
  /* 🔴 **종이는 다섯 단이다** (2026-09-08). 옛 판은 한 화면에 **세 온도**가
     섞여 있었다 — 종이 45°(복숭아) · 버건디 사다리 4~20° · 글자 359~13°.
     사다리 안에서도 16° 를 표류했다. 전부 **21~26° 한 줄기**로 모았다.
     ⚠️ 옛 값을 지우지 않고 남긴다 — 무엇이 뒤집혔는지가 정보다 */
  --paper-0: #FEFBFA;   /* L.990 — 떠오른 면. 흰색을 대신한다 (옛 #FFFFFF) */
  --paper-1: #FBF1F0;   /* L.966 — 종이 · 닫는 말 (옛 --c-bg #F9F2EF) */
  --paper-2: #F7E9E8;   /* L.945 — 반 단계 아래 · 기능 절 */
  --paper-3: #F1DEDD;   /* L.916 — 가라앉은 띠 · 보안 장 (옛 --c-bg-2 #EEDFDA) */
  --paper-4: #EBD2D2;   /* L.884 — 예비 */
  --c-bg:        var(--paper-1);
  --c-bg-2:      var(--paper-3);
  --c-panel:     var(--paper-0);
  --c-ink:       #201212;   /* 본문 (옛 #1C1214) — 종이 쪽으로 끌어왔다 */
  --c-ink-2:     #5A4243;   /* 보조 (옛 #54464A) · 명암비 8.07 → 8.25 로 **올랐다** */
  --c-ink-3:     #95787A;   /* 옅은 표시 (옛 #8E8081) · 3.42 → 3.61 */
  --c-accent:    #6B121E;   /* 종이 위의 버건디 — 🔴 **표제 글자가 이 색이다** */

  /* 🔴 **버건디 계조.** 「낙관」의 핵심이 이것이다 — 단색이 아니라 **단계**로 쓴다.
     띠·그라데이션·겹침이 전부 이 사다리 위에서 만들어진다 */
  /* 전부 15°±1 에 세웠다. 중간 두 단은 채도를 올렸다 (2026-09-08)
     옛 값: w90 #5F1120 · w80 #8A3040 · w60 #A85F6C · w40 #C99AA3
            w20 #E9D5D9 · deep #2A0A11 */
  --c-w90:  #600F1F;   --c-w80: #8C2E3C;
  --c-w60:  #B25F67;   --c-w40: #D49B9F;   --c-w20: #EED3D4;
  --c-deep: #2A090F;   /* 가장 깊은 곳 — 낙관 안쪽·바닥 */

  --c-field:     #4A121A;   /* 깔리는 면 */
  --c-field-2:   #5E1E22;   /* 면 위에서 한 겹 뜬 것 — 눌림·hover */
  --c-on-dark:   #F7E9E7;   /* **면 위의 글자** (옛 #F7E9E3) */
  --c-on-dark-2: #DEC3C1;   /* 면 위의 보조 글자 (옛 #DCC4BE) */
  /* 🔴 고리는 **브랜드 자산이다.** 테마와 함께 바뀌지 않는다 —
     `brand/logo.svg`·파비콘·로그인 화면이 같은 금색을 쓴다.
     ⚠️ 보안 절에서는 이 색을 **열쇠에만** 쓴다 (그 절의 장치다) */
  --c-gold:      #A8763C;

  /* ── 여기부터는 위에서 나온다. **손대지 않는다** ────────────────────── */
  --bg:     var(--c-bg);
  --bg-2:   var(--c-bg-2);
  --panel:  var(--c-panel);
  --ink:    var(--c-ink);
  --ink-2:  var(--c-ink-2);
  --ink-3:  var(--c-ink-3);
  --wine:   var(--c-accent);
  --w90: var(--c-w90);  --w80: var(--c-w80);  --w60: var(--c-w60);
  --w40: var(--c-w40);  --w20: var(--c-w20);  --deep: var(--c-deep);
  --field:   var(--c-field);
  --field-2: var(--c-field-2);
  --gold:   var(--c-gold);
  --on-dark:   var(--c-on-dark);
  --on-dark-2: var(--c-on-dark-2);

  /* 선·틴트 — 잉크와 강조에 알파를 먹인 것. 밑색이 바뀌면 **저절로 따라온다** */
  --line:   color-mix(in srgb, var(--c-ink)     7%, transparent);
  --line-2: color-mix(in srgb, var(--c-ink)    13%, transparent);
  --hover:  color-mix(in srgb, var(--c-ink)     4%, transparent);
  --sunken: color-mix(in srgb, var(--c-ink)     3%, transparent);
  --tint:   color-mix(in srgb, var(--c-accent) 10%, transparent);
  --tint-2: color-mix(in srgb, var(--c-accent)  6%, transparent);
  /* 떠 있는 막대의 반투명 바탕. 뒤가 비쳐야 하므로 알파를 남긴다 */
  --bar-bg: color-mix(in srgb, var(--c-bg)     85%, transparent);

  /* 그림자 — **테두리를 대신한다.** 상자를 그리지 않고 면을 띄운다 */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--c-ink) 5%, transparent);
  --sh-2: 0 2px 4px color-mix(in srgb, var(--c-ink) 4%, transparent),
          0 10px 24px -12px color-mix(in srgb, var(--c-ink) 15%, transparent);
  --sh-3: 0 2px 6px color-mix(in srgb, var(--c-ink) 5%, transparent),
          0 28px 60px -28px color-mix(in srgb, var(--c-ink) 25%, transparent);

  /* 간격 — 9단. **그 밖의 값은 쓰지 않는다** */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 40px; --s7: 64px; --s8: 96px; --s9: 128px;

  --r-1: 5px; --r-2: 10px; --r-3: 16px; --r-4: 999px;
  --t-fast: 140ms cubic-bezier(.2, 0, 0, 1);

  --w-shell: 1240px;
  --w-text:  34em;      /* 읽는 글 한 줄 ≈ 한글 40자 */
  --pad:     clamp(20px, 4.4vw, 48px);

  color-scheme: light;
}

/* ── 바닥 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 16px/1.72 "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 🔴 한글은 **낱자 사이 아무 데서나 끊긴다.** 기본값이면 「그대로 사 / 람이
     합니다」처럼 단어 한가운데가 갈라진다 (실측으로 확인). `keep-all` 은
     띄어쓰기에서만 끊게 한다 — 한글 웹 타이포의 기본기다. */
  word-break: keep-all;
  /* 위와 한 쌍. `keep-all` 만 켜면 끊을 데 없는 긴 토큰(URL·파일명)이 상자를
     뚫고 나간다. 이 페이지에서 가로 스크롤이 생기면 그건 버그다 —
     숨기지 않고 **안 만든다.** */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
svg { display: block; max-width: 100%; }
img { display: block; max-width: 100%; }

/* 포커스 — **조작 가능한 모든 것에 같은 모양으로.** `_PAGE` 와 같은 값 */
:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; border-radius: var(--r-1); }

.skip {
  position: absolute; left: var(--s4); top: calc(-1 * var(--s8)); z-index: 30;
  padding: var(--s3) var(--s4);
  background: var(--field); color: var(--on-dark);
  border-radius: var(--r-2); text-decoration: none;
  transition: top var(--t-fast);
}
.skip:focus-visible { top: var(--s4); }

.shell {
  width: 100%; max-width: var(--w-shell);
  margin-inline: auto; padding-inline: var(--pad);
}
/* 세로로 쌓는 칸. **열 트랙을 묶는다** — 안 묶으면 내용의 최소폭까지 자란다
   (`web/src/index.css` 「배치 원시형」의 `.u-pane` 과 같은 불변식) */
.pane { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }

/* ── 인장 ──────────────────────────────────────────────────────────────
   고리 = `server/static/brand/logo.svg` 를 그대로 옮긴 것.
   ⚠️ **틈은 12시 정각**이고 닫히지 않은 것이 뜻이다 (아직 끝나지 않은 사건).
      메우거나 옮기지 마라.

   워드마크의 `text-indent` 는 오타가 아니다: 자간을 벌리면 **마지막 글자
   뒤에도 자간이 붙어** 상자 오른쪽에 빈칸이 남는다. 가운데 정렬한 글이
   왼쪽으로 밀려 보이는데, 같은 값만큼 들여쓰면 광학 중심이 맞는다.
   `_PAGE` 의 `h1` 과 같은 처리다. */
.ring { color: var(--gold); }
.ring circle { stroke: currentColor; }

.wordmark {
  font-family: "CloserSerif", serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .3em; text-indent: .3em;
  line-height: 1.15; color: var(--ink); white-space: nowrap;
}
.tag {
  font-family: "CloserSerif", serif;
  font-style: italic;   /* 이 서체에 이탤릭 자족이 없어 브라우저가 기울인다.
                           `_PAGE` 도 같다 — 두 화면이 같아야 하므로 맞춘다 */
  color: var(--wine); letter-spacing: 0; text-indent: 0;
}
/* 🔴 히어로가 **짙은 판**이다. 위 두 값은 종이 위에 놓였을 때의 것이라
   그대로 두면 인장이 바탕에 묻혀 **안 보인다** (실측: 판 위 1.4:1).
   판 안의 것만 뒤집는다 — 약관·방침 쪽은 여전히 종이 위다 */
.hero .wordmark { color: var(--on-dark); }
.hero .tag { color: var(--w40); }

/* ── 머리 — 떠 있는 알약 ───────────────────────────────────────────────
   선을 화면 끝까지 긋지 않는다. 떠 있는 막대 하나가 따라온다.
   안여백은 **줄이 아니라 링크가** 갖는다 — 그래야 손가락 타깃이 40px 이 된다 */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: var(--s3) var(--pad) 0;
  pointer-events: none;   /* 막대 밖의 빈 자리는 클릭을 통과시킨다 */
}
/* 🔴 **짙은 유리다.** 알약이 「지평」 판 안에 있으므로 뒤는 언제나 `--deep` 이다.
   밖에 두고 반투명을 쓰면 뒤가 종이색이라 **탁한 회보라 막대**가 된다
   (실측 rgb 130,107,109). 판 안에 두는 것과 이 배경은 **한 쌍이다**

   ⚠️ **`.top` 으로 좁혀 둔다.** `.bar` 는 기능 절의 **진행 실선**도 쓰는
      이름이다 (`.rail .bar`) — 좁히지 않으면 여기서 준 테두리·안여백·그림자가
      그 2px 실선 위로 샌다. 이름이 겹치는 것을 발견해 2026-08-28 에 좁혔다 */
.top .bar {
  pointer-events: auto;
  width: 100%; max-width: calc(var(--w-shell) - var(--pad));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--s3); min-width: 0;
  padding: 5px 8px 5px var(--s4);
  background: color-mix(in srgb, var(--deep) 58%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  border-radius: var(--r-4);
  box-shadow: 0 10px 30px -20px #000;
}
.top .bar .wordmark { color: var(--on-dark); }
.brand {
  display: flex; align-items: center; gap: 10px;
  flex: none; min-height: 40px; text-decoration: none;
}
.brand .ring { width: 18px; height: 18px; flex: none; }
.brand .wordmark { font-size: 13.5px; letter-spacing: .24em; text-indent: .24em; }

/* 「비공개 시범」 — 머리에 둔다. 히어로에 두면 고리가 그려지는 장면을 방해한다 */
.pill {
  padding: 2px 9px; border-radius: var(--r-4);
  background: color-mix(in srgb, var(--on-dark) 13%, transparent); color: var(--on-dark);
  font-size: 11.5px; font-weight: 600; line-height: 1.7; white-space: nowrap;
}

.topnav {
  display: flex; align-items: center; gap: var(--s1);
  flex: 1 1 auto; min-width: 0; justify-content: flex-end;
}
.topnav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding-inline: var(--s3);
  font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; border-radius: var(--r-4);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.topnav a { color: var(--on-dark-2); }
.topnav a:hover { color: var(--on-dark); background: color-mix(in srgb, var(--on-dark) 10%, transparent); }
/* 🔴 짙은 면 위에서는 **단추가 종이색이다.** 버건디 면에 버건디 단추를 놓으면
   사라진다 — 종이 알약 + 버건디 글자로 10.97:1 이 나온다 (실측) */
.topnav a.go { background: var(--bg); color: var(--wine); font-weight: 650; padding-inline: var(--s4); }
.topnav a.go:hover { background: #fff; color: var(--wine); }
/* 좁아지면 순서대로 접는다. 접힌 내용은 본문에 그대로 있다 */
@media (max-width: 620px) { .topnav a:not(.go) { display: none; } .pill { display: none; } }

/* ══ 히어로 「지평」 ══════════════════════════════════════════════════════
   2026-08-28 에 갈아 끼웠다 (시안 다섯 중 사용자 선택 · `docs/시안/히어로-버건디/`).

   위는 짙은 버건디 **판**, 아래는 **땅**(종이), 사이에 **금색 실선 하나.**
   제품 화면을 `--rise` 만큼 끌어올려 그 선을 **가로지르게** 한다.

   🔴 왜 이 짓을 하나 — 우리 앱 화면이 **크림색**이다. 어두운 바탕에 그냥
      얹으면 그림만 붕 뜬다. 그게 2026-08-26 에 어두운 판을 버린 이유였다.
      경계를 **숨기는** 대신 **드러내 놓고 꿰뚫으면**, 그림이 바탕 위의 손님이
      아니라 **화면의 구조**가 된다.

   쓴 계조: deep(맨 위) → field(52%) → w90(지평선 바로 위)
            지평선 아래 w20 → bg (땅에서 올라오는 여운)                    */

/* 땅 — 지평선 바로 아래가 가장 따뜻하고, 내려갈수록 종이가 된다 */
.hero { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--w20), var(--bg) 46%); }

/* 🔴 그림이 지평선 위로 올라가는 높이. **폭과 무관하게** 그림 높이의 대략
   1/3 이 되도록 vw 로 잡았다 (그림은 폭의 65% 높이를 갖는다) */
.hero { --rise: clamp(84px, 15vw, 238px); }

/* 🔴 아래 여백이 `--rise` 를 품는다. 그래야 그림이 올라와도 **글을 안 덮는다** —
   이걸 빼면 1440 에서 그림이 표제를 통째로 가린다 (실측) */
.plane {
  position: relative;
  /* ⚠️ 위 여백은 0 이다 — 머리 알약이 판 **안에** 있으므로 여기서 밀면
     알약까지 같이 내려간다. 글의 위 여백은 `.wrap` 이 갖는다 */
  padding: 0 0 calc(var(--rise) + clamp(var(--s5), 3vw, var(--s6)));
  background:
    radial-gradient(88% 70% at 12% 0%, color-mix(in srgb, var(--w80) 34%, transparent), transparent 68%),
    linear-gradient(180deg, var(--deep) 0%, var(--field) 52%, var(--w90) 100%);
  color: var(--on-dark);
}
/* 🔴 지평선 — 금색 실선 하나. 양 끝은 풀어 준다.
   ⚠️ 끝을 10% 에서 풀었더니 **폰에서 선이 안 보였다** — 390px 에서 그림이
      350px 를 먹어 남는 양쪽 20px 이 통째로 페이드 구간이었다. 3% 로 당긴다 */
.plane::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 3%, var(--gold) 97%, transparent);
}

.hero .wrap {
  max-width: var(--w-shell); margin-inline: auto; padding-inline: var(--pad);
  padding-top: clamp(var(--s6), 5vw, var(--s7));
}

/* 제호(masthead) 꼴 — 표제는 왼쪽 크게, 설명·단추는 오른쪽 아래에 붙는다 */
.head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.side {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4);
  min-width: 0; justify-items: start; align-content: end;
}
@media (min-width: 900px) {
  .head {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s6) clamp(var(--s6), 4vw, var(--s7));
    align-items: end;
  }
  .head .sigil { grid-column: 1 / -1; }
  .hero h1 { grid-column: 1; align-self: end; }
  .side { grid-column: 2; }
}

.sigil { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.ring.big { width: 48px; height: 48px; flex: none; }
.mark { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.wordmark.lg { font-size: 21px; }
.mark .tag { font-size: 12.5px; line-height: 1.5; }

/* 🔴 **표제가 판 위에 얹힌 종이색 글자다.** 「낙관」에서는 종이 위의 버건디
   글자였다 — 판을 깔았으니 뒤집힌다. 옛 값: `color: var(--wine)` + 금색 밑줄 */
.hero h1 {
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 750; line-height: 1.12; letter-spacing: -.035em;
  text-wrap: balance;
  color: var(--on-dark); min-width: 0;
}
/* 금색 획은 표제 밑이 아니라 **설명 위**로 옮겼다 — 제호 꼴에서 두 덩이를
   가르는 것이 이 선의 일이다 */
.lede {
  max-width: 30em; font-size: 17px; color: var(--on-dark-2); text-wrap: pretty;
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

.act { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); justify-items: start; }
.note { font-size: 14px; color: var(--on-dark-2); }
.note b { color: var(--on-dark); font-weight: 650; }

/* ── 단추 — `_PAGE` 의 `.google` 과 같은 값 ───────────────────────────── */
/* 🔴 **버건디 면 위에서는 단추가 종이색이다.** 면과 같은 색 단추는 사라진다 —
   옛 값(종이 위에 놓였을 때): `background: var(--field); color: var(--on-dark)` */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: var(--s3) var(--s6);
  background: var(--bg); color: var(--wine);
  border: 0; border-radius: var(--r-4);
  font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; flex: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 20px 44px -20px rgba(0, 0, 0, .7);
  transition-property: background-color, scale;
  transition-duration: var(--t-fast);
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.cta:hover { background: #fff; }
.cta:active { scale: .97; }
.cta svg { width: 18px; height: 18px; flex: none; }

/* ── 제품 액자 ─────────────────────────────────────────────────────────
   🔴 **가짜 브라우저 창틀을 그리지 않는다.** 세 개의 동그라미는 2020년의
   표시다. 흰 여백 한 겹과 그림자로 띄운다.

   🎬 **영상 자리.** `img` 와 `video` 가 **같은 규칙**을 받는다 —
      <video class="shot" muted playsinline autoplay loop poster="…"> 로
      갈아 끼우면 CSS 는 한 줄도 안 고쳐도 된다.
   ⚠️ 비율 1320×860 을 못박아 둔다. 다른 비율이 오면 페이지가 출렁인다 */
.frame {
  min-width: 0;
  padding: 7px; background: var(--panel);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
}
.frame .shot, .frame video {
  width: 100%; height: auto; aspect-ratio: 1320 / 860;
  object-fit: cover; object-position: top left;
  border-radius: 9px; background: var(--bg-2);
}
/* 🔴 **지평선을 밟고 선다.** 판 밖에 있으면서 `--rise` 만큼 판 안으로 들어간다.
   옛 배치(오른쪽으로 흘려보내기)는 「지평」에서 성립하지 않는다 — 좌우로 놓으면
   폭이 좁아질 때 그림 높이가 줄어 **금색 선이 그림 밖으로 빠진다** */
.hero-shot {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--rise));
  padding: 0 var(--pad) clamp(var(--s6), 6vw, var(--s8));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3);
  justify-items: center; min-width: 0;
}
.hero-shot .frame { width: 100%; max-width: 1060px; }
/* 🎬 히어로는 전체 영상(1920×1080) — 16:9 를 못박는다. 같은 비율이라 잘리는 곳도 띠도 없다 (기능 절은 1320×860 그대로) */
.hero-shot .frame .shot, .hero-shot .frame video { aspect-ratio: 16 / 9; }


@media (max-width: 640px) {
  .hero .ring.big { width: 42px; height: 42px; }
  .hero .cta { width: 100%; }
  .hero .lede { font-size: 16.5px; }
}

/* ── 절 ───────────────────────────────────────────────────────────────── */
.sect { padding-block: clamp(var(--s7), 7vw, 108px); }
.sect-head {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s3); max-width: 44rem;
  margin-bottom: clamp(var(--s5), 3.4vw, var(--s6));
}
/* 자간은 **라틴 대문자에만** 크게 준다. 한글은 낱자마다 이미 네모 칸을 꽉
   채우고 있어서, 워드마크처럼 벌리면 「기 능」으로 흩어져 읽힌다 */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .09em; color: var(--wine); text-transform: uppercase; }
.sect h2 {
  font-size: clamp(25px, 3.1vw, 40px);
  font-weight: 750; line-height: 1.18; letter-spacing: -.03em; text-wrap: balance;
}
.sub { color: var(--ink-2); font-size: 16px; text-wrap: pretty; }
.sub b { color: var(--ink); font-weight: 650; }

/* ── 기능 — 세로 갈피 + 한 자리 ────────────────────────────────────────── */
.switch {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s5); align-items: start;
}
@media (min-width: 940px) {
  .switch { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: var(--s6); }
}

.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
/* 좁으면 가로로 눕고 **자기 안에서** 민다 — 페이지가 옆으로 밀리면 안 된다 */
@media (max-width: 939px) {
  .rail {
    grid-auto-flow: column; grid-auto-columns: max-content;
    grid-template-columns: none;   /* layout-ok: 가로 갈피는 내용 폭대로 늘어서야 한다 */
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .rail::-webkit-scrollbar { display: none; }
}

.rail button {
  position: relative; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--s3); align-items: baseline;
  min-height: 48px; padding: var(--s3) var(--s4);
  background: transparent; border: 0; border-radius: var(--r-2);
  color: var(--ink-2); text-align: start; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.rail button:hover { background: var(--hover); color: var(--ink); }
.rail button.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-2); }
.rail .n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail button.on .n { color: var(--wine); }
.rail .t { font-size: 15.5px; font-weight: 600; white-space: nowrap; }

/* 지금 갈피가 얼마나 남았나 — 아래 실선이 찬다. 저절로 넘어가는 것을
   미리 알리는 유일한 신호다 (예고 없이 바뀌면 사람은 그걸 고장으로 읽는다) */
.rail .bar {
  grid-column: 1 / -1; height: 2px; margin-top: 6px;
  border-radius: 2px; background: var(--line); overflow: hidden;
  opacity: 0;
}
.rail button.on .bar { opacity: 1; }
.rail .bar i { display: block; height: 100%; width: 0; background: var(--wine); }
.rail button.on .bar i { animation: fill var(--dur, 6s) linear forwards; }   /* 🎬 영상이면 그 편의 길이 (demo.js) */
@keyframes fill { from { width: 0 } to { width: 100% } }
@media (prefers-reduced-motion: reduce) { .rail .bar { display: none; } }

.switch-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; }
/* 다섯이 겹쳐 쌓여 있고 한 장만 보인다. 비율을 못박아 두어서 넘길 때
   페이지가 출렁이지 않는다 — 찍은 크기 1320×860 */
.frame.big { position: relative; aspect-ratio: 1320 / 860; }
.frame.big .shot, .frame.big video {
  position: absolute; inset: 7px;
  /* 🔴 `auto` 가 아니다 — 절대 위치의 **대체 요소**(img·video)는 `width:auto` 면 inset 을 무시하고
     제 크기(1320px)로 선다. 영상으로 바꾸자 1440 에서 323px 넘치고, 폰에서는 넓어진 판 때문에
     「전체 영상」 창이 화면 밖으로 밀렸다 (2026-09-28 Playwright) */
  width: calc(100% - 14px); height: calc(100% - 14px);
  opacity: 0; transition: opacity .4s ease;
}
.frame.big .shot.on, .frame.big video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .frame.big .shot { transition: none; } }
/* 설명 높이를 미리 잡아 둔다 — 안 잡으면 갈피를 넘길 때마다 아래가 출렁인다 */
.cap { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; max-width: 52em; min-height: 3.4em; }

/* ── 보안 — 사다리와 카드가 나란히 ─────────────────────────────────────── */
/* ⚰️ `.sec { background: var(--bg-2) }` 를 지웠다 (2026-09-08).
   2026-08-28 `328994b` 에서 `<section class="sect sec" id="sec">` 가
   `<section class="bo-sec">` 로 바뀌며 **쓰는 요소가 0개**가 됐다.
   그 한 줄이 셋을 함께 떨어뜨렸다 — 띠 · 공통 절 규격 · 내비 앵커(`#sec`).
   띠는 아래 「절 리듬」에서 `.bo-sec` 로 되살렸다 */
.sec-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s5); align-items: start;
}
@media (min-width: 1060px) {
  .sec-grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--s5); }
}

.panel {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--panel); border-radius: var(--r-3);
  box-shadow: var(--sh-2); overflow: hidden;
}
.panel-head {
  padding: var(--s4) var(--s5);
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ladder { display: grid; grid-template-columns: minmax(0, 1fr); }
.ladder li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 22px);
  min-width: 0;
}
.ladder li + li { border-top: 1px solid var(--line); }
/* 표시는 **색만으로 알리지 않는다** — 글자가 이미 그 뜻을 말하고 있고,
   이건 눈이 줄을 세는 것을 돕는 표시일 뿐이다 */
.ladder li::before {
  content: ""; position: absolute;
  inset-inline-start: var(--s5); top: calc(var(--s4) + .62em);
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--wine); opacity: .85;
}
.ladder li:nth-child(n+4)::before { background: var(--gold); }
.ladder .who { font-size: 15px; font-weight: 650; color: var(--ink); }
.ladder .who em { font-style: normal; color: var(--wine); }
.ladder .how { font-size: 14px; color: var(--ink-2); line-height: 1.65; }

/* 카드 — 테두리 대신 흰 면. 「지우는 것이…」는 논지가 길어 두 칸을 쓴다 */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cell {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s2); align-content: start;
  padding: var(--s5);
  background: var(--panel); border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}
@media (min-width: 640px) { .cell.wide { grid-column: 1 / -1; } }
.cell h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.cell p { font-size: 14.5px; color: var(--ink-2); line-height: 1.72; text-wrap: pretty; }
.cell b { color: var(--ink); font-weight: 650; }
.cell.wide h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -.02em; }
.cell.wide p { font-size: 15.5px; }

/* ── 닫는 말 ───────────────────────────────────────────────────────────── */
.close { padding-block: clamp(var(--s7), 7vw, 108px); }
.close-card {
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center;    /* layout-ok: 한 열짜리 가운데 정렬 블록이다 */
  gap: var(--s4); text-align: center;
}
.close h2 {
  font-size: clamp(25px, 3.1vw, 40px); font-weight: 750;
  line-height: 1.18; letter-spacing: -.03em; text-wrap: balance;
}
.close p { max-width: var(--w-text); color: var(--ink-2); text-wrap: pretty; }
.close .cta { margin-top: var(--s2); }

/* ── 바닥 ─────────────────────────────────────────────────────────────── */
.foot { background: var(--field); color: var(--on-dark-2); font-size: 13.5px; line-height: 1.85; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s5); padding-block: var(--s7);
}
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
}
/* 손으로 띄우지 않는다 — 로고와 한 줄 설명 사이도 gap 이 만든다 */
.foot .pane { gap: var(--s2); justify-items: start; }
.foot .brand .wordmark { color: var(--on-dark); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.foot dt { color: var(--on-dark); font-weight: 650; margin-bottom: 4px; }
.foot .dim { opacity: .62; }
/* 🔴 안여백은 **줄이 아니라 링크가** 갖는다. 글자 높이(16px)가 그대로
   누를 수 있는 넓이가 되면 손가락으로 못 짚는다 — 44px 을 만든다 */
.foot a { display: inline-block; padding-block: 14px; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
/* 저작권 — 열이 아니라 **바닥 한 줄**이다. 열에 넣으면 그 열의 항목처럼 읽힌다 */
.foot-copy { grid-column: 1 / -1; font-size: 13px; }

/* ══ 등장 — 고리가 그려지고, 나머지는 한 덩어리로 ════════════════════════
   순서: **고리가 그려진다 → CLOSER 가 떠오른다 → 한 줄이 따라온다.**
   `_PAGE` 와 같은 시간표다. 영상(690KB)을 싣지 않은 이유: iOS 자동재생 규칙에
   걸리고, **`prefers-reduced-motion` 을 못 지킨다.**

   `pathLength="360"` 이라 dasharray 를 **도(°)로** 읽는다 —
   `340 360` 은 「340° 그리고 나머지는 비움」, 틈 20° 가 꼭대기에 남는다.

   표제 아래는 **한 덩어리로** 띄운다. 여덟 개를 하나씩 세우면 단추가
   보이기까지 3초가 걸린다 — 랜딩에서 그건 고장으로 읽힌다. */
.hero .ring.big circle {
  stroke-dasharray: 340 360; stroke-dashoffset: 340;
  animation: draw .95s cubic-bezier(.4, 0, .2, 1) .1s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero .mark, .hero h1, .hero .side {
  opacity: 0; animation: rise .6s ease-out forwards;
}
.hero .mark { animation-delay: .7s; }
.hero h1    { animation-delay: .85s; }
.hero .side { animation-delay: .98s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

/* 🔴 제품 화면은 **아래에서** 올라온다. 옛 판은 오른쪽에서 미끄러져 들어왔는데,
   「지평」에서는 그림이 지평선을 밟고 서는 것이 요점이라 **세로**여야 그 동작이
   읽힌다. ⚠️ `transform` 을 쓰므로 `margin-top: -rise` 와 겹치지 않는다 */
.hero-shot { opacity: 0; animation: slide .9s cubic-bezier(.2, .7, .2, 1) 1.05s forwards; }
@keyframes slide {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}

/* 🔴 움직임을 줄여 달라고 한 사람에게는 **처음부터 다 보인다.**
   영상으로는 못 하던 것이다 */
@media (prefers-reduced-motion: reduce) {
  .hero .ring.big circle { animation: none; stroke-dashoffset: 0; }
  .hero .mark, .hero h1, .hero .side, .hero-shot { animation: none; opacity: 1; }
  .cta:active { scale: 1; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ══ 약관·방침 같은 글 문서 ═══════════════════════════════════════════════
   `/terms` · `/privacy` 가 이 계열을 쓴다. 랜딩과 같은 세계이되 **읽는
   자리**다 — 히어로도 애니메이션도 없고, 글 폭을 좁혀 한 줄이 길어지지
   않게 한다.

   ⚠️ **두 문서의 글자는 한 자도 바꾸지 않았다.** 법적 문서라 모양만 맞춘다.
      쓰이는 이름: `.doc` `.doc-back` `.doc-when` `.doc-note` `.doc-table`
      `.doc-table-wrap` `.doc-foot` — 이 목록이 곧 계약이다. 이름을 지우면
      두 문서가 조용히 깨진다. */
.doc {
  max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 5rem;
  color: var(--ink); line-height: 1.78;
}
.doc-back {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-bottom: 1.4rem; font-size: .875rem; font-weight: 600;
  color: var(--wine); text-decoration: none;
}
.doc-back:hover { text-decoration: underline; }
.doc h1 {
  font-weight: 780; font-size: clamp(1.7rem, 5vw, 2.3rem);
  margin: 0 0 .5rem; letter-spacing: -.03em; line-height: 1.18;
}
.doc-when { color: var(--ink-3); font-size: .875rem; margin: 0 0 3rem; }
.doc-when b { color: var(--wine); font-weight: 650; }
.doc section { margin-bottom: 2.6rem; }
.doc h2 {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 .9rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-2);
}
.doc h3 { font-size: .95rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--wine); }
.doc p { margin: 0 0 1rem; color: var(--ink-2); text-wrap: pretty; }
.doc b { color: var(--ink); font-weight: 650; }
.doc ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-2); list-style: disc; }
.doc li { margin-bottom: .5rem; }
.doc a { color: var(--wine); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: var(--tint-2); color: var(--wine);
  padding: .12rem .4rem; border-radius: var(--r-1);
}
/* 표는 좁은 화면에서 **자기 안에서 민다** — 페이지가 옆으로 밀리면 안 된다 */
.doc-table-wrap, .doc section:has(> .doc-table) { overflow-x: auto; }
.doc-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  margin: 0 0 1rem; min-width: 30rem;
  background: var(--panel); border-radius: var(--r-2); overflow: hidden;
  box-shadow: var(--sh-1);
}
.doc-table th, .doc-table td {
  text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-2);
}
.doc-table th { color: var(--ink); font-weight: 700; white-space: nowrap; background: var(--sunken); }
.doc-note {
  background: var(--panel); border-left: 3px solid var(--wine);
  padding: .9rem 1.1rem; border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: .92rem; box-shadow: var(--sh-1);
}
.doc-note:last-child { margin-bottom: 0; }
.doc-foot {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-2);
  font-size: .875rem; text-align: center; color: var(--ink-3);
}
/* 🔴 여기도 **줄이 아니라 링크가** 안여백을 갖는다. 글자 높이(16px)가 그대로
   누를 수 있는 넓이가 되면 손가락으로 못 짚는다 — 실측으로 잡았다 */
.doc-foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 6px; color: var(--wine); text-decoration: none;
}
.doc-foot a:hover { text-decoration: underline; }

/* ══ 🔒 보안 절 — 「행렬」 (2026-08-28 채택) ═══════════════════════════════
   시안: `boan-2-haengryeol`. 세 장이 아니라 **한 줄의 여정**이고,
   레일이 창고·방·기기를 꿴다.

   🔴 **금색은 열쇠에만.** 이 절의 장치가 그것이다 — 독자가 레일 위 금색을
   눈으로 좇으면 「창고엔 없고 방과 기기에 있다」가 저절로 읽힌다.
   그래서 마지막 「열쇠가 저희에게 없습니다」가 주장이 아니라 **확인**이 된다.
   ⚠️ 이 절 안에서 금색을 다른 데 쓰면 그 장치가 죽는다.

   이름은 전부 `bo-` 로 시작한다 — 랜딩이 자라며 부딪히지 않게.
   (`eyebrow`·`rail`·`sec` 셋이 실제로 겹쳤다) */
.bo-wrap { --ui: "Pretendard", -apple-system, BlinkMacSystemFont,
  "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", system-ui, sans-serif; }


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--ui);
  font-size:17px;line-height:1.78;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.bo-ondark :focus-visible{outline-color:var(--c-gold)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 🔴 SVG 글자는 그림과 **함께 줄어든다.** 이름표가 제일 먼저 죽는다.
   그런데 기준은 화면 폭이 아니라 **그 그림이 실제로 몇 px 로 그려졌나**다 —
   768px 화면의 큰 그림과 1440px 화면의 작은 갈피 그림은 사정이 정반대다.
   (화면 폭으로 걸었다가 768 에서 이름표만 커지는 것을 눈으로 봤다.)
   그래서 그림을 감싼 figure 를 컨테이너로 두고 **그림의 폭**으로 건다.
   아래 값은 「어느 폭에서든 렌더 14~19px」이 되도록 잡은 것이다. */
figure{container-type:inline-size}

/* ── 시안 이름표 (비교용. 절의 일부가 아니다) ─────────────────────────── */
.bo-tagbar{background:linear-gradient(180deg,var(--c-field-2),var(--c-field));
  color:var(--c-on-dark-2);padding:12px 22px;font-size:13.5px;line-height:1.5;
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.bo-tagbar b{color:var(--c-on-dark);font-weight:700;letter-spacing:.02em}
.bo-tagbar span{opacity:.9}
.bo-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.bo-sec{padding:104px 0 44px}
.bo-finale{margin-top:96px;background:
  radial-gradient(100% 160% at 50% 0%,var(--c-field-2),var(--c-field) 66%);
  color:var(--c-on-dark);padding:78px 0 88px;text-align:center}
.bo-finale h3{margin-top:14px;font-size:clamp(29px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.bo-finale p{margin:18px auto 0;color:var(--c-on-dark-2);font-size:clamp(16px,1.5vw,18.5px);max-width:48ch}

.bo-honest{background:var(--c-bg-2);padding:66px 0 74px}
.bo-honest .bo-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:0 60px}
.bo-honest h3{font-size:clamp(20px,2.1vw,25px);font-weight:700;letter-spacing:-.02em}
.bo-hlist{display:grid;gap:0}
.bo-hlist li{padding:15px 0;border-top:1px solid rgba(107,18,30,.16);color:var(--c-ink-2);font-size:16.5px}
.bo-hlist li:first-child{border-top:0;padding-top:0}
.bo-hlist li b{color:var(--c-ink);display:block}
.bo-tail{margin-top:20px;padding-top:15px;border-top:1px solid rgba(107,18,30,.16);
  font-size:16.5px;color:var(--c-ink-2)}

@media (max-width:980px){
  .bo-wrap{padding:0 22px}
  .bo-sec{padding:62px 0 20px}
  .bo-finale{margin-top:56px;padding:56px 0 62px}
  .bo-honest .bo-inner{grid-template-columns:1fr;gap:24px}
}

/* ══════════════════════════════════════════════════════════════════════════
   절 리듬과 금색 구조                                          2026-09-08
   ─────────────────────────────────────────────────────────────────────────
   사용자: 「보안 절과 기능 절이 같은 색으로 이어져 투박하다」
           「버건디를 베이스로 좀 더 세련된 뭔가를 추가할 수 있나」

   🔎 재 보니 색이 같아서가 아니었다. **페이지 위아래가 다른 문법**이었다 —
      아래 절반(finale·honest·close·foot)은 400px 마다 바탕이 바뀌는데
      위 절반은 hero 땅부터 보안 절 끝까지 **약 2,850px 동안 한 번도 안 바뀐다.**
      유일한 경계는 205px 빈 여백인데 절 **안** 여백과 같은 크기라, 눈이
      「장이 바뀐다」가 아니라 「그냥 비었다」로 읽는다.

   ① 종이를 절마다 반 단계씩 달리 깐다 → 보안 장이 **가라앉은 띠**로 묶인다
   ② 금색을 **선과 점으로만** 페이지에 퍼뜨린다. 면으로 칠하는 곳은 없다
   🔴 ③ **보안 절에는 금색을 하나도 더하지 않는다.** 앞뒤 절에 금색이 있다가
        여기서 사라지면 눈이 **열쇠로 수렴**한다 — 그 절의 장치가 강해진다
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 절 리듬 ─────────────────────────────────────────────────────────── */
.hero  { background: linear-gradient(180deg, var(--w20), var(--paper-1) 40%, var(--paper-2) 100%); }
.sect  { background: var(--paper-2); }   /* 기능 — 반 단계 아래 */
.bo-sec{ background: var(--paper-3);     /* 보안 — 가라앉은 띠 */
         border-top: 1px solid var(--line-2);
         padding-bottom: 104px; }
/* 🔴 padding 과 margin 은 **한 쌍이다.** `.bo-finale{margin-top:96px}` 를 남겨 두면
      띠와 짙은 판 사이에 **96px 종이 줄무늬**가 뜬다 (여백은 부모 바탕을 보인다).
      여백을 띠 **안**으로 옮기고 margin 을 0 으로 만든다 */
.bo-finale { margin-top: 0;
  background:
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--deep) 55%, transparent)),
    radial-gradient(100% 160% at 50% 0%, var(--field-2), var(--field) 66%); }
.close { background: var(--paper-1); }   /* 닫는 말 — 「문」은 밝은 데 있다 */
@media (max-width: 980px) { .bo-sec { padding-bottom: 62px; } }

.cta:hover, .topnav a.go:hover { background: var(--paper-0); }

/* ── 금색을 선과 점으로 ──────────────────────────────────────────────────
   `--gold-hi` 는 새 색이 아니라 **로고 영상의 브랜드 값**이다. 종이 위 금색
   (`--c-gold`)은 짙은 면에서 탁해지므로 짙은 면에서만 이것을 쓴다 */
:root { --gold-hi: #D8B784;
        --gold-ln:    color-mix(in srgb, var(--c-gold) 42%, transparent);
        --gold-ln-dk: color-mix(in srgb, var(--gold-hi) 30%, transparent); }

.hero .tag { color: color-mix(in srgb, var(--gold-hi) 88%, transparent); }
.top .bar  { border-color: var(--gold-ln-dk); }
.pill { background: transparent; color: var(--gold-hi);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-hi) 55%, transparent); }
.lede { border-top-color: color-mix(in srgb, var(--gold-hi) 46%, transparent); }
.cta  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 58%, transparent),
                    0 2px 4px rgba(0,0,0,.18), 0 20px 44px -20px rgba(0,0,0,.55); }
.cta:hover { box-shadow: inset 0 0 0 1px var(--c-gold),
                    0 2px 4px rgba(0,0,0,.18), 0 20px 44px -20px rgba(0,0,0,.55); }
.frame { box-shadow: var(--sh-3), 0 0 0 1px var(--gold-ln); }
.sect .eyebrow { display: flex; align-items: center; gap: 10px; }
.sect .eyebrow::before { content: ""; width: 22px; height: 2px; flex: none; background: var(--c-gold); }
.rail button.on .n { color: var(--c-gold); }
.rail .bar i       { background: var(--c-gold); }
.cap { padding-left: var(--s3);
       border-left: 2px solid color-mix(in srgb, var(--c-gold) 62%, transparent); }
.close h2::before { content: ""; display: block; width: 32px; height: 2px;
                    margin: 0 auto var(--s4); background: var(--c-gold); }
.foot      { border-top: 1px solid var(--gold-ln-dk); }
.foot-copy { padding-top: var(--s4);
             border-top: 1px solid color-mix(in srgb, var(--gold-hi) 16%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   보안 절 — 갤러리 × 오로라 × 얇은 유리 테 (시안 H2)                  2026-09-24
   ─────────────────────────────────────────────────────────────────────────
   강사님: 「제목·그림 크기·배치는 갤러리, 배경은 오로라」 → 얇은 유리 테를 골랐다.
   그림(`s5f-*`)의 모양·움직임은 `security-figs.js` 와 한 몸이다 — 여기 값만 바꾸면
   덩어리·열쇠 자리가 어긋날 수 있다. 🔴 그림 폭은 1440 에서 359px · 390 에서 338px
   보다 줄이지 않는다 (강사님: 「그림이 작아질까 걱정」).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══ 🔒 보안 절 — H2 「얇은 유리 액자」 (2026-09-24 강사님 선택) ═════════════════
   A 「갤러리」의 글·배치·그림 크기 + D 「오로라」의 바탕.
   그림판마다 8px(폰 6px) 유리 테두리 — 테두리는 **틈 쪽으로 나간다**(음수 여백),
   그래서 그림 폭은 A 와 똑같다. 이름은 전부 lxh2- / s5f- 로 시작한다.
   이 파일은 landing.css 뒤에 붙는다. */
.lxh2-sec{
  --lxh2-bg:#FAF6F3; --lxh2-lav:#DED4FA; --lxh2-rose:#F4D2D0; --lxh2-amb:#FBDFB4; --lxh2-rim:8px;
  --lxh2-card:#F3F0EB; --lxh2-ink:#1D1C1A; --lxh2-ink-2:#6E6B64; --lxh2-ink-3:#978A87;
  --lxh2-accent:#6B121E; --lxh2-gold:var(--gold-hi,#D8B784);
  --lxh2-seam:var(--paper-2,#F7E9E8); --lxh2-on-dark:var(--on-dark,#F7E9E7); --lxh2-on-dark-2:var(--on-dark-2,#DEC3C1);
  --lxh2-field:var(--field,#4A121A); --lxh2-field-2:var(--field-2,#5E1E22);
  /* the landing's body stack, stated here: landing.css line ~787 sets body's family from a custom property that
     is only defined on .bo-wrap, so outside .bo-wrap the body family can fall through. Don't depend on it. */
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.6;font-feature-settings:"ss06";-webkit-font-smoothing:antialiased;
}
.lxh2-shell{max-width:1360px;margin-inline:auto;padding-inline:40px}
@media (max-width:640px){.lxh2-shell{padding-inline:16px}}


/* ── the island ── */
.bo-sec.lxh2-sec{border-top:0;margin:0;position:relative;isolation:isolate;overflow:clip;background:var(--lxh2-bg);color:var(--lxh2-ink);padding:clamp(96px,8vw,128px) 0 176px}
/* seam from the features band above (D) */
.lxh2-sec::before{content:"";position:absolute;inset:0 0 auto;height:180px;z-index:-1;
  background:linear-gradient(180deg,var(--lxh2-seam),rgba(250,246,243,0));pointer-events:none}
/* aurora (D): soft fields that drift — transform only; the section clips them */
/* layout-ok: decorative layer filling its section; the section clips it */
.lxh2-aurora{position:absolute;inset:0;z-index:-2;pointer-events:none}
/* layout-ok: aurora field inside .lxh2-aurora; clipped by the section */
.lxh2-blob{position:absolute;border-radius:50%;will-change:transform;animation:lxh2-drift 44s ease-in-out infinite alternate}
.lxh2-b1{width:78vw;height:70vw;max-width:1100px;max-height:980px;left:-22vw;top:4%;background:radial-gradient(closest-side,var(--lxh2-lav),rgba(222,212,250,0))}
.lxh2-b2{width:64vw;height:58vw;max-width:940px;max-height:860px;right:-18vw;top:-3%;background:radial-gradient(closest-side,var(--lxh2-rose),rgba(244,210,208,0));animation-duration:56s;animation-name:lxh2-drift2}
.lxh2-b3{width:70vw;height:52vw;max-width:1000px;max-height:760px;left:26%;bottom:-14%;background:radial-gradient(closest-side,var(--lxh2-amb),rgba(251,223,180,0));animation-duration:62s;animation-name:lxh2-drift3}
/* A's section is taller than D's, so a fourth field keeps the gallery band from going flat */
.lxh2-b4{width:60vw;height:50vw;max-width:900px;max-height:760px;right:-8vw;top:44%;background:radial-gradient(closest-side,var(--lxh2-lav),rgba(222,212,250,0));opacity:.8;animation-duration:50s;animation-name:lxh2-drift2}
@keyframes lxh2-drift {from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(12vw,6vw,0) scale(1.08)}}
@keyframes lxh2-drift2{from{transform:translate3d(0,0,0) scale(1.05)} to{transform:translate3d(-10vw,10vw,0) scale(.94)}}
@keyframes lxh2-drift3{from{transform:translate3d(0,0,0) scale(.95)} to{transform:translate3d(-14vw,-6vw,0) scale(1.06)}}
.lxh2-sec.lxh2-off .lxh2-blob{animation-play-state:paused}
/* layout-ok: grain layer filling its section */
.lxh2-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lxh2-head{position:relative;text-align:center}
.lxh2-eyebrow{font-size:15px;font-weight:650;color:var(--lxh2-accent);letter-spacing:-.005em}
/* 2026-09-24 시안 1 「가운데 압축」: 글과 그림이 한 화면에 — 제목은 넓은 화면에서 한 줄, 좁으면 두 줄 */
.lxh2-sec h2{margin-top:10px;font-size:clamp(34px,4.3vw,64px);font-weight:800;
  letter-spacing:-.042em;line-height:1.12;color:var(--lxh2-ink);text-wrap:balance}
.lxh2-sec h2 .lxh2-l{display:block}
@media (min-width:900px){.lxh2-sec h2 .lxh2-l{display:inline-block}}
.lxh2-sec h2 em{font-style:normal;color:var(--lxh2-accent)}
.lxh2-sub{margin-top:8px;font-size:clamp(18px,1.45vw,22px);font-weight:650;letter-spacing:-.02em;
  line-height:1.3;color:var(--lxh2-ink-3)}

.lxh2-intro{margin:clamp(18px,1.8vw,26px) auto 0;max-width:46em;text-align:center;
  font-size:clamp(16px,1.2vw,18px);font-weight:500;letter-spacing:-.012em;line-height:1.7;color:var(--lxh2-ink)}
.lxh2-intro .lxh2-hl{color:var(--lxh2-accent)}
.lxh2-intro .lxh2-w{display:inline}

/* gallery */
.lxh2-gallery{margin-top:clamp(36px,3.2vw,48px)}
.lxh2-gallery .s5f-grid{gap:clamp(20px,2.2vw,32px);align-items:start}
.lxh2-plate{min-width:0;display:flex;flex-direction:column}
/* the thin glass frame: its rim sits OUTSIDE A's plate (negative margin into the gap/gutter),
   so the plate — and the figure inside — keep A's exact width */
.lxh2-glass{position:relative;margin-inline:calc(var(--lxh2-rim) * -1);margin-top:calc(var(--lxh2-rim) * -1);padding:var(--lxh2-rim);
  border-radius:calc(28px + var(--lxh2-rim));
  background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.34) 55%,rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(74,18,26,.05),
    0 1px 2px rgba(74,18,26,.05),0 36px 72px -44px rgba(74,18,26,.34);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  transition:box-shadow .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.lxh2-glass{padding:calc(var(--lxh2-rim) - 1px)}   /* the 1px border is part of the rim */
/* highlight edge: a light catch along the top-left of the rim */
/* layout-ok: highlight edge filling its own glass frame */
.lxh2-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0) 28%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:calc(var(--lxh2-rim) - 1px)}
.lxh2-plate:hover .lxh2-glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(74,18,26,.05),
    0 1px 2px rgba(74,18,26,.05),0 44px 80px -44px rgba(74,18,26,.42)}
.lxh2-gallery .s5f-card{background:var(--lxh2-card);border-radius:28px;padding:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px) clamp(22px,2.4vw,36px);
  box-shadow:0 0 0 1px rgba(74,18,26,.05)}
.lxh2-gallery .s5f-cap{display:none}   /* the placard's h3 carries the title */
.lxh2-label{padding:28px 8px 0}
.lxh2-n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--lxh2-ink-3);font-variant-numeric:tabular-nums}
.lxh2-label h3{margin-top:8px;font-size:clamp(21px,1.8vw,26px);font-weight:750;letter-spacing:-.03em;line-height:1.25;color:var(--lxh2-ink)}
.lxh2-q{margin-top:14px;font-size:16px;line-height:1.62;color:var(--lxh2-ink-2)}
.lxh2-q b{font-weight:650;color:var(--lxh2-ink-2)}
.lxh2-a{margin-top:10px;font-size:17px;line-height:1.6;font-weight:650;letter-spacing:-.01em;color:var(--lxh2-ink)}
.lxh2-hint{margin-top:32px;display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:13.5px;color:var(--lxh2-ink-3)}
.lxh2-hint svg{width:15px;height:15px}


@media (prefers-reduced-motion:reduce){.lxh2-blob{animation:none}.lxh2-glass{transition:none}}

@media (max-width:640px){
  .bo-sec.lxh2-sec{padding:88px 0 112px}
  .lxh2-sec::before{height:64px}
  .lxh2-sec h2{font-size:clamp(30px,8.6vw,36px);line-height:1.16}
  .lxh2-sub{font-size:17px}
  .lxh2-intro{font-size:16px}
  .lxh2-gallery{margin-top:36px}
  .lxh2-gallery .s5f-card{border-radius:22px;padding:24px 10px 18px}
  .lxh2-sec{--lxh2-rim:6px}
  .lxh2-glass{border-radius:calc(22px + var(--lxh2-rim));-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)}
  .lxh2-b1{width:140vw;height:120vw;left:-60vw}
  .lxh2-b2{width:120vw;height:110vw;right:-60vw;top:20%}
  .lxh2-b3{width:130vw;height:110vw;left:-10vw;bottom:-4%}
  .lxh2-b4{width:120vw;height:110vw;right:-50vw;top:58%}
  .lxh2-label{padding:22px 4px 0}
  .lxh2-gallery .s5f-grid{gap:56px}
}
@media (min-width:641px) and (max-width:1199px){
  .lxh2-gallery .s5f-grid{gap:72px}
}

/* ── 한 화면 — 시안 A 「한눈 갤러리」 (강사님 선택, 2026-10-13) ──────────────────────
   데스크톱(1200px 이상)에서 보안 절 전체가 **한 화면에** 든다. 세 칸 갤러리는 그대로 두고,
   위의 제목 덩어리를 옆으로 눕혀(제목 왼쪽 · 도입 문단 오른쪽) 세로를 번다. 번호와 제목은 한 줄.
   · 절 높이 = 화면 높이 + 다음 절이 겹쳐 올라오는 160px(`--mff3-lap`). 내용은 그 안에서 가운데.
   · 1200px 미만(태블릿·폰)은 예전 그대로 — 세 칸이 한 줄로 쌓이는 판.
   · 1200px 에서 그림 조각의 컨테이너 질의(1120px 이하 → 한 칸)가 걸리므로 세 칸을 여기서 다시 못박는다.
   · 도입 문단이 밝아지는 끝점도 이 배치에 맞췄다 (`security-figs.js` 「read-along」).
   시안과 측정: docs/시안/랜딩-보안섹션/ */
@media (min-width:1200px){
  .bo-sec.lxh2-sec{min-height:calc(100svh + 160px);display:flex;flex-direction:column;justify-content:center;
    padding:clamp(40px,6vh,88px) 0 calc(160px + clamp(20px,3vh,40px))}
  .lxh2-sec .lxh2-shell{width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    column-gap:clamp(40px,5vw,96px);align-items:end}
  .lxh2-sec .lxh2-head{text-align:left}
  .lxh2-sec h2{margin-top:8px;font-size:clamp(36px,3.5vw,56px);line-height:1.1}
  .lxh2-sec h2 .lxh2-l{display:block}
  .lxh2-sec .lxh2-sub{margin-top:10px;font-size:clamp(17px,1.3vw,20px)}
  .lxh2-sec .lxh2-intro{margin:0;max-width:34em;padding-bottom:4px;text-align:left;font-size:clamp(16px,1.15vw,17.5px);line-height:1.7}
  .lxh2-sec .lxh2-gallery{grid-column:1/-1;margin-top:clamp(28px,4.4vh,52px)}
  .lxh2-sec .lxh2-gallery .s5f-card{padding:clamp(14px,2.2vh,30px) clamp(10px,1.1vw,22px) clamp(12px,1.8vh,24px)}   /* ≥329px figure at 1200 (qc H10b) */
  /* three across from 1200px; on a short, wide screen the row narrows so figure + text still fit the height */
  .lxh2-sec .lxh2-gallery .s5f-grid{grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:min(100%,calc((100svh - 470px) * 3 * 1.62 + 3 * 60px));margin-inline:auto}
  .lxh2-sec .lxh2-label{padding:clamp(14px,2.2vh,24px) 6px 0;display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;align-items:baseline}
  .lxh2-sec .lxh2-n{grid-column:1}
  .lxh2-sec .lxh2-label h3{grid-column:2;margin:0;font-size:clamp(20px,1.6vw,24px)}
  .lxh2-sec .lxh2-q,.lxh2-sec .lxh2-a{grid-column:1/-1}
  .lxh2-sec .lxh2-q{margin-top:10px}
  .lxh2-sec .lxh2-a{margin-top:8px}
  .lxh2-sec .lxh2-hint{margin-top:clamp(12px,2vh,22px)}
}

/* keep the section's own figure focus ring (landing's global :focus-visible is 2px accent) */
.lxh2-sec .s5f-fig:focus-visible{outline:3px solid #7D72D6;outline-offset:6px}

/* ── no GSAP: the fragment cannot stand without script (lumps, keys and labels are placed by it),
   so the figures are hidden and the three stories read as titles + copy ── */
.s5f-nogsap .lxh2-sec .lxh2-glass,.s5f-nogsap .lxh2-sec .lxh2-hint{display:none}
.s5f-nogsap .lxh2-sec .lxh2-label{padding-top:0}
.s5f-nogsap .lxh2-sec .lxh2-intro{color:var(--lxh2-ink)}

/* ── s5f 그림 조각 (5차 최종안, 손대지 않음 — 글꼴만 inherit) ── */
/* the fragment sizes itself from its own width, not the viewport — it fits any column */
.s5f-root{--s5f-card:#F2F0EB;--s5f-ink:#2B2E36;--s5f-violet:#5B50B8;container:s5froot/inline-size;color:var(--s5f-ink);font-family:inherit;-webkit-font-smoothing:antialiased}
.s5f-root,.s5f-root *{box-sizing:border-box}
.s5f-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* 세 칸은 칸 하나에 그림이 330px 넘게 설 때부터. 960 이면 1100 화면에서 289px 로 줄었다 (2026-09-24) */
@container s5froot (max-width:1120px){.s5f-grid{grid-template-columns:minmax(0,1fr);max-width:600px;margin-inline:auto}}
.s5f-card{margin:0;background:var(--s5f-card);border-radius:18px;padding:22px 16px 14px;min-width:0}
.s5f-stage{position:relative;aspect-ratio:520/300;container-type:inline-size}
/* layout-ok: figure fills its aspect-ratio stage */
.s5f-fig{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.s5f-fig:focus-visible{outline:3px solid #7D72D6;outline-offset:6px;border-radius:14px}
/* layout-ok: figure label pinned to a spot in the drawing */
.s5f-lb{position:absolute;transform:translate(-50%,-50%);font-size:max(12px,3.08cqi);font-weight:600;line-height:1.3;text-align:center;white-space:nowrap;color:#3B3E46;letter-spacing:-.005em;pointer-events:none}
.s5f-lbr{color:var(--s5f-violet);font-weight:700}
.s5f-ai{font-size:max(14px,3.85cqi)}
@container (max-width:460px){.s5f-lb{font-size:3.65cqi}.s5f-ai{font-size:4.3cqi}}
@container (max-width:360px){.s5f-lb{font-size:4.23cqi}}
@container (max-width:300px){.s5f-lb{font-size:4.6cqi}}
.s5f-cap{margin-top:14px;text-align:center;font-size:15px;font-weight:650;letter-spacing:-.01em}
.s5f-rm{display:none}
.s5f-pre .s5f-lb,.s5f-pre .s5f-a{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .s5f-rm{display:inline}
  .s5f-fig{cursor:default}
  .s5f-pre .s5f-lb,.s5f-pre .s5f-a{visibility:visible}
}

/* ══════════════════════════════════════════════════════════════════════════
   마무리 띠 — 「내어드릴 수 있는 것」 모여드는 흐름 (시안 F3)               2026-09-24
   ─────────────────────────────────────────────────────────────────────────
   강사님이 F3 을 골랐다. 배경은 시안 B(짙은 버건디 · 크림 격자 · 오로라에서 스며드는 이음새).
   🔴 세 요청의 암호문은 **같은 값**이다 — 누가 요청해도 나가는 것은 저장된 암호문 하나.
   세 번째 요청자는 「수사기관이 요청하면」(강사님, 「영장을 받으면」은 주어가 없었다).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 🔒 마무리 띠 — F3 「한 곳으로 모이는 흐름」 (2026-09-24 강사님 선택) ══════════════
   세 요청(직원·클라우드 업체·수사기관)이 선을 따라 **하나의** 암호문으로 모인다.
   세 줄이 받는 것은 같은 바이트 — finale.js 가 같은 프레임으로 셋을 함께 굳힌다.
   바탕·이음매는 시안 B: 띠가 투명하게 시작해 위 절(오로라)의 빈 아래 여백 위로
   160px(폰 96px) 올라탄다. 금색은 「열쇠 없음」 빈 자리 하나에만 쓴다.
   이름은 전부 mff3- 로 시작한다. 이 덩어리는 landing.css 끝에 붙는다. */

/* ── 위 절(오로라)이 받아야 할 것: 아래쪽 280px 에서 빛덩이를 흐리게 끝낸다.
   띠가 그 위로 올라타므로, 절의 잘린 경계(overflow:clip)가 반투명한 띠 너머로
   딱 끊긴 선으로 보이지 않게 한다. 위쪽 그림·제목 자리는 건드리지 않는다. */
.bo-sec.lxh2-sec .lxh2-aurora{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 300px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 300px),transparent)}

/* ── 띠 ── */
.bo-finale.mff3-fin{
  --mff3-bg:#4A121A; --mff3-edge:#3B0D14; --mff3-gold:var(--gold-hi,#D8B784);
  --mff3-on:#F7E9E7; --mff3-on-2:#DEC3C1; --mff3-on-3:#B89491;
  --mff3-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --mff3-lap:160px;
  position:relative;z-index:1;isolation:isolate;overflow:clip;color:var(--mff3-on);text-align:center;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.6;font-feature-settings:"ss06";-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
  margin:calc(var(--mff3-lap) * -1) 0 0;
  background:radial-gradient(70% 520px at 50% 780px,rgba(106,34,40,.9),rgba(106,34,40,0) 100%),
    linear-gradient(180deg,rgba(74,18,26,0) 0,rgba(74,18,26,.06) 40px,rgba(74,18,26,.2) 80px,rgba(74,18,26,.45) 130px,
      rgba(74,18,26,.72) 180px,rgba(74,18,26,.92) 230px,var(--mff3-bg) 280px,var(--mff3-bg) 60%,var(--mff3-edge));
  padding:calc(var(--mff3-lap) + clamp(150px,12vw,190px)) 0 clamp(96px,8vw,128px)}
/* hairline field — cream, not gold. 80px cells centred on the page: the card is 960 = 12 cells */
/* layout-ok: decorative layer filling its own section; the section clips it */
.mff3-fin .mff3-field{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(247,233,227,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(247,233,227,.055) 1px,transparent 1px);
  background-size:80px 80px;background-position:center top;
  -webkit-mask:radial-gradient(60% 50% at 50% 56%,#000 20%,transparent 100%);mask:radial-gradient(60% 50% at 50% 56%,#000 20%,transparent 100%)}
.mff3-fin .mff3-shell{max-width:1360px;margin-inline:auto;padding-inline:40px}
.mff3-fin .mff3-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mff3-fin .mff3-cap{margin:0;max-width:none;font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:-.005em;line-height:1.6;color:var(--mff3-on-2)}
.mff3-fin .mff3-h{margin:14px auto 0;max-width:14em;font-size:clamp(36px,5.4vw,80px);font-weight:800;letter-spacing:-.045em;line-height:1.1;
  color:var(--mff3-on);word-break:keep-all;text-wrap:balance}
.mff3-fin .mff3-lead{margin:24px auto 0;max-width:30em;font-size:clamp(16px,1.45vw,19px);line-height:1.6;color:var(--mff3-on-2);text-wrap:balance}
.mff3-fin .mff3-lead b{font-weight:650;color:var(--mff3-on)}

/* ── the card: a flow diagram, many → one ── */
.mff3-fin .mff3-card{position:relative;margin:clamp(56px,6vw,80px) auto 0;max-width:960px;text-align:left;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(247,233,227,.13),inset 0 1px 0 rgba(247,233,227,.16),0 40px 80px -40px rgba(20,4,7,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mff3-fin .mff3-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:18px 28px 14px;
  border-bottom:1px solid rgba(247,233,227,.09);font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.5;color:var(--mff3-on-3)}
.mff3-fin .mff3-head span:last-child{text-align:right}

.mff3-fin .mff3-flow{position:relative;display:grid;grid-template-columns:minmax(0,320px) minmax(72px,1fr) minmax(0,340px);
  align-items:center;padding:36px 28px}
/* layout-ok: the wire layer covers its own flow box; finale.js draws in that box's coordinates */
.mff3-fin .mff3-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mff3-fin .mff3-wire{fill:none;stroke:rgba(247,233,227,.34);stroke-width:1.25;stroke-linecap:round}
.mff3-fin .mff3-pulse{fill:none;stroke:rgba(247,233,227,.95);stroke-width:2;stroke-linecap:round;opacity:0}
.mff3-fin .mff3-port{fill:var(--mff3-bg);stroke:rgba(247,233,227,.6);stroke-width:1.25}

.mff3-fin .mff3-nodes{grid-column:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;position:relative;margin:0;padding:0;list-style:none}
.mff3-fin .mff3-node{position:relative;min-width:0;padding:14px 16px;border-radius:16px;
  background:rgba(20,4,7,.32);box-shadow:inset 0 0 0 1px rgba(247,233,227,.11)}
.mff3-fin .mff3-who{display:flex;align-items:center;gap:10px;min-width:0;font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--mff3-on)}
.mff3-fin .mff3-who svg{flex:none;width:20px;height:20px;color:var(--mff3-on-2)}
.mff3-fin .mff3-got{display:flex;align-items:center;gap:8px;margin-top:10px;min-width:0;line-height:1.4}
.mff3-fin .mff3-got-k{flex:none;font-size:12px;font-weight:600;color:var(--mff3-on-3)}
.mff3-fin .mff3-hash{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;
  font-family:var(--mff3-mono);font-size:12.5px;letter-spacing:.02em;color:var(--mff3-on-2);
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}

/* the one sealed object */
.mff3-fin .mff3-obj{grid-column:3;min-width:0;position:relative;border-radius:18px;padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(20,4,7,.5),rgba(20,4,7,.36));
  box-shadow:inset 0 0 0 1px rgba(247,233,227,.16),0 24px 50px -28px rgba(10,2,4,.9)}
.mff3-fin .mff3-obj-h{display:flex;align-items:center;gap:10px;min-width:0;line-height:1.4}
.mff3-fin .mff3-obj-h svg{flex:none;width:20px;height:20px;color:var(--mff3-on-2)}
.mff3-fin .mff3-kind{min-width:0;font-size:16px;font-weight:700;color:var(--mff3-on)}
.mff3-fin .mff3-one{margin-left:auto;font-size:12px;font-weight:600;color:var(--mff3-on-3);white-space:nowrap}
.mff3-fin .mff3-body{margin-top:12px;padding:12px 14px;border-radius:10px;background:rgba(20,4,7,.35);
  font-family:var(--mff3-mono);font-size:12.5px;line-height:1.7;letter-spacing:.02em;color:var(--mff3-on-3);
  overflow-wrap:anywhere;word-break:break-all}
/* the only gold in the band: the empty place where a key would go */
.mff3-fin .mff3-slot{display:flex;align-items:center;gap:12px;min-width:0;margin-top:12px;padding:10px 12px;border-radius:12px;
  border:1px dashed color-mix(in srgb,var(--mff3-gold) 70%,transparent);color:var(--mff3-gold);line-height:1.4}
.mff3-fin .mff3-slot svg{flex:none;width:30px;height:30px}
.mff3-fin .mff3-slot > span{min-width:0}
.mff3-fin .mff3-slot b{font-size:14px;font-weight:700}
.mff3-fin .mff3-slot span span{display:block;font-size:12px;font-weight:500;color:var(--mff3-on-3)}

.mff3-fin .mff3-foot{display:flex;justify-content:space-between;gap:12px;padding:16px 28px 18px;border-top:1px solid rgba(247,233,227,.09);
  font-size:14.5px;line-height:1.5;color:var(--mff3-on-2)}
.mff3-fin .mff3-foot > span:first-child{min-width:0}
.mff3-fin .mff3-foot b{font-weight:650;color:var(--mff3-on)}
.mff3-fin .mff3-n0{font-size:13px;font-variant-numeric:tabular-nums;color:var(--mff3-on-3);white-space:nowrap}

/* narrow: vertical flow — requests stacked, wires merge down a rail into the one object below */
@media (max-width:760px){
  .mff3-fin .mff3-head{display:none}
  .mff3-fin .mff3-flow{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .mff3-fin .mff3-nodes{padding-right:40px}
  .mff3-fin .mff3-obj{grid-column:1;margin-top:64px}
  .mff3-fin .mff3-foot{padding:14px 18px 16px;flex-wrap:wrap}
}
@media (max-width:640px){
  .bo-finale.mff3-fin{--mff3-lap:96px;padding:calc(var(--mff3-lap) + 112px) 0 88px;
    background:radial-gradient(90% 420px at 50% 820px,rgba(106,34,40,.9),rgba(106,34,40,0) 100%),
      linear-gradient(180deg,rgba(74,18,26,0) 0,rgba(74,18,26,.2) 40px,rgba(74,18,26,.6) 100px,rgba(74,18,26,.92) 150px,var(--mff3-bg) 190px,var(--mff3-bg) 60%,var(--mff3-edge))}
  .bo-sec.lxh2-sec .lxh2-aurora{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 180px),transparent);
            mask-image:linear-gradient(180deg,#000 calc(100% - 180px),transparent)}
  .mff3-fin .mff3-shell{padding-inline:16px}
  .mff3-fin .mff3-field{background-size:56px 56px}
  .mff3-fin .mff3-h{font-size:clamp(36px,10.4vw,44px);line-height:1.14}
  .mff3-fin .mff3-l{display:block}
  .mff3-fin .mff3-lead{font-size:16.5px}
  .mff3-fin .mff3-card{border-radius:20px}
  .mff3-fin .mff3-n0{display:none}
  .mff3-fin .mff3-who{font-size:15.5px}
}
@media (max-width:374px){
  .mff3-fin .mff3-flow{padding:18px 14px}
  .mff3-fin .mff3-nodes{padding-right:32px}
  .mff3-fin .mff3-node{padding:12px 13px}
}

/* ── 원문 → 암호문 (시안 B · 물건 안에서): the object now starts with the sentence the user wrote,
   then the lock step, then the one stored ciphertext. The plaintext is shown as the original content of the
   stored document (what it said before locking); the part the wires reach is the ciphertext alone. */
.mff3-fin .mff3-src-h{display:flex;align-items:center;gap:10px;min-width:0;line-height:1.4}
.mff3-fin .mff3-src-h svg{flex:none;width:20px;height:20px;color:var(--mff3-on-2)}
.mff3-fin .mff3-src-k{min-width:0;font-size:16px;font-weight:700;color:var(--mff3-on)}
.mff3-fin .mff3-src-w{margin-left:auto;min-width:0;font-size:12px;font-weight:600;color:var(--mff3-on-3);text-align:right;text-wrap:balance}
.mff3-fin .mff3-plain{margin:12px 0 0;padding:12px 14px;border-radius:10px;
  background:rgba(247,233,227,.075);box-shadow:inset 0 0 0 1px rgba(247,233,227,.12);
  font-size:14px;font-weight:500;line-height:1.65;letter-spacing:-.01em;color:var(--mff3-on);word-break:keep-all;overflow-wrap:anywhere}
.mff3-fin .mff3-plain-t{display:block;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--mff3-on-3)}
.mff3-fin .mff3-seal{display:flex;align-items:center;gap:8px;min-width:0;margin:12px 0;
  font-size:12.5px;font-weight:600;line-height:1.4;color:var(--mff3-on-2)}
.mff3-fin .mff3-seal svg{flex:none;width:16px;height:16px}
.mff3-fin .mff3-seal::after{content:"";flex:1 1 auto;min-width:12px;height:1px;background:rgba(247,233,227,.14)}
.mff3-fin .mff3-vault{padding-top:12px;border-top:1px solid rgba(247,233,227,.1)}
.mff3-fin .mff3-seal + .mff3-vault{border-top:0;padding-top:0}
/* the ciphertext box holds two layers in one place: the sentence it came from, and what it became */
.mff3-fin .mff3-body{position:relative}
.mff3-fin .mff3-ct{display:block}
/* layout-ok: the ghost overlays the ciphertext's own content box and is clipped to it; it never sizes the box */
.mff3-fin .mff3-ghost{position:absolute;top:12px;right:14px;bottom:12px;left:14px;overflow:hidden;visibility:hidden;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;font-size:13px;font-weight:500;
  line-height:21.25px;letter-spacing:-.01em;color:var(--mff3-on);word-break:keep-all;overflow-wrap:anywhere}
/* layout-ok: the sweep's leading edge, placed by finale.js inside the box it sweeps */
.mff3-fin .mff3-edge{position:absolute;top:12px;left:14px;width:2px;height:21.25px;border-radius:1px;
  background:rgba(247,233,227,.9);box-shadow:0 0 10px rgba(247,233,227,.5);opacity:0;pointer-events:none}

@media (max-width:760px){
  /* the rail runs in a gutter to the right of the object and turns into the ciphertext, not the plaintext */
  .mff3-fin .mff3-obj{margin-top:40px;margin-right:40px}
}
@media (max-width:374px){
  .mff3-fin .mff3-obj{margin-right:32px}
}

/* ── 피날레 2 · 시안 2 「펼쳐지는 칸」: the user's row. It receives the same ciphertext on the same wire,
   then a gold key (gold = key, as in the empty slot) opens it and a small paper panel unfolds under it
   with the original sentence. The other three rows are unchanged. */
.mff3-fin .mff3-port.mff3-pk{fill:var(--mff3-gold);stroke:var(--mff3-gold);stroke-width:1.25}
.mff3-fin .mff3-key{position:relative;display:flex;align-items:center;gap:10px;min-width:0;margin:12px -16px 0 0}
/* the hairline runs from the key to the row's right edge, where the wire's gold end sits */
.mff3-fin .mff3-key::after{content:"";flex:1 1 auto;min-width:12px;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mff3-gold) 55%,transparent),color-mix(in srgb,var(--mff3-gold) 30%,transparent))}
.mff3-fin .mff3-key-c{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:0;padding:4px 10px 4px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--mff3-gold) 70%,transparent);background:color-mix(in srgb,var(--mff3-gold) 10%,transparent);
  font-size:12.5px;font-weight:650;line-height:1.4;letter-spacing:-.005em;color:var(--mff3-gold);white-space:nowrap}
.mff3-fin .mff3-key-c svg{flex:none;width:16px;height:16px}
/* the unfolded panel: the same paper as the object's 상담 메모 */
.mff3-fin .mff3-open{display:block;margin-top:10px;padding:10px 12px 11px;border-radius:10px;
  background:rgba(247,233,227,.075);box-shadow:inset 0 0 0 1px rgba(247,233,227,.12)}
.mff3-fin .mff3-open-t{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.5;color:var(--mff3-on-3)}
.mff3-fin .mff3-open-t span:last-child{color:var(--mff3-gold);white-space:nowrap}
.mff3-fin .mff3-open-b{position:relative;display:block}
.mff3-fin .mff3-open-pt{display:block;font-size:13.5px;font-weight:500;line-height:22px;letter-spacing:-.01em;color:var(--mff3-on);word-break:keep-all;overflow-wrap:anywhere}
/* layout-ok: the ciphertext layer sits over the sentence's own box during the opening sweep; it never sizes the box */
.mff3-fin .mff3-open-ct{position:absolute;inset:0;overflow:hidden;visibility:hidden;
  font-family:var(--mff3-mono);font-size:12px;line-height:22px;letter-spacing:.02em;color:var(--mff3-on-3);word-break:break-all;overflow-wrap:anywhere}
@media (max-width:374px){
  .mff3-fin .mff3-key{margin-right:-13px}
  .mff3-fin .mff3-key-c{font-size:12px;padding-inline:6px 8px}
}

/* ── 한 화면 — 시안 K1 「왼쪽 선언」 (강사님 선택, 2026-10-13) ─────────────────────────
   1200px 이상에서 이 띠가 **한 화면에** 든다. 선언(「열쇠가 / 저희에게 / 없습니다.」)을 왼쪽에 크게
   세우고 흐름 카드를 오른쪽에 둔다 — 위 보안 절(시안 A)과 같은 왼쪽 정렬. 카드 속 흐름·움직임은 그대로.
   · 띠 높이 = 화면 높이 + 위 절에 겹쳐 올라가는 160px(--mff3-lap). 내용은 그 안에서 가운데.
   · 이음새: 투명 → 버건디를 겹침 160px 안에서 거의 끝낸다(190px 에서 단색). 280px 까지 끌면 화면 위
     120px 이 흐린 띠로 남는다. 보안 절이 그 겹침 자리를 빈 아래 여백으로 비워 둔다.
   · 카드 안 간격만 2~4px 조인다. 글자 크기는 그대로. 1199px 이하는 예전 그대로.
   시안과 측정: docs/시안/랜딩-열쇠섹션/ */
@media (min-width:1200px){
  .bo-finale.mff3-fin{min-height:calc(100svh + var(--mff3-lap));display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--mff3-lap) + clamp(28px,4.5vh,72px)) 0 clamp(28px,4.5vh,72px);text-align:left;
    background:radial-gradient(70% 60% at 50% 72%,rgba(106,34,40,.9),rgba(106,34,40,0) 100%),
      linear-gradient(180deg,rgba(74,18,26,0) 0,rgba(74,18,26,.06) 30px,rgba(74,18,26,.2) 60px,rgba(74,18,26,.45) 95px,
        rgba(74,18,26,.72) 128px,rgba(74,18,26,.92) 158px,var(--mff3-bg) 190px,var(--mff3-bg) 60%,var(--mff3-edge))}
  .bo-finale.mff3-fin .mff3-shell{width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    column-gap:clamp(40px,4.4vw,88px);grid-template-rows:1fr auto auto auto 1fr;align-items:start}
  .bo-finale.mff3-fin .mff3-cap{grid-column:1;grid-row:2}
  .bo-finale.mff3-fin .mff3-h{grid-column:1;grid-row:3;margin:12px 0 0;max-width:none;font-size:clamp(48px,4.6vw,76px);line-height:1.08}
  .bo-finale.mff3-fin .mff3-h .mff3-l{display:block}
  .bo-finale.mff3-fin .mff3-lead{grid-column:1;grid-row:4;margin:clamp(16px,2.6vh,28px) 0 0;max-width:20em;text-wrap:pretty}
  .bo-finale.mff3-fin .mff3-lead .mff3-l{display:block}
  .bo-finale.mff3-fin .mff3-card{grid-column:2;grid-row:1/6;align-self:center;margin:0;max-width:none}
  .bo-finale.mff3-fin .mff3-head{padding:14px 24px 12px}
  .bo-finale.mff3-fin .mff3-flow{grid-template-columns:minmax(0,300px) minmax(56px,1fr) minmax(0,330px);padding:clamp(18px,3vh,30px) 24px}
  .bo-finale.mff3-fin .mff3-nodes{gap:10px}
  .bo-finale.mff3-fin .mff3-node{padding:12px 14px}
  .bo-finale.mff3-fin .mff3-got{margin-top:8px}
  .bo-finale.mff3-fin .mff3-key{margin:10px -14px 0 0}
  .bo-finale.mff3-fin .mff3-open{margin-top:8px;padding:8px 12px 9px}
  .bo-finale.mff3-fin .mff3-obj{padding:16px 16px 14px}
  .bo-finale.mff3-fin .mff3-plain{margin-top:10px;padding:10px 12px}
  .bo-finale.mff3-fin .mff3-seal{margin:10px 0}
  /* the sweep layers sit on the ciphertext box's content edge — they move with its padding */
  .bo-finale.mff3-fin .mff3-body{margin-top:10px;padding:10px 12px}
  .bo-finale.mff3-fin .mff3-ghost{top:10px;right:12px;bottom:10px;left:12px}
  .bo-finale.mff3-fin .mff3-edge{top:10px;left:12px}
  .bo-finale.mff3-fin .mff3-slot{margin-top:10px;padding:8px 12px}
  .bo-finale.mff3-fin .mff3-foot{padding:12px 24px 14px}
}

/* ── 「다시 보기」 — 흐름을 처음부터 다시 그린다 (강사님 요청, 2026-10-13) ──────────────
   카드 맺음 줄 오른쪽 끝의 조용한 단추. 첫 재생이 끝나야 나타나고(`hidden` 을 finale.js 가 걷는다),
   다시 도는 동안은 맺음 줄과 함께 사라진다. 움직임 줄이기 · GSAP 없음이면 끝까지 숨는다 — 다시 볼 것이 없다. */
.mff3-fin .mff3-foot{align-items:center}
.mff3-fin .mff3-foot > span:first-child{margin-right:auto}   /* 「읽을 수 있는 곳」 and the button sit together on the right */
.mff3-fin .mff3-replay{flex:none;display:inline-flex;align-items:center;gap:6px;margin:-4px -8px -4px 0;padding:4px 10px;
  border:1px solid rgba(247,233,227,.18);border-radius:999px;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;line-height:1.4;color:var(--mff3-on-2);white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.mff3-fin .mff3-replay[hidden]{display:none}
.mff3-fin .mff3-replay svg{flex:none;width:14px;height:14px}
.mff3-fin .mff3-replay:hover{color:var(--mff3-on);border-color:rgba(247,233,227,.4);background:rgba(247,233,227,.06)}
.mff3-fin .mff3-replay:focus-visible{outline:2px solid var(--mff3-gold);outline-offset:2px}
@media (max-width:760px){
  /* phone: its own line, a full 44px touch target */
  .mff3-fin .mff3-replay{min-height:44px;margin:4px 0 0;padding:6px 14px}
}
@media (prefers-reduced-motion:reduce){ .mff3-fin .mff3-replay{display:none} }