/* gfx-route — G3 요청 경로(요청) · 홈 무대판(11-04 이식). 원본 = /기술 운영 장면(qa/work-tech … demos/gfx-route · 꾸러미 tech1103b/3/gfx/route/pkg). 이름 앞머리 .gfx-route 만.
   배치 = 왼쪽 숫자 · 오른쪽 그래픽: 왼쪽 기둥(제목 · 한 줄 · 큰 숫자 둘 · 표기 A) / 오른쪽 지구(요청처 고리 · 요청선 · 이름표). 끝 장면 = 숫자 묶음 자리에 초안 묶음(표기 B) · 초안 종이.
     폰 = 위 숫자 · 가운데 지구 띠 · 아래 지금 단계 한 줄 · 끝 장면 = 초안 띠 7장.
   움직임 = 자동 반복(js/gfx-route.js): 보이면 시작 · 안 보이면 멈춤 · 한 바퀴 12.6초 + 끝 1.5초 멈춤 → 처음부터. 스크롤 고정(pin) 0.
   색 = 공용 토큰 5개만 읽음(--gfx-ink · --gfx-paper · --gfx-dim · --gfx-line · --gfx-accent · 밝은 기본값) — .hb-stage 가 무대 값으로 덮음. 나머지는 다섯에서 섞음(새 색 0).
   상태: 기본 CSS = 포스터(끝 장면 · 글 다 보임) = JS 꺼짐 · 모션 줄이기 · ?still=1 이 같은 화면.
     .is-js(조각 첫 줄 스크립트: 움직임 허용 + ?still=1 아님) → 무대 높이를 미리 잡고 포스터 그림은 받지 않음 · .is-live(장면 스크립트가 붙음) → 위치는 스크립트가 잼.
   움직이는 속성 = transform · opacity(+캔버스) · @keyframes 0. 글꼴 = 쪽 --font(--gfx-route-font 로 바꿀 수 있음). */

