/* ==========================================================================
 * article.css — 본문 아티클
 * ==========================================================================
 * 리멤버 프롤로그(prologue.rememberapp.co.kr)의 아티클 본문 규격을 그대로 옮겼다.
 * 원본은 Framer 로 만들어져 값이 요소마다 인라인 커스텀 프로퍼티로 흩어져 있는데,
 * 그중 실제로 쓰이는 여섯 종만 골라 클래스로 정리한 것이다.
 *
 * ── 원본에서 계측한 값 ────────────────────────────────────────────────
 *   본문 컬럼   max-width 740px (원본 .framer-i9ba7u)
 *   본문        Pretendard Regular 18px / 줄높이 28px / #1a1a1a / 문단 간격 16px
 *   소제목      Pretendard Bold 30px(데스크톱) · 24px(태블릿·모바일) / 자간 -0.01em
 *   Point 라벨  27px(데스크톱) · 21px(태블릿) · 19px(모바일) / #f5333f
 *   인용문      Pretendard SemiBold 20px(데스크톱) · 18px / #e02d39
 *   출처        Pretendard Regular 18px / #777777
 *   이미지 캡션 Pretendard Regular 12px / #777777
 *
 * ⚠ Point 라벨의 원본 서체는 Founders Grotesk Condensed(유료, Klim)다.
 *   여기서는 살 수 없으므로 Pretendard 를 좁은 자간·굵기로 대신 쓴다.
 *   서체를 확보하면 --article-point-font 한 줄만 바꾸면 된다.
 * ========================================================================== */

:root {
  --article-max: 740px;
  --article-ink: #1a1a1a; /* 본문 글자 */
  --article-quiet: #777777; /* 출처·캡션 */
  --article-point: #f5333f; /* Point 라벨 */
  --article-quote: #e02d39; /* 인용문 */
  --article-point-font: var(--font-display);
}

/* 무대 바로 다음에 오는 흰 지면.
   .stage + * 규칙(css/stage/stack.css)이 배경과 z-index 를 함께 잡는다 —
   그 규칙이 무대를 덮는 역할이라 여기서 배경을 또 칠하지 않는다. */
/* 아티클은 여러 토막으로 나뉜다(중간에 장 표지가 끼기 때문). 그래서 배경을 여기서 칠한다 —
   무대를 덮는 역할은 첫 토막만 하고(css/stage/stack.css 의 `.stage + *`),
   나머지 토막은 자기 배경만 있으면 된다. */
.article {
  background-color: #ffffff;
  /* 위아래 180px — 앞뒤의 사각형 화면과 본문 사이 여백.
     ⚠ 좌우 여백은 **여기가 아니라 .article__inner** 가 갖는다(아래 참고). */
  padding: 180px 0;
}

/* ★ 글 단은 **740px 한 단, 화면 가운데** ★ (2026-08-29 되돌림)
   원본(리멤버 프롤로그)의 본문 컬럼 규격 그대로다.
   중간에 인트로 본문(#intro-body)과 같은 '1200 캔버스 안 오른쪽 좁은 단'으로 맞춰 봤는데,
   왼쪽 절반이 비어 **2단처럼 보인다**는 지적을 받아 원래대로 돌렸다(채린).
   ⚠ 폭은 --article-max 한 곳에만 있다. 좌우 24px 은 안여백이라 폭에 더해 잡는다
     (그래야 글 폭이 화면과 무관하게 740px 로 유지된다).
   ⚠ 다시 오른쪽 단으로 가려면 여기를 --read-canvas / --read-x / --read-w 로 되돌리면 된다
     (그 세 값은 css/chapter-cover.css 의 :root 에 있고, 인트로 본문이 지금도 쓰고 있다). */
.article__inner {
  width: min(100%, calc(var(--article-max) + 48px));
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ── 본문 ─────────────────────────────────────────────────────────── */
.article__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--article-ink);
  margin: 0 0 30px; /* 문단 사이 간격 (원본은 16px). 2026-08-29 인트로 본문과 같은 30px 으로 맞춤 */
}

.article__body strong {
  font-weight: 700;
}

/* ── Point 라벨 ───────────────────────────────────────────────────── */
.article__point {
  font-family: var(--article-point-font);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--article-point);
  /* 앞 문단과 확실히 끊어 새 꼭지가 시작된 걸 알린다 */
  margin: 88px 0 8px;
}

