/* * 통학버스 — 화면 공용 스타일 * * ⚠️ 색은 `veh-tokens.css` 의 토큰만 쓴다. 여기에 색을 직접 쓰면 어두운 * 화면에서 그 부분만 안 바뀌어 글자가 배경에 묻는다. * ⚠️ **폰이 기준이다.** 학원장이 앱 안에서 설정을 한다 — 손가락으로. * 누르는 것은 전부 최소 44px 로 둔다. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: 'Gothic A1', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); /* ⚠️⚠️ **한글은 `keep-all` 이 없으면 낱말 한가운데서 잘린다.** 기본값(`normal`)은 한글을 글자 단위로 끊어도 된다고 보기 때문에 "학원장님이 설정에서 바꿉/니다" 처럼 뚝 끊긴다. 영문은 원래 낱말 단위로만 끊기므로 이 문제가 없어서 놓치기 쉽다. `keep-all` 이면 **띄어쓰기에서만** 줄이 바뀐다 — 문구를 하나씩 줄이는 것보다 이 한 줄이 훨씬 넓게 듣는다. ⚠️ 짝으로 `overflow-wrap: anywhere` 가 필요하다. 안 그러면 띄어쓰기 없는 긴 것(주소·토큰·아이디)이 칸을 뚫고 나가 **가로 스크롤**이 생긴다 — keep-all 이 그것마저 안 끊기 때문이다. */ word-break: keep-all; overflow-wrap: anywhere; } /* ⚠️ 여러 줄로 넘어가는 글은 **끝줄에 두세 글자만 남지 않게** 한다. `pretty` 는 브라우저가 줄을 나눌 때 고아 줄을 피하도록 하는 것이다. 모르는 브라우저는 그냥 무시하므로 안전하다. */ p, li, .hint, .note, .ask-s, .card p { text-wrap: pretty; } .num { font-variant-numeric: tabular-nums; } /* ── 껍데기 ─────────────────────────────────────────────────── */ .wrap { max-width: 520px; margin: 0 auto; padding: 0 18px 40px; } .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .top h1 { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top .back { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); border: 0; background: var(--raise); color: var(--ink2); font-size: var(--t-lg); cursor: pointer; } /* ⚠️ 섹션 제목은 **작고 진한 라벨**이다. 크고 흐린 회색으로 두면 제목인지 본문인지 알 수 없고, 화면이 그만큼 길어진다(밀도가 낮으면 '빈 화면에 카드 몇 개' 로 보인다 — 그게 생성된 화면의 느낌이다). */ h2 { font-size: var(--t-sm); font-weight: 800; color: var(--ink2); letter-spacing: .02em; margin: var(--s5) 0 var(--s2); } h2:first-of-type { margin-top: var(--s3); } /* ── 카드 ───────────────────────────────────────────────────── */ /* ⚠️ 지면에 **붙어 있는** 것은 테두리만, 지도 위에 **떠 있는** 것은 그림자만. 1px 테두리와 넓은 그림자를 같이 쓰면 '생성된 화면' 티가 난다. */ /* ⚠️ 붙어 있는 것은 **테두리만**, 떠 있는 것은 **그림자만**. 둘을 같이 쓰면 '생성된 화면' 티가 난다(토큰 파일의 그림자 설명 참고). */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px var(--s4); margin-bottom: var(--s3); } .card + .card { margin-top: 12px; } .card p { font-size: var(--t-md); color: var(--ink3); line-height: 1.7; } .card p + .btn, .card p + .row { margin-top: 12px; } /* ── 입력 ───────────────────────────────────────────────────── */ label { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink3); margin-bottom: 6px; } /* * ⚠️⚠️ **입력칸 글자는 `--t-lg`(17px)여야 한다. `--t-base`(15px)로 내리지 말 것.** * 아이폰 사파리는 **16px 미만인 칸에 손을 대면 화면을 통째로 확대한다.** * 그게 거슬려서 예전에는 `map.html` 의 viewport 에 `user-scalable=no` 를 * 걸어 확대를 **아예 막아** 두었다 — 그러면 눈이 어두운 학원장·학부모가 * 잔글씨를 키워 볼 방법이 없어진다(WCAG 1.4.4 위반). * 칸을 16px 위로 올리면 자동 확대가 안 일어나므로 **확대를 막을 이유가 * 사라진다.** 원인을 고치는 쪽이다. * ⚠️ 새 크기를 만들지 않는다 — 여덟 단계 중 `--t-lg` 를 쓴다. * 자기가 친 글자가 라벨보다 큰 것은 원래 읽기 좋은 모양이기도 하다. */ input[type=text], input[type=email], input[type=password], input[type=time], input[type=number], select { width: 100%; min-height: 46px; padding: 11px 13px; border: 1.5px solid var(--line2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-lg); } /* ⚠️⚠️ **`outline: none` 을 여기에 다시 쓰지 말 것.** 아래 `:focus-visible` 규칙이 `:where()` 로 감싸여 있어 **특정도가 0** 인데, `input:focus` 는 요소+가상클래스라 그걸 이긴다 — 그래서 키보드로 입력칸에 갔을 때 **테두리가 통째로 사라졌다**(실측: `:focus-visible` 은 걸리는데 `outline-style: none`). 마우스로 눌렀을 때만 지운다. */ input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; } input:focus, select:focus { border-color: var(--amber-b); } input::placeholder { color: var(--ink3); } .field + .field { margin-top: 12px; } .row { display: flex; gap: 8px; align-items: center; } .row > * { min-width: 0; } .row.wrap2 { flex-wrap: wrap; } /* ── 키보드로 쓸 때 지금 어디인지 ────────────────────────────── ⚠️⚠️ **여기에 포커스 표시가 통째로 없었다.** `map.html` 에만 있어서, 로그인·설치·약관 화면을 키보드(또는 폰의 외장 키보드·스위치)로 쓰면 **지금 어디에 있는지 전혀 보이지 않았다**(WCAG 2.4.7). ⚠️ `:focus` 가 아니라 `:focus-visible` 이다 — 마우스로 눌렀을 때까지 테두리가 남으면 지저분하다. ⚠️ 색은 **먹색**이다(종이 위 16.46:1). 황색은 3.62:1 이라 기준(3:1)은 넘지만 밝은 배경에서 흐릿하고, 무엇보다 **황색은 버스 전용**이다. ⚠️ `outline` 을 지우고 그림자만 쓰지 말 것 — 고대비 모드에서 그림자는 통째로 사라진다. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm); } /* 어두운 바탕의 주된 단추 위에서는 먹색이 안 보인다 — 종이색으로 뒤집는다. */ .btn.pri:focus-visible { outline-color: var(--paper); outline-offset: -4px; } /* ── 단추 ───────────────────────────────────────────────────── */ /* ⚠️ 누를 수 있는 것에는 `touch-action: manipulation` 을 준다. 없으면 브라우저가 **더블탭 확대인지 기다렸다가** 반응해서 한 박자 늦게 눌린다. */ button, .btn, .timebtn, summary, a { touch-action: manipulation; } button, .btn, .timebtn { -webkit-tap-highlight-color: transparent; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 12px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-base); font-weight: 700; cursor: pointer; /* ⚠️ **`` 은 밑줄이 그어진다.** `.btn` 은 `