.gfx-route {
  --gr-ink: var(--gfx-ink, #151414); --gr-page: var(--gfx-paper, #fdfbf7); --gr-dim: var(--gfx-dim, #8f897f); --gr-line: var(--gfx-line, #e6dccd); --gr-or: var(--gfx-accent, #ff5e1f);
  --gr-ink2: color-mix(in srgb, var(--gr-ink) 90%, var(--gr-page));
  --gr-sub: color-mix(in srgb, var(--gr-ink) 76%, var(--gr-page));
  --gr-mute: color-mix(in srgb, var(--gr-dim) 82%, var(--gr-ink));
  --gr-paper: color-mix(in srgb, var(--gr-ink) 3.5%, var(--gr-page));
  --gr-line2: color-mix(in srgb, var(--gr-line) 70%, var(--gr-page));
  --gr-rule: color-mix(in srgb, var(--gr-ink) 16%, var(--gr-line));
  --gr-orb: color-mix(in srgb, var(--gr-or) 9%, var(--gr-page));
  --gr-orl: color-mix(in srgb, var(--gr-or) 36%, var(--gr-page));
  --gr-ort: #c2410c;
  --gr-sh: 0 0 0 1px rgba(21, 20, 20, .05), 0 22px 44px -18px rgba(21, 20, 20, .22), 0 6px 14px -6px rgba(21, 20, 20, .10);
  --gr-top: var(--gfx-route-pad-top, 8px); --gr-padx: max(40px, calc((100% - 1360px) / 2));   /* 위 여백 = 무대 자리(section.hb-gfx)의 --st-pad · 여기는 판 위 8px 만 */
  --gr-big: clamp(96px, min(12vw, 20svh), 184px);
  position: relative; display: block; background: transparent; color: var(--gr-ink);   /* §20: 장면 바탕 투명(쪽 색 뒤집기가 비침) */
  font-family: var(--gfx-route-font, var(--font, inherit)); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; text-align: left;
}
.hb-stage .gfx-route { --gr-ort: var(--gr-or); --gr-sh: 0 0 0 1px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(0, 0, 0, .7); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .gfx-route { --gr-ink2: #2a2623; --gr-sub: #4d4a46; --gr-mute: #6f6962; --gr-paper: #fffdf9; --gr-line2: #efe7dc; --gr-rule: #d9cfbf; --gr-orb: #fff1ea; --gr-orl: #f3cbb8; }
  .hb-stage .gfx-route { --gr-ink2: #e0ddd8; --gr-sub: #bdbab5; --gr-mute: #a19b94; --gr-paper: #141414; --gr-line2: #201f1d; --gr-rule: #4a4846; --gr-orb: #25130b; --gr-orl: #64301a; }
}
.gfx-route *, .gfx-route *::before, .gfx-route *::after { box-sizing: border-box; }
.gfx-route :where(h2, p, ol, li, figure, figcaption) { margin: 0; padding: 0; }
.gfx-route :where(ol) { list-style: none; }
.gfx-route :where(i, b, em) { font-style: normal; }
.gfx-route-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gfx-route-probe { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ── 제목 + 한 줄 ── */
.gfx-route-h { font-size: var(--st-h, 46px); line-height: 1.1; letter-spacing: -.025em; font-weight: 650; color: var(--gr-ink); }
.gfx-route-one { margin-top: 14px; font-size: var(--st-lead, 18px); line-height: 1.55; color: var(--gr-sub); max-width: 27em; }
.gfx-route-tag { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--gr-mute); }
.gfx-route-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--gr-orl); background: var(--gr-orb);
  font-size: 15px; font-weight: 650; color: var(--gr-ort); white-space: nowrap; line-height: 1; vertical-align: middle; }

/* ── 큰 숫자 두 개(표기 A) ── */
.gfx-route-nums { margin-top: 34px; }
.gfx-route-n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; padding: 14px 0 16px; border-top: 1px solid var(--gr-rule); }
.gfx-route-n + .gfx-route-n { border-top-color: var(--gr-line); }
.gfx-route-nk { grid-column: 1 / -1; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--gr-sub); }
.gfx-route-nv { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; white-space: nowrap; }
.gfx-route-nv b { font-size: var(--gr-big); line-height: .8; font-weight: 720; letter-spacing: -.05em; color: var(--gr-ink); }
.gfx-route-n .gfx-route-nv b { display: inline-block; min-width: 1.2em; text-align: right; }
.gfx-route-nv i { font-size: 26px; line-height: 1; font-weight: 650; color: var(--gr-sub); }
.gfx-route-nano { align-self: end; padding-bottom: 6px; }
.gfx-route-ns { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--gr-mute); }
/* 5×5 칸: 줄 = 표본 사이트 · 칸 = 요청 단계(운영자 · 호스팅 · 등록기관 · 전송망 · 검색엔진) · 칠한 칸 1개 = 확인한 요청처 1곳 */
.gfx-route-grid { display: grid; grid-template-columns: repeat(5, 14px); grid-auto-rows: 14px; gap: 4px; }
.gfx-route-cell { position: relative; border-radius: 3.5px; box-shadow: inset 0 0 0 1px var(--gr-line); }
.gfx-route-cell.is-ok, .gfx-route-cell.is-os { background: var(--gr-ink); box-shadow: none; }
.gfx-route-cell.is-hid { box-shadow: inset 0 0 0 1.5px var(--gr-or); }
.gfx-route-cell.is-none::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; margin-top: -.5px; background: var(--gr-rule); }
/* 눈금 43개: 눈금 1개 = 공개 기록 조회 1건(호스팅 23 · 등록기관 10 · 전송망 10) */
.gfx-route-ticks { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.gfx-route-tick { flex: none; width: 1px; height: 26px; background: var(--gr-ink); transform-origin: 50% 100%; }
.gfx-route-tick[data-g] { margin-left: 7px; }

/* ── 그림 ── */
.gfx-route-fig { position: relative; }
.gfx-route-poster { display: block; }
.gfx-route-poster.st-frame { overflow: hidden; }
/* JS 꺼짐 포스터 둘: 밝은 판 기본 · 어두운 무대(html[data-scheme="dark"] · JS 꺼짐 html:not(.fxjs) = stage.css 와 같은 조건)면 어두운 판 */
.gfx-route-poster.is-d, html[data-scheme="dark"] .gfx-route-poster.is-l, [data-theme="dark"] .gfx-route-poster.is-l, html:not(.fxjs) .gfx-route-poster.is-l { display: none; }
html[data-scheme="dark"] .gfx-route-poster.is-d, [data-theme="dark"] .gfx-route-poster.is-d, html:not(.fxjs) .gfx-route-poster.is-d { display: block; }
.gfx-route-poster img { display: block; width: 100%; height: auto; }
.gfx-route-cv, .gfx-route-lbls, .gfx-route-ctl, .gfx-route-plate { display: none; }
.gfx-route-lb { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 6px 10px 7px; border-radius: 10px; background: var(--gr-fpage, var(--gr-page)); white-space: nowrap; will-change: transform, opacity; }
.gfx-route-lb span { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--gr-mute); }
.gfx-route-lb b { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--gr-ink); }
.gfx-route-lb em { font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--gr-ort); }

