/* M3(2판) — 자료실이 주인공. 항목마다 «실행 기록» 블록(돌린 날짜 · 환경 · 결과 + 결과 화면)을 같은 꼴로 반복한다.
   덜어낸 판: 상자는 결과 화면 틀과 누르는 것만 · 칸 사이는 선 한 줄 · 날짜는 실제 날짜만.
   검정 판 · 세리프 × 모노 · 금색 한 구절. 남색 없음. 글은 늘 불투명 단색 — 움직임은 자리(transform)와 가림막(clip-path)으로만. */
@font-face {
  font-family: "OHLO Serif";
  src: url("fonts/ohlo-serif.woff") format("woff");
  font-weight: 200 900; font-display: swap;
}
@font-face {
  font-family: "OHLO Sans";
  src: url("fonts/ohlo-sans.woff") format("woff");
  font-weight: 100 900; font-display: swap;
}

:root {
  --bg: #0A0A0A;                        /* 바탕 */
  --face: #141414;                      /* 면 — 펼친 메뉴 · 자료 페이지의 코드 틀 */
  --line: rgba(255, 255, 255, .12);     /* 1px 선 · 결과 화면 틀 */
  --line-2: rgba(255, 255, 255, .36);   /* 누르는 것의 테두리 */
  --ink: #EDEDED;                       /* 제목 */
  --ink-2: #D4D4D4;                     /* 본문 */
  --ink-3: #ADADAD;                     /* 메타 · 칸 이름 — 바탕 8.8:1 · 면 8.2:1 */
  --gold: #EBBD7C;                      /* 강조 — 협업 제목 한 구절 */
  --serif: "OHLO Serif", "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "OHLO Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "OHLO Sans", "Malgun Gothic", monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 6.67vw, 96px);     /* 1440 에서 96 → 판 폭 1248 */
  --bar-h: 64px;
  /* 크기 단계 다섯: 44 / 24 / 18 / 15 / 13 (1440 기준) */
  --fs-1: clamp(28px, 3.06vw, 44px);
  --fs-2: clamp(20px, 1.67vw, 24px);
  --fs-3: 18px;
  --fs-4: 15px;
  --fs-5: 13px;
}
@media (max-width: 760px) { :root { --bar-h: 56px; --fs-3: 17px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: var(--sans); font-size: var(--fs-4); line-height: 1.65; letter-spacing: -0.005em;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ol, dl, dd, fieldset { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: var(--fs-5); letter-spacing: .02em; line-height: 1.5; }
.wrap { width: 100%; max-width: calc(1248px + 2 * var(--pad)); margin: 0 auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .js-only { display: none !important; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 80; background: var(--ink); color: var(--bg); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ── 위 막대: 로고 A 왼쪽 · 메뉴 오른쪽 ── */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--pad);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; color: var(--ink); text-decoration: none; }
.lg { display: block; width: auto; height: 30px; flex: none; }
.brand-n { color: var(--ink-3); white-space: nowrap; }
.nav { display: flex; gap: 26px; }
.nav a, .menu-p a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar-r { display: flex; align-items: center; gap: 14px; }
.ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); cursor: pointer; text-decoration: none; }
.ico svg { width: 22px; height: 22px; }
.menu { position: relative; display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-p {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 2; min-width: 220px;
  display: grid; padding: 8px 0; background: var(--face); border: 1px solid var(--line-2);
}
.menu-p a { padding: 10px 18px; }
.menu-p a:hover { background: var(--bg); }
.btn-s { background: var(--ink); color: var(--bg); padding: 7px 16px; text-decoration: none; border: 1px solid var(--ink); white-space: nowrap; }
.btn-s:hover { background: var(--bg); color: var(--ink); }
.motion-toggle { background: transparent; border: 1px solid var(--line-2); color: var(--ink); padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.motion-toggle:hover { border-color: var(--ink); }
.mt-short { display: none; }

/* ── 머리판: 왼쪽 한 줄 · 오른쪽 «최근 기록» 장부 ── */
.mast { padding: 24px 0 20px; border-bottom: 1px solid var(--line); }
.mast-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 32px; align-items: end; }
.strap { font-family: var(--serif); font-weight: 300; font-size: var(--fs-1); line-height: 1.18; letter-spacing: -.012em; color: var(--ink); }
.strap .ln { display: block; }
.ledger-h { color: var(--ink-3); padding-bottom: 6px; }
.ledger-l { position: relative; overflow: hidden; height: calc(2 * 30px + 1px); border-bottom: 1px solid var(--line); }
.lg-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  height: 30px; border-top: 1px solid var(--line); background: var(--bg);
}
.lr-d { color: var(--ink); }
.lr-k { color: var(--ink-3); }
.lr-t { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 공통 글 ── */
.t1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-1); line-height: 1.22; letter-spacing: -.012em; color: var(--ink); }
.t2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-2); line-height: 1.38; color: var(--ink); }
.t3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.45; color: var(--ink); }
.sec-t { font-family: var(--serif); font-weight: 400; font-size: var(--fs-2); line-height: 1.38; color: var(--ink); }
.sec-n { color: var(--ink-3); white-space: nowrap; }
.sec-n a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.sec-n a:hover { border-color: var(--ink); }
.lab { color: var(--ink-3); }
.gold { color: var(--gold); font-style: normal; white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none;
}
.btn:hover { background: var(--bg); color: var(--ink); }

