/* 디자인 토큰 + 베이스 리셋. styles.css의 cascade 시작점 — 다른 모든 stylesheet보다 먼저 로드된다. * 색상/간격/z-index/치수 변수는 모두 여기서 정의하고 styles.css를 포함한 컴포넌트 stylesheet에서 var()로 소비. */ :root { /* 배경 — 중성 페이퍼 톤 */ --bg-base: #F7F7F8; --bg-surface: #FFFFFF; --bg-elevated: #EFEFF1; /* 텍스트 — 그래파이트 계열 */ --tx: #1C1D1F; --tx2: #62646A; --tx3: #9A9CA3; /* 포인트 — 잉크 블루 (단일 액센트) */ --ac: #2B5BD7; --ac-lo: rgba(43, 91, 215, 0.10); --ac-br: rgba(43, 91, 215, 0.25); /* 테두리 */ --brd: rgba(28, 29, 31, 0.08); --brd2: rgba(28, 29, 31, 0.16); /* 수 분류 — 라이트 배경용 어두운 톤 (갈색 계열 정리) */ --blunder: #D03832; /* 클리어 레드 (was 적갈) */ --mistake: #D97706; /* 클리어 오렌지 (was 갈오렌지) */ --inaccuracy: #C99B2D; /* 클리어 앰버 (was 액센트와 동일했음) */ --excellent: #6B8C3A; /* Best보다 약간 밝은 녹 — 1순위 미일치인데 거의 best급 */ --best: #5A7A3A; --great: #2D6E55; /* Best보다 한 단계 깊은 청녹 — "유일 정답" 강조 */ --brilliant: #3A8560; --missed-mate: #BD7A9C; /* 놓친 메이트 — 모브(분류색과 구분되는 별도 카테고리) */ /* 승/패 — 통계 표시용 (분류색과 분리, 큰 면적에서도 차분하게) */ --win: #1F7A4D; /* 딥 에메랄드 */ --loss: #B23A3A; /* 가넷 (와인톤 레드) */ /* 체스 보드 — 무채색 그레이지(사이트 페이퍼/그래파이트 톤과 정합). 분석 화면 실제 보드와 동일 토큰. */ --board-light: #ECE6D9; --board-dark: #ABA088; /* Review report — 평가 그래프 백/흑 진영 색 (디자인 절대 평가 표시). 보라(black-side)는 chess.com과 차별 + 본인 진영 강조용. */ --review-graph-bg: #F6F7FA; --review-mid-line: #CDD1D9; --review-white-line: #1F2937; --review-white-area: rgba(17, 22, 28, 0.10); --review-black-line: #6B46D6; --review-black-area: rgba(107, 70, 214, 0.18); --review-cta-bg: #2A52D6; /* 레이아웃 z-index (색상 아님 — 유지) */ --z-board-coords: 2; --z-badge: 10; --z-overlay: 200; --z-sticky: 999; --z-sticky-top: 1000; --z-drawer-backdrop: 1100; --z-drawer: 1200; --z-modal: 9999; /* 레이아웃 치수 (색상 아님 — 유지) */ --topbar-height: 47px; --game-card-height: 64px; --game-card-gap: 6px; /* Type scale (mobile 9:16 컨테이너용 — Apple iOS 17/15/13에서 한 단계 축소) */ --fs-title: 15px; --fs-body: 14px; --fs-meta: 12px; --fw-title: 600; --fw-body: 400; /* 숫자 디스플레이 (eval/엔진 라인) — mono + tabular-nums. IBM Plex Mono는 브랜드 텍스트와 공유 로드. */ --num-font: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* Press affordance (Notion gray-fill 패턴 — transform: scale 사용 안 함) */ --press-fill: rgba(28, 29, 31, 0.05); --press-fill-active: rgba(28, 29, 31, 0.08); /* Inset grouped list (Apple HIG Mail/Notes/Files 표준) */ --list-container-radius: 14px; --list-divider: rgba(28, 29, 31, 0.06); --list-row-pad-x: 16px; --list-row-pad-y: 12px; --list-row-min-h: 60px; /* Apple "standard" — 텍스트만 */ --list-row-min-h-spacious: 76px; /* mini-board 동반 */ --list-row-min-h-compact: 44px; /* 필터 탭 — HIG 최소 */ } /* Dark theme — `` 시 활성. premium calm 톤 유지: 배경은 #0F1115 ~ #22252D 범위(차가운 그래파이트), 텍스트는 페이퍼 화이트. 액센트는 다크에서 더 잘 보이게 약간 밝힘. 분류색은 채도 살짝 올림. */ :root[data-theme="dark"] { --bg-base: #0F1115; --bg-surface: #181A20; --bg-elevated: #22252D; --tx: #F2F3F5; --tx2: #B8BCC4; --tx3: #80848D; --ac: #4A7CFF; --ac-lo: rgba(74, 124, 255, 0.15); --ac-br: rgba(74, 124, 255, 0.35); --brd: rgba(255, 255, 255, 0.10); --brd2: rgba(255, 255, 255, 0.18); --blunder: #FF5C56; --mistake: #FF9531; --inaccuracy: #E4B53C; --excellent: #8FB35E; --best: #7DA152; --great: #4FA078; --brilliant: #5DAF82; --missed-mate: #D690B0; /* 놓친 메이트 — 다크 배경용 밝은 모브 */ --win: #36B068; --loss: #D8615E; /* 보드 톤은 라이트/다크 무관 동일(무채색 그레이지). 모드 간 보드만 다른 인지 부조화 제거. */ --board-light: #ECE6D9; --board-dark: #ABA088; --review-graph-bg: #1A1D24; --review-mid-line: rgba(255, 255, 255, 0.18); --review-white-line: #E5E7EB; --review-white-area: rgba(229, 231, 235, 0.10); --review-black-line: #A78BFA; --review-black-area: rgba(167, 139, 250, 0.20); --review-cta-bg: #4A7CFF; --list-divider: rgba(255, 255, 255, 0.06); --press-fill: rgba(255, 255, 255, 0.05); --press-fill-active: rgba(255, 255, 255, 0.08); } /* body 배경 + 그라데이션은 :root 변수가 아니라 직접 컬러라 별도 override */ :root[data-theme="dark"] body { background-color: #06070A; background-image: radial-gradient(circle at 15% 50%, rgba(74, 124, 255, 0.05), transparent 25%), radial-gradient(circle at 85% 30%, rgba(74, 124, 255, 0.04), transparent 25%); } :root[data-theme="dark"] .app-container { box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } html { /* 브라우저 레벨의 바운스 효과 및 전체 페이지 스크롤 원천 차단 */ overflow: hidden; max-width: 100%; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* 의도치 않은 가로 스크롤을 유발할 수 있는 미디어 요소의 폭 제한 */ img, video { max-width: 100%; height: auto; } body { font-family: 'Inter', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #1C1D1F; /* PC 배경: 중성 페이퍼 앱 컨테이너와 구분되는 그래파이트 */ color: var(--tx); height: 100vh; /* 하위 브라우저용 Fallback */ height: 100dvh; /* 모바일 브라우저 주소창(동적 뷰포트) 높이 완벽 대응 */ overflow: hidden; /* 페이지 밖으로 삐져나가는 전체 스크롤 및 하단 빈 공간 노출 차단 */ max-width: 100vw; background-image: radial-gradient(circle at 15% 50%, rgba(43, 91, 215, 0.04), transparent 25%), radial-gradient(circle at 85% 30%, rgba(43, 91, 215, 0.03), transparent 25%); display: flex; justify-content: center; align-items: flex-start; padding: 0; /* Mobile edge-to-edge */ overscroll-behavior-y: none; /* 모바일(특히 iOS) 당겨서 새로고침(Pull-to-refresh) 및 바운스 효과 방지 */ } .app-container { width: 100%; max-width: 420px; /* PC 화면에서 모바일 비율 너비로 제한 */ display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* 모바일 브라우저 하단 스크롤 잘림(100vh 버그) 완벽 방지 */ background-color: var(--bg-base); /* PC 배경과 구분하기 위한 배경색 */ box-shadow: 0 0 40px rgba(0, 0, 0, 0.12); /* 앱 영역 강조 그림자 — 라이트 배경에 맞춰 약화 */ /* overflow:clip으로 scrollable container 자체를 차단. overflow:hidden은 클립만 하지만 scrollable이라서 자식 element가 focus될 때 브라우저가 자동 scrollIntoView로 .app-container.scrollTop을 변경할 수 있음. 페이지화 후 in-flow 콘텐츠가 moves-overlay-sheet의 transform:translateY(100%) 인접 영향으로 scrollHeight가 viewport보다 커지면서 발생. clip은 scrollable 컨테이너 자체를 무효화. */ overflow: clip; position: relative; /* 바텀 네비게이션이 보일 때는 nav가 자체 padding으로 safe-area 처리, 숨겨져 있을 때(분석/입력 화면)만 .app-container가 safe-area 보정 */ padding-bottom: 0; } .app-container.bottom-nav-hidden { padding-bottom: env(safe-area-inset-bottom); } /* 화면 로딩 오버레이 — vault/saved 진입 시 supabase fetch 동안 빈 화면(naked) 가림. .view-container 내부에 absolute로 띄움. JS가 진입 직후 표시 → 데이터 도착 시 페이드아웃. */ .screen-loading { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--bg-base); transition: opacity 180ms ease; pointer-events: none; } .screen-loading.is-hidden { opacity: 0; } .screen-loading-brand { font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; opacity: 0.55; } .screen-loading-brand .brand-blunder { color: var(--tx); } .screen-loading-brand .brand-mate { color: var(--ac); } /* PC/태블릿(≥480px): 수직 중앙 정렬. 모바일(<480px)은 기존 그대로. 너비는 viewport height × 9:16 비율로 계산 — 세로 긴 PC 모니터에서 420px 고정이 홀쭉하게 보이던 문제 해결. 폭이 viewport를 넘으면 vw로 캡(매우 짧고 넓은 창에서 안전). body는 컨테이너 톤(var(--bg-base))과 통일해 "어두운 책상 위 폰" 프레임 제거 — PC에서 컬럼 가장자리가 시각적으로 사라져 안의 모바일 UI만 그대로 보임. 안쪽 콘텐츠는 미변경. */ @media (min-width: 480px) { body { align-items: center; background-color: var(--bg-base); background-image: none; } .app-container { height: 100dvh; min-height: 0; /* aspect-ratio는 자식 min-content가 더 크면 밀려 늘어남 — calc로 폭을 잠금 */ width: min(100vw, calc(100dvh * 9 / 16)); max-width: none; box-shadow: none; } /* drawer closed에서도 box-shadow가 항상 켜져 있어 컨테이너 overflow:clip 안쪽까지 18px 그림자가 스며들고, body가 컨테이너와 같은 톤이 된 PC에선 그게 우측 vertical hairline으로 또렷이 보임. open(is-open) 상태에서만 shadow — 그땐 drawer 자체가 실제 보여야 하니 정상. 모바일은 body 그래파이트라 미적용 — 안의 시각적 결과는 모두 모바일 그대로. */ .app-container .drawer:not(.is-open) { box-shadow: none; } } /* PC 다크 — body/컨테이너 모두 var(--bg-base) 동일 톤, 프레임/그라데이션 제거. 모바일은 컨테이너가 full-bleed라 body bg가 보이지 않아 영향 없음. */ @media (min-width: 480px) { :root[data-theme="dark"] body { background-color: var(--bg-base); background-image: none; } :root[data-theme="dark"] .app-container { box-shadow: none; } }