/* s5x.css(갈래 page):토큰·.in5x·.ix5x·#scope·#faq · 반경 {0,12,16,24,48,999} · 선 1px */
:root {
  --s5x-max:1360px;--s5x-gap:16px;--s5x-padX:40px;--s5x-padY:80px;--s5x-padB:96px;--s5x-stepGap:96px;--s5x-row:52px;
  --s5x-ink:#151414;--s5x-plate:#2b2825;
  --s5x-l08:rgb(253 251 247 / .08);--s5x-l12:rgb(253 251 247 / .12);--s5x-l24:rgb(253 251 247 / .24);
  --s5x-tx:#fdfbf7;--s5x-tx2:rgb(253 251 247 / .72);--s5x-tx3:rgb(253 251 247 / .56);
  --s5x-c08:rgb(21 20 20 / .08);--s5x-c12:rgb(21 20 20 / .12);--s5x-c24:rgb(21 20 20 / .24);
  --s5x-on:#ff5e1f;--s5x-on-bg:rgb(255 94 31 / .08);--s5x-on-bg6:rgb(255 94 31 / .06);--s5x-on-tx:#c2410c;
  --s5x-ok:#87d1a3;--s5x-ok-c:#2f7a57;
  --s5x-e1:#fc78ba;--s5x-e2:#fc9c90;--s5x-e3:#6cc69c;--s5x-e4:#c6d254;--s5x-e5:#fcb496;
  --s5x-r-band:48px;
  --s5x-in:800ms;--s5x-stg:80ms;--s5x-beat:400ms;--s5x-wipe:240ms;--s5x-draw:3200ms;--s5x-c1:1900ms;--s5x-c2:2100ms;
}
@media (max-width:767px) {
  :root{--s5x-padX:16px;--s5x-padY:48px;--s5x-padB:56px;--s5x-stepGap:56px;--s5x-row:52px;--s5x-r-band:24px}
}
.in5x, .hd5x, .s5x .st, .biz5x{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:var(--s5x-gap)}
.in5x > *, .hd5x > *, .s5x .st > *, .biz5x > *{min-width:0}
.in5x{max-width:var(--s5x-max);margin:0 auto}
/* .ix5x:ol[data-n] > li[aria-current] > i.ring + b (+ span.val) */
.ix5x{--ix-tx:var(--s5x-tx);--ix-tx3:var(--s5x-tx3);--ix-line:var(--s5x-l12);--ix-on:var(--s5x-on);
  list-style:none;margin:0;padding:0 20px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:8px;border-bottom:1px solid var(--ix-line)}
.ix5x[data-n="5"]{grid-template-columns:repeat(5, minmax(0, 1fr))}
.ix5x > li{position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;column-gap:8px;row-gap:4px;min-width:0;min-height:44px;
  font-size:14px;line-height:1.3;font-weight:600;color:var(--ix-tx3)}
