/* 1분 소개(about.html). KISIA 파도풀 /about 의 구성(간소 헤더·진행 막대·번호 지도·섹션 순서)을
   ScanLedger 데모의 종이 바탕·흰 카드·파란 강조 하나로 옮겼다. 움직임은 짧은 등장 하나뿐. */
.ab-top { position: sticky; top: 0; }
.ab-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.ab-progress i { display: block; width: 0; height: 100%; background: var(--primary); }

.ab-map {
  position: sticky; top: 64px; z-index: 15;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  padding: 8px 16px; background: rgba(246, 245, 244, 0.94); border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
}
.ab-map a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 12px; color: var(--ink-muted); font-size: 13px; font-weight: 700; line-height: 1.2;
}
.ab-map .n { font-size: 11px; letter-spacing: 0.5px; color: var(--ink-muted); }
.ab-map a.is-on { background: var(--surface); color: var(--secondary); box-shadow: var(--shadow); }
.ab-map a.is-on .n { color: var(--primary); }

.ab { max-width: 760px; margin: 0 auto; padding: 16px 16px 8px; }
.ab section { scroll-margin-top: 130px; }

.ab-hero {
  min-height: 72vh; min-height: 72svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 22px; margin-bottom: 18px; border-radius: 24px; color: #fff;
  background: linear-gradient(150deg, #213183 0%, #2a3ea8 60%, #3554c8 100%);
}
.ab-hero .eyebrow { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; align-self: flex-start; }
.ab-hero h1 { margin: 10px 0 14px; font-size: clamp(26px, 7vw, 44px); font-weight: 850; line-height: 1.18; letter-spacing: -0.8px; }
.ab-lead { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); }
.ab-lead b { color: #fff; }
.ab-hint { margin: 0; font-size: 14px; font-weight: 700; color: #cfe3ff; }
.ab-hint::after { content: " ↓"; }
.ab-fine { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }

.ab-sec {
  margin-bottom: 18px; padding: 24px 20px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.ab-sec h2 { margin: 10px 0 12px; font-size: clamp(22px, 6.2vw, 30px); font-weight: 830; line-height: 1.28; letter-spacing: -0.5px; color: var(--secondary); }
.ab-sec h3 { margin: 0 0 4px; font-size: 17px; }
.ab-sec p { color: var(--ink-secondary); }

.ab-list { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--canvas-soft); border: 1px solid var(--hairline); }
.ab-list figcaption { margin-bottom: 8px; color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.ab-list ul { margin: 0; padding: 0; list-style: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14.5px; }
.ab-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px dashed var(--hairline); }
.ab-list li:last-child { border-bottom: 0; }
.ab-list li.gone { color: var(--bad); text-decoration: line-through; background: var(--bad-soft); border-radius: 8px; }
.ab-list li.gone span { display: inline-block; text-decoration: none; font-family: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ab-list li.more { color: var(--ink-muted); font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

.ab-who { margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--primary); background: #eef5fd; border-radius: 0 12px 12px 0; }
.ab-who p { margin: 0; }

.ab-steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ab-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: var(--canvas-soft); border: 1px solid var(--hairline); }
.ab-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--secondary); color: #fff; font-weight: 800; }
.ab-steps p { margin: 0 0 6px; }
.ab-fig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 750; color: var(--ink) !important; }

.ab-see { margin: 6px 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.ab-see li { padding: 10px 12px; border-radius: 12px; background: var(--canvas-soft); border: 1px solid var(--hairline); color: var(--ink-secondary); }
.ab-see b { display: block; color: var(--secondary); }
.ab-limit { margin: 10px 2px 0; font-size: 13.5px; color: var(--ink-muted) !important; }

/* 등장 연출은 넣지 않는다: 스크롤 감지가 실패해도 내용이 숨지 않게(휴대폰·인쇄·화면 캡처). */

@media (min-width: 900px) {
  .ab-map { top: 65px; padding-inline: max(16px, calc((100vw - 760px) / 2)); }
  .ab-hero { min-height: 520px; padding: 48px 44px; }
  .ab-sec { padding: 32px 36px; }
}

/* ── 스크롤 장면(KISIA 파도풀 /about 방식) ─────────────────────────────
   원칙: 움직이는 속성은 transform · opacity 뿐. JS 는 장면 진행도 --p(0~1)만 쓴다.
   --p 가 없으면 var(--p, 1) 로 ‘끝난 모습’이 그려진다 — JS 없음 · 움직임 끔 · 오류 때도 내용이 다 보인다.
   고정(sticky)과 숨김 시작 상태는 html.mo(움직임 켜짐)일 때만 적용한다. */
.sa-sub { margin: 0 0 10px; font-size: 14px; color: var(--ink-muted) !important; }
.sa-h { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; font-size: 13.5px; font-weight: 750; color: var(--ink-secondary); }
.sa-count { font-size: 20px; font-weight: 850; color: var(--bad); font-variant-numeric: tabular-nums; }
.sa-pk, .sa-dep { margin: 0; padding: 0; list-style: none; }
.sa-pk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.sa-pk li {
  --a: clamp(0, calc((var(--p, 1) - 0.02 - var(--i) * 0.035) / 0.08), 1);
  position: relative; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--canvas-soft);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere;
  opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 10px));
}
.sa-pk li:nth-child(1) { --i: 0; } .sa-pk li:nth-child(2) { --i: 1; } .sa-pk li:nth-child(3) { --i: 2; } .sa-pk li:nth-child(4) { --i: 3; }
.sa-pk li:nth-child(5) { --i: 4; } .sa-pk li:nth-child(6) { --i: 5; } .sa-pk li:nth-child(7) { --i: 6; } .sa-pk li:nth-child(8) { --i: 7; }
/* referencing: 빨간 바탕 · 취소선 · ‘목록에서 빠짐’이 --x 로 함께 켜진다 */
.sa-pk li.gone { --x: clamp(0, calc((var(--p, 1) - 0.45) / 0.13), 1); }
.sa-pk li.gone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bad-soft); border: 1px solid rgba(180, 35, 24, 0.35); opacity: var(--x); z-index: -1; }
.sa-pk li.gone { z-index: 0; isolation: isolate; }
.sa-pk li.gone::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--bad); transform-origin: 0 50%; transform: scaleX(var(--x)); }
.sa-pk li.gone span { display: block; font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 11.5px; font-weight: 800; color: var(--bad); opacity: var(--x); }

