/* 시제품 공통(갈래 base) — 토큰·공통·실패 판 공통·.pill 움직임·친구 숨쉬기·폰 공통. 섹션 규칙은 css/s1~s7.css(0단계에 나눔). 색 B(먹 #151414 · 로고 주황 #ff5e1f · 크림), 세리프 0(굵기 대비 400↔720).
   움직임은 전부 @media (prefers-reduced-motion: no-preference) 안에서만 켬(기본 = 정지 판). 그림 자리 높이는 여기서 미리 고정(CLS 0). */
/* r7 글꼴: 운영 'AboutUs Home Sans'(Pretendard 1.309) 부분집합 — tools/font-subset.py 로 다시 구움(빠진 글자 0 검사 --check). OFL = assets/fonts/Pretendard-OFL.txt */
@font-face { font-family: 'AboutUs Home Sans'; src: url('../assets/fonts/aboutus-home-sans-r7.woff2') format('woff2'); font-weight: 45 930; font-display: swap; }
:root { --page: #fdfbf7; --ink: #151414; --ink2: #2a2623; --sub: #4d4a46; --muted: #6b665f; --fl: #ff5e1f; --fl-text: #c2410c;
  --paper: #fffdf9; --sand: #f3e9dc; --clay: #ebc49d; --brand: #b8400e; --brand-edge: #c25a2f; --line: #e6dccd; --cream: #fcf9f5; --ease: cubic-bezier(.22, 1, .36, 1);
  /* r7 공통 계약 C1~C3·C5(갈래 base) — 갈래는 이 이름으로만 씀 */
  --font: 'AboutUs Home Sans', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --card: #b8400e;                                   /* 다섯 단계 카드(주황 큰 면) */
  --r-band: 48px; --r-paper: 18px; --r-card: 16px; --r-btn: 12px; --r-tab: 14px; --r-pill: 999px;   /* 0<r<8 금지 */
  --hd-h: 64px;                                      /* 머리줄 높이(폰 56) — 고정 자리·앵커 여백 계산용 */
  --ease-ui: cubic-bezier(.22, 1, .36, 1); --ease-fly: cubic-bezier(.45, 0, .25, 1); --ease-cur: cubic-bezier(.58, 0, .42, 1);
  --t-fast: .3s; --t-mid: .45s; --t-wipe: 1s;
  color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--hd-h) + 8px); }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
main { overflow-x: clip; }
section { position: relative; }
/* r8 C6(긴 작업 0): 첫 그리기에서 첫 화면 아래 섹션·푸터는 배치를 건너뜀(content-visibility:auto · 자리 높이는 추정값, 한 번 그린 뒤엔 실제 높이를 기억).
   r7 실측: 폰 390·CPU 4배에서 첫 프레임 배치 102~153ms + 글꼴 바뀐 뒤 다시 배치 50~55ms 가 한 덩어리 긴 작업이었음.
   load 뒤 boot.js 가 한 프레임에 한 섹션씩 .cv-open 을 달아 보통 문서로 돌려놓음(앵커·그림 IO·캡처·넘치는 그림 그대로). JS 가 없어도 auto 라 다 보임. */
