/* ridlab mobile.css — 모바일 전용 레이어. tokens.css → base.css → axis.css → mobile.css 순 로드. * * 원칙: "PC를 모바일에 끼워맞추지 않는다." * - 필터는 결과를 밀어내지 않는다 → 바텀시트(). * - 넓은 표는 짜부라뜨리지 않는다 → 행 단위 카드(시맨틱은 role로 보존). * - 손가락은 44px, 폼 글자는 16px, 높이는 dvh, 바닥은 safe-area. * * 브레이크포인트는 세 단계만 쓴다(tokens.css 주석 참조): * 480px 좁은 폰 * 760px 필터 사이드바 → 시트 / 표 → 카드 * 880px 전역 내비 접힘 */ /* ============================================================ 0. 전역 위생 ============================================================ */ /* 노치·홈인디케이터 보정 — 가로 모드에서 콘텐츠가 노치에 물리지 않게 */ .container{ padding-left:max(24px,var(--safe-l)); padding-right:max(24px,var(--safe-r)); } /* 한국어는 어절 단위로 끊는다(기본 word-break:normal은 글자 사이에서도 끊는다). 좁은 칼럼에서 제목·카드 문구가 한 글자씩 흘러내리던 원인. 긴 URL은 예외적으로 어디서든. */ h1,h2,h3,h4,.lead, .report-body,.md-report, .cdb-card h3,.pb-card h3,.report-card h3{ word-break:keep-all; overflow-wrap:anywhere; } /* 탭 하이라이트는 우리 :active 피드백과 겹친다 */ a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent;} @media (max-width:760px){ /* 위치표시(breadcrumb) — 긴 사슬('홈 › 89혁신진단 › 89혁신 진단결과 › 경상북도 봉화군')이 여러 줄로 접히며 구분자 '›'가 줄머리에 고아로 남는다. 한 줄 가로 스크롤로. */ .sitecrumbs .crumbs{ white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:none; } .sitecrumbs .crumbs::-webkit-scrollbar{display:none;} .sitecrumbs .crumbs a,.sitecrumbs .crumbs .cur{display:inline-block;padding-block:.3rem;} /* 민트 색면 띠(base.css)는 데스크톱 기준으로 잡혀 있다 — 좁은 화면에서는 한 줄짜리 사슬 위아래로 여백이 남아 띠만 두꺼워 보인다. 세로만 줄이고 면은 그대로 둔다. */ .sitecrumbs .crumbs{padding-top:.95rem;padding-bottom:.85rem;} /* 축 범례의 '판정 기준' 링크 — 인라인 22px(WCAG 2.5.8 미달) */ .axleg-head a{display:flex;align-items:center;min-height:var(--tap);} } /* 모달 시트가 열려 있으면 뒤 페이지는 스크롤하지 않는다(스크롤 체이닝 차단). :has() 미지원 브라우저는 mobile.js의 .is-locked 폴백. */ html:has(dialog.msheet:modal), html.is-locked{overflow:hidden;} /* ============================================================ 1. 바텀시트 ------------------------------------------------------------ 서버는 으로 렌더한다 → JS가 없으면 그냥 인라인 블록(=현행 사이드바). mobile.js가 좁은 화면에서 open을 떼고 showModal()로 승격한다. showModal()은 top layer로 올릴 뿐 DOM 부모를 바꾸지 않으므로,
자손으로 둔 facet의 FormData·이벤트 위임이 그대로 살아 있다. ============================================================ */ /* 비모달(데스크톱·무JS) — 의 UA 기본값(absolute·border·padding)을 전부 무력화 */ dialog.msheet[open]:not(:modal){ position:static;display:block; inset:auto;width:auto;max-width:none;max-height:none; margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible; } dialog.msheet:not([open]){display:none;} dialog.msheet::backdrop{background:none;} /* 시트 부속은 모달일 때만 등장 */ .msheet__head,.msheet__foot{display:none;} .msheet__body{display:block;} /* --- 모달 상태 --- --kb-b = iOS 소프트 키보드 높이(mobile.js가 visualViewport로 실측). iOS는 layout viewport를 줄이지 않아 position:fixed 시트가 키보드에 가린다 → 그만큼 바닥을 들어올린다. */ dialog.msheet:modal{ position:fixed;inset:auto 0 var(--kb-b,0px) 0; width:100%;max-width:none;margin:0;padding:0;border:0; max-height:min(88dvh,100dvh - 3rem); background:var(--surface);color:var(--ink); border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-lg); display:flex;flex-direction:column;overflow:hidden; overscroll-behavior:contain; } dialog.msheet:modal::backdrop{background:rgba(33,31,61,.42);} dialog.msheet:modal .msheet__head{ position:relative; display:flex;align-items:center;gap:.6rem;flex:none; padding:.55rem 1rem .7rem;border-bottom:1px solid var(--line); } .msheet__grip{ position:absolute;top:.5rem;left:50%;translate:-50% 0; width:2.25rem;height:.25rem;border-radius:999px;background:var(--line); } .msheet__title{font-size:1rem;font-weight:700;color:var(--ink);margin:.5rem 0 0;flex:1;} .msheet__close{ flex:none;width:var(--tap);height:var(--tap);margin-top:.4rem; border:0;background:none;cursor:pointer;color:var(--muted); font-size:1.35rem;line-height:1;border-radius:50%; } .msheet__close:hover{background:var(--surface-2);color:var(--ink);} dialog.msheet:modal .msheet__body{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:.9rem 1rem 1rem; } dialog.msheet:modal .msheet__foot{ display:flex;gap:.6rem;flex:none; padding:.75rem 1rem calc(.75rem + var(--safe-b)); border-top:1px solid var(--line);background:var(--surface); } .msheet__foot .btn{flex:1;justify-content:center;min-height:var(--tap);} .msheet__foot .btn:first-child{flex:0 0 auto;} /* 진입/퇴장 — 아래에서 밀어 올린다. @starting-style·allow-discrete 미지원 브라우저는 애니메이션만 생략되고 동작은 동일(점진적 향상). */ @media (prefers-reduced-motion:no-preference){ dialog.msheet{ transition:translate .3s cubic-bezier(.32,.72,0,1),opacity .2s ease, overlay .3s allow-discrete,display .3s allow-discrete; } dialog.msheet:modal{translate:0 0;opacity:1;} dialog.msheet:not([open]){translate:0 100%;opacity:0;} @starting-style{dialog.msheet:modal{translate:0 100%;opacity:0;}} dialog.msheet::backdrop{transition:opacity .25s ease,overlay .25s allow-discrete,display .25s allow-discrete;} dialog.msheet:modal::backdrop{opacity:1;} @starting-style{dialog.msheet:modal::backdrop{opacity:0;}} } /* 첫 로드에서 mobile.js가 [open]을 떼는 순간까지 애니메이션이 걸리면, 인라인 사이드바가 300ms 동안 아래로 미끄러지며 사라지는 플래시가 보인다. 승격/강등 프레임에만 전환을 끈다. */ dialog.msheet.msheet--nt, dialog.msheet.msheet--nt::backdrop{transition:none;} /* 시트 안의 필터 옵션은 손가락 기준으로 넉넉히 (데스크톱 사이드바 밀도는 건드리지 않는다) */ dialog.msheet:modal fieldset{ border:0;border-top:1px solid var(--line-soft);border-radius:0; padding:.35rem 0 .5rem;margin:0; } dialog.msheet:modal fieldset:first-of-type{border-top:0;} dialog.msheet:modal legend{padding:0;font-size:.85rem;} dialog.msheet:modal label{ min-height:var(--tap);padding-block:.5rem;gap:.7rem; border-radius:var(--r-sm); } dialog.msheet:modal label:active{background:var(--surface-2);} dialog.msheet:modal input[type=checkbox]{ width:1.25rem;height:1.25rem;flex:none;accent-color:var(--clay); } dialog.msheet:modal input[type=search]{ font-size:var(--field-font);min-height:var(--tap);width:100%; } /* 시트 안에서는 인라인 '초기화/적용' 액션이 하단 바와 중복 */ dialog.msheet:modal .msheet__inline-actions{display:none;} /* --- 내비 드로어 (mobile.js가 생성) --- */ dialog.msheet--nav:modal{max-height:min(90dvh,100dvh - 2rem);} dialog.msheet--nav .nav, dialog.msheet--nav .nav-utility{display:flex;} dialog.msheet--nav .nav{border-top:0;margin-top:0;padding-top:0;} dialog.msheet--nav .nav-utility{ border-top:1px solid var(--line);margin-top:.6rem;padding-top:.6rem; } dialog.msheet--nav .nav-search{margin-top:.4rem;} dialog.msheet--nav .nav-search input{min-height:var(--tap);} /* ============================================================ 2. 필터 트리거 바 (.mbar) — sticky, 결과 바로 위 ============================================================ */ .mbar{display:none;} /* [hidden]은 UA 스타일이라 아래 .mbar{display:flex}에 진다 — 무JS에서 죽은 바가 뜨지 않게 명시. */ .mbar[hidden]{display:none;} @media (max-width:760px){ .mbar{ display:flex;align-items:center;gap:.5rem; position:sticky;top:var(--header-h);z-index:20; margin:0 0 .9rem;padding:.5rem 0; background:var(--paper); /* 좌우 컨테이너 패딩만큼 넓혀 스크롤 시 카드가 바 옆으로 새지 않게 */ box-shadow:0 1px 0 var(--line); } .mbar__btn{ flex:none;display:inline-flex;align-items:center;gap:.4rem; min-height:var(--tap);padding:.5rem .95rem; border:1px solid var(--violet-soft);border-radius:999px; background:var(--surface);color:var(--indigo); font:inherit;font-size:.92rem;font-weight:700;cursor:pointer; } .mbar__btn:active{background:var(--surface-2);} .mbar__ico{width:1.05em;height:1.05em;flex:none;} .mbar__count{ display:inline-flex;align-items:center;justify-content:center; min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px; background:var(--clay);color:#fff;font-size:.75rem;font-weight:800; } .mbar__count[hidden]{display:none;} /* 활성 필터 칩 — 가로 스크롤(세로 공간 0) */ .mbar__chips{ flex:1;min-width:0;display:flex;gap:.35rem; overflow-x:auto;scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .mbar__chips::-webkit-scrollbar{display:none;} .mbar__chips:empty{display:none;} .mchip{ flex:none;scroll-snap-align:start; display:inline-flex;align-items:center;gap:.3rem; min-height:2rem;padding:.2rem .3rem .2rem .65rem; border:1px solid var(--line);border-radius:999px; background:var(--surface-2);color:var(--ink-soft); font:inherit;font-size:.8rem;font-weight:600;white-space:nowrap;cursor:pointer; } .mchip__x{ display:inline-flex;align-items:center;justify-content:center; width:1.35rem;height:1.35rem;border-radius:50%; background:var(--paper-2);color:var(--muted);font-size:.9rem;line-height:1; } .mchip:active{background:var(--clay-tint);} } /* ============================================================ 3. 칩 스크롤러 (.chiprow) — 시·도 17개, 유형 8개 등 여러 줄로 접히던 알약 묶음을 한 줄 가로 스크롤로. ============================================================ */ @media (max-width:760px){ .chiprow{ display:flex;flex-wrap:nowrap; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:.45rem; /* 컨테이너 밖까지 흘려 '더 있다'는 느낌 + 끝에서 여백 */ margin-inline:calc(-1 * max(24px,var(--safe-l))); padding-inline:max(24px,var(--safe-l)); scroll-padding-inline:max(24px,var(--safe-l)); } .chiprow::-webkit-scrollbar{display:none;} .chiprow > *{flex:none;scroll-snap-align:start;} } /* ============================================================ 4. 마크다운 표 → 카드 (보고서 비교진단표) core_tags._wrap_tables()가 .md-table-stack 클래스 + td[data-label] + role을 주입한다. role 재부여 덕에 display 변경에도 스크린리더의 행·열 관계가 유지된다. ============================================================ */ @media (max-width:760px){ .md-report .md-table-stack{border:0;border-radius:0;overflow:visible;margin:1.2rem 0;} .md-report .md-table-stack table{ display:block;width:100%;font-size:.95rem;line-height:1.6;table-layout:auto; } /* thead는 화면에서만 감춘다(접근성 트리에는 남겨 columnheader 관계 유지) */ .md-report .md-table-stack thead{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .md-report .md-table-stack tbody{display:block;} .md-report .md-table-stack tbody tr{ display:block;margin:0 0 .8rem;padding:.2rem .95rem .7rem; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--shadow-sm); break-inside:avoid; } .md-report .md-table-stack tbody tr:nth-child(even){background:var(--surface);} .md-report .md-table-stack td, .md-report .md-table-stack tbody th{ display:block;border:0;border-top:1px solid var(--line-soft); padding:.6rem 0 .1rem;text-align:left; } .md-report .md-table-stack tbody tr > :first-child{border-top:0;} /* 라벨(= 열 머리글) */ .md-report .md-table-stack td::before, .md-report .md-table-stack tbody th::before{ content:attr(data-label);display:block; margin-bottom:.2rem; font-size:.72rem;font-weight:800;letter-spacing:.02em; color:var(--clay-deep);text-transform:none; } .md-report .md-table-stack td[data-label=""]::before{display:none;} /* 첫 열(모델명 등)은 카드 제목처럼 */ .md-report .md-table-stack tbody tr > :first-child{ font-weight:700;color:var(--ink);font-size:1.02rem;padding-top:.55rem; } /* 넓은 표 브레이크아웃은 카드에선 무의미 */ .md-report .md-table-stack.md-table-wide{width:auto;margin-inline:0;} .md-report .md-table-stack.md-table-wide table{font-size:.95rem;} /* 카드로 안 바꾸는 표(2열)는 최소한 읽히게 */ .md-report .md-table-wrap:not(.md-table-stack){ overscroll-behavior-x:contain; } .md-report .md-table-wrap:not(.md-table-stack) table{font-size:.92rem;} .md-report .md-table-wide:not(.md-table-stack){width:auto;margin-inline:0;} } /* ============================================================ 5. 지도 — 세로 스크롤 트랩 방지 + 가로 모드 (한 손가락 팬 차단은 gapmap.js / teachings.js 에서 처리) ============================================================ */ /* 세로 스와이프는 페이지로 흘려보내고, 지도 팬은 두 손가락에만 허용(스크립트가 dragging 제어) */ @media (pointer:coarse){ .gap-map{touch-action:pan-y;} } /* ※ 지도 '높이'는 여기서 정하지 않는다 — 페이지 인라인