/* ============================================================================
   event.css — 대회·이벤트 한 장 페이지(/Event/{slug}) 와 인쇄용 안내문(/Event/{slug}/guide)

   ⭐ 두 화면이 **같은 본문 파셜**(_GuideSections.cshtml)을 쓰기 때문에 본문 스타일은
      반드시 여기 한 곳에만 둔다. 한쪽 뷰에 인라인으로 넣으면 다른 쪽에서 통째로 무너진다.

   ⚠ 색은 :root 기준(라이트)으로 먼저 정의하고, 다크에서 값만 바꾼다.
      다크 블록 안에서만 정의된 색은 라이트에서 존재하지 않아 글자가 사라진다.
   ⚠ site.css 에 `section { padding: 80px 0 }` 전역 규칙이 있다. 이 안의 <section> 은
      전부 클래스로 padding 을 되돌려 놓았다 — 새 <section> 을 넣을 때도 잊지 말 것.
   ============================================================================ */

.ev, .eg {
    --ev-grad: linear-gradient(135deg, #4560e8 0%, #6b4fe0 52%, #8348dc 100%);
    --ev-grad-ended: linear-gradient(135deg, #64748b, #475569);
    --ev-accent: var(--ro-primary-700, #4359c9);
    --ev-card: var(--ro-surface, #fff);
    --ev-line: var(--ro-border, #e6eaf1);
    --ev-soft: var(--ro-surface-alt, #f6f8fc);
    --ev-text: var(--ro-text, #131722);
    --ev-sub: var(--ro-text-sub, #5c6678);
}

/* ── 바깥 틀 ──────────────────────────────────────────────────────── */
.ev { max-width: 760px; margin: 0 auto; padding: 16px 16px 56px; color: var(--ev-text); }

/* ── 히어로 ───────────────────────────────────────────────────────── */
/* 2026-08-19: 세로로 쌓아 올려 첫 화면을 통째로 먹던 것을 **가로 배치**로 바꿨다.
   마스코트를 옆으로 빼고, 카운트다운을 큰 상자 4개에서 한 줄 칩으로 압축해
   높이를 약 530px → 200px 안쪽으로 줄였다. 들어오자마자 본문이 보이게 하는 것이 목적. */
.ev-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 22px;
    color: #fff; background: var(--ev-grad); box-shadow: 0 14px 34px rgba(69, 96, 232, .28); }
.ev-hero.ended { background: var(--ev-grad-ended); box-shadow: 0 14px 30px rgba(71, 85, 105, .24); }
.ev-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 4%, rgba(255, 255, 255, .24), transparent 46%),
                radial-gradient(circle at 6% 96%, rgba(255, 255, 255, .12), transparent 42%); }
.ev-hero > * { position: relative; z-index: 1; }

.ev-hero-in { display: flex; align-items: center; gap: 18px; }
.ev-hero-body { flex: 1 1 auto; min-width: 0; }

.ev-banner { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.ev-hero.banner { padding: 0; }

.ev-mascot { flex: 0 0 auto; display: block; width: auto; height: 86px;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .22)); animation: evBob 3s ease-in-out infinite; }
@keyframes evBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 상태와 기간을 한 줄로 — 예전엔 각각 한 줄씩 차지했다. */
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-bottom: 7px; }
.ev-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800;
    padding: 4px 11px; border-radius: 999px; background: rgba(0, 0, 0, .18); }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: evPulse 1.5s infinite; }
@keyframes evPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
.ev-period { font-size: 12.5px; font-weight: 600; opacity: .95; }

.ev-title { font-size: clamp(20px, 3.4vw, 29px); font-weight: 900; letter-spacing: -.7px;
    line-height: 1.2; margin: 0 0 3px; word-break: keep-all; }
.ev-sub { font-size: 13px; font-weight: 600; opacity: .95; word-break: keep-all; }

/* 카운트다운·신청 버튼·신청 수를 한 줄에 눕힌다(좁으면 자연스럽게 줄바꿈). */
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 13px; }

.ev-cd { display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 14px; border-radius: 12px;
    background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .16); }