/* ── 소제목 ───────────────────────────────────────────────────────── */
.article__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--article-ink);
  /* 아래 틈 **16px** (2026-09-01 채린이 캡처로 이 자리를 짚었다, 데스크톱).
     ⚠ 소제목은 행간 1.4 라 글자 상자가 위아래 6px 씩 두껍다 — 같은 값을 줘도 지면 제목(행간 1.25)보다
       넓어 보인다. 16px 이면 **눈에 보이는 틈 28px** 로 지면 제목(18px → 28px)과 같아진다.
     ⚠ 위 60px 은 앞 문단과의 사이라 뜻이 다르다 — 그대로 둔다.
     ⚠ 모바일은 css/cardbody.css 의 `html.is-mobile-static` 규칙이 16px 로 따로 준다. */
  margin: 60px 0 16px;
}

/* ★ 연혁 머리글(#history-intro)의 제목만 **인트로 제목과 같은 크기** ★ (2026-08-29 채린 요청)
   ⚠ .article__heading 자체를 키우면 안 된다 — 파트2 본문의 소제목들이 같은 클래스를 쓴다.
     그래서 그 지면 안에서만 덮는다.
   ⚠ 크기는 css/chapter-cover.css 의 .chapter-read__top 과 **같은 값**이다(48px / 모바일 min(13vw,48px)).
     한쪽을 바꾸면 두 제목이 어긋나므로 함께 볼 것.
   굵기 700 · 행간 1.4 · 자간 -0.01em 은 원래 .article__heading 값과 이미 같아 다시 적지 않는다. */
#history-intro .article__heading {
  font-size: 30px;   /* 2026-08-30 채린 지정 (전 48px) */
  word-break: keep-all;      /* 낱말 한가운데서 끊기지 않게 (인트로 제목과 같은 처리) */
  /* 제목 아래 틈 **20px** (2026-09-01 채린, 데스크톱). 내력: 32 → 20px.
     ⚠ 모바일은 css/cardbody.css 의 `html.is-mobile-static #history-intro .article__heading`
       이 16px 로 덮는다 — 데스크톱만 이 값을 본다. */
  margin: 0 0 20px;
}

/* ⚠ 위 margin-top: 10px 만으로는 간격이 10px 가 되지 않는다.
   맞닿은 두 요소의 세로 여백은 **큰 쪽 하나로 합쳐지기** 때문에(마진 상쇄),
   앞 문단의 아래 여백 34px 를 그대로 두면 34px 가 이긴다.
   그래서 소제목 바로 앞 문단만 아래 여백을 없앤다. */
.article__body:has(+ .article__heading) {
  margin-bottom: 0;
}

/* ── 대사 ─────────────────────────────────────────────────────────────
   본문 흐름 안에 끼는 한 줄짜리 말. 색을 주지 않고 굵기만 올려 세운다
   (빨간 .article__quote 는 인터뷰 인용용이라 성격이 다르다).
   앞뒤로 문단보다 넉넉히 띄워 대사가 혼자 서 있게 한다. */
.article__say {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  color: #00aaff;
  margin: 30px 0;
}

/* ── 인용문 + 출처 ────────────────────────────────────────────────── */
.article__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--article-quote);
  margin: 40px 0 12px;
}

.article__source {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;   /* 2026-08-31 채린 지정 (전 1.5) — 출처 줄 다섯 지면 공통 */
  color: var(--article-quiet);
  margin: 0 0 40px;
}

/* ── 이미지 + 캡션 ────────────────────────────────────────────────── */
.article__figure {
  margin: 40px 0;
}

.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* 캡션이 그림 **위**에 오는 변형. 도해처럼 "무엇을 보여 주는 그림인지"를
   먼저 알려야 할 때 쓴다(원본 아티클의 "자체 제작 도해" 배치). */
.article__figure--label-top {
  display: flex;
  flex-direction: column;
}

.article__figure--label-top figcaption {
  order: -1;
  margin: 0 0 12px;
}

.article__figure figcaption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;   /* 2026-08-30 채린 지정 (전 12px) */
  line-height: 1.6;
  color: var(--article-quiet);
  margin-top: 12px;
}

