/* css/say-real.css — 11-10 사장님 "저 카드 존나 리얼하지가 않음 · 삭제된 걸 리얼하게 · 세로 좀 키워라" → 같은 날 "이게 실화냐"(지워진 뒤 화면이 텅 빔 · 좁은 폭에서 글이 꺾임)
   큰 문장 구간(#everywhere) 카드 묶음 1~4 = 진짜 사이트처럼 보이는 화면(검색 결과 · 게시판 · 포럼 · 지도 리뷰 · 영상 · SNS · 요청서) + 지워진 뒤 상태.
   2판 원칙: ① 지워진 뒤에도 화면이 꽉 참(바뀌는 것은 한 줄·한 칸뿐) ② 쪽 내용은 창 아래로 넘쳐 잘림(빈 바닥 0) ③ 카드가 좁고 길어지지 않게 폭별 배치(가운데 폭 = 둘만 온전히 · 셋째는 가장자리에 걸침)
   ④ 화면 속 배치는 카드 폭 기준(@container · .say-c 가 size 컨테이너) — 뷰포트 폭이 아니라 카드가 실제로 받은 폭에 맞춤.
   묶음이 켜지면(.say-slide.is-live · js/am-say.js) 한 번: 대상에 주황 테 + 우리 요청 이름표 → 글이 빠지고 → 그 자리에 플랫폼의 안내. 묶음이 화면 밖으로 다 나가면 처음(지우기 전)으로.
   전부 가상 예시(가게 이름 · 주소 .example · 로고·사진 0 · 칩 '가상 예시'). 글은 생성기가 x-t(CSS 글자)로 바꿔 검색 본문 밖.
   글자 크기는 em(카드 폭에 맞춰 .rl 의 font-size 하나로 통째로 커지고 줄어듦). 무대 덱(css/theater.css .th-card)이 .rl-win/.rl-res/.rl-post 등을 같이 씀 — 이름·기본 모양 유지. */

/* ── 카드 틀 · 폭별 배치 · 높이 ── */
#everywhere .say-c.rl-c { background: var(--bg, #1c2928); box-shadow: inset 0 0 0 1px #ffffff14; }
/* 가운데 폭(768~1279) = 넓은 카드 + 폰 카드가 온전히 · 셋째는 오른쪽 가장자리에 걸침.
   fix-r1: 1180~1279 도 이 배치(세 장을 한 줄에 다 넣느라 카드·글이 1000 폭보다 작아지던 것 — 1180 에서 큰 카드 432px·글 11px). 세 장이 한 줄에 다 들어가는 배치는 1280 부터. */
@media (min-width: 768px) and (max-width: 1279px) {
  .say-slide { flex: 0 0 auto; grid-template-columns: calc(var(--say-w) * .58) calc(var(--say-w) * .28) calc(var(--say-w) * .58); aspect-ratio: auto; height: clamp(400px, 54vw, 480px); }
}
@media (max-width: 767px) { .say-slide { grid-template-columns: var(--say-w) 236px var(--say-w); height: 440px; } }
@media (min-height: 560px) {
  /* 구간 자체 여백은 0(붙는 판 .say-pin 이 여백을 가짐) — 여백이 남아 있으면 판이 붙기 전에 스크롤이 먼저 흘러 첫 묶음이 금방 밀려남 */
  html.say-on #everywhere.hb-say { padding-top: 0; padding-bottom: 0; }
  html.say-on .say-pin { gap: clamp(20px, 4.4vh, 52px); padding: 92px 0 36px; }
  html.say-on .say-wrap { flex: none; }
  html.say-on body #everywhere .say-t { font-size: clamp(34px, min(4.3vw, 6.4vh), 64px); line-height: 1.2; }
  html.say-on .say-strip { flex: 1 1 auto; min-height: 0; max-height: 520px; margin-top: 0; }
  html.say-on .say-track { height: 100%; }
  html.say-on .say-slide { aspect-ratio: auto; height: 100%; }
}
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 560px) { html.say-on .say-strip { max-height: min(520px, 62vw); } }
/* fix-r1(h2-say-wide-05): 가운데 폭 고정 판도 카드 띠가 오른쪽 아래 주황 상담 단추(62px · 바닥에서 24px 또는 홈 표시줄 위) 자리 위에서 끝남 — 가장자리에 걸친 셋째 카드 글을 단추가 덮던 것(1000·1180 × 800 에서 50px 겹침).
   잃는 카드 세로를 줄이려고 위 여백 92→84 · 제목과 띠 사이 4.4vh→3.6vh. 세로가 넉넉한 화면(768x1024 · 850x900)은 가운데 맞춤이라 카드 크기 그대로. */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 560px) {
  html.say-on .say-pin { gap: clamp(20px, 3.6vh, 52px); padding: 84px 0 max(96px, calc(env(safe-area-inset-bottom, 0px) + 72px)); }
}
/* fix-r1: 768 이상에서 폰 그림은 카드 세로에 맞춰 폭을 정함(진짜 폰 비율 ≈ 1 : 2 유지) — 가운데 폭이 1279 까지 넓어져 폰 카드가 넓고 낮아지면 폰이 1 : 1.6 로 뭉툭해지던 것(1180x800 253x409).
   폰(767 이하)은 그대로(폭을 줄이면 글이 좁은 칸에서 꺾여요). */
