/* s1.css 1 문제 배너 — 갈래 garden 소유(r7). 미디어 안 규칙은 같은 @media 블록 안에.
   tines 배너 문법: 위아래 96 · 가운데 글 기둥 520 · 양옆 정원(캔버스 420 × 섹션 높이, 글과 안 겹침).
   글자 단계(C2): 56 · 24 · 20 · 16 · 15 · 14(폰 36 · 18 · 20 · 16 · 15 · 14) · 굵기 400 / 600 / 720 · 모서리(C3): 카드 18 · 알약 999 */
.s1 { padding: 96px 0 104px; }
.s1 .g { position: absolute; top: 0; height: 100%; width: min(450px, max(0px, calc((100% - 600px) / 2)));
  clip-path: inset(-100vh -100vw 0 -100vw); }   /* 아래 끝만 자름 — 정원이 섹션 바닥에서 솟음(친구·띠는 위·옆으로 넘쳐도 보임) */
.s1 .gl { left: 0; } .s1 .gr { right: 0; }
.s1 .g.gm, .s1 .g.gt { display: none; }   /* 땅 띠(r8) · 위 끝 꽃 가장자리(r8 2차) = 폰만 — 데스크톱은 양옆 정원이 그 몫 */
.s1 .rise { position: absolute; inset: 0; }
.s1 .rise > canvas, .s1 .rise > .live { position: absolute; left: 0; top: 0; }
.s1 .live { transform-origin: var(--px, 50%) var(--py, 100%); }
.s1 .live canvas { position: absolute; left: 0; top: 0; }
.s1 .live .bloom { transform-origin: var(--bx) var(--by); }
.s1 .rise > svg.crit { z-index: 3; }
.s1 .g noscript img { height: 100%; object-fit: cover; object-position: top; }
.s1 .gr noscript img { object-position: top right; }
.s1 .col { position: relative; z-index: 2; width: 520px; max-width: calc(100% - 32px); margin: 0 auto; text-align: center; }
.s1 .eb { font-weight: 600; }
.s1 .col .big { font-size: 56px; line-height: 1.1; }
.s1 .story { margin: 26px 0 0; font-size: 24px; line-height: 1.4; letter-spacing: -.02em; color: var(--ink2); text-wrap: balance; }
/* '혼자 신고할 때' = 문제 표시 주황 유지(10-21 오너 결정) */
.s1 .col > .lab { margin: 40px 0 14px; font-size: 15px; font-weight: 600; color: var(--fl-text); letter-spacing: 0; }
.issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iss { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.iss:hover { border-color: #cbbda9; }
.iss[aria-pressed="true"] { border: 1.5px solid var(--ink); background: #f6ede2; font-weight: 720; }
.iss:focus-visible { outline: 2.5px solid var(--fl-text); outline-offset: 2px; }
/* 종이 기록 카드(떠 있는 종이 판 18 · 먹 1.5px · 그림자 0) */
.resp { margin-top: 16px; padding: 24px 28px 18px; text-align: left; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.resp .lab { margin: 0; font-size: 15px; font-weight: 600; color: var(--sub); }
.resp .r-sit { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--sub); }
.resp .r-name { font-weight: 720; color: var(--ink); margin-right: 8px; }
.resp h4 { margin: 6px 0 14px; font-size: 20px; line-height: 1.35; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.resp dl { margin: 0; border-top: 1px solid var(--line); }
.resp dl > div { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.resp dt { font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.resp dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.resp .r-go { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.resp .r-go .go { font-size: 16px; font-weight: 600; min-height: 48px; }
.resp .kstat { font-size: 14px; color: var(--muted); }
.resp .kstat:empty { display: none; }
.s1 .close { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: var(--sub); text-wrap: balance; }

/* ── 실패 판(모듈 실패·getContext 없음): 정지 그림, 없으면 크림(높이 그대로) ── */
.s1 .g img.still { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; object-position: top; }
.s1 .gr img.still { object-position: top right; }
.s1 .g.is-fallback .rise { display: none; }

@keyframes garden-rise { from { transform: translateY(18%); } to { transform: none; } }
/* au-sway: 상시 생기(배너 꽃 가지 · 먹 판 키 큰 꽃) — 폭은 요소마다 --sway */
@keyframes au-sway { from { transform: rotate(calc(-1 * var(--sway, 2deg))); } to { transform: rotate(var(--sway, 2deg)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s1 { view-timeline: --s1 block; }
    .s1 .rise { animation: garden-rise linear both; animation-timeline: --s1; animation-range: entry 0% entry 55%; }
    .is-still .s1 .rise { animation: none; }
    /* 폰(r8): 엉겅퀴 띠가 섹션 가운데로 내려옴 → 띠 자리 기준(띠 아래 끝이 화면에 들기 전에 솟음 끝 — 자름선 안 보임) · 땅 띠는 솟지 않음 */
    @media (max-width: 767px) {
      .s1 .g.gl { view-timeline: --s1b block; }
      .s1 .g.gl .rise { animation-timeline: --s1b; animation-range: entry 0% entry 100%; }
      .s1 .g.gm .rise { animation: none; }
    }
  }
  .s1 .live.sway { animation: au-sway var(--sway-t, 6s) ease-in-out infinite alternate; animation-delay: var(--sway-d, 0s); }
  .s1 .live.paused, .s1 .live.paused .bloom { animation-play-state: paused; }
  .iss { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
  .iss:active { transform: scale(.97); }
}
/* 폰(r8 재수리 · L0 미끄럼 창): 눈썹·제목 → 엉겅퀴 띠 → 이야기 문장(= 알약 안내) → 알약 → 기록 카드 → 땅 띠 → 마무리 줄.
   r8 1차(제목 묶음 전체 → 띠)는 첫 화면 끝 ~ 띠 위쪽에 그림 없는 길이가 600px 를 넘어 360 화면 다색 0.1~0.6%. 띠와 띠 사이 글 길이는 540px 아래
   (폰 아래 고정 독 ~64px 이 화면 아래를 가림 → 실제로 보이는 창 ≈ 590px). 먹 판 쪽 꽃 띠도 위로 올림(s2.css).
   글 기둥은 display:contents 로 풀어 차례만 바꿈(마크업·DOM 순서 그대로). 글 조각은 띠보다 위 층(z 2) */
@media (max-width: 767px) {
  .s1 { padding: 0 0 24px; display: flex; flex-direction: column; }
  .s1 .col { display: contents; text-align: left; }
  .s1 .col > * { position: relative; z-index: 2; margin-left: 16px; margin-right: 16px; }
  /* r8 2차(L0 360 '첫 화면 다음' 1.97% — 첫 화면 끝 글 묶음 394px 바로 뒤가 눈썹·제목): 섹션 위 끝 꽃 가장자리(위·아래 끝 = 꽃 윤곽 · 화면 끝까지) */
  .s1 .col > .g.gt { order: 0; display: block; position: relative; z-index: 1; width: 100%; height: 92px; margin: 10px 0 0; clip-path: none; }
  .s1 .col > .eb { order: 1; margin-top: 8px; }
  .s1 .col > .big { order: 2; font-size: 36px; line-height: 1.14; }
  .s1 .g.gl { order: 3; position: relative; z-index: 1; width: 100%; height: 300px; margin-top: 4px; clip-path: inset(-100vh 0 0 0); }
  .s1 .col > .story { order: 4; margin-top: 6px; font-size: 18px; line-height: 1.5; }
  .s1 .g.gr { display: none; }
  .s1 .col > .lab { order: 5; margin: 10px 16px 8px; }
  .s1 .col > .issues { order: 6; }
  .s1 .col > .resp { order: 7; }
  .s1 .col > .g.gm { order: 8; display: block; position: relative; z-index: 1; width: 100%; height: 84px; margin: 8px 0 0; clip-path: none; }
  .s1 .col > .close { order: 9; }
  /* 막힌 곳 6 = 폰도 3×2(r8 · 칸 폭 ≥ 100 · 높이 48) — 엉겅퀴 띠와 땅 띠 사이 글 길이를 줄여 L0(그림 없는 화면 0) */
  .issues { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .iss { min-height: 48px; padding: 0 6px; white-space: nowrap; }
  .resp { margin-top: 12px; padding: 16px 16px 8px; border-radius: 18px; }
  .resp .r-sit { font-size: 16px; margin-top: 8px; }
  .resp h4 { font-size: 20px; margin: 4px 0 10px; }
  .resp dl > div { grid-template-columns: 84px 1fr; column-gap: 10px; padding: 7px 0; }
  .s1 .close { margin-top: 8px; font-size: 15px; }
}