/* 첫 등장 — 가림막을 걷으며 아래에서 올라온다(투명도 없음). 정지 판·JS 없음에서는 처음부터 다 보인다 */
/* 걷힌 상태도 inset 으로 둔다 — none 과는 보간이 안 돼 가림막이 «한 번에» 사라진다. -40px 은 포커스 테두리가 잘리지 않을 여유 */
.fx .rv { clip-path: inset(-40px); transition: clip-path .9s var(--ease) var(--sd, 0ms), transform .9s var(--ease) var(--sd, 0ms); }
.fx .rv:not(.in) { clip-path: inset(0 0 100% 0); transform: translateY(24px); }

/* ── 실행 기록 블록 — 분류 줄 · 제목 · 결과 화면(틀 하나) · 칸 셋(선으로만 가른다) ── */
.rec { display: grid; align-content: start; min-width: 0; }
.rec-k { display: flex; flex-wrap: wrap; color: var(--ink-3); }
.rec-k > span + span::before { content: "·"; padding: 0 8px; }
.rec-t { margin: 4px 0 12px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.45; color: var(--ink); }
.rec--wide .rec-t { font-size: var(--fs-2); line-height: 1.38; }
.rec-a { text-decoration: none; }
.rec-a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.c-shot { min-width: 0; border: 1px solid var(--line); }
.cells { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); }
.cell { min-width: 0; padding: 9px 14px 0; }
.cell:first-child { padding-left: 0; }
.cell + .cell { border-left: 1px solid var(--line); }
.cn { color: var(--ink-3); letter-spacing: .06em; white-space: nowrap; }
.cv { color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.cv.mono { color: var(--ink); font-size: var(--fs-4); }
/* 날짜는 블록이 들어온 뒤 한 글자씩 «쳐진다» */
.fx .rec .cell:first-child .cv { clip-path: inset(-4px); transition: clip-path .7s steps(10, end) calc(var(--sd, 0ms) + .6s); }
.fx .rec:not(.in) .cell:first-child .cv { clip-path: inset(0 100% 0 0); }

/* 결과 화면 — 틀 안에 실행 결과 원문(표 · 목록). 들어올 때 줄이 하나씩 드러난다 */
.scr { display: flex; flex-direction: column; min-height: 100%; }
.scr-top { padding: 5px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-b { padding: 8px 12px 12px; overflow: hidden; }
.scr-t { border-collapse: collapse; width: 100%; color: var(--ink-2); }
.scr-t th, .scr-t td { padding: 3px 0 3px 10px; text-align: right; white-space: nowrap; font-weight: 400; }
.scr-t th:first-child, .scr-t td:first-child { padding-left: 0; text-align: left; }
.scr-t th { color: var(--ink-3); border-bottom: 1px solid var(--line); }
.scr-t tr.sum td { color: var(--ink); border-top: 1px solid var(--line); }
.scr-l { padding: 8px 12px 10px; display: grid; gap: 2px; }
.scr-l li { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.scr-l li > span:last-child { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-l .mono { color: var(--ink-3); flex: none; }
.fx .rec .scr-t tr, .fx .rec .scr-l li { clip-path: inset(-2px); transition: clip-path .5s var(--ease) calc(var(--sd, 0ms) + .5s + var(--i, 0) * 110ms); }
.fx .rec:not(.in) .scr-t tr, .fx .rec:not(.in) .scr-l li { clip-path: inset(0 100% 0 0); }
.scr-t tr:nth-child(2), .scr-l li:nth-child(2) { --i: 1; }
.scr-t tr:nth-child(3), .scr-l li:nth-child(3) { --i: 2; }
.scr-t tr:nth-child(4), .scr-l li:nth-child(4) { --i: 3; }
.scr-l li:nth-child(5) { --i: 4; }

/* 실행 영상 — 화면 안에서만 재생 · 줄임 설정이면 포스터만 */
.vid { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg); }
.rec--wide .c-shot { border: 0; }   /* 영상 안에 이미 창 틀이 있다 — 틀을 두 겹으로 두지 않는다 */
/* 넓은 판(영상 아래 칸)에서 화면이 낮으면 영상 폭을 높이에 맞춰 줄인다 — 대표 블록이 첫 화면에 온전히 든다.
   480 = 영상 위(막대·머리판·자료실 머리·제목 ≈ 355~375) + 영상 아래(단추 줄·칸 ≈ 105). 1440×900 에서는 안 걸린다(747 > 725) */
@media (min-width: 1101px) { .rec--wide .c-shot { max-width: max(400px, calc((100svh - 480px) * 16 / 9)); } }
.vid-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 0; color: var(--ink-3); }
.vid-btn { flex: none; white-space: nowrap; background: transparent; border: 1px solid var(--line-2); color: var(--ink); padding: 1px 12px; cursor: pointer; }
.vid-btn:hover { border-color: var(--ink); }

/* ── 자료실 — 첫 구간 ── */
.lib { padding-top: 16px; }
.lib-h { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 10px; }
.lib-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.lib-rows { display: grid; row-gap: 28px; }
.lib-notes { margin-top: 28px; color: var(--ink-3); display: grid; gap: 4px; }
.wait { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.wait > .mono:first-child { color: var(--ink-3); width: 2.5em; }
.wait > .mono:last-child { color: var(--ink); }

/* ── 채널에 올린 글 모음 — 첫 발행 전 ── */
.feed { margin-top: 96px; }
.feed .wait { margin-top: 12px; }

/* ── 채널 · 기업 협업 ── */
.sec { margin-top: 96px; }
.sec-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 24px; }
.chs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; margin-top: 20px; }
.ch { border-top: 1px solid var(--line); padding-top: 14px; }
.ch-n { color: var(--ink-3); }
.ch .t3 { margin-top: 12px; }
.ch-d { margin-top: 6px; }
.ch-a { margin-top: 12px; color: var(--ink); }
.ch-a a { text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.ch-a a:hover { border-color: var(--ink); }
.ch-wait { color: var(--ink-3); }
.pair { position: relative; }
.chan { padding-bottom: 120px; }
.fx .pair > .under { position: sticky; top: var(--stick, 0px); z-index: 0; }
.biz { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line-2); padding: 96px 0 120px; }
.biz-h { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.biz-h .t1 { margin-top: 10px; max-width: 13em; }
.biz-cta { margin-top: 24px; }
.steps-h { margin-top: 64px; color: var(--ink-3); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; margin-top: 14px; }
.step { border-top: 1px solid var(--line); padding-top: 16px; }
.step-n { color: var(--ink-3); }
.step .t2 { margin-top: 20px; }
.step p:last-child { margin-top: 10px; }

/* ── 바닥 ── */
.foot { border-top: 1px solid var(--line); padding: 64px 0 40px; margin-top: 0; }
.foot-g { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 48px; }
.foot-brand { display: inline-flex; margin: 0; }
.foot-brand .lg { height: 44px; }
.foot-b p { margin-top: 14px; }
.foot-n { display: grid; align-content: start; gap: 6px; }
.foot-n a { color: var(--ink); text-decoration: none; width: max-content; }
.foot-n a:hover, .foot-mail a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-c .lab, .foot-n .lab { margin-bottom: 6px; }
.foot-mail { font-family: var(--serif); font-size: var(--fs-2); color: var(--ink); }
.foot-mail a { text-decoration: none; }
.foot-c p:last-child { margin-top: 6px; }
.foot-m { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); }

/* ── 자료실 목록 · 자료 페이지 — 같은 막대·바닥 · 스크립트 없음 · 움직임 없음 ── */
.page-main { max-width: calc(880px + 2 * var(--pad)); padding-top: 48px; padding-bottom: 72px; }
.crumb { color: var(--ink-3); }
.crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.crumb a:hover { border-color: var(--ink); }
.page-main h1 { margin-top: 14px; font-family: var(--serif); font-weight: 300; font-size: var(--fs-1); line-height: 1.22; letter-spacing: -.012em; color: var(--ink); }
.lede { margin-top: 14px; color: var(--ink-2); }
.page-main > .cells { margin-top: 28px; border-top: 1px solid var(--line); }
.page-main section > h2, .more > h2 { margin: 56px 0 14px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-2); line-height: 1.38; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips a { font-family: var(--mono); font-size: var(--fs-5); color: var(--ink); text-decoration: none; border: 1px solid var(--line-2); padding: 4px 12px; }
.chips a:hover { border-color: var(--ink); }
.chips span { margin-left: 4px; color: var(--ink-3); }
.cards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.card a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.card a:hover .card-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.card-cat { display: block; font-family: var(--mono); font-size: var(--fs-5); color: var(--ink-3); }
.card-title { display: block; margin: 4px 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-3); line-height: 1.45; color: var(--ink); }
.card-use { display: block; color: var(--ink-2); }
.prose { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 8px; }
.prose h2 { margin: 36px 0 12px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-2); line-height: 1.38; color: var(--ink); }
.prose p { margin: 0 0 16px; white-space: pre-wrap; }   /* 초안의 줄바꿈을 그대로 보인다(build.py 는 해석하지 않는다) */
.prose pre { margin: 0 0 16px; padding: 14px 16px; overflow-x: auto; background: var(--face); border: 1px solid var(--line); color: var(--ink); }
.prose code { font-family: var(--mono); font-size: var(--fs-5); line-height: 1.6; white-space: pre; word-break: normal; overflow-wrap: normal; }
.more { margin-top: 24px; }
.cta { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.cta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.cta a:hover { border-color: var(--ink); }

/* ── 중간 폭 ── */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu { display: block; }
  .lib-g { grid-template-columns: 1fr; row-gap: 32px; }
  /* 대표 블록은 영상 왼쪽 · 칸 오른쪽(세로로) — 전폭 영상이면 첫 화면에 블록 하나가 다 안 들어온다 */
  .rec--wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 20px; }
  .rec--wide > .rec-k, .rec--wide > .rec-t { grid-column: 1 / -1; }
  .rec--wide .cells { grid-template-columns: 1fr; align-content: start; }
  .rec--wide .cell { padding: 8px 0 9px; border-left: 0; }
  .rec--wide .cell + .cell { border-top: 1px solid var(--line); }
  .rec--wide .cell:first-child { padding-top: 0; }
  .lib-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap: 32px; }
  .chs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .biz-h { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 900px) {
  .mast-g { grid-template-columns: 1fr; row-gap: 20px; }
}

