/** * 주짓수메이트 - Martial Arts Mastery UI System * 전문적이고 세련된 도장 관리 시스템 * * ⚠ hover 규약 (2026-08-11 사용자 확정 A안) — 모든 `:hover` 규칙은 `@media (hover: hover)` 안에 둔다. * 마우스 없는 기기는 탭한 요소에 :hover 를 걸고 **다음 탭까지 유지**한다(sticky hover) — 무가드로 두면 * 누르지도 않은 셀렉트·칩·버튼에 emerald 테두리가 남아 「선택됨」으로 읽힌다(실사용 신고). * 신규 hover 도 예외 없이 가드 안에. 무가드 `:hover` 재도입 ❌ (검사 = frontend-guide §28). */ /* ======================================== 1. DESIGN TOKENS - Color System ======================================== Brand Mono (Strict): Emerald(var(--color-primary-600)) + Soft Dark(var(--color-slate-600)) 2색 기본. 시맨틱 Error(#ef4444)는 Toast/Form error 등 최소 사용. 본문 Warning/Info 토큰은 모두 Slate neutral 매핑(amber/indigo 폐지). Toast 는 --status-success/-error 2색만 사용 (--toast-* 토큰 2026-05 제거). 2026-08-09 C안: Toast 면은 흰 면 + hairline — -bg tint 소비 종료, 상태색은 dot 한 점. ======================================== */ /* 다크테마 폐지 (2026-08-23 UI 감사 사용자 확정) — `[data-theme="dark"]` 2블록(중복 선언)을 제거했다. 4개 layout 이 `data-theme=${theme ?: 'light'}` 를 내리지만 **theme 를 dark 로 만드는 경로가 코드에 없다** (서버 모델 속성 0 · JS 토글 0). 되살리려면 컨트롤러·토글 UI 부터 새로 만들어야 하므로 CSS 복원만으로는 ❌ */ /* `.section-header` 삭제 (2026-08-23 UI 감사) — 사용처는 랜딩 5페이지뿐인데 랜딩은 style.css 를 로드하지 않는다(2026-08-12 링크 폐지, landing.css 가 자기 것을 소유). 재도입 ❌ */ /* 키오스크 레거시 3규칙 삭제 (2026-08-23 UI 감사) — `.attendance-clock`/`-date`/`-digit.filled`. 클래스는 kiosk.html 에서 살아 있으나 이 선언들은 전부 사문이었다(page-local `.aurora-*` 가 !important 로 전부 덮음). 남은 값이 폐지된 다크테마 전제(rgba(255,255,255,.05)·--text-tertiary)라 다른 화면이 재사용하면 흰 면 위 흰 글자가 된다. 기본 스타일이 필요해지면 kiosk page-local 을 참조해 새로 세울 것 — 이 값 복원 ❌ */ :root { /* ── Brand Primary - Emerald ── */ --color-primary-50: #ecfdf5; --color-primary-100: #d1fae5; --color-primary-200: #a7f3d0; --color-primary-300: #6ee7b7; --color-primary-400: #34d399; --color-primary-500: #10b981; --color-primary-600: #059669; --color-primary-700: #047857; --color-primary-800: #065f46; --color-primary-900: #064e3b; /* ── Brand Secondary - Emerald Light (Primary 와 동일, 호환 alias) ── */ /* ── 이용권 뱃지 dot 4-shade 램프 SSOT (2026-07-04, 구 6곳 scoped 중복 통합) ── 소비처: .badge-*::before · .detail-pass-type-chip--* · pass-extension .pt-badge · payments/index .pay-type-badge · plan-form-modal.js TYPE_META. 램프 변경은 여기 한 곳만. */ --pass-dot-period: var(--color-primary-300); --pass-dot-count: var(--color-primary-500); --pass-dot-weekly: var(--color-primary-700); --pass-dot-day: var(--color-primary-900); /* ── Brand Base - Soft Dark (Slate) ── */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; /* Level Colors - 띠 색상 팔레트 (slate 외엔 도메인 전용 hex) */ /* Gradient - 수평 방향 (Emerald 톤) */ /* Background Colors — 시맨틱 alias → palette ref */ --bg-primary: #ffffff; --bg-secondary: var(--color-slate-50); --bg-tertiary: var(--color-slate-100); --bg-hover: #f0fdf4; /* Text Colors — 시맨틱 alias → palette ref */ /* 주 잉크 = slate-900 단일 (2026-08-31 톤 수렴 — 구 slate-800): 값·제목이 900, 본문이 800 으로 갈려 있었는데 두 단 차이가 위계로 읽히기엔 미세해 잡음이었다(사용처 800 계열 134 vs 900 계열 185 실측). landing.css :root 사본도 같은 값 — 한쪽만 바꾸기 ❌ (signup-complete 가 두 시트를 다 로드). 800 복귀 ❌ */ --text-primary: var(--color-slate-900); --text-secondary: var(--color-slate-600); --text-tertiary: var(--color-slate-400); --text-inverse: #ffffff; /* Border Colors */ --border-default: var(--color-slate-200); --border-subtle: rgba(0, 0, 0, 0.04); --border-strong: var(--color-slate-300); --border-hairline: #eaecef; /* D.MONO CONCIERGE 카드/모달 1px 외곽선 */ /* D.MONO 박제값 2종 — hairline 과 같은 등급인데 변수가 없어 24곳에 생짜 hex 로 흩어져 있던 것을 승격 (2026-08-12 UI 감사). 값 불변 = 시각 변화 0. 램프 변경은 이제 여기 한 곳. */ --border-divider: #f4f5f7; /* 카드 헤더 divider · 카드 안쪽 행 선 (외곽 hairline 보다 옅음) */ --bg-row-hover: #fafbfc; /* 테이블 행 · 클릭 가능한 행 hover */ /* auth 단일 컬럼 폭 (ADR 0025 카드리스) — 5곳 하드코딩 통합 (2026-07-30) */ --auth-col-width: 460px; /* Accent - Primary (Emerald) — 시맨틱 alias → palette ref */ --accent-primary: var(--color-primary-600); --accent-primary-hover: var(--color-primary-700); --accent-primary-subtle: rgba(5, 150, 105, 0.08); /* Status Colors — Emerald palette ref */ /* 텍스트 신호 전용 토큰 — 흰 면 위 emerald-600 은 대비 3.77:1 로 AA 미달이라 700(5.48)로 내렸다 (ADR 0495, 2026-08-26 사용자 확정 A안 · 시안 `brand-color-contrast`). 사용처가 `color:` 2곳뿐이라 토큰째 바꿔도 «면»에는 안 닿는다 — 버튼 채움·칩 배경의 emerald-600 은 불변. 600 복귀 ❌ */ --status-success: var(--color-primary-700); /* Brand Mono Strict (2026-04 재설계, 2026-05 Toast 2색 정리): 본문(뱃지/배너/모달/캘린더 등)에서는 amber/indigo 폐지 → Slate neutral. Toast 도 4색 → 2색 정리 (success+info=Emerald, error+warning=Red). "좋음/나쁨" 두 축. warning/info 클래스는 API 호환만 유지 — 색은 success/error 와 동일. */ --status-error: #ef4444; --status-error-bg: #fef2f2; --status-error-border: #fee2e2; /* 구 지정 자리 = 「옅은 red 면(`--status-error-bg`) «위»의 글자」 — 그런데 §시맨틱 색이 「red tint 면 = 앱 전체 0곳」으로 박제해 그 면이 «존재하지 않는다». 2026-09-04 UI 감사에서 흰 면 위에 이 토큰을 쓰던 12곳을 [[0495]] 지정대로 `-ink` 로 옮겼고, **남은 유일한 자리 = hover 진하게**(`-ink` → 이 값. 3곳: `.card-action-link.danger:hover` · `.att-late-badge:hover` · `.promo-unresolved-jump:hover`). 흰 면 «기본» 글자에 재도입 ❌ */ --status-error-text: #991b1b; /* 흰 면 위 red 글자 전용 — `--status-error`(#ef4444)는 흰 면에서 3.76:1 로 AA 미달인데 border-color·background·box-shadow 에도 쓰여(실측 11+2+3곳) 토큰째 못 바꾼다. 그래서 «흰 면 글자»만 분리해 red-600(4.83:1) 로 내렸다 (ADR 0495 · 2026-08-26 사용자 확정 A안). ⚠ 세 red 토큰의 자리가 다르다 — 면·테두리 = `--status-error` / 옅은 면 위 글자 = `--status-error-text` / **흰 면 위 글자 = 이것**. 면에 이 토큰 쓰지 ❌ */ --status-error-ink: #dc2626; /* Typography */ --font-sans: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-8: 2rem; /* Border Radius - Clean Scale */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadow Scale - 미니멀 */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); /* Transitions - 부드러운 */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-smooth: 0.25s ease; /* Layout */ --top-nav-height: 64px; /* 읽기 컬럼 상한 (구 --container-max 1400px 승계 — 값 동일 = 시각 회귀 0). 이름이 바뀐 이유 = 소유 대상이 「페이지 컨테이너」에서 「본문 읽기 컬럼」으로 옮겨졌다. 페이지는 이제 창 폭을 그대로 쓰고(.page-container max-width 없음), 이 값은 .page-content 격자의 **첫 트랙**만 잡는다. 가로로 늘어나서 이득인 블록만 `.is-wide` 로 둘째 트랙까지 스팬한다. */ --reading-max: 1400px; --content-padding: 24px; /* 32→24 (2026-06-15) — admin/system 바깥 여백 압축. page-container + top-nav 좌우 정렬 동시 적용 */ --sidebar-width: 240px; --sidebar-header-height: 75px; /* Borders & Backgrounds */ --border-light: #f1f5f9; --bg-card: #ffffff; /* Z-Index */ --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Premium Redesign Tokens ── */ /* Glass Morphism */ /* Glow Effects Extended */ /* Animation Tokens */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* 토스트·바텀시트 감속 (오버슈트 없음) */ --ease-vt: cubic-bezier(0.32, 0.72, 0, 1); /* View Transition push/pop (iOS 곡선, 값 박제) */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 강한 오버슈트 (transition-bounce 짝) */ --duration-medium: 0.4s; --stagger-delay: 0.06s; /* Surface Colors (Glass layers) */ /* Sidebar Premium */ --sidebar-bg: #ffffff; --sidebar-border: #e5e7eb; /* Card Premium */ --card-bg: #ffffff; --card-border: #e5e7eb; } /* ======================================== 1.1 DARK THEME - 출석체크 등 몰입형 페이지 ======================================== */ /* ======================================== 2. Reset & Base ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* hidden 속성은 display 를 지정하는 클래스(.btn flex 등)보다 항상 우선. author 클래스(.btn{display:inline-flex})가 UA [hidden]{display:none} 을 덮어쓰는 footgun 차단. */ [hidden] { display: none !important; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 모바일 텍스트 자동 확대(iOS Safari text autosizing · Chrome Android font boosting) 차단. 기본값 auto 는 블록 폭·텍스트 양으로 배율을 스스로 정하고, DOM 이 바뀌어 리플로우가 일어나면 (스텝 전환·모달 open 시 body overflow:hidden 등) 배율을 다시 계산한다 → "버튼 눌렀더니 갑자기 글자만 커짐". 우리 타이포는 전부 px 박제라 자동 배율은 이득 없이 위계만 깨뜨린다. 100% (none ❌ — 사용자 확대 접근성 보존) */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* body 와 동일 배경 — 페이지 이동 시 html 기본 흰색이 잠깐 비쳐 번쩍이는 것 방지 */ background: var(--bg-secondary); /* 스크롤바 자리 항상 확보 — 짧은(스크롤 없음)↔긴(스크롤 있음) 페이지 이동 시 스크롤바가 생겼다 사라지며 본문이 가로로 출렁이는 점프 차단. (macOS 오버레이 스크롤바엔 무해, Windows/항상표시에 효과) */ scrollbar-gutter: stable; } /* ============================================================ 안전영역 · 브라우저 바 토큰 (2026-09-14 사용자 확정 A안 · 시안 ios-install-keep-or-block) layout 들이 `viewport-fit=cover` 를 켠 순간 문서는 노치·홈 인디케이터 «아래»까지 깔린다. 그 자리를 피하는 몫 중 **여러 화면이 같은 값을 읽어야 하는 둘**을 여기서 소유한다 — 소비처마다 다시 조립하면 같은 값이 화면마다 갈린다(이 앱이 반복해서 없애 온 page-local 사본 패턴). 단발 인셋(셸 자기 여백 등)은 소비처가 `env()` 를 직접 쓴다. ① `--stage-top` / `--stage-h` = 무대(common.js §1.4 OverlayStage)의 **위 인셋 반영판**. 무대를 «직접» 지는 풀스크린 패널(top: var(--vvt) + height: var(--vvh))은 화면 맨 위에서 시작하므로 cover 를 켜면 헤더(취소·저장)가 상태바 밑으로 들어간다. 배경 딤(`.modal-overlay` 등)은 **그대로 `--vvt` 를 쓴다** — 딤까지 내리면 노치 띠만 안 덮인 채 남는다. ⚠️ **바텀네비를 브라우저 바 «위»로 띄우는 `--shell-lift` 는 넣지 않는다** ([[0733]] C안 = 보류) — iOS 26 의 하단 바는 콘텐츠 «위에 떠 있는» 플로팅이라 `visualViewport` 가 높이를 못 재는 경우가 있고([[0635]] 가 같은 함정으로 한 번 틀렸다), 창이 뜨던 원인 자체는 [[0733]] 의 앱 영역 로그인이 없앴다. 필요해지면 **실기기로 정확히 재서** 넣는다 — 추정값 ❌. ============================================================ */ :root { /* 무대가 «이미» 인셋 아래에서 시작했으면(키보드가 떠 화면이 밀려 올라간 경우 `--vvt` > 0) 그만큼은 빼고 «모자란 몫»만 더한다 — 무조건 더하면 키보드가 뜬 순간 패널이 노치 높이만큼 한 번 더 내려가 보이는 영역을 놓친다 */ --stage-inset-top: max(0px, calc(env(safe-area-inset-top, 0px) - var(--vvt, 0px))); --stage-top: calc(var(--vvt, 0px) + var(--stage-inset-top)); --stage-h: calc(var(--vvh, 100vh) - var(--stage-inset-top)); /* ② `--shell-header-h` = **모바일 헤더의 실제 높이**. 베이스 56px 은 cover 를 켠 순간 거짓이 된다 (헤더가 노치 몫을 자기 안에 받아 56 + 인셋이 된다). 헤더 «아래»에 붙는 sticky 툴바·저장바가 상수 56px 을 쓰면 그 차이만큼 헤더 밑으로 파고든다 — 자리를 재는 쪽은 전부 이 토큰을 쓴다. `56px` 상수 복귀 ❌ (2026-09-14 사용자 확정 A안 · 시안 ios-install-keep-or-block) */ --shell-header-h: calc(56px + env(safe-area-inset-top, 0px)); } /* 가로 모드 좌우 인셋 — `viewport-fit=cover` 는 «옆»도 연다. 노치가 있는 폰을 눕히면 한쪽 변 59px 이 카메라 컷아웃 밑으로 들어가므로 문서 본문이 그만큼 비켜 앉는다. 세로 모드·노치 없는 기기는 인셋 0 이라 렌더 변화 0. 전폭 셸(바텀네비 등)은 면이 이어져야 해서 대상 ❌ (2026-09-14) */ @media (orientation: landscape) { body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* ============================================================ 페이지 전환 — Cross-document View Transitions 서버사이드 렌더(MPA) 네비게이션 = 전체 리로드 → 흰 화면 번쩍. 지속 셸(사이드바·헤더·네비)은 제자리 고정, 본문만 부드럽게 전환. 미지원 브라우저(Firefox 등)는 기존 즉시 이동으로 graceful degrade. ============================================================ */ @view-transition { navigation: auto; } /* 지속 셸 — 전환 그룹에서 분리(named)해 본문(root)에서 떼어냄. 관리자: sidebar / mobile-header / mobile-bottom-nav 회원: top-nav / member-bottom-nav (페이지당 각 1개 → 이름 충돌 없음) */ .sidebar { view-transition-name: vt-admin-sidebar; } .mobile-header { view-transition-name: vt-mobile-header; } .mobile-bottom-nav { view-transition-name: vt-mobile-nav; } .top-nav { view-transition-name: vt-member-topnav; } .member-bottom-nav { view-transition-name: vt-member-nav; } /* 드로어 모드(≤1024px)에선 사이드바를 지속 셸에서 제외 — 닫힌 드로어는 transform: translateX(-100%) 로 화면 밖인데, 이름을 유지하면 스냅샷 그룹이 뷰포트 왼쪽(0,0 240×844)에 잡혀 잉크(그림자 등)가 전환 내내 왼쪽 세로 띠로 노출된다. 드로어는 화면 밖이라 '지속 셸 고정' 이득도 없음 — root 에 포함시켜 자연스럽게 본문과 함께 전환 (2026-07-17 모바일 전환 회색 띠 버그) */ @media (max-width: 1024px) { .sidebar { view-transition-name: none; } } /* 회원 PWA 모바일(≤768px)에선 상단 바를 지속 셸에서 제외 — 세 탭의 상단 바가 서로 다르다: 홈=.top-nav 64px / 내 정보=.mobile-header 56px(top-nav 숨김) / 결제=.pay-head(이름 없음). 짝이 없는 쪽에서 animation:none 은 '고정'이 아니라 하드컷으로 작동했다 — 도착 바가 0ms 에 통째로 즉시 등장하고, 떠나는 바는 320ms 얼어붙어 있다가 마지막 프레임에 소멸(상단 밴드만 하드컷 2회). 게다가 본문 시작선이 56↔64px 라 슬라이드해 들어오는 본문이 8px 어긋났다. → 이름을 주지 않아 상단 바가 root 스냅샷에 포함 = 화면이 한 덩어리로 push/pop. iOS 와 같은 분담(네비 바는 화면과 함께 이동, 탭 바만 고정)이고, 이미 그렇게 동작하던 .pay-head 에 세 탭이 정렬된다. 드로어 모드 .sidebar 와 같은 계열 예외. 데스크톱은 세 페이지 모두 .top-nav 라 짝이 맞으므로 불변(즉시 스왑 유지). 관리자(admin)는 .mobile-header 가 전 페이지 공통이라 대상 아님 — .member-portal 스코프 필수. (2026-08-11 사용자 확정 A안, 시안 static/mockups/member-tab-transition-motion.html) */ @media (max-width: 768px) { .member-portal .top-nav, .member-portal .mobile-header { view-transition-name: none; } } /* 섹션 탭 바(.tabs)는 지속 셸이 아니다 — 2026-08-04 잔상 수정으로 vt-section-tabs 폐지. 구 설계(2026-06-23)는 "탭 클릭 = 페이지 이동" 전제로 탭 바를 사이드바처럼 고정했으나, ① payments/history 가 index 라디오 탭으로 흡수되며 라우팅 탭()이 코드베이스에서 0개가 됐고(.tabs 4곳 전부 인페이지 radio 필터) 고정의 목적이 소멸 ② 고정된 탭 바는 animation:none 으로 0ms 즉시 스왑돼, 본문(root)의 순차 페이드 (110ms out → 150ms in)와 어긋나 **새 탭 바가 아직 살아있는 옛 본문 위에 겹쳐** 그려졌다 ③ 양쪽 다 탭이 있으면(결제 2탭 → 이용권 5탭) 옛 스냅샷이 새 그룹 폭으로 늘어나 4배 확대된 흐릿한 유령으로 전환 내내 남았다. 이를 막으려던 ::view-transition-old(vt-section-tabs):not(:only-child){display:none} 은 실효 없음(실측). → 이름을 주지 않아 탭 바가 root 스냅샷에 자연 포함 = 본문과 같은 순차 페이드(겹침 0). 라우팅 탭이 다시 생기면 섹션별 이름(vt-tabs-{section})으로 재도입할 것 — 전역 단일 이름 ❌. */ /* 셸은 애니메이션 없이 즉시 스왑 — 흔들림 없이 단단하게 고정. (active 메뉴 하이라이트만 즉시 바뀜) */ ::view-transition-old(vt-admin-sidebar), ::view-transition-new(vt-admin-sidebar), ::view-transition-old(vt-mobile-header), ::view-transition-new(vt-mobile-header), ::view-transition-old(vt-mobile-nav), ::view-transition-new(vt-mobile-nav), ::view-transition-old(vt-member-topnav), ::view-transition-new(vt-member-topnav), ::view-transition-old(vt-member-nav), ::view-transition-new(vt-member-nav) { animation: none; } /* 본문(root) — 겹침 제로 순차 페이드. 셸(named)은 고정. 이전 화면(old)이 '완전히' 사라진 뒤(110ms out)에야 새 화면(new)이 페이드인(110ms 지연). 두 화면이 동시에 반투명으로 노출되는 구간이 0이라, 구조가 다른 두 페이지가 함께 비치던 잔상(ghosting)을 '완화'가 아니라 원천 제거. 갭 순간은 html 배경=페이지색 이라 흰 번쩍임 없이 페이지색 한 겹만 스침(즉시 스왑의 '탁' 거슬림도 페이드라 완화). (2026-07-06, 구 '겹침 최소화' 크로스페이드 supersede — 잔상 원천 제거) */ ::view-transition-old(root) { animation: 110ms ease-in both vt-root-out; } ::view-transition-new(root) { animation: 170ms var(--ease-out-quint) 110ms both vt-root-in; } @keyframes vt-root-out { to { opacity: 0; } } /* 새 화면 = 페이드 + 8px 상향 착지 (ADR 0542, 2026-08-31 사용자 확정 — 구 「페이드만」 supersede). 모바일 슬라이드 전환과 같은 가족의 절제판. 타입 미지정(reload·판정 불가)도 동일 — 방향 슬라이드 타입이 얹히면 아래 모바일 규칙이 이긴다. 잔상 원천 제거(순차, 겹침 0)는 불변. */ @keyframes vt-root-in { from { opacity: 0; transform: translateY(8px); } } /* 모바일 방향 슬라이드 — iOS Push/Pop (2026-07-15, A안 사용자 확정) fragments/vt-direction.html 이 pageswap/pagereveal 에서 네비 방향을 감지해 transition types(slide-forward/slide-back + tab-forward/tab-back)를 얹는다. 매칭 selector 가 여기(모바일)뿐이라 데스크톱·타입 미지정(reload·판정 불가)·미지원 브라우저는 위 순차 페이드 그대로. 두 스냅샷 모두 불투명(body bg 포함)이라 크로스페이드 잔상 없음 — 잔상 원천 제거 설계 유지. mix-blend-mode: normal 필수 — UA 기본 plus-lighter 는 불투명 두 장이 겹치면 백화(白化). */ @media (max-width: 768px) { /* 앞으로(push) — 새 화면이 오른쪽에서 시트처럼 진입, 이전 화면은 28% 물러나며 디밍. 셸 네비(tab-forward)도 동일 push — 전 구간 push/pop 단일 문법 (2026-07-16 사용자 확정 A안, ADR 0054 — 구 "셸 네비=30px 마이크로 슬라이드" ADR 0052 supersede. tab-* 타입 이름은 vt-direction 판정·data-vt-dir 힌트 호환 위해 유지, 모션만 동일). */ html:active-view-transition-type(slide-forward)::view-transition-old(root), html:active-view-transition-type(tab-forward)::view-transition-old(root) { animation: 340ms var(--ease-vt) both vt-push-recede; mix-blend-mode: normal; } html:active-view-transition-type(slide-forward)::view-transition-new(root), html:active-view-transition-type(tab-forward)::view-transition-new(root) { animation: 340ms var(--ease-vt) both vt-push-enter; mix-blend-mode: normal; box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16); } /* 뒤로(traverse back·tab-back) — 현재 화면이 오른쪽으로 퇴장, 이전 화면이 복귀 (pop). z-index: 나가는 화면(old)이 위 — 기본 페인트 순서(new 위)의 역전 필요 */ html:active-view-transition-type(slide-back)::view-transition-old(root), html:active-view-transition-type(tab-back)::view-transition-old(root) { animation: 320ms var(--ease-vt) both vt-pop-exit; mix-blend-mode: normal; z-index: 1; box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16); } html:active-view-transition-type(slide-back)::view-transition-new(root), html:active-view-transition-type(tab-back)::view-transition-new(root) { animation: 320ms var(--ease-vt) both vt-pop-return; mix-blend-mode: normal; } } @keyframes vt-push-enter { from { transform: translateX(100%); } } @keyframes vt-push-recede { to { transform: translateX(-28%); filter: brightness(0.92); } } @keyframes vt-pop-exit { to { transform: translateX(100%); } } @keyframes vt-pop-return { from { transform: translateX(-28%); filter: brightness(0.92); } } /* 모션 최소화 설정 — 전환 애니메이션 전부 끄고 즉시 스왑 */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ============================================================ 스와이프 뒤로가기 — 손가락 추종 레이어 (2026-07-19) 제어 = static/js/swipe-back.js · 스냅샷 = fragments/swipe-back.html 값(-28% · brightness .92 · 320ms · cubic-bezier · box-shadow)은 위 pop 모션(vt-pop-return/exit)과 동일 — 탭 이동과 손 이동이 같아 보여야 한다. ============================================================ */ .swipe-back-layer { position: fixed; left: 0; top: 0; /* top/width/height = JS 가 레이아웃 뷰포트 실측으로 지정 (셸 높이만큼 인셋). left+right 로 늘리지 않는 이유 = position:fixed 기준 박스가 레이아웃 뷰포트와 갈리는 환경이 있어(본문과 좌표계 불일치) 픽셀로 못 박는다. */ z-index: 150; /* 셸(--z-sticky 200) 아래, 본문 위 */ overflow: hidden; /* iframe 의 셸 영역을 잘라낸다 */ visibility: hidden; pointer-events: none; transform: translateX(-28%); filter: brightness(0.92); will-change: transform, filter; background: var(--bg-primary, #fff); } .swipe-back-layer.is-visible { visibility: visible; } .swipe-back-frame { position: absolute; left: 0; width: 100%; border: 0; display: block; background: var(--bg-primary, #fff); /* height/top = JS (원래 뷰포트 크기 그대로 렌더 후 셸만큼 끌어올림) */ } /* 드래그 중인 현재 화면 — 레이어 위에서 오른쪽으로 퇴장 (pop 의 old 역할) */ html.swipe-back-active { overflow-x: hidden; } html.swipe-back-active #main-content { position: relative; z-index: 160; will-change: transform; box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16); } /* 회원 PWA 상단 바 = 본문과 한 덩어리로 퇴장 (ADR 0182 로 지속 셸에서 빠졌고, 제스처도 같은 문법 — transform 은 swipe-back.js `movingTopBar()` 가 본문과 같은 값으로 건다). 좌측 그림자를 함께 줘야 본문 그림자가 상단 56px 에서 끊기지 않는다. admin 헤더는 대상 아님(전 페이지 공통 = 고정이 옳다). */ html.swipe-back-active body.member-portal .mobile-header, html.swipe-back-active body.member-portal .top-nav { will-change: transform; box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16); } /* 정착(커밋/취소) 구간에만 트랜지션 — 드래그 중엔 손가락에 즉시 붙어야 한다. 시간은 swipe-back.js 의 SETTLE_MS 와 동일해야 함 */ .swipe-back-layer.is-settling, html.swipe-back-settling #main-content, html.swipe-back-settling body.member-portal .mobile-header, html.swipe-back-settling body.member-portal .top-nav { transition: transform 320ms var(--ease-vt), filter 320ms var(--ease-vt); } @media (prefers-reduced-motion: reduce) { .swipe-back-layer.is-settling, html.swipe-back-settling #main-content, html.swipe-back-settling body.member-portal .mobile-header, html.swipe-back-settling body.member-portal .top-nav { transition: none; } } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-normal); line-height: 1.5; color: var(--text-primary); background: var(--bg-secondary); /* 화면 높이 = vh fallback + dvh override (2026-08-12 「헛스크롤」 제거). 모바일에서 100vh = 주소창이 숨은 「큰 뷰포트」라, 주소창이 보이는 동안 문서가 화면보다 60~90px 더 길어진다 → 콘텐츠가 짧아 스크롤할 게 없는 페이지(관원 프로필·결제·회원목록 등) 에서도 "볼 것 없이 화면만 스르륵 내려가는" 헛스크롤이 항상 생김. dvh 는 현재 뷰포트를 그대로 따라가 헛여백이 0. 아래 화면높이 컨테이너 전부 같은 규칙 (frontend-guide §모바일 시트 높이 동일 패턴). */ min-height: 100vh; min-height: 100dvh; /* 한국어 줄바꿈 — 어절(공백) 단위로 줄바꿈하여 조사·의존명사가 분리되지 않도록. 긴 영어 단어/URL은 overflow-wrap으로 컨테이너 넘침 방지. (frontend-guide §22) */ word-break: keep-all; overflow-wrap: break-word; } a { color: var(--accent-primary); text-decoration: none !important; } a:focus, a:active, a:visited { text-decoration: none !important; } @media (hover: hover) { a:hover { text-decoration: none !important; } } @media (hover: hover) { a:hover { color: var(--accent-primary-hover); } } /* Screen reader only (a11y) — 시각적으로 숨기고 스크린리더에만 노출 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } img { max-width: 100%; height: auto; display: block; } /* 키보드 focus 박제 — 페이지 인라인 .X:focus { outline:none } 가 키보드 진입 시 덮어쓰지 못하도록 접근성 보장. 마우스/터치 focus 는 :focus-visible 매칭 안 되어 영향 없음. ※ input/select/textarea 는 :focus-visible 휴리스틱이 마우스 클릭에도 matches 되어 자체 :focus (border + box-shadow ring) 와 outline 이 동시에 표시되는 이중 테두리 버그 → 제외. 텍스트 컨트롤의 a11y indicator 는 각 컨트롤 :focus 규칙(.form-input/.form-select/.form-textarea/ .float-field input/.ios-item:has(:focus-visible) 등) 이 책임. ※ [tabindex] 는 input/textarea/select 와 .custom-select-trigger 를 명시 제외 — flatpickr 가 date-picker input 에 tabindex="0" 을 주입해 [tabindex] 에 걸리면 자체 ring + outline 이 동시에 표시되는 이중 테두리 회귀가 발생한다 (frontend-guide §27). */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:not(input):not(textarea):not(select):not(.custom-select-trigger):focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 2px; } /* 본문 앵커 안전판 — `#main-content` 는 swipe-back.js 의 transform 대상이자 common.js 의 스크롤 컨테이너 폴백이다(포커스 타깃 아님). skip-link 는 미사용이고(ADR 0072) 고아 `tabindex="-1"` 도 2026-07-31 에 6개 레이아웃에서 제거해 지금은 위 [tabindex] 규칙에 걸리지 않는다. 이 규칙은 누군가 스크립트로 `.focus()` 를 걸거나 tabindex 를 되살렸을 때 본문 전체(수천 px)에 emerald 테두리가 그려지는 것만 막는다. */ #main-content:focus, #main-content:focus-visible { outline: none !important; } /* 프로그램으로 «세워 두는» 포커스 자리 = 키보드 링 ❌ (2026-09-07) `Modal._focusFirst` 는 터치(≤768px)에서 텍스트 입력 자동 포커스가 키보드로 화면을 가리는 걸 피하려 **패널**에 `tabindex="-1"` + `focus()` 를 건다. 탭으로는 갈 수 없는 자리라 「탭해서 여기 왔다」는 링이 거짓 신호이고, 데스크톱은 애초에 이 경로를 안 탄다(첫 입력란/액션을 잡는다). 바로 위 `#main-content` 와 ADR 0227 의 `#payHeadTitle` 이 이미 같은 답을 낸 자리의 **셋째 사례**다 — 폰 풀스크린 모달에서는 그 2px 이 화면 네 변을 통째로 그린다(ADR 0627 대가 절이 「전 모달에 걸리는 별건」으로 남겨 둔 그것 · 2026-09-07 문자 보내기 풀스크린 전환으로 표면화). 포커스 «진입» 자체는 불변 — 스크린리더 낭독·Escape·포커스 복귀 경로는 그대로다. ⚠️ `[tabindex="-1"]` 을 **전역으로** 제외하지 ❌ — roving tabindex 위젯은 -1 자리로 키보드로 실제 이동한다. 여기서 끄는 것은 «모달 패널»이라는 그 park 자리 하나뿐이다. */ .modal-overlay .modal[tabindex="-1"]:focus-visible, .modal-overlay .modal-content[tabindex="-1"]:focus-visible, .modal-overlay[tabindex="-1"]:focus-visible { outline: none !important; } /* ======================================== 3. Typography ======================================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-semibold); line-height: 1.3; color: var(--text-primary); } h1, .h1 { font-size: var(--text-4xl); } h2, .h2 { font-size: var(--text-3xl); } h3, .h3 { font-size: var(--text-2xl); } h4, .h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6, .h6 { font-size: var(--text-base); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-muted { color: var(--text-tertiary); } /* ======================================== 4. Layout ======================================== */ .main-content { flex: 1; margin-left: var(--sidebar-width); /* min-height 제거 — §102 와 동일 이유 (짧은 페이지 하단 빈 공백 차단). bg 는 §102 가 책임. */ background: var(--bg-secondary); } /* 본문 = 「읽기 컬럼 + 남는 폭」 2트랙 격자 (2026-08-23 사용자 확정 B안, 시안 desktop-wide-page-width). 구 `max-width: 1400px` 단일 캡은 27인치(2560)에서 오른쪽 920px 을 통째로 죽였고, 그렇다고 캡을 그냥 풀면 앱의 지배적 어휘인 「라벨 좌 · 값 우」 행(ios-item·내 계정 요약·구독 내역)이 2200px 로 벌어져 라벨과 값이 마주 보지 않는다 (실측 스크린샷 근거). → 기본 자식은 첫 트랙(= 오늘과 같은 1400px)에 그대로 앉고, **가로로 늘어나서 이득인 블록만** `.is-wide` 로 둘째 트랙까지 스팬한다. 첫 트랙 상한이 구 캡과 같은 값이라 `.is-wide` 를 안 붙인 모든 화면의 렌더는 **바이트 단위로 동일**(1440px 10페이지 기하 대조 = 변화 0). ⚠️ `max-width` 로 자식을 캡하는 구현 ❌ — `.page-content` 직계에 `position: fixed` 모달 오버레이가 흔하다(관원 목록 5개·설정 4개). max-width 는 out-of-flow 여부와 무관하게 걸려 `inset: 0` 오버레이를 1400px 로 줄인다. 격자는 fixed 자식을 아이템으로 잡지 않아 이 함정이 구조적으로 없다. ⚠️ `grid-template-columns` 를 `1fr 1fr` 류로 바꾸기 ❌ — 첫 트랙은 상한이지 비율이 아니다. */ .page-content { /* padding 제거 — page-container가 이미 padding 책임 (이중 padding 방지) */ margin: 0; } /* ⚠️ 격자는 **데스크톱(≥769px) 한정** — 모바일 뷰포트는 늘 읽기 컬럼보다 좁아 격자가 줄 이득이 0인데, 대가는 있다: 격자 아이템은 독립 서식 문맥이라 **자식의 margin 이 밖으로 collapse 되지 않는다**. `.page-container` 모바일 padding 을 음수 마진으로 상쇄하는 풀블리드 요소(members/list `.mobile-member-search` `margin: -12px -16px 0` · §모바일 첫 콘텐츠 시작선의 「상쇄값 동기 의무」)가 그 collapse 에 기대고 있어, 전역으로 켜면 관원 목록 모바일이 12px 아래로 밀렸다 (2026-08-23 실측). 미디어쿼리 제거 ❌ · 모바일까지 확대 ❌ */ @media (min-width: 769px) { .page-content { display: grid; grid-template-columns: minmax(0, var(--reading-max)) minmax(0, 1fr); align-content: start; } .page-content > * { grid-column: 1; } /* 전폭 옵트인 — 「칸이 넓어지면 더 많이 보이는」 블록만. 붙이기 전 기준: ① 폭을 먹으면 정보가 늘어나는가(표 컬럼·KPI 칸) → O ② 라벨 좌 · 값 우 행이거나 문단인가 → ❌ (넓어질수록 읽기 나빠진다) 현재 사용처 5곳 = admin/dashboard `.home-glance`(KPI 밴드)·`.home-cards`(전폭 밴드 아래 2열 카드 래퍼) · admin/members/list 데스크톱 표 래퍼 · fragments/member-bulk-register 루트(고정폭 2242px 표) · admin/settings/index `.ios-settings-page`(남는 폭을 다단으로). 결제 확인·이용권 상품·출석 목록은 ①을 만족하지 않아 의도적으로 제외 (탭 전환 시 폭 출렁임 포함). */ .page-content > .is-wide { grid-column: 1 / -1; } } /* 페이지 상단 저장 액션 (frontend-guide §21 단일 표준) admin 편집 페이지 데스크톱 전용 — breadcrumb 다음 / 카드 위에 위치. 모바일은 .mobile-header-save (mobile-shell.js MobileHeaderAction) 가 헤더에 inject. 사이드바 톱 메뉴 편집 페이지(settings/index.html 등): - 데스크톱: position:fixed top:var(--setup-banner-h,0) 로 setup-wrapper 바로 아래 고정 (sidebar 우측에서 viewport 끝까지 stretch). 스크롤과 무관한 절대 고정. - 태블릿(769~1024px): position:sticky; top:var(--setup-banner-h,0) — mobile-header 미노출 구간. - 모바일(≤768px): position:fixed; top:calc(56px + var(--setup-banner-h,0)) — mobile-header + setup-wrapper 아래. sticky 가 환경(iOS Safari 등)에서 의도대로 안 붙는 케이스 박제 차단 + 스크롤해도 헤더 + 액션바 두 줄 항상 노출. .is-dirty 시 backdrop-filter + emerald accent 강조. ── setup-wrapper 와 수직 스택 (2026-05-14) ── .setup-wrapper(sticky top:0 z:20)와 같은 top:0 자리를 점유하면 데스크톱은 setup-wrapper 가, 태블릿(action bar z:15 < setup-wrapper z:20)은 action bar 가 가려졌다. setup-guide.js 가 실측 높이를 --setup-banner-h 로 박제하므로 top 을 그 값만큼 오프셋 → 둘 다 항상 노출. setup-wrapper 가 없거나 dismiss 된 페이지에서는 fallback 0 으로 기존 top:0 동작 유지. */ .ios-settings-actions { position: fixed; top: var(--setup-banner-h, 0px); left: var(--sidebar-width); right: 0; /* setup-wrapper(sticky, z:20)와 같은 paint level 에서 sticky 부착 순간 같이 repaint 되며 1px 흔들리던 현상 차단 → z:30 으로 명확히 우위에 두고 자체 stacking context 분리. will-change: transform 은 의도와 반대로 GPU compositor sub-pixel jitter 를 유발하므로 사용 금지. */ z-index: 30; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 20px; background: #ffffff; border-bottom: 1px solid var(--border-light, #eef0f2); /* reveal-on-dirty(아래) 접힘 애니메이션 기준 — 펼친 상태의 상한값. */ max-height: 200px; /* setup-wrapper 높이 변화(expand/collapse) 시 top 이 매끄럽게 따라가도록 트랜지션. 스크롤 중 jitter 유발 없도록 짧고 가볍게. max-height/padding/opacity 는 dirty 토글 시에만 변하므로 스크롤 jitter 와 무관. */ transition: top 0.15s ease-out, max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, border-color 0.28s ease, visibility 0s; } .ios-settings-actions .btn-primary { min-width: 88px; justify-content: center; } .ios-settings-actions .btn-secondary { min-width: 88px; justify-content: center; } /* 인페이지 푸터 compact 하한은 두 어휘 공통 (§액션 푸터 어휘 = 「btn-sm · min-width 88px · gap 8」). 구현이 .ios-settings-actions 에만 있어, 같은 성격의 .card-footer-actions(일괄 등록 카드 푸터)는 「취소」가 자연 폭 50px 로 서서 확정(96px)과 2배 가까이 벌어져 있었다 (2026-08-05 실측). 문서↔구현 불일치 해소 — 두 인페이지 푸터가 같은 하한을 공유한다. */ .card-footer-actions .btn { min-width: 88px; justify-content: center; } /* sidebar 접힘 시 좌측 offset 자동 보정 (.sidebar.collapsed + .main-content 패턴 따라가기) */ /* 태블릿(769~1024px): sticky top:--setup-banner-h — mobile-header 미노출 구간. setup-wrapper(sticky z:20) 바로 아래에 stick 하도록 top 오프셋 (없으면 0 fallback). z-index 는 setup-wrapper(z:20) 보다 위(30)로 두어 height 전환 race 시에도 가림 차단. */ @media (max-width: 1024px) { .ios-settings-actions { position: sticky; top: var(--setup-banner-h, 0px); left: auto; right: auto; padding: 10px 16px; margin: 0 -16px 16px; z-index: 30; } } /* 모바일(≤768px): position:fixed top:56px+--setup-banner-h — mobile-header(sticky 56px) + setup-wrapper(sticky top:56, 2026-05-15) 아래에 부착. 이전엔 setup-wrapper 가 static 이라 스크롤 시 banner 가 사라지면서 action-bar 가 header 와 분리되어 빈 공간 발생 → setup-wrapper 를 sticky 로 변경하여 항상 banner + action-bar 가 일관된 수직 스택 유지. sticky 가 일부 환경(iOS Safari + 긴 페이지 조합 등)에서 의도대로 안 붙는 케이스 박제 차단. 본문 시작점은 .ios-settings-page mobile padding-top 으로 보정. z-index 는 mobile-header(--z-sticky 200) 보다 1단 낮춰 헤더 우선 노출. */ @media (max-width: 768px) { .ios-settings-actions { position: fixed; top: calc(var(--shell-header-h, 56px) + var(--setup-banner-h, 0px)); left: 0; right: 0; margin: 0; padding: 8px 16px; z-index: 190; } } .ios-settings-status { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; color: var(--text-tertiary); transition: color 0.2s ease; /* 상태 텍스트는 항상 1줄 — 2줄로 꺾이면 바 높이가 본문 padding-top 보정값을 초과해 첫 카드를 가림 */ white-space: nowrap; } /* 모바일 축약 라벨 (2026-07-22, 1안 사용자 확정): 375px(iPhone SE)에서 「저장되지 않은 변경사항」 + 취소·저장(min-width 88px×2)이 가용폭 초과 → 2줄 꺾임. 모바일은 축약 스팬(「변경사항 있음」/「저장됨」)으로 스왑해 1줄 유지 — 바 높이가 본문 보정값(settings/index.html 61px = 버튼 44px 터치 타깃 기준)과 일치. full/short 두 스팬은 settings/index.html _setActionBarDirty 가 함께 갱신. */ .ios-settings-status .status-text--short { display: none; } @media (max-width: 768px) { .ios-settings-status .status-text--full { display: none; } .ios-settings-status .status-text--short { display: inline; } } .ios-settings-status .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-slate-300); transition: background 0.2s ease, box-shadow 0.2s ease; } /* Dirty 상태 (settings/index.html JS 가 토글) — backdrop-filter + accent. position 은 평소와 동일(fixed/static) — 분기 없음. */ .ios-settings-actions.is-dirty { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); border-bottom-color: var(--color-slate-200); } .ios-settings-actions.is-dirty .ios-settings-status { color: var(--color-primary-700); font-weight: 600; } .ios-settings-actions.is-dirty .status-dot { background: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-100); } /* Reveal-on-dirty (2026-06-01): status indicator 가 있는 dirty-aware 페이지는 clean 상태에서 액션 바를 접어 숨기고, 변경 발생 시(.is-dirty) 에만 슬라이드인. 변경할 게 없을 때 상단을 영구 점유하던 "떠 있는 빈 바" 위화감 제거. position(fixed/sticky)·jitter 차단값은 그대로 — 가시성만 토글한다. status 없는 페이지(향후 단독 폼 등)는 기존대로 항상 노출. 본문 예약 공간(padding-top)은 index.html .ios-settings-page:has(...is-dirty) 가 연동. */ .ios-settings-actions:has(.ios-settings-status):not(.is-dirty) { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-bottom-color: transparent; opacity: 0; overflow: hidden; pointer-events: none; /* 접힌 바의 취소/저장이 Tab 포커스 정지로 남지 않게 (clean 상태 Enter 저장 차단). hidden 은 접힘 완료 후, 노출은 base 의 visibility 0s 가 즉시 뒤집음. */ visibility: hidden; transition: top 0.15s ease-out, max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, border-color 0.28s ease, visibility 0s linear 0.28s; } /* 저장 성공 순간만 접힘을 유예 — `.is-saved-flash` (settings/index `_flashSavedBar`, 1.6s). 저장 성공 신호 = 저장 버튼 체크 morph 하나로 정리하면서(2026-08-16 사용자 확정 A안, 구 성공 Toast 폐지) 이 규칙이 그 짝이 됐다: clearDirty 직후 그대로 접히면 **바가 300ms 만에 사라져 morph 를 아무도 못 본다** (실측 +150ms opacity 0.13 · +300ms 0). 접힘 유예를 지우면 저장 성공에 남는 신호가 0 이 된다. `:not(.is-dirty)` 유지 = 유예 중 다시 수정하면 dirty 어휘가 즉시 이긴다. */ .ios-settings-actions.is-saved-flash:has(.ios-settings-status):not(.is-dirty) { max-height: 200px; padding-top: 10px; padding-bottom: 10px; opacity: 1; visibility: visible; border-bottom-color: var(--border-light, #eef0f2); } /* 유예 중 좌측 상태(dot + 「사업자·정산 정보 저장됨」)는 숨긴다 — 버튼이 이미 「✓ 저장됨」이라 같은 낱말이 한 바 안에 두 번 찍힌다(2026-08-16 실측 스크린샷). 신호는 누른 버튼 하나. `display:none` ❌ — 전역 접힘 규칙이 `:has(.ios-settings-status)` 로 이 요소의 존재를 본다. */ .ios-settings-actions.is-saved-flash:not(.is-dirty) .ios-settings-status { visibility: hidden; } /* 모바일 세로 padding 은 8px (위 ≤768px 블록) — 접힘 유예 규칙이 특이도로 이기므로 같은 값을 다시 준다. 빼면 유예 1.6s 동안만 바가 4px 두꺼워져 본문 보정값(61px)과 어긋난다. */ @media (max-width: 768px) { .ios-settings-actions.is-saved-flash:has(.ios-settings-status):not(.is-dirty) { padding-top: 8px; padding-bottom: 8px; } } /* ======================================== 4.5. iOS Settings Row Pattern (Global) 2026-05-15 settings/index, admins, pass-extension, settings/payment 4개 페이지 인라인 정의를 통합. 페이지별 prefix(.px-page/.admins-page) 제거. D. MONO CONCIERGE — hairline + emerald accent 적용. ======================================== */ /* Group wrapper — 카드형 그룹 */ .ios-group { margin-bottom: 24px; } /* 그룹 라벨 = 마이크로 라벨 박제 톤 (12px/800/slate-500/0.04em — 2026-08-09 ②-A 정합, 구 600/0.05em 폐지) */ .ios-group-label { font-size: 12px; font-weight: 800; color: var(--color-slate-500); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 16px; margin-bottom: 8px; } .ios-group-card { background: var(--bg-primary); border-radius: 14px; border: 1px solid var(--border-default); overflow: hidden; } .ios-group-hint { font-size: 12.5px; color: var(--color-slate-500); margin-top: 6px; padding: 0 16px; line-height: 1.55; } .ios-group-hint strong { font-weight: 700; color: var(--color-slate-700); } /* Row — 14px 18px hairline divider */ .ios-item { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); } .ios-item:last-child { border-bottom: none; } /* 모바일 — 좌우 16px + 터치 타깃 52px (2026-08-03 글로벌 승격: 구 settings/index·admins 페이지 사본 2개 통합, 사본 없던 late.html 만 패딩이 갈리던 드리프트 해소) */ @media (max-width: 768px) { .ios-item { padding: 14px 16px; min-height: 52px; } /* 무면 인라인 입력이 행 높이를 다 먹게 — 히트영역만 확대, 시각 불변 (2026-08-24 사용자 확정 A안, 시안 settings-row-input-hit-area). 이 입력은 `border: none` + `background: transparent` + `padding: 0` 이라 박스 높이가 **글자 한 줄(19px)** 그대로였다 — 위 행의 min-height 52px 이 「터치 타깃」으로 잡아 둔 높이 중 **19px 만 실제로 눌렸고** 위 16 · 아래 17px 은 눌러도 아무 반응이 없었다(실측). 투명 패딩으로 박스를 행 높이까지 키우고 같은 값의 음수 마진으로 상쇄한다 — 글자 위치·행 높이·정렬 모두 불변(`.lt-class-add`·`.qs-mm-row-x` 히트박스 확대 idiom). ⚠ `input` 은 **대체 요소라 `::after` 오버레이가 렌더되지 않는다** — 다른 컨트롤에 쓰는 오버레이 방식을 여기 그대로 옮기면 조용히 무동작이다. 이 자리는 padding + 음수 margin 이 유일한 수단. 값 16/17 = 행 min-height 52 − 글자 19 = 33 을 반씩(16.5) 나눠 정수 픽셀로 떨어뜨린 것 — `.ios-item` 의 mobile min-height 가 바뀌면 이 두 줄도 같이 바꾼다. 데스크톱은 min-height 가 없어(행 = 14+19+14) 확장 대상이 아니다 — 이 블록 밖으로 내보내기 ❌ */ .ios-item-input { padding: 16px 0 17px; margin: -16px 0 -17px; } } .ios-item-clickable { cursor: pointer; transition: background 0.15s; } @media (hover: hover) { .ios-item-clickable:hover { background: var(--color-slate-50); } } /* Leading icon(.ios-item-icon 4색 패밀리) = 사용처 0 으로 삭제 (2026-08-09 초록 배경 정리) */ /* Label / Value — 좌측 14px medium, 우측 14px tertiary. 행 focus(`.ios-item:has(:focus-visible)`) 시 weight 500 → 700 + color slate-900 (active 단서 보조). */ .ios-item-label { font-size: 14px; font-weight: 500; flex: 1; color: var(--text-primary); transition: font-weight 0.15s ease, color 0.15s ease; } .ios-item-value { font-size: 14px; /* slate-500 — 흰 면 slate-400 은 ≈2.85:1. 이 값은 행에서 「그 자리의 유일한 신호」(요약 수치·상태 값)라 승격 대상 (2026-08-10 UI 감사 C안). placeholder·disabled(.ios-item-input.is-locked)는 「빈 칸」·「잠김」을 색으로 전달하므로 slate-400 유지 — 함께 올리지 ❌ */ color: var(--color-slate-500); margin-right: 8px; } /* 8px 는 「값 ↔ 뒤에 오는 컨트롤(셰브론 등)」 간격 — 값이 행의 마지막이면 죽은 여백이라 그 행만 값이 8px 안쪽에서 끝나 우측 rail 이 둘로 갈린다 (late 「예외가 있는 관원 N명」 실측). pass-extension 이 page-local `margin-right: 0` 로 이미 우회하던 것을 전역 가드로 승격. */ .ios-item-value:last-child { margin-right: 0; } /* 텔레포트 행 셰브론 — 다른 페이지로 넘기는 ios-item 우측 끝 (설정 「지각 설정」 등). .ios-item 이 일 때 글로벌 `a { text-decoration: none }` 로 밑줄 없음 (§5). */ /* 행 끝 드릴다운 표지 — 「이 행을 누르면 넘어간다」 단일 원자 (ADR 0371, 2026-08-21 사용자 확정 A안 · 시안 chevron-unify). 구 `.ios-item-chevron`(설정 행 8곳) · `.q-row-chev` · `.qd-answer-chev` · `.qa-chev` · `.pay-plan-chev` · `.history-chip-chev` 6벌 통합 — 같은 역할인데 기하 2계열(heroicons/lucide) · 크기 15/16/18 · stroke 2/2.5 · 색 slate-300/400 · hover 유무로 갈려 있었다. 「관원 상세」 한 페이지 안에서만도 3종이 섞였다. 아이콘 = `fragments/icons :: chevronRight(cls='row-chevron')` — 인라인 SVG ❌ · page-local 사본 ❌. 크기·굵기는 여기서 결정(프래그먼트 폴백 2.25 를 CSS 가 이긴다). 15px·18px 복귀 ❌ */ .row-chevron { width: 16px; height: 16px; stroke-width: 2.5; color: var(--text-tertiary); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } /* hover 반응(초록 + 2px 전진)은 **행이 트리거**라 행 클래스를 나열할 수밖에 없다 — 원자에 :hover 를 달면 아이콘 위에 커서가 올라갔을 때만 반응해 「행 전체가 눌린다」는 신호와 어긋난다. 드릴다운 행을 새로 만들면 이 목록에 추가한다(page-local hover 사본 ❌). */ @media (hover: hover) { .ios-item-clickable:hover .row-chevron, .q-row:hover .row-chevron, .qa-item:hover .row-chevron, .qd-answer:not(.is-deleted):hover .row-chevron, .history-chip--tappable:hover .row-chevron, .sys-row-clickable:hover .row-chevron, .qs-choice:hover .row-chevron, .pay-plan-card:hover .row-chevron, .mm-row:hover .row-chevron, .msg-config-btn:hover .row-chevron, .msg-banner--pending:hover .row-chevron, .msg-banner--notify:hover .row-chevron, .dash-att-row:hover .row-chevron, .auth-role-card:hover .row-chevron, .settlement-rejected-banner .srb-next:hover .row-chevron { color: var(--color-primary-600); transform: translateX(2px); } } /* 2-line stack — 제목 + 부제목 수직 */ /* `flex: 1` = 「행의 마지막 요소가 늘 행 padding(18px)에서 끝난다」 (project-frontend-guide §iOS Settings Row 「저장 배지는 트레일링 요소 앞 — 값이 우측 rail 을 지킨다」, 2026-08-19 사용자 확정). stack 이 남는 폭을 안 먹으면 셰브론·값·버튼이 **문장 끝에 붙어** 그 행만 rail 밖에서 끝난다 (실측 2026-09-20: public-page 「시간표 고치기」 셰브론이 우측 rail 에서 383px 안쪽 · 같은 페이지 「문의 버튼」 항상 켜짐 331px · settings 「도장 공개 페이지」 230px). 구 상태 = `-toggle`·`-action` 변형에만 주고 맨 `.ios-item` 은 빠져 있어, 같은 결함을 만난 페이지가 각자 사본을 만들었다(admins `#adminList` · messages `.msg-compose-entry` — 2026-09-20 글로벌로 흡수). page-local 사본 ❌ · `-toggle`/`-action` 한정으로 되돌리기 ❌ */ .ios-item-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ios-item-stack .title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .ios-item-sub { font-size: 12px; /* §slate-400 승격 기준 「읽어야 하는 텍스트 = 그 자리의 유일한 신호」 — 부제 6곳(설정 4·지각 2)은 전부 그 토글·행이 무엇을 하는지 말하는 유일한 문장. 대비 2.85 → 4.76:1. admins.html 이 같은 역할을 이미 slate-500 으로 써 계열 안에서 두 벌로 갈려 있던 것을 통일 (2026-08-18 사용자 확정 B안, 시안 ios-item-sub-contrast). slate-400 되돌리기 ❌ */ color: var(--color-slate-500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Trailing chevron */ /* Inline edit input — 우측 정렬 transparent. Focus indication 은 row(.ios-item) 의 좌측 rail 로 처리 (아래 `.ios-item:has(:focus-visible)` 참조). .is-invalid 의 좌측 red rail 과 동일 위치·두께로 일관 체계 — valid=slate-900 rail / invalid=red rail (색만 다름). */ .ios-item-input { border: none; text-align: right; font-size: 14px; color: var(--text-primary); outline: none; /* 라벨(flex:1) 대비 2배 — 긴 이메일·계좌번호가 잘리지 않도록 입력 영역에 더 넓은 비중 부여 */ flex: 2; background: transparent; min-width: 0; font-family: inherit; transition: color 0.15s ease, font-weight 0.15s ease; } .ios-item-input:focus { color: var(--color-slate-900); font-weight: 600; } /* ── 숫자 + 단위 인라인 (설정 행 안 무면형) ───────────────────────────── 2026-08-27 사용자 확정 A안 (시안 `numeric-unit-input-unify`) — 구 page-local 사본 2벌 (`pass-extension .ios-days-wrap` · `settings/late .lt-window-wrap`) 승격. 두 사본은 값 토큰 (입력 16/700 tabular · 단위 14/500)이 이미 같았고 `.lt-window-wrap` 주석이 스스로 「선례 .ios-days-wrap 과 동일 — 세 번째 사용처가 생기면 승격 검토(SSOT), 그때 기준값이 한 벌이도록」 이라 예고해 뒀다. 이름이 둘이라 한쪽을 고치면 다른 쪽이 조용히 뒤처지던 자리다. ⚠ 이 원자는 **자기 면을 갖지 않는다** — 몸통은 `.ios-item` 행이고 focus 신호도 행 좌측 rail 에 위임한다(§27 단일 ring). 박스(면·테두리·radius)를 주면 설정 행 어휘가 깨지고 ring 이 둘이 된다. 면이 필요한 자리는 `.stepper`(박스형) 쪽 — 판정 = 「설정 행 안인가, 폼·모달 안인가」. 승격 시 수렴한 2축(구 사본이 갈려 있던 값): gap 4↔7 → **6** · 입력 폭 80↔64 → **64** (16/700 에서 3자리 + 여유. 우정렬이라 값 위치는 불변, 넓히면 단위와 사이가 벌어진다). */ .ios-item-input--with-unit { /* 라벨(flex:1) 대비 2배 — 글로벌 .ios-item-input 과 같은 비율 */ flex: 2; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .ios-item-input--with-unit input { width: 64px; border: none; background: transparent; text-align: right; padding: 0; outline: none; font-family: inherit; /* 16px = iOS 포커스 줌 방지 (frontend-guide §23) — 베어 input 이라 글로벌 `.form-input` 모바일 강제가 안 닿는다. 이 원자가 직접 소유해야 한다. */ font-size: 16px; font-weight: 700; /* 강조 숫자 = tabular-nums + slate-900 (D.MONO — emerald 는 신호 위치에만) */ font-variant-numeric: tabular-nums; color: var(--color-slate-900); } /* 이 슬롯만 「강조 숫자」(16/700)라 placeholder 가 그 톤을 물려받아 입력된 값처럼 읽혔다 (2026-08-06 UI 감사). 힌트는 형제 텍스트 필드와 같은 14/400 톤 — §필수·선택 표기 「placeholder 는 형식·예시만」의 취지 = 값 자리를 차지하지 않기. */ .ios-item-input--with-unit input::placeholder { font-size: 14px; font-weight: 400; } .ios-item-input--with-unit .unit { font-size: 14px; font-weight: 500; color: var(--text-secondary); } /* 히트영역만 행 높이까지 — 글로벌 `.ios-item-input` 과 같은 처리·같은 값 (2026-08-24 사용자 확정 A안, 시안 settings-row-input-hit-area). 근거·계산은 그 선언 위 주석 참조. ⚠ input 은 대체 요소라 `::after` 오버레이가 안 먹는다 — padding + 동값 음수 margin 이 유일한 수단. */ @media (max-width: 768px) { .ios-item-input--with-unit input { padding: 16px 0 17px; margin: -16px 0 -17px; } } /* Row focus — 좌측 2px slate-900 rail. 배경 tint 없음 (D.MONO active=slate-900 정책 일관). 행 안의 focus 가 row 까지 전파. 라벨도 weight up. ⚠ `:focus-within` ❌ (ADR 0616 · 2026-09-05 사용자 신고 — member/pay 결제 세그먼트·`.selection-card--radio` 와 같은 결함): 토글 스위치·행 우측 버튼·인라인 셀렉트를 «마우스로» 누르면 그 컨트롤이 포커스를 계속 쥐고 있어 좌측 세로 rail 이 다른 곳을 누를 때까지 남는다 (신고 자리 = 관원 일괄 「알림 설정」 모달 `.optout-master` — 토글을 켜면 행 왼쪽에 세로선이 그어진 채 안 사라진다). `:has(:focus-visible)` = 텍스트 입력(`.ios-item-input`)은 :focus-visible 휴리스틱이 «마우스 클릭에도» matches 되어 rail 유지(§글로벌 키보드 focus 박제 주석), 토글·버튼·셀렉트는 키보드 탭에만 켜짐. 선례 = `.pay-method-item` · `.selection-card--radio` · `.issuer-card` (frontend-guide §27). `.ios-item:focus-visible` 를 함께 두는 이유 = 행 자체가 ``(`.ios-item-clickable`)인 진입형 행은 포커스를 «자기»가 받아 `:has()` 로 안 잡힌다 (구 `:focus-within` 은 self 를 포함했다). */ .ios-item:focus-visible, .ios-item:has(:focus-visible) { box-shadow: inset 2px 0 0 0 var(--color-slate-900); } .ios-item:focus-visible .ios-item-label, .ios-item:has(:focus-visible) .ios-item-label { font-weight: 700; color: var(--color-slate-900); } /* Row invalid — 좌측 2px red rail (focus rail 과 같은 자리·두께, 색만 다름). FormValidator.is-invalid 발동 시. FormValidator 는 is-invalid 를 내부 input 에 부여하므로 :has() 로 row 까지 전파 (input event 시 자동 해제와 동기). :has(input) 범위 = .ios-item-input 뿐 아니라 숫자+단위 인라인 입력(.ios-item-input--with-unit) 등 row 내 모든 data-validate input. */ .ios-item.is-invalid, .ios-item:has(input.is-invalid) { box-shadow: inset 2px 0 0 0 var(--status-error); animation: shakeInvalid 0.4s ease; } /* invalid + focus 동시 → invalid red rail 우선 (오류 상태가 활성 상태보다 시각 우선). 배경은 status-error-bg 미세 tint 유지(오류는 시각 무게 ↑). */ .ios-item.is-invalid:has(:focus-visible), .ios-item:has(input.is-invalid):has(:focus-visible) { background: var(--status-error-bg); box-shadow: inset 2px 0 0 0 var(--status-error); } .ios-item.is-invalid:has(:focus-visible) .ios-item-label, .ios-item:has(input.is-invalid):has(:focus-visible) .ios-item-label { font-weight: 700; color: var(--status-error); } /* Pill badge(.ios-item-badge) = 사용처 0 으로 삭제 (2026-08-09 초록 배경 정리) */ /* 가격 (15px 700 emerald) */ /* =========================================================================== Toggle switch — 44×24 iOS-style (글로벌 표준) --------------------------------------------------------------------------- 사용처: 단일 on/off 의미의 모든 컨트롤 (checkbox 대체). 다중 선택(요일·필터) 은 토글 금지 → 칩 패턴 사용. 기본: ios-item 안: (alias) "토글 + 설명 + 의존 필드" 패턴은 .toggle-row 또는 .toggle-group 헬퍼 사용. ========================================================================== */ .toggle-switch, .ios-item-toggle-switch { width: 44px; height: 24px; appearance: none; -webkit-appearance: none; background: var(--color-slate-300); border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin: 0; flex-shrink: 0; } .toggle-switch::after, .ios-item-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; /* 스프링 바운스 (2026-07-16 모션 시스템) — knob 이 살짝 오버슈트 후 안착 */ transition: transform 0.35s var(--ease-spring); box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .toggle-switch:checked, .ios-item-toggle-switch:checked { background: var(--color-primary-600); } .toggle-switch:checked::after, .ios-item-toggle-switch:checked::after { transform: translateX(20px); } /* 잠긴 토글 — 트랙 색을 직접 지정 (§잠긴 값 칸 토큰과 같은 축, opacity ❌ — 구 .45). 켜짐/꺼짐은 잠겨서도 읽혀야 하므로 두 상태를 각각 한 단계씩 죽인다 (꺼짐 slate-100 / 켜짐 slate-300) — 한 값으로 합치면 「지금 켜져 있나」가 사라진다. */ .toggle-switch:disabled, .ios-item-toggle-switch:disabled { background: var(--color-slate-100); cursor: not-allowed; } .toggle-switch:disabled:checked, .ios-item-toggle-switch:disabled:checked { background: var(--color-slate-300); } .toggle-switch:disabled::after, .ios-item-toggle-switch:disabled::after { box-shadow: none; background: var(--color-slate-50); } /* 히트영역 44px — 보이는 크기(44×24)는 그대로, 세로만 넓힌다 (2026-08-26 사용자 확정 A안 · 시안 `ios-toggle-touch-target`). 모바일 한정 — 데스크톱은 마우스라 24px 로 충분하다. ⚠ 이 자리는 히트박스 확대 idiom 의 전제 ①(「보이는 상자가 없을 것」, [[0317]])을 «깨는» 예외다 — 스위치는 면·radius 를 가진 컨트롤이다. 그럼에도 쓰는 근거 = **면을 키우는 게 아니라 판정만 키우기** 때문이고, 같은 성격의 선례가 `.toast-close::after`(보이는 24px 불변 + 히트 44px)다. ⚠ knob 은 `::after` 가 이미 쓰고 있으므로 확장은 **`::before`** 가 진다 — 둘을 바꿔 쓰지 ❌. 대안이던 「행 전체 탭」은 미채택: 설명문을 짚기만 해도 서버 저장이 즉시 일어나고, 같은 `.ios-item` 어휘의 토글 아닌 행(값 선택·링크)과 규칙이 갈린다. 재도입 ❌ */ @media (max-width: 768px) { .toggle-switch::before, .ios-item-toggle-switch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; } } /* ios-item layout helpers (ios-group-card 안에서만 사용) */ .ios-item-toggle { gap: 12px; } /* `display: flex` = 스위치를 감싸개의 인라인 라인박스에서 꺼낸다. 안 꺼내면 `` 이 `inline-block` + `vertical-align: baseline` 이라 baseline 에 앉고 그 «아래» 디센더 자리 7px 이 감싸개에 더해져(24 → 31px) 스위치가 감싸개 중심보다 3.5px 위로 뜬다 — 행이 감싸개를 중앙 정렬해도 «보이는 스위치»는 라벨 덩어리보다 3.5px 위였다(2026-09-05 UI 감사 R · 전 토글 14곳 예외 없이 동일 실측). 결제 내역 상태 뱃지(`.detail-pay-amt-col .badge`, ADR 0587)와 같은 계열의 함정 — 그쪽은 뱃지가, 여기는 스위치가 인라인이었다. `flex-shrink: 0` 유지 의무(라벨이 길어져도 스위치는 안 줄어든다). */ .ios-item-toggle-control { flex-shrink: 0; display: flex; align-items: center; } /* ios-item 우측 액션 버튼 행 — stack(제목+설명) 좌 + 버튼 우 (토글 행과 동일 배치) */ .ios-item-action { gap: 12px; } .ios-item-action .btn { flex-shrink: 0; } /* ios-item 내부 인라인 select — row 우측 값 표시 + 펼침 (iOS Settings 패턴). §23 form-select 박제 룰에서 row inline 변형으로 명시 박제. 사용:
라벨
*/ .ios-item .ios-inline-select-wrapper { flex: 1; min-width: 0; display: flex; justify-content: flex-end; } .ios-item .ios-inline-select-wrapper .custom-select-wrapper { width: auto; } .ios-item .ios-inline-select-wrapper .custom-select-trigger { background: transparent; border: none; padding: 0 4px 0 0; height: auto; min-height: 0; color: var(--text-secondary); font-size: 14px; box-shadow: none; justify-content: flex-end; } /* 글로벌 트리거 링이 `:focus-visible` 로 옮겨졌으므로 중화 규칙도 같은 상태로 (안 맞추면 안 이긴다) */ .ios-item .ios-inline-select-wrapper .custom-select-trigger:focus, .ios-item .ios-inline-select-wrapper .custom-select-trigger:focus-visible { background: transparent; box-shadow: none; color: var(--color-primary-600); } @media (hover: hover) { .ios-item .ios-inline-select-wrapper .custom-select-trigger:hover { background: transparent; box-shadow: none; color: var(--color-primary-600); } } .ios-item .ios-inline-select-wrapper .custom-select-value { color: inherit; font-weight: 500; } .ios-item .ios-inline-select-wrapper .custom-select-arrow { color: var(--color-slate-400); } .ios-item .ios-inline-select-wrapper .custom-select-dropdown { min-width: 240px; right: 0; left: auto; } /* toggle-row — 카드 안 단독 라인 (텍스트 + 토글 좌우 분리). label.toggle-row 권장 — 라벨 클릭으로 토글 가능. */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: white; border: 1px solid var(--border-hairline); border-radius: 10px; cursor: pointer; user-select: none; } .toggle-row-text { min-width: 0; } /* title·sub 는 이라 display 를 안 주면 inline 으로 이어져 「제목 부제」가 한 문장으로 읽히고 (실측 390px), sub 의 margin-top 도 inline 에선 무효라 2줄 구조라는 원자 의도가 통째로 죽는다. */ /* toggle-group — 토글 head + 의존 fields 묶음 (product-modal pause-group 등) */ .toggle-group { border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; } .toggle-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: white; cursor: pointer; user-select: none; } .toggle-group-head-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .toggle-group-head-sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; } .toggle-group-fields { padding: 12px 14px 14px; border-top: 1px solid var(--border-hairline); background: var(--color-slate-50); } .toggle-group-fields .form-group:last-child { margin-bottom: 0; } /* Section divider — 무면 마이크로 라벨, 카드 안에서 sub-section 구분. 2026-08-09 사용자 확정 ②-A: 구 slate-50 채움 스트립 + 하단선 폐지 → 섹션 머리 어휘는 무면 마이크로 라벨(12px/800/0.04em) + 여백 한 벌로 수렴 (회색면·선 재도입 ❌). pass-extension 의 .sub modifier 는 right-aligned 가 필요해 별도 변형. */ .ios-section-divider { padding: 22px 18px 8px; font-size: 12px; font-weight: 800; color: var(--color-slate-500); letter-spacing: 0.04em; text-transform: uppercase; } .ios-section-divider:first-child { padding-top: 16px; } /* 모바일 좌우 16px — `.ios-item` 모바일 rail(14px 16px)과 같은 시작선 (2026-09-04 UI 감사 R): 오버라이드가 없어 섹션 머리만 18 로 남아 바로 아래 행·각주보다 2px 오른쪽에서 시작했다. 소비처(pass-extension·settings/index·settings/payment) 전부 같은 방향. page-local 사본 ❌ */ @media (max-width: 768px) { .ios-section-divider { padding-left: 16px; padding-right: 16px; } } /* .sub = slate-500 — 이 슬롯의 두 소비처가 「적용 N명 · 제외 M명」(pass-extension, `.history-count` 동반)과 「— 토스 정산 심사 제출용」(settings/payment)이라 둘 다 «읽어야 하는 텍스트»다. 구 `--text-tertiary`(slate-400)는 (0,2,0) 특이도로 `.history-count`(0,1,0) 의 slate-500 박제를 이겨 「slate-400 복귀 ❌」를 무효화하고 있었다 (§slate-400 승격 기준 · [[0495]] · 2.85→4.76:1). 같은 역할의 글로벌 `.card-subtitle` 도 slate-500. page-local 로 덮기 ❌ (두 소비처가 다시 갈린다). */ .ios-section-divider .sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-slate-500); margin-left: 6px; } /* ======================================== 5. CLEAN LIGHT SIDEBAR — 삭제 (2026-08-31 사용자 확정, 보류 항목 정리) .sidebar 계열이 §5 / §100 / R4 세 벌로 갈려 있던 것을 §100 한 벌로 통합. §5 에서만 살아 있던 값(display:flex·overflow-y:auto·logo hover translateX·header justify-content 등)은 전부 §100 으로 이관 — 계산값 전후 diff 0 검증 완료. 재분산 ❌ */ /* 구 .nav-icon 삭제 (2026-08-31) — 소비처 0 (마지막 4곳 cls='nav-icon' 은 같은 날 감사에서 제거). opacity .9 가 같은 버튼 안 다른 아이콘과 밝기를 가르던 원인이기도 했다. 재도입 ❌ */ /* 구 §5 .sidebar-footer 삭제 (2026-08-31) — §100 통합본이 소유 */ /* Logout Button */ .btn-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; margin-top: 12px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.15); border-radius: 12px; color: var(--status-error); font-size: 14px; font-weight: var(--font-medium); transition: all var(--transition-smooth); cursor: pointer; } @media (hover: hover) { .btn-logout:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); color: #b91c1c; } } /* Collapsed sidebar */ /* ======================================== 6. D. MONO CONCIERGE CARDS (2026-05-15, accent 갱신 2026-05-26) project-frontend-guide § D. MONO CONCIERGE - 1px slate-200 hairline (fingerprint = typography + 외곽 hairline) - shadow 제거 - card-header 흰 배경 + .card-title 14px 800 (장식 없음) 2026-05-26: 상단 emerald ::before accent 폐지 — §「Carded surface — color rail 일반 금지」 ======================================== */ .card { background: var(--bg-primary); border-radius: 14px; box-shadow: none; border: 1px solid #eaecef; overflow: hidden; transition: border-color 0.2s ease; position: relative; } /* hover 리프트는 MOTION SYSTEM `body[data-motion] .card:hover`(-2px + hover 그림자)가 소유 — 여기 base 에 리프트 사본을 두지 ❌ (ADR 0542 검증에서 항상 지는 죽은 규칙임을 실측, 2026-08-31) */ @media (hover: hover) { .card:hover { border-color: #d8dde3; } } .card-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: #ffffff; border-radius: 13px 13px 0 0; } /* frontend-guide §21 저장 액션 표준: 카드 헤더 우측 액션 그룹 */ .card-header .card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* 카드 헤더 텔레포트 어휘 — 박스 없이 emerald 텍스트 + 화살표. * 사용 조건: 카드의 CTA 가 다른 페이지로의 텔레포트(href)이고 진짜 액션은 그 페이지가 owns 할 때. * 박스 어휘(btn-* btn-sm)는 같은 페이지에서 모달/상태전환을 owns 하는 카드 헤더에만. * fingerprint(폰트 12px / weight 800) = D.MONO 마이크로 라벨족 (kpi-label·sub-badge 11~11.5px/800) * 과 한 가족. title 13/700 → action 12/800 → badge 11/800 1px 계단형 위계로 헤더가 단일 meta strip 으로 읽힘. * emerald-600 컬러의 luminance 가벼움은 weight 800 으로 보정 (D.MONO §타이포 "800 = 라벨족" 원칙). */ .card-action-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.01em; /* 흰 면 위 12px 글자 → primary-700 (3.77 → 5.48:1, ADR 0495). 600 복귀 ❌ */ color: var(--color-primary-700); text-decoration: none; border-radius: 4px; background: none; border: none; cursor: pointer; transition: color 0.15s ease; } /* 히트영역 44px — 보이는 크기(34)는 그대로, 세로만 넓힌다 (히트박스 확대 idiom [[0317]]). 두 전제 충족: ① 보이는 상자가 없다(면 없음 · 테두리 0 — radius 4px 는 포커스 링 몫) ② 세로 확장이라 같은 줄 형제(카드 제목 span)와는 x 범위가 겹치지 않는다. 확장분은 `.card-header`(61px) 안 — 헤더 높이 불변. 모바일 한정(데스크톱은 마우스). */ @media (max-width: 768px) { .card-action-link { position: relative; } .card-action-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; } } @media (hover: hover) { .card-action-link:hover { color: var(--color-primary-700); } } /* danger variant — BILLING_OVERDUE / RENEWAL_FAILED 등 위기 상태. * push 신호는 .danger-card 외곽 + .sub-badge.danger 가 책임, 액션은 한 차원만(red 텍스트). */ .card-action-link.danger { color: var(--status-error-ink); } @media (hover: hover) { .card-action-link.danger:hover { color: var(--status-error-text); } } /* 모바일 hit area 보강 — 시각 fingerprint 유지(font 12.5px) 하면서 탭 영역만 확장 */ @media (max-width: 768px) { .card-action-link { padding: 8px 6px; } } /* ── 사범 「관장님께 요청하기」 = 무면 텍스트 버튼 (2026-09-06 UI 감사 R · 값 소유자 여기 한 곳) ── 목적지가 OWNER 전용이라 링크를 주면 빈손 착지하는 자리에서, 링크 대신 «요청 문구 복사»를 내주는 어휘. 셋 다 같은 낱말·같은 행동·같은 성공 토스트(「관장님께 보낼 문구를 복사했어요.」)다 — ① 홈 정산 반려 배너 `.srb-ask` ② 홈 「다음 단계」 카드 `.next-step-card-ask` ③ 온보딩 허브 잠긴 줄 `.qs-hub-ask`. 합친 이유 = **page-local 세 벌이 「한 벌」이라 적어 두고 값이 갈려 있었다** — ②만 13px·`padding: 0` 이라 폰 히트 판정이 ≈16px 였고(①은 ≈31px), ③만 2026-08-31 감사에서 `::after` 44px 를 받아 뒤에 생긴 ①② 는 그 처리를 못 받았다. 사범 세션의 «유일한» 조치 동선인데 폰에서 못 누르는 셈. §원자 승격 기준의 「3번째 사용처」 트리거를 넘겼고, 선례 = `.md-today-cta` 의 `.md-pb-btn` 흡수. 면·테두리·알약 ❌ (행·배너 안 인라인 액션 어휘) · page-local 값 사본 재도입 ❌ — 그 자리에만 필요한 차이(전폭 스택·좌측 padding 등)만 page-local 이 갖는다. */ .srb-ask, .next-step-card-ask, .qs-hub-ask { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--color-primary-700); white-space: nowrap; padding: 8px 0; text-align: left; /* `