.ix5x > li > .ring{flex:none;width:12px;height:12px;border-radius:999px;border:1px dashed currentColor}
.ix5x > li > b{font-weight:600;white-space:nowrap}
.ix5x > li > .val{flex-basis:100%;font-size:15px;font-weight:400;line-height:1.45;color:var(--ix-tx3)}
.ix5x.has-val > li{align-content:flex-start;padding:12px 0 14px}
.ix5x > li:is([aria-current="true"], .is-cur){color:var(--ix-tx)}
.ix5x > li:is([aria-current="true"], .is-cur) > .ring{border-style:solid;border-color:var(--ix-on)}
.ix5x > li:is([aria-current="true"], .is-cur)::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ix-on);transform-origin:0 50%}
.is-armed:not(.is-run) .ix5x > li:is([aria-current="true"], .is-cur)::after{transform:scaleX(0)}
@media (prefers-reduced-motion:no-preference) {
  .is-run .ix5x > li:is([aria-current="true"], .is-cur)::after{transition:transform .3s var(--ease-ui)}
}
.ix5x.on-cream, .s6x .ix5x{--ix-tx:var(--ink);--ix-tx3:var(--muted);--ix-line:var(--s5x-c12)}
@media (max-width:767px) {
  .ix5x{padding:0 12px;column-gap:4px}
  .ix5x[data-n="5"]{padding:0;column-gap:0}
  .ix5x > li{column-gap:6px}
  .ix5x > li > .val{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ix5x.has-val > li{align-content:center;padding:0}
}
/* s4 자리표(lab 전용 · Integrate 때 지움) */
.s4-stub{height:max(480px, 100vh);padding:64px max(var(--s5x-padX), calc((100% - var(--s5x-max)) / 2)) 80px;background:var(--s5x-ink);
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}
.s4-stub > i{border:1px solid var(--s5x-l12);border-radius:16px}
html[data-s4="cream"] .s4-stub{background:var(--page)}
html[data-s4="cream"] .s4-stub > i{border-color:var(--s5x-c12)}
@media (max-width:767px){.s4-stub{grid-template-columns:minmax(0, 1fr);padding-top:48px} .s4-stub > i + i{display:none}}
/* ══ 먹 띠 #scope ══ */
.s5x{margin:-1px 0 0} /* 먹 이음 1px 겹침(DPR 2.81 반 화소 틈 0) */
.s5x .band{position:relative;margin:0;padding:var(--s5x-padY) var(--s5x-padX) var(--s5x-padB);background:var(--s5x-ink);color:var(--s5x-tx);
  border-radius:0 0 var(--s5x-r-band) var(--s5x-r-band)}
.s5x .band[data-join="cream"]{margin-top:var(--s5x-stepGap);border-radius:var(--s5x-r-band)}
.s5x .band :focus-visible{outline-color:var(--s5x-on)}
.s5x .band .link{color:var(--s5x-tx)}
.hd5x{grid-column:1 / -1;align-items:end}
.hd5x h2{grid-column:1 / 7;color:var(--s5x-tx)}
.hd5x-r{grid-column:7 / 13}
.hd5x .t-story{color:var(--s5x-tx2)}
.s5x .money{margin:16px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--s5x-tx2)}
/* 단계:판 7열 + 글 4열 */
.s5x .st{grid-column:1 / -1;row-gap:20px;margin-top:var(--s5x-stepGap)}
.s5x .st-l{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:12px;margin:0;font-size:16px;line-height:1.4;font-weight:600;color:var(--s5x-on)}
.s5x .st-l::before{content:'';flex:none;width:20px;height:1px;background:var(--s5x-l24)}
.s5x .st-a .st-w, .s5x .st-c .st-w{grid-column:1 / 8;grid-row:2}
.s5x .st-a .st-t, .s5x .st-c .st-t{grid-column:9 / 13;grid-row:2;align-self:center}
.s5x .st-b .st-t{grid-column:1 / 5;grid-row:2;align-self:center}
.s5x .st-b .st-w{grid-column:6 / 13;grid-row:2}
.s5x .st-b .st-l{grid-column:6 / -1}
.s5x .st-t h3, .fq-l h2, .biz5x h3{text-wrap:balance}
.s5x .nw{white-space:nowrap}
.s5x .st-t h3{margin:0;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--s5x-tx)}
.s5x .st-t p{margin:12px 0 0;font-size:18px;line-height:1.6;letter-spacing:-.012em;color:var(--s5x-tx2)}
.s5x .st-t p.fine{margin-top:16px;font-size:15px;line-height:1.6;letter-spacing:-.005em;color:var(--s5x-tx3)}
.s5x .st-t p.fine .link{min-height:48px;font-size:15px;margin-left:4px}
.s5x .st-w{padding:32px;background:var(--s5x-plate);border:1px solid var(--s5x-l08);border-radius:var(--r-card)}
.lg5x{grid-column:1 / -1;margin:56px 0 0;font-size:15px;line-height:1.7;letter-spacing:-.005em;color:var(--s5x-tx3)}
.lg5x .rg{display:inline-block;width:12px;height:12px;margin:0 6px 0 4px;border-radius:999px;border:1px dashed var(--s5x-tx3);vertical-align:-1px}
.lg5x .rg-s{border-style:solid;border-color:var(--s5x-tx)}
.lg5x .rg-o{border-style:solid;border-color:var(--s5x-on)}
.lg5x .rg-k{position:relative;border:1px solid var(--s5x-on);background:var(--s5x-on)}
.lg5x .rg-k::after{content:'';position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid var(--s5x-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.lg5x .rg-x{width:16px;height:1px;border:0;border-radius:0;background:var(--s5x-tx2);vertical-align:4px}
.biz5x{grid-column:1 / -1;margin-top:var(--s5x-stepGap);padding-top:48px;border-top:1px solid var(--s5x-l12)}
.biz5x h3{grid-column:1 / 6;margin:0;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--s5x-tx)}
.biz5x-r{grid-column:6 / 13}
.biz5x-r p{margin:0;font-size:18px;line-height:1.6;letter-spacing:-.012em;color:var(--s5x-tx2)}
.biz5x-r p.b2{margin-top:20px;font-size:16px}
.biz5x-4{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));border:1px solid var(--s5x-l12);border-radius:12px}
.biz5x-4 > li{display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:12px 14px;font-size:15px;line-height:1.4;font-weight:600;color:var(--s5x-tx2)}
.biz5x-4 > li + li{border-left:1px solid var(--s5x-l12)}
.biz5x-4 .ring{flex:none;width:12px;height:12px;border-radius:999px;border:1px dashed var(--s5x-tx3)}
.biz5x-go{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:4px;margin-top:16px !important}
.biz5x-go .link{font-size:16px;min-height:48px}
/* ══ 자주 묻는 질문 ══ */
.faq5x{padding:96px var(--s5x-padX) 0}
.fq-l{grid-column:1 / 5}
.fq-r{grid-column:5 / 13}
.fq-l h2 .w4{display:block} /* 말 덩어리 줄바꿈:맡기기 전에 / 궁금한 것부터 답해요. */
.fq-l h2{font-size:40px;line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.fq-lead{margin:20px 0 0;font-size:18px;line-height:1.6;letter-spacing:-.012em;color:var(--sub)}
.fq-l .more{margin-top:16px;font-size:16px;line-height:1.45}
.s5x .faqlist > details{position:relative;border-top:1px solid var(--s5x-c12)}
.s5x .faqlist > details:last-of-type{border-bottom:1px solid var(--s5x-c12)}
.s5x .faqlist > details::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--s5x-on);transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.s5x .faqlist > details[open]{background:var(--s5x-on-bg6)}
.s5x .faqlist > details[open]::before{transform:none}
.s5x .faqlist summary{position:relative;display:flex;align-items:center;min-height:64px;padding:18px 64px 18px 20px;
  font-size:20px;line-height:1.45;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.s5x .faqlist summary:focus-visible{outline:2px solid var(--s5x-on-tx);outline-offset:-3px}
.s5x .faqlist > details > p{margin:0;padding:0 64px 24px 20px;max-width:680px;font-size:16px;line-height:1.7;letter-spacing:-.01em;color:var(--sub)}
.faq5x .plus{position:absolute;right:20px;top:50%;width:24px;height:24px;margin-top:-12px;color:var(--ink)}
.faq5x .plus::before, .faq5x .plus::after{content:'';position:absolute;left:5px;top:11px;width:14px;height:1.5px;background:currentColor}
.faq5x .plus::after{transform:rotate(90deg)}
.s5x .faqlist > details[open] > summary .plus{transform:rotate(45deg)}
.s5x .faqm{position:relative;display:flex;align-items:center;width:100%;min-height:56px;margin:0;padding:0 64px 0 20px;
  border:0;border-top:1px solid var(--s5x-c12);border-bottom:1px solid var(--s5x-c12);background:transparent;font:inherit;font-size:16px;line-height:1.4;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.s5x .faqm[hidden]{display:none}
.s5x .faqm:focus-visible{outline:2px solid var(--s5x-on-tx);outline-offset:-3px}
/* 접기 = 폰만 · s5-ui.js 가 모든 폭 접기여도 768↑ 여섯 다 */
@media (max-width:767px) {
  .s5x .faqlist.is-short > details:nth-of-type(n+4){display:none}
  .s5x .faqlist.is-short > details:nth-of-type(3){border-bottom:0}
}
@media (min-width:768px){.s5x .faqm{display:none}}
@media (hover:hover){.s5x .faqlist summary:hover, .s5x .faqm:hover{color:var(--s5x-on-tx)}}
/* ══ 움직임(무장 = s5x-ui.js · 화면 밖만 · 한 번) ══ */
@media (prefers-reduced-motion:no-preference) {
  .s5x .faqlist summary{transition:color .15s}
  .faq5x .plus{transition:transform .2s var(--ease-ui)}
  .s5x .faqlist > details::before{transition:transform .2s var(--ease-ui)}
  .faq5x{interpolate-size:allow-keywords}
  .s5x .faqlist > details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-ui), content-visibility .45s allow-discrete}
  .s5x .faqlist > details[open]::details-content{block-size:auto}
  .s5x [data-rv].is-armed{transform:translateY(16px)}
  .s5x [data-rv].is-armed.is-run{transform:none;transition:transform var(--s5x-in) var(--ease-ui) var(--d, 0ms)}
  /* A 판 눕기(한 번 · 끝 transform none) */
  .s5x .st-a .st-w.is-armed{transform:perspective(1200px) rotateX(8deg) translateY(16px);transform-origin:50% 100%} /* 아래 끝 축:위 끝이 뒤로 누웠다 펴짐(보이는 위 끝이 움직임) */
  .s5x .st-a .st-w.is-armed.is-run{transform:none}
}
/* ══ 1023 이하:머리 쌓기 · 라벨 → 글 → 판 ══ */
@media (max-width:1279px) {
  .s5x .st-w{padding:24px}
}
@media (max-width:1023px) {
  .hd5x h2, .hd5x-r{grid-column:1 / -1}
  .s5x .st-b .st-l{grid-column:1 / -1}
  .hd5x-r{margin-top:24px;max-width:680px}
  .s5x .st-a .st-t, .s5x .st-b .st-t, .s5x .st-c .st-t{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:var(--s5x-gap)}
  .s5x .st-t > h3{grid-column:1 / 7}
  .s5x .st-t > p{grid-column:7 / 13;margin-top:0}
  .s5x .st-t > p.fine{grid-column:7 / 13;margin-top:8px}
  .s5x .st-a .st-w, .s5x .st-b .st-w, .s5x .st-c .st-w{grid-column:1 / -1;grid-row:3}
  .biz5x h3, .biz5x-r{grid-column:1 / -1}
  .biz5x-r{margin-top:20px}
  .fq-l, .fq-r{grid-column:1 / -1}
  .fq-r{margin-top:40px}
  .fq-l{max-width:680px}
}
/* ══ 폰 767 이하 ══ */
@media (max-width:767px) {
  .hd5x-r{margin-top:20px}
  .hd5x .t-story{font-size:18px;line-height:1.5}
  .s5x .st{display:flex;flex-direction:column;row-gap:0}
  .s5x .st-l{order:0;margin-bottom:16px}
  .s5x .st-w{order:1;padding:12px}
  .s5x .st-t{order:2;display:block !important;margin-top:20px}
  .s5x .st-t h3{font-size:20px;line-height:1.4}
  .s5x .st-t p{margin-top:10px;font-size:16px;line-height:1.6}
  .s5x .st-t p.fine{font-size:15px}
  .lg5x{margin-top:40px}
  .biz5x{padding-top:32px}
  .biz5x h3{font-size:20px;line-height:1.4}
  .biz5x-r p{font-size:16px}
  .biz5x-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .biz5x-4 > li{min-height:48px;padding:10px 12px}
  .biz5x-4 > li:nth-child(odd){border-left:0}
  .biz5x-4 > li:nth-child(n+3){border-top:1px solid var(--s5x-l12)}
  .biz5x-go{column-gap:20px}
  .faq5x{padding-top:56px}
  .fq-l h2{font-size:30px;line-height:1.2}
  .fq-lead{font-size:16px}
  .fq-r{margin-top:28px}
  .s5x .faqlist summary{min-height:56px;padding:14px 52px 14px 12px;font-size:18px}
  .s5x .faqlist > details > p{padding:0 12px 20px}
  .faq5x .plus{right:12px}
  .s5x .faqm{padding:0 52px 0 12px}
}
@media (prefers-reduced-motion:reduce) {
  .s5x .is-armed, .s6x .is-armed{transform:none !important;transition:none !important}
}

