/* 라이트 고정 — 페이지 색이 실제 앱 스크린샷(라이트 테마)과 항상 일치해야 한다.
   다크모드를 지원하면 다크 배경에 라이트 스크린샷만 하얗게 뜬다. */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f4;
  --ink: #1a1a1a;
  --ink-2: #4a4a48;
  --ink-3: #7a7a76;
  --line: #e4e4e0;
  --accent: #1f6feb;
  --accent-ink: #ffffff;
  --code-bg: #f0f0ee;
  --tray: #f1f1ec;   /* 3·4 를 감싸는 공통 트레이 — bg-soft 보다 한 톤 더 눌렀다 */

  --w: 1280px;       /* 본문 폭. 2열이라 열 하나가 스크린샷 표시 폭(~590px)이 된다 */
  --gap: 56px;       /* 열 안에서 스텝 사이 — 테두리 없이 이 여백만으로 끊는다 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
  line-height: 1.6;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.3; letter-spacing: -0.015em; margin: 0; font-weight: 700; }
p { margin: 0; }
code {
  font-family: "SF Mono", Menlo, ui-monospace, monospace;
  font-size: 0.9em; background: var(--code-bg);
  padding: 0.08em 0.35em; border-radius: 4px;
}

/* ── 페이지 ─────────────────────────────────────────────
   스크롤 전제의 단일 칼럼. 좁아지면 그냥 좁아진다 — 별도 모바일 레이아웃은 두지 않지만
   사내 링크가 슬랙으로 도니 폰에서 깨지지는 않아야 한다. */
.page {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 17px;
}

/* ── 히어로 ───────────────────────────────────────────
   브랜드·제목·한 줄·버튼 네 덩이. 뷰포트 높이를 채우지 않는다 —
   min-height 로 화면을 채우면 남는 자리가 전부 빈 여백이 되어 첫인상이 텅 빈다.
   내용 높이 그대로 두고 위아래 여백만 잡는다. */
.hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: clamp(40px, 8svh, 88px) 0 24px;
  text-align: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; color: var(--ink-2); font-size: 16px; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 780; }
.hero .why { font-size: clamp(16px, 2vw, 20px); color: var(--ink-2); max-width: 30em; }
.hero .cta { margin-top: 14px; }

.cta {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--accent); color: var(--accent-ink);
  padding: 17px 30px; border-radius: 13px;
  font-size: 20px; font-weight: 700; white-space: nowrap;
}
.cta:hover { filter: brightness(1.08); }
.cta small { font-size: 15px; font-weight: 500; opacity: 0.85; }

/* ── 트랙 ─────────────────────────────────────────────
   두 갈래를 좌우 2열로 나란히 둔다. 각 열이 자기 번호로 3·4 까지 끝나므로
   같은 번호와 같은 컷이 "두 갈래가 같은 곳으로 간다"를 말한다.
   열 사이 세로선이 어디까지가 한 갈래인지 긋는다. */
.tracks {
  position: relative;
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 84px;
}
/* 한 번의 회의록을 만들 때 둘 중 하나를 쓴다. 두 이름 사이에 놓아야 바로 읽힌다 —
   카드 세로 가운데에 두면 스크롤 위치에 따라 화면 밖으로 나간다.
   absolute 라 그리드 흐름에서 빠지고, 두 카드가 1fr 1fr 을 그대로 나눈다. */
.or {
  position: absolute; left: 50%; top: 34px; transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20,20,18,.06);
  font-size: 17px; font-weight: 800; color: var(--ink-2); letter-spacing: -0.02em;
}
/* 갈래마다 카드. 선 하나로는 두 열이 갈라져 보이지 않았고, 테두리만으로도 약했다 —
   이름을 띠로 앉혀야 "여기부터 여기까지가 한 갈래"가 읽힌다. */
.track {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 0 22px 26px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(20,20,18,.04);
}
.track > .track-name {
  margin: 0 -22px; padding: 15px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  border-radius: 15px 15px 0 0;
}
/* ── 두 갈래 → 공통 트레이 ─────────────────────────────
   두 열에서 내려와 하나로 만나 아래로 꺾인다. 열 중심에서 상자까지 사선으로 그으면
   200px 넘는 획이 되어 늘어져 보였다 — 합류는 짧은 브래킷이 더 정확하다.
   viewBox 를 본문 폭(1232)과 1:1 로 잡아 좌표에 열 중심을 직접 박는다. */