/* ==========================================================================
 * 장 표지 (.chapter)
 * ==========================================================================
 * 본문 중간에 끼는 "Part I." 같은 장 구분 화면.
 * 무대 마지막의 Intro. 사각형과 **같은 그림**이라 규격을 그대로 맞췄다.
 *   사각형   가로 68% · 세로 56% · 가운데에서 3% 아래   (js/stage/scenes/swirl-titles.js 의 PANEL)
 *   글자     4.3vw · 굵기 600 · 행간 1.2                (css/stage/swirl.css 의 .swirl__title)
 *   라벨 아래 여백 150px                                 (같은 파일 .swirl__line:first-child)
 * 저쪽 값을 바꾸면 여기도 같이 봐야 두 화면이 안 어긋난다.
 *
 * 저기는 스크롤에 맞춰 사각형이 오므라들지만 여기는 그냥 놓인 그림이다 —
 * 본문을 읽어 내려가다 만나는 표지라 움직임이 없는 편이 낫다.
 * ========================================================================== */

/* 트랙. 안에서 이렇게 나뉜다 —
     1화면          사각형이 오므라들고 글이 올라온다 (연출)
     --chapter-hold  **다 완성된 그림 그대로 머무는 구간** (아래 참고)
     1화면          다음 섹션이 위로 덮으며 올라온다
   무대(.stage)가 하는 것과 같은 방식이다. margin-bottom 으로 아래 한 화면을 당겨
   다음 섹션을 끌어올리고, 그동안 이 화면은 sticky 로 붙어 있어 고정돼 보인다.

   ⚠ 연출 길이(1화면)는 트랙 높이가 아니라 js/mod-chapter.js 가 화면 높이로 계산한다.
     그래서 트랙만 늘리면 **연출 속도는 그대로인 채 머무는 시간만** 길어진다.

   ★ Part I. 이 머무는 시간 바꾸는 곳 ★ 아래 --chapter-hold.
     예전에는 이 값이 0 이라, 사각형이 완성되는 그 순간 곧바로 다음 섹션이 올라왔다.
     ⚠ 이건 시간이 아니라 **스크롤 거리**다. 스크롤 속도에 따라 체감 시간이 달라진다.
       보통 속도로 굴리면 80svh 가 대략 1초쯤이다. 더 오래 머물게 하려면 키운다.
     ⚠ height 에서 --chapter-hold 를 빼면 안 된다 — margin-bottom 의 -100svh 와
       한 세트라, 트랙이 짧아지면 다음 섹션이 연출이 끝나기 전에 덮어 버린다. */
.chapter {
  position: relative;
  --chapter-hold: 80svh;
  height: calc(300svh + var(--chapter-hold));
  margin-bottom: -100svh;
  background-color: var(--color-bg);
}

/* 장 표지 바로 다음 섹션이 그 위로 덮으며 올라온다.
   무대 다음의 `.stage + *` 와 같은 역할이다 — 배경은 .article 이 이미 칠한다. */
.chapter + * {
  position: relative;
  z-index: 1;
}