/* ══ 수리(10-24 · 쪽 전체 수리공) — #scope 크림 판 · 꽃 판 위 종이 창 셋 ══
   왜: 합친 판에서 s4 판 → 원칙 줄 → s5 띠가 먹 한 덩어리 5,500px(1440 · '갑자기 너무 깜장임' 1-11) · s5~s6 다색 0.1~0.4%(검사표 1 · 4-4)
       · s5 길이 3,198px(1440)·3,705px(360 · 4-6). 바꾼 것: 띠 = 크림(먹 큰 면 = s4 판 하나) · 창 = 종이(s3 결과서와 같은 재료)
       · 창 받침(.st-w) = s4 카드 뒷면과 같은 손그림 꽃 무늬(still/s4x-tile · 반복 이음 0 무늬만 · 216×306 = 원본 ½ → DPR 2 에서 화소 1:1)
       · 1180↑ 창 셋 한 줄(밑판 높이 같음 · 글 줄 맞춤 = subgrid) · 폰 = 옆으로 넘기는 한 줄(다음 창 24px 보임 = 무늬·테만, 글 잘림 0).
   antimetal 문법(창을 재료 판 위에)을 우리 재료(꽃)로. 창 안쪽(갈래 diagram) 글·id·시퀀스 = 그대로 · 색은 변수만 뒤집음(크림 위 먹 글). */