@media (min-width: 768px) { #everywhere .rl-phone { width: min(86cqw, 22em, 46cqh); } }
/* fix-r1: 큰 문장 마디(밝게 켜지는 덩어리)가 줄 사이에서 갈리지 않게(1180·1440 에서 '검색과 / 커뮤니티에서.' · '어바웃어스는 / 언어의 장벽이…') — 768 이상은 마디마다 한 줄 안(줄 수 3 그대로 · 잰 값 768~1920).
   폰은 마디가 한 줄보다 길어 그대로 흐름. */
@media (min-width: 768px) and (min-height: 560px) { html.say-on body #everywhere .say-t > span { display: inline-block; } }
/* 폰 고정 판: 카드 띠가 오른쪽 아래 주황 상담 단추(62px · 바닥에서 24px 또는 홈 표시줄 위) 자리 위에서 끝남(아래 여백 ≥ 98px) */
@media (max-width: 767px) and (min-height: 560px) {
  html.say-on .say-pin { gap: 18px; padding: 68px 0 max(98px, calc(env(safe-area-inset-bottom, 0px) + 74px)); }
  html.say-on body #everywhere .say-t { font-size: clamp(23px, 6.7vw, 30px); line-height: 1.24; }
  html.say-on .say-strip { max-height: 580px; }
}

/* ── 화면 공통 ── */
.rl { position: absolute; inset: 0; overflow: hidden; font-family: var(--au-text, system-ui, sans-serif); font-size: 12px; font-size: clamp(11px, 2.5cqw, 13px); font-weight: 400; line-height: 1.45; letter-spacing: -.012em; color: #1d2125; text-align: left; -webkit-font-smoothing: antialiased; }
.rl :where(p, ul, ol, dl, dt, dd, small, b, i, em) { margin: 0; padding: 0; list-style: none; font-style: normal; font-weight: inherit; }
.rl small { display: block; font-size: inherit; }
.rl-ic { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rl-win { position: absolute; left: 6%; right: 6%; top: clamp(38px, 10%, 52px); bottom: -3%; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em 1em 0 0; background: #fff; box-shadow: 0 0 0 1px rgb(16 27 27 / .1), 0 2.4em 4em -1.6em rgb(0 0 0 / .6); }
.rl-bar { flex: none; display: flex; align-items: center; gap: .42em; height: 2.55em; padding: 0 .9em; border-bottom: 1px solid #e3e5e8; background: #f1f2f3; }
.rl-bar > i { flex: none; width: .62em; height: .62em; border-radius: 50%; background: #cdd1d6; }
.rl-url { flex: 1; min-width: 0; height: 1.7em; margin-left: .6em; padding: 0 .85em; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8; color: #5b626a; font-size: .86em; line-height: 1.7em; white-space: nowrap; text-overflow: ellipsis; }
.rl-pg { flex: 1; min-height: 0; overflow: hidden; }
.rl-av { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--c, #667); color: #fff; font-size: .85em; font-weight: 700; }
.rl-chip { flex: none; display: inline-flex; align-items: center; height: 1.95em; padding: 0 .85em; border-radius: 999px; box-shadow: inset 0 0 0 1px #c9ced4; color: #6a7178; font-size: .86em; font-weight: 600; line-height: 1; white-space: nowrap; }
.rl-chip.on { box-shadow: inset 0 0 0 1px #1d2125; color: #1d2125; }
.rl-chip.or { box-shadow: inset 0 0 0 1px #f75b2b; color: #b4532a; }
.rl-fl { display: flex; gap: .5em; overflow: hidden; }
/* 그림 자리(영상 표지 · 게시물 그림): 납작한 색 타일이 아니라 빛이 드는 면 */
.rl-thumb, .rl-mini, .rl-card { background: var(--c, #555); background: radial-gradient(130% 100% at 12% 0%, rgb(255 255 255 / .2), transparent 54%), linear-gradient(155deg, color-mix(in srgb, var(--c, #555) 84%, #fff), var(--c, #555) 46%, color-mix(in srgb, var(--c, #555) 56%, #000)); }

/* ── 대상 표시 · 요청 이름표 · 지워짐(공통 장치) ── */
.rl-t { position: relative; }
.rl-t::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: .6em; background: rgb(247 91 43 / .07); box-shadow: inset 0 0 0 1.5px #f75b2b; opacity: 0; pointer-events: none; }
.rl-tag { position: absolute; z-index: 3; right: .7em; top: .7em; display: inline-flex; align-items: center; height: 1.95em; padding: 0 .85em; border-radius: 999px; background: #f75b2b; color: #101b1b; font-size: .88em; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 .5em 1.1em -.4em rgb(247 91 43 / .7); opacity: 0; }
/* 접히며 바뀜(.rl-sw): 앞(.rl-b)이 높이 0 으로 접히고 뒤(.rl-a · 플랫폼 안내)가 펴짐 — 칸 높이 = 격자 줄(1fr ↔ 0fr)이라 글 길이와 상관없이 정확 */
.rl-sw > .rl-b, .rl-sw > .rl-a { display: grid; grid-template-rows: 1fr; }
.rl-sw > .rl-b > div, .rl-sw > .rl-a > div { min-width: 0; min-height: 0; overflow: hidden; }
.rl-sw > .rl-a { grid-template-rows: 0fr; opacity: 0; }
/* 겹쳐 바뀜(.rl-st): 같은 자리에서 앞이 사라지고 뒤가 나타남 */
.rl-st { display: grid; }
.rl-st > :is(.rl-b, .rl-a) { grid-area: 1 / 1; min-width: 0; }
.rl-st > .rl-a { opacity: 0; }
.rl-sys { display: flex; align-items: center; gap: .6em; color: #6a7178; font-size: .92em; line-height: 1.45; }
.rl-sys::before { content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 .13em #9aa1a9; background: linear-gradient(#9aa1a9, #9aa1a9) 50% 62% / .13em .36em no-repeat, radial-gradient(circle at 50% 27%, #9aa1a9 .08em, transparent .09em); }
.rl-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; padding: 1em; background: #121517; background: radial-gradient(90% 120% at 50% 42%, #23282c, #0d0f11 78%); color: #e4e7ea; text-align: center; }
.rl-off > .rl-ic { width: 2.9em; height: 2.9em; margin-bottom: .35em; color: #9aa1a9; stroke-width: 1.2; }
.rl-off > p { font-size: 1.14em; font-weight: 600; letter-spacing: -.02em; }
.rl-off > small { color: #8b929a; font-size: .86em; line-height: 1.45; }
.rl-off.rl-lt { background: #f0f1f3; color: #1d2125; }
.rl-off.rl-lt > small, .rl-off.rl-lt > .rl-ic { color: #7a828a; }
/* fix-r1: 장면은 카드 단위(.say-c.is-live · js/am-say.js) — 넓은 화면은 묶음의 카드 셋이 같이 · 폰은 머무는 카드 한 장만 */
@media (prefers-reduced-motion: no-preference) {
  html.anim .hb-say.is-seen .say-c.is-live .rl-t::before { animation: rl-hl 3.6s both; }
  html.anim .hb-say.is-seen .say-c.is-live .rl-tag { animation: rl-tag 3.6s both; }
  html.anim .hb-say.is-seen .say-c.is-live .rl-sw > .rl-b { animation: rl-out .62s 2.1s both cubic-bezier(.4, 0, .2, 1); }
  html.anim .hb-say.is-seen .say-c.is-live .rl-sw > .rl-a { animation: rl-in .66s 2.32s both cubic-bezier(.22, 1, .36, 1); }
  html.anim .hb-say.is-seen .say-c.is-live .rl-st > .rl-b { animation: rl-fade .45s 2.1s both ease; }
  html.anim .hb-say.is-seen .say-c.is-live .rl-st > .rl-a { animation: rl-show .55s 2.4s both cubic-bezier(.22, 1, .36, 1); }
  html.anim .hb-say.is-seen .say-c.is-live .rl-dim { animation: rl-dim .5s 2.2s both ease; }
  html.anim .hb-say.is-seen .say-c.is-live .rl-ll > li { animation: rl-show .5s both cubic-bezier(.22, 1, .36, 1); animation-delay: calc(var(--i, 0) * 90ms + .2s); }
}
/* fix-r1 이름표 자리: 글 위에 얹지 않음(이름표 밑에서 글이 말줄임 없이 잘리거나 '1' 한 조각만 삐져나오던 것)
   ① 목록 칸(검색 결과 · 폰 게시글 · 포럼 글 · 연관 검색어 · 리뷰 · 계정) = 대상 테 위쪽 선에 걸쳐 오른쪽에 띄움(윗줄 글과 대상 글 사이 빈 줄 높이 안)
   ② 게시판 줄 = 줄 안 오른쪽 그대로 · 이름표가 뜨는 동안 그 밑 칸(글쓴이 · 날짜 · 조회)이 먼저 흐려짐(곧 '삭제된 게시물입니다'와 '-'로 바뀜)
   ③ 그림(영상 · SNS 게시물) = 그림 위 오른쪽 위 그대로. top·right 는 이름표 글자 기준 em(부모의 .88배). */
#everywhere .rl-res > li.rl-t { padding-top: 1.15em; }
#everywhere .rl-post.rl-t { padding-top: 1.3em; }   /* 폰 게시글: 테 위쪽 선에 걸친 이름표 아래와 글 제목 사이 여유(768 폰 카드 10.3px 에서 이름표 밑이 제목 윗선에 닿던 것) */
#everywhere :is(.rl-res, .rl-sg, .rl-rv, .rl-ac) > li.rl-t > .rl-tag, #everywhere :is(.rl-post, .rl-th).rl-t > .rl-tag { bottom: auto; margin-top: -.975em; }
#everywhere .rl-res > li.rl-t > .rl-tag { top: .17em; right: .35em; }
#everywhere .rl-post.rl-t > .rl-tag { top: .4em; right: 1.4em; }
#everywhere .rl-th.rl-t > .rl-tag { top: .34em; right: 1.5em; }
#everywhere .rl-sg > li.rl-t > .rl-tag { top: 0; right: 1.45em; }
#everywhere .rl-rv > li.rl-t > .rl-tag { top: .23em; right: .3em; }
#everywhere .rl-ac > li.rl-t > .rl-tag { top: -.05em; right: .3em; margin-top: -.975em; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .hb-say.is-seen .say-c.is-live .rl-rows > li.rl-t > .rl-b > span:nth-child(n+3) { animation: rl-under 3.6s both; }
}
@keyframes rl-under { 0%, 19% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes rl-hl { 0%, 18% { opacity: 0; } 25%, 57% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes rl-tag { 0%, 21% { opacity: 0; transform: translateY(.45em) scale(.96); } 28%, 57% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: translateY(-.3em); } }
@keyframes rl-out { to { grid-template-rows: 0fr; opacity: 0; } }
@keyframes rl-in { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes rl-fade { to { opacity: 0; } }
@keyframes rl-show { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes rl-dim { to { opacity: .34; } }
/* 움직임 없음(모션 줄이기 · JS 꺼짐 = html.anim 없음): 지워진 뒤 상태를 그대로 보여 줌 */
html:not(.anim) .rl-sw > .rl-b { display: none; }
html:not(.anim) .rl-sw > .rl-a { grid-template-rows: 1fr; opacity: 1; }
html:not(.anim) .rl-st > .rl-b { opacity: 0; }
html:not(.anim) .rl-st > .rl-a { opacity: 1; }
html:not(.anim) .rl-dim { opacity: .34; }

/* ── 검색 결과 ── */
.rl-sh { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.3em .85em; }
.rl-brand { color: #1d2125; font-size: 1.5em; font-weight: 700; letter-spacing: -.045em; }
.rl-q { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 2.6em; padding: 0 1em 0 1.15em; border-radius: 999px; box-shadow: inset 0 0 0 1px #d5d9de, 0 1px 3px rgb(0 0 0 / .06); font-size: 1.05em; white-space: nowrap; }
.rl-q > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-q > .rl-ic { color: #5b626a; }
.rl-tabs { display: flex; gap: 1.5em; padding: 0 1.4em; overflow: hidden; border-bottom: 1px solid #e6e8eb; color: #5b626a; font-size: .95em; white-space: nowrap; }
.rl-tabs > span { flex: none; padding: .5em 0 .6em; }
.rl-tabs > .on { color: #1d2125; font-weight: 600; box-shadow: inset 0 -2px 0 #1d2125; }
.rl-res { padding: .35em 1.4em 0; }
.rl-res > li { padding: .8em 0 .7em; }
.rl-res > li.rl-t::before { inset: .15em -.75em; }
.rl-site { display: flex; align-items: center; gap: .5em; overflow: hidden; color: #3d444b; font-size: .9em; white-space: nowrap; }
.rl-site > em { min-width: 0; overflow: hidden; color: #7a828a; text-overflow: ellipsis; }
.rl-fav { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c, #667); color: #fff; font-size: .8em; font-weight: 700; }
.rl-tt { margin-top: .25em; overflow: hidden; color: #1b4fbf; font-size: 1.22em; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.rl-sn { display: -webkit-box; margin-top: .2em; overflow: hidden; color: #4a5158; font-size: .95em; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── 게시판 목록 ── */
.rl-bh, .rl-fh { display: flex; align-items: center; gap: 1.3em; height: 2.9em; padding: 0 1.3em; overflow: hidden; border-bottom: 1px solid #e6e8eb; color: #5b626a; font-size: .95em; white-space: nowrap; }
.rl-bh > *, .rl-fh > * { flex: none; }
.rl-bh > b, .rl-fh > b { margin-right: .4em; color: #1d2125; font-size: 1.28em; font-weight: 700; letter-spacing: -.035em; }
.rl-bh > .on, .rl-fh > .on { color: #1d2125; font-weight: 600; }
.rl-rw { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 5.8em 3.4em 3.4em; align-items: center; column-gap: .6em; min-height: 2.72em; padding: 0 1.3em; white-space: nowrap; }
.rl-rw > span { overflow: hidden; color: #5b626a; font-size: .92em; text-overflow: ellipsis; }
.rl-rw > span:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.rl-rw > .tt { display: flex; gap: .45em; color: #1d2125; font-size: 1em; }
.rl-rw > .tt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-rw > .tt > em { flex: none; color: #b4532a; font-size: .9em; font-weight: 600; }
.rl-bt { min-height: 2.25em; border-bottom: 1px solid #e6e8eb; background: #f6f7f8; }
.rl-bt > span, .rl-bt > span:nth-child(2) { color: #7a828a; font-size: .86em; }
.rl-rows > li { position: relative; border-bottom: 1px solid #eef0f2; }
.rl-rows > li.rl-t::before { inset: .12em .45em; }
.rl-rows .rl-tag { top: .42em; right: 1em; }
.rl-del > .tt > span { color: #9aa1a9; }
.rl-del > span { color: #b6bcc3; }
@container (max-width: 540px) {
  .rl-rw { grid-template-columns: minmax(0, 1fr) 5.6em 3.4em 3.4em; }
  .rl-rw > span:nth-child(1) { display: none; }
}
@container (max-width: 400px) {
  .rl-rw { grid-template-columns: minmax(0, 1fr) 3.3em; }
  .rl-rw > span:nth-child(3), .rl-rw > span:nth-child(5) { display: none; }
}

/* ── 해외 포럼 ── */
.rl-th { display: flex; gap: 1em; padding: 1.05em 1.3em .9em; border-bottom: 1px solid #eef0f2; }
.rl-th.rl-t::before { inset: .3em .5em; }
.rl-vote { flex: none; display: flex; flex-direction: column; align-items: center; gap: .32em; width: 2.2em; color: #3d444b; font-size: .9em; font-weight: 600; }
.rl-vote > i { width: 0; height: 0; border: .42em solid transparent; border-top-width: 0; border-bottom-color: #9aa1a9; }
.rl-vote > i:last-child { transform: rotate(180deg); }
.rl-thb { flex: 1; min-width: 0; }
.rl-fm { color: #7a828a; font-size: .86em; }
.rl-ft { margin-top: .25em; font-size: 1.3em; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.rl-fb { margin-top: .5em; color: #3d444b; line-height: 1.55; }
.rl-rm { display: flex; flex-direction: column; gap: .2em; align-self: start; margin-top: .5em; color: #7a828a; }
.rl-rm > b { color: #1d2125; font-weight: 600; }
.rl-fa { display: flex; gap: 1.2em; margin-top: .7em; color: #5b626a; font-size: .86em; font-weight: 600; white-space: nowrap; }
.rl-cbox { display: flex; align-items: center; height: 2.7em; margin: .9em 1.3em .2em; padding: 0 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px #d5d9de; color: #9aa1a9; font-size: .95em; }
.rl-fc { padding: 0 1.3em; }
.rl-fc > li, .rl-vc > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7em; padding: .72em 0; }
.rl-fc > li { border-bottom: 1px solid #eef0f2; }
.rl-fc p, .rl-vc p { display: flex; flex-direction: column; gap: .12em; min-width: 0; color: #3d444b; line-height: 1.5; }
.rl-fc b, .rl-vc b { color: #1d2125; font-size: .88em; font-weight: 600; }

/* ── 지도 리뷰 ── */
.rl-ph { padding: 1.05em 1.3em 0; border-bottom: 1px solid #e6e8eb; }
.rl-ph > b { display: block; font-size: 1.45em; font-weight: 700; letter-spacing: -.03em; }
.rl-ph > span { display: block; margin-top: .1em; color: #7a828a; font-size: .9em; }
.rl-tabs2 { display: flex; gap: 1.5em; margin-top: .75em; color: #5b626a; font-size: .95em; white-space: nowrap; }
.rl-tabs2 > span { padding-bottom: .55em; }
.rl-tabs2 > .on { color: #1d2125; font-weight: 600; box-shadow: inset 0 -2px 0 #1d2125; }
.rl-ph + .rl-fl { padding: .8em 1.3em .1em; }
.rl-rv { padding: 0 1.3em; }
.rl-rv > li { position: relative; padding: .9em 0 .85em; border-bottom: 1px solid #eef0f2; }
.rl-rv > li.rl-t::before { inset: .2em -.7em; }
.rl-rh { display: flex; align-items: center; gap: .55em; white-space: nowrap; }
.rl-rh > b { min-width: 0; overflow: hidden; font-size: .95em; font-weight: 600; text-overflow: ellipsis; }
.rl-rh > em { margin-left: auto; color: #9aa1a9; font-size: .84em; }
.rl-stars { flex: none; display: inline-flex; gap: .12em; margin-left: .2em; }
.rl-stars > i { width: .95em; height: .95em; background: #e8a020; clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 58%, 79% 93%, 50% 72%, 21% 93%, 32% 58%, 3% 36%, 39% 36%); }
.rl-stars[data-n="1"] > i:nth-child(n+2), .rl-stars[data-n="4"] > i:nth-child(n+5) { background: #d9dde2; }
.rl-rb { margin-top: .45em; color: #3d444b; line-height: 1.55; }

/* ── 영상(어두운 화면) — 기본 = 한 기둥(화면 → 제목 → 채널 → 다음 영상) · 카드가 넓으면(540 이상) 두 기둥(왼쪽 화면·댓글 / 오른쪽 다음 영상) ── */
.rl-dk { background: #0f1112; color: #eceef0; }
.rl-dk .rl-bar { border-color: #272b30; background: #191c1f; }
.rl-dk .rl-bar > i { background: #3a3f45; }
.rl-dk .rl-url { background: #0f1112; box-shadow: inset 0 0 0 1px #2a2e33; color: #a9b0b8; }
.rl-vd { display: flex; flex-direction: column; gap: 1.1em; padding: 1em 1.1em; }
.rl-vm { min-width: 0; }
.rl-player { aspect-ratio: 16 / 9; overflow: hidden; border-radius: .7em; background: #000; }
.rl-player.rl-t::before { border-radius: .7em; }
.rl-thumb { position: relative; display: grid; place-items: center; }
.rl-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .24em; background: linear-gradient(90deg, #f75b2b 31%, rgb(255 255 255 / .28) 0); }
.rl-thumb > b { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 1.65em; font-weight: 700; line-height: 1.16; letter-spacing: -.04em; text-align: center; text-shadow: 0 .08em .4em rgb(0 0 0 / .35); }
.rl-thumb > b > span:last-child { color: #ffd34d; font-size: 1.3em; }
.rl-dur { position: absolute; right: .6em; bottom: .75em; padding: .12em .45em; border-radius: .3em; background: rgb(0 0 0 / .8); color: #fff; font-size: .82em; font-weight: 600; }
.rl-vt { margin-top: .8em; font-size: 1.12em; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.rl-ch { display: flex; align-items: center; gap: .7em; margin-top: .7em; white-space: nowrap; }
.rl-ch > p { display: flex; flex-direction: column; min-width: 0; }
.rl-ch b { font-size: .95em; font-weight: 600; }
.rl-ch p > span { color: #9aa1a9; font-size: .84em; }
.rl-subb { flex: none; margin-left: auto; padding: .45em 1.1em; border-radius: 999px; background: #eceef0; color: #0f1112; font-size: .9em; font-weight: 600; }
.rl-vdesc, .rl-vc { display: none; }
.rl-vdesc { margin-top: .9em; padding: .75em .9em; border-radius: .7em; background: #1d2124; font-size: .92em; line-height: 1.5; }
.rl-vdesc > b { display: block; font-weight: 600; }
.rl-vdesc > span { color: #c3c8ce; }
.rl-vc { margin-top: .5em; }
.rl-vc p { color: #c3c8ce; }
.rl-vc b { color: #eceef0; }
.rl-vs { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.rl-vs > li { display: grid; grid-template-columns: 10.4em minmax(0, 1fr); gap: .8em; }
.rl-mini { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5em; color: #fff; font-weight: 700; white-space: nowrap; }
.rl-mini > span { font-size: 1.05em; letter-spacing: -.03em; text-shadow: 0 .08em .4em rgb(0 0 0 / .35); }
.rl-mini > em { position: absolute; right: .35em; bottom: .35em; padding: .08em .38em; border-radius: .28em; background: rgb(0 0 0 / .8); font-size: .74em; font-weight: 600; }
.rl-vs p { display: flex; flex-direction: column; gap: .25em; min-width: 0; padding-top: .1em; }
.rl-vs b { display: -webkit-box; overflow: hidden; font-size: .98em; font-weight: 500; line-height: 1.38; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-vs p > span { overflow: hidden; color: #9aa1a9; font-size: .84em; white-space: nowrap; text-overflow: ellipsis; }
@container (min-width: 540px) {
  .rl-vd { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; gap: 1.2em; }
  .rl-vdesc, .rl-vc { display: block; }
  .rl-vs > li { grid-template-columns: 5.8em minmax(0, 1fr); gap: .6em; }
  .rl-mini > span { font-size: .8em; }
  .rl-mini > em { display: none; }
  .rl-vs b { font-size: .9em; }
}

/* ── SNS 계정 검색(사칭 계정) ── */
.rl-ac { padding: .3em 1.4em 0; }
.rl-ac > li { position: relative; border-bottom: 1px solid #eef0f2; }
.rl-acr { display: flex; align-items: center; gap: .85em; min-height: 4.3em; white-space: nowrap; }
.rl-ac .rl-sys { min-height: 3.3em; }
.rl-ac > li.rl-t::before { inset: .3em -.8em; }
.rl-acr > .rl-av { width: 2.9em; height: 2.9em; font-size: .95em; }
.rl-acr > p { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rl-acr b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; }
.rl-acr p > span { overflow: hidden; color: #7a828a; font-size: .88em; text-overflow: ellipsis; }
.rl-fol { flex: none; padding: .42em 1.1em; border-radius: .6em; background: #1b4fbf; color: #fff; font-size: .88em; font-weight: 600; }
.rl-ac .rl-tag { right: 0; top: 50%; margin-top: -.975em; }

/* ── 폰 화면(가운데 좁은 카드): 진짜 폰 비율(가로 1 : 세로 2.12) · 아래 탭 줄/자판/보내기 단추는 바닥에 붙음 ── */
.rl-n { font-size: 10.5px; font-size: clamp(9.5px, 5.2cqw, 11.5px); }
.rl-phone { position: absolute; left: 50%; top: 50%; width: 86%; height: 88%; width: min(86cqw, 22em); height: min(90cqh, calc(min(86cqw, 22em) * 2.12)); padding: .55em; transform: translate(-50%, -50%); border-radius: 2.4em; background: #0b0e0f; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 2.6em 4em -1.6em rgb(0 0 0 / .65); }
.rl-scr { position: relative; display: flex; flex-direction: column; height: 100%; padding-top: 2.7em; overflow: hidden; border-radius: 1.9em; background: #fff; }
.rl-scr > * { flex: none; }
.rl-scr::before { content: ""; position: absolute; z-index: 6; left: 50%; top: .6em; width: 5em; height: 1.45em; margin-left: -2.5em; border-radius: 999px; background: #0b0e0f; }
.rl-scr::after { content: ""; position: absolute; z-index: 6; left: 50%; bottom: .42em; width: 5.4em; height: .3em; margin-left: -2.7em; border-radius: 999px; background: #1d2125; }
.rl-tab, .rl-kb, .rl-send { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; }
.rl-tab { display: flex; align-items: center; justify-content: space-around; height: 4em; padding: 0 .8em 1.1em; border-top: 1px solid #e6e8eb; background: #fff; }
.rl-tab > i { width: 1.4em; height: 1.4em; border-radius: .4em; box-shadow: inset 0 0 0 .15em #a3a9b0; }
.rl-tab > i:nth-child(2), .rl-tab > i:nth-child(5) { border-radius: 50%; }
.rl-tab > i:nth-child(3) { border-radius: .4em .4em 50% 50%; }
.rl-tab > i.on { background: #1d2125; box-shadow: none; }
.rl-app { display: flex; align-items: center; gap: .65em; height: 2.9em; padding: 0 1em; border-bottom: 1px solid #eef0f2; font-size: 1.05em; font-weight: 700; white-space: nowrap; }
.rl-back { width: .6em; height: .6em; border-bottom: .14em solid #1d2125; border-left: .14em solid #1d2125; transform: rotate(45deg); }
.rl-post { padding: 1em 1em .9em; }
.rl-post.rl-t::before { inset: .35em; }
.rl-post .rl-tag { top: auto; right: .9em; bottom: .8em; }
.rl-pt { font-size: 1.25em; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.rl-pm { margin-top: .35em; color: #7a828a; font-size: .86em; }
.rl-pb { margin-top: .8em; color: #2b3036; line-height: 1.6; }
.rl-blind { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: 1.4em .8em; border-radius: .9em; background: #f3f4f5; text-align: center; }
.rl-blind > .rl-ic { width: 2em; height: 2em; color: #7a828a; stroke-width: 1.4; }
.rl-blind > p { font-weight: 700; }
.rl-blind > small { color: #6a7178; font-size: .88em; line-height: 1.5; }
.rl-olh { padding: .95em 1em .55em; border-top: .5em solid #f3f4f5; color: #5b626a; font-size: .88em; font-weight: 700; }
.rl-ol > li { display: flex; align-items: center; gap: .45em; min-height: 2.95em; padding: 0 1em; border-top: 1px solid #f1f2f3; white-space: nowrap; }
.rl-ol span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-ol em { flex: none; color: #b4532a; font-size: .86em; font-weight: 600; }
.rl-sf { display: flex; align-items: center; gap: .6em; height: 2.9em; margin: .9em .9em .5em; padding: 0 1em; border-radius: 999px; background: #f1f2f3; font-size: 1.05em; font-weight: 500; white-space: nowrap; }
.rl-sf > .rl-ic { color: #5b626a; }
.rl-sg > li { position: relative; padding: 0 1.2em; }
.rl-sgr { display: flex; align-items: center; gap: .75em; min-height: 3em; border-bottom: 1px solid #f1f2f3; white-space: nowrap; }
.rl-sg > li.rl-t::before { inset: .25em .45em; }
.rl-sg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-sg .rl-ic { width: 1em; height: 1em; color: #9aa1a9; }
.rl-sg .rl-tag { top: .55em; }
.rl-kb { display: flex; flex-direction: column; gap: .5em; padding: .55em .3em 1.75em; background: #d2d5da; }
.rl-kb > p { display: flex; justify-content: center; gap: .32em; }
.rl-kb i { flex: 1 1 0; max-width: 1.85em; height: 2.55em; display: grid; place-items: center; border-radius: .38em; background: #fff; box-shadow: 0 1px 0 #8f949b; color: #1d2125; font-size: .98em; font-weight: 500; line-height: 1; }
.rl-kb .kf { flex: 1.45 1 0; max-width: 2.7em; background: #adb2b9; font-size: .8em; }
.rl-kb .ks { flex: 5 1 0; max-width: none; }
.rl-kb .kg { flex: 2.2 1 0; max-width: 4.6em; background: #1b4fbf; box-shadow: 0 1px 0 #123a8f; color: #fff; font-size: .86em; font-weight: 600; }
.rl-sh2 { display: flex; align-items: center; gap: .6em; height: 3.3em; padding: 0 .9em; font-size: .95em; font-weight: 700; white-space: nowrap; }
.rl-sh2.rl-sep { margin-top: .5em; border-top: 1px solid #eef0f2; }
.rl-media { display: grid; aspect-ratio: 4 / 3; }
.rl-card { display: grid; place-items: center; }
.rl-card > b { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 1.55em; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; text-shadow: 0 .08em .4em rgb(0 0 0 / .35); }
.rl-card > b > span:last-child { color: #ffd34d; }
.rl-acts { display: flex; gap: .9em; padding: .8em .9em .3em; }
.rl-acts > .rl-ic { width: 1.6em; height: 1.6em; }
.rl-cap { padding: .2em .9em; line-height: 1.5; }
.rl-cap > b { margin-right: .4em; font-weight: 700; }

/* ── 폰 폭(767 이하): 넓은 카드 = 화면 폭 · 글 13px ── */
@media (max-width: 767px) {
  .rl:not(.rl-n) { font-size: 13px; }
  .rl-win { left: 12px; right: 12px; top: 42px; bottom: -10px; }
  .rl-tabs { gap: 1.25em; }
}

/* ── 묶음 4: 영문 요청서 · 일본어 신고 양식(폰) · 언어별 요청서 목록 ── */
.rl [lang="ja"], .rl[lang="ja"] { font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, sans-serif; }
.rl-doc { padding: 1.3em 1.5em; }
.rl-dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.rl-dh > span { min-width: 0; font-size: 1.4em; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.rl-dh > .rl-chip, .rl-dh > .rl-dst { margin-top: .25em; }
/* fix-r1: 상태 칩 Draft → Sent(두 칩이 같은 자리에 겹침 · 오른쪽 맞춤 · 주황 테는 칩 둘레 알약 모양) */
.rl-dst { flex: none; justify-items: end; align-items: center; }
.rl-dst.rl-t::before { inset: -.32em; border-radius: 999px; }
.rl-df { margin-top: .9em; border-top: 1px solid #e6e8eb; }
.rl-df > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: .8em; padding: .58em 0; border-bottom: 1px solid #eef0f2; }
.rl-df dt { color: #7a828a; }
.rl-dp { margin-top: .85em; color: #3d444b; line-height: 1.6; }
.rl-dl { margin-top: 1.2em; color: #7a828a; font-size: .86em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rl-de { margin-top: .4em; counter-reset: de; }
.rl-de > li { position: relative; padding: .5em 0 .5em 1.9em; border-bottom: 1px solid #eef0f2; color: #3d444b; counter-increment: de; }
.rl-de > li::before { content: counter(de); position: absolute; left: 0; top: .5em; width: 1.4em; color: #9aa1a9; font-variant-numeric: tabular-nums; }
.rl-ds { margin-top: 1.2em; color: #5b626a; font-size: .95em; }
@container (max-width: 400px) { .rl-df > div { grid-template-columns: 7.2em minmax(0, 1fr); } }
.rl-form { display: flex; flex-direction: column; padding: .4em 1em 1em; }
.rl-lb { margin-top: .85em; color: #6a7178; font-size: .86em; }
.rl-in { min-height: 2.7em; margin-top: .35em; padding: .62em .8em; border-radius: .6em; box-shadow: inset 0 0 0 1px #d5d9de; font-size: .95em; line-height: 1.5; }
.rl-ta { min-height: 6.2em; }
.rl-sel { position: relative; }
.rl-sel::after { content: ""; position: absolute; right: 1em; top: 50%; width: .5em; height: .5em; margin-top: -.42em; border-right: .13em solid #6a7178; border-bottom: .13em solid #6a7178; transform: rotate(45deg); }
.rl-file { display: flex; align-items: center; gap: .5em; color: #3d444b; }
.rl-file > .rl-ic { color: #7a828a; }
.rl-send { padding: .8em 1em 1.9em; border-top: 1px solid #eef0f2; background: #fff; }
.rl-go { place-items: center; height: 3em; overflow: hidden; border-radius: .7em; background: #1d2125; color: #fff; font-weight: 600; }
.rl-go > .rl-a { color: #ffb69c; }
.rl-lhd { padding: 1.1em 1.3em .9em; }
.rl-lhd > b { display: block; font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; }
.rl-lhd > .rl-fl { margin-top: .7em; }
.rl-ll > li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .7em 1.3em; border-top: 1px solid #eef0f2; }
.rl-ll b { font-weight: 600; white-space: nowrap; }
.rl-ll p { display: flex; flex-direction: column; min-width: 0; }
.rl-ll p > span { overflow: hidden; color: #1d2125; text-overflow: ellipsis; white-space: nowrap; }
.rl-ll p > em { overflow: hidden; color: #7a828a; font-size: .86em; text-overflow: ellipsis; white-space: nowrap; }
.rl-ll > li:nth-child(2) { --i: 1; } .rl-ll > li:nth-child(3) { --i: 2; } .rl-ll > li:nth-child(4) { --i: 3; } .rl-ll > li:nth-child(5) { --i: 4; } .rl-ll > li:nth-child(6) { --i: 5; }
.rl-ld { margin: .3em 1.3em 0; padding: 1em 1.1em 1.1em; border-radius: .9em .9em 0 0; background: #f6f7f8; box-shadow: inset 0 0 0 1px #e6e8eb; }
.rl-ldh { display: flex; align-items: baseline; gap: .7em; white-space: nowrap; }
.rl-ldh > b { font-weight: 700; }
.rl-ldh > span { color: #7a828a; font-size: .86em; }
.rl-ldt { margin-top: .5em; font-size: 1.12em; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.rl-ldp { margin-top: .4em; color: #3d444b; line-height: 1.55; }
.rl-steps { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .9em; }

/* ── fix-r1 낮은 카드(카드 높이 420 이하 = 폰 360x656·375x667 · 낮은 노트북 창 1280x720): 대상 칸이 카드 안에 보이게 그 위 칸을 덜어 냄 ──
   폰 고정 판은 아래 여백(상담 단추 자리)만큼 카드가 낮아져서, 검색 결과·리뷰의 대상이 카드 아래로 밀리고 폰 자판이 연관 검색어 대상을 가리던 것.
   쪽 내용은 그대로 아래로 이어짐(빈 바닥 0) · 넓은 카드도 같은 규칙(카드 폭이 아니라 높이 기준). */
@container (max-height: 420px) {
  #everywhere .rl-res > li:first-child:not(.rl-t) { display: none; }   /* 검색 결과 첫 칸(블로그 후기) → 대상이 첫 결과 */
  #everywhere .rl-ph + .rl-fl, #everywhere .rl-rv > li:first-child:not(.rl-t) { display: none; }   /* 리뷰 정렬 칩 줄 · 첫 리뷰 */
  #everywhere .rl-kb { display: none; }   /* 폰 자판(연관 검색어 목록이 화면 끝까지) */
  /* fix-r1: 자판을 뺀 연관 검색어 폰은 맨 아래 검색어 줄 위로 홈 표시줄(검은 막대)이 지나가 취소선처럼 보이던 것 → 표시줄 뒤를 흰색으로 흐려 줄 글이 막대 밑으로 스며 사라지게(진짜 폰 화면 결) */
  #everywhere .rl-scr:has(> .rl-sg)::after { left: 0; bottom: 0; width: 100%; height: 2.6em; margin-left: 0; border-radius: 0;
    background: linear-gradient(#1d2125, #1d2125) 50% calc(100% - .42em) / 5.4em .3em no-repeat, linear-gradient(rgb(255 255 255 / 0), #fff 58%); }
}

/* ── fix-r1(h2-say-narrow-03) 보조 글 최소 크기: 카드가 좁아 글자가 통째로 작아질 때(가운데 폭 768~1023 · 넓은 화면의 폰 카드) 주소창 · 표 머리 · 이름 아래 작은 줄 같은 보조 글이 8~9px 로 뭉개지던 것 → 10px 아래로 안 내려감.
   글자 크기만 바뀜(칸 폭·줄 높이는 부모 글자 기준 em 그대로 · 넘치면 기존 말줄임). 넓은 카드(12px 이상)는 이미 10px 넘어서 그대로. */
#everywhere .rl-url, #everywhere .rl-bt > span, #everywhere .rl-bt > span:nth-child(2), #everywhere .rl-fm, #everywhere .rl-pm, #everywhere .rl-ol em,
#everywhere .rl-ll p > em, #everywhere .rl-ldh > span, #everywhere .rl-lb, #everywhere .rl-fa, #everywhere .rl-dl, #everywhere .rl-chip { font-size: max(.86em, 10px); }
#everywhere .rl-olh, #everywhere .rl-acr p > span, #everywhere .rl-blind > small, #everywhere .rl-fc b, #everywhere .rl-vc b, #everywhere .rl-tag { font-size: max(.88em, 10px); }
#everywhere .rl-rh > em, #everywhere .rl-ch p > span, #everywhere .rl-vs p > span { font-size: max(.84em, 10px); }
#everywhere .rl-site, #everywhere .rl-ph > span { font-size: max(.9em, 10px); }
/* 동그라미·배지 속 한두 글자(사이트 첫 글자 · 프로필 첫 글자 · 영상 길이 · 자판 기능 키)는 9px 아래로 안 내려감(동그라미·배지 크기도 글자 기준 em 이라 함께 조금 커짐) */
#everywhere .rl-fav { font-size: max(.8em, 9px); }
#everywhere .rl-av { font-size: max(.85em, 9px); }
#everywhere .rl-acr > .rl-av { font-size: max(.95em, 9px); }   /* 계정 목록 큰 동그라미(.95em) 그대로 */
#everywhere .rl-mini > em { font-size: max(.74em, 9px); }
#everywhere .rl-dur { font-size: max(.82em, 9px); }
#everywhere .rl-kb .kf { font-size: max(.8em, 9px); }