/* ========================================================================== screen.css — 태블릿·노트북 공통 화면 규칙 왜 만들었나 kiosk.css 가 키오스크에 해 준 일을 태블릿·노트북에도 한다. 지금까지 이 두 기기는 "데스크톱도 키오스크도 아닌 사각지대" 였다. 실측(2026-08-08)에서 드러난 것 · 1366×768 노트북 — AI PIA 화면이 1,186px 넘침 · 1024×768 태블릿 — 1,038px 넘침 · 시간표 도구 — 44px 미만 터치 표적 71개 가로 넘침은 30번 측정에서 0건이었다. 폭이 아니라 **높이와 크기**가 문제다. 짝이 되는 파일 kiosk.js 가 에 dev-phone / dev-tablet / dev-laptop / dev-desktop 과 screen-short 를 붙인다. 이 파일은 그 클래스만 본다. 건드리지 않는 것 kiosk-on(키오스크)과 dev-phone(휴대폰)에는 아무 것도 하지 않는다. 이미 각각 kiosk.css 와 기존 모바일 스타일이 맡고 있다. ========================================================================== */ /* -------------------------------------------------------------------------- 1. 글자 최소 크기 태블릿은 손에 들고 약 40cm, 노트북은 약 50cm 거리에서 본다. 키오스크(1m 이상, 서서)보다 가깝지만 휴대폰보다는 멀다. 본문 15px 을 바닥으로 잡는다. 이보다 작으면 학교 현장에서 읽기 힘들다. -------------------------------------------------------------------------- */ html.dev-tablet:not(.kiosk-on) body, html.dev-laptop:not(.kiosk-on) body { font-size: max(15px, 1rem); line-height: 1.6; } /* 보조 문구까지 15px 로 끌어올린다. 캡션·주석이 12~13px 로 깔려 있었다. */ html.dev-tablet:not(.kiosk-on) .mut, html.dev-tablet:not(.kiosk-on) .cap, html.dev-tablet:not(.kiosk-on) small, html.dev-laptop:not(.kiosk-on) .mut, html.dev-laptop:not(.kiosk-on) .cap, html.dev-laptop:not(.kiosk-on) small { font-size: max(14px, 0.9em); } /* -------------------------------------------------------------------------- 2. 터치 표적 태블릿은 손가락으로 만진다. 노트북은 마우스라 44px 까지 필요하지 않지만, 터치 노트북도 있으므로 40px 은 준다. 표(table) 안은 예외로 둔다 — 시간표처럼 칸이 많은 화면에서 44px 을 강제하면 한 화면에 안 들어간다. 대신 칸 사이 간격을 벌려 오조작을 줄인다. -------------------------------------------------------------------------- */ html.dev-tablet:not(.kiosk-on) button, html.dev-tablet:not(.kiosk-on) .btn, html.dev-tablet:not(.kiosk-on) a.btn, html.dev-tablet:not(.kiosk-on) select, html.dev-tablet:not(.kiosk-on) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; } html.dev-laptop:not(.kiosk-on) button, html.dev-laptop:not(.kiosk-on) .btn, html.dev-laptop:not(.kiosk-on) a.btn, html.dev-laptop:not(.kiosk-on) select, html.dev-laptop:not(.kiosk-on) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 40px; } html.dev-tablet:not(.kiosk-on) input[type="checkbox"], html.dev-tablet:not(.kiosk-on) input[type="radio"] { width: 22px; height: 22px; } /* 표 안의 작은 버튼은 높이 대신 눌리는 면적으로 해결한다 */ html.dev-tablet:not(.kiosk-on) td button, html.dev-tablet:not(.kiosk-on) th button, html.dev-tablet:not(.kiosk-on) td input, html.dev-tablet:not(.kiosk-on) td select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; } /* -------------------------------------------------------------------------- 3. 이미지 — 잘림 금지 키오스크에서 배너가 잘려 나갔던 일이 있다(실물 사진에서 확인). 같은 실수를 반복하지 않도록 기본을 contain 으로 둔다. 배경처럼 채워야 하는 것만 .img-cover 로 예외를 준다. -------------------------------------------------------------------------- */ /* 처음에는 height:auto + object-fit:contain 을 전역으로 걸었다. 그런데 회사 홈의 .hero-figure(16/11) · .sol-card-img(16/10) · .feat-media(4/3) 처럼 **고정 비율 상자 안에서 cover 로 채우는 이미지**까지 잡아채, 노트북에서 상자와 이미지 높이가 어긋나 빈 여백이 생겼다(검증에서 확인). 가로 넘침은 30번 측정에서 0건이었으므로 애초에 필요하지 않았다. 폭이 넘지 않게 막는 것만 남긴다. 높이와 object-fit 은 각 페이지가 정한다. */ html.dev-tablet:not(.kiosk-on) img, html.dev-laptop:not(.kiosk-on) img { max-width: 100%; } /* -------------------------------------------------------------------------- 4. 한 화면 — 세로가 짧은 기기 가로 태블릿(1024×768)·보급형 노트북(1366×768)이 여기 해당한다. 처음에는 .fit-screen / .grid-square 라는 새 클래스를 전제로 규칙을 썼다가 지웠다. 그 클래스를 붙인 곳이 한 군데도 없어 **아무 효과가 없는 죽은 코드**였기 때문이다(검증에서 확인). 안 도는 코드를 남겨 두면 "했다"고 착각하게 된다. 대신 실제로 쓰이는 것만 남긴다. · 여백 축소 — 값싼 수단부터 쓴다. 글자를 줄이면 읽기가 나빠지지만 여백은 줄여도 지장이 없다. · AI PIA 는 자기 맞춤 엔진(--pia-fit)이 따로 돈다. 여기서 건드리지 않는다. 100dvh 를 쓰는 이유 — 태블릿 브라우저는 주소창이 접혔다 펴지며 vh 가 실제 보이는 높이와 어긋난다. -------------------------------------------------------------------------- */ html.screen-short:not(.kiosk-on) body { --screen-h: 100dvh; } @supports not (height: 100dvh) { html.screen-short:not(.kiosk-on) body { --screen-h: 100vh; } } /* 세로가 짧으면 큰 여백부터 줄인다 */ html.screen-short:not(.kiosk-on) section, html.screen-short:not(.kiosk-on) .sec, html.screen-short:not(.kiosk-on) .card { padding-top: min(var(--pad, 24px), 20px); padding-bottom: min(var(--pad, 24px), 20px); } /* -------------------------------------------------------------------------- 5. 조밀한 표는 최소 높이에서 제외 시간표 도구처럼 칸이 많은 화면에 44px 을 강제하면 세로로 길어져 "한 화면에 안 들어온다" 문제를 오히려 키운다. 표 안은 따로 잡는다. 앞서 dev-tablet 에만 예외가 있고 dev-laptop 에는 없어 어긋나 있었다. -------------------------------------------------------------------------- */ html.dev-laptop:not(.kiosk-on) td button, html.dev-laptop:not(.kiosk-on) th button, html.dev-laptop:not(.kiosk-on) td input, html.dev-laptop:not(.kiosk-on) td select, html.dev-laptop:not(.kiosk-on) th input, html.dev-laptop:not(.kiosk-on) th select { min-height: 32px; padding-top: 4px; padding-bottom: 4px; } html.dev-tablet:not(.kiosk-on) th input, html.dev-tablet:not(.kiosk-on) th select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; } /* -------------------------------------------------------------------------- 6. 헤더·푸터의 작은 링크 실측(2026-08-09, 배포본 기준)에서 유일하게 남은 **실제 기준 위반**이다. · 회사 홈 푸터 footer.ft > … > span > a 36×19px, 이웃 간격 16px · 시간표 도구 header > a.link 12~72×21px WCAG 2.5.8(AA)은 표적 최소 24×24 CSS px 을 요구하고, 그보다 작으면 서로 24px 간격이 있어야 봐주는데 **둘 다 실패**했다(간격 16px). 왜 세로 여백만 주나 인라인 요소의 세로 padding 은 줄 높이(line box)를 늘리지 않으면서 클릭·터치 판정 영역에는 반영된다. 즉 **레이아웃을 안 건드리고** 표적만 키울 수 있다. display 를 inline-block 으로 바꾸면 줄바꿈과 구분자(·) 정렬이 틀어질 수 있어 택하지 않았다. 19px + 4px×2 = 27px ≥ 24px. 왜 header·footer·nav 로만 한정하나 본문 문장 속 링크에까지 걸면 글줄 사이 히트 영역이 서로 겹쳐 엉뚱한 링크가 눌린다. 문제가 난 곳만 짚는다. -------------------------------------------------------------------------- */ html.dev-tablet:not(.kiosk-on) header a, html.dev-tablet:not(.kiosk-on) footer a, html.dev-tablet:not(.kiosk-on) nav a, html.dev-laptop:not(.kiosk-on) header a, html.dev-laptop:not(.kiosk-on) footer a, html.dev-laptop:not(.kiosk-on) nav a { padding-top: 4px; padding-bottom: 4px; } /* 세로만 늘렸더니 시간표·직업찾기의 "홈" 링크가 12×29px 로 남았다. 한 글자짜리라 폭이 모자란다. 이웃과 24px 이상 떨어져 있어 WCAG 의 간격 예외로 기준 자체는 통과하지만, 태블릿에서 손가락으로 노리기엔 12px 는 좁다. 가로 여백을 6px 씩 줘서 24px 을 채운다. 가로 여백은 세로와 달리 **줄 흐름을 밀어낸다**. 헤더 링크 사이가 12px 벌어지므로, 넣은 뒤 가로 넘침이 늘지 않는지 실측으로 확인했다. */ html.dev-tablet:not(.kiosk-on) header a, html.dev-tablet:not(.kiosk-on) nav a, html.dev-laptop:not(.kiosk-on) header a, html.dev-laptop:not(.kiosk-on) nav a { padding-left: 6px; padding-right: 6px; } /* 체크박스는 22px 로 두었었다. WCAG 2.5.8 의 24px 을 2px 차이로 밑돈다. 동의 화면은