/* s1x.css 1 문제 배너 r9 — 갈래 s1x(10-24) 「막힌 곳 하나, 매듭 하나」. css/s1.css 는 그대로 두고(다른 구간이 au-sway 를 씀) 이 파일이 .s1x 만 맡음.
   글자 단계(C2): 56 · 24 · 20 · 16 · 15 · 14(폰 36 · 20 · 18 · 16 · 15 · 14) · 굵기 400 / 600 / 720 · 모서리(C3): 카드 18 · 알약 999(0<r<8 = 0)
   색: 크림 바탕 그대로 · 종이 #fffdf9 · 먹 1.5px · 모래 #f6ede2(고른 알약) · '혼자 신고할 때' = 주황 글(--fl-text, 10-21 오너 결정)
   움직임: 깊이 열림 = garden-rise(스크롤에 묶임 · translate 만 · 겹마다 var 값) · 꽃 무리 = au-sway · 나머지(고름 안무·매듭·친구·피고 닫힘) = js 의 WAAPI·rAF(이름 예산 밖)
   필터·흐림·그라데이션·투명도 = 0. */

/* ── 뼈대: 위 96 · 가운데 글 기둥 520 · 아래 104 ── */
.s1x { position: relative; padding: 96px 0 104px; timeline-scope: --s1xa, --s1xb; }
.s1x-pa, .s1x-pb { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; }
.s1x-pa { top: 0; height: 75vh; view-timeline: --s1xa block; }          /* 섹션 위 끝 화면 100% → 25% (깊이 열림 1) */
.s1x-pb { top: 75vh; bottom: 0; view-timeline: --s1xb block; }           /* 섹션 위 끝 25% → 아래 끝 0 (지나가는 동안 2) */
.s1x-col { position: relative; z-index: 2; width: 520px; max-width: calc(100% - 32px); margin: 0 auto; text-align: center; }

/* ── 양옆 정원(데스크톱): 폭 = (화면 − 520)/2 − 40 · 아래 끝과 안쪽 끝에서 자름(앞 겹이 글 기둥으로 넘는 화소 0) · 위는 열림(친구가 첫 화면에서 내려옴) ── */
.s1x-g { position: absolute; top: 0; height: 100%; width: max(0px, calc((100% - 520px) / 2 - 40px)); }
.s1x-gl { left: 0; clip-path: inset(-100vh -40px 0 -100vw); }
.s1x-gr { right: 0; clip-path: inset(-100vh -100vw 0 -40px); }
.s1x-g .dl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.s1x .rise, .s1x .pan { position: absolute; inset: 0; }
.s1x .pc { position: absolute; }
.s1x .pc > .sw { position: absolute; inset: 0; }
.s1x .pc canvas, .s1x .pan > canvas, .s1x .lv canvas { position: absolute; left: 0; top: 0; }
.s1x .lv { position: absolute; transform-origin: var(--px, 50%) var(--py, 100%); }
.s1x .lv .bl { transform-origin: 50% 50%; }
.s1x svg.crit { z-index: 3; }
.s1x svg.s1x-fly { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
.s1x-g noscript img { position: absolute; left: 0; top: 0; width: calc(100% + 40px); height: auto; }   /* r11(반박 8): JS 꺼짐 = 섹션이 길어져도 그림 비율 그대로(늘려 자른 띠 글 0) · 아래는 크림 · 정지 그림 = 상자 + 안쪽 40 */
.s1x-gr noscript img { left: auto; right: 0; }
/* 실패 판(모듈 실패·getContext 없음): 정지 그림(투명 바탕 webp), 없으면 크림(높이 그대로)
   r11(반박 7 '직사각형으로 잘림'): 정지 그림은 그 자리 상자 + 꽃이 넘치는 여백까지 찍어 둠(투명) → 같은 여백만큼 바깥으로 놓음(자른 선 0)
     데스크톱 정원 = 안쪽 40 · 위 0(상자 자름과 같음) · 폰 정원 띠 = 그대로 · 매듭 화단·끝 둔덕 = 위아래 16 */
.s1x .is-fallback .dl, .s1x .is-fallback .rise { display: none; }
.s1x .is-fallback img.still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.s1x-gl.is-fallback img.still { width: calc(100% + 40px); object-fit: contain; object-position: right top; }
.s1x-gr.is-fallback img.still { left: -40px; width: calc(100% + 40px); object-fit: contain; object-position: left top; }
.s1x-knot.is-fallback img.still, .s1x-ge.is-fallback img.still { top: -16px; height: calc(100% + 32px); }
.s1x-knot.is-fallback img.still { object-fit: contain; }

/* ── 글 기둥 ── */
.s1x-eb { margin: 0 0 22px; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; color: var(--sub); }
.s1x-h { margin: 0; font-size: 56px; line-height: 1.1; letter-spacing: -.035em; font-weight: 400; }
.s1x-story { margin: 26px 0 0; font-size: 24px; line-height: 1.4; letter-spacing: -.02em; color: var(--ink2); text-wrap: balance; }
.s1x-lab { margin: 40px 0 14px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--fl-text); letter-spacing: 0; }
.s1x-ge, .s1x-knot { display: none; position: relative; }
/* 친구 한 몸(r11 · 반박 5): 배너 친구가 화면 안에 보이는 동안 독 친구는 숨음(<html data-friend-at="s1x"> = js/s1x-garden.js friendStage) — 독 갈래 약속은 INTEGRATE.md 4절 */
html[data-friend-at="s1x"] .dock-friend, html[data-friend-at="s1x"] .dockx-friend { visibility: hidden; }