.s5x .st-w{container:s5w / inline-size}
.s5x .band[data-tone="paper"]{background:transparent;color:var(--ink);border-radius:0;padding-top:96px;padding-bottom:0;
  --s5x-ink:#fcf9f5;--s5x-tx:#151414;--s5x-tx2:rgb(21 20 20 / .74);--s5x-tx3:rgb(21 20 20 / .62);
  --s5x-l08:var(--s5x-c08);--s5x-l12:var(--s5x-c12);--s5x-l24:var(--s5x-c24)}
.s5x .band[data-tone="paper"] .st-l{color:var(--s5x-on-tx)}
.s5x .band[data-tone="paper"] .st-w{padding:20px;border:0;border-radius:24px;background-color:var(--mat-bg, #fca86c);background-image:var(--mat, none);background-size:216px 306px;background-repeat:repeat}
.s5x .band[data-tone="paper"] .win{border-color:var(--s5x-c12)}
.s5x .st-a{--mat:url(../still/s4x-tile-instagram-tiktok.webp);--mat-bg:#ff8c55}
.s5x .st-b{--mat:url(../still/s4x-tile-naver-blog-cafe.webp);--mat-bg:#c6d254}
.s5x .st-c{--mat:url(../still/s4x-tile-youtube.webp);--mat-bg:#fc7266}
.s5x .sts5x{display:contents}
@media (min-width:1180px) {
  .s5x .sts5x{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:24px;margin-top:72px}
  .s5x .sts5x > .st{grid-column:auto;grid-row:span 3;display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:subgrid;row-gap:20px;margin-top:0}
  .s5x .sts5x > .st > .st-l{grid-column:1;grid-row:1}
  .s5x .sts5x > .st > .st-w{grid-column:1;grid-row:2}
  .s5x .sts5x > .st > .st-t{grid-column:1;grid-row:3;align-self:start}
  .s5x .sts5x > .st-b > .st-l{grid-column:1}
  .s5x .sts5x .st-t h3{font-size:22px}
  .s5x .sts5x .st-t p{font-size:17px}
}
@media (max-width:767px) {
  .s5x .band[data-tone="paper"]{padding-top:56px}
  .s5x .band[data-tone="paper"] .st-w{padding:12px;border-radius:20px}
  .s5x .sts5x{grid-column:1 / -1;display:flex;align-items:stretch;gap:12px;margin:36px calc(-1 * var(--s5x-padX)) 0;padding:0 var(--s5x-padX) 4px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s5x-padX);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s5x .sts5x::-webkit-scrollbar{display:none}
  .s5x .sts5x > .st{position:relative;flex:0 0 calc(100% - 20px);min-width:0;margin-top:0;scroll-snap-align:start}
  /* 폰 한 장 = 꽃 받침 하나(창 + 설명 종이) — 옆 장이 24px 보일 때 보이는 건 무늬 12 + 종이 테 12 뿐(글 잘림 0 · 8-4) */
  .s5x .band[data-tone="paper"] .sts5x > .st{gap:12px;padding:12px;border-radius:20px;background-color:var(--mat-bg, #fca86c);background-image:var(--mat, none);background-size:216px 306px;background-repeat:repeat}
  .s5x .band[data-tone="paper"] .sts5x .st-w{padding:0;border-radius:0;background:none;animation:none}
  .s5x .band[data-tone="paper"] .sts5x .st-t{margin-top:0;padding:16px;border:1px solid var(--s5x-c12);border-radius:16px;background:#fcf9f5}
  .s5x .band[data-tone="paper"] .sts5x .st-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* 이름은 창 머리 색인(근거·범위·기간·비용)이 같은 말로 보여 줌 · 글은 DOM 그대로 */
}
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: view()) {
    /* 무늬가 스크롤만큼 천천히 흐름(창은 그대로 · 되감으면 거꾸로) — 받침이 멈춘 벽지로 읽히지 않게 */
    .s5x .band[data-tone="paper"] .st-w{animation:s5x-mat linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes s5x-mat{from{background-position:0 0}to{background-position:0 -306px}}
html.is-still .s5x .st-w{animation:none}

/* 수리(10-24): 자주 묻는 질문 왼쪽 = '비용이 정해지는 기준' 장부 정원(js/s5-scene.js · art.js ledger 640×560 · 옛 r8 s5 큰 장면을 다시 씀)
   꼬리표 넷·꽃대 머리 둘이 화면 안에서만 흔들림(au-sway · 허용 이름) · 모션 줄이기·저사양 = 한 장 · 실패 = still/s5-scene-d.webp · 폰(1023 이하)은 자리 0(그림 0 · 길이 0) */
.fq-art{position:relative;width:100%;aspect-ratio:640 / 560;margin-top:40px}
.fq-art > canvas{display:block}
.fq-art > canvas.sw{position:absolute}
.fq-art img.still{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference) {
  .fq-art > canvas.sw{animation:au-sway var(--sw-d, 4s) ease-in-out var(--sw-l, 0s) infinite alternate;animation-play-state:paused;will-change:transform}
  .fq-art.is-on > canvas.sw{animation-play-state:running}
}
@media (max-width:1023px){.fq-art{display:none}}
/* 폰(767↓) = 같은 장면의 폰 컷 A(ledgerM 360×312 · 꼬리표 · 장부) — s5-scene.js 가 폰에서 .art5a 를 찾아 그림(컷 B 0) · 질문 목록 위 */
@media (max-width:767px){.fq-art{display:block;width:calc(100% + 32px);margin:24px -16px 0;aspect-ratio:360 / 312}}

/* 수리(10-24): 정기관리 줄 = '해바라기 씨앗판 시계'(art.js sunclock · 05 재확인 = 정기적으로 다시 봄) — 글만 있던 화면(1440 다색 0.09%)에 물건 한 점
   js/illo-big.js(조각 그리기 · 화면 안에서만 au-sway) · 실패 = still/art-sunclock.webp */
.biz5x-art{position:relative;width:200px;aspect-ratio:112 / 136;margin-top:24px;transform-origin:50% 100%}
.biz5x-art > canvas, .biz5x-art img.still{display:block;width:100%;height:auto}
@media (min-width:1024px){.biz5x h3{grid-row:1}.biz5x-art{grid-column:1 / 6;grid-row:2}.biz5x-r{grid-row:1 / span 2}}
@media (max-width:1023px){.biz5x-art{grid-column:1 / -1;width:150px;margin:20px 0 0}}
@media (prefers-reduced-motion:no-preference) {
  .biz5x-art, .who-art{--sway:1.6deg}
  .biz5x-art.is-on > canvas, .who-art.is-on > canvas{transform-origin:50% 100%;animation:au-sway 4.4s ease-in-out -1.2s infinite alternate}
}