/* 트랙 안에서 붙어 있는 한 화면.
   ★ 사각형 바깥 배경 바꾸는 곳 ★ 아래 background-color.
   사진을 깔고 싶으면 아래 주석을 풀면 된다(assets/img/chapter-bg.jpg 는 그대로 있다).
   배경을 트랙(.chapter)이 아니라 여기에 거는 이유: 트랙은 세 화면 높이라
   거기 걸면 사진이 그만큼 늘어난다. 이 한 화면에 걸어야 화면에 꽉 맞는다.
   ⚠ 사진을 같은 이름으로 덮어썼으면 ?v= 날짜를 올려라(안 그러면 캐시가 옛것을 쓴다).

   background-image: url("../../assets/img/chapter-bg.jpg?v=260923-1154");
   background-size: cover;
   background-position: center;
*/
.chapter__screen {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* 하늘색 면. 처음엔 화면 전체, 끝에는 가운데 사각형.
   clip-path 는 js/mod-chapter.js 가 매 프레임 넣는다 —
   아래 값은 JS 가 없을 때(스크립트 실패) 보이는 안전한 최종 상태다. */
.chapter__fill {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  clip-path: inset(19% 16% 25% 16%);
}

/* 글. 사각형이 아니라 **화면** 기준으로 놓인다 — 무대 쪽과 같은 방식이라 위치가 일치한다.
   20px 아래로 내린 것도 무대의 --t2-offset-y 와 같은 값이다. */
.chapter__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  translate: 0 20px;
  text-align: center;
  /* 사각형이 밝은 하늘색(--accent)이라 잉크(검정) 글자다.
     사각형을 어두운 색으로 바꾸면 여기도 --cream 으로 같이 뒤집어야 한다. */
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4.3vw;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* 줄 마스크. 넘치는 부분을 잘라 내서, 안쪽 줄이 아래에서 올라오는 것처럼 보이게 한다.
   ⚠ overflow:hidden 이 핵심이다. 빼면 글자가 마스크 밖에서도 보여 연출이 사라진다. */
.chapter__mask {
  display: block;
  overflow: hidden;
  /* 받침 있는 한글이 잘리지 않게 아래를 조금 열어 두고 그만큼 끌어올린다 */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.chapter__line {
  display: block;
  will-change: translate;
  /* JS 가 없을 때(스크립트 실패) 그냥 제자리에 보인다 — 안전한 실패 */
  translate: 0 0;
}

.chapter__label {
  margin: 0 0 150px;
}

.chapter__title {
  margin: 0;
}

@media only screen and (width < 768px) {
  .chapter__text {
    font-size: 6.1vw;
    letter-spacing: -0.01em;
  }

  .chapter__label {
    margin-bottom: 80px;
  }
}

/* ── 세로(모바일) ─────────────────────────────────────────────────────
   원본은 태블릿(21px)과 모바일(19px)을 따로 뒀지만, 이 프로젝트는
   브레이크포인트가 768px 하나뿐이라 모바일 값으로 합친다.
   (경계를 나누고 싶으면 css/tokens.css 7번 항목의 목록에 이 파일도 추가할 것) */
@media only screen and (width < 768px) {
  .article {
    /* 좌우는 .article__inner 가 24px 을 갖는다 — 인트로 본문(캔버스 24px)과 같은 값이다.
       전에는 여기서 20px 을 줘서 두 지면의 왼쪽 끝이 4px 어긋났다. */
    padding: 72px 0 100px;
  }

  /* 문단 사이도 인트로 본문과 같은 값(모바일 24px). */
  .article__body { margin-bottom: 24px; }

  .article__point {
    font-size: 19px;
    margin-top: 64px;
  }

  .article__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }

  /* 연혁 머리글 제목은 인트로 제목과 같은 규칙을 따른다(데스크톱 60px). */
  #history-intro .article__heading,
  .article__title {
    font-size: min(13vw, 48px);
  }

  .article__quote {
    font-size: 18px;
  }
}

/* 파트 I 본문(#part-1-body)의 도해 — **아래 100px** (2026-09-02 채린. 60 → 100).
   ⚠⚠ **화면에 보이는 틈은 이 값만으로 정해지지 않는다.** 바로 뒤가 소제목(h3.article__heading,
     `margin: 60px 0 16px`)이라 **맞닿은 세로 여백은 큰 쪽 하나로 합쳐진다**(마진 상쇄).
     그래서 이 값이 40 이든 60 이든 실제 틈은 **60px 로 같았다**(390·1440 둘 다 실측) —
     **61 이상이 되어야 이쪽이 이긴다.** 100 은 그 선을 넘겼으므로 화면에서 40px 벌어진다.
     ★ 조절 ★ 이 숫자만 바꾼다. 60 이하로 내리면 다시 소제목의 60 이 이겨 변화가 안 보인다. */
#part-1-body .article__figure {
  margin-bottom: 100px;
}

/* 연혁 머리글 지면의 도해 — **위는 넉넉히(80px), 아래는 0** (2026-08-30 채린 지정).
   ⚠ 다른 지면의 그림(.article__figure)은 위아래 40px 그대로다 — 여기만 다르다.
   아래를 0 으로 둔 이유는 아래 #history-intro 규칙에 적어 뒀다. */
#history-intro .article__figure {
  margin: 80px 0 0;
}

/* 도해 아래 흰 여백을 줄인다 (2026-08-30 채린 지적 "밑에 흰 색 영역을 줄여야지").
 * 도해 밑이 **418px** 비어 있었다. 두 겹이 쌓여서다 —
 *   ① 도해 자신의 아래 바깥여백 80px            → 0 으로
 *   ② 지면 아래 안여백 --section-pad-bottom 18rem(338px) → 4rem(75px) 으로
 * 셋째 겹은 **시안 이미지 자신의 아래 빈칸**(2422×1298 중 446px ≈ 지면에서 135px)인데,
 * 그건 받은 그대로 두라는 지시가 있어 안 건드린다. 그래서 눈에 보이는 틈 ≈ 210px.
 * ★ 더 줄이려면 ★ 아래 값을 --space-8 로. (다른 섹션의 --section-pad-bottom 은 원본 실측값이라 안 건드린다) */
