/* gfx-sweep — G2 표면 스윕(찾기) · 홈 무대판(11-04 이식). 원본 = /기술 운영 장면(qa/work-tech … demos/gfx-sweep · 꾸러미 tech1103b/3/gfx/sweep/pkg).
   배치(11-04 장면 마무리) = 머리 → 큰 숫자 줄(후보 주소 0→510 · 같은 문장 0→285 · 검색한 곳 33) → 꽉 찬 가로 스윕 판(.gfx-sweep__plot.st-frame · 레일 34줄) → 범례. 폰은 세로 기둥 34개.
   움직임 = 자동 반복(js/gfx-sweep.js): 보이면 시작 · 안 보이면 멈춤 · 한 바퀴 10.3초 + 끝 1.5초 멈춤 → 처음부터. 스크롤 고정(pin) 0.
   색 = 공용 토큰 5개만 읽음(--gfx-ink · --gfx-paper · --gfx-dim · --gfx-line · --gfx-accent · 밝은 기본값 아래) — .hb-stage(css/stage.css)가 무대 값으로 덮음.
     나머지 색은 다섯에서 섞어 만듦(color-mix) · 새 색 0. 주황 글자만 밝은 바탕에서 어둡게(#c2410c), 무대에서는 브랜드 주황 그대로.
   상태: .is-anim(조각 첫 줄 스크립트: 움직임 허용 + ?still=1 아님) → 자리 그대로 · .is-live(엔진 붙음) → 포스터 SVG 대신 캔버스.
     모션 줄이기 · JS 꺼짐 · ?still=1 = 포스터(끝 장면 정지판 · 서버 HTML 그대로). 세 경우와 움직이는 판의 높이가 같음(흔들림 0).
   모든 선택자는 .gfx-sweep 아래 · 전역 규칙 0 · @font-face 0(쪽 글꼴 --font 를 씀). */