.ev-cd-lbl { font-size: 11.5px; font-weight: 700; opacity: .95; white-space: nowrap; }
.ev-cd b { display: inline-flex; align-items: baseline; gap: 2px; font-size: 19px; font-weight: 900;
    letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ev-cd b small { font-size: 10.5px; font-weight: 700; opacity: .9; letter-spacing: 0; }
/* 🐞🐞 **웹뷰에서 카운트다운 숫자가 뭉개져 보였다**(2026-08-20 사용자 제보).
   원인은 여기 있던 `transform: scale(1 → 1.14 → 1)` 이다 —
   **초가 바뀔 때마다** 이 애니메이션이 붙는데, 글자에 transform 을 걸면 브라우저가 그 글자를
   별도 레이어로 떼어 **한 번 그린 비트맵을 확대**한다. 데스크톱에선 티가 덜 나지만
   안드로이드 웹뷰에서는 눈에 띄게 흐릿해진다(1초마다 반복되니 계속 그 상태다).
   → 크기를 건드리지 말고 **색만 번쩍**인다. 글자는 매번 또렷하게 다시 그려진다.
   ⚠ 숫자·글자에 scale 애니메이션을 다시 넣지 말 것. */
.ev-cd b span.bmp { animation: evBmp .45s ease; }
@keyframes evBmp { 0%, 100% { color: inherit; } 35% { color: #fff3c4; } }

/* 일정 미정·종료 안내 — 예전의 큰 상자를 카운트다운과 같은 높이의 한 줄 칩으로 바꿨다. */
.ev-flag { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; line-height: 1.5;
    padding: 8px 14px; border-radius: 12px; word-break: keep-all;
    background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .16); }

.ev-cnt { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: #fff;
    background: rgba(0, 0, 0, .18); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }

.ev-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14.5px; font-weight: 800; text-decoration: none; color: #4359c9; background: #fff;
    padding: 11px 22px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
    transition: transform .15s ease, box-shadow .15s ease; }
.ev-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); color: #4359c9; }
.ev-cta.kakao { background: #fee500; color: #191600; }
.ev-cta.kakao:hover { color: #191600; }

/* 배너를 쓴 대회 — 배너 아래에 붙는 제목 줄 */
.ev-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 2px 2px; }
.ev-under .ev-title { flex: 1 1 100%; color: var(--ev-text); }
.ev-under .ev-pill { background: var(--ev-soft); color: var(--ev-text); }
.ev-under .ev-period { color: var(--ev-sub); }
.ev-under .ev-cta { margin-left: auto; color: #fff; background: var(--ev-accent); }
.ev-under .ev-cta.kakao { background: #fee500; color: #191600; }

/* ── 바로가기 막대 (스티키) ───────────────────────────────────────── */
/* 헤더가 sticky 라 top:0 이면 그 아래로 말려 들어간다 — 헤더 높이만큼 내린다. */
.ev-nav { position: sticky; top: var(--ro-header-h, 64px); z-index: 15; margin: 14px -16px 0; padding: 9px 16px;
    background: color-mix(in srgb, var(--ev-card) 88%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ev-line); }
.ev-nav-in { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ev-nav-in::-webkit-scrollbar { display: none; }
.ev-nav a { flex: 0 0 auto; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    color: var(--ev-sub); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ev-line); background: var(--ev-card); }
.ev-nav a:hover { color: var(--ev-accent); border-color: var(--ev-accent); }
.ev-nav a.on { color: #fff; background: var(--ev-accent); border-color: var(--ev-accent); }

/* ── 요약표 ───────────────────────────────────────────────────────── */
.eg-facts { display: grid; grid-template-columns: max-content 1fr; margin: 18px 0 24px;
    border: 1px solid var(--ev-line); border-radius: 16px; overflow: hidden; background: var(--ev-card); }
.eg-facts dt { padding: 12px 18px; font-size: 13px; font-weight: 800; color: var(--ev-text);
    background: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 8%, var(--ev-card)); border-bottom: 1px solid var(--ev-line); }
.eg-facts dd { margin: 0; padding: 12px 18px; font-size: 14px; color: var(--ev-text); border-bottom: 1px solid var(--ev-line); }
.eg-facts dt:last-of-type, .eg-facts dd:last-of-type { border-bottom: 0; }

/* ── 본문 섹션 (두 화면 공용) ─────────────────────────────────────── */
.eg-sec { padding: 0; margin-bottom: 30px; scroll-margin-top: calc(var(--ro-header-h, 64px) + 60px); }
.eg-h2 { display: flex; align-items: baseline; gap: 9px; font-size: 17.5px; font-weight: 800; letter-spacing: -.3px;
    color: var(--ev-text); margin: 0 0 13px; padding-bottom: 9px;
    border-bottom: 2px solid color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 30%, var(--ev-card)); }
.eg-h2 .no { font-size: 13px; font-weight: 900; color: var(--ev-accent); }
.eg-p { font-size: 15px; line-height: 1.85; color: var(--ev-text); margin: 0 0 12px; word-break: keep-all; }
.eg-p:last-child { margin-bottom: 0; }

.eg-list { list-style: none; margin: 0; padding: 0; }
.eg-list li { position: relative; padding: 0 0 0 20px; margin-bottom: 10px; font-size: 14.5px;
    line-height: 1.8; color: var(--ev-text); word-break: keep-all; }
.eg-list li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--ro-primary-500, #5b7cfa); }
.eg-list li:last-child { margin-bottom: 0; }

.eg-mails { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.eg-mail { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; text-decoration: none;
    background: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 8%, var(--ev-card));
    border: 1px solid color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 22%, var(--ev-card)); }
.eg-mail .lb { font-size: 11.5px; font-weight: 800; color: var(--ev-accent); }
.eg-mail .ad { font-size: 14px; font-weight: 700; color: var(--ev-text); word-break: break-all; }

/* ── 부가 연락처 ───────────────────────────────────────────────────
   신청 수단(폼·카카오)과 헷갈리지 않게 한 단계 낮춰 그린다 — 버튼이 아니라 '참고 정보'. */
.eg-contact { margin-top: 16px; padding: 13px 15px; border-radius: 13px;
    background: var(--ev-soft); border: 1px solid var(--ev-line); }
/* ⚠ --ev-sub 는 surface-alt 위에서 4.36:1 로 기준(4.5)에 못 미친다(실측) — 본문 색을 쓴다. */
.eg-contact-t { font-size: 12px; font-weight: 800; color: var(--ev-text); letter-spacing: -.1px; margin-bottom: 9px; }
.eg-contact-list { display: flex; flex-wrap: wrap; gap: 7px 9px; }
.eg-contact-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px;
    text-decoration: none; font-size: 13px; font-weight: 700; color: var(--ev-text);
    background: var(--ev-card); border: 1px solid var(--ev-line); word-break: break-all; }
