/* ========================================================================== yedam.kr 키오스크(대형 터치 모니터) 대응 스타일 - kiosk.js가 에 kiosk-on 클래스를 붙이면 아래 규칙이 적용됨 - 가로/세로 모두 대응 (orientation 분기 최소화, 대부분 반응형 단위로 처리) ========================================================================== */ html.kiosk-on body:not(.pia-v2):not(.mom-v2) { font-size: 17px; } /* 버튼·링크형 버튼 — 터치 오조작 방지용 최소 크기 확보 */ html.kiosk-on body:not(.pia-v2):not(.mom-v2) button, html.kiosk-on body:not(.pia-v2):not(.mom-v2) a.btn, html.kiosk-on body:not(.pia-v2):not(.mom-v2) .btn, html.kiosk-on body:not(.pia-v2):not(.mom-v2) .btn-primary, html.kiosk-on body:not(.pia-v2):not(.mom-v2) .btn-ghost, html.kiosk-on body:not(.pia-v2):not(.mom-v2) input[type="button"], html.kiosk-on body:not(.pia-v2):not(.mom-v2) input[type="submit"] { min-height: 52px; min-width: 52px; font-size: 1.08em; padding: 14px 22px; } /* 입력 요소 */ /* type 속성이 없는 도 잡도록 :not() 으로 제외 방식을 바꿨다 */ html.kiosk-on body:not(.pia-v2):not(.mom-v2) input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]), html.kiosk-on body:not(.pia-v2):not(.mom-v2) select, html.kiosk-on body:not(.pia-v2):not(.mom-v2) textarea { min-height: 50px; font-size: 1.08em; padding: 10px 14px; } /* 타일·카드형 메뉴 (예: 선생님도우미 허브) */ html.kiosk-on .tile { padding: 24px !important; } html.kiosk-on .tile .ic { font-size: 32px !important; } html.kiosk-on .tile .t { font-size: 18px !important; } /* 체크박스·라디오 — 손가락으로 누르기 쉽게 */ html.kiosk-on body:not(.pia-v2):not(.mom-v2) input[type="checkbox"], html.kiosk-on body:not(.pia-v2):not(.mom-v2) input[type="radio"] { width: 22px; height: 22px; } /* 스크롤바 숨김(터치 스와이프 위주 조작) */ html.kiosk-on { scrollbar-width: thin; } /* ========================================================= 검사 화면(AI PIA / 맘 MOM) 스타일은 여기에 없습니다 --------------------------------------------------------- 두 화면은 각자 파일 안에서 화면 크기에 맞춰 글자·여백·터치 크기를 계산합니다. 예전에 여기 있던 확대 규칙은 그 계산과 충돌하기만 하고 실제로 적용되는 페이지도 없어 제거했습니다. ========================================================= */ /* ========================================================= 전체화면(Fullscreen API) 전환 버튼 — 키오스크 모드에서만 표시 ========================================================= */ #kiosk-fs-btn { display: none; } /* 위치를 좌하단으로 옮긴 이유: 실제 키오스크 사진을 보니 우하단에 콘텐츠가 몰려 있어(검사 진행 단계 아이콘, 선택검사 타일, AI교육 배너 설명) 이 버튼들이 그 위를 덮고 있었다. 좌하단은 네 장 모두 비어 있어 겹침이 없다. 크기도 줄였다. */ html.kiosk-on #kiosk-fs-btn { display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 99999; opacity: 0.55; transition: opacity 0.15s; background: rgba(17, 24, 39, 0.82); color: #fff; border: none; border-radius: 999px; padding: 14px 22px; font-size: 1rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } html.kiosk-on #kiosk-fs-btn.is-fs { background: rgba(220, 38, 38, 0.85); } /* 아이콘을 CSS 로 그린다 — 폰트에 없는 기호를 쓰면 두부(□)가 된다. 평소: 빈 사각형(전체화면으로 들어가기) / 전체화면 중: 안이 찬 사각형(나가기) */ html.kiosk-on #kiosk-fs-btn::before { content: ""; flex: 0 0 auto; width: 13px; height: 11px; border: 2px solid currentColor; border-radius: 2px; } html.kiosk-on #kiosk-fs-btn.is-fs::before { background: currentColor; } /* "메인으로" 버튼의 집 아이콘. 🏠 이모지는 기기마다 모양이 제각각이고 흑백 폰트에서는 두부(□)가 되며, CSS 삼각형+box-shadow 로 집을 흉내내면 지붕만 보이고 몸통이 어긋난다 (실제 렌더링에서 확인). 그래서 도형을 직접 그린 SVG 를 배경으로 깐다. 버튼 배경이 파랑, 글자가 흰색이므로 아이콘도 흰색 고정. */ html.kiosk-on #kiosk-home-btn::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3.2 1.8 12.1h3v8.7h5.1v-5.6h4.2v5.6h5.1v-8.7h3z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ========================================================= "메인으로" (키오스크 홈 화면 복귀) 버튼 — 전체화면 버튼 바로 위에 쌓음 ========================================================= */ #kiosk-home-btn { display: none; } html.kiosk-on #kiosk-home-btn { display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 99999; background: rgba(37, 99, 235, 0.92); color: #fff; border: none; border-radius: 999px; padding: 12px 20px; font-size: 0.95rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); cursor: pointer; min-height: 48px; /* 터치 목표 권장 크기(NIA·머티리얼) */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } html.kiosk-on #kiosk-home-btn:active { transform: scale(0.97); } html.kiosk-on #kiosk-fs-btn:active { opacity: 1; } /* ========================================================= 진입 안내 오버레이 — 키오스크 홈에서 첫 터치를 받아 전체화면으로 들어간다 (브라우저가 사용자 조작 없는 전체화면 진입을 막기 때문에 필요하다) ========================================================= */ #kiosk-enter-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: rgba(10, 14, 20, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; -webkit-tap-highlight-color: transparent; } #kiosk-enter-overlay:focus-visible { outline: 4px solid #5FE3D6; outline-offset: -8px; } .kiosk-enter-inner { text-align: center; color: #fff; padding: 24px; } /* 손가락 아이콘도 폰트에 없는 기호 대신 CSS 로 그린다 */ .kiosk-enter-ico { width: 76px; height: 76px; margin: 0 auto 22px; border: 5px solid rgba(255, 255, 255, 0.9); border-radius: 50%; position: relative; animation: kiosk-tap 1.6s ease-in-out infinite; } .kiosk-enter-ico::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); } @keyframes kiosk-tap { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(0.86); opacity: 1; } } .kiosk-enter-t { font-size: clamp(1.5rem, 4.4vmin, 3rem); font-weight: 900; letter-spacing: -0.01em; } .kiosk-enter-d { font-size: clamp(0.95rem, 2.4vmin, 1.6rem); margin-top: 12px; opacity: 0.82; } /* 움직임에 민감한 이용자를 위해 애니메이션을 끈다 */ @media (prefers-reduced-motion: reduce) { .kiosk-enter-ico { animation: none; } } /* ========================================================= kiosk-home.html 타일 링크(썸네일 이미지) 공용 스타일 ========================================================= */ .kiosk-tile-hint { position: absolute; right: 12px; bottom: 12px; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; pointer-events: none; } /* ========================================================= 새 화면(body.pia-v2 = AI PIA, body.mom-v2 = 맘 MOM) --------------------------------------------------------- 이 두 화면은 각자 파일 안에서 · 화면 크기·비율로 프리셋을 고르고 (pia-sc-portrait / wide / compact) · 글자·여백·터치 크기를 그 프리셋의 토큰으로 정하고 · 그래도 넘치면 zoom 으로 통째 축소 하는 방식을 씁니다. 따라서 이 파일이 고정 px 를 주면 그 계산이 어긋납니다. 위쪽 규칙에 :not(.pia-v2):not(.mom-v2) 를 붙여 둔 이유입니다. 새 화면용 스타일을 여기에 추가하지 마세요. 여기 남겨도 되는 것: 전체화면 버튼, 메인 복귀 버튼, 키오스크 홈 타일 (셀렉터가 id 기반이라 검사 화면 레이아웃에 영향을 주지 않습니다) ========================================================= */ /* ========================================================= 고정 버튼 겹침 방지 --------------------------------------------------------- 위치는 CSS 가 아니라 kiosk.js 가 정합니다. 페이지마다 비어 있는 모서리가 다르기 때문입니다. 실측하면 회사 홈 좌하=솔루션 보기 · 우하=도입 담당자 · 우상=빈자리 AI PIA 검사 좌하=빈자리 · 우하=버튼 · 우상=음성 안내 맘 검사 네 모서리 모두 콘텐츠 키오스크 홈 네 모서리 모두 빈자리 처럼 제각각이라, CSS 로 한 자리를 못 박으면 어딘가는 반드시 덮습니다. kiosk.js 의 placeButtons() 가 화면을 열 때 네 모서리를 훑어 가장 빈 곳을 고르고 body 에 kiosk-corner-bl/br/tl/tr 을 붙입니다. 여기서는 그 클래스에 따른 좌표만 정의합니다. ========================================================= */ /* 전체화면 버튼 자리 — body.kiosk-corner-* */ html.kiosk-on body.kiosk-corner-bl #kiosk-fs-btn { left:14px; right:auto; bottom:14px; top:auto; } html.kiosk-on body.kiosk-corner-br #kiosk-fs-btn { right:14px; left:auto; bottom:14px; top:auto; } html.kiosk-on body.kiosk-corner-tl #kiosk-fs-btn { left:14px; right:auto; top:14px; bottom:auto; } html.kiosk-on body.kiosk-corner-tr #kiosk-fs-btn { right:14px; left:auto; top:14px; bottom:auto; } /* "메인으로" 자리 — body.kiosk-hcorner-* (전체화면 버튼과 다를 수 있다) */ html.kiosk-on body.kiosk-hcorner-bl #kiosk-home-btn { left:14px; right:auto; bottom:14px; top:auto; } html.kiosk-on body.kiosk-hcorner-br #kiosk-home-btn { right:14px; left:auto; bottom:14px; top:auto; } html.kiosk-on body.kiosk-hcorner-tl #kiosk-home-btn { left:14px; right:auto; top:14px; bottom:auto; } html.kiosk-on body.kiosk-hcorner-tr #kiosk-home-btn { right:14px; left:auto; top:14px; bottom:auto; } /* 두 버튼이 같은 모서리를 골랐을 때만 세로로 쌓는다(간격 8px) */ html.kiosk-on body.kiosk-corner-bl.kiosk-hcorner-bl #kiosk-home-btn { bottom:70px; } html.kiosk-on body.kiosk-corner-br.kiosk-hcorner-br #kiosk-home-btn { bottom:70px; } html.kiosk-on body.kiosk-corner-tl.kiosk-hcorner-tl #kiosk-fs-btn { top:70px; } html.kiosk-on body.kiosk-corner-tr.kiosk-hcorner-tr #kiosk-fs-btn { top:70px; } /* 자리를 못 정했을 때(스크립트가 아직 안 돌았을 때)의 기본값 */ html.kiosk-on body:not([class*="kiosk-corner-"]) #kiosk-fs-btn { left:14px; bottom:14px; } html.kiosk-on body:not([class*="kiosk-hcorner-"]) #kiosk-home-btn { left:14px; bottom:70px; } /* 네 모서리가 모두 콘텐츠로 차 있는 화면(맘 검사·두뇌 놀이터·회사 홈)에서는 덮는 것을 완전히 피할 수 없다. 그럴 때는 평소 흐리게 두어 아래 글자가 비쳐 보이게 하고, 손을 대면 진해지게 한다. 완전히 가리는 것보다 낫다. */ html.kiosk-on #kiosk-fs-btn { opacity:.4; } html.kiosk-on #kiosk-home-btn { opacity:.78; } html.kiosk-on #kiosk-fs-btn:hover, html.kiosk-on #kiosk-fs-btn:active, html.kiosk-on #kiosk-home-btn:hover, html.kiosk-on #kiosk-home-btn:active { opacity:1; } /* 이미 전체화면이면 "전체화면으로 보기"는 할 일이 끝났다. 그런데도 구석을 차지하고 콘텐츠를 가릴 이유가 없으므로 거의 투명하게 둔다. 빠져나올 방법은 남겨야 하니 손을 대면 진해진다. */ html.kiosk-on body.kiosk-is-fs #kiosk-fs-btn { opacity:.12; } html.kiosk-on body.kiosk-is-fs #kiosk-fs-btn:hover, html.kiosk-on body.kiosk-is-fs #kiosk-fs-btn:active { opacity:1; } /* 48px 인 이유: WCAG 2.1 AA 의 최소는 44px 이지만, 구글 머티리얼 접근성 가이드와 한국지능정보사회진흥원(NIA) 배리어프리 키오스크 UI 가이드는 48dp (실물 약 9mm, 권장 7~10mm)를 권한다. 이 키오스크는 맘(MOM)·두뇌 놀이터로 어르신이 쓰는 화면이므로 최소치가 아니라 권장치를 따른다. padding 만 줄였더니 높이가 41px 로 떨어져 기준에 미달했었다(측정치). */ /* 검사 화면에서는 두 버튼의 크기를 못 박아 한 덩어리로 보이게 한다. 실물 사진에서 "메인으로"(작음)와 "전체화면 종료"(큼)가 서로 크기가 달라 계단처럼 어긋나 보였고, 그 상태로 선택지("중학교 이상")를 덮고 있었다. */ html.kiosk-on body.pia-v2 #kiosk-fs-btn, html.kiosk-on body.mom-v2 #kiosk-fs-btn, html.kiosk-on body.pia-v2 #kiosk-home-btn, html.kiosk-on body.mom-v2 #kiosk-home-btn{ height:44px; min-height:44px; padding:0 14px; font-size:.8rem; border-radius:12px; box-sizing:border-box; } html.kiosk-on body.pia-v2 #kiosk-fs-btn, html.kiosk-on body.mom-v2 #kiosk-fs-btn{ opacity:.4; } /* 검사·설문 화면은 세로로 긴 폼이라 어느 구석에 두든 선택지를 덮는다 (실물 사진에서 "중학교 이상" 버튼 위에 얹혀 있었다). 손가락이 화면에 닿아 있는 동안 — 즉 읽거나 고르는 중에는 — 두 버튼을 거의 투명하게 만들어 방해하지 않게 하고, 손을 떼면 다시 보이게 한다. 누르는 순간에는 불투명해진다. */ html.kiosk-on body.pia-v2.kiosk-touching #kiosk-fs-btn, html.kiosk-on body.mom-v2.kiosk-touching #kiosk-fs-btn, html.kiosk-on body.pia-v2.kiosk-touching #kiosk-home-btn, html.kiosk-on body.mom-v2.kiosk-touching #kiosk-home-btn{ opacity:.12; } html.kiosk-on body.pia-v2 #kiosk-fs-btn:active, html.kiosk-on body.mom-v2 #kiosk-fs-btn:active, html.kiosk-on body.pia-v2 #kiosk-home-btn:active, html.kiosk-on body.mom-v2 #kiosk-home-btn:active{ opacity:1 !important; } /* ── 터치 목표 보정 ──────────────────────────────────────────────────── 키오스크는 손가락으로 쓰는 화면인데, 마우스 기준으로 만든 작은 텍스트 링크가 그대로 남아 있었다(측정: 선생님도우미 "홈" 12x21px, "로그아웃" 48x21px). 손가락으로는 사실상 못 누른다. 글자 크기는 그대로 두고 눌리는 영역만 44px 로 넓힌다. */ html.kiosk-on a.link, html.kiosk-on .topbar a, html.kiosk-on .hbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; /* "홈" 처럼 글자가 짧아도 가로 48px 확보 */ padding-left: 12px; padding-right: 12px; } html.kiosk-on body.pia-v2 #kiosk-fs-btn:hover, html.kiosk-on body.pia-v2 #kiosk-home-btn:hover, html.kiosk-on body.mom-v2 #kiosk-fs-btn:hover, html.kiosk-on body.mom-v2 #kiosk-home-btn:hover{ opacity:1; } /* 모달이 열려 있으면 시스템 버튼을 감춘다 (모달 z-index 9000 < 99999) */ html.kiosk-on body.pia-v2:has(.pia-modal) #kiosk-fs-btn, html.kiosk-on body.pia-v2:has(.pia-modal) #kiosk-home-btn{ display:none !important; } /* 회사 홈페이지(index.html)에는 이미 전용 "키오스크 홈" 버튼(#ydKioskEntry)이 우하단에 크게 있다. 공용 "메인으로"까지 띄우면 같은 곳으로 가는 버튼이 둘이 되고, 이 페이지는 네 모서리가 모두 카드·버튼으로 차 있어 반드시 무언가를 덮는다(검증에서 "도입 담당자" 카드를 덮는 것으로 잡혔다). → 이 페이지에서는 "메인으로"를 감춘다. 기능은 #ydKioskEntry 가 한다. */ html.kiosk-on body:has(#ydKioskEntry) #kiosk-home-btn{ display:none !important; } /* [전체화면으로 보기]도 이 페이지에서는 띄우지 않는다. 여기는 일반 방문자도 보는 회사 홈페이지다. 실물 사진에서 "키오스크 홈" 버튼 아래에 작게 붙어 있던 그 문구가 이것이다. 전체화면은 [키오스크 홈]을 눌러 키오스크 모드로 들어간 뒤에 시작한다. (kiosk.js 도 이 페이지에서는 버튼 자체를 만들지 않는다. 이 규칙은 캐시된 옛 스크립트가 남아 있을 때를 위한 이중 안전장치다.) */ html.kiosk-on body:has(#ydKioskEntry) #kiosk-fs-btn{ display:none !important; } /* 오류신고 "💬 문의" 버튼(err-cs.js 의 .errcs-fab)은 right:16px bottom:16px 에 고정돼 있어, 같은 우하단에 있는 "키오스크 홈"(208x77) 과 정확히 겹쳤다. 실물 사진에서 "키오ㅅ… 문의" 처럼 두 글자가 포개져 보였던 것이 이것이다. z-index 는 문의(99998) 가 위라서 키오스크 홈 글자를 덮는다. → 키오스크 모드에서만 문의 버튼을 키오스크 홈 위로 올려 세로로 쌓는다. */ html.kiosk-on body:has(#ydKioskEntry) .errcs-fab{ bottom:112px; } @media (max-width:760px){ /* 좁은 화면에서는 키오스크 홈 버튼이 좌우로 늘어나므로 더 위로 */ html.kiosk-on body:has(#ydKioskEntry) .errcs-fab{ bottom:104px; } }