/* ========================================================================== RL Mobile Nav — App Bar (§3.6.1) + Bottom Tab Bar (§3.6.7) docs/design/design-system.md를 SoT로 한다. raw hex는 .rl-mnav-enabled 토큰 블록 3곳(라이트 기본 + prefers-color-scheme:dark + [data-theme="dark"])에 한정. 다크는 §7.2 스펙대로 모든 시멘틱 토큰을 정의 — accent/primary/good/bad/warn/info의 base/hover/soft/edge/text 5단 + light. soft/edge는 알파 기반(스펙 §7.2 권고). 스코프는 `.rl-mnav-enabled`로 한정해 kill switch off + 레거시 그누보드 hex 페이지 보호 (스펙 §7.2.3은 :root 권고지만, 본 구현은 보수적 스코프 채택). 네임스페이스 규약: - 모든 신 클래스는 .rl-mnav-* prefix - 모든 시각/동작 셀렉터는 .rl-mnav-enabled 하위 — viewport 무관 발화 (PC=태블릿 단일 트랙, §2.8.1/§3.6.7/§8.4) - kill switch off → #thema_wrapper에 .rl-mnav-enabled 미부여 → 본 CSS 전체 무효 - 페이지 컨테이너 768 cap은 page-shell.css가 위에 얹음 (mobile-nav.css 다음 priority로 로드) ========================================================================== */ /* --- 토큰 정의 (라이트 기본). 사이트 전역 :root 오염 회피를 위해 .rl-mnav-enabled 스코프. 클래스는 #thema_wrapper(head.php)에 부여 — kill switch off → wrapper에 미부여 → 본 CSS 전부 무효. surface 톤은 design-system §2.1.4 기준 (학습 면 오프화이트). */ .rl-mnav-enabled { --rl-primary: #2563eb; --rl-primary-soft: #EFF4FF; --rl-surface: #F7F8FA; --rl-surface-2: #EFF1F4; --rl-surface-elev: #FFFFFF; --rl-surface-strong: #0F172A; --rl-line: #E8EBF0; --rl-line-2: #E5E7EB; --rl-ink: #0F172A; --rl-text: #1F2937; --rl-text-2: #4B5563; --rl-text-3: #6B7280; --rl-text-4: #9CA3AF; --rl-on-primary: #FFFFFF; --rl-on-surface-strong: #FFFFFF; --rl-overlay: rgba(15,23,42,.32); --rl-scrim-solid: #000000; /* 불투명 검정 — 전체화면 이미지 뷰어 백드롭(letterbox). */ --rl-bad: #DC2626; --rl-shadow-pop: 0 16px 40px -16px rgba(15,23,42,.18); --rl-shadow-md: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12); --rl-h-appbar: 52px; --rl-h-bottomtab: 52px; --rl-h-iconbtn: 40px; /* Safe area — §2.9.1. 셸 게이트 밖 사용처는 dual-fallback 필수(토큰 부재 시 raw env()로 회귀 방지). */ --rl-safe-top: env(safe-area-inset-top, 0px); --rl-safe-bottom: env(safe-area-inset-bottom, 0px); --rl-safe-bottom-cap: 30px; --rl-safe-bottom-capped: min(var(--rl-safe-bottom), var(--rl-safe-bottom-cap)); --rl-r-sm: 10px; --rl-r-md: 14px; --rl-space-1: 4px; --rl-space-2: 8px; --rl-space-3: 12px; --rl-space-4: 14px; --rl-space-5: 16px; --rl-space-6: 24px; --rl-fs-h4: 15.5px; --rl-fs-body-sm: 13.5px; --rl-fs-caption: 12px; --rl-fs-caption-sm: 11px; --rl-fw-500: 500; --rl-fw-600: 600; --rl-fw-700: 700; --rl-fw-800: 800; --rl-ls-tight: -0.015em; --rl-ls-body: -0.01em; --rl-dur-micro: 150ms; --rl-dur-base: 200ms; --rl-dur-sheet: 320ms; /* 시스템 --ease-out에 정합 — :root(learn-tokens.css) --rl-ease와 단일 값 공유. literal ease로 두면 scope별 토큰 값이 갈려(:root=cubic / 여기=ease) var(--rl-ease) 트랜지션이 의도와 달라진다. */ --rl-ease: var(--ease-out); --rl-ease-sheet: cubic-bezier(.2,.75,.25,1); } /* 구버전 iOS 앱(build < 5) safe-area fallback — 서버 게이트 rlcnf.extend.php $rl_ios_legacy_safearea → body.rl-ios-safearea-fallback. 해당 빌드는 WKWebView 네이티브 설정(transparentStatusBar=false· autoAdjustSafeAreaInsets=true)이라 env(safe-area-inset-bottom)이 0 → 하단 탭바·시트가 홈 인디케이터 위로 안 올라간다(겹침). build>=5(2026-05-11 safe-area fix)는 env() 정상이라 게이트 밖(과패딩 차단). --rl-safe-bottom 토큰 단일 출처를 max(env, 34px)로 보정 → 소비처(탭바·컴포저·시트·page-shell) 전수 정합. 캡(--rl-safe-bottom-cap 30px)은 그대로라 탭바는 신빌드 실 env(34px→캡30px)과 동일한 30px가 된다. 두 셀렉터: body 직속(body에 append되는 시트류 inherit) + .rl-mnav-enabled(#thema_wrapper 토큰 재정의 덮기). */ body.rl-ios-safearea-fallback, body.rl-ios-safearea-fallback .rl-mnav-enabled { --rl-safe-bottom: max(env(safe-area-inset-bottom, 0px), 34px); } /* --- 다크 모드 매핑 (prefers-color-scheme 또는 명시적 [data-theme=dark]) * §7.2.1 Color 매핑 표 전수 반영. 갤러리 :root:not([data-theme="light"]) 다크 토큰 블록과 hex 일치. * Surface ladder (다크): bg #0B1220 < surface #131A2B < surface-2 #1A2236 < surface-elev #1F2940 * 카드 안 chip/btn-outline은 surface-2(§3.1.3 Chip Button) — surface-elev 카드와 톤차로 frame 가시성 확보. * soft/edge는 알파 기반 — base hex를 곱하지 않는다(§2.10 다크 모드 원칙). */ /* data-theme은 에 부여 — :root 위치에서 매칭 (design-system §2.10.1). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rl-mnav-enabled { --rl-bg: #0B1220; --rl-surface: #131A2B; --rl-surface-2: #1A2236; --rl-surface-elev: #1F2940; --rl-surface-strong: #1F2940; --rl-line: #1F2940; --rl-line-2: #2A3450; --rl-ink: #F8FAFC; --rl-text: #E2E8F0; --rl-text-2: #A8B3C7; --rl-text-3: #7E8AA0; --rl-text-4: #5A6478; --rl-overlay: rgba(0,0,0,.6); --rl-on-primary: #FFFFFF; --rl-on-surface-strong: #FFFFFF; --rl-primary: #3B82F6; --rl-primary-hover: #60A5FA; --rl-primary-light: #93C5FD; --rl-primary-soft: rgba(59,130,246,.16); --rl-primary-edge: rgba(59,130,246,.36); --rl-accent: #A78BFA; --rl-accent-hover: #C4B5FD; --rl-accent-light: #C4B5FD; --rl-accent-soft: rgba(167,139,250,.16); --rl-accent-edge: rgba(167,139,250,.36); --rl-good: #34D399; --rl-good-soft: rgba(52,211,153,.14); --rl-good-edge: rgba(52,211,153,.36); --rl-good-text: #6EE7B7; --rl-bad: #F87171; --rl-bad-hover: #EF4444; --rl-bad-soft: rgba(248,113,113,.14); --rl-bad-edge: rgba(248,113,113,.36); --rl-bad-text: #FCA5A5; --rl-warn: #FBBF24; --rl-warn-soft: rgba(251,191,36,.14); --rl-warn-text: #FCD34D; --rl-info: #38BDF8; --rl-info-soft: rgba(56,189,248,.14); --rl-info-text: #7DD3FC; --rl-info-light: #BAE6FD; --rl-shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4); --rl-shadow-md: 0 1px 0 rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.55); --rl-shadow-pop: 0 16px 40px -12px rgba(0,0,0,.65); } } :root[data-theme="dark"] .rl-mnav-enabled { --rl-bg: #0B1220; --rl-surface: #131A2B; --rl-surface-2: #1A2236; --rl-surface-elev: #1F2940; --rl-surface-strong: #1F2940; --rl-line: #1F2940; --rl-line-2: #2A3450; --rl-ink: #F8FAFC; --rl-text: #E2E8F0; --rl-text-2: #A8B3C7; --rl-text-3: #7E8AA0; --rl-text-4: #5A6478; --rl-overlay: rgba(0,0,0,.6); --rl-on-primary: #FFFFFF; --rl-on-surface-strong: #FFFFFF; --rl-primary: #3B82F6; --rl-primary-hover: #60A5FA; --rl-primary-light: #93C5FD; --rl-primary-soft: rgba(59,130,246,.16); --rl-primary-edge: rgba(59,130,246,.36); --rl-accent: #A78BFA; --rl-accent-hover: #C4B5FD; --rl-accent-light: #C4B5FD; --rl-accent-soft: rgba(167,139,250,.16); --rl-accent-edge: rgba(167,139,250,.36); --rl-good: #34D399; --rl-good-soft: rgba(52,211,153,.14); --rl-good-edge: rgba(52,211,153,.36); --rl-good-text: #6EE7B7; --rl-bad: #F87171; --rl-bad-hover: #EF4444; --rl-bad-soft: rgba(248,113,113,.14); --rl-bad-edge: rgba(248,113,113,.36); --rl-bad-text: #FCA5A5; --rl-warn: #FBBF24; --rl-warn-soft: rgba(251,191,36,.14); --rl-warn-text: #FCD34D; --rl-info: #38BDF8; --rl-info-soft: rgba(56,189,248,.14); --rl-info-text: #7DD3FC; --rl-info-light: #BAE6FD; --rl-shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4); --rl-shadow-md: 0 1px 0 rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.55); --rl-shadow-pop: 0 16px 40px -12px rgba(0,0,0,.65); } /* ========================================================================== App Bar / BottomTab / Tabs / 푸터 — viewport 무관 (PC=태블릿 단일 트랙) ========================================================================== */ /* 신 UI 활성 시 기존 LNB / PC 헤더 / 모바일 헤더 / PC GNB 비노출. 모바일 메뉴(.m-menu = menu-m.php) 안에서: - .m-icon (햄버거/알림/검색) → 신 App Bar로 흡수, 숨김 - .m-nav#mobile_nav (1차 메뉴) → 신 Bottom Tab Bar로 흡수, 숨김 - .m-nav-sub#mobile_nav_sub (2차 메뉴) → §3.6.2 Tabs 스타일로 컴팩트화, 노출 유지 햄버거 클릭은 sidebar_open('sidebar-menu')로 apms basic-sidebar 위젯 활용 (메뉴 접근성 100%) */ .rl-mnav-enabled .at-lnb, .rl-mnav-enabled .pc-header, .rl-mnav-enabled .m-header, .rl-mnav-enabled .pc-menu, .rl-mnav-enabled .pc-menu-all, .rl-mnav-enabled .m-wrap .m-icon, .rl-mnav-enabled .m-wrap #mobile_nav { display: none !important; } /* .m-wrap 컨테이너 시각 정리 — 신 UI에서는 2차 탭만 남음 */ .rl-mnav-enabled .m-wrap { background: var(--rl-surface); border-bottom: 1px solid var(--rl-line); } .rl-mnav-enabled .m-wrap .m-table { display: block; } .rl-mnav-enabled .m-wrap .m-list { width: 100%; padding: 0; } /* --- 2차 메뉴 = Tabs (§3.6.2) active = --ink + 2px 하단 --primary 바, inactive = --text-3 높이 36~40px, 박스형 → 인라인 텍스트 + 얇은 밑줄 */ .rl-mnav-enabled #mobile_nav_sub { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--rl-line-2); } .rl-mnav-enabled #mobile_nav_sub::-webkit-scrollbar { display: none; } .rl-mnav-enabled #mobile_nav_sub ul { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 100%; } .rl-mnav-enabled #mobile_nav_sub ul::after { content: none; } .rl-mnav-enabled #mobile_nav_sub li { flex: 0 0 auto; margin: 0; padding: 0; background: transparent; border: 0; } .rl-mnav-enabled #mobile_nav_sub li a { display: inline-flex; align-items: center; height: 38px; padding: 0 var(--rl-space-4); background: transparent; color: var(--rl-text-3); font-size: var(--rl-fs-body-sm); font-weight: var(--rl-fw-700); letter-spacing: var(--rl-ls-body); line-height: 1; text-decoration: none; white-space: nowrap; position: relative; transition: color var(--rl-dur-micro) var(--rl-ease); } .rl-mnav-enabled #mobile_nav_sub li.on a, .rl-mnav-enabled #mobile_nav_sub li a.on { color: var(--rl-ink); } .rl-mnav-enabled #mobile_nav_sub li.on a::after, .rl-mnav-enabled #mobile_nav_sub li a.on::after { content: ""; position: absolute; left: var(--rl-space-4); right: var(--rl-space-4); bottom: -1px; height: 2px; background: var(--rl-primary); border-radius: 2px; } /* --- 아미나 PC 메뉴 차단 — App Bar/BottomTab과 동선 중복 + 시각 잡음. mnav 활성 페이지에서는 비노출. */ .rl-mnav-enabled .at-menu { display: none; } /* --- App Bar (§3.6.1): • min-height 가변 — 페이지가 행을 더하면 자연 확장. • variant: default(중앙) / --leading(좌측 정렬) / --focus(진척 라벨). • Surface (§3.6.1 scroll-flat): 베이스 transparent — 최상단(scrollY=0)에서 본문 surface가 그대로 비쳐 seamless. 스크롤 시작 → JS가 .is-scrolled 부여 → 불투명 surface(--rl-surface) + 0.5px hairline으로 본문과 분리감 확보(블러 없는 flat). */ .rl-mnav-enabled .rl-mnav-appbar { position: sticky; top: 0; z-index: 10; background: transparent; padding-top: var(--rl-safe-top, 0px); /* border는 즉시 토글 — background fade-out 중 hairline 잔상 깜빡임 방지. */ transition: background var(--rl-dur-base) var(--rl-ease); } /* 앱바 패닝 보정 — iOS가 visual viewport를 패닝(키보드 열림+스크롤/포커스, vvTop>0)하면 sticky 앱바가 layout viewport에 묶여 가시영역 위로 밀려 사라진다. 패닝량(--rl-vv-top, rl-keyboard-state.js 전역 게시)만큼 아래로 되돌린다. 전역(App Shell 무관) — 일반 스크롤은 vvTop=0이라 무영향(sticky가 처리). .rl-vv-shifted 게이트(패닝 실제 발생 시에만 JS가 부여) — 평시 불필요한 transform·containing block 회피. */ .rl-vv-shifted .rl-mnav-enabled .rl-mnav-appbar { transform: translateY(var(--rl-vv-top, 0px)); } .rl-mnav-enabled .rl-mnav-appbar.is-scrolled { /* flat — 블러(frosted) 폐기, 본문 배경과 동일한 불투명 surface로 스크롤 본문을 가린다. */ background: var(--rl-surface); /* 하단 탭바와 동일 톤(--rl-line-2)으로 통일. App Bar↔BottomTab 양쪽 모두 같은 hairline. */ border-bottom: 0.5px solid var(--rl-line-2); } /* --- 컴포저 계열 앱바(--flat) — 글 작성/수정 등 컴포저 family 재사용 treatment. 프로스티드(translucent+blur) 대신 페이지 배경색과 동일한 불투명 surface(--rl-surface)로 채워 스크롤 본문을 가린다(투명 X). 스크롤해도 frost 발동 안 함. 약한 하단 hairline만 상시 노출(액션 바 상단 hairline과 짝). 페이지가 $rl_appbar_flat=true로 활성. */ .rl-mnav-enabled .rl-mnav-appbar--flat, .rl-mnav-enabled .rl-mnav-appbar--flat.is-scrolled { background: var(--rl-surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0.5px solid var(--rl-line-2); } .rl-mnav-appbar__inner { min-height: var(--rl-h-appbar); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rl-space-3) 0 var(--rl-space-2); /* gap 0 — 우측 액션 아이콘이 한 묶음으로 밀착. focus variant 중앙 요소(__progress·progressbar-wrap)는 자체 좌우 패딩(space-2)으로 닫기·설정과 간격 유지, __right(margin-left:auto)는 gap과 무관 → 변종 안전. */ gap: 0; } /* 평소는 흐린 회색(--text-3)으로 후퇴 — 학습 동선의 부가 요소이므로 시야에서 빠짐. 터치/마우스 피드백은 background가 아닌 color shift로 처리(§3.6.1). 시프트는 primary로 — 후퇴해 있던 슬롯이 사용자 행동 시점에 색으로 떠오른다. safe-area 패딩 영역과 disconnect 차단. :focus-visible은 접근성 식별 전용 outline ring(§6.4) — color/background 무관. */ .rl-mnav-appbar__btn { appearance: none; border: 0; background: transparent; cursor: pointer; width: var(--rl-h-iconbtn); height: var(--rl-h-iconbtn); border-radius: var(--rl-r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--rl-text-3); position: relative; padding: 0; flex-shrink: 0; transition: color var(--rl-dur-micro) var(--rl-ease); } .rl-mnav-appbar__btn:active { color: var(--rl-primary); } .rl-mnav-appbar__btn:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; } /* --- 슬롯 아이콘 시각 매스 정합 (§3.6.1 v1.57) 슬롯 컨테이너(.rl-mnav-appbar__btn)는 hit-area 40×40 단일 출처. 그 안 SVG 글리프 메트릭은 본 룰이 단일 출처. • 기본(viewBox를 거의 가득 채우는 outline 박스형 — sheet·eye-off·X·search·bell 등): 22×22 + stroke 1.6. • chevron-* 보정(--chevron): 26×26 + stroke 2. 글리프가 viewBox 가로의 ~25%만 차지하는 좁은 V형이라 같은 22px로 두면 박스형 대비 시각 매스가 절반 이하로 작아 보임. 가로 폭·획 굵기를 한 단계 키워 박스형 슬롯들과 시각 무게를 정합. 페이지가 SVG inject 시 width/height/stroke-width inline attribute 부여 금지 — 본 CSS만 SoT. */ .rl-mnav-appbar__btn svg { width: 22px; height: 22px; stroke-width: 1.6; } .rl-mnav-appbar__btn--chevron svg { width: 26px; height: 26px; stroke-width: 2; } /* 우측 슬롯 — default variant(빈 __inner에 단일 자식 inject 시) 우측 정렬 단일 출처. focus variant는 progressbar wrap(flex:1)이 이미 공간을 채워 margin-left:auto는 무효(0px) — 변종 안전. §8.5 G4 정합: 마크업에 쓰이는 클래스는 CSS 단일 출처 정의 필수. */ .rl-mnav-appbar__right { margin-left: auto; } /* 타이틀 색은 좌·우 슬롯 아이콘과 동일한 흐린 회색(--text-3) — 부가 요소이므로 시야에서 후퇴. head는 default/leading 모두 빈 컨테이너만 출력하므로, __title은 페이지가 직접 주입할 때만 활성. */ .rl-mnav-appbar__title { flex: 1; min-width: 0; text-align: center; font-size: var(--rl-fs-body); font-weight: var(--rl-fw-700); color: var(--rl-ink); letter-spacing: var(--rl-ls-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--rl-space-2); word-break: keep-all; overflow-wrap: break-word; } /* --- App Bar is-leading variant — 좌측 정렬 타이틀 (§3.6.1 v1.10). 일반 진입 페이지(메인·과목 목록·마이) 한 손 첫 시선 확보용. 색은 아이콘과 동일한 --text-3 적용. */ .rl-mnav-appbar--leading .rl-mnav-appbar__title { text-align: left; font-size: var(--rl-fs-h4); font-weight: var(--rl-fw-700); letter-spacing: var(--rl-ls-tight); } /* --- App Bar 우측 텍스트 액션 (§3.6.1 확장) — 아이콘 슬롯과 달리 텍스트 라벨 액션(예: 글쓰기 컴포저 '완료'). primary 톤·가변 폭·hit-area ≥40(아이콘 슬롯 정합). disabled는 후퇴 색으로 비활성 명시. 폼 밖에서 form= 속성으로 제출. */ .rl-mnav-appbar__action { appearance: none; border: 0; background: transparent; cursor: pointer; min-height: var(--rl-h-iconbtn); padding: 0 var(--rl-space-2); font-size: var(--rl-fs-body-sm); font-weight: var(--rl-fw-700); color: var(--rl-primary); letter-spacing: var(--rl-ls-body); border-radius: var(--rl-r-sm); flex-shrink: 0; white-space: nowrap; transition: opacity var(--rl-dur-micro) var(--rl-ease); } .rl-mnav-appbar__action:active:not([aria-disabled="true"]) { opacity: .6; } .rl-mnav-appbar__action:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; } /* 비활성 — 네이티브 disabled + aria-disabled(클릭은 받아 스낵바 안내, 시각만 비활성) 동일 처리. */ .rl-mnav-appbar__action:disabled, .rl-mnav-appbar__action[aria-disabled="true"] { color: var(--rl-text-4); cursor: default; } /* --- App Bar focus variant — 학습 집중 화면(exam·note) 진척 표시 (§4.6) */ .rl-mnav-appbar__progress { flex: 1; min-width: 0; text-align: center; font-size: var(--rl-fs-body-sm); font-weight: var(--rl-fw-700); color: var(--rl-ink); letter-spacing: var(--rl-ls-body); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--rl-space-2); } .rl-mnav-appbar__progress b { font-weight: var(--rl-fw-800); } /* --- App Bar focus variant — 가운데 progress bar 슬롯. wrap이 flex column으로 상단 라벨("답안 N / 총") + 하단 막대(.rl-bar.is-exam)를 묶음. 막대 자체는 learn.css의 .rl-bar 재사용 — margin 0으로 헤더 컨텍스트 override(좌우 spacing은 __inner padding). focus variant 페이지가 $rl_appbar_focus_show_progressbar=true 옵트인 시 노출. */ .rl-mnav-appbar__progressbar-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--rl-space-2); padding: 0 var(--rl-space-2); } /* progress wrap 상단 한 줄 — 좌측 답안 라벨 + 우측 타이머. flex space-between. */ .rl-mnav-appbar__progressbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rl-space-2); } /* 단일 슬롯(타이머 X + label_kind=position) — 라벨 단독 중앙 정렬. note.php 라운드 위치 표기용. */ .rl-mnav-appbar__progressbar-top--center { justify-content: center; } .rl-mnav-appbar__progressbar-label { font-size: var(--rl-fs-caption); font-weight: var(--rl-fw-600); color: var(--rl-text-2); letter-spacing: var(--rl-ls-body); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .rl-mnav-appbar__progressbar-label b { font-weight: var(--rl-fw-800); color: var(--rl-ink); } /* 우측 타이머 — 라벨과 동일 톤(fs-caption + fw-600 + text-2), 숫자만 fw-800 + ink. svg는 보조 text-3. */ .rl-mnav-appbar__progressbar-timer { display: inline-flex; align-items: center; gap: var(--rl-space-1); font-size: var(--rl-fs-caption); font-weight: var(--rl-fw-600); color: var(--rl-text-2); letter-spacing: var(--rl-ls-body); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .rl-mnav-appbar__progressbar-timer b { font-weight: var(--rl-fw-800); color: var(--rl-ink); } .rl-mnav-appbar__progressbar-timer svg { width: 12px; height: 12px; color: var(--rl-text-3); } /* learn.css의 .rl-bar 베이스 룰(margin:0 sp-5)이 cascade 늦게 로드되어 (0,0,1) 동률 시 우선 → wrap-scoped 셀렉터(0,0,2)로 specificity 올려 헤더 컨텍스트에서 progressbar 좌우 마진 확실히 제거. wrap 좌우 끝 = label 좌측 / timer 우측 / progressbar 좌우 모두 정합. 높이는 .rl-bar 베이스(4px) 대비 1.5x = 6px — 진척 가시성 강화(exam·note 공유, 본문 .rl-bar는 그대로). 트랙은 .rl-bar 베이스의 --surface-2 대신 --line-2 — appbar 배경이 --bg(translucent로 surface-2와 근접)라 빈 상태 트랙이 묻히는 컨텍스트 보정. 본문 .rl-bar는 surface 위에 놓이므로 그대로 surface-2 유지. */ .rl-mnav-appbar__progressbar-wrap .rl-mnav-appbar__progressbar { margin: 0; height: 6px; background: var(--rl-line-2); } /* ── 페이지 진입 1회: 진행바 위 스캔(좌→우). focus appbar progressbar 컴포넌트의 진입 효과 — exam.php·note.php 등 progressbar variant를 쓰는 모든 페이지 공유. 클래스는 페이지 부트 시 1회 부여. */ .rl-mnav-appbar__progressbar.rl-exam-scan-once { position: relative; } .rl-mnav-appbar__progressbar.rl-exam-scan-once::after { content: ''; position: absolute; inset: 0; /* 라이트모드 트랙(--rl-surface-2) 위에서도 보이도록 primary-light. 다크는 accent-light로 자동 정합. */ background: linear-gradient(90deg, transparent, var(--rl-primary-light) 50%, transparent); opacity: .85; transform: translateX(-100%); animation: rl-exam-bar-scan 900ms cubic-bezier(.2, .8, .2, 1) 80ms 1 both; pointer-events: none; } @keyframes rl-exam-bar-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* 진척 카운트 텍스트(#current-answered) scale pulse — 진척 +1 시점에만 발화. 는 inline → inline-block 보정. */ #current-answered.is-bump { display: inline-block; transform-origin: center; animation: rl-exam-count-scale 200ms ease-out 1; will-change: transform; } @keyframes rl-exam-count-scale { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } } /* 진척 +1 — brightness/saturate pulse + 우측 leading edge glow(게임 게이지 피드백). 같은 카운트 변경엔 미발화. */ #current-progressbar.rl-bar-bump { position: relative; animation: rl-exam-bar-bump 380ms ease-out 1; } @keyframes rl-exam-bar-bump { 0% { filter: brightness(1) saturate(1); } 40% { filter: brightness(1.35) saturate(1.15); } 100% { filter: brightness(1) saturate(1); } } #current-progressbar.rl-bar-bump::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, transparent, var(--rl-primary-light)); opacity: 0; animation: rl-exam-bar-edge 420ms ease-out 60ms 1; pointer-events: none; } @keyframes rl-exam-bar-edge { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rl-mnav-appbar__progressbar.rl-exam-scan-once::after, #current-answered.is-bump, #current-progressbar.rl-bar-bump, #current-progressbar.rl-bar-bump::after { animation: none; } } /* PR-A v1.2: 라운드 진행바 마일스톤 tick — 라운드 크기 10/20에서 5/10/15 위치에 표시. .rl-bar-tick은 페이지 JS가 left:%로 inject. 짧은 vertical line, line-2 톤. 라운드 단위 도구 — 게임 어휘/이펙트 X, 단순 위치 표식. */ .rl-mnav-appbar__progressbar .rl-bar-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; /* tick 위치 정렬 (중앙 정렬) */ background: var(--rl-bg); opacity: .85; pointer-events: none; z-index: 1; } .rl-mnav-appbar__dot { /* 미읽음 표식 — 존재만 알리는 절제된 점(점 하나·숫자 배지 없음). 오류 아닌 알림이므로 --rl-bad(오류) 대신 브랜드 토다운으로 강도를 낮춰 선택 화면에서 시선을 뺏지 않는다. */ position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--rl-primary); box-shadow: 0 0 0 2px var(--rl-surface); } /* --- Bottom Tab Bar (§3.6.7) Surface: 본문이 항상 그 뒤로 스크롤되는 fixed 바이므로 항상 불투명 surface(flat) + top hairline으로 본문을 가린다. 블러(frosted) 폐기 — 하단 바는 늘 본문 위라 seamless(투명) 상태가 없다. */ .rl-mnav-enabled .rl-mnav-bottomtab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--rl-surface); border-top: 0.5px solid var(--rl-line-2); display: flex; align-items: stretch; /* iOS 홈 인디케이터 안전영역 — 일부 기종에서 시스템 값이 과해 30px로 캡(--rl-safe-bottom-cap) */ padding-bottom: var(--rl-safe-bottom-capped, 0px); } /* .rl-mnav-enabled 스코프(specificity 0,2,0)로 글로벌 a 색상 cascade를 덮고, 활성 슬롯은 .is-on(0,3,0)으로 자연 우선. * 시각 정책 — filled 아이콘 통일. 학습 동선의 부가 요소이므로 평소는 흐린 회색(--text-3)으로 시야에서 후퇴. * 활성/터치 시점에는 primary 색으로 떠올라 사용자 행동을 명료히 신호한다. 자기 페이지 재클릭은 활성 슬롯이 이미 primary이므로 추가 시프트 없음. * 라벨은 세장(작은 size + light weight)으로 정중하게 후퇴 (도구형 UI: 주변 후퇴, 본문 시선). * 터치/마우스 피드백은 background 대신 color shift — safe-area 패딩 영역과 disconnect 차단. * :focus-visible은 접근성 식별 전용 outline ring(§6.4) — outline-offset 음수로 슬롯 내부에 그려 인접 슬롯·hairline·safe-area 침범 차단. */ .rl-mnav-enabled .rl-mnav-bottomtab__slot { flex: 1 1 0; min-width: 0; height: var(--rl-h-bottomtab); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--rl-text-3); position: relative; padding: 0; transition: color var(--rl-dur-micro) var(--rl-ease); } .rl-mnav-enabled .rl-mnav-bottomtab__slot:not(.is-on):active { color: var(--rl-primary); } .rl-mnav-enabled .rl-mnav-bottomtab__slot:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: -2px; } .rl-mnav-bottomtab__ico { display: inline-flex; align-items: center; justify-content: center; color: inherit; /* SVG fill="currentColor"가 슬롯 color 상속 */ } /* 인라인 width/height(22) 오버라이드 — 라벨 축소분만큼 아이콘으로 시각 가중치 이동 */ .rl-mnav-bottomtab__ico svg { width: 24px; height: 24px; } /* 라벨 — 세장(가는 weight + 작은 size + 살짝 wide letter-spacing). 주변 후퇴를 위한 톤 */ .rl-mnav-bottomtab__lbl { font-size: 9.5px; font-weight: var(--rl-fw-500); letter-spacing: 0.02em; line-height: 1.2; word-break: keep-all; overflow-wrap: break-word; } /* 활성 슬롯 색 — 인디케이터 바 없이 primary 색만으로 활성 위치를 표시(§3.6.7). 평소는 흐린 회색이라 활성 슬롯이 자연스럽게 떠오른다. */ .rl-mnav-enabled .rl-mnav-bottomtab__slot.is-on { color: var(--rl-primary); } /* --- Composer Action Bar (§3.6.7 variant) — 글 작성/수정 등 컴포저류 페이지의 하단 고정 액션 바. nav 슬롯(stretch 균등 분할) 대신 작성 보조 액션(사진 등)을 좌측 정렬로 담는 재사용 구조. fixed·768 cap·frosted·safe-area·키보드 회피는 .rl-mnav-bottomtab 기본 룰을 그대로 상속(단일 출처) — 본 modifier는 내부 레이아웃과 액션 버튼 시각만 재정의. 페이지는 rl_render_composer_bar()로 렌더. */ .rl-mnav-enabled .rl-mnav-bottomtab--composer { align-items: center; justify-content: flex-start; gap: var(--rl-space-1); padding-left: var(--rl-space-2); padding-right: var(--rl-space-2); /* 프로스티드 제거 — 페이지 배경색과 동일한 불투명 surface(--rl-surface)로 채워 스크롤 본문 가림(투명 X). 상단 hairline은 --rl-line-2(앱바 하단과 동일 톤). */ background: var(--rl-surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 0.5px solid var(--rl-line-2); } /* --- 컴포저 본문 경계 스크롤 영역(§3.6.7) — 문서 전체가 아니라 앱바와 액션 바 "사이"만 스크롤. 네이티브 컨테이너 스크롤이라 캐럿이 바 아래로 숨지 않고(컨테이너 하단=바 상단), 키 입력마다 흔들리지 않는다. 키보드 노출 시 --rl-kb-inset(rl-keyboard-state.js 단일 게시)을 bottom에 더해 스크롤 영역 하단을 키보드 위(액션 바 상단)로 끌어올린다. 키보드 닫힘 시 변수=0이라 기본 위치(바 상단). */ .rl-composer-scroll-area { position: fixed; left: 50%; /* translateY(--rl-vv-shift) — App Shell viewportShift 보정. iOS가 포커스/주소창으로 visual viewport를 패닝(vvTop>0)하면 fixed인 본 영역이 가시영역 밖으로 밀리므로 패닝량만큼 되돌린다. 단일 출처 rl-keyboard-state.js(--rl-vv-shift), 미게시 시 0(현행). translateX는 cap 정렬 유지. */ transform: translateX(-50%) translateY(var(--rl-vv-shift, 0px)); width: 100%; max-width: var(--rl-page-container); top: calc(var(--rl-h-appbar) + env(safe-area-inset-top, 0px)); /* 하단 오프셋 = 컴포저 바 상단. 바는 padding-bottom: --rl-safe-bottom-capped(line 579)로 홈 인디케이터를 비우므로, 스크롤 영역도 raw env가 아닌 동일 capped 토큰을 써야 정확히 바 상단에 닿는다(드리프트 금지). raw env면 build<5(env=0)에서 마지막 줄이 바 뒤로 가리고, build>=5 노치(env>30)에서 capped와 4px 어긋난다. */ bottom: calc(var(--rl-h-bottomtab) + var(--rl-safe-bottom-capped, 0px) + var(--rl-kb-inset, 0px)); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; /* 타이핑 시 캐럿이 바로 위 액션 바에 붙지 않게 — 네이티브 caret-into-view가 이만큼 위에서 멈춤(강제 스크롤 없음). */ scroll-padding-bottom: var(--rl-space-3); padding-left: var(--rl-page-padding-x); padding-right: var(--rl-page-padding-x); } /* 키보드 노출 시 컴포저 바는 숨기지 않고 키보드 위에 유지 — 슬라이드다운(기본 BottomTab kb-open) 무효화. translateY는 --rl-kb-inset(rl-keyboard-state.js 단일 게시)으로 키보드 높이만큼 위로. translateX(-50%)는 카드 cap 정렬(page-shell.css §5)과 같은 transform 속성을 공유하므로 함께 명시(누락 시 X 시프트 소실). */ #thema_wrapper.rl-mnav-enabled.rl-mnav-kb-open .rl-mnav-bottomtab--composer { /* translateY = -kbInset(키보드 위로 리프트) + vv-shift(패닝 보정). 둘 다 rl-keyboard-state.js 단일 게시. */ transform: translateX(-50%) translateY(calc(-1 * var(--rl-kb-inset, 0px) + var(--rl-vv-shift, 0px))); pointer-events: auto; /* 키보드 위로 올라간 동안엔 홈 인디케이터 safe-area 패딩이 불필요(인디케이터는 키보드 뒤). 그대로 두면 바와 키보드 사이에 safe-area만큼 큰 공백이 생긴다 — kb-open 시 0으로. */ padding-bottom: 0; } /* 키보드 위로 올라간 컴포저 바는 safe-area 패딩이 0이므로(위 룰), 스크롤 영역 하단도 safe를 빼고 바 높이+키보드 높이만 비운다(안 그러면 스크롤 끝과 바 사이에 safe만큼 빈 띠). */ #thema_wrapper.rl-mnav-enabled.rl-mnav-kb-open .rl-composer-scroll-area { bottom: calc(var(--rl-h-bottomtab) + var(--rl-kb-inset, 0px)); } .rl-mnav-bottomtab__action { -webkit-appearance: none; appearance: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: var(--rl-space-1); height: var(--rl-h-bottomtab); padding: 0 var(--rl-space-2); /* 작성 보조 액션 — 평소 후퇴(흐린 회색·작고 가벼운 라벨), 터치/호버 시 primary로 등장(§3.6.7 색 정책 정합). */ color: var(--rl-text-3); font-size: var(--rl-fs-caption); font-weight: 400; cursor: pointer; transition: color var(--rl-dur-micro) var(--rl-ease); } /* 아이콘 — 얇은 스트로크(1.5)·22px. stroke는 CSS 단일 관리(svg inline stroke-width 부여 금지). */ .rl-mnav-bottomtab__action svg { width: 22px; height: 22px; stroke-width: 1.5; color: var(--rl-text-4); } .rl-mnav-bottomtab__action:active, .rl-mnav-bottomtab__action:active svg { color: var(--rl-primary); } .rl-mnav-bottomtab__action:disabled { opacity: .45; cursor: default; } .rl-mnav-bottomtab__action:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: -2px; } @media (hover: hover) { .rl-mnav-enabled .rl-mnav-bottomtab__action:hover, .rl-mnav-enabled .rl-mnav-bottomtab__action:hover svg { color: var(--rl-primary); } } /* --- 본문 wrapper bottom padding (하단 탭 가림 방지). BottomTab 미노출 페이지(Focus Mode 등)는 적용 안 함 — 빈 52px 잔존 차단. */ .rl-mnav-enabled.rl-has-bottomtab .at-body, .rl-mnav-enabled.rl-has-bottomtab #wrapper { padding-bottom: calc(var(--rl-h-bottomtab) + var(--rl-safe-bottom-capped, 0px)); } /* --- BottomTab 미노출 페이지(부페이지: archive 2종 + rl_mock_result 등)는 wrapper가 safe-area를 단독 흡수. 미적용 시 iOS 홈 인디케이터/제스처 바 영역과 본문 밑단 겹침 회귀. 단일 출처: --rl-safe-bottom-capped 토큰. 페이지별 raw env() 직접 사용 금지(G2 정합). 풀스크린 학습 surface(exam/note/quick)는 자체 chrome이 흡수하므로 page-shell.css에서 별도 처리 — 본 룰은 .at-body / #wrapper에만 적용(.rl-fullscreen-modal 스코프 미침). */ .rl-mnav-enabled:not(.rl-has-bottomtab) .at-body, .rl-mnav-enabled:not(.rl-has-bottomtab) #wrapper { padding-bottom: var(--rl-safe-bottom-capped, 0px); } /* --- 가상 키보드 회피 — translateY 100%만으로는 safe-area 패딩 영역이 남아, capped 값을 더해 painted box 전체를 화면 밖으로 보낸다. */ #thema_wrapper.rl-mnav-enabled .rl-mnav-bottomtab { transition: transform var(--rl-dur-base) var(--rl-ease-sheet); } /* page-shell.css §5에서 BottomTab에 translateX(-50%) (카드 cap 768 정렬)가 걸려 있어 transform 속성이 같은 cascade를 공유한다. translateY 단독 지정 시 X 시프트가 사라져 카드 정렬이 깨지고 슬라이드 다운도 안 된다 — 두 변환을 함께 명시. :not(--composer) 필수 — 컴포저 바는 위 룰(키보드 위로 lift)과 명시도가 같아, 제외하지 않으면 소스 순서상 뒤인 본 슬라이드다운 룰이 이겨 컴포저 바가 화면 밖으로 숨겨진다(과거엔 inline JS가 이겨 가려졌지만 CSS 단일화 후 충돌 노출). 일반 BottomTab만 슬라이드다운, 컴포저는 lift 유지. */ #thema_wrapper.rl-mnav-enabled.rl-mnav-kb-open .rl-mnav-bottomtab:not(.rl-mnav-bottomtab--composer) { transform: translateX(-50%) translateY(calc(100% + var(--rl-safe-bottom-capped, 0px))); pointer-events: none; } /* 키보드 노출 시 BottomTab 예약 여백만 정확히 0으로 — 페이지 고유 padding·폼 여백·safe-area 토큰은 미오염. */ #thema_wrapper.rl-mnav-enabled.rl-has-bottomtab.rl-mnav-kb-open .at-body, #thema_wrapper.rl-mnav-enabled.rl-has-bottomtab.rl-mnav-kb-open #wrapper { padding-bottom: 0; } /* --- 푸터 축소: 약관/사업자 블록은 신 UI 활성 시 숨김. 푸터 마크업은 tail.php에서 유지하되 시각만 숨겨, kill switch off로 즉시 회귀 가능. 사업자정보 노출 의무는 별도 페이지(회사소개 등)로 위임 — PROD 반영 전 동선 확인 선행. */ .rl-mnav-enabled .at-footer { display: none !important; } /* --- .at-go(스크롤 탑/맨아래 fab) 숨김. BottomTab(z=10, 하단 52px+safe-area)과 좌표·z-index가 충돌해 가려지고 클릭 영역이 겹침. 모바일 앱형 UI에서는 OS 스크롤 제스처가 자연스러우므로 fab 자체를 비노출. */ .rl-mnav-enabled .at-go { display: none !important; } /* --- 마우스(hover-capable + fine pointer) 환경에서만 hover 효과 `(pointer: fine)` 추가로 모바일 Safari/WebView 터치 후 sticky hover 잔존 차단 — 터치는 :active만 담당. :focus-visible(키보드 포커스)·:active는 환경 무관 적용되도록 본 가드 밖에 둠. */ @media (hover: hover) and (pointer: fine) { .rl-mnav-enabled #mobile_nav_sub li a:hover { color: var(--rl-text); } .rl-mnav-enabled .rl-mnav-appbar__btn:hover { color: var(--rl-primary); } .rl-mnav-enabled .rl-mnav-bottomtab__slot:not(.is-on):hover { color: var(--rl-primary); } } /* (flat 전환으로 frosted/blur 폴백 블록 제거 — 바 surface는 상시 불투명 --rl-surface라 backdrop-filter 미지원·reduce-transparency 분기가 불필요해졌다.) */ /* --- prefers-reduced-motion 존중. .rl-mnav-bottomtab은 id-prefix 셀렉터(#thema_wrapper.rl-mnav-enabled)로 transition을 받으므로 동일 specificity로 override 필요. */ @media (prefers-reduced-motion: reduce) { .rl-mnav-enabled .rl-mnav-appbar, .rl-mnav-enabled .rl-mnav-appbar__btn, .rl-mnav-enabled .rl-mnav-bottomtab__slot { transition: none; } #thema_wrapper.rl-mnav-enabled .rl-mnav-bottomtab { transition: none; } }