.eg-contact-item:hover { border-color: var(--ev-accent); color: var(--ev-accent); }
/* 아이콘은 글자 색을 그대로 따른다 — --ev-sub 로 두면 다크에서 2.63:1 까지 떨어진다(실측). */
.eg-contact-item svg { flex: 0 0 auto; color: inherit; opacity: .75; }

/* 카카오 노란색은 어느 테마에서도 같은 색이라 글자를 검정으로 고정한다. */
.eg-kakao { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px;
    text-decoration: none; font-size: 14.5px; font-weight: 800; background: #fee500; color: #191600;
    border: 1px solid rgba(0, 0, 0, .08); }
.eg-kakao:hover { filter: brightness(.96); color: #191600; }

.eg-callout { color: var(--ev-text); border-radius: 14px; padding: 16px 18px;
    background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 9%, var(--ev-card));
    border: 1px solid color-mix(in srgb, var(--ro-warn-500, #f59e0b) 26%, var(--ev-card)); }
.eg-callout-t { font-size: 13px; font-weight: 800; color: var(--ro-warn-700, #a4620a); margin-bottom: 8px; }
.eg-callout .eg-list li::before { background: var(--ro-warn-500, #f59e0b); }

/* ── 시상표 ───────────────────────────────────────────────────────── */
.eg-prize-wrap { overflow-x: auto; }
.eg-prize { width: 100%; border-collapse: collapse; border: 1px solid var(--ev-line); border-radius: 14px; overflow: hidden; }
.eg-prize th { font-size: 13px; font-weight: 800; padding: 12px 16px; text-align: left; color: var(--ev-text);
    background: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 10%, var(--ev-card)); border-bottom: 1px solid var(--ev-line); }
.eg-prize td { font-size: 14px; padding: 13px 16px; color: var(--ev-text); border-bottom: 1px solid var(--ev-line); vertical-align: top; }
.eg-prize tr:last-child td { border-bottom: 0; }
.eg-prize td.rk { font-weight: 800; white-space: nowrap; width: 150px; }
.eg-prize tr.top td.rk { color: var(--ev-accent); }
.eg-prize th.im, .eg-prize td.im { width: 96px; padding: 10px 12px; }
.eg-prize td.im img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ev-line); display: block; }

/* 좁은 화면에서 사진 칸이 표를 밀어내지 않게 */
@media (max-width: 560px) {
    .eg-prize th.im, .eg-prize td.im { width: 60px; padding: 8px; }
    .eg-prize td.im img { width: 44px; height: 34px; }
    .eg-prize td.rk { width: auto; }
    .eg-prize th, .eg-prize td { padding: 10px 11px; font-size: 13px; }
}

/* ── 순위·수상자 줄 ───────────────────────────────────────────────── */
.eg-rank { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 14px;
    margin-bottom: 8px; background: var(--ev-soft); border: 1px solid var(--ev-line); }
.eg-rank.top { background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 10%, var(--ev-card));
    border-color: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 28%, var(--ev-card)); }
.eg-rank .r { min-width: 30px; text-align: center; font-size: 19px; font-weight: 800; color: var(--ev-sub); }
.eg-rank .n { font-size: 15px; font-weight: 700; color: var(--ev-text); }
.eg-rank .v { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--ev-accent); font-variant-numeric: tabular-nums; }

/* ── 맺음말 · 버튼 묶음 ───────────────────────────────────────────── */
.eg-closing { margin-top: 34px; padding: 26px 22px; border-radius: 20px; text-align: center;
    background: var(--ev-soft); border: 1px solid var(--ev-line); }
.eg-closing-t { font-size: 16px; font-weight: 800; color: var(--ev-text); margin-bottom: 16px; word-break: keep-all; }
.eg-cta { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.eg-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; text-decoration: none;
    padding: 12px 20px; border-radius: 12px; background: var(--ev-accent); color: #fff; border: 1px solid transparent; }
.eg-btn:hover { filter: brightness(1.08); color: #fff; }
.eg-btn.ghost { background: var(--ev-card); color: var(--ev-text); border-color: var(--ev-line); }
.eg-btn.ghost:hover { border-color: var(--ev-accent); color: var(--ev-accent); filter: none; }

.eg-foot { font-size: 12.5px; line-height: 1.9; color: var(--ev-sub); text-align: center; margin: 26px 0 0; }
.eg-note { font-size: 13px; line-height: 1.7; color: var(--ev-sub); }

/* ── 좁은 화면 ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ev { padding: 12px 14px 48px; }
    .ev-nav { margin: 12px -14px 0; padding: 8px 14px; }
    .ev-hero { border-radius: 18px; padding: 16px 16px; }
    .ev-hero-in { gap: 13px; }
    .ev-mascot { height: 68px; }
    .ev-actions { margin-top: 11px; gap: 7px; }
    .ev-cd, .ev-flag, .ev-cnt { padding: 6px 11px; }
    .ev-cd { gap: 7px; }
    .ev-cd b { font-size: 17px; }
    .ev-cta { padding: 10px 18px; font-size: 14px; }
    .eg-facts dt, .eg-facts dd { padding: 11px 13px; font-size: 13.5px; }
}

/* 아주 좁은 화면 — 마스코트가 글자 자리를 잡아먹지 않게 한 단계 더 줄인다.
   신청 버튼은 가로로 꽉 채워 엄지로 누르기 쉽게.
   ⚠ '시작까지' 라벨은 숨기지 않는다 — 숫자만 남으면 무엇까지 남은 시간인지 알 수 없다.
     320px 에서도 칩이 들어갈 자리가 있는 것을 확인했다. */
@media (max-width: 400px) {
    .ev-mascot { height: 56px; }
    .ev-hero-in { gap: 11px; }
    .ev-cd { gap: 2px 6px; padding: 6px 10px; flex-wrap: wrap; }
    /* 한 줄에 다 안 들어가면 어차피 넘어간다 — 넘어간 티가 나지 않게 라벨에게 한 줄을 준다. */
    .ev-cd-lbl { flex: 1 1 100%; font-size: 11px; }
    .ev-cd b { font-size: 16px; }
    .ev-cta { width: 100%; }
}

/* ── 앱 웹뷰 ──────────────────────────────────────────────────────── */
/* 앱은 자체 헤더를 쓰므로 웹 헤더가 없다 → 바로가기 막대를 맨 위에 붙인다. */
body.ron-webview .ev-nav { top: 0; }
body.ron-webview .eg-sec { scroll-margin-top: 60px; }

/* ── 인쇄 ─────────────────────────────────────────────────────────── */
@media print {
    .ev-nav, .ev-cta, .eg-cta, .ev-cnt, .ev-cd { display: none !important; }
    .ev, .eg { max-width: none; padding: 0; }
    .ev-hero { box-shadow: none; border-radius: 0; }
    .eg-sec, .eg-closing, .eg-prize { break-inside: avoid; }
    /* 링크 뒤에 (주소)를 붙이는 인쇄 규칙이 있어, 눌러야만 뜻이 있는 버튼은 지운다. */
    .eg-kakao { display: none !important; }
}

/* ── 붙임: 참가 준비 안내 (_EventPrepAttach) ──────────────────────── */
/* ⭐ 이 블록은 한 장 페이지와 인쇄용 안내문이 **둘 다** 쓴다.
      예전엔 Guide.cshtml 안에만 있어서, 파셜을 다른 화면에 넣으면 통째로 민무늬가 됐다. */
/* ── 붙임 ─────────────────────────────────────────────── */
.eg-attach { color: var(--ro-text); margin-top: 34px; padding: 26px 22px; border-radius: 20px; background: var(--ro-surface-alt); border: 1px solid var(--ro-border); }
.eg-attach-head { margin-bottom: 20px; }
.eg-attach-tag { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px;
    background: var(--ro-primary-800); color: #fff; }
.eg-attach-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin: 10px 0 5px; color: var(--ro-text); }
@* --ro-text-sub 는 surface-alt 위에서 4.36:1 로 기준(4.5)에 못 미쳐 본문 색을 쓴다(실측). *@
.eg-attach-head p { font-size: 13.5px; color: var(--ro-text); margin: 0; line-height: 1.7; }
.eg-prep { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.eg-prep-col { background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 14px; padding: 16px 17px; }
.eg-prep-t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); margin-bottom: 12px; }
.eg-prep-t b { color: var(--ro-primary-700); }
.eg-prep-s { margin-bottom: 11px; }
.eg-prep-s:last-child { margin-bottom: 0; }
.eg-prep-sh { font-size: 13px; font-weight: 800; color: var(--ro-text); margin-bottom: 2px; }
.eg-prep-no { font-size: 10.5px; font-weight: 900; letter-spacing: .6px; color: var(--ro-primary-700); margin-right: 5px; }
.eg-prep-s p { font-size: 12.5px; line-height: 1.65; color: var(--ro-text-sub); margin: 0; word-break: keep-all; }
.eg-check { margin-top: 16px; background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 14px; padding: 16px 17px; }
.eg-check-t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); margin-bottom: 11px; }
.eg-check-t b { color: var(--ro-primary-700); }
.eg-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eg-check li { font-size: 12.5px; font-weight: 600; color: var(--ro-text); padding: 7px 13px 7px 28px; border-radius: 999px;
    background: var(--ro-surface-alt); border: 1px solid var(--ro-border); position: relative; }
.eg-check li::before { content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px;
    border: 1.5px solid var(--ro-primary-500); border-radius: 3px; }
.eg-qr { margin-top: 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 14px; padding: 17px; }
.eg-qr-img { flex: 0 0 auto; background: #fff; border-radius: 10px; padding: 7px; line-height: 0; }
.eg-qr-img img { width: 128px; height: 128px; display: block; }
.eg-qr-body { flex: 1 1 260px; min-width: 0; }
.eg-qr-t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); margin-bottom: 5px; }
.eg-qr-body p { font-size: 13px; line-height: 1.7; color: var(--ro-text-sub); margin: 0 0 9px; word-break: keep-all; }
.eg-qr-url { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--ro-primary-700);
    background: color-mix(in srgb, var(--ro-primary-500) 10%, var(--ro-surface)); padding: 5px 11px; border-radius: 8px; }
.eg-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px; }
.eg-links span { font-size: 11.5px; color: var(--ro-text-sub); }
.eg-links b { color: var(--ro-text); margin-right: 5px; }