/* ============================================================
   Another Angle — 사이트 스타일 한 벌
   2026-09-19. 이전 판(히어로 캔버스 · grain · reveal · band 두 시스템)을
   버리고 manim.community 처럼 단순한 문서 톤 한 벌로 다시 깔았다.
   규칙:
     - 바탕은 파치먼트 #FDF6E3, 글자는 잉크 #152740. 딴 판 안 깐다.
     - JS 없음. 애니메이션은 링크 hover 정도까지만.
     - 제목 Jost(로고타입과 통일) · 본문 STIX Two Text · 코드 Plex Mono
     - 클래스는 적게. 페이지는 내용만 갈아끼운다.
   ============================================================ */

:root {
  --paper:      #FDF6E3;
  --paper-2:    #F8F0DC;   /* 카드·인용 바닥 */
  --ink:        #152740;
  --ink-soft:   #4A5A6E;   /* 보조 글 */
  --rule:       rgba(21, 39, 64, 0.14);
  --rule-soft:  rgba(21, 39, 64, 0.08);
  --link:       #0E5C6B;   /* 딥타이드에서 끌어온 링크색 */
  --link-hover: #093F4A;
  --kicker:     #6F5330;   /* 카멜을 읽히는 명도까지 내린 값 */

  --sans:  'Jost', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', Consolas, monospace;

  --wrap: 720px;
  --wrap-wide: 1020px;
}

/* 한국어판 — 라틴 글꼴은 그대로 두고 한글만 Noto 로 받는다.
   한글은 같은 크기에서 더 빽빽해 보이므로 행간을 조금 넓힌다. */
html[lang="ko"] {
  --serif: 'STIX Two Text', 'Noto Serif KR', Georgia, serif;
  --sans:  'Jost', 'Noto Sans KR', system-ui, sans-serif;
}
html[lang="ko"] body { line-height: 1.85; }
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { line-height: 1.38; }
html[lang="ko"] .kicker { letter-spacing: 0.06em; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  white-space: nowrap;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0.08em 0.34em;
}

/* ── 폭 ─────────────────────────────────────────────────── */
.wrap      { max-width: var(--wrap);      margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 24px; }