.merge { display: block; width: 100%; height: auto; margin-top: 10px; color: #b9b9b2; }
.merge .lead { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.merge .head { fill: currentColor; stroke: none; }

.common {
  max-width: 648px; margin: 0 auto;   /* 안쪽 칼럼 600px + 좌우 padding 22px */
  background: var(--tray);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 22px 34px;
}
/* 트레이가 넓다고 컷까지 넓히면 위 트랙 컷의 두 배가 되어 부담스럽다.
   같은 급(≈590px)의 칼럼 하나를 가운데 두고 3·4 를 세로로 쌓는다. */
.common > .track-name, .common .pair { max-width: 600px; margin-left: auto; margin-right: auto; }
.common .pair { display: block; }

/* 좁아지면 전부 한 열로 눕고 합류 화살표는 뜻을 잃는다 */
@media (max-width: 900px) {
  .tracks { grid-template-columns: 1fr; gap: 24px; }
  /* 세로로 쌓이면 흐름 안으로 돌아와 두 카드 사이에 낀다 */
  .or { position: static; transform: none; margin: 0 auto; }
  .merge { display: none; }
  .common { margin-top: 24px; max-width: none; }
}
.track-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: clamp(22px, 2.4vw, 28px);
}

/* ── 스텝 ─────────────────────────────────────────── */
.step { margin-top: var(--gap); }
.track > .step:first-of-type { margin-top: 24px; }
.common .step { margin-top: 26px; }
.common .step + .step { margin-top: 46px; }
.step h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: clamp(17px, 1.6vw, 20px); }
.step p { margin-top: 10px; font-size: 16.5px; color: var(--ink-2); max-width: 46em; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 700; flex: none;
}
/* 수동 녹음 창 하나가 1·2 를 겸한다 — 범위 선택 창을 거치지 않는다 */
.step .nums { display: inline-flex; gap: 5px; flex: none; }
/* 헤더 띠가 bg-soft 라 같은 회색이면 묻힌다. 파랑은 .ask 와 같은 조합이다 */
.chip {
  font-size: 13px; font-weight: 650; color: var(--accent);
  background: #eef4ff; border: 1px solid #cbdefb;
  padding: 3px 11px; border-radius: 999px;
}

/* 원본 비율 그대로 — 자르지 않는다. 다음 촬영 때 비율을 맞추려고 빈 띠를 들어내거나
   좌우에 흰 여백을 보태는 수고가 이제 필요 없다(CAPTURE.md). */
.shot {
  width: 100%; height: auto;
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft);
}
/* drag.gif 는 570px 녹화본이라 크게 늘리면 뭉개진다. 열 폭(~592px)까지만 허용한다 —
   원본의 3.8% 확대라 눈에 안 띄고, 좌우 컷 폭이 어긋나는 편이 더 거슬린다.
   다시 찍어 폭이 커지면 이 값은 지워도 된다(CAPTURE.md 의 최소 폭 1200px). */
.shot--drag { max-width: 600px; margin-left: auto; margin-right: auto; }
/* 두 열의 파형·사진이 같은 폭이라야 좌우가 어긋나 보이지 않는다 */

/* ── 0번: 상시 녹음 타임라인 ───────────────────────────
   글자는 SVG 밖에 둔다. <text> 로 넣었더니 브라우저에 따라 그림과 글자 사이가
   제멋대로 벌어졌다 — SVG 안 글자는 뷰박스 단위로 재는데 그 계산이 브라우저마다
   다르다. 눈금과 글자의 가로 위치만 맞추면 되고, 그건 퍼센트로 잡을 수 있다. */
.step--intro .ring { margin-top: 20px; }
/* height 를 고정하면 좁은 화면에서 x 축만 눌려 막대가 서로 붙는다. aspect-ratio 로
   세로도 같이 줄이고, 굵기는 non-scaling-stroke 로 지킨다. */