.sa-dep li {
  --a: clamp(0, calc((var(--p, 1) - 0.12 - var(--i) * 0.03) / 0.08), 1);
  position: relative; width: fit-content; max-width: 100%; padding: 2px 6px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.5;
  opacity: var(--a); transform: translateX(calc((1 - var(--a)) * -8px));
}
.sa-dep li:nth-child(1) { --i: 0; } .sa-dep li:nth-child(2) { --i: 1; } .sa-dep li:nth-child(3) { --i: 2; --k: 0; } .sa-dep li:nth-child(4) { --i: 3; }
.sa-dep li:nth-child(5) { --i: 4; --k: 1; } .sa-dep li:nth-child(6) { --i: 5; --k: 2; } .sa-dep li:nth-child(7) { --i: 6; --k: 3; } .sa-dep li:nth-child(8) { --i: 7; --k: 4; }
/* 끊기는 관계: 흐려지고 취소선이 그어진다(5개가 차례로) */
.sa-dep li.cut { --c: clamp(0, calc((var(--p, 1) - 0.58 - var(--k) * 0.05) / 0.07), 1); opacity: calc(var(--a) * (1 - var(--c) * 0.6)); }
.sa-dep li.cut::after { content: ""; position: absolute; left: 4px; right: 4px; top: 52%; height: 1.5px; background: var(--bad); transform-origin: 0 50%; transform: scaleX(var(--c)); }
.sa-end {
  --e: clamp(0, calc((var(--p, 1) - 0.86) / 0.1), 1);
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--ink) !important; font-size: 14.5px; line-height: 1.55;
  opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 12px));
}

/* 장면 B: 한 단계씩 켜짐(.is-on). html.mo 가 아니면 셋 다 켜진 모습. */
.ml { display: flex; gap: 4px; margin: 4px 0 8px !important; }
.ml i { flex: 1; height: 10px; border-radius: 3px; background: #c9d3ea; }
.ml i.gap { background: transparent; outline: 1.5px dashed var(--bad); outline-offset: -1.5px; }
.ml i.new { background: var(--good); }
.fp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 !important; font-size: 13px; }
.fp code { font-size: 11.5px; padding: 1px 4px; }

/* 움직임 켜짐: 장면을 화면에 고정하고, 스크롤 길이를 준다 */
html.mo-pin .sc { position: relative; }
html.mo-pin .sc-a { height: 230svh; }
html.mo-pin .sc-b { height: 210svh; }
html.mo-pin .sc-stick { position: sticky; top: var(--hdr, 126px); margin-bottom: 0; }
html.mo .sc-b .st { opacity: 0.28; transform: translateY(6px) scale(0.985); transition: opacity 0.35s ease, transform 0.35s ease; }
html.mo .sc-b .st.is-on { opacity: 1; transform: none; }
html.mo .sc-b .st .ab-fig, html.mo .sc-b .st .fp, html.mo .sc-b .st .ml { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s; }
html.mo .sc-b .st.is-on .ab-fig, html.mo .sc-b .st.is-on .fp, html.mo .sc-b .st.is-on .ml { opacity: 1; transform: none; }
html.mo .sc-b .st .fp + .fp { transition-delay: 0.3s; }
.sc-a + .ab-who { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html.mo .sc-b .st, html.mo .sc-b .st * { transition: none !important; }
}