/* css/legend.css — 11-10 홈 다듬기(사장님 "메인을 레전드급으로"). 글 0 변화 · 화면층만.
   정체성 판(identity-sections.css)이 표·질문·대상 목록에 한꺼번에 건 `border: 1px solid` 때문에 선이 겹치고 글이 선에 붙던 자리를 다시 짠다.
   본문 안 link(#everywhere 첫머리)라 head 의 CSS 순서는 그대로. */

/* 1) 상담 구간과 마무리 사이 검정 빈 띠(마무리 판 위 바깥 여백으로 어두운 쪽 바탕이 비침) */
html #closer.au-closing { margin-top: 0; }

/* 2) 계약 조건과 한계: 겹선 상자 → 판 넷(둥글기 16 · 안쪽 24) */
html #scope.hb4-prom { gap: 12px; border: 0; }
html #scope.hb4-prom > li, html #scope.hb4-prom > li:first-child, html #scope.hb4-prom > li:nth-child(3) { padding: 26px 24px 28px; border: 0; border-radius: 16px; background: #faf8f1; box-shadow: inset 0 0 0 1px #d4d7cc; }
html .hb.hb4 #scope .hb4-chips { gap: 6px; }
html .hb.hb4 #scope .hb4-chips li { padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px #b6c2b0; }

/* 3) 자주 묻는 질문: 줄마다 상자 → 가는 줄 */
html #faq.hb4-faq { margin-top: 44px; border: 0; }
html #faq .hb4-qs { border-left: 0; padding: 0 0 0 20px; }
html #faq .hb4-q { border: 0; border-bottom: 1px solid #d4d7cc; }
html #faq .hb4-q:first-of-type { border-top: 1px solid #d4d7cc; }
html #faq .hb4-fbtn { border: 0; border-bottom: 1px solid #d4d7cc; }

/* 4) 의뢰 대상: 상자 → 가는 줄 */
html #contact .who4 { border: 0; border-top: 1px solid #c8cec5; }
html #contact .who4 li { border: 0; border-bottom: 1px solid #c8cec5; }

@media (max-width: 1023px) {
  html #faq .hb4-qs { padding-left: 0; }
}
@media (max-width: 767px) {
  html #scope.hb4-prom { gap: 10px; }
  html #scope.hb4-prom > li, html #scope.hb4-prom > li:first-child, html #scope.hb4-prom > li:nth-child(3) { padding: 22px 20px 24px; }
}

/* 5) 무대 진입 제목 '여기서부터 어바웃어스는 다릅니다.' — 사건 재생 무대(css/theater.css)의 글 기둥과 왼끝을 맞추고 한 화면의 주인공으로(1024 이상 · 무대가 켜졌을 때만) */
@media (min-width: 1024px) {
  html.th-on #different.hb-dif { padding: clamp(96px, 15vh, 168px) 0 clamp(48px, 8vh, 96px); }
  html.th-on #different.hb-dif > .am-wrap { width: min(100% - 2 * clamp(20px, 4.4vw, 72px), 1520px); max-width: none; }
  html.th-on #different .hb-dif-t { max-width: 11em; font-size: clamp(52px, 6.4vw, 108px); line-height: 1.1; letter-spacing: -.03em; }
}

/* 6) 스크롤 따라 움직이는 두 곳(js/legend.js 가 --sp 를 넘김 · html.lg-on 일 때만)
   · 해외 사이트 창 셋: 구간이 올라오는 동안 양옆 창이 26° → 14° 로 열리고 가운데 창이 앞으로 나옴(끝 값 = 예전 그대로 · 올려 두면 반듯해지는 것도 그대로)
   · 플랫폼 이름 벽: 줄이 하나 건너 하나씩 반대로 밀림(240초 흐름 위에 얹음 · 왼쪽으로만 밀어 빈 끝이 안 보임) */
@media (min-width: 1081px) {
  html.lg-on #abroad .abr-stage { --k: clamp(0, calc((var(--sp, .5) - .1) / .34), 1); }
  html.lg-on #abroad .abr-c1 { --ry: calc(26deg - 12deg * var(--k)); --tz: calc(-120px + 80px * var(--k)); }
  html.lg-on #abroad .abr-c3 { --ry: calc(-26deg + 12deg * var(--k)); --tz: calc(-120px + 80px * var(--k)); }
  html.lg-on #abroad .abr-c2 { --tz: calc(-70px + 70px * var(--k)); }
  html.lg-on #abroad .abr-win { transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease; }
}
html.lg-on #platforms .wal-row:nth-child(odd) { translate: calc((var(--sp, .5) - 1) * 300px) 0; }
html.lg-on #platforms .wal-row:nth-child(even) { translate: calc(var(--sp, .5) * -300px) 0; }
@media (max-width: 767px) {
  html.lg-on #platforms .wal-row:nth-child(odd) { translate: calc((var(--sp, .5) - 1) * 160px) 0; }
  html.lg-on #platforms .wal-row:nth-child(even) { translate: calc(var(--sp, .5) * -160px) 0; }
}

/* 7) '그 나라 말로' 구간(#languages) 카드: 회색 막대·색 그림 자리 → 그 나라 말로 쓰인 후기(별점 · 글쓴이 · 본문). '가상 예시' 표기는 무대 것 한 벌 */
#languages .wld-shot .rv { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: rgb(23 25 27 / .6); font-size: 11.5px; }
#languages .wld-shot .rv > b { font-weight: 600; }
#languages .wld-shot .bd { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: #2b3036; font-size: 12.5px; line-height: 1.55; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
#languages .wld-card-ex { display: none; }
@media (max-width: 767px) { #languages .wld-shot .bd { font-size: 12px; -webkit-line-clamp: 3; } }

/* ── 11-10 저녁 독립 검토 반영(#languages) ──
   ① 옆 카드 덮개가 불투명 먹(#101b1b)이라 빈 검은 네모로 보이던 것 → 내용이 비치는 흐림
   ② 언어 알약이 후기 본문 위에 얹혀 글을 가리던 것(1024 이상) → 카드 아래 가운데로(11-10 밤 · 단추 줄 높이는 단추 글·신고 양식 목록을 덮어서)
   ③ 제목 2줄 · 본문은 남는 자리만큼(문장 중간에서 말줄임 없이 잘리던 것) · 일본어 제목 한 글자 꺾임 → 줄 균형
   ④ 1180 이하 신고 양식 목록이 오른쪽 아래 상담 단추 자리에 걸리던 것 */
#languages .wld-card::after { background: rgb(16 27 27 / .6); }
@media (min-width: 1024px) { #languages .wld-pill { left: 441px; top: 396px; translate: -50% 0; } }   /* 11-10 밤: 단추 줄 높이(304)에서는 프랑스어 단추 글 끝을 덮고 1024~1100 에서 신고 양식 목록 머리를 덮음 → 태블릿처럼 카드 아래 가운데(카드 바닥 372 + 24) */
#languages .wld-shot .t { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
@media (max-width: 767px) { #languages .wld-shot .t { font-size: 12.5px; } #languages .wld-shot .bd { -webkit-line-clamp: 2; } }
@media (max-width: 1180px) and (min-width: 1024px) { #languages .wld-list { right: 96px; } }
/* 일본어 제목: 'マ'·'デマ'만 둘째 줄로 꺾이던 것 */
#languages .wld-card[lang="ja"] .wld-shot .t { display: block; max-width: 8.4em; }   /* CSS 글자(x-t)에는 text-wrap:balance 가 안 먹음 → 폭으로 'ガナダベーカリー / 閉店のデマ' 에서 끊음 */