/* ── 단계 이름표 목록(포스터 = 다섯 줄 · 폰 장면 = 지금 단계 한 줄) ── */
.gfx-route-now { border-top: 1px solid var(--gr-rule); }
.gfx-route-now li { display: grid; grid-template-columns: 20px 8.6em minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--gr-line); }
.gfx-route-now svg { display: block; width: 20px; height: 20px; overflow: visible; }
.gfx-route-now svg [stroke="#151414"] { stroke: var(--gr-ink); }
.gfx-route-now svg [fill="#151414"] { fill: var(--gr-ink); }
.gfx-route-now svg [stroke="#ff5e1f"] { stroke: var(--gr-or); }
.gfx-route-now .k { font-size: 15px; font-weight: 600; color: var(--gr-mute); }
.gfx-route-now .v { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--gr-ink); }
.gfx-route-now .x { display: block; font-size: 15px; font-weight: 650; color: var(--gr-ort); }

/* ── 요청서 초안 묶음(표기 B · 가상 사건) ── */
.gfx-route-cover .gfx-route-nk { display: flex; align-items: center; gap: 10px; }
.gfx-route-cover .gfx-route-nv { margin-top: 12px; }
.gfx-route-cover .gfx-route-s1 { margin-top: 14px; font-size: 17px; font-weight: 650; line-height: 1.45; color: var(--gr-ink2); }
.gfx-route-cover .gfx-route-s2 { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--gr-sub); }
.gfx-route-pp-sheet { position: relative; height: 100%; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--gr-line2); background: var(--gr-paper); box-shadow: var(--gr-sh); overflow: hidden; }
.gfx-route-pp-step { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--gr-ort); }
.gfx-route-pp-t { margin-top: 6px; font-size: 15px; line-height: 1.4; font-weight: 720; letter-spacing: -.01em; color: var(--gr-ink); }
.gfx-route-pp-t[lang="en"] { font-size: 13.5px; letter-spacing: 0; }
.gfx-route-pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gr-line); }
.gfx-route-pp-case { font-size: 13px; color: var(--gr-dim); white-space: nowrap; }
.gfx-route-pp-ex { margin-top: 10px; font-size: 13px; line-height: 1.62; color: var(--gr-sub); }