.gfx-sweep{
  --sw-ink:var(--gfx-ink,#151414);
  --sw-page:var(--gfx-paper,#fdfbf7);
  --sw-muted:var(--gfx-dim,#6b665f);
  --sw-line:var(--gfx-line,#e6dccd);
  --sw-fl:var(--gfx-accent,#ff5e1f);
  --sw-sub:color-mix(in srgb,var(--sw-ink) 76%,var(--sw-page));
  --sw-faint:color-mix(in srgb,var(--sw-muted) 62%,var(--sw-page));
  --sw-card:color-mix(in srgb,var(--sw-ink) 3%,var(--sw-page));
  --sw-sand:color-mix(in srgb,var(--sw-line) 62%,var(--sw-page));
  --sw-axis:color-mix(in srgb,var(--sw-ink) 14%,var(--sw-line));
  --sw-tick:color-mix(in srgb,var(--sw-ink) 32%,var(--sw-page));
  --sw-rail:color-mix(in srgb,var(--sw-ink) 20%,var(--sw-page));
  --sw-rail0:color-mix(in srgb,var(--sw-ink) 8.5%,var(--sw-page));
  --sw-hatch:color-mix(in srgb,var(--sw-ink) 40%,transparent);
  --sw-lg1:color-mix(in srgb,var(--sw-ink) 28%,var(--sw-page));
  --sw-lg2:color-mix(in srgb,var(--sw-ink) 48%,var(--sw-page));
  --sw-fl-text:#c2410c;
  --sw-font:var(--gfx-sweep-font,var(--font,'AboutUs Home Sans',system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif));
  --pitch:14px;--lab:140px;--cnt:44px;--gut:12px;--colh:380px;--gutter:40px;
  position:relative;isolation:isolate;display:block;background:transparent;color:var(--sw-ink);
  font-family:var(--sw-font);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;text-align:left;line-height:1.4;overflow-x:clip;
}
.hb-stage .gfx-sweep{--sw-fl-text:var(--sw-fl)}
@supports not (color:color-mix(in srgb,red,blue)){
  .gfx-sweep{--sw-sub:#4d4a46;--sw-faint:#a99f92;--sw-card:#fffdf9;--sw-sand:#f3e9dc;--sw-axis:#cfc4b4;--sw-tick:#b3aea8;--sw-rail:#cfcdc9;--sw-rail0:#eae8e4;--sw-hatch:rgba(21,20,20,.42);--sw-lg1:#c9beae;--sw-lg2:#9a8f80}
  .hb-stage .gfx-sweep{--sw-sub:#bdbab5;--sw-faint:#5b5853;--sw-card:#141414;--sw-sand:#1f1e1d;--sw-axis:#4a4846;--sw-tick:#57565a;--sw-rail:#3a3938;--sw-rail0:#1d1d1d;--sw-hatch:rgba(244,242,238,.4);--sw-lg1:#4c4b4a;--sw-lg2:#807d79}
}
.gfx-sweep *,.gfx-sweep *::before,.gfx-sweep *::after{box-sizing:border-box}
.gfx-sweep :where(h2,p,dl,dd,dt,ol,ul,li,q){margin:0;padding:0}
.gfx-sweep :where(ol,ul){list-style:none}
.gfx-sweep q{quotes:'“' '”'}
.gfx-sweep__data{display:none}
.gfx-sweep__probe{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ── 1440: 머리(+ 기록 줄 오른쪽) · 꽉 찬 판(+ 큰 숫자 얹음) · 범례 · 각주 ── */
.gfx-sweep__stage{
  position:relative;width:min(100% - 2 * var(--gutter),1760px);margin:0 auto;padding:var(--gfx-sweep-pad-top,0px) 0 var(--gfx-sweep-pad-bottom,0px);   /* 위 여백 = 무대 자리(section.hb-gfx)의 --st-pad */
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "nums" "plot" "foot" "note";grid-template-rows:auto auto auto auto auto;
}
/* 글 기둥(머리 · 기록 줄 · 범례 · 각주) = 무대 글 기둥 폭(1360) · 판(레일)만 넓은 화면에서 그 밖으로 꽉 참 */
.gfx-sweep__head,.gfx-sweep__legend,.gfx-sweep__foot{width:min(100%,var(--sw-col,1360px));justify-self:center}
.gfx-sweep__head{grid-area:head;margin-bottom:30px}
.gfx-sweep__title{font-size:var(--st-h,44px);line-height:1.1;font-weight:650;letter-spacing:-.025em;color:var(--sw-ink)}
.gfx-sweep__lead{margin-top:14px;font-size:var(--st-lead,18px);line-height:1.45;color:var(--sw-sub)}
.gfx-sweep__label{margin-top:6px;font-size:15px;line-height:1.35;color:var(--sw-muted)}

/* 판: 검색어 칩 · 단계 이름표 · 멈춤 · 열 머리 · 레일 34 · 시간 축 — 주인공 판 = .st-frame(둥글기·선·그림자·테두리 빛 = stage.css) · 안쪽 여백(--fp-x · --fp-y)만 여기서 */
.gfx-sweep__plot{grid-area:plot;position:relative;min-height:0;--fp-x:0px;--fp-y:0px}
.gfx-sweep__plot.st-frame{--fp-x:28px;--fp-y:22px;padding:var(--fp-y) var(--fp-x) calc(var(--fp-y) - 4px);--sw-fpage:color-mix(in srgb,var(--sw-ink) 2.5%,var(--sw-page))}   /* 판 안 글 상자 바탕 = 판 바탕(stage.css: 글 2.5%)과 같은 색 · 움직일 때는 엔진이 계산값으로 덮음 */
.gfx-sweep__bar{position:relative;z-index:2;display:flex;align-items:center;column-gap:24px;min-height:44px;margin:0 0 14px}
.gfx-sweep__query{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:12px;height:44px;
  padding:0 20px 0 6px;border:1px solid var(--sw-line);border-radius:999px;background:var(--sw-card);white-space:nowrap}
.gfx-sweep__qk{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:var(--sw-sand);font-size:15px;font-weight:600;color:var(--sw-sub)}
.gfx-sweep__qt{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--sw-ink);overflow:hidden;text-overflow:ellipsis}
/* 단계 이름표(바퀴에 맞춰 하나만) — 다섯 줄을 한 자리에 겹쳐 두고 지금 것만 보임(폭은 가장 긴 이름표 = 자리 흔들림 0) */
.gfx-sweep__beats{display:none}
.gfx-sweep.is-anim .gfx-sweep__beats{display:grid;flex:none;align-items:center;visibility:hidden}
.gfx-sweep.is-live .gfx-sweep__beats{visibility:visible}
.gfx-sweep__beats li{grid-area:1/1;display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.2;font-weight:650;color:var(--sw-ink);white-space:nowrap;
  opacity:0;transform:translate3d(0,6px,0);transition:opacity .22s,transform .32s cubic-bezier(.22,1,.36,1)}
.gfx-sweep__beats li::before{content:'';flex:none;width:8px;height:8px;border-radius:999px;background:var(--sw-fl)}
.gfx-sweep__beats li.is-now{opacity:1;transform:none}
.gfx-sweep__ctl{display:none;margin-left:auto;flex:none;height:34px;padding:0 14px;font:inherit;font-size:15px;line-height:1;font-weight:600;color:var(--sw-sub);
  background:transparent;border:1px solid var(--sw-line);border-radius:12px;cursor:pointer}
.gfx-sweep.is-anim .gfx-sweep__ctl{display:inline-flex;align-items:center;visibility:hidden}
.gfx-sweep.is-live .gfx-sweep__ctl{visibility:visible}
.gfx-sweep__ctl:hover{color:var(--sw-ink);border-color:var(--sw-sub)}
.gfx-sweep__ctl:focus-visible{outline:2px solid var(--sw-fl);outline-offset:2px}
.gfx-sweep__field{position:relative}
.gfx-sweep__colhead{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) var(--cnt);column-gap:var(--gut);height:24px;align-items:end;font-size:15px;line-height:1;color:var(--sw-muted);padding-bottom:8px}
.gfx-sweep__ch-n{text-align:right;white-space:nowrap}
.gfx-sweep__grid{position:relative}
.gfx-sweep__rails{display:grid;grid-template-rows:calc(var(--pitch) * 1.6) repeat(33,var(--pitch))}
.gfx-sweep__rail{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) var(--cnt);column-gap:var(--gut);align-items:center;min-height:0}
.gfx-sweep__rail:first-child{align-self:start;height:var(--pitch)}
.gfx-sweep__name{font-size:min(12px,calc(var(--pitch) * .86));line-height:1;color:var(--sw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfx-sweep__tag{color:var(--sw-faint)}
.gfx-sweep__rail.is-none .gfx-sweep__name{color:var(--sw-faint)}
.gfx-sweep__rail.is-hit .gfx-sweep__name{color:var(--sw-ink)}
.gfx-sweep__track{position:relative;height:100%;min-width:0}
.gfx-sweep__n{font-size:min(12px,calc(var(--pitch) * .86));line-height:1;text-align:right;color:var(--sw-fl-text);white-space:nowrap}
.gfx-sweep__rail.is-none .gfx-sweep__n{color:var(--sw-faint)}
.gfx-sweep__rail.is-blocked .gfx-sweep__n,.gfx-sweep__rail.is-zero .gfx-sweep__n{color:var(--sw-muted)}
.gfx-sweep__rail.is-cand .gfx-sweep__n{color:var(--sw-ink)}
/* 막힌 검색(빗금) — 무늬는 가면, 색은 토큰 */
.gfx-sweep__hatch{position:absolute;left:0;right:0;top:calc(50% - 1px);height:10px;margin-top:-5px;pointer-events:none;background:var(--sw-hatch);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M-1 6L6-1M-1 1L1-1M4 6L6 4' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0/5px 5px repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M-1 6L6-1M-1 1L1-1M4 6L6 4' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0/5px 5px repeat}
/* 포스터(끝 장면) SVG — 칠은 토큰 */
.gfx-sweep__poster{position:absolute;left:calc(var(--lab) + var(--gut));top:0;width:calc(100% - var(--lab) - var(--cnt) - 2 * var(--gut));height:100%;max-width:none;overflow:visible;pointer-events:none}
.gfx-sweep__poster .g{stroke:var(--sw-line)}
.gfx-sweep__poster .z{stroke:var(--sw-rail0)}
.gfx-sweep__poster .r{stroke:var(--sw-rail)}
.gfx-sweep__poster .m{stroke:var(--sw-fl)}
.gfx-sweep__poster--v{display:none}
.gfx-sweep.is-live .gfx-sweep__poster{display:none}
/* 포스터 전용 척추 · 레일 머리(움직일 때는 캔버스가 같은 자리에 그림) */
.gfx-sweep__plot::before{content:'';position:absolute;z-index:1;left:calc(var(--fp-x) + var(--lab) + var(--gut) - 8px);top:calc(var(--fp-y) + 44px);bottom:calc(var(--fp-y) - 4px + 34px + var(--pitch) * .2);width:1px;background:var(--sw-rail)}
.gfx-sweep__track::before{content:'';position:absolute;left:-8px;width:8px;top:calc(50% + var(--pitch) * .3);height:1px;background:var(--sw-rail)}
.gfx-sweep__rail.is-none .gfx-sweep__track::before{background:var(--sw-rail0)}
.gfx-sweep__rail.is-blocked .gfx-sweep__track::before{display:none}
.gfx-sweep.is-live .gfx-sweep__plot::before,.gfx-sweep.is-live .gfx-sweep__track::before,.gfx-sweep.is-live .gfx-sweep__grid::before,.gfx-sweep.is-live .gfx-sweep__grid::after{display:none}

/* 첫 공개 게시처 추정(끝 장면) — 2005-09-27 눈금 자리(트랙 안 --x) */
.gfx-sweep__first{position:absolute;z-index:3;left:var(--x);top:calc(50% + var(--pitch) * .3);width:0;height:0;pointer-events:none}
.gfx-sweep__first-tag{position:absolute;left:14px;top:calc(var(--pitch) * -.3 + 6px);display:block;white-space:nowrap;background:var(--sw-fpage,var(--sw-page));padding:2px 16px 10px 8px}
.gfx-sweep__first-tag b{display:block;font-size:clamp(36px,3.5vw,50px);line-height:.92;font-weight:600;letter-spacing:-.035em;color:var(--sw-ink)}
.gfx-sweep__first-k{display:block;margin-top:10px;font-size:15px;line-height:1.3;font-weight:650;color:var(--sw-fl-text)}
.gfx-sweep__first-r{display:block;margin-top:2px;font-size:15px;line-height:1.3;color:var(--sw-sub)}

/* 시간 축 */
.gfx-sweep__axis{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) var(--cnt);column-gap:var(--gut);height:30px;margin-top:6px;align-items:start}
.gfx-sweep__ax-name{font-size:15px;line-height:1;color:var(--sw-muted);padding-top:9px}
.gfx-sweep__ax-track{position:relative;height:100%}
.gfx-sweep__ax-track::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--sw-axis)}
.gfx-sweep__yr{position:absolute;left:var(--x);top:0;font-size:15px;line-height:1;color:var(--sw-muted);white-space:nowrap}
.gfx-sweep__yr::before{content:'';position:absolute;left:0;top:0;width:1px;height:4px;background:var(--sw-axis)}
.gfx-sweep__yr.is-lab{padding-top:11px;transform:translateX(-50%)}
.gfx-sweep__yr.is-lab::before{left:50%;height:7px;background:var(--sw-muted)}
.gfx-sweep__yr.is-start{transform:none}
.gfx-sweep__yr.is-start::before{left:0}
.gfx-sweep__yr.is-bin{left:auto;right:0;padding-top:11px;transform:none}
.gfx-sweep__yr.is-bin::before{display:none}

/* 큰 숫자 줄(스윕 판 위) — 후보 주소 · 같은 문장(바퀴에 맞춰 0 에서 셈) · 오른쪽 끝 = 검색한 곳 33(작게). 숫자 칸 폭은 마지막 자릿수로 고정(세는 동안 밀림 0) */
.gfx-sweep__nums{grid-area:nums;width:min(100%,var(--sw-col,1360px));justify-self:center;display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start;margin:0 0 30px;position:relative;z-index:2}
.gfx-sweep__big{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.gfx-sweep__big-k{display:flex;align-items:center;gap:10px;font-size:18px;line-height:1.2;font-weight:650;color:var(--sw-ink);white-space:nowrap}
.gfx-sweep__big-k::before{content:'';flex:none;width:2px;height:14px;background:var(--sw-ink)}
.gfx-sweep__big[data-k="same"] .gfx-sweep__big-k::before{background:var(--sw-fl)}
.gfx-sweep__big-n{display:flex;align-items:baseline;gap:8px;margin-top:14px;white-space:nowrap}
.gfx-sweep__big-n b{display:block;font-size:clamp(96px,12.6vw,188px);line-height:.8;font-weight:560;letter-spacing:-.05em;color:var(--sw-ink);text-align:right}   /* 칸 폭 = 마지막 값 폭(엔진이 고정) · 오른쪽 맞춤 = 세는 동안 단위 '개'가 숫자 바로 옆 */
.gfx-sweep__big-n i{font-style:normal;font-size:22px;line-height:1;color:var(--sw-sub)}
.gfx-sweep__big-s{margin-top:12px;font-size:15px;line-height:1.35;color:var(--sw-sub);white-space:nowrap}
.gfx-sweep__big-s em{font-style:normal;color:var(--sw-muted)}
.gfx-sweep__led{justify-self:end;align-self:end;margin:0 0 30px;display:flex;column-gap:40px}
.gfx-sweep__li{display:block;text-align:right}
.gfx-sweep__li dt{font-size:15px;line-height:1.2;color:var(--sw-muted)}
.gfx-sweep__li dd{margin-top:6px;font-size:15px;line-height:1;color:var(--sw-sub);white-space:nowrap}
.gfx-sweep__li dd b{display:inline-block;font-size:40px;font-weight:600;letter-spacing:-.025em;color:var(--sw-ink);margin-right:3px}
.gfx-sweep__li .gfx-sweep__li-s{margin-top:8px;font-size:15px;color:var(--sw-muted)}

/* 범례 · 바닥 각주 */
.gfx-sweep__legend{grid-area:foot;justify-self:stretch;align-self:start;margin:18px 0 0;padding:12px 0 0;display:flex;flex-wrap:wrap;column-gap:22px;row-gap:4px;border-top:1px solid var(--sw-line)}
.gfx-sweep__lg{display:inline-flex;align-items:center;gap:7px;font-size:15px;line-height:1.3;color:var(--sw-muted);white-space:nowrap}
.gfx-sweep__lg b{font-weight:600;font-size:15px;color:var(--sw-sub)}
.gfx-sweep__lg[data-c="0"] b{color:var(--sw-fl-text)}
.gfx-sweep__lg i{display:block;width:2px;height:13px;background:var(--sw-fl)}
.gfx-sweep__lg[data-c="1"] i{height:6px;background:var(--sw-lg1)}
.gfx-sweep__lg[data-c="2"] i{height:6px;background:var(--sw-lg2);transform:translateY(5px)}
.gfx-sweep__lg[data-c="3"] i{height:3px;background:var(--sw-lg1)}
.gfx-sweep__foot{grid-area:note;margin-top:6px;font-size:15px;line-height:1.3;color:var(--sw-muted)}

.gfx-sweep__call{display:none}
.gfx-sweep__cv{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
.gfx-sweep.is-live .is-wait{visibility:hidden}
/* 바퀴 사이(끝 1.5초 멈춤 뒤): 판과 숫자만 잠깐 흐려졌다 처음 장면으로 */
.gfx-sweep.is-live .gfx-sweep__field,.gfx-sweep.is-live .gfx-sweep__nums>*,.gfx-sweep.is-live .gfx-sweep__legend{transition:opacity .36s cubic-bezier(.22,1,.36,1)}
.gfx-sweep.is-live.is-reset .gfx-sweep__field,.gfx-sweep.is-live.is-reset .gfx-sweep__nums>*,.gfx-sweep.is-live.is-reset .gfx-sweep__legend{opacity:0;transition-duration:.26s}
/* 움직이는 판: 배치·그리기를 장면 안에 가둠(숫자·눈금이 바뀔 때 쪽 전체를 다시 재지 않음) */
.gfx-sweep.is-anim{contain:layout paint}

@media (min-width:960px) and (max-width:1279px){
  .gfx-sweep{--lab:122px;--pitch:13px}
  .gfx-sweep__plot.st-frame{--fp-x:22px;--fp-y:18px}
  .gfx-sweep__li dd b{font-size:34px}
}

/* ── 폰(959 이하): 레일을 세로 기둥 34개로 · 시간은 위→아래 · 숫자 줄은 판 위 ── */
@media (max-width:959px){
  .gfx-sweep{--colh:clamp(280px,100svh - 452px,420px)}
  .gfx-sweep__stage{width:auto;margin:0 var(--gutter);padding:var(--gfx-sweep-pad-top,0px) 0 var(--gfx-sweep-pad-bottom,0px);
    grid-template-areas:"head" "nums" "plot" "legend" "foot";grid-template-rows:auto auto auto auto auto}
  .gfx-sweep__head,.gfx-sweep__legend,.gfx-sweep__foot{width:auto;justify-self:stretch}
  .gfx-sweep__head{margin-bottom:18px;padding-right:0}
  .gfx-sweep__title{font-size:var(--st-h,30px);line-height:1.16}
  .gfx-sweep__lead{margin-top:8px;font-size:var(--st-lead,16px);line-height:1.45}
  .gfx-sweep__led{margin:0}
  .gfx-sweep__label{margin-top:4px;font-size:14px}

  .gfx-sweep__nums{width:auto;justify-self:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:12px;margin:0 0 18px}
  .gfx-sweep__big-k{font-size:15px;gap:8px}
  .gfx-sweep__big-k::before{height:12px}
  .gfx-sweep__big-n{margin-top:8px;gap:4px}
  .gfx-sweep__big-n b{font-size:clamp(52px,16.4vw,72px);line-height:.8}
  .gfx-sweep__big-n i{font-size:15px}
  .gfx-sweep__big-s{display:none}
  .gfx-sweep__led{grid-column:1 / -1;justify-self:stretch;margin:0;display:block;padding-top:10px;border-top:1px solid var(--sw-line)}
  .gfx-sweep__li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;text-align:left}
  .gfx-sweep__li dt{font-size:14px;color:var(--sw-muted)}
  .gfx-sweep__li dd{margin:0;font-size:14px}
  .gfx-sweep__li dd b{font-size:16px;font-weight:600;margin-right:1px}
  .gfx-sweep__li .gfx-sweep__li-s{margin:0;font-size:14px}
  .gfx-sweep__plot.st-frame{--fp-x:12px;--fp-y:14px;margin:0 -8px}

  .gfx-sweep__plot{display:block}
  .gfx-sweep__bar{flex-wrap:wrap;column-gap:12px;row-gap:10px;min-height:0;margin:0 0 12px}
  .gfx-sweep__query{order:2;flex:1 1 100%;height:36px;padding:0 12px 0 4px;gap:8px}
  .gfx-sweep__qk{height:28px;padding:0 9px;font-size:14px}
  .gfx-sweep__qt{font-size:15px}
  .gfx-sweep.is-anim .gfx-sweep__beats{order:0}
  .gfx-sweep__beats li{font-size:16px;gap:8px}
  .gfx-sweep__beats li::before{width:7px;height:7px}
  .gfx-sweep__ctl{order:1;height:32px;padding:0 12px;font-size:14px}
  .gfx-sweep__colhead{display:none}
  .gfx-sweep__grid{height:var(--colh);margin-right:50px}
  .gfx-sweep__rails{display:flex;height:100%}
  .gfx-sweep__rail{display:block;position:relative;flex:1 1 0;height:100%;min-width:0}
  .gfx-sweep__rail:first-child{height:100%;align-self:auto;margin-right:calc(100% * .6 / 34.6)}
  .gfx-sweep__name,.gfx-sweep__n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gfx-sweep__track{position:absolute;inset:0;height:auto}
  .gfx-sweep__hatch{left:calc(30% - 2px);right:auto;top:0;height:auto;bottom:0;margin:0;width:6px}
  .gfx-sweep__poster{left:0;width:100%}
  .gfx-sweep__plot::before{display:none}
  .gfx-sweep__grid::before{content:'';position:absolute;left:calc(100% * .3 / 34.6);width:calc(100% * 33.6 / 34.6);top:-6px;height:1px;background:var(--sw-rail)}
  .gfx-sweep__grid::after{content:'';position:absolute;left:calc(100% * .3 / 34.6);top:-10px;height:4px;width:1px;background:var(--sw-rail)}
  .gfx-sweep__track::before{left:30%;top:-6px;width:1px;height:6px}
  .gfx-sweep__poster--h{display:none}
  .gfx-sweep__poster--v{display:block}

  .gfx-sweep__axis{position:absolute;z-index:4;right:0;top:0;width:46px;height:var(--colh);display:block;margin:0}
  .gfx-sweep__ax-name{display:none}
  .gfx-sweep__ax-track{position:absolute;inset:0}
  .gfx-sweep__ax-track::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .gfx-sweep__yr{left:0;top:var(--x);padding:0 0 0 7px !important;transform:translateY(-50%) !important;font-size:14px}
  .gfx-sweep__yr.is-start{transform:none !important;margin-top:-1px}
  .gfx-sweep__yr::before{left:0 !important;top:50%;width:4px;height:1px}
  .gfx-sweep__yr.is-lab::before{width:6px;height:1px;left:0}
  .gfx-sweep__yr.is-bin{top:auto;bottom:0;font-size:14px;white-space:normal;width:44px;line-height:1.15;transform:none !important}
  .gfx-sweep__axis>span:last-child{display:none}

  .gfx-sweep__first{left:35%;top:var(--x)}
  .gfx-sweep__first-tag{left:8px;top:6px;padding:4px 10px 8px 6px}
  .gfx-sweep__first-tag b{font-size:clamp(26px,7.6vw,32px)}
  .gfx-sweep__first-k{margin-top:6px;font-size:14px}
  .gfx-sweep__first-r{font-size:14px}

  .gfx-sweep__call{display:flex;position:absolute;z-index:3;left:calc(100% + 4px);top:var(--cy,49%);align-items:baseline;gap:5px;white-space:nowrap;background:var(--sw-fpage,var(--sw-page));padding:1px 6px;font-size:14px;line-height:1.2;color:var(--sw-sub);transform:translateY(-50%)}
  .gfx-sweep__call b{font-size:16px;font-weight:650;color:var(--sw-fl-text)}
  .gfx-sweep__call em{font-style:normal;color:var(--sw-muted)}

  .gfx-sweep__legend{grid-area:legend;column-gap:14px;row-gap:4px;margin-top:14px;padding-top:10px}
  .gfx-sweep__lg{gap:6px;font-size:14px}
  .gfx-sweep__lg b{font-size:14px}
  .gfx-sweep__lg i{height:12px}
  .gfx-sweep__lg[data-c="2"] i{transform:translateY(4px)}
  .gfx-sweep__foot{grid-area:foot;margin-top:6px;font-size:14px}
}
/* 키 작은 폰(높이 720 이하) */
@media (max-width:767px){.gfx-sweep{--gutter:16px}}
@media (max-width:959px) and (max-height:720px){
  .gfx-sweep{--colh:clamp(260px,100svh - 400px,360px)}
  .gfx-sweep__lead{margin-top:6px}
  .gfx-sweep__head{margin-bottom:12px}
  .gfx-sweep__nums{margin-bottom:12px}
  .gfx-sweep__big-n b{font-size:clamp(48px,15vw,64px)}
}
@media (max-width:374px){
  .gfx-sweep__qt{font-size:14px}
  .gfx-sweep__grid{margin-right:48px}
  .gfx-sweep__axis{width:44px}
  .gfx-sweep__lg{font-size:14px}
}
/* §21 뒤집는 동안(html[data-theme-transition])만 장면 글·선 색이 0.5초로 따라 바뀜 */
html[data-theme-transition] .gfx-sweep,html[data-theme-transition] .gfx-sweep *{transition-property:color,background-color,border-color,box-shadow,fill,stroke;transition-duration:var(--theme-duration,.5s);transition-timing-function:var(--theme-ease,ease)}
@media (prefers-reduced-motion:reduce){.gfx-sweep *{transition:none !important;animation:none !important}}