/* ── 윗줄 ───────────────────────────────────────────────── */
.topbar { border-bottom: 1px solid var(--rule); background: var(--paper); }
.topbar .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 62px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  letter-spacing: 0.01em; color: var(--ink); text-decoration: none;
}
.brand img { width: 22px; height: 22px; display: block; }
.links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.links a {
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  color: var(--ink-soft); text-decoration: none;
}
.links a:hover { color: var(--ink); }
.links a[aria-current="page"] { color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.links .out { color: var(--link); }

/* ── 버튼 ───────────────────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.btn-row.center { justify-content: center; }
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.2;
  padding: 12px 20px; border-radius: 5px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none;
}
.btn:hover { background: #0E1B2E; color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* ── 제목 ───────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; color: var(--ink); line-height: 1.2; }
h1 { font-size: clamp(32px, 5.2vw, 46px); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }
h2 { font-size: clamp(23px, 3vw, 28px); margin: 48px 0 14px; }
h3 { font-size: 19px; margin: 32px 0 8px; }

.kicker {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--kicker); margin: 0 0 12px;
}
.subtitle { font-size: 19px; color: var(--ink-soft); margin: -6px 0 18px; }
.meta { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }

p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

/* 두괄식 직답 블록 — AI 가 뽑아가고 사람이 먼저 읽는 자리 */
.lede {
  font-size: 19.5px; line-height: 1.7; color: var(--ink);
  border-left: 3px solid #B08B5C; padding-left: 20px; margin: 0 0 26px;
}

/* 세로 여백만 건드린다 — 단축 padding 을 쓰면 .wrap 의 좌우 24px 을
   통째로 덮어써서 좁은 화면에서 글이 가장자리에 붙는다. */
.pad { padding-block: 52px; }
.pad-sm { padding-block: 34px; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ── 히어로 ─────────────────────────────────────────────── */
.hero { text-align: center; padding: 84px 0 64px; }
.hero h1 { font-size: clamp(38px, 6.4vw, 60px); margin-bottom: 18px; }

/* ── 히어로 로고마크 + 마우스 글린트 ────────────────────────
   로고 재질은 구워진 것(brand/logomarks/out/logomark-chrome-*.png)을 그대로
   쓰고, 그 위에 인트로 영상의 글린트만 얹는다. 흰 번짐이 아니라
   가는 흰 심 + 가장자리 색분산(시안/주황) — intro-glow mp4 의 그 선이다.
   빛은 로고 알파로 마스킹되므로 종이 위로는 절대 새지 않는다.
   ------------------------------------------------------------ */
.mark-h1 { margin: 0 0 26px; line-height: 0; }
.mark { position: relative; display: inline-block; width: min(460px, 76vw); }
.mark > img { display: block; width: 100%; height: auto; }

.mark .sheen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url(/assets/logomark-chrome.webp);
          mask-image: url(/assets/logomark-chrome.webp);
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .5s ease;
}
.mark.lit .sheen { opacity: 1; }

.mark .sheen i {
  position: absolute; left: -70%; top: -70%; width: 240%; height: 240%;
  /* 먼저 결의 각도로 돌린 뒤 그 안에서 밀어야 빛이 면을 따라 미끄러진다 */
  transform: rotate(-28deg) translateY(var(--glint, 0%));
  transition: transform .16s ease-out;
  /* 띠 전체가 막대 두께(화면에서 ~30px) 안에 들어와야 색이 보인다.
     넓게 잡으면 시안·주황이 실루엣 바깥으로 나가 마스크에 잘린다. */
  background: linear-gradient(to bottom,
    transparent             47.4%,
    rgba(255,255,255,0.05)  48.85%,
    rgba( 80,255,240,0.40)  49.55%,  /* 앞쪽 색분산 — 실처럼 가늘게 */
    rgba(190,245,255,0.72)  49.86%,
    rgba(255,255,255,0.98)  49.97%,  /* 흰 심 */
    rgba(255,255,255,0.98)  50.03%,
    rgba(255,220,175,0.72)  50.14%,
    rgba(255,150, 60,0.40)  50.45%,  /* 뒤쪽 색분산 */
    rgba(255,255,255,0.05)  51.15%,
    transparent             52.6%);
}
.hero p.tagline {
  font-size: 20px; line-height: 1.65; color: var(--ink-soft);
  max-width: 600px; margin: 0 auto;
}

/* ── 카드 세 장 ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 7px; padding: 22px 24px;
}
.card:hover { border-color: var(--ink); color: var(--ink); }
.card .card-kicker {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--kicker);
}
.card h3 { margin: 8px 0 8px; font-size: 20px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ── 챕터 줄 목록 ───────────────────────────────────────────
   한 줄 = 본문 링크(챕터 페이지) + 썸네일 링크(유튜브). 둘은 형제로
   나란히 둔다 — 링크 안에 링크를 넣으면 안 되기 때문. */
.chapters { border-top: 1px solid var(--rule); margin-top: 28px; }
.chapters .row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  align-items: center; border-bottom: 1px solid var(--rule);
}
.chapters .row:hover { background: var(--paper-2); }
.chapters .rowmain {
  display: grid; grid-template-columns: 112px 1fr; gap: 20px;
  padding: 22px 4px; text-decoration: none; color: var(--ink);
}

.chapters .thumb {
  position: relative; display: block; width: 168px; margin-right: 4px;
  border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  line-height: 0; background: var(--paper-2);
}
.chapters .thumb img { width: 100%; height: auto; display: block; }
.chapters .thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(13, 24, 40, 0.16); transition: background .2s ease;
}
.chapters .thumb:hover .play { background: rgba(13, 24, 40, 0.34); }
.chapters .thumb .play::after {
  content: ''; width: 0; height: 0;
  border-left: 13px solid rgba(253, 246, 227, 0.95);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.chapters .num {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--kicker);
  padding-top: 4px; white-space: nowrap;
}
.chapters h3 { margin: 0 0 6px; font-size: 20px; }
.chapters p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── 영상 ───────────────────────────────────────────────── */
.embed {
  position: relative; aspect-ratio: 16 / 9; margin: 26px 0;
  border: 1px solid var(--rule); border-radius: 7px; overflow: hidden;
  background: #0D1828;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 표 ─────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 16px; }
caption {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft);
  text-align: left; margin-bottom: 10px;
}
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
th {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--kicker);
  border-bottom: 1px solid var(--rule);
}
td { font-variant-numeric: tabular-nums; }

/* ── 곁줄 ───────────────────────────────────────────────── */
.aside {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 7px; padding: 22px 24px; margin: 30px 0;
}
.aside > :last-child { margin-bottom: 0; }
.aside .embed { margin-bottom: 14px; }