main > section:not(.s0), [data-flower-home] > footer.ft { content-visibility: auto; contain-intrinsic-block-size: auto 1000px; }
main > section.cv-open, [data-flower-home] > footer.ft.cv-open { content-visibility: visible; contain-intrinsic-block-size: none; }
/* r8 2차(반박 C): 새로고침·뒤로 가기(index.html head 의 한 줄이 html.cv-all 을 담) = 처음부터 다 배치 → 브라우저가 되살린 스크롤 자리 = 보던 글(추정 높이 1000px 에 떨어지지 않음) */
html.cv-all main > section, html.cv-all [data-flower-home] > footer.ft { content-visibility: visible; contain-intrinsic-block-size: none; }
canvas { display: block; }
[data-art] > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* JS 꺼짐: 정지 그림을 그림 자리 왼쪽 위에 겹쳐 놓음(빈 캔버스 밑으로 밀리지 않게) */
[data-art] noscript img { position: absolute; left: 0; top: 0; }
.s1 .gr noscript img { left: auto; right: 0; }
[data-illo] { display: flex; align-items: flex-end; }
[data-illo] canvas { flex: none; }
[data-art] img.still, [data-illo] img.still, noscript img { display: block; width: 100%; height: auto; }
svg.crit { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.crit text { font-family: var(--font); }
.eb { margin: 0 0 22px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--sub); }
.big { margin: 0; font-size: 56px; line-height: 1.1; letter-spacing: -.035em; font-weight: 400; }
.w4 { font-weight: 400; } .w7 { font-weight: 720; }
.lab { margin: 0; font-size: 15px; font-weight: 600; color: var(--sub); letter-spacing: -.005em; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.pill.ink { background: var(--ink); color: var(--cream); }
.pill.line { border: 1.5px solid var(--ink); color: var(--ink); background: var(--paper); }
.pill.cream { background: var(--cream); color: var(--ink); }
.go { display: inline-flex; align-items: center; min-height: 44px; color: var(--fl-text); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--fl-text); outline-offset: 3px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary i { font-style: normal; font-weight: 400; font-size: 24px; color: var(--sub); transition: transform .2s; }
details[open] > summary i { transform: rotate(45deg); }

/* ══ r7 공통 부품(갈래 base · 공통 계약 C2·C3·C9) ══════════════════════════════════════════════
   글자 6단(1440 → 폰): .t-h 56→36 · .t-sub 24→20 · .t-card 20→18 · .t-body 16 · .t-aux 15 · .t-label 14 (+ .t-story = 섹션 이야기 문장 24→18)
   굵기 400·600·720 셋만(.w4 · .w6 · .w7). 반 픽셀 0 · 13px 이하 0(사업자 정보 13px .t-biz 만 예외).
   애니메이션 이름 허용 목록(12 이하 · page-check 가 셈): au-breathe · au-blink · au-prop · logo-flow · hero-sink · garden-rise ·
     bed-rise · panel-wipe · au-sway · slide-16 · dock-in · (여유 1). 이 밖의 @keyframes 이름은 만들지 않음. */
.w6 { font-weight: 600; }
.t-h { margin: 0; font-size: 56px; line-height: 1.08; letter-spacing: -.035em; font-weight: 400; }
.t-sub { margin: 0; font-size: 24px; line-height: 1.42; letter-spacing: -.02em; font-weight: 400; }
.t-story { margin: 0; font-size: 24px; line-height: 1.42; letter-spacing: -.02em; font-weight: 400; color: var(--ink2); }
.t-card { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: -.018em; }
.t-body { margin: 0; font-size: 16px; line-height: 1.6; letter-spacing: -.01em; }
.t-aux { margin: 0; font-size: 15px; line-height: 1.55; letter-spacing: -.005em; }
.t-label { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; letter-spacing: 0; }
.t-biz { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); letter-spacing: 0; }
/* 단추(C9): 채운 먹 = '카카오로 상황 말하기' 하나뿐(화면마다 1개) · 테두리 = 머리줄 카톡·'주소 보내기' · 크림 알약 = 먹 판 위 */
.btn-kakao, .btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: var(--r-btn);
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; }
.btn-kakao { background: var(--ink); color: var(--cream); border: 0; }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-line.on-ink { color: var(--cream); border-color: var(--cream); }
.pill-cream { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--cream); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-user-select: none; user-select: none; }
/* 칩(C3 999): 1px 테 + 옅은 바탕 · 고른 칩도 흰색으로 꽉 채우지 않음(테 짙게 + 굵기만) */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.chip.ink { border-color: var(--ink); background: var(--page); }
.chip[aria-pressed="true"], .chip.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* 글 링크(→ 붙는 링크) — 폰에서 누름 48 */
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btn-kakao:active, .btn-line:active, .pill-cream:active, .chip:active, .link:active { transform: scale(.98); filter: brightness(.95); }
.btn-kakao, .btn-line, .pill-cream, .chip, .link { transition: transform .1s, filter .1s; }
.tab, .iss, .seg span, summary { -webkit-user-select: none; user-select: none; }
/* 늘 있는 상태 줄(카톡 복사 결과 · kakao.js 가 씀) */
[data-kakao-status] { min-height: 1.4em; font-size: 14px; line-height: 1.4; color: var(--sub); }
[data-kakao-status]:empty { min-height: 0; }
/* 등장(16px 미끄러짐 · 페이드 0) — 첫 화면 시연 판·마무리 문장 두 곳만 씀 */
@keyframes slide-16 { from { transform: translateY(16px); } to { transform: none; } }
@media (max-width: 767px) {
  .t-h { font-size: 36px; line-height: 1.14; }
  .t-sub { font-size: 20px; line-height: 1.45; }
  .t-story { font-size: 18px; line-height: 1.5; }
  .t-card { font-size: 18px; }
  .btn-kakao, .btn-line { min-height: 48px; padding: 0 20px; }
  .link, .go { min-height: 48px; }
  :root { --hd-h: 56px; }
}


/* ── 실패 판(모듈 실패·getContext 없음): 정지 그림, 없으면 크림(높이 그대로) ── */
[data-art].is-fallback canvas { display: none; }

/* ── 움직임(모션 줄이기 = 정지 판이 기본) ── */
@media (prefers-reduced-motion: no-preference) {
  .pill { transition: filter .1s; }
  .pill:hover { filter: brightness(1.05); }
  .pill:active { filter: brightness(.95); }
}
.crit .au-breathe { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .crit.live .au-breathe { animation: au-breathe 3.8s ease-in-out infinite; animation-delay: var(--au-br, 0s); }
  .crit.live .au-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: au-blink 4s ease-in-out infinite; animation-delay: var(--au-bl, 0s); }
  .crit.paused .au-breathe, .crit.paused .au-eyes { animation-play-state: paused; }
}
@keyframes au-breathe { 0%, 100% { transform: translateY(0.8px); } 50% { transform: translateY(-0.8px); } }
@keyframes au-blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.05); } }


/* ── 폰 390 (8,000px 이하로 접음 — 긴 설명은 펼침 안 DOM) ── */
@media (max-width: 767px) {
  .d-only { display: none !important; }
  .eb { font-size: 14px; margin-bottom: 12px; }
  .big { font-size: 36px; line-height: 1.14; }
}