/* 스크롤바 자리를 항상 비워 둔다. 내용 높이가 뷰포트를 넘나들면 스크롤바가 생겼다 사라지고, 그때 가용 폭이 ~15px 변해 중앙 정렬된 것들이 전부 좌우로 밀린다(설정 탭 전환에서 문서 높이가 1201 ↔ 1000px 로 오갔다). 자리를 미리 잡아 두면 어느 화면에서도 폭이 고정된다. */ html { scrollbar-gutter:stable; } /* 서사 밴드 — 흰 밴드(paper)와 회색 캔버스(canvas)를 교차해 긴 화면의 구간을 나눈다. 문의·푸터만 역전(inverse). 앱·운영 화면에는 쓰지 않는다. */ html { overflow-x:hidden; overflow-x:clip; } body { --panel:var(--ground-hi); --recess:var(--canvas); } .band-paper { background:var(--ground-hi); --panel:var(--canvas); --recess:var(--rule); } .band-canvas { background:var(--canvas); --panel:var(--ground-hi); --recess:var(--canvas); } /* ============================================================ base — reset · document · 배경 · 접근성 ============================================================ */ *,*::before,*::after { box-sizing:border-box; } html,body { margin:0; } /* 스티키 글래스 내비(약 94px) 아래로 앵커 점프 시 섹션 헤딩이 가리지 않도록. 히어로 CTA 가 같은 페이지 맨 아래 문의 밴드로 보내므로, 순간이동 대신 스크롤로 보여 준다 — 어디로 갔는지가 이동 자체로 읽힌다. 아래 reduced-motion 블록이 이 값을 auto 로 되돌린다. */ html { -webkit-text-size-adjust:100%; scroll-padding-top: var(--space-9); scroll-behavior:smooth; } body { font-family:var(--font); color:var(--ink); min-height:100vh; position:relative; overflow-x:hidden; overflow-x:clip; /* 밝은 뉴트럴 라이트 — 유리가 읽히는 최소한의 톤 깊이 (무채색) */ background:var(--page-bg); background-repeat:no-repeat; } img { max-width:100%; display:block; } [hidden] { display:none !important; } /* display 규칙(flex 등)이 hidden 속성을 덮지 않도록 */ button { font-family:inherit; } a { color:inherit; } .svg-sprite { position:absolute; } .overflow-hidden { overflow:hidden; } .bg,.bg i{display:none} main { position:relative; z-index:2; } /* ── 포커스 링 — UA 파란 링을 근-흑(--action)으로 통일 (WCAG 2.4.7 / 1.4.11) ── */ :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset:3px; border-radius: var(--radius-sm); } /* ── 마지막 줄 고아 방지 ── */ p, .sub, .sec-head p { text-wrap:pretty; } /* 하드룰: reduced-motion 의무. animation 은 none 이 아니라 .01ms 로 죽인다 — none 은 animationend 가 안 떠서 그 이벤트를 기다리는 스크립트가 멈춘다(토스트 제거 등). 지속시간만 0에 수렴시키면 모션은 사라지면서 이벤트 계약은 유지된다. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .bg i { animation:none !important; } } /* 완료 알림 토스트 (aria-live) — 전 킷 공용 */ /* 디자인 시스템 정의를 따른다 — 떠 있는 층이라 --raise, 표면은 --surface, 곡률 16px. 전에는 --gray-950 알약 + var(--ground-hi) 글자였다. 다크 알약은 라이트에서만 성립하고, 다크 테마에서는 배경과 같은 색이 되어 토스트가 사라진다. */ .toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:200; padding: var(--space-3) var(--space-5); background:var(--ground-hi); color:var(--ink); border:1px solid var(--rule); border-radius: var(--radius-md); font:500 var(--fs-body-sm) / 1 var(--font); box-shadow:var(--shadow-float); } .toast[hidden] { display:none; } /* ══════════ 헤더 공통 레이어 ══════════ 랜딩·요금제·약관·인증·온보딩이 각자 다른 클래스를 쓴다 (.nav .in / .pr-top .bar / .auth-top .bar / .ob-top .bar). 기하가 갈려 있어 바 높이가 68/70/72px 로 달랐고, 페이지를 옮길 때 헤더가 흔들렸다. 높이·여백·정렬은 여기 한 곳에서만 정한다. 페이지별 파일은 시각 처리(글래스·그림자)만 갖는다. */ .nav .in, .pr-top .bar, .auth-top .bar, .ob-top .bar { position:relative; /* nav 을 바 정중앙에 고정하기 위한 기준 */ display:flex; align-items:center; gap: var(--space-5); min-height:var(--header-bar-h); /* 좌우 대칭 — 본문 인셋과 같은 20px. 좌26 이면 워드마크가 본문 기준선보다 안쪽으로 들어가 페이지 제목이 왼쪽으로 튀어나온다(앱 헤더에서 7px 어긋났다). */ padding:0 20px; } /* nav 은 바 정중앙 — 브랜드·우측 액션의 폭이 페이지마다 달라도 위치가 흔들리지 않는다. 기존엔 margin-left:auto 로 오른쪽에 붙어 300px 이상 밀려 있었다. */ .nav .links, .pr-nav { position:absolute; left:50%; transform:translateX(-50%); } /* 우측 액션은 오른쪽 끝 — nav 가 흐름에서 빠졌으므로 여기서 밀어준다. 클래스를 나열하면(.nav-actions, .pr-cta-top …) 그 이름을 안 쓰는 헤더가 조용히 빠진다. 실제로 액션을 .nav-actions 없이 직계 자식으로 둔 헤더는 그것이 워드마크에 붙어버렸고, auth·약관·개인정보는 '홈으로' 가 브랜드 옆에 붙어 오른쪽에 730px 이 비었다. 그래서 이름이 아니라 자리로 정한다 — 바의 마지막 자식이 우측 액션이다. :not(:first-child) — onboarding/complete.html 처럼 자식이 브랜드 하나뿐인 헤더에서 그 브랜드가 오른쪽으로 밀려가는 것을 막는다. */ .nav .in > :last-child:not(:first-child):not(.nav-burger), .pr-top .bar > :last-child:not(:first-child):not(.nav-burger), .auth-top .bar > :last-child:not(:first-child), .ob-top .bar > :last-child:not(:first-child), /* nav-burger.js 는 이 두 헤더에만 버튼을 append 한다. 버거는 데스크톱에서 display:none 이지만 :last-child 는 DOM 위치라 숨은 것도 센다 — 그래서 마지막에서 두 번째가 실제 우측 액션이다(버거 자신은 자기 규칙에서 margin-left:auto 를 받는다). */ .nav .in > :nth-last-child(2):not(:first-child), .pr-top .bar > :nth-last-child(2):not(:first-child) { margin-left:auto; } /* 테마 토글이 우측 묶음의 시작이다 — 토글이 auto 를 받으면 그 뒤(로그인·시작하기· 프로필·홈으로)가 전부 따라 붙는다. 헤더 구조가 10가지로 갈려 있어도 마크업을 옮기지 않고 한 규칙으로 '토글은 로그인 왼쪽' 이 성립한다. 위 위치 기반 규칙과 명시도가 같으므로(둘 다 0,4,0) 반드시 뒤에 와야 한다 — 앞에 두면 위치 규칙이 이겨서 auto 가 둘이 되고, 공간이 반씩 나뉘어 토글이 화면 가운데에 떠 버린다(실제로 각 327px 로 갈렸다). */ :is(.nav .in, .pr-top .bar, .auth-top .bar, .ob-top .bar, .app-top .bar) > .theme-toggle { margin-left:auto; } :is(.nav .in, .pr-top .bar, .auth-top .bar, .ob-top .bar, .app-top .bar):has(> .theme-toggle) > :not(.theme-toggle):not(.nav-burger) { margin-left:0; } @media (max-width:900px){ .nav .links, .pr-nav { position:static; transform:none; } } /* 400px 이하 — 헤더 간격을 좁힌다. 360px 에서 자식 폭 합이 안폭보다 3px 커서 워드마크가 잘렸다(브랜드 130 + 컨트롤 44 × 2 + 간격 40 = 254 vs 안폭 247). 간격만 줄여도 들어간다. 요소를 더 감추는 것보다 간격을 좁히는 쪽이 잃는 것이 적다. */ @media (max-width:400px){ .nav .in, .pr-top .bar, .auth-top .bar, .ob-top .bar { gap: var(--space-3); padding: 0 var(--space-4); } } /* ══════════ 뒤로가기 공통 컴포넌트 ══════════ 앱·인증·온보딩·리포트가 각자 .pg-back / .auth-back / .ob-back-link / .report-back / .report-hub-back 다섯 벌을 갖고 있었다(뒤 둘은 선언이 완전히 동일한 중복). 높이가 28·40·44·48px 로 갈리고 .pg-back 은 테두리 없는 회색 글자라 같은 동작인데 페이지마다 다른 물건처럼 보였다. 여기 하나로 모은다. · 만지는 층이므로 계약대로 솟고(x-lit), 눌리면 가라앉는다. · 아이콘은 스프라이트(#i-chev-left)에 의존하지 않고 인라인 — 스프라이트는 15개 앱 페이지 중 3곳에만 있어서 공용으로 쓰면 나머지에서 깨진다. · 라벨(뒤로 / 이전 / 홈으로)은 맥락이 다르므로 HTML 에 남긴다. */ .btn-back { display:inline-flex; align-items:center; gap: var(--space-1); min-height:44px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-input); border:1px solid var(--rule); background:var(--ground-hi); box-shadow:inset 1px 1px 0 var(--glass-edge),var(--shadow-float); color:var(--ink); font:600 var(--fs-body-sm)/1 var(--font); text-decoration:none; white-space:nowrap; cursor:pointer; transition: background var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); } /* 흐름(block) 배치에서는 아래 여백을 직접 준다. .report-detail-head 는 flex gap:14px 로 이미 띄우므로 제외 — 거기에 margin 까지 주면 28px 이 된다. 헤더 바 안(.auth-top/.ob-top) 은 가로 flex 라 아래 여백이 필요 없다. .form-page 계열은 뒤로가기를 컬럼 밖 .app-page-bar 로 뺐으므로 여기서 빠진다. */ .rpt-page > .btn-back { margin-bottom: var(--space-4); } .btn-back:hover { background:var(--rule); } .btn-back:active { box-shadow:inset 0 0 0 1px var(--rule); } .btn-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* 좁은 화면 헤더 폭 예산 — 390px 에서 헤더 안폭이 277px 이고 gap 이 20px 씩이라 자식 폭 합이 정확히 꽉 찼다(여유 0). 그 결과 워드마크가 압축돼 'AX CONC' 로 잘리고 (nowrap + ellipsis 보호가 워드마크 자체를 자른다) 요금제에서는 '시작하기' 가 2줄로 접혔다. 랜딩(index)은 우측 액션을 버거 패널로 보내서 여유가 있었다 — 같은 방식으로 좁은 화면에서 헤더에 남길 것을 줄인다. ① 헤더 뒤로가기는 아이콘만 남긴다(85px → 44px). 라벨은 시각적으로만 접는다 (position+clip-path) — 스크린리더는 그 텍스트를 그대로 읽으므로 이름이 사라지지 않는다. 본문의 .btn-back 은 폭 경쟁이 없어 제외. */ @media (max-width:480px){ :is(.auth-top, .ob-top) .btn-back { padding:0; width:44px; justify-content:center; } :is(.auth-top, .ob-top) .btn-back .bb-label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ② 요금제 헤더 CTA(60px + gap 20px)를 접는다. 버거 패널이 대신 받으므로 '시작하기' 에 닿는 길은 남는다(nav-burger.js 의 cta 항목). */ .pr-top .pr-cta-top { display:none; } } /* ══════════ 프로필 사진 고르기 공통 ══════════ 앱 설정(app-forms.css)과 관리자 콘솔(admin.css)이 함께 쓴다 — 관리자는 app-forms.css 를 불러오지 않으므로 공용 층에 둔다. 미리보기는 '사진이 들어갈 자리' 이므로 계약대로 가라앉는다(x-well). 버튼은 만지는 층이라 .btn 이 자기 입체를 갖는다 — 여기서 다시 주지 않는다. 파일 입력은 시각적으로만 숨긴다(display:none 이면 라벨 클릭으로 열리긴 하나 키보드 포커스를 받을 수 없어 Tab 으로 도달하지 못한다). */ .photo-pick { display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; } .photo-prev { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--canvas); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--rule); } .photo-prev svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .photo-file { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .photo-pick:focus-within .btn { outline: 2px solid var(--focus-ring); outline-offset:2px; } /* 사진이 들어가면 아이콘 자리를 꽉 채운다 — 원형은 부모가 잘라 준다 */ .avatar-img { width:100%; height:100%; object-fit:cover; display:block; } .app-avatar.has-photo, .avatar.has-photo { padding:0; overflow:hidden; } /* ══════════ 좁은 화면 내비 버거 공통 ══════════ 랜딩 전용 sections.css 에 있었는데 요금제는 그 파일을 불러오지 않아, 버거 CSS 가 아예 없는 채로 nav-burger.js 가 만든 버튼이 스타일 없는 맨