/* css/fix-lower.css — 11-10 저녁 독립 검토(REVIEW-FINAL) 반영 · 담당 1명 소유 · 맨 뒤에 실려 앞 규칙을 덮음(공용 파일 대신 여기에 씀) */
/* 홈 아래쪽(#how-we-work · #scope · #faq · 기록 서고 · #who-we-help · #closer) · 글 0 변화 · 배치·CSS 만. #start-now 는 css/am-go.css 끝 · 떠 있는 상담 단추는 js/framex-dock-ui.js · css/consultation-bubble.css */

/* ① 요청서 창(폰 · #how-we-work 첫 카드): 창 높이 464 고정이라 종이 아래 회색 빈 바닥이 150~170px(창의 1/3) 남던 것 → 창 높이 = 종이 + 안쪽 여백.
     폰 장면은 종이 1 이 제 창 안에서 접힌 채(28px 아래 · .94) → 펼침(am-light.css · 박 hb-b9). 그 접힘을 '줄 칸 0fr'(높이가 바뀜)로 두면
     창 높이가 종이를 따라 줄었다 늘어 아래 카드가 밀려요 → 폰에서는 칸을 늘 펼친 채로 두고 글 줄만 위에서 아래로 드러나게(clip-path · 같은 0.9초). */
@media (max-width: 767px) {
  #how-we-work .hb3-win--a { height: auto; }
  #how-we-work .hb3-win--a .hb3-in { height: auto; }
  /* 상태 칩(요청함 → 추가 자료 요청 · 폭이 늘어남)이 제목 옆 칸에 있으면 칩이 넓어질 때 제목이 한 줄 → 두 줄로 바뀌어 창 높이가 21px 늘어요
     → 폰에서는 칩을 이름표 줄 오른쪽으로 · 제목은 두 칸 너비(칩 폭과 무관하게 늘 같은 줄 수) */
  #how-we-work .hb3-win--a .hb3-slip > .hb-stc { grid-area: 1 / 2 / 2 / 3; align-self: start; margin-top: 10px; }
  #how-we-work .hb3-win--a .hb3-slip > .r { grid-area: 2 / 1 / 3 / -1; padding-right: 16px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.anim .hb.hb3.is-armed .hb3-win--a .hb3-slip[data-slip="1"], html.anim .hb.hb3.is-armed:not(.hb-b9) .hb3-win--a .hb3-slip[data-slip="1"] { grid-template-rows: auto auto 1fr; }   /* 둘째 선택자 = am-light 접힘 규칙과 같은 무게(뒤에 실려 이김) */
  html.anim .hb.hb3.is-armed .hb3-win--a .hb3-slip[data-slip="1"] > .hb3-doc { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--e-arrive, cubic-bezier(.25, .8, .25, 1)), opacity .45s ease; }
  html.anim .hb.hb3.is-armed:not(.hb-b9) .hb3-win--a .hb3-slip[data-slip="1"] > .hb3-doc { clip-path: inset(0 0 100% 0); opacity: 0; }
}

/* ② 계약 조건과 한계(#scope · 768 이상): 카드 넷을 가장 긴 '쓰지 않는 수단'(칩 6줄) 높이 368 로 늘려 셋이 아래 절반 넘게 비던 것
     → 12칸 벽돌(위 5 | 7 · 아래 7 | 5 · 768~1023 아래 8 | 4) — '쓰지 않는 수단'이 넓어져 칩이 두 줄로, 짧은 글 카드는 좁아져 줄 높이가 맞음(안쪽 여백 뺀 빈 바닥 0~34px · 예전 최대 218). 글 0 변화. */
@media (min-width: 768px) {
  html #scope.hb4-prom { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  html #scope.hb4-prom > li:nth-child(1) { grid-column: span 5; }
  html #scope.hb4-prom > li:nth-child(2) { grid-column: span 7; }
  html #scope.hb4-prom > li:nth-child(3) { grid-column: span 7; }
  html #scope.hb4-prom > li:nth-child(4) { grid-column: span 5; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html #scope.hb4-prom > li:nth-child(3) { grid-column: span 8; }
  html #scope.hb4-prom > li:nth-child(4) { grid-column: span 4; }
}

/* ③ 기록 서고(.hb-ar): 머리줄·카드 줄만 화면 양끝 20px 까지 차서 위아래 구간(본문 폭 1080 · 1440 에서 180~1260)과 왼쪽 선이 최대 400px 어긋나던 것
     → 같은 본문 폭 틀. 카드 줄은 가로로 넘기는 판이라 폭 대신 안쪽 여백으로(넘길 때 카드가 화면 끝까지 흐르는 건 그대로) · 카드 폭 = 본문 폭 ÷ 4. 폰(70% 카드)은 그대로. */
.hb.hb-ar { --ar-w: max(264px, calc((min(100cqw - 2 * var(--al-g), 1080px) + 24px) / 4)); }   /* 1080 틀 = 카드 276 넷이 꼭 맞음(예전 바닥 288 이면 넘쳐 넘김 단추가 생김) · 1023 이하는 예전처럼 넘김 */
.hb.hb-ar .al-ar-h { padding-left: max(var(--al-g), calc((100% - 1080px) / 2)); padding-right: max(var(--al-g), calc((100% - 1080px) / 2)); }
.hb.hb-ar .al-ar-list { padding-left: max(var(--al-g), calc((100% - 1080px) / 2)); padding-right: max(var(--al-g), calc((100% - 1080px) / 2)); scroll-padding-inline: max(var(--al-g), calc((100% - 1080px) / 2)); }
@media (max-width: 767px) { .hb.hb-ar { --ar-w: 70cqw; } }

/* ④ 밝은 구간 세리프 제목의 점 등장(board-ui ④ · 제목 위끝 74% 선)이 같은 구간 덩어리 등장(am-light ③ · 91% 선)보다 늦어,
     768 에서 #scope 머리는 오른쪽 부제·아래 카드가 먼저 보이고 큰 제목 '계약 조건과 한계' 자리만 빈 채 머물던 것(6초 기다려도 그대로)
     → 기다리는 동안(.am-dots-on)만 제목 상자를 위로 17vh 늘려(안쪽 여백 + 같은 크기 음수 바깥 여백 = 자리 0 변화) 점 등장 선을 91% 로 맞춤.
       늘린 자리가 위 내용 누름을 가로채지 않게 그동안만 pointer-events 0 · 등장이 끝나면 board-ui 가 .am-dots-on 을 걷어 원래대로. */
@media (prefers-reduced-motion: no-preference) {
  html.anim :is(.hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5) .hb-h.am-dots-on, html.anim .hb.hb-ar .al-ar-t.am-dots-on { padding-top: 17vh; margin-top: -17vh; pointer-events: none; }
}

/* ⑤ 자주 묻는 질문 왼쪽 '…질문 더 보기 →'가 '보기 →'만 다음 줄로 떨어지던 것(1024 이상 · 칸 폭 216~250)
     → 줄 폭을 14em 으로 잡아 '디지털장의사 비용·합법성·한계 질문 / 더 보기 →'로 끊음(1024~1920 실측 · 1000 이하는 한 줄 그대로).
       (text-wrap: balance 는 크롬이 가운뎃점 앞에서도 끊어 '·한계 …'로 둘째 줄이 가운뎃점부터 시작해 안 씀) */
@media (min-width: 1024px) { #faq .hb4-more .hb-lnk { max-width: 14em; } }

/* ⑥ 마무리(#closer · 1024 이상): 본문 폭이 1260 이라 왼쪽 선(1440 에서 90 · 다른 구간 180)과 오른쪽 검토 판 끝(1920 에서 1590 · 다른 구간 1500)이 어긋나던 것 → 같은 1080 틀 */
@media (min-width: 1024px) {
  #closer .au-close { width: min(1080px, 100%); max-width: 1080px; }
  #closer.au-closing > .closer { max-width: 1080px; }
}
/* 좌우 바깥 여백도 다른 구간과 같은 --al-g(768 에서 40 → 30 · 850 에서 40 → 35 · 1024 이상 40 그대로 · 폰 20 그대로) */
#closer.au-closing { padding-left: var(--al-g, 40px); padding-right: var(--al-g, 40px); }
/* ⑦ 검토 판 '01 · 02 · 03' 10px 흐린 글 → 11.5px · 한 단 밝게(#203b30 바탕 대비 7.9:1) */
#closer .au-signal-sources i { font-size: 11.5px; color: #c9d6cc; }
/* ⑧ 768~900: 검토 판 흰 카드가 좁아 '대상 · 근거 · 요청 경로'가 '대상 · 근거 / · 요청 경로'(둘째 줄이 가운뎃점부터)로 꺾이던 것 → 카드 폭 48% · 안쪽 16 */
@media (min-width: 768px) and (max-width: 900px) {
  #closer .au-signal-file { width: 48%; padding: 16px; }
}

/* ⑨ 의뢰 대상 설명 줄(폰): '개인' 줄이 360 에서 '…올라온 사진 / ·영상'(둘째 줄이 가운뎃점부터) · 375 에서 '사진· / 영상'으로 꺾이던 것 → 그 줄만 두 줄 균형
     ('악성 댓글 · 사칭 계정 · / 동의 없이 올라온 사진·영상') · 나머지 줄은 끝줄 한 낱말 막기(390~414 '…검색에 남은 / 기록' · 320 '…평점 / 훼손' → '검색에 / 남은 기록' · '평점 훼손') */
#who-we-help .who4 a > span { text-wrap: pretty; }
#who-we-help .who4 li:first-child a > span { text-wrap: balance; }