/* ─────────────────────────────────────────────────────────────
   mobile.css — 휴대폰(640px 이하) 전용. 모바일 세션(jiju-mobile) 담당.
   모든 페이지에서 style.css 다음에 media="(max-width: 640px)" 로 불러온다.
   style.css 의 640px 이하 규칙은 고칠 때마다 여기로 옮긴다(원래 자리에는 '→ mobile.css' 주석).
   페이지 전용 css(site-page·guide·law-pages·process)는 이 파일 뒤에 오므로,
   그 규칙을 덮을 때는 앞에 body 를 붙여 우선순위를 한 단계 올린다.
   ───────────────────────────────────────────────────────────── */

/* ── 1. 컨테이너 걷어내기 (v=1, 사용자 요청 2026-11-09 "과하게 닫은 것들, 좀 까게끔") ──
   휴대폰에서는 섹션 카드의 테두리·둥근 모서리·좌우 안쪽 여백을 없애 내용이 화면 폭을 쓰게 한다.
   섹션 구분은 화면 끝까지 닿는 아주 옅은 --wash 8px 띠 + 소제목.
   카드로 남기는 것: 가로로 넘기는 판례·칼럼 카드(.m-cards), 바텀시트(.m-sheet), 변호사 소개 줄(.m-lawyer), 버튼, 검색칸, 지도.

   [띠 섹션] 화면 끝까지 펴고 위에 옅은 띠 */
