/* =========================================================
mobile.css — 모바일 호환 보강
[적용 방법]
각 페이지 안, 바로 다음 줄에 아래 한 줄 추가:
※ 반드시 뒤에 넣어야 합니다.
CSS는 나중에 선언된 쪽이 이기므로, 앞에 넣으면 덮어쓰기가 안 됩니다.
※ 같이 해줄 HTML 수정 (파일 맨 아래 주석 참고)
========================================================= */
/* ---------------------------------------------------------
1. 기본 안전장치
--------------------------------------------------------- */
/* 어딘가에서 가로 스크롤이 생겨도 화면 밖으로 못 나가게 차단.
overflow-x:hidden 이 아니라 clip 을 쓰는 이유 →
hidden 은 스크롤 컨테이너를 만들어서 헤더의 position:sticky 를 깨뜨립니다. */
html { overflow-x: clip; }
/* iOS 가로↔세로 회전 시 글자가 제멋대로 커지는 현상 방지 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* grid/flex 칸은 기본 min-width 가 auto 라서
안에 긴 단어가 있으면 칸이 늘어나며 가로 스크롤을 만듭니다. */
.hero-grid > *,
.hero-copy,
.spec dd,
.goal,
.course,
.criteria div,
.steps .step-body { min-width: 0; }
/* 노치·펀치홀 기기 가로모드에서 본문이 잘리지 않도록 */
@supports (padding: max(0px)) {
.wrap {
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
}
}
/* ---------------------------------------------------------
2. 터치 기기 전용 처리
--------------------------------------------------------- */
/* 마우스가 없는 기기에서는 hover 스타일이 눌린 뒤 남아버립니다. */
@media (hover: none) {
.tabs a:hover { background: transparent; color: var(--ink-soft); }
.btn-primary:hover { background: #fff; color: var(--navy-800); }
.btn-ghost:hover { background: transparent; }
.footer-legal a:hover{ color: rgba(0,0,0,.5); }
}
/* 탭할 때 뜨는 회색 사각형을 브랜드 색으로 교체 */
a, button {
-webkit-tap-highlight-color: rgba(13, 74, 156, .12);
}
/* ---------------------------------------------------------
3. 헤더 — 가로 스크롤 탭 → 3등분 그리드
--------------------------------------------------------- */
@media (max-width: 680px) {
/* blur 는 스크롤 성능을 갉아먹고, 배경이 이미 92% 불투명이라
모바일에서는 꺼도 눈에 띄지 않습니다. */
.site-header {
background: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.header-inner {
flex-direction: column;
align-items: stretch;
gap: 0;
min-height: 0;
padding-bottom: 8px;
}
.brand { padding: 10px 0 8px; }
.brand strong { font-size: 15px; }
.brand span { display: none; } /* 좁은 화면에선 영문 부제 생략 */
/* 탭 3개를 화면 폭에 균등 분할 → 스크롤 자체가 불필요 */
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
width: 100%;
overflow: visible;
padding-bottom: 0;
}
.tabs a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 4px;
min-height: 44px; /* iOS·Android 권장 최소 터치 영역 */
font-size: 13px;
line-height: 1.2;
border-radius: 8px;
}
}
/* 가로모드처럼 세로 공간이 짧을 때는 헤더 고정을 풀어
화면의 상당 부분을 헤더가 잡아먹지 않게 합니다. */
@media (max-width: 900px) and (max-height: 480px) {
.site-header { position: static; }
}
/* ---------------------------------------------------------
4. 강제 줄바꿈(
) 무력화
--------------------------------------------------------- */
@media (max-width: 680px) {
.hero .lead br,
.goal p br { display: none; }
}
/* ---------------------------------------------------------
5. 표 — 첫 열 고정 + 스크롤 감촉 개선
--------------------------------------------------------- */
.tbl-scroll {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain; /* 표 끝에서 페이지가 같이 밀리는 것 방지 */
}
@media (max-width: 680px) {
.tbl th, .tbl td { padding: 11px 12px; font-size: 14px; }
.tbl thead th { font-size: 13px; }
/* 행 이름(구분 열)을 왼쪽에 고정해 두면
옆으로 밀어도 어느 행을 보는지 알 수 있습니다. */
.tbl tbody th {
position: sticky;
left: 0;
z-index: 1;
white-space: normal;
min-width: 104px;
/* sticky 상태에서 border-right 가 사라져 보이므로 그림자로 대체 */
box-shadow: 1px 0 0 var(--line);
}
}
/* ---------------------------------------------------------
6. 좁은 화면(≤480px) 여백·글자 크기 조정
--------------------------------------------------------- */
@media (max-width: 480px) {
.wrap { padding-left: 18px; padding-right: 18px; }
.section { padding: 40px 0; }
.section-head { margin-bottom: 24px; }
.section-head p { font-size: 16px; }
.goal,
.criteria div { padding: 20px 18px; }
.course { padding: 22px 18px 24px; }
.steps .step-body { padding: 14px 14px; }
.criteria p { font-size: 17px; }
.criteria p small { font-size: 13px; }
.hero { padding: 36px 0 40px; }
.hero--sub { padding: 32px 0 36px; }
.apply { padding: 40px 0; }
}
/* ≤400px 에서 ONLINE/OFFLINE/ROUNDS 3칸이 눌리지 않도록 축소 */
@media (max-width: 400px) {
.course .hours div { padding: 10px 8px; }
.course .hours span { font-size: 10px; letter-spacing: .06em; }
.course .hours strong { font-size: 17px; }
}
/* ---------------------------------------------------------
7. 이미지 CLS 방지
--------------------------------------------------------- */
.hero-poster img { height: auto; } /* HTML의 height 속성이 비율을 깨지 않게 */
/* =========================================================
[함께 해주면 좋은 HTML 수정 3가지]
1) viewport 메타에 viewport-fit 추가 (노치 대응이 켜집니다)
2) 폰트를 @import 체인 대신 로 직접 연결 (모바일 첫 렌더가 빨라짐)
fonts.css 상단의 @import 두 줄을 지우고, 각 페이지 에:
3) 포스터 이미지 경로에서 한글·공백 제거 + 크기 정정
문서/AID 포스터.png → docs/aid-poster.png
(CSS의 aspect-ratio:210/297 과 숫자를 맞춰야 로딩 중 튀지 않습니다)
========================================================= */