/* 자동 생성 파일 — 원본 redesign/trial/trial.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* trial/trial.css — AI 이어링 체험(결정 74). 토큰·헤더·푸터·버튼은 ../d3/d.css
   구간 바탕: 체험 무대(잉크) → 시작하는 순서(흰) → 운영하면서 더 다듬어요(흰, 이어짐) → 채팅 위젯 설치(회) → 마지막 구간(잉크)
   폭: 1280 이상 무대 3열(270 / 640 / 300) · 901~1279 대화 + 생각 순서, 정책은 아래 5칸 · 900 이하 한 줄씩(대화 → 생각 순서 → 정책)
   남색(AI)은 아바타·라벨·배지에, 파랑은 고객 말풍선에만. 잉크 무대 위 AI 점·강조 테두리는 밝은 남색(--ai-ink) */
.tr {
  --soft: #f2f3f5; --line: #e3e5ea; --mute: #6b707a; --cust: #0a6fd6;
  --d1: #22252c; --d2: #2e3139; --ai-ink: #8fa2c9; --on-ink-2: #b9bdc6; --on-ink-3: #8d929c;
}

/* ── 공통 ── */
.tr .ln { display: inline-block; }
.tr .tr-ex { margin: 0; font-size: 11.5px; font-weight: 500; line-height: 14px; color: #7c818b; white-space: nowrap; pointer-events: none; }
.tr .tr-ex--dark { color: #6d727c; }
.tr .tr-ey { font-size: var(--t-ey); font-weight: 600; letter-spacing: .02em; color: var(--on-ink-brand); line-height: 1.4; }
.tr .tr-head { margin-bottom: 44px; }
.tr .tr-h2 .ln { display: block; }
.tr .tr-head-side { justify-self: end; padding-bottom: 6px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c); text-align: right; }
.tr .tr-head-side .ln { display: block; }
.tr .tr-fi { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; }
.tr .tr-fi svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ════ 1. 체험 무대 ════ */
.tr .tr-stage { background: var(--ink); color: #fff; padding: 64px 0 48px; }
.tr .tr-top { margin-bottom: 40px; text-align: center; }
.tr .tr-h1 { margin-top: 14px; font-size: var(--t-h1); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; }
.tr .tr-h1 .ln, .tr .tr-lead .ln { display: block; }
.tr .tr-lead { margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c-ink); }

.tr .tr-lab { display: grid; grid-template-columns: clamp(270px, 21.5vw, 340px) minmax(0, 640px) clamp(300px, 23vw, 360px); grid-template-areas: "pol chat think" "ex . ."; justify-content: center; align-items: start; gap: 28px; row-gap: 20px; }
.tr .tr-pols { grid-area: pol; }
.tr .tr-chat { grid-area: chat; }
.tr .tr-think { grid-area: think; }
.tr .tr-lab-ex { grid-area: ex; justify-self: start; }

.tr .tr-side-h { margin: 6px 0 12px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--on-ink-3); }
.tr .tr-store { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tr .tr-store-lg { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; }
.tr .tr-store b { display: block; font-size: 16px; line-height: 1.4; }
.tr .tr-store small { display: block; font-size: 13px; color: var(--on-ink-3); }
.tr .tr-pol-list { display: grid; gap: 8px; }
.tr .tr-pol { padding: 13px 16px; border-radius: 14px; background: var(--d1); opacity: .75; transition: background .35s, transform .35s, box-shadow .35s, opacity .35s; }
.tr .tr-pol-t { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; line-height: 1.45; color: #fff; }
.tr .tr-pol-k { padding: 1px 6px; border-radius: 5px; background: var(--d2); font-size: 12.5px; font-weight: 700; color: #c4c8d0; }
.tr .tr-pol-d { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #9aa0aa; }
.tr .tr-pol.is-hit { opacity: 1; background: #fff; transform: translateX(6px); box-shadow: 0 0 0 2px var(--ai-ink); }
.tr .tr-pol.is-hit .tr-pol-t { color: var(--ink); }
.tr .tr-pol.is-hit .tr-pol-d { color: var(--ink-3); }
.tr .tr-pol.is-hit .tr-pol-k { background: var(--ai-soft); color: var(--ai); }
.tr .tr-pol.is-ask { opacity: 1; animation: tr-polpulse 1.4s ease-in-out infinite; }
@keyframes tr-polpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 162, 201, 0); } 50% { box-shadow: 0 0 0 3px rgba(143, 162, 201, .8); } }

/* 대화창 */
.tr .tr-chat { display: flex; flex-direction: column; min-width: 0; border-radius: 26px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.tr .tr-chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px 22px; }
.tr .tr-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ai); color: #fff; font-size: 11.5px; font-weight: 800; }
.tr .tr-chat-who { display: grid; min-width: 0; margin-right: auto; line-height: 1.35; }
.tr .tr-chat-who b { font-size: 15px; }
.tr .tr-chat-who span { font-size: 13px; color: var(--ink-3); }
.tr .tr-icbtn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
.tr .tr-icbtn:hover { background: var(--soft); color: var(--ink); }
.tr .tr-icbtn svg { width: 18px; height: 18px; }
.tr .tr-msgs { display: flex; flex-direction: column; gap: 12px; height: 430px; padding: 8px 22px 18px; overflow-y: auto; }
.tr .tr-msgs > :first-child { margin-top: auto; }   /* 짧을 땐 아래에 붙고, 길어지면 위로 스크롤(자르지 않음) */
.tr .tr-msgs:focus-visible { outline-offset: -3px; }
/* 3칸(1280 이상): 대화창 아래끝 = 왼쪽 정책 마지막 칸 아래끝(사용자 요청 2026-10-07) — 대화창을 줄 높이로 늘리고 대화 칸이 남는 높이를 가짐 */
@media (min-width: 1280px) {
  .tr .tr-chat { align-self: stretch; }
  .tr .tr-msgs { flex: 1 1 0; height: auto; min-height: 260px; }
}
/* 말풍선 = 서비스 첫 화면 흐름 고객 위젯(services/flow.css .wrow · .gs · .ln · .wm · .mt)과 같은 모양
   AI: 원 아바타 28px(말풍선 아래 맞춤) + 이름(아바타 오른쪽 · 말풍선 시작선) + 말풍선 + 오른쪽 아래 좋아요 · 싫어요 · 시간
   연속 AI 말풍선(.is-cont)은 아바타 · 이름 자리만 비움, 시간 · 아이콘은 마지막 말풍선에만(.is-mid는 숨김). 고객: 왼쪽 아래 시간 */
.tr .tr-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.tr .tr-row--c { justify-content: flex-end; gap: 6px; }
.tr .tr-row--a.is-cont { margin-top: -6px; }
.tr .tr-bav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ai); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .01em; }
.tr .tr-row.is-cont .tr-bav { visibility: hidden; }
.tr .tr-gs { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: calc(100% - 36px); }
.tr .tr-who { margin-bottom: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ai); }
.tr .tr-ln { display: flex; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.tr .tr-bub { max-width: 78%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.tr .tr-ln .tr-bub { flex: 0 1 auto; min-width: 0; max-width: 100%; background: var(--face); border-bottom-left-radius: 6px; }
.tr .tr-row--c .tr-bub { background: var(--cust); color: #fff; border-bottom-right-radius: 6px; }
.tr .tr-mt { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; line-height: 1.2; color: var(--mute); white-space: nowrap; }
.tr .tr-row--c .tr-mt { align-items: flex-end; }
.tr .tr-th { display: flex; gap: 5px; }
.tr .tr-th svg { width: 12px; height: 12px; fill: none; stroke: #a3a8b2; stroke-width: 1.8; stroke-linejoin: round; }
.tr .tr-th svg + svg { transform: scaleY(-1); }
.tr .tr-row--a:not(.is-done) .tr-mt, .tr .tr-row--a.is-mid .tr-mt { visibility: hidden; }
.tr .tr-row--c .tr-bub.is-mask { background: var(--face); color: var(--ink-3); }
.tr .tr-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.tr .tr-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: tr-blink 1s infinite; }
.tr .tr-typing i:nth-child(2) { animation-delay: .15s; }
.tr .tr-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tr-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.tr .tr-qs { padding: 12px 18px 18px; }
.tr .tr-qs-k { margin-bottom: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.tr .tr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tr .tr-chips button { padding: 8px 13px; border: 0; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: left; }
.tr .tr-chips button:hover { background: #e8eaee; }
.tr .tr-chips button.is-done { opacity: .5; }
.tr .tr-hints { padding: 12px; border-radius: 16px; background: var(--ai-soft); }
.tr .tr-qs-swap { display: grid; }
.tr .tr-qs-swap > * { grid-area: 1 / 1; min-width: 0; }
.tr .tr-hints { align-self: start; }
.tr .tr-qs:not(.is-hint) .tr-hints, .tr .tr-qs.is-hint .tr-qs-a { visibility: hidden; }
.tr .tr-hints-k { margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--ai); }
.tr .tr-chips .tr-hint { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-weight: 700; animation: tr-pulse 1.4s ease-in-out infinite; }
.tr .tr-chips .tr-hint:hover { background: #2e3139; }
.tr .tr-hk { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .18); font-size: 11.5px; font-weight: 700; }
@keyframes tr-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 24, 29, .45); } 70% { box-shadow: 0 0 0 10px rgba(22, 24, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 24, 29, 0); } }
.tr .tr-inp { display: flex; gap: 8px; margin-top: 12px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--soft); }
.tr .tr-inp input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.tr .tr-inp:focus-within { box-shadow: 0 0 0 2px var(--ai); }
.tr .tr-inp button { flex: none; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.tr .tr-inp button:disabled, .tr .tr-inp input:disabled { opacity: .5; cursor: default; }

/* 오른쪽: AI가 생각한 순서 */
.tr .tr-empty { padding: 16px; border-radius: 14px; background: var(--d1); font-size: 15px; line-height: 1.6; color: var(--on-ink-3); }
.tr .tr-steps { position: relative; }
.tr .tr-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; opacity: 0; transform: translateY(6px); animation: tr-in .35s forwards; animation-delay: calc(var(--i) * .18s); }
.tr .tr-steps li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--d2); }
.tr .tr-steps li.is-last::before { display: none; }
@keyframes tr-in { to { opacity: 1; transform: none; } }
.tr .tr-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--ai-ink); box-shadow: 0 0 0 4px rgba(143, 162, 201, .22); }
.tr .tr-steps li.is-hu .tr-dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(200, 17, 90, .3); }
.tr .tr-steps small { display: block; font-size: 13px; font-weight: 600; color: var(--on-ink-3); }
.tr .tr-steps b { display: block; margin-top: 2px; font-size: 16px; line-height: 1.45; }
.tr .tr-steps li.is-last b { font-size: 18px; }
.tr .tr-steps li.is-hu b { color: var(--on-ink-brand); }
.tr .tr-why { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--on-ink-2); }
.tr .tr-use { margin-top: 2px; padding: 9px 12px; border-radius: 10px; background: var(--d1); font-size: 13.5px; color: var(--on-ink-3); }
.tr .tr-cks { display: grid; gap: 8px; margin-top: 18px; }
.tr .tr-cks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-ink-3); }
.tr .tr-cks i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--d2); }
.tr .tr-cks li.is-on { color: #fff; font-weight: 600; }
.tr .tr-cks li.is-on i { background: #fff; }
.tr .tr-cks li.is-on i::after { content: ""; width: 7px; height: 4px; border-left: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(-45deg) translateY(-1px); }

/* ════ 2. 시작하는 순서 — 돌아가는 카드 ════ */
.tr .tr-start { background: var(--surface); padding: var(--sec-y) 0 0; }
.tr .tr-rot-stage { position: relative; padding: 16px 0 40px; overflow: hidden; perspective: 1800px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.tr .tr-rot-track { display: grid; grid-template-columns: repeat(5, var(--sw, 760px)); column-gap: var(--sg, 24px); width: max-content; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.tr .tr-sl { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 32px 36px 40px; border-radius: 26px; background: var(--bg); opacity: .5; cursor: pointer; transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .6s, background .6s, box-shadow .6s; }
.tr .tr-sl.is-on { opacity: 1; background: #fff; box-shadow: 0 18px 50px rgba(22, 24, 29, .10), 0 0 0 1px var(--line); cursor: default; }
.tr .tr-rot-track.is-snap, .tr .tr-rot-track.is-snap .tr-sl { transition: none; }
.tr .tr-sl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 4px; }
.tr .tr-sl-head h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; white-space: nowrap; }
.tr .tr-sl-head p { font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); text-align: right; }
.tr .tr-sl-head p .ln { display: block; }
.tr .tr-sl > .tr-ex { position: absolute; left: 40px; bottom: 14px; }

/* 관리자 화면 예시(회색 판 + 흰 칸) */
.tr .tr-mk { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: var(--bg); color: var(--ink); }
.tr .tr-mk-h { font-size: 17px; font-weight: 700; line-height: 1.4; }
.tr .tr-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tr .tr-f small { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.tr .tr-f > span, .tr .tr-url > span { display: block; padding: 10px 13px; border-radius: 10px; background: #fff; font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.tr .tr-cp { display: flex; flex-wrap: wrap; gap: 6px; }
.tr .tr-cp span { padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.tr .tr-cp span.on { background: var(--ink); color: #fff; }
.tr .tr-cp span.ai { background: var(--ai-soft); color: var(--ai); }
.tr .tr-agr { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.tr .tr-agr i { flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--ink); }
.tr .tr-mk-btn { margin-top: auto; padding: 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
.tr .tr-st { display: flex; flex-wrap: wrap; gap: 6px; }
.tr .tr-st span { padding: 7px 11px; border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tr .tr-st span.on { background: var(--ink); color: #fff; }
.tr .tr-url { display: flex; gap: 8px; }
.tr .tr-url > span { flex: 1; min-width: 0; }
.tr .tr-url i { flex: none; display: grid; place-items: center; padding: 0 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-style: normal; font-weight: 700; white-space: nowrap; }
.tr .tr-acth { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr .tr-acth i { padding: 7px 12px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 13.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.tr .tr-acc { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #fff; }
.tr .tr-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr .tr-act code { padding: 3px 7px; border-radius: 6px; background: var(--soft); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); }
.tr .tr-act b { font-size: 15.5px; }
.tr .tr-tag { padding: 2px 7px; border-radius: 6px; background: var(--ai-soft); font-size: 11.5px; font-weight: 700; color: var(--ai); }
.tr .tr-act em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--soft); font-size: 12px; font-style: normal; font-weight: 700; color: var(--ink-2); }
.tr .tr-acc-m { font-size: 13px; color: var(--ink-3); }
.tr .tr-acb { display: flex; gap: 6px; }
.tr .tr-acb span { padding: 5px 10px; border-radius: 7px; background: var(--soft); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tr .tr-acb span.pb { background: var(--ai-soft); color: var(--ai); }
.tr .tr-kg { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tr .tr-kt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: 12px; row-gap: 2px; padding: 13px 14px; border-radius: 14px; background: #fff; }
.tr .tr-kt > .tr-ki { grid-row: 1 / 3; }
.tr .tr-kt > b { font-size: 16px; line-height: 1.4; }
.tr .tr-kt > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.tr .tr-kt--big { grid-row: 1 / 4; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }   /* 칸 폭·높이를 다 씀(내용 폭으로 줄어 가운데 몰리던 것 — 2026-10-07 사용자 요청) */
.tr .tr-kt--big .tr-ksub { flex: 1; grid-auto-rows: minmax(0, 1fr); }
.tr .tr-kt--big .tr-ksub p { align-content: center; padding: 12px 14px; }
.tr .tr-kt-h { display: flex; align-items: center; gap: 10px; }
.tr .tr-kt-h b { font-size: 16px; }
.tr .tr-ki { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); }
.tr .tr-ki svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tr .tr-ksub { display: grid; gap: 8px; }
.tr .tr-ksub p { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--soft); }
.tr .tr-ksub b { font-size: 14.5px; }
.tr .tr-ksub span { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.tr .tr-ksub em { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 4px 9px; border-radius: 7px; background: var(--ai-soft); font-size: 13px; font-style: normal; font-weight: 700; color: var(--ai); }
.tr .tr-mk--run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.tr .tr-rch { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; }
.tr .tr-mb { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.tr .tr-mb.c { align-self: flex-end; background: var(--cust); color: #fff; border-bottom-right-radius: 4px; }
.tr .tr-mb.a { align-self: flex-start; background: var(--face); border-bottom-left-radius: 4px; }
/* 운영 시작 = 관리자(우리) 쪽에서 보는 대화: 고객 왼쪽 파랑 · 우리 답 오른쪽 회색(D3 제품 장면과 같은 방향, 2026-10-07 사용자 요청) */
.tr .tr-rch .tr-mb.c { align-self: flex-start; border-radius: 14px 14px 14px 4px; }
.tr .tr-rch .tr-mb.a { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.tr .tr-rls { display: grid; gap: 7px; align-content: start; }
.tr .tr-rl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.tr .tr-rl b { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.tr .tr-rl em { flex: none; padding: 3px 7px; border-radius: 6px; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.tr .tr-rl em.ai { background: var(--ai-soft); color: var(--ai); }
.tr .tr-rl em.hu { background: var(--brand); color: #fff; }

.tr .tr-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.tr .tr-dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 0; background: transparent; }
.tr .tr-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c9cdd4; transition: width .3s, background .3s; }
.tr .tr-dots button.is-on::before { width: 28px; background: var(--ink); }

/* ════ 3. 운영하면서 더 다듬어요 — 지그재그(네 줄 높이 같음: --zh-h 머리 · --zb-h 본문, trial.js) ════ */
.tr .tr-refine { background: var(--surface); padding: 96px 0 var(--sec-y); }
.tr .tr-rh { margin-bottom: 24px; text-align: center; }
.tr .tr-rh-h { font-size: var(--t-h2); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; }
.tr .tr-rh-d { margin-top: 8px; font-size: var(--t-lead); color: var(--t-lead-c); line-height: 1.6; }
.tr .tr-zr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h ." "f v"; column-gap: 48px; row-gap: 22px; align-items: stretch; padding: 40px 0; }
.tr .tr-zr--rev { grid-template-areas: ". h" "v f"; }
.tr .tr-zh { grid-area: h; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--zh-h, 0); }
.tr .tr-zk { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--t-cap); font-weight: 600; }
.tr .tr-zh h3 { margin-top: 14px; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.tr .tr-zd { margin-top: 10px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.tr .tr-fts { grid-area: f; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 10px; min-height: var(--zb-h, 0); }
.tr .tr-ft { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--bg); }
.tr .tr-ft b { display: block; font-size: var(--t-body); font-weight: 700; line-height: 1.4; }
.tr .tr-ft div > span { display: block; margin-top: 5px; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); }
.tr .tr-rv { grid-area: v; position: relative; display: flex; min-height: var(--zb-h, 0); padding: 24px 24px 40px; border-radius: 20px; background: var(--bg); }
.tr .tr-rv > .tr-ex { position: absolute; left: 28px; bottom: 14px; }
.tr .tr-zm { flex: 1; display: grid; gap: 12px; align-content: center; padding: 24px; border-radius: 16px; background: #fff; }
.tr .is-measure .tr-zr { align-items: start; }
.tr .is-measure .tr-zh, .tr .is-measure .tr-fts, .tr .is-measure .tr-rv { min-height: 0; }
.tr .tr-zm-h { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.tr .tr-zm-h--gap { margin-top: 4px; }
.tr .tr-tg { display: flex; flex-wrap: wrap; gap: 8px; }
.tr .tr-tg span { padding: 7px 12px; border-radius: 9px; background: var(--soft); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tr .tr-tg span.on { background: var(--ai-soft); color: var(--ai); }
.tr .tr-fl small { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.tr .tr-fl small em { margin-left: 4px; padding: 2px 7px; border-radius: 4px; background: var(--ai-soft); font-size: 12px; font-style: normal; color: var(--ai); }
.tr .tr-fl > span { display: block; padding: 11px 14px; border-radius: 10px; background: var(--soft); font-size: 15px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.tr .tr-ok { padding: 11px 14px; border-radius: 10px; background: var(--soft); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.tr .tr-pr { display: flex; align-items: center; gap: 14px; }
.tr .tr-ph { flex: none; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #e8e2d6, #cfc6b4); }
.tr .tr-pr b { display: block; font-size: 16px; }
.tr .tr-pr small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.tr .tr-tgl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--soft); font-size: 15px; color: var(--ink-2); }
.tr .tr-tgl i { position: relative; flex: none; width: 36px; height: 21px; border-radius: 999px; background: #d6d9df; }
.tr .tr-tgl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.tr .tr-tgl.on i { background: var(--ink); }
.tr .tr-tgl.on i::after { left: 17px; }
.tr .tr-tgl em { margin-left: auto; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
.tr .tr-cm { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--soft); }
.tr .tr-cm .tr-mb.a { max-width: 90%; background: #fff; }
.tr .tr-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.tr .tr-btns span { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d6d9df; font-size: 13.5px; font-weight: 700; }

/* ════ 4. 채팅 위젯 설치 ════ */
.tr .tr-wg { --wc: var(--ai); background: var(--bg); padding: var(--sec-y) 0; }
.tr .tr-wgb { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "st wv"; gap: 36px; align-items: stretch; }
.tr .tr-wst { grid-area: st; display: grid; gap: 10px; align-content: start; }
.tr .tr-ws { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px 20px; border: 0; border-radius: 16px; background: transparent; text-align: left; transition: background .3s, box-shadow .3s; }
.tr .tr-ws .tr-fi { width: 40px; height: 40px; transition: background .3s; }
.tr .tr-ws .tr-fi svg { width: 20px; height: 20px; stroke: var(--ink-3); }
.tr .tr-ws-tx { display: block; min-width: 0; }
.tr .tr-ws b { display: block; padding-top: 8px; font-size: var(--t-body); font-weight: 700; line-height: 1.4; color: var(--ink-3); transition: color .3s; }
.tr .tr-ws-d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s, opacity .4s; }
.tr .tr-ws-di { display: block; min-height: 0; overflow: hidden; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); }
.tr .tr-ws-di::before { content: ""; display: block; height: 4px; }
.tr .tr-ws-u { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 10px; padding: 5px 10px; border-radius: 8px; background: var(--ai-soft); font-size: var(--t-cap); font-weight: 600; color: var(--ai); }
.tr .tr-ws-u svg { width: 14px; height: 14px; fill: none; stroke: var(--ai); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr .tr-ws.is-on { background: #fff; box-shadow: 0 8px 24px rgba(22, 24, 29, .06); }
.tr .tr-ws.is-on .tr-fi { background: var(--ink); }
.tr .tr-ws.is-on .tr-fi svg { stroke: #fff; }
.tr .tr-ws.is-on b { color: var(--ink); }
.tr .tr-ws.is-on .tr-ws-d { grid-template-rows: 1fr; opacity: 1; }
.tr .tr-wdesc { display: none; }

.tr .tr-wv { grid-area: wv; position: relative; display: grid; min-width: 0; min-height: 0; padding: 26px 26px 44px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(22, 24, 29, .05); }   /* 2026-10-12: 620 고정 → 네 화면 중 가장 긴 화면 높이로(빈 여백 줄임) */
.tr .tr-wp { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s, transform .45s, visibility 0s .45s; }
.tr .tr-wp.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tr .tr-wp > .tr-ex { position: absolute; left: 2px; bottom: -30px; }
.tr .tr-set { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
.tr .tr-sf { display: grid; gap: 20px; align-content: start; }
.tr .tr-wt { font-size: 18px; font-weight: 700; }
.tr .tr-wg .tr-fl small { margin-bottom: 8px; color: var(--ink-2); }
.tr .tr-sw { display: flex; gap: 10px; }
.tr .tr-sw button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; outline: 2px solid transparent; outline-offset: 2px; }
.tr .tr-sw button.on { outline-color: var(--ink); }
.tr .tr-seg { display: flex; gap: 6px; }
.tr .tr-seg span { padding: 8px 16px; border-radius: 9px; background: var(--soft); font-size: 14.5px; color: var(--ink-3); }
.tr .tr-seg span.on { background: var(--ink); color: #fff; font-weight: 600; }
.tr .tr-pvw { position: relative; min-height: 380px; border-radius: 14px; background: var(--soft); overflow: hidden; }
.tr .tr-pvw > small { position: absolute; left: 16px; top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.tr .tr-pvm { position: absolute; left: 16px; right: 16px; top: 42px; display: grid; gap: 10px; opacity: .7; }
.tr .tr-pvm i { display: block; border-radius: 6px; background: #e3e5ea; }
.tr .tr-pvm .n { width: 40%; height: 14px; }
.tr .tr-pvm .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr .tr-pvm .g i { height: 92px; }
.tr .tr-pvm .l { width: 70%; height: 10px; }
.tr .tr-pvm .l.s { width: 45%; }
.tr .tr-wd { position: absolute; right: 16px; bottom: 90px; width: 290px; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px rgba(22, 24, 29, .16); overflow: hidden; }
.tr .tr-wdh { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--wc); color: #fff; transition: background .4s; }
.tr .tr-wdh i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .18); font-size: 13px; font-style: normal; font-weight: 700; }
.tr .tr-wdh b { display: block; font-size: 15px; line-height: 1.4; }
.tr .tr-wdh small { display: block; font-size: 12.5px; opacity: .8; }
.tr .tr-wdb { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fafbfc; }
.tr .tr-wa, .tr .tr-wc { max-width: 86%; padding: 10px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.6; }
.tr .tr-wa { align-self: flex-start; background: var(--face); color: var(--ink); border-top-left-radius: 4px; }
.tr .tr-wc { align-self: flex-end; background: var(--cust); color: #fff; border-top-right-radius: 4px; }
.tr .tr-wch { display: flex; flex-wrap: wrap; gap: 6px; }
.tr .tr-wch span { padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.tr .tr-wdi { padding: 13px 16px; background: #fff; font-size: 13.5px; color: var(--mute); }
.tr .tr-lau { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wc); box-shadow: 0 8px 20px rgba(22, 24, 29, .18); transition: background .4s; }
.tr .tr-lau svg { width: 22px; height: 22px; fill: #fff; }
.tr .tr-bw { flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 14px; background: var(--soft); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.tr .tr-bt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; }
.tr .tr-bt i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--face); }
.tr .tr-bt span { flex: 1; min-width: 0; margin-left: 6px; padding: 7px 14px; border-radius: 7px; background: var(--soft); font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.tr .tr-bt em { flex: none; padding: 4px 10px; border-radius: 6px; background: var(--ai-soft); font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--ai); }
.tr .tr-bb { position: relative; flex: 1; padding: 28px; }
.tr .tr-bb--test .tr-wd { right: 28px; bottom: 28px; width: 350px; }
.tr .tr-tpg { max-width: 380px; }
.tr .tr-tpg b { display: block; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.tr .tr-tpg p { margin-top: 12px; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); }
.tr .tr-tpg .ln { display: block; }
/* 3단계 쇼핑몰에 앱 설치(설치 화면 문서 C1 · C3) — 세 단계 카드, 쇼핑몰 2곳 이상이면 위쪽에 칩 줄(.is-multi: 칩 줄 위치 고정) */
.tr .tr-ai3 { flex: 1; display: grid; gap: 12px; align-content: center; min-width: 0; }
.tr .tr-ai3.is-multi { align-content: start; padding-top: 12px; }
.tr .tr-mall-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.tr .tr-mlab { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.tr .tr-mc { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tr .tr-mc img { width: 16px; height: 16px; border-radius: 4px; }
.tr .tr-mc small { font-size: 11.5px; font-weight: 700; color: var(--mute); }
.tr .tr-mc.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.tr .tr-mc.on small { color: #b9bec8; }
.tr .tr-mb3 { display: grid; gap: 12px; min-width: 0; }
.tr .tr-mb3[hidden] { display: none; }
.tr .tr-ai3s { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.tr .tr-ai3n { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 12px; border-radius: 50%; background: var(--soft); font-size: 14px; font-weight: 800; color: var(--ink-3); }
.tr .tr-ai3s.on .tr-ai3n { background: var(--brand); color: #fff; }
.tr .tr-ai3n svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tr .tr-ai3c { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--soft); }
.tr .tr-ai3l { margin-bottom: 10px; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--ink-3); }
.tr .tr-istore { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tr .tr-istore img, .tr .tr-myapp img { flex: none; border-radius: 10px; }
.tr .tr-istore p { flex: 1 1 120px; min-width: 0; }
.tr .tr-istore b { display: block; font-size: 16px; line-height: 1.4; }
.tr .tr-istore small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.tr .tr-sbtn { flex: none; display: inline-flex; align-items: center; height: 36px; margin-left: auto; padding: 0 16px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; }
.tr .tr-myapp { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tr .tr-myapp b { min-width: 0; font-size: 15px; }
.tr .tr-sbtn2 { flex: none; display: inline-flex; align-items: center; height: 32px; margin-left: auto; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #d5d8de; font-size: 13px; font-weight: 700; color: var(--ink); }
.tr .tr-done { display: grid; gap: 2px; }
.tr .tr-done p { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.tr .tr-done i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; }
.tr .tr-mcode { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--d1); }
.tr .tr-mcode code { flex: 1; min-width: 0; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9cdd6; overflow-wrap: anywhere; }
.tr .tr-mcode span { flex: none; font-size: 13px; font-weight: 700; color: #fff; }
.tr .tr-live { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.tr .tr-bb--live { padding: 16px; }
.tr .tr-mall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; padding: 16px; border-radius: 10px; background: #fff; }
.tr .tr-mall-nv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.tr .tr-mall-nv b { font-size: 16px; color: var(--ink); }
.tr .tr-mall > i { display: block; aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(160deg, #e8e4dd, #d9d4cb); }
.tr .tr-mall > i.b { background: linear-gradient(160deg, #dfe2e8, #c9ced8); }
.tr .tr-wd--sm { right: 16px; bottom: 16px; width: 260px; }
.tr .tr-inb { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tr .tr-inb-h { font-size: 16px; font-weight: 700; }
.tr .tr-ir { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; background: var(--soft); }
.tr .tr-ir.is-new { background: #fff; box-shadow: 0 6px 18px rgba(22, 24, 29, .10), 0 0 0 1px var(--line); }
.tr .tr-ir-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--face); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tr .tr-ir p b { display: block; font-size: 14.5px; }
.tr .tr-ir p span { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-3); }
.tr .tr-ir p em { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-style: normal; font-weight: 700; }
.tr .tr-ir em.ai { background: var(--ai-soft); color: var(--ai); }
.tr .tr-ir em.hu { background: var(--brand); color: #fff; }

/* ════ 5. 마지막 구간 ════ */
.tr .tr-cta { position: relative; isolation: isolate; overflow: hidden; padding: 112px 0; background: var(--ink); color: #fff; }
.tr .tr-cta::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; width: 900px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(29, 45, 92, .8), transparent); pointer-events: none; }
.tr .tr-fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tr .tr-ctx { position: relative; z-index: 2; }
.tr .tr-ctx-in { max-width: 680px; margin-inline: auto; text-align: center; }
.tr .tr-cta-h { margin-top: 14px; font-size: var(--t-h2); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; }
.tr .tr-cta-h .ln, .tr .tr-cta-d .ln { display: block; }
.tr .tr-cta-d { margin-top: 18px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c-ink); }
.tr .tr-cbtn { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.tr .tr-cbtn .d-btn { gap: 9px; }
.tr .tr-btn-w { background: #fff; color: var(--ink); }
.tr .tr-btn-w:hover { background: #e8eaee; }
.tr .tr-pl { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 8px 2px 8px 0;   /* 오른쪽 2px = 기울인 화살표 모서리 */ font-size: var(--t-body); font-weight: 600; color: #c4c8d0; text-underline-offset: 5px; }
.tr .tr-pl::after { content: ""; width: 7px; height: 7px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; transform: rotate(45deg); }
.tr .tr-pl:hover { color: #fff; }
.tr .tr-fb { position: absolute; left: 0; top: 0; max-width: 280px; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre; opacity: 0; }
.tr .tr-fb.c { background: var(--cust); color: #fff; border-bottom-right-radius: 5px; }
.tr .tr-fb.a { background: var(--d2); color: #e3e5ea; border-bottom-left-radius: 5px; }
.tr .tr-fb.is-go { animation: tr-fb 7.5s ease-out forwards; }
.tr .tr-fb.is-late { animation-delay: .5s; }   /* 답 말풍선은 0.5초 뒤(1.1 → 0.5, 더 빨리 보이게) */
/* 위로 36px 떠오르며 사라짐 — 칸 높이 안에서만(trial.js가 떠오를 거리까지 칸 안에 둠) */
@keyframes tr-fb { 0% { opacity: 0; transform: translateY(0) scale(.94); } 5% { opacity: .7; transform: translateY(-4px) scale(1); } 70% { opacity: .55; } 100% { opacity: 0; transform: translateY(-36px); } }

/* ════ 폭별 ════ */
@media (max-width: 1279px) {
  /* 무대: 대화 + 생각 순서, 정책은 아래 한 줄 5칸 */
  .tr .tr-lab { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "chat think" "pol pol" "ex ex"; }
  .tr .tr-pols { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .tr .tr-pols .tr-side-h { margin: 0; }
  .tr .tr-store { margin: 0; }
  .tr .tr-pol-list { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
  .tr .tr-pol.is-hit { transform: translateY(-4px); }
  .tr .tr-fly { opacity: .16; }   /* 2026-10-12: 좁은 화면도 떠오르는 대화(양옆 자리가 없어 글 뒤 전체 폭에 옅게) */
}
@media (max-width: 1100px) {
  .tr .tr-head-side { justify-self: start; text-align: left; }
  .tr .tr-head-side .ln { display: inline; }
  /* 지그재그 → 한 줄씩(머리 → 기능 → 예시 화면) */
  .tr .tr-zr, .tr .tr-zr--rev { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "f" "v"; row-gap: 18px; padding: 28px 0; }
  .tr .tr-fts { grid-auto-rows: auto; }
  /* 위젯: 단계 버튼 가로 4칸 + 아래 설명 한 칸(높이 = 가장 긴 설명) → 미리 보기 */
  .tr .tr-wgb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "st" "ds" "wv"; gap: 14px; }
  .tr .tr-wst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tr .tr-ws { align-items: center; gap: 10px; height: 100%; padding: 14px; background: rgba(255, 255, 255, .5); }
  .tr .tr-ws .tr-fi { width: 36px; height: 36px; }
  .tr .tr-ws b { padding-top: 0; font-size: var(--t-body); text-wrap: balance; }
  .tr .tr-ws-d { display: none; }
  .tr .tr-wdesc { grid-area: ds; display: grid; padding: 0 4px; }
  .tr .tr-wdesc p { grid-area: 1 / 1; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-2); visibility: hidden; }
  .tr .tr-wdesc p.is-on { visibility: visible; }
  .tr .tr-wv { min-height: 0; }
  .tr .tr-bb--test { min-height: 520px; }
}
@media (max-width: 900px) {
  .tr .tr-lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chat" "think" "pol" "ex"; }
  .tr .tr-pol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr .tr-qs-swap { display: block; }   /* 한 줄 배치: 예시 질문 칸이 길어 겹쳐 두면 힌트 아래가 비어 보임 → 바꿔 끼움 */
  .tr .tr-qs:not(.is-hint) .tr-hints, .tr .tr-qs.is-hint .tr-qs-a { display: none; }
  .tr .tr-sl-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tr .tr-sl-head p { text-align: left; }
  .tr .tr-sl-head p .ln { display: inline; }
  .tr .tr-set { grid-template-columns: minmax(0, 1fr); }
  .tr .tr-live { grid-template-columns: minmax(0, 1fr); }
  .tr .tr-ai3 { align-content: start; }   /* 한 줄 배치: 판 높이 = 가장 긴 단계 화면이라 가운데 맞춤이면 위가 크게 비어 보임 → 위에 붙임 */
  /* 미리 보기 위젯은 본문 아래로(겹쳐 띄우지 않음 — 칸이 세로로 길어져 빈 곳이 생겼음) */
  .tr .tr-bb--test, .tr .tr-bb--live { min-height: 0; }
  .tr .tr-bb--test .tr-wd, .tr .tr-wd--sm { position: relative; right: auto; bottom: auto; width: auto; max-width: 420px; margin: 20px 0 0 auto; }
}
@media (max-width: 760px) {
  .tr .tr-stage { padding: 44px 0 36px; }
  .tr .tr-top { margin-bottom: 28px; }
  .tr .tr-h1 { font-size: var(--t-h1); }
  .tr .tr-lead { font-size: var(--t-lead); }
  .tr .tr-chat { border-radius: 20px; }
  .tr .tr-chat-head { padding: 14px 12px 8px 16px; }
  .tr .tr-msgs { height: 380px; padding: 8px 14px 14px; }
  .tr .tr-row--c .tr-bub { max-width: 86%; }
  .tr .tr-bub { font-size: 15px; }
  .tr .tr-qs { padding: 10px 14px 16px; }
  .tr .tr-chips { gap: 6px; }
  .tr .tr-chips button { padding: 7px 11px; font-size: 13.5px; }   /* 예시 질문 6개가 세로로 길게 쌓이지 않게 작게(줄바꿈은 유지 — 가로 스크롤은 칩이 잘려 보임) */
  .tr .tr-inp { padding-left: 16px; }
  .tr .tr-head { margin-bottom: 28px; }
  .tr .tr-rot-stage { padding: 8px 0 32px; -webkit-mask: none; mask: none; }
  .tr .tr-sl { gap: 18px; padding: 22px 18px 36px; border-radius: 22px; }
  .tr .tr-sl-head { padding: 0 2px; }
  .tr .tr-sl-head h3 { font-size: var(--t-h3); }
  .tr .tr-sl-head p { font-size: var(--t-sub); }
  .tr .tr-sl > .tr-ex { left: 20px; bottom: 12px; }
  .tr .tr-mk { padding: 16px; gap: 10px; border-radius: 14px; }
  .tr .tr-mk-h { font-size: 16px; }
  .tr .tr-g2, .tr .tr-mk--run { grid-template-columns: minmax(0, 1fr); }
  .tr .tr-f > span, .tr .tr-url > span { font-size: 14px; padding: 9px 12px; }
  .tr .tr-cp span { font-size: 13px; padding: 5px 10px; }
  .tr .tr-kg { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .tr .tr-kt--big { grid-row: auto; }
  .tr .tr-refine { padding: 64px 0 var(--sec-y); }
  .tr .tr-rh { margin-bottom: 8px; }
  .tr .tr-rh-h { font-size: var(--t-h2); }
  .tr .tr-rh-d { font-size: var(--t-lead); }
  .tr .tr-zh h3 { font-size: var(--t-h3); }
  .tr .tr-zd { font-size: var(--t-body); }
  .tr .tr-ft { gap: 14px; padding: 16px; }
  .tr .tr-ft .tr-fi { width: 40px; height: 40px; }
  .tr .tr-ft b { font-size: var(--t-body); }
  .tr .tr-ft div > span { font-size: var(--t-sub); }
  .tr .tr-rv { padding: 16px 16px 36px; }
  .tr .tr-rv > .tr-ex { left: 18px; bottom: 12px; }
  .tr .tr-zm { padding: 16px; }
  .tr .tr-fl > span { font-size: 14px; padding: 10px 12px; }
  .tr .tr-tgl { font-size: 14px; flex-wrap: wrap; }
  .tr .tr-wst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr .tr-wv { padding: 16px 16px 38px; border-radius: 18px; }
  .tr .tr-wp > .tr-ex { bottom: -26px; }
  .tr .tr-pvw { min-height: 340px; }
  .tr .tr-pvw .tr-wd { width: 250px; right: 14px; bottom: 84px; }
  .tr .tr-wa, .tr .tr-wc { font-size: 14px; }
  .tr .tr-bb { padding: 16px; }
  .tr .tr-bb--test .tr-wd, .tr .tr-wd--sm { max-width: none; margin-top: 16px; }
  .tr .tr-tpg b { font-size: var(--t-h3); }
  .tr .tr-tpg p { font-size: var(--t-sub); }
  .tr .tr-tpg .ln { display: inline; }
  .tr .tr-bt { padding: 10px 12px; gap: 8px; }
  .tr .tr-bt span { font-size: 12.5px; padding: 6px 10px; }
  .tr .tr-ai3s { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .tr .tr-ai3n { width: 28px; height: 28px; font-size: 13px; }
  .tr .tr-ai3c { padding: 12px 14px; }
  .tr .tr-cta { padding: 72px 0; }
  .tr .tr-cta-h { font-size: var(--t-h2); }
  .tr .tr-cta-d { font-size: var(--t-lead); }
  .tr .tr-cta-d .ln { display: inline; }
  .tr .tr-cbtn .d-btn { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .tr .tr-pol-list { grid-template-columns: minmax(0, 1fr); }
  .tr .tr-pols { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}
@media (max-width: 560px) {
  .tr .tr-ws .tr-fi { display: none; }
  .tr .tr-ws { padding: 12px 14px; }
  .tr .tr-ws b { font-size: var(--t-body); }
}
@media (prefers-reduced-motion: reduce) {
  .tr .tr-typing i, .tr .tr-steps li, .tr .tr-chips .tr-hint, .tr .tr-pol.is-ask { animation: none; opacity: 1; transform: none; }
  .tr .tr-pol, .tr .tr-rot-track, .tr .tr-sl, .tr .tr-dots button::before, .tr .tr-ws, .tr .tr-ws-d, .tr .tr-wp, .tr .tr-wdh, .tr .tr-lau { transition: none; }
  .tr .tr-fly { display: none; }
}

/* 회원가입 카드(결정 81) — 브랜드 주소 값 굵게 · 버튼은 회원가입 화면과 같은 브랜드색 */
.tr .tr-f > span b { font-weight: 700; color: var(--ink); }
.tr .tr-mk-btn--brand { background: var(--brand); }
/* 1단계 회원가입 카드 = 실제 회원가입 폼 모양(결정 96) — 흰 바탕 + 1px 테두리, 부품은 shared/signup-form.css */
.tr .tr-mk--signup { gap: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5ea; }
.tr .tr-mk--signup .su-sub { margin: 4px 0 0; }
.tr .tr-mk--signup .su-f input { padding: 11px 13px; cursor: default; pointer-events: none; }
.tr .tr-mk--signup .su-pre input { padding-left: 2px; }
.tr .tr-mk--signup .su-tos { margin-top: auto; padding-top: 14px; }
.tr .tr-mk--signup .su-tos-l input { pointer-events: none; }
.tr .tr-mk--signup .su-btn { margin-top: 0; }

/* 시작하는 순서 — 빈자리 채우기(2026-10-12): 설정 카드 아래 저장 줄 · 운영 시작 카드 채팅 머리줄 · 오늘 요약 */
.tr .tr-sv { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #e3e5ea; font-size: 13.5px; color: var(--ink-3); }
.tr .tr-sv i { flex: none; padding: 10px 16px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 14px; font-style: normal; font-weight: 700; }
.tr .tr-rch { justify-content: flex-start; }
.tr .tr-rch-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 10px; border-bottom: 1px solid #eceef1; font-size: 13px; }
.tr .tr-rch-h b { font-weight: 700; } .tr .tr-rch-h span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #1f7a4a; }
.tr .tr-rch-h span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22a35a; }
.tr .tr-rsum { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.tr .tr-rsum p { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--ai-soft); }
.tr .tr-rsum b { font-size: 24px; line-height: 1.1; color: var(--ai); } .tr .tr-rsum span { font-size: 12.5px; font-weight: 600; color: var(--ai); }
.tr .tr-rsum p.hu { background: #fbe7ef; } .tr .tr-rsum p.hu b, .tr .tr-rsum p.hu span { color: var(--brand-deep); }
/* 모바일(2026-10-12): 채팅창 설정 칸 사이 빈 줄 없애기 — 가장 긴 패널 높이에 맞춰 늘어나던 행을 위로 붙임 */
@media (max-width: 1100px) { .tr .tr-set { align-content: start; } .tr .tr-wv { min-height: 0; } .tr .tr-wp:not(.is-on) { display: none; } }   /* 모바일: 보이는 패널 높이만큼만 */
/* 마지막 CTA 설명 — 모바일만 두 문장 두 줄 */
@media (max-width: 760px) { .tr .tr-cta-d .ln { display: block; } }

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 토큰(type.css)을 안 쓰는 고정 크기만 여기서 줄임 */
@media (max-width: 600px) {
  html body.tr .tr-pol-list .tr-pol .tr-pol-d { font-size: 13px; }
  html body.tr .tr-zr .tr-zh .tr-zd, html body.tr .tr-side .tr-log .tr-empty { font-size: 13.5px; }
  html body.tr .tr-ft div b, html body.tr .tr-ws .tr-ws-tx b, html body.tr .tr-pol-list .tr-pol .tr-pol-t, html body.tr .tr-chat-head .tr-chat-who b, html body.tr .tr-gs .tr-ln .tr-bub { font-size: 14px; }
  html body.tr .tr-zr .tr-zh h3, html body.tr .tr-sl .tr-sl-head h3 { font-size: 16px; }
  html body.tr .tr-set .tr-sf .tr-wt { font-size: 16px; }
}

/* 2026-10-12: 설치 화면 높이를 줄인 뒤 '테스트 화면' 채팅창 위가 잘리던 것 — 이 화면에서만 첫 인사 버튼 줄을 빼고 채팅창을 90%로, 채팅창이 다 들어갈 높이 확보 */
@media (min-width: 1101px) {
  .tr .tr-bb--test { min-height: 392px; }
  .tr .tr-bb--test .tr-wch { display: none; }
  .tr .tr-bb--test .tr-wd { right: 20px; bottom: 20px; transform: scale(.9); transform-origin: 100% 100%; }
}

/* 2026-10-12: 대화 아이콘 = 카톡처럼 이름 줄 옆 위쪽(서비스 · 도움말과 같게), 꼬리는 묶음 첫 말풍선 위 모서리 */
.tr .tr-row--a { align-items: flex-start; }
.tr .tr-row--a .tr-ln .tr-bub { border-radius: 16px; }
.tr .tr-row--a:not(.is-cont) .tr-ln .tr-bub { border-top-left-radius: 4px; }
.tr .tr-row--c .tr-bub { border-radius: 16px; border-top-right-radius: 4px; }
/* 점 버튼 누르는 범위 위아래 넓힘(보이는 크기 그대로, 2026-10-12 점검) */
.tr .tr-dots button { position: relative; } .tr .tr-dots button::after { content: ""; position: absolute; inset: -8px -2px; }


/* 체험 정리(2026-10-12, 시안 _review/trial-v2 적용) — A 정책은 제목 + 한 줄만(답에 쓰이면 펼침, 눌러도 펼침) · B 예시 질문을 주제별로 묶음(어느 정책을 쓰는지 같이) · C 오른쪽 설명 문단 짧게 */
.tr .tr-pol { padding: 11px 14px; cursor: pointer; }
.tr .tr-pol-t { font-size: 14.5px; }
.tr .tr-pol-s { margin-top: 2px; font-size: 13px; line-height: 1.5; color: #9aa0aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .tr-pol-d { display: none; }
.tr .tr-pol.is-hit .tr-pol-s, .tr .tr-pol.is-open .tr-pol-s { display: none; }
.tr .tr-pol.is-hit .tr-pol-d, .tr .tr-pol.is-open .tr-pol-d { display: block; }
.tr .tr-pol-t::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid #7d838d; border-bottom: 1.6px solid #7d838d; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.tr .tr-pol.is-open .tr-pol-t::after, .tr .tr-pol.is-hit .tr-pol-t::after { transform: rotate(-135deg) translateY(-1px); }
.tr .tr-pol-list { gap: 6px; }
/* B 예시 질문 = 주제 탭(배송 · 교환·반품 · 가격) + 고른 주제의 질문만 한 줄, 오른쪽에 어느 정책으로 답하는지 */
.tr [data-chips].is-grouped { display: block; }
.tr .tr-qt { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.tr .tr-qt button { height: 30px; padding: 0 12px; border-radius: 999px; background: none; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tr .tr-qt button.is-on { background: var(--ink); color: #fff; }
.tr .tr-qt small { margin-left: auto; font-size: 12px; color: #80858f; }
.tr .tr-qt small b { color: var(--ai); font-weight: 700; }
.tr .tr-qc { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; }
.tr .tr-qc button[hidden] { display: none; }
/* C 오른쪽 — 질문 전에도 네 단계(문의 이해 · 근거 찾기 · 주문 확인 · 결정)를 흐린 틀로 미리 보여 줌, 질문하면 그 자리가 채워짐. 지킨 원칙 글씨도 밝게 */
.tr .tr-ghost { position: relative; display: grid; gap: 18px; padding-left: 4px; }
.tr .tr-ghost::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: #2c2f37; }
.tr .tr-ghost li { position: relative; display: flex; align-items: center; gap: 12px; }
.tr .tr-ghost i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #23262d; box-shadow: inset 0 0 0 2px #3a3e47; }
.tr .tr-ghost b { font-size: 14px; font-weight: 600; color: #8b919b; }
.tr .tr-ghost span { margin-left: auto; width: 42%; height: 9px; border-radius: 99px; background: #23262d; animation: tr-gh 1.8s ease-in-out infinite; }
.tr .tr-ghost li:nth-child(2) span { animation-delay: .2s; } .tr .tr-ghost li:nth-child(3) span { animation-delay: .4s; } .tr .tr-ghost li:nth-child(4) span { animation-delay: .6s; }
@keyframes tr-gh { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.tr .tr-ghost-k { margin-top: 16px; font-size: 13px; color: #9aa0aa; }
.tr .tr-cks li { color: #c4c8d0; }
.tr .tr-log .tr-empty--ghost { padding: 0; background: none; }

/* 운영하면서 더 다듬어요 — 줄 구분(2026-10-12): 지그재그는 그대로, 줄마다 제목 묶음을 위 한 줄로(왼쪽 위 빈 구멍 없앰) + 01~04 번호 + 줄 사이 가는 선 */
@media (min-width: 1101px) {
  .tr .tr-refine { counter-reset: trzr; }
  .tr .tr-zr { counter-increment: trzr; grid-template-areas: "h h" "f v"; row-gap: 24px; padding: 48px 0; }
  .tr .tr-zr--rev { grid-template-areas: "h h" "v f"; }
  .tr .tr-zr + .tr-zr { border-top: 1px solid #e6e8ec; }
  .tr .tr-zh { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .tr .tr-zh::before { content: counter(trzr, decimal-leading-zero); grid-row: 1 / span 3; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #d5d8de; }
  .tr .tr-zh > * { grid-column: 2; }
  .tr .tr-zh > .tr-zk { justify-self: start; }
  .tr .tr-zh::before { min-width: 52px; }
}
@media (max-width: 1100px) {
  .tr .tr-refine { counter-reset: trzr; }
  .tr .tr-zr { counter-increment: trzr; }
  .tr .tr-zr + .tr-zr { border-top: 1px solid #e6e8ec; }
  .tr .tr-zk::before { content: counter(trzr, decimal-leading-zero) " · "; }
}

/* 시작하는 순서 1단계 '회원가입' 예시 화면 — 실제 가입 페이지 글자 크기(제목 22 · 입력 16)를 그대로 써서 카드 제목만큼 커 보이던 것 → 예시 화면 크기로(다른 단계 예시와 같은 13~15)(2026-10-12) */
.tr .tr-mk--signup .su-h2 { font-size: 17px; }
.tr .tr-mk--signup .su-sub { margin: 4px 0 14px; font-size: 13.5px; }
.tr .tr-mk--signup .su-f { gap: 5px; }
.tr .tr-mk--signup .su-f label, .tr .tr-mk--signup .su-f label em { font-size: 12.5px; }
.tr .tr-mk--signup .su-f input, .tr .tr-mk--signup .su-pre-k { font-size: 14px; }
.tr .tr-mk--signup .su-f input { padding-top: 10px; padding-bottom: 10px; }
.tr .tr-mk--signup .su-tos-l { font-size: 13px; }
.tr .tr-mk--signup .su-btn { min-height: 44px; font-size: 14.5px; }
@media (max-width: 600px) {
  .tr .tr-mk--signup .su-h2 { font-size: 15.5px; }
  .tr .tr-mk--signup .su-sub { font-size: 12.5px; }
  .tr .tr-mk--signup .su-f input, .tr .tr-mk--signup .su-pre-k { font-size: 13.5px; }
  .tr .tr-mk--signup .su-tos-l { font-size: 12.5px; }
  .tr .tr-mk--signup .su-btn { font-size: 14px; }
}
@media (max-width: 600px) { .tr .tr-mk--signup .tr-g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .tr .tr-mk--signup .tr-su-head + .tr-g2 > :first-child { grid-column: 1 / -1; } .tr .tr-mk--signup .su-f input { padding: 9px 11px; } .tr .tr-mk--signup .su-pre input { padding-left: 2px; } }   /* 예시 화면은 두 칸 그대로(세로 길이 줄임), 브랜드 주소 칸 안 여백은 그대로 */

/* 시작하는 순서 예시 화면 글자 — 모바일(600 이하) 다섯 장 같은 단계(2026-10-12): 머리줄 14 · 항목 이름 13.5 · 말풍선 13 · 보조 글은 그대로(12~12.5). 카드 제목(16)보다 항상 작게 */
@media (max-width: 600px) {
  .tr .tr-sl .tr-mk .tr-mk-h { font-size: 14px; }
  .tr .tr-sl .tr-mk b { font-size: 13.5px; }
  .tr .tr-sl .tr-mk .tr-rsum b { font-size: 20px; }   /* 오늘 요약 숫자는 크게 그대로 */
  .tr .tr-sl .tr-mk .tr-mb { font-size: 13px; }
  .tr .tr-sl .tr-mk--signup .su-h2 { font-size: 14px; }
  .tr .tr-sl .tr-mk--signup .su-f input, .tr .tr-sl .tr-mk--signup .su-pre-k, .tr .tr-sl .tr-mk--signup .su-btn { font-size: 13px; }
}
/* 시작하는 순서: 설명 → 카드 간격을 규칙(32)대로 — 넘김 칸 위 여백 8이 더해져 40이던 것(모바일 2026-10-12) */
@media (max-width: 760px) { .tr .tr-rot-stage { padding-top: 0; } }
/* 대화는 위에서부터 쌓임(2026-10-12) — 아래에 붙여 두니 첫 인사 위로 빈 칸이 크게 보이던 것. 길어지면 스크롤(맨 아래로 따라감) */
.tr .tr-msgs > :first-child { margin-top: 0; }
/* 모바일 체험 대화창(2026-10-12): 대화가 위에서부터 쌓이니 처음엔 아래가 비어 보이던 것 → 대화 칸 높이 380 → 300(길어지면 스크롤) · 마무리 떠오르는 대화는 글 뒤에서 더 옅게 */
@media (max-width: 760px) { .tr .tr-msgs { height: 300px; } }
@media (max-width: 1279px) { .tr .tr-fly { opacity: .09; } }