/* ═══ 포스터(JS 꺼짐 · 모션 줄이기 · ?still=1): 끝 장면을 흐름대로 ═══ */
.gfx-route-stage { position: relative; padding: var(--gr-top) var(--gr-padx) 0; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  grid-template-areas: "col fig" "now fig" "tray tray"; column-gap: 56px; row-gap: 28px; align-items: start; }
.gfx-route-col { grid-area: col; }
.gfx-route-fig { grid-area: fig; align-self: center; }
.gfx-route-now { grid-area: now; }
.gfx-route-tray { grid-area: tray; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); column-gap: 56px; align-items: start; padding-top: 12px; }
.gfx-route-cover { padding-top: 14px; border-top: 1px solid var(--gr-rule); }
.gfx-route-papers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* ═══ 장면(.is-js · 움직임 허용) — 무대 높이를 미리 잡음(포스터 그림 받지 않음 · 붙기 전후 높이 같음) ═══ */
.gfx-route.is-js .gfx-route-stage { display: block; height: calc(var(--gr-top) + var(--gr-h, clamp(620px, 100svh - 150px, 760px))); padding: 0; overflow: hidden; contain: layout paint; }
.gfx-route.is-js .gfx-route-poster.is-l, .gfx-route.is-js .gfx-route-poster.is-d { display: none; }   /* 장면이면 포스터 그림 받지 않음(밝기 규칙보다 셈) */
.gfx-route.is-js .gfx-route-col { position: absolute; left: var(--gr-padx); top: var(--gr-top); width: min(470px, 36%); z-index: 2; }
.gfx-route.is-js .gfx-route-fig { position: absolute; inset: 0; margin: 0; align-self: stretch; justify-self: stretch; }
.gfx-route.is-js .gfx-route-now { display: none; }
.gfx-route.is-js .gfx-route-tray { position: absolute; inset: 0; align-self: stretch; justify-self: stretch; display: block; padding: 0; border: 0; pointer-events: none; z-index: 3; }
.gfx-route.is-js .gfx-route-cover { position: absolute; left: var(--gr-numsl, 40px); top: var(--gr-numst, 360px); width: var(--gr-numsw, 470px); visibility: hidden; opacity: 0; will-change: transform, opacity; }
.gfx-route.is-js .gfx-route-papers { position: absolute; inset: 0; display: block; }   /* 데스크톱: 지구 판 안으로 잘림(clip-path = 엔진이 판 자리로) */
.gfx-route.is-js .gfx-route-pp { position: absolute; left: 0; top: 0; width: var(--gr-ppw, 216px); opacity: 0; will-change: transform, opacity; }
.gfx-route.is-js .gfx-route-pp-sheet { height: var(--gr-pph, 300px); }
.gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-sheet { padding-top: 12px; box-shadow: 0 0 0 1px rgba(21, 20, 20, .04), 0 8px 18px -12px rgba(21, 20, 20, .2); }
.gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-meta, .gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-ex { display: none; }
@media (min-width: 768px) {
  /* 뒤에 겹친 영어판 종이는 머리 줄(받는 곳 · 영어판)만 — 앞 종이 위끝에 글 줄이 반쯤 잘려 보이지 않게 */
  .gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-t { visibility: hidden; }
}
.gfx-route.is-js .gfx-route-ctl { display: inline-flex; align-items: center; visibility: hidden; position: absolute; z-index: 4; right: var(--gr-padx); top: max(12px, calc(var(--gr-top) - 54px)); height: 34px; padding: 0 14px;
  font: inherit; font-size: 15px; line-height: 1; font-weight: 600; color: var(--gr-sub); background: transparent; border: 1px solid var(--gr-line); border-radius: 12px; cursor: pointer; }