.step--intro .ring svg { display: block; width: 100%; height: auto; aspect-ratio: 9 / 1; }
.step--intro .ring .bars {
  stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.step--intro .ring .span { fill: none; stroke: var(--ink-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.step--intro .ring .labels { position: relative; height: 25px; margin-top: 7px; }
.step--intro .ring .gone {
  position: absolute; left: 0; top: 0;
  font-size: 13px; font-weight: 500; color: var(--ink-3);
}
/* 대괄호(183~980) 의 가운데 = 581.5/1080. gen-waveform.py 가 이 값을 찍어 준다 */
.step--intro .ring .cap {
  position: absolute; left: 53.8%; top: -1px; transform: translateX(-50%);
  white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.step--intro .ring .cap b { color: var(--ink); font-weight: 780; font-size: 18px; }
.step--intro .ask {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 650; text-align: left;
  color: var(--accent); background: #eef4ff;
  border: 1px solid #cbdefb; border-radius: 11px;
  padding: 12px 16px; cursor: pointer;
}
.step--intro .ask::before {
  content: "?"; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 800;
}
.step--intro .ask:hover { background: #e2ecff; border-color: #a9c8f7; }

/* ── 마무리 ─────────────────────────────────────────── */
.close {
  margin-top: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}

/* 다운로드 버튼마다 따라붙는다 — 별도 footer 를 두지 않는다 */
.links {
  display: flex; align-items: center; justify-content: center;
  gap: 6px 10px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--ink-3);
}
/* 버튼에 딸린 것처럼 붙어야 한다. 부모의 flex gap(14 / 18) 위에 얹히므로 음수로 당긴다 */
.hero .links { margin-top: -4px; }
.close .links { margin-top: -8px; }
.links > * + *::before { content: "·"; margin-right: 10px; }
.links .ico { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.links .ico:hover { color: var(--ink); }
.links .ico svg { width: 15px; height: 15px; }

/* ── 모달 ─────────────────────────────────────────────
   본문과 무관하게 실제 브라우저 px 로 잡는다. showModal() 이 top layer 로 올라가
   .page 바깥에서 그려지므로 본문 폭(--w)을 물려받지 않는다. */
.sheet {
  width: min(760px, calc(100vw - 48px));
  max-height: 82vh; overflow-y: auto;
  padding: 0 40px 38px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg); color: var(--ink);
  font-size: 15.5px; line-height: 1.7;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.sheet::backdrop { background: rgba(20,20,18,.45); }
/* 내부 스크롤이라 헤더를 sticky 로 붙여야 ✕ 가 같이 밀려 올라가지 않는다 */
.sheet .hd {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 0 14px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.sheet h2 { font-size: 25px; margin: 0; }
.sheet h3 { font-size: 17px; margin: 24px 0 8px; }
.sheet .hd + h3 { margin-top: 20px; }
.sheet .sub { margin: 18px 0 16px; color: var(--ink-3); }
/* 있는 곳마다 한 장. 무엇이 어디 있는지가 축이라 순서보다 나란함이 중요하다 */
.sheet .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet .card {
  padding: 16px 18px 17px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 13px;
}
.sheet .card .ic { font-size: 21px; line-height: 1; }
.sheet .card h3 { margin: 9px 0 0; font-size: 15px; color: var(--ink-3); font-weight: 600; }
.sheet .card .big { margin: 3px 0 7px; font-size: 19px; color: var(--ink); }
.sheet .card p { margin: 0; font-size: 14.5px; line-height: 1.6; }
/* 좁은 화면에서 두 열이면 카드 하나가 160px 이라 글이 다 끊긴다 */
@media (max-width: 560px) { .sheet .cards { grid-template-columns: 1fr; } }
.sheet p { margin: 9px 0; color: var(--ink-2); }
.sheet ul { margin: 8px 0; padding-left: 20px; color: var(--ink-2); }
.sheet li { margin: 5px 0; }
.sheet b { color: var(--ink); }
.sheet .lead { margin: 16px 0 6px; font-weight: 650; color: var(--ink); }
.sheet pre {
  margin: 0; padding: 12px 15px; overflow-x: auto;
  background: var(--code-bg); border-radius: 9px;
  font-family: "SF Mono", Menlo, ui-monospace, monospace;
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
}
/* 카드 넷을 한 문장으로 되짚는 자리. 카드와 같은 bg-soft 면 다섯째 카드처럼 보인다 */
.sheet .wrap {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.sheet .note {
  margin-top: 18px; padding: 12px 15px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
}
.sheet .x {
  flex: none;
  width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1;
}
.sheet .x:hover { background: var(--bg-soft); color: var(--ink); }