/* ── 영상 속 목차 ───────────────────────────────────────── */
ul.toc { list-style: none; padding: 0; margin: 18px 0 0; }
ul.toc li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; margin-bottom: 7px; font-size: 16.5px; }
ul.toc .t { font-family: var(--mono); font-size: 14px; color: var(--kicker); padding-top: 2px; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.faq summary {
  font-family: var(--sans); font-weight: 600; font-size: 17.5px;
  padding: 14px 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+ '; color: var(--kicker); }
.faq details[open] summary::before { content: '\2212 '; }
.faq .answer { padding-bottom: 6px; }
.faq .answer > :last-child { margin-bottom: 0; }

/* ── 근황 줄 ────────────────────────────────────────────── */
.note { padding: 24px 0; border-top: 1px solid var(--rule); }
.note:first-of-type { border-top: 0; }
.note .date { font-family: var(--mono); font-size: 13.5px; color: var(--kicker); }
.note h3 { margin: 6px 0 8px; }
.note p { margin: 0; font-size: 16.5px; }

/* ── Deep Tide 덩어리 ───────────────────────────────────────
   영상 바탕색을 그대로 가져온 판. 바탕의 주인은 계속 종이색이고
   이 판은 중간중간 띠로만 깐다 — 꼬리말, 그리고 가끔 CTA 한 줄.
   원본값: imeb-linear-algebra/scenes/common/deep_tide.py
   ------------------------------------------------------------ */
.tide {
  background: linear-gradient(135deg, #1C1450 0%, #0D1828 54%, #03232F 100%);
  color: #F2FAFF;
}
.tide h1, .tide h2, .tide h3, .tide h4, .tide strong { color: #F2FAFF; }
.tide p, .tide li { color: #BDD3E2; }
.tide .kicker { color: #7FC7D9; }
.tide .subtitle, .tide .meta { color: #A9C1D6; }
.tide a { color: #5AC8FF; }
.tide a:hover { color: #9BDDFF; }
.tide code { background: rgba(242, 250, 255, 0.10); border-color: rgba(242, 250, 255, 0.16); color: #DCEEF8; }
.tide .lede { color: #EAF4FB; border-left-color: #5AC8FF; }
.tide .btn { background: #F2FAFF; border-color: #F2FAFF; color: #0D1828; }
.tide .btn:hover { background: #FFFFFF; color: #0D1828; }
.tide .btn.ghost { background: transparent; color: #F2FAFF; border-color: rgba(242, 250, 255, 0.34); }
.tide .btn.ghost:hover { background: rgba(242, 250, 255, 0.10); border-color: #F2FAFF; color: #F2FAFF; }

/* ── 꼬리말 ─────────────────────────────────────────────── */
/* 꼬리말은 늘 딥타이드 위에 앉는다. 앞 섹션이 이미 딥타이드면
   두 블록을 겹치지 말고 .tide 한 판 안에 같이 넣는다 — 따로 깔면
   그라데이션이 다시 시작해 이음매가 보인다. */
.foot { padding: 54px 0 46px; margin-top: 76px; }
.tide > .foot {
  margin-top: 0; padding-top: 44px;
  border-top: 1px solid rgba(242, 250, 255, 0.12);
}
.foot .fcols {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 34px 28px; align-items: start;
}
.foot .fbrand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  color: #F2FAFF; text-decoration: none;
}
.foot .fbrand img { width: 20px; height: 20px; }
.foot .fblurb { font-size: 15px; line-height: 1.65; margin: 12px 0 0; max-width: 340px; }
.foot h4 {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 12px; color: #F2FAFF;
}
.foot ul.fl { list-style: none; margin: 0; padding: 0; }
.foot ul.fl li { margin-bottom: 9px; }
.foot ul.fl a {
  font-family: var(--sans); font-size: 15px; color: #C6DCEA; text-decoration: none;
}
.foot ul.fl a:hover { color: #FFFFFF; text-decoration: underline; }
.foot .fcopy {
  font-family: var(--sans); font-size: 13.5px; color: #8FAEC2;
  margin: 40px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(242, 250, 255, 0.12);
}

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .topbar .bar { min-height: 0; padding-block: 12px; }
  .links { gap: 16px; }
  .hero { padding: 56px 0 44px; }
  .pad { padding-block: 40px; }
  .chapters .row { grid-template-columns: 1fr; gap: 0; }
  .chapters .rowmain { grid-template-columns: 1fr; gap: 6px; padding-bottom: 14px; }
  .chapters .thumb { width: calc(100% - 8px); margin: 0 4px 20px; }
  ul.toc li { grid-template-columns: 56px 1fr; }
  .lede { padding-left: 16px; }
}

@media (max-width: 860px) {
  .foot .fcols { grid-template-columns: repeat(2, 1fr); }
  .foot .fcols > :first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark .sheen, .mark .sheen i { transition: none; }
}