#history-intro {
  padding-bottom: var(--space-16);
}

/* ── 지면 머리글 (.article__title) ── (2026-08-30, Part III 본문)
   지면을 여는 큰 제목. 크기·굵기는 연혁 머리글(#history-intro .article__heading)과 **같은 값**이다
   — 두 지면이 같은 층위의 제목이라 크기가 갈리면 안 된다. 한쪽을 바꾸면 여기도 볼 것.
   ⚠ 본문 안 소제목(.article__heading, 30px)과는 다른 것이다. */
.article__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--article-ink);
  word-break: keep-all;
  margin: 0 0 32px;
}

/* ── 인용문 상자 (.article__quotebox) ── (2026-08-30, Part III 본문)
   생김새는 인트로 본문(css/chapter-cover.css 의 .chapter-read__quotebox)과 **같다** —
   왼쪽 세로 막대 #0046FF, 인용문 20px/600, 출처 회색.
   ⚠ 기존 .article__quote(빨강, eames 원본 색)와는 다른 것이다. 그쪽은 지금 쓰는 데가 없다. */
.article__quotebox {
  border-left: 4px solid var(--read-accent, #0046FF);
  padding-left: 24px;
  margin: 40px 0;
}
.article__quotebox .article__quote2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  /* ★ 크기·행간은 본문(.article__body)과 **같은 값** ★ (2026-08-30 채린 요청. 전 20px/1.55)
     구분은 굵기(600)와 왼쪽 세로 막대가 맡는다. */
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--article-ink);
  word-break: keep-all;
}
/* ★ 형광펜 ★ 인트로 본문 인용문(.chapter-read__mark)과 **같은 값**이다 (2026-08-30).
   ⚠ box-decoration-break: clone 이 있어야 여러 줄일 때 줄마다 칠이 온전히 들어간다.
   ⚠ 좌우 padding 은 주지 않는다 — 글이 밀려 아래 출처 줄과 왼쪽 끝이 어긋난다.
   ⚠ <mark> 는 브라우저 기본값이 노란 배경·검정 글자라 둘 다 여기서 덮는다. */
.article__mark {
  background-color: rgba(0, 122, 255, 0.2);
  color: inherit;
  padding: 3px 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.article__quotebox .article__source2 {
  /* ★ 자간 −0.01em ★ (2026-09-01 채린 "-0.01 로 통일")
     ⚠ 이 줄이 없으면 **부모 <blockquote> 의 자간이 px 그대로 상속**된다 —
       blockquote 기본 크기가 52.66px 이라 −0.025em 이 −1.32px 로 굳어, 16px 글자에
       −0.082em 이 걸렸다(채린 지적으로 발견). 상속을 끊으려면 값을 명시해야 한다. */
  letter-spacing: -0.01em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;   /* 2026-08-30 채린 지정 (전 18px) */
  line-height: 1.2;  /* 2026-08-31 채린 지정 (전 1.5) — 출처 줄 다섯 지면 공통 */
  color: var(--article-quiet);
  word-break: keep-all;
}

/* ── 모바일 형광펜이 줄끼리 겹치던 것 ── (2026-08-31 채린 지적)
 * 실측: 칠해지는 띠 높이 26px · 줄 간 거리 25px → **1px 씩 겹쳐** 그 줄만 진해 보였다.
 * 위아래 안여백을 3px → 2px 로 줄여 띠를 24px 로 만들면 1px 틈이 생긴다.
 * ⚠ 좌우는 계속 0 이다 — 좌우에 여백을 주면 글이 밀려 아래 출처 줄과 왼쪽 끝이 어긋난다.
 * ⚠ 인트로 본문 인용문(.chapter-read__mark)도 같은 값을 써야 두 지면이 안 갈린다. */
@media (max-width: 767px) {
  .article__mark,
  .chapter-read__mark {
    padding: 2px 0;
  }

  /* ★ 막대 ~ 글 사이 ★ 모바일 **20px** (2026-09-01 채린 지정. 데스크톱은 24px 그대로).
     ⚠ 인트로 본문 인용문(css/chapter-cover.css 의 .chapter-read__quotebox)도 같은 20px 이다 —
       전에는 인트로 16 · 여기 24 로 갈려 있었다. 한쪽만 고치면 세 지면이 다시 어긋난다.
     ⚠ 막대 굵기(4px)는 안 건드린다. */
  .article__quotebox { padding-left: 20px; }
}