/* ── 폰 ── */
@media (max-width: 760px) {
  .bar { padding: 0 16px 0 16px; gap: 8px; }
  .brand { gap: 10px; }
  .brand-n { display: none; }
  .bar-r { gap: 6px; }
  .mt-long { display: none; }
  .mt-short { display: inline; }
  .btn-s { padding: 6px 12px; }
  .mast { padding: 18px 0 16px; }
  .mast-g { row-gap: 16px; }
  .lg-row { column-gap: 10px; }
  .lr-k { display: none; }
  .lg-row { grid-template-columns: auto minmax(0, 1fr); }
  .sec, .feed { margin-top: 72px; }
  .sec-h { grid-template-columns: 1fr auto; }
  .sec-h .sec-d { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .chs { grid-template-columns: 1fr; }
  .biz { padding: 64px 0 80px; }
  .steps { grid-template-columns: 1fr; }
  .foot-g { grid-template-columns: 1fr; gap: 32px; }
}

/* 좁은 폰 — 대표 블록도 위아래로, 칸은 «이름 | 값» 줄로 */
@media (max-width: 560px) {
  .rec--wide { grid-template-columns: 1fr; }
  .cells, .rec--wide .cells { grid-template-columns: 1fr; margin-top: 2px; }
  .cell, .rec--wide .cell { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-left: 0; }
  .cell + .cell, .rec--wide .cell + .cell { border-top: 1px solid var(--line); }
  .rec--wide .cell:first-child { padding-top: 7px; }
  .cv { margin-top: 0; }
  .cn { padding-top: 2px; }
  .rec-t { margin: 2px 0 10px; }
  .scr-t th, .scr-t td { padding-left: 6px; }
}

/* 움직임 줄임: 움직이는 것 전부 멈춤 (fx 가 안 붙으므로 위 규칙은 이미 꺼진다 — 여기선 남는 전환만 끈다) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}