/* 막힌 곳 6 알약(3×2 · 높이 48 · 999) — 고른 것 = 모래 바탕(누른 자리에서 원으로 번짐) + 먹 1.5 + 720 */
.s1x-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.s1x-pill { all: unset; box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.s1x-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #f6ede2;
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); }
.s1x-pill[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); font-weight: 720; }
.s1x-pill[aria-pressed="true"]::before { clip-path: circle(220px at var(--cx, 50%) var(--cy, 50%)); }
.s1x-pill:focus-visible { outline: 3px solid var(--fl-text); outline-offset: 2px; }   /* r11(반박 10): 2.5px 은 배율 1 화면에서 2px 로 깎임 → 3px(배율 2 이상은 2.5) */
@media (min-resolution: 2dppx) { .s1x-pill:focus-visible { outline-width: 2.5px; } }
@media (hover: hover) and (pointer: fine) { .s1x-pill:hover { border-color: #cbbda9; } .s1x-pill[aria-pressed="true"]:hover { border-color: var(--ink); } }

/* 종이 기록 카드(떠 있는 종이 판 18 · 먹 1.5px · 그림자 0) — 기사 6개 서버 HTML, .on 하나만 보임(JS) */
.s1x-card { position: relative; margin-top: 16px; padding: 24px 28px 14px; text-align: left; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.s1x-lab2 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--sub); letter-spacing: 0; }
.s1x-arts { position: relative; }
.s1x-a { position: relative; }
.s1x-sit { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--sub); }
.s1x-sit .lc, .s1x-a h4 .lc { display: block; }
.s1x-nm { position: relative; display: inline-block; font-weight: 720; color: var(--ink); margin-right: 6px; }
.s1x-ul { position: absolute; left: -2px; bottom: -6px; overflow: visible; pointer-events: none; }
.s1x-a h4 { margin: 6px 0 14px; font-size: 20px; line-height: 1.35; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.s1x-a dl { margin: 0; border-top: 1px solid var(--line); }
.s1x-a dl > div { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.s1x-a dt { font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.s1x-a dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.s1x-go { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.s1x-go .go { font-size: 16px; font-weight: 600; min-height: 48px; }
.s1x-go .kstat { font-size: 14px; color: var(--muted); }
.s1x-go .kstat:empty { display: none; }
.s1x-close { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: var(--sub); text-wrap: balance; }
/* JS 있음: 고른 기사 하나(.on) + 나가는 기사(.out · 겹쳐 놓고 줄 가림 밖으로) */
.s1x.is-js .s1x-a:not(.on):not(.out) { display: none; }
.s1x .s1x-a.out { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.s1x-card.anim .ln, .s1x-card.anim { overflow: clip; }
.s1x .ln > .lc, .s1x .ln > dt, .s1x .ln > dd, .s1x .ln > a { will-change: auto; }
/* JS 꺼짐: 알약 숨김(죽은 단추 0) · 동결 h3 '혼자 신고할 때'는 그대로 · 기사 6개 차례로 다 읽힘 · 매듭 띠 숨김 */
.s1x:not(.is-js) .s1x-pills { display: none; }
.s1x:not(.is-js) .s1x-a + .s1x-a { margin-top: 14px; padding-top: 4px; }
.s1x:not(.is-js) .s1x-knot { display: none !important; }

/* ── 깊이 열림(스크롤에 묶임 · 되감김) — 겹마다 var 값, 키프레임은 garden-rise 하나 ──
   데스크톱: ① 섹션 위 끝 화면 100% → 25%: 먼 Y 10% · 가운데 Y 18% · 앞 Y 26% + X 안쪽 64 → 0(커튼이 바깥으로 갈라짐) · 곡선 60% 지점 = 거리 80%
             ② 위 끝 25% → 아래 끝 0: 먼 Y 0 → +30 · 앞 Y 0 → −40 · 가운데 0(기준면)
   폰: 정원 띠 위 끝 화면 100% → 아래 끝 100%(300px): 먼 8% · 가운데 18% · 앞 Y 12% + 양 끝 반쪽 X ±24 → 0 */
@keyframes garden-rise { from { transform: translate(var(--gr-x0, 0px), var(--gr-y0, 18%)); } to { transform: translate(var(--gr-x1, 0px), var(--gr-y1, 0px)); } }
/* au-sway: 상시 생기(css/s1.css 와 같은 바이트 — 꽃 가지 · 먹 판 키 큰 꽃 · 다섯 단계) */
@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()) and (timeline-scope: --a) {
    .s1x.dv-css .s1x-g .dl { animation: garden-rise cubic-bezier(.42, .42, .55, 1) both; animation-timeline: --s1xa; animation-range: entry 0% entry 100%; }
    .s1x.dv-css .s1x-g .far { --gr-y0: 10%; }
    .s1x.dv-css .s1x-g .mid { --gr-y0: 18%; }
    .s1x.dv-css .s1x-g .near { --gr-y0: 26%; }
    .s1x.dv-css .s1x-gr .near { --gr-x0: -64px; }
    .s1x.dv-css .s1x-gl .near { --gr-x0: 64px; }
    .s1x.dv-css .s1x-g .far > .rise, .s1x.dv-css .s1x-g .near > .rise { animation: garden-rise linear both; animation-timeline: --s1xb; animation-range: cover 0% cover 100%; --gr-x0: 0px; --gr-y0: 0px; }
    .s1x.dv-css .s1x-g .far > .rise { --gr-y1: 30px; }
    .s1x.dv-css .s1x-g .near > .rise { --gr-y1: -40px; }
  }
  .s1x .lv.sway { animation: au-sway var(--sway-t, 6s) ease-in-out infinite alternate; animation-delay: var(--sway-d, 0s); }
  .s1x .lv.paused, .s1x.paused .lv { animation-play-state: paused; }
  .s1x-pill { transition: border-color .3s var(--ease-ui), background-color .3s var(--ease-ui); }
  .s1x-pill::before { transition: clip-path 0s .12s; }
  .s1x-pill[aria-pressed="true"]::before { transition: clip-path .12s var(--ease-ui); }
  .s1x-pill:active { transform: scale(.97); }
}
.is-still .s1x .dl, .is-still .s1x .rise { animation: none !important; }

/* ── 1280 미만: 글 기둥 안 매듭 띠(이야기 문장과 '혼자 신고할 때' 사이 · 알약 열마다 어린 엉겅퀴 둘) ── */
@media (max-width: 1279px) {
  .s1x-knot { display: block; height: 72px; margin: 22px 0 -10px; }
  .s1x-knot .rise { overflow: visible; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .s1x { padding-bottom: 96px; }
}

/* ── 폰(767 이하) r11: 정원 띠 300(세 겹 · 섹션 맨 위) → 눈썹·제목 → 이야기 → 매듭 화단 84 → '혼자 신고할 때' → 알약 → 카드 → 마무리 줄 → 끝 꽃 둔덕 84
   반박 2·3: 위 끝 꽃 띠(74)를 없애고 정원 띠를 맨 위로(첫 화면 다음 = 띠 묶기 장면) · 매듭 띠는 꽃 둔덕 대신 잎 화단(다른 장치) · 끝은 얇은 띠(36) 대신 둔덕 84
   글 기둥은 display:contents 로 풀어 차례만 바꿈(마크업·DOM 순서 그대로) ── */
@media (max-width: 767px) {
  .s1x { padding: 0 0 6px; display: flex; flex-direction: column; }
  .s1x-col { display: contents; text-align: left; }
  .s1x-col > * { position: relative; z-index: 2; margin-left: 16px; margin-right: 16px; }
  .s1x-g.s1x-gl { order: 0; position: relative; top: auto; z-index: 1; width: 100%; height: 300px; margin-top: 4px; clip-path: inset(-100vh 0 0 0); view-timeline: --s1xm block; }
  .s1x-g.s1x-gr { display: none; }
  .s1x-col > .s1x-eb { order: 1; margin-top: 14px; margin-bottom: 10px; }
  .s1x-col > .s1x-h { order: 2; font-size: 36px; line-height: 1.14; }
  .s1x-col > .s1x-story { order: 4; margin-top: 12px; font-size: 18px; line-height: 1.5; }
  .s1x-col > .s1x-knot { order: 5; z-index: 1; height: 84px; margin: 4px 0 0; }
  .s1x-col > .s1x-lab { order: 6; margin: 4px 16px 8px; }
  .s1x-col > .s1x-pills { order: 7; }
  .s1x-col > .s1x-card { order: 8; }
  .s1x-col > .s1x-close { order: 9; }
  .s1x-col > .s1x-ge { order: 10; display: block; z-index: 1; width: 100%; height: 84px; margin: 4px 0 0; }
  .s1x-pills { gap: 8px; }
  .s1x-pill { padding: 0 6px; }
  .s1x-card { margin-top: 12px; padding: 16px 16px 4px; border-radius: 18px; }
  .s1x-sit { margin-top: 8px; }
  .s1x-a h4 { margin: 4px 0 10px; }
  .s1x-a dl > div { grid-template-columns: 84px 1fr; column-gap: 10px; padding: 6px 0; }
  .s1x-close { margin-top: 8px; }
  .s1x-g.s1x-gl noscript img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
  .s1x-gl.is-fallback img.still { width: 100%; object-fit: cover; object-position: center bottom; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s1x.dv-css .s1x-gl .dl { animation: garden-rise cubic-bezier(.42, .42, .55, 1) both; animation-timeline: --s1xm; animation-range: entry 0% entry 100%; }
    .s1x.dv-css .s1x-gl .far { --gr-y0: 8%; }
    .s1x.dv-css .s1x-gl .mid { --gr-y0: 18%; }
    .s1x.dv-css .s1x-gl .near { --gr-x0: 0px; --gr-y0: 12%; }
    .s1x.dv-css .s1x-gl .near .half { position: absolute; inset: 0; animation: garden-rise cubic-bezier(.42, .42, .55, 1) both; animation-timeline: --s1xm; animation-range: entry 0% entry 100%; --gr-y0: 0px; }
    .s1x.dv-css .s1x-gl .near .half.hl { --gr-x0: 24px; }
    .s1x.dv-css .s1x-gl .near .half.hr { --gr-x0: -24px; }
    .s1x.dv-css .s1x-gl .far > .rise, .s1x.dv-css .s1x-gl .near > .rise { animation: none; }
  }
}
.s1x .near .half { position: absolute; inset: 0; }