/* AI 동시통역 소개(sub/solution_translation.php)·체험 데모(sub/solution_translation_demo.php) 전용.
   장·장면의 기본 틀은 solution_eregi.css 의 er_*, er-*, ed_*, ed-* 를 그대로 쓰고 통역 화면 요소만 더한다. */
.tr_flow .er_flow_track { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* 데모 안내의 실제 포털 */
.tr_real a { display: block; color: #fff; text-decoration: none; }
.tr_real img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: #0B0F16; transition: transform .2s ease; }
.tr_real a:hover img { transform: translateY(-4px); }
.tr_real a:focus-visible { outline: 3px solid var(--rd-gold, #D8A82A); outline-offset: 3px; border-radius: 12px; }
.tr_real b { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 700; }
.tr_real b i { margin-left: 4px; font-size: 12px; opacity: .7; }
.tr_real span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: #9FB0CC; word-break: keep-all; }

/* 장면 공통 */
.tr_page .er_vis .pm-step { justify-content: center; }
.tr_page .er-row { min-height: 46px; font-size: 13.5px; }
.tr-fill { align-items: start; }
/* 일본어·중국어는 keep-all 이면 줄이 바뀌지 않는다 */
.tr-sub, .tr-small, .tr-qp, .tr-cap, .td-line, .td-cap, .td-quad > div, .td-view small, .tr_page [lang=ja], .tr_page [lang=zh], .td_page [lang=ja], .td_page [lang=zh] { word-break: normal; overflow-wrap: anywhere; }
.tr-qp [lang=ko], .td_page [lang=ko] { word-break: keep-all; }
.tr-col { display: grid; gap: 8px; min-width: 0; }
.er-row.is-sel { border-color: #1A4FD6; background: #F3F6FF; }
.er-row span { min-width: 0; }
.tr-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.tr-qr2 { gap: 14px; }
.tr-qrcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid #E5EAF2; border-radius: 12px; text-align: center; }
.tr-qrcard b { margin-top: 6px; font-size: 14px; font-weight: 800; }
.tr-qrcard small { font-size: 11.5px; color: #7A889C; }
.tr-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-checks span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #E5EAF2; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: #7A889C; }
.tr-checks span.on { border-color: #A9BFF5; background: #EEF3FF; color: #1A4FD6; }
.tr-abs { font-size: 12.5px; line-height: 1.6; font-weight: 500; color: var(--rd-text, #3A4759); word-break: keep-all; }
.tr-abs mark { padding: 0 3px; border-radius: 3px; background: #DDF6EA; color: #047857; font-weight: 700; }
.tr-abs mark.bad { background: #FDE8E8; color: #C81E1E; }
.tr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-tags span { padding: 7px 12px; border-radius: 100px; background: #E7EEFF; font-size: 13px; font-weight: 700; color: #1A4FD6; }
.tr-mute { opacity: .6; }
.tr-arrow { text-align: center; font-size: 18px; line-height: 1; color: #93A5C0; }
.er-btn.tr-danger { background: #C81E1E; }
.tr-small { font-size: 12px; font-weight: 500; line-height: 1.45; word-break: keep-all; }

/* Go Live 점검표 */
.tr-pf-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-pf-h .er-pill { margin-left: 0; }
.tr-pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.tr-pf > div, .tr-health > div { position: relative; padding: 8px 10px 8px 26px; border: 1px solid #E5EAF2; border-radius: 9px; min-width: 0; }
.tr-pf i, .tr-health i { position: absolute; left: 10px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: #93A5C0; }
.tr-pf i.ok, .tr-health i.ok { background: #10B981; }
.tr-health i.warn { background: #F59E0B; }
.tr-pf b, .tr-health b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pf small, .tr-health small { display: block; font-size: 11px; color: #7A889C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-btn.tr-go { background: #059669; }
.tr-src { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; text-align: center; }
.tr-src i { font-size: 16px; color: #66758C; }
.tr-src b { font-size: 12.5px; white-space: normal; }
.tr-src.is-on { border-color: #1A4FD6; background: #F3F6FF; }
.tr-src.is-on i, .tr-src.is-on b { color: #1A4FD6; }
.tr-wave.pm-wave { height: 36px; }
.tr-wave.pm-wave i { background: #1A4FD6; }

/* 처리 흐름 */
.tr-pipe { display: flex; align-items: center; gap: 6px; }
.tr-pipe > div { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 10px; background: #0B1B3B; color: #fff; }
.tr-pipe > div b { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tr-pipe > div i { color: #7FB0FF; }
.tr-pipe u { width: 14px; height: 2px; flex-shrink: 0; background: #93A5C0; text-decoration: none; }
.tr-health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* 참가자 휴대폰 */
.er-phone-in.tr-ph, .ed-phone-in.tr-ph { background: #0D1117; color: #E6EBF2; }
.tr-ph-h { padding: 26px 12px 8px; }
.tr-ph-h .er-pill { margin: 0 0 5px; font-size: 9.5px; padding: 2px 7px; background: rgba(239,68,68,.16); color: #F87171; }
.tr-ph-h b { display: block; font-size: 13px; font-weight: 800; }
.tr-ph-h small { display: block; font-size: 10px; line-height: 1.35; color: #8B97A8; }
.tr-ph-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 10px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 10.5px; font-weight: 700; text-align: center; color: #8B97A8; }
.tr-ph-tabs span { padding: 6px 0; }
.tr-ph-tabs span.on { color: #fff; box-shadow: inset 0 -2px 0 #4C8BFF; }
.td-tabs button { padding: 7px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.td-tabs button.on { color: #fff; box-shadow: inset 0 -2px 0 #4C8BFF; }
.td-tabs button:focus-visible { outline: 2px solid #4C8BFF; outline-offset: -2px; }
.tr-ph.is-light .td-tabs button.on { color: #0B1B3B; box-shadow: inset 0 -2px 0 #1A4FD6; }
.tr-ph-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; overflow: hidden; }
.tr-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: #AEB8C6; word-break: keep-all; }
.tr-sub.is-now { color: #fff; font-weight: 600; }
.tr-sub.is-read { padding: 6px 8px; border-radius: 8px; background: rgba(76,139,255,.18); color: #fff; }
.tr-sub.tr-big { font-size: 17px; line-height: 1.75; letter-spacing: .01em; }
.er-phone-in.tr-ph.is-light, .ed-phone-in.tr-ph.is-light { background: #fff; color: #0B1B3B; }
.tr-ph.is-light .tr-ph-h small, .tr-ph.is-light .tr-ph-tabs { color: #66758C; }
.tr-ph.is-light .tr-ph-tabs { border-color: #E5EAF2; }
.tr-ph.is-light .tr-ph-tabs span.on { color: #0B1B3B; box-shadow: inset 0 -2px 0 #1A4FD6; }
.tr-ph.is-light .tr-sub { color: #0B1B3B; }
.tr-wave-sm.pm-wave { height: 28px; }
.tr-wave-sm.pm-wave i { background: #4C8BFF; }
.tr-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.tr-wait b { margin-top: 5px; font-size: 14px; font-weight: 800; }
.tr-wait small { font-size: 11px; color: #8B97A8; }
.tr-spin { color: #4C8BFF; }
.js-motion .pm-step.is-on .tr-spin { animation: tr-spin 1.2s linear infinite; }
.tr-side { flex: 1; max-width: 300px; min-width: 0; display: grid; gap: 9px; align-content: center; }
.tr-speed, .tr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #DDE4EF; border-radius: 8px; overflow: hidden; font-size: 11px; font-weight: 700; text-align: center; color: #66758C; background: #fff; }
.tr-speed span, .tr-seg span { padding: 7px 2px; white-space: nowrap; }
.tr-speed span.on, .tr-seg span.on { background: #1A4FD6; color: #fff; }
.tr-slide { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #4B5A70; }
.tr-slide u { display: block; height: 6px; border-radius: 6px; background: #E0E6EF; overflow: hidden; text-decoration: none; }
.tr-slide u i { display: block; height: 100%; width: var(--w, 50%); border-radius: 6px; background: #1A4FD6; transform-origin: left; }
.pm-ready .pm-step.is-on .tr-slide u i { animation: pm-fill 1s var(--rd-ease-quint, ease) .3s both; }
.tr-menu { display: grid; gap: 6px; }
.tr-menu-h { margin-top: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #8B97A8; }
.tr-menu-i { display: flex; align-items: center; gap: 7px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 600; }
.tr-menu-i .er-pill { margin: 0; padding: 2px 6px; font-size: 9.5px; background: rgba(255,255,255,.12); color: #C9D2DE; }
.tr-menu-i .er-pill.live { background: rgba(239,68,68,.18); color: #F87171; }
.tr-menu-i.is-on { background: rgba(76,139,255,.2); }

/* 발표 화면 */
.tr-obs { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #15264B, #0B1B3B); color: #fff; }
.tr-obs-slide { position: absolute; inset: 0 0 34% 0; display: flex; flex-direction: column; justify-content: center; padding: 0 28px; }
.tr-obs-slide b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.tr-obs-slide small { margin-top: 7px; font-size: 12.5px; color: #B9C7DE; }
.tr-cap { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,.72); text-align: center; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.tr-cap-ol { background: transparent; font-size: 15px; font-weight: 800; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.tr-url { flex-shrink: 0; }
.tr-quad { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 10px; background: #0B1B3B; }
.tr-qp { padding: 9px 11px; border-radius: 7px; background: rgba(255,255,255,.05); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; overflow: hidden; word-break: keep-all; }
.tr-qp small { display: block; font-size: 10px; font-weight: 500; color: #8FA3C4; }
.tr-qp b { display: inline-block; margin: 4px 0 3px; padding: 1px 6px; border-radius: 4px; background: #2E63E8; font-size: 10.5px; }
.tr-style { flex: 1; min-height: 0; align-items: stretch; }
.tr-style .tr-col { align-content: center; gap: 11px; }
.tr-obs-sm { min-height: 240px; }

/* 기록 */
.tr-tl { align-items: flex-start; font-size: 12.5px; font-weight: 600; word-break: keep-all; }
.tr-tl time { font-size: 11.5px; font-weight: 700; color: #1A4FD6; font-variant-numeric: tabular-nums; }

/* 비교표 */
/* ---------- 통역 품질 구역 ---------- */
#quality { padding-bottom: 56px; }
#quality .tr-abs { font-size: 14.5px; line-height: 1.6; }
#quality .tr-qnote { font-size: 14px; }
#quality .er-field small { font-size: 12px; }
.tr-qon { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-qon span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px dashed #CBD5E3; border-radius: 100px; font-size: 12px; font-weight: 700; color: #94A1B5; }
.tr-qon span.on { border: 1px solid #A9BFF5; background: #EEF3FF; color: #1A4FD6; }
.tr-qon i { font-size: 10px; }
.tr-qnote { font-weight: 600; color: var(--rd-navy, #0B1B3B); }
.tr-tags--sm { gap: 6px; }
.tr-tags--sm span { padding: 5px 10px; font-size: 12px; }
.tr-gloss { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #F4F7FB; font-size: 12px; font-weight: 600; line-height: 1.5; color: #3A4759; }
.tr-qguide { min-height: 0; }
.tr-persona2 { align-items: stretch; }
#quality .tr-abs mark { padding: 0 1px; }
@media (max-width: 1100px) {
  /* 첫 구역은 모바일에서도 제목을 모션보다 먼저 읽게 한다 */
  #quality .er_ch_grid { gap: 0; }
  #quality .er_ch_text { display: contents; }
  #quality .er_ch_no { justify-self: start; }
  #quality .er_ch_no, #quality h2, #quality .er_ch_lead { order: -2; }
  #quality .er_vis { margin-bottom: 22px; }
}
@media (max-width: 768px) {
  #quality .er_frame { height: 500px; }
  #quality .tr-abs { font-size: 14px; }
}
.tr_stage_sec { padding: 0 0 92px; background: #fff; }
.tr_stage_title { margin: 0 0 22px; font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: -.03em; color: var(--rd-navy, #0B1B3B); word-break: keep-all; }
.tr_stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tr_stages li { position: relative; padding: 22px 22px 20px; border: 1px solid #E1E7F0; border-radius: 14px; background: #fff; }
.tr_stages li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -13px; z-index: 1; width: 10px; height: 10px; border-top: 2px solid #A9BFF5; border-right: 2px solid #A9BFF5; transform: rotate(45deg); }
.tr_stage_no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #1A4FD6; font-size: 13px; font-weight: 800; color: #fff; }
.tr_stages h4 { display: inline; margin: 0 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-navy, #0B1B3B); vertical-align: middle; }
.tr_stages p { margin: 12px 0 14px; font-size: 15px; line-height: 1.6; color: var(--rd-text, #3A4759); word-break: keep-all; }
.tr_stage_tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tr_stage_tags span { padding: 5px 10px; border-radius: 100px; background: #EEF3FF; font-size: 12.5px; font-weight: 700; color: #1A4FD6; }
.tr_stage_foot { margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: #5B6B82; word-break: keep-all; }
.tr_stage_foot a { font-weight: 700; color: #1A4FD6; white-space: nowrap; }
@media (max-width: 768px) {
  .tr_stage_sec { padding-bottom: 64px; }
  .tr_stages { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tr_stages li:not(:last-child)::after { top: auto; right: auto; bottom: -11px; left: 30px; transform: rotate(135deg); }
}

.tr_compare { padding: 88px 0; background: #fff; }
.tr_table { border: 1px solid #E1E7F0; border-radius: 14px; overflow: hidden; }
.tr_tr { display: grid; grid-template-columns: .7fr 1fr 1.1fr; border-top: 1px solid #EEF2F7; font-size: 15.5px; line-height: 1.55; word-break: keep-all; }
.tr_tr:first-child { border-top: 0; }
.tr_tr > * { padding: 15px 20px; }
.tr_tr b { font-weight: 700; color: var(--rd-navy, #0B1B3B); }
.tr_tr > :nth-child(2) { color: var(--rd-muted, #5B6B82); }
.tr_tr > :nth-child(3) { background: #F5F8FF; font-weight: 600; color: var(--rd-navy, #0B1B3B); }
.tr_th { background: #F4F7FB; font-size: 14px; font-weight: 700; color: #5B6B82; }
.tr_th > :nth-child(3) { background: #1A4FD6; color: #fff; }

@keyframes tr-spin { to { transform: rotate(360deg); } }

/* ============================================================
   체험 데모 (sub/solution_translation_demo.php)
============================================================ */
.td_page .ed_steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.td-grow { flex: 1; }
.td-area { width: 100%; min-height: 104px; padding: 11px 13px; border: 1px solid #DDE4EF; border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--rd-text, #3A4759); resize: vertical; }
.td-area:focus { outline: 2px solid #1A4FD6; outline-offset: 1px; }
.td-load { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #F4F7FB; font-weight: 600; }
.td-load i { color: #1A4FD6; }
.td-terms { display: grid; gap: 6px; }
.td-pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.td-pf > div { position: relative; padding: 9px 12px 9px 30px; border: 1px solid #E5EAF2; border-radius: 10px; min-width: 0; animation: ed-in .25s ease both; }
.td-pf i { position: absolute; left: 12px; top: 15px; width: 10px; height: 10px; border-radius: 50%; }
.td-pf i.ok { background: #10B981; }
.td-pf i.warn { background: #F59E0B; }
.td-pf i.block { background: #DC2626; }
.td-pf b { display: block; font-size: 13.5px; font-weight: 700; }
.td-pf small { display: block; font-size: 12px; line-height: 1.4; color: #66758C; word-break: keep-all; }
.td-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.td-status .er-pill { margin-left: 0; }
.td-seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; }
.td-seg button { min-width: 0; padding: 9px 4px; border: 1px solid #DDE4EF; border-radius: 9px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: #4B5A70; cursor: pointer; }
.td-seg button.on { border-color: #1A4FD6; background: #1A4FD6; color: #fff; }
.td-seg button:focus-visible { outline: 2px solid #1A4FD6; outline-offset: 2px; }
.td-seg button:disabled { opacity: .45; cursor: default; }
.td-pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.td-pipe > div { min-width: 0; padding: 11px 13px; border: 1px solid #E5EAF2; border-radius: 10px; font-size: 13.5px; line-height: 1.55; word-break: keep-all; }
.td-pipe small { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; color: #1A4FD6; }
.td-pipe .is-wait { color: #94A2B7; }
.td-pipe mark { padding: 0 3px; border-radius: 3px; background: #DDF6EA; color: #047857; font-weight: 700; }
.td-pipe mark.bad { background: #FDE8E8; color: #C81E1E; }
.td-phone-b { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.td-line { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; word-break: keep-all; }
.td-line:hover { background: rgba(127,127,127,.14); }
.td-line.is-read { background: rgba(76,139,255,.22); }
.td-line:focus-visible { outline: 2px solid #4C8BFF; }
.td-ctrl { display: grid; gap: 12px; }
.td-ctrl label, .td-lab { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: #4B5A70; }
.td-ctrl input[type=range] { width: 100%; accent-color: #1A4FD6; }
.td-obs { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #15264B, #0B1B3B); color: #fff; }
.td-obs-t { position: absolute; left: 6%; top: 18%; right: 6%; }
.td-obs-t b { display: block; font-size: clamp(16px, 2.3vw, 27px); font-weight: 800; line-height: 1.25; }
.td-obs-t small { display: block; margin-top: 6px; font-size: 12.5px; color: #B9C7DE; }
.td-cap { position: absolute; left: 4%; right: 4%; bottom: 6%; }
.td-quad { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; }
.td-quad > div { padding: 8px 11px; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; word-break: keep-all; line-height: 1.4; }
.td-quad small { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; color: #8FA3C4; }
.td-url { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: #F4F7FB; font-size: 12.5px; font-weight: 600; min-width: 0; }
.td-url code { min-width: 0; flex: 1; font-family: inherit; overflow-wrap: anywhere; }
.td-view { display: grid; gap: 8px; max-height: 270px; overflow-y: auto; }
.td-view > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border: 1px solid #EEF2F7; border-radius: 9px; font-size: 13.5px; line-height: 1.5; word-break: keep-all; }
.td-view time { font-size: 12px; font-weight: 700; color: #1A4FD6; font-variant-numeric: tabular-nums; }
.td-view small { display: block; font-size: 12.5px; color: #66758C; }
.td-input { width: 100%; padding: 10px 12px; border: 1px solid #DDE4EF; border-radius: 9px; font: inherit; font-size: 14px; }
.td-input:focus { outline: 2px solid #1A4FD6; outline-offset: 1px; }

@media (max-width: 1100px) {
    .td_page .ed_steps { grid-template-columns: repeat(6, minmax(104px, 1fr)); }
}
@media (max-width: 768px) {
    .tr_flow .er_flow_track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tr_compare { padding: 60px 0; }
    .tr_tr { grid-template-columns: .62fr 1fr 1fr; font-size: 13.5px; }
    .tr_tr > * { padding: 11px 10px; }
    .tr-obs-slide b { font-size: 18px; }
    .tr-obs-slide { padding: 0 18px; }
    .tr-cap { font-size: 14px; }
    .tr-qp { padding: 7px 8px; font-size: 11.5px; }
    .tr-pf { gap: 5px; }
    .tr-pf > div { padding: 5px 7px 5px 21px; }
    .tr-pf i { left: 8px; top: 10px; }
    .tr-pipe { gap: 3px; }
    .tr-pipe > div { flex-direction: column; gap: 3px; padding: 7px 3px; }
    .tr-pipe > div b { font-size: 11.5px; }
    .tr-pipe u { width: 6px; }
    .tr-style { grid-template-columns: minmax(0, 1fr); }
    .tr-obs-sm { display: none; }
    .tr-qrcard { padding: 10px 6px; }
    .td-pf { grid-template-columns: minmax(0, 1fr); }
    .td-pipe { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tr_real img { transition: none; }
    .td-pf > div { animation: none; }
}