.gfx-route.is-live .gfx-route-ctl { visibility: visible; }
.gfx-route-ctl:hover { color: var(--gr-ink); border-color: var(--gr-sub); }
.gfx-route-ctl:focus-visible { outline: 2px solid var(--gr-or); outline-offset: 2px; }
.gfx-route.is-live .gfx-route-cv { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
/* 지구 판 = .st-frame(둥글기 · 선 · 그림자 · 테두리 빛 = stage.css) · 자리·크기는 엔진이 잼(데스크톱 = 글 기둥 오른쪽 · 폰 = 지구 띠) */
.gfx-route.is-live .gfx-route-plate { display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.gfx-route.is-live .gfx-route-lbls { z-index: 2; }
.gfx-route.is-live .gfx-route-lbls { display: block; position: absolute; inset: 0; pointer-events: none; }
.gfx-route.is-live .gfx-route-nums { will-change: transform, opacity; }
.gfx-route.is-live .gfx-route-cell { transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1); }
.gfx-route.is-live .gfx-route-cell:not(.on) { opacity: 0; transform: scale(.4); }
.gfx-route.is-live .gfx-route-tick { transition: transform .22s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.gfx-route.is-live .gfx-route-tick:not(.on) { transform: scaleY(.42); background: var(--gr-line); }
/* 바퀴 사이(끝 1.5초 멈춤 뒤): 그림 · 숫자 · 종이가 잠깐 흐려졌다 처음 장면으로 */
.gfx-route.is-live .gfx-route-cv, .gfx-route.is-live .gfx-route-lbls, .gfx-route.is-live .gfx-route-nano, .gfx-route.is-live .gfx-route-nv, .gfx-route.is-live .gfx-route-tray, .gfx-route.is-live .gfx-route-now { transition: opacity .36s cubic-bezier(.22, 1, .36, 1); }
.gfx-route.is-live.is-reset .gfx-route-cv, .gfx-route.is-live.is-reset .gfx-route-lbls, .gfx-route.is-live.is-reset .gfx-route-nano, .gfx-route.is-live.is-reset .gfx-route-nv, .gfx-route.is-live.is-reset .gfx-route-tray, .gfx-route.is-live.is-reset .gfx-route-now { opacity: 0; transition-duration: .26s; }

/* ═══ 폰(<768): 위 = 제목·큰 숫자 둘 · 가운데 = 지구 띠 · 아래 = 지금 단계 · 끝 장면 = 초안 띠 7장 ═══ */
@media (max-width: 767px) {
  .gfx-route { --gr-top: var(--gfx-route-pad-top, 0px); --gr-padx: 16px; --gr-big: clamp(60px, 21vw, 84px); }
  .gfx-route-h { font-size: var(--st-h, 30px); line-height: 1.16; }
  .gfx-route-one { margin-top: 8px; font-size: var(--st-lead, 16px); line-height: 1.5; }
  .gfx-route-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; margin-top: 16px; }
  .gfx-route-nums > .gfx-route-tag { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; }
  .gfx-route-n { display: block; padding: 10px 0 8px; }
  .gfx-route-n[data-k="dest"] { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: start; column-gap: 8px; align-items: end; }
  .gfx-route-n[data-k="dest"] .gfx-route-nano { padding: 0 0 4px; }
  .gfx-route-n + .gfx-route-n { border-top-color: var(--gr-rule); }
  .gfx-route-nk { font-size: 14px; }
  .gfx-route-nv { margin-top: 8px; }
  .gfx-route-nv i { font-size: 18px; }
  .gfx-route-nano { padding: 10px 0 0; }
  .gfx-route-grid { grid-template-columns: repeat(5, 7px); grid-auto-rows: 7px; gap: 2px; }
  .gfx-route-ns { display: none; }
  .gfx-route-cell { border-radius: 2px; }
  .gfx-route-cell.is-hid { box-shadow: inset 0 0 0 1.25px var(--gr-or); }
  .gfx-route-ticks { gap: 2px; height: 20px; }
  .gfx-route-tick { height: 20px; }
  .gfx-route-tick[data-g] { margin-left: 5px; }
  .gfx-route-lb span { font-size: 14px; }
  .gfx-route-lb b { font-size: 16px; }
  .gfx-route-lb em { font-size: 14px; }
  .gfx-route-chip { height: 26px; font-size: 14px; }
  .gfx-route-tag { font-size: 14px; }
  .gfx-route-now li { grid-template-columns: 20px 7.4em minmax(0, 1fr); }
  .gfx-route-now .k { font-size: 14px; }
  .gfx-route-now .v { font-size: 15px; }
  .gfx-route-now .x { font-size: 14px; }
  .gfx-route-pp-step, .gfx-route-pp-case, .gfx-route-pp-ex { font-size: 14px; }
  .gfx-route-pp-t, .gfx-route-pp-t[lang="en"] { font-size: 15px; }
  /* 포스터 */
  .gfx-route-stage { display: block; padding: var(--gr-top) 16px 0; }
  .gfx-route-poster.st-frame { margin: 0 8px; }
  .gfx-route-fig { margin: 18px -16px 0; }
  .gfx-route-now { margin-top: 18px; }
  .gfx-route-tray { display: block; margin-top: 28px; }
  .gfx-route-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .gfx-route-pp.is-en { grid-column: 1 / -1; }
  .gfx-route-pp-ex { display: none; }
  .gfx-route-pp-sheet { padding: 12px 12px 12px; }
  .gfx-route-pp-meta { padding-bottom: 0; border-bottom: 0; }
  /* 장면 */
  .gfx-route.is-js .gfx-route-stage { --gr-h: clamp(560px, 100svh - 120px, 700px); }
  .gfx-route.is-js .gfx-route-col { left: 16px; right: 16px; width: auto; }
  .gfx-route.is-js .gfx-route-now { display: block; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 76px; border: 0; z-index: 2; }
  .gfx-route.is-js .gfx-route-now li { position: absolute; left: 0; right: 0; bottom: 0; display: block; min-height: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--gr-rule); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .2s, transform .3s cubic-bezier(.22, 1, .36, 1); }
  .gfx-route.is-js .gfx-route-now li.is-now { opacity: 1; transform: none; }
  .gfx-route.is-js .gfx-route-now svg { position: absolute; right: 0; top: 12px; }
  .gfx-route.is-js .gfx-route-now .k { display: block; font-size: 14px; }
  .gfx-route.is-js .gfx-route-now .v { display: block; margin-top: 2px; font-size: 19px; letter-spacing: -.01em; }
  .gfx-route.is-js .gfx-route-now .x { margin-top: 1px; font-size: 14.5px; }
  .gfx-route.is-js .gfx-route-lb:not([data-k="site"]) { display: none; }
  .gfx-route.is-js .gfx-route-cover { top: var(--gr-covert, 160px); left: 16px; right: 16px; width: auto; }
  .gfx-route.is-js .gfx-route-cover .gfx-route-nv { margin-top: 8px; }
  .gfx-route.is-js .gfx-route-cover .gfx-route-s1 { margin-top: 8px; font-size: 15px; }
  .gfx-route.is-js .gfx-route-cover .gfx-route-s2 { font-size: 14px; }
  .gfx-route.is-js .gfx-route-cover .gfx-route-tag { margin-top: 6px; }
  .gfx-route.is-js .gfx-route-papers { left: 16px; right: 16px; top: auto; bottom: 0; width: auto; height: var(--gr-deckh, 300px); }
  .gfx-route.is-js .gfx-route-pp { width: 100%; }
  .gfx-route.is-js .gfx-route-pp-sheet { display: flex; align-items: flex-start; gap: 10px; height: var(--gr-pph, 66px); padding: 10px 12px 0 14px; border-radius: 16px; }
  .gfx-route.is-js .gfx-route-pp-step { flex: 1 1 auto; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-sheet { margin-left: 18px; }
  .gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-par { display: none; }
  .gfx-route.is-js .gfx-route-pp:first-child .gfx-route-pp-case { display: none; }
  .gfx-route.is-js .gfx-route-pp-case { font-size: 14px; }
  .gfx-route.is-js .gfx-route-pp-t, .gfx-route.is-js .gfx-route-pp-ex { display: none; }
  .gfx-route.is-js .gfx-route-pp-meta, .gfx-route.is-js .gfx-route-pp.is-en .gfx-route-pp-meta { display: flex; flex: none; margin: 0; padding: 0; border: 0; }
  .gfx-route.is-js .gfx-route-pp .gfx-route-chip { height: 24px; font-size: 14px; }
  .gfx-route.is-js .gfx-route-ctl { height: 32px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .gfx-route { --gr-big: clamp(56px, 19vw, 76px); }
  .gfx-route-one { font-size: 15px; }
  .gfx-route-nums { margin-top: 10px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .gfx-route { --gr-big: clamp(84px, 10.5vw, 120px); }
  .gfx-route-stage { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 32px; }
  .gfx-route-tray { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 32px; }
}
/* §21 뒤집는 동안(html[data-theme-transition])만 장면 글·선 색이 0.5초로 따라 바뀜 */
html[data-theme-transition] .gfx-route, html[data-theme-transition] .gfx-route * { 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-route * { transition: none !important; } }