body .sp-sec,
body .sp-card,
body .gp-hub .gp-card,
body .lp-card,
body .search-page .s-group,
body .col-page .col-rel,
body .col-page .col-more,
body .case-grid.has-note .case-note,
body .case-grid.has-note .case-main {
  margin: 0 calc(var(--gutter) * -1);
  padding: 24px var(--gutter) 28px;
  border: 0;
  border-top: 8px solid var(--wash);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
/* 띠 섹션이 이어질 때 위 여백은 띠가 대신한다 */
body .sp-toc + .sp-sec { margin-top: 0; }
body .sp-aside { margin-top: 0; }
body .case-grid.has-note .case-note { margin-top: 20px; }
body .case-grid.has-note .case-main { padding-top: 4px; }
body .gp-hub .gp-card:first-of-type, body .lp-main > .lp-card:first-child { margin-top: 16px; }

/* [평평하게] 본문 덩어리: 테두리·여백만 없앤다(띠 없음) */
body .case-main,
body .col-body,
body .gp-card.gp-doc,
body .law-pane,
body .pf-card {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body .case-main { padding-bottom: 8px; }
body .col-body { padding-bottom: 12px; }
body .gp-card.gp-doc { padding-top: 8px; }
body .law-pane { padding-top: 6px; padding-bottom: 0; }
body .pf-card { padding-top: 18px; padding-bottom: 0; }
/* 예외(사용자 결정 2026-11-09): 솔루션 순서도 캔버스(.pf-canvas.pf-view·.pf-vport·.pf-stage)는 휴대폰에서도 테두리 있는 닫힌 칸 — 여기서 테두리·높이를 건드리지 않는다(process.css, jiju-process 몫) */
/* 판례 목록 필터: 카드 끝 대신 화면 끝까지 넘긴다 (style.css 에서 옮김) */
.law-pane .law-filters .law-filter { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }

/* 현장 페이지 속성 목록(현재 단계·모집신고·머문 기간…): 상자 대신 위아래 선 */
body .sp-facts.sp-props {
  padding: 2px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
/* 현장 페이지 지도: 띠 섹션 안에서 화면 끝까지 */
body .sp-sec .sp-nmap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }

/* 메인: 전국 현장 요약은 상자 없이(가로 카드 줄과 같은 머리 + 목록) */
.m-sites { padding: 0; border: 0; border-radius: 0; background: none; } /* style.css 에서 옮김 */
/* 메인 카드 머리 띠(오케스트레이터 v=161, style.css 에서 옮김). #cases·#process 는 휴대폰 섹션 개편(아래 5절)에서 다룬다 */
.hero-grid #quick > .quick-tabs { margin: -16px -16px 12px; padding: 14px 16px 12px; }
.hero-grid #precedents > .head { margin: -18px -18px 12px; padding: 14px 18px 12px; }

/* 메인 휴대폰 화면에서 숨기는 데스크톱 카드 (style.css 에서 옮김).
   #precedents 는 메인 것만 — law.html 판례 목록(section#precedents.law-pane)까지 숨기던 문제(UX B1) */
.hero-grid #precedents { display: none !important; }

/* ── 2. 옮겨 온 휴대폰 규칙 (style.css 에서) ── */
.case-note { padding: 20px 18px; }
.cn-one { font-size: 17px; }
.law-pane, .s-group, .col-body, .col-rel, .col-more { padding-left: 18px; padding-right: 18px; }
.law-pane { padding-top: 18px; padding-bottom: 18px; }
.case-main { padding: 0 18px 18px; }
.col-sec h2 { font-size: 18px; }
.col-sec p, .col-sec li { font-size: 15.5px; line-height: 1.85; }
.col-rel { padding: 18px; }

/* ── 3. 지도(map.html) ── */
/* 범례는 위쪽 띠로 (style.css 에서 옮김) */
.map-app .nmap-legend { top: 56px; bottom: auto; left: 12px; right: 12px; max-width: none; padding: 6px 10px; font-size: 11.5px; transition: opacity .2s ease; }
.map-app .nmap-legend b { display: none; }
/* 핀을 눌러 시트가 반·전체로 올라오면 범례를 숨긴다 — 핀 말풍선(지도 안 층)이 범례(지도 위 층) 아래로 가려지던 문제(UX U4) */
.map-app .nmap-grid:has(.panel[data-sheet="half"]) .nmap-legend,
.map-app .nmap-grid:has(.panel[data-sheet="full"]) .nmap-legend { opacity: 0; pointer-events: none; }
/* 지도 현장 시트 안 블록(진행 단계·단계 안내·판례·주변 현장): 시트가 이미 한 겹이라 상자 대신 윗선 하나.
   제목 위 20px 여백이 상자 안쪽 여백과 겹쳐 '현장 페이지 보기' 아래가 크게 비던 것도 정리(UX P8) */
.map-app .panel-detail .sd-block { margin-top: 18px; padding: 16px 0 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.map-app .panel-detail .panel-apply + .sd-block { margin-top: 20px; }
.map-app .panel-detail .sd-block h3 { margin-top: 0; }
/* 네이버 지도 저작권 표시·로고(아래 왼쪽·오른쪽 모서리, 네이버가 인라인 style 로 bottom:0 에 둠)를 아래 시트 위로.
   적법성 점검(jiju-legal) → jiju-style 이 mapDataControl 을 켬. 시트 높이는 map.js 가 --sheet-h 로 알려 주면 따라가고, 없으면 접힘 128px */
.map-app .nmap-box div[style*="z-index: 100"][style*="bottom: 0px"] { bottom: calc(var(--sheet-h, 128px) + 2px) !important; transition: bottom .35s cubic-bezier(.2, .8, .2, 1); }
/* 전국 단계 묶음(지름 22~40px, map.js v=31): 숫자·지역 이름을 줄이고 빨간 '5년 넘게' 배지는 원 바깥 오른쪽 위로 빼 숫자를 가리지 않게(UX P5) */
.nm-bubble b { font-size: 12px; letter-spacing: -.02em; }
.nm-bubble span { font-size: 9px; }
.nm-red { top: -9px; right: -11px; min-width: 16px; height: 16px; padding: 0 4px; border-width: 1.5px; border-radius: 8px; font-size: 9.5px; line-height: 13px; }
/* 휴대폰 범례 한 줄(항목 6개, jiju-style 요청): 글자·점·간격을 줄이고 줄바꿈 대신 한 줄. 아주 좁은 화면은 가로로 밀어 본다 */
.map-app .nmap-legend { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; font-size: 10.5px; letter-spacing: -.03em; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.map-app .nmap-legend::-webkit-scrollbar { display: none; }
.map-app .nmap-legend span { flex: none; gap: 3px; }
.map-app .nmap-legend i { width: 8px; height: 8px; }
/* 진행 사례(work.html·work/, jiju-content 생성) 단계 칸: 3칸씩 줄바꿈 (build-work-pages.py 인라인에서 옮김) */
.col-sec .work-stages { flex-wrap: wrap; gap: 4px; }
.col-sec .work-stages li { flex: 1 1 calc(33% - 4px); padding: 8px 4px; font-size: 12px; }

/* ── 4. 메인 가로 카드 줄: 최근 판례 쉬운 해설·새 칼럼 (v2, 사용자 2026-11-09)
   "이 디자인은 아님. 위에 '쉬운 해설' 붙인 거·태그 붙인 거는 맘에 들어" → 개편 전의 단정한 흰 카드(1px 옅은 선)로 돌아가고 정보만 더한다.
   위 줄 [쟁점 칩 ……… 쉬운 해설 →] / 제목 2~3줄 / 아래 '대법원 · 날짜' 또는 '이동언 변호사 · 날짜'. 큰 아이콘·주제색 띠·얼굴 원·그림자 없음.
   마크업은 home-m.js(jiju-style): <a class="m-card m-card-case|m-card-col t-톤"><span class="m-chip"/><b/><span class="m-foot">…<em>쉬운 해설 →</em></span></a> */
.m-cards { display: flex; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; list-style: none; }
.m-cards::-webkit-scrollbar { display: none; }
.m-cards li { flex: none; width: 82%; scroll-snap-align: start; }
.m-cards a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 156px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .12s ease, background-color .12s ease; }
.m-cards a:active { transform: scale(.98); background: var(--wash); }
.m-cards b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 15.5px; font-weight: 700; line-height: 1.55; letter-spacing: -.02em; color: var(--text); word-break: keep-all; }
.m-meta, .m-foot { font-size: 12.5px; color: var(--muted); }
.m-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.m-foot img { display: none; }
/* '쉬운 해설 →' 은 위 줄 오른쪽(칩과 같은 줄)으로 */
.m-card-case { padding-right: 18px; }
.m-card-case .m-foot em { position: absolute; top: 16px; right: 18px; display: flex; align-items: center; height: 22px; font-size: 12px; font-style: normal; font-weight: 500; color: var(--muted); }
/* 쟁점 칩: 작고 얌전하게, 모두 회색(사용자 2026-11-09 "형형색색은 빠른 메뉴 아이콘만") — t-톤 클래스는 마크업에 남아 있어도 색을 바꾸지 않는다 */
.m-chip { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #eff1f4; color: #4a4f57; font-size: 12px; font-weight: 600; line-height: 1; }
/* 넘김 표시 점 */
.m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.m-dots i { width: 6px; height: 6px; border-radius: 3px; background: #d5d8dd; transition: width .2s ease, background-color .2s ease; }
.m-dots i.on { width: 16px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .m-cards a, .m-dots i { transition: none; } }

/* ── 5. 메인 휴대폰 섹션 순서·구분 (사용자 2026-11-09 "섹션별로 구분자가 약해… 진행 중인 건이 젤 중요한데, 왜 좁아") ──
   .m-home 을 풀어(display: contents) 그 안 칸과 #cases·#process 를 한 줄(hero-grid)에서 order 로 다시 늘어놓는다. 마크업 이동 없음.
   순서: 히어로 → 빠른 메뉴 → 내 상황 칩 → 변호사 줄 → [띠] 진행 중인 사건(펼침) → [띠] 판례 → [띠] 칼럼 → [띠] 전국 현장 → [띠] 사건 진행(접힘) → 상담.
   섹션 구분: 선·띠 없이 간격만(섹션 사이 80px, 사용자 "거리를 벌리라 했지. 하란 거만" → "더 시원하게 벌려서"). 제목 18px·700, 제목~내용 20px. */
.hero-grid { row-gap: 0; }
.m-home { display: contents; }
.hero-grid .promo { order: 0; }
.m-home > .m-tiles { order: 1; margin-top: 24px; }
.m-home > .m-situ { order: 2; margin-top: 16px; }
.m-home > .m-lawyer { order: 3; margin: 80px 0 0; }
body .hero-grid #cases { order: 4; }
.m-home > .m-row:has(#mCases) { order: 5; }
.m-home > .m-row:has(#mCols) { order: 6; }
.m-home > .m-sites { order: 7; }
body .hero-grid #process { order: 8; }
/* 섹션: 상자·선·띠 없이 위 간격 80px 만 */
body .hero-grid #cases,
body .hero-grid #process,
.m-home > .m-row,
.m-home > .m-sites {
  margin: 80px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
body .hero-grid #process.m-folded { padding: 0; }
body:has(.m-home) .foot-cta { margin-top: 88px; }
/* 섹션 제목 */
.m-row-head { margin-bottom: 20px; }
.m-row-head h2, body .hero-grid #cases .issues-head h2, body .hero-grid #process .head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
/* 머리 띠(--wash)는 휴대폰에선 섹션 띠와 겹쳐 빼고 다른 섹션 머리와 같은 모양으로 */
body .hero-grid #cases > .issues-head, body .hero-grid #process > .head { margin: 0 0 16px; padding: 0; background: none; border-radius: 0; }
body .hero-grid #process.m-folded > .head { margin: 0; }
/* 진행 중인 사건: 휴대폰에서도 펼친 채로 4건 모두, 접기 버튼 없음 */
body .hero-grid #cases.m-folded ul, body .hero-grid #cases.m-folded small { display: block; }
body .hero-grid #cases .m-fold { display: none; }
body .hero-grid #cases .issues-head a { margin-left: auto; font-size: 13.5px; color: var(--body); }
#cases ul { margin-top: 4px; }
#cases li + li { border-top: 1px solid var(--line); }
#cases li a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 16px 0; }
#cases li a:active { background: var(--wash); }
#cases li span { display: contents; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
#cases li .st { order: -1; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #eff1f4; color: #4a4f57; font-size: 12px; font-style: normal; font-weight: 600; }
#cases li .st::after { content: none; }
#cases li b { order: 1; flex: 1 1 100%; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: var(--text); }
#cases small { margin-top: 10px; font-size: 12px; color: var(--muted); }