/* Pretendard (game-site 디자인 폰트). 내부망 배포 위해 로컬 woff2 포함. */ @font-face { font-family:'Pretendard'; font-weight:400; font-display:swap; src:url('../assets/fonts/Pretendard-400.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:500; font-display:swap; src:url('../assets/fonts/Pretendard-500.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:700; font-display:swap; src:url('../assets/fonts/Pretendard-700.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:800; font-display:swap; src:url('../assets/fonts/Pretendard-800.woff2') format('woff2'); } /* * 오뮤 다예쁨체(발주처 요청 2026-09-08 슬라이드 2·4). * 로그인·메인 화면을 뺀 모든 화면이 쓴다. 굵기가 하나뿐이라 굵은 글씨는 브라우저가 * 합성한다. woff2 가 아니라 ttf 원본 그대로 둔 이유는 내부망 배포라 용량보다 * 원본 유지가 중요하고, 변환 도구를 저장소에 더하지 않기 위해서다. */ @font-face { font-family:'omyu pretty'; font-weight:400; font-display:swap; src:url('../assets/fonts/omyu-pretty.ttf') format('truetype'); } /* * 에스코어 드림(발주처 요청 2026-09-10 슬라이드 12). 이제 전 화면 공용 글꼴이다. * 발주처가 "Typography 통일"을 지시해 omyu·Pretendard 를 이 글꼴로 대체한다 * (색·레이아웃·아이콘 등 톤앤매너는 유지). woff2 변환 도구를 저장소에 더하지 않으려 * otf 원본을 그대로 쓴다. 굵기: 4=Regular 5=Medium 6=Bold 7=ExtraBold. */ @font-face { font-family:'SCDream'; font-weight:400; font-display:swap; src:url('../assets/fonts/SCDream4.otf') format('opentype'); } @font-face { font-family:'SCDream'; font-weight:500; font-display:swap; src:url('../assets/fonts/SCDream5.otf') format('opentype'); } @font-face { font-family:'SCDream'; font-weight:700; font-display:swap; src:url('../assets/fonts/SCDream6.otf') format('opentype'); } @font-face { font-family:'SCDream'; font-weight:800; font-display:swap; src:url('../assets/fonts/SCDream7.otf') format('opentype'); } @font-face { font-family:'Pretendard'; font-weight:900; font-display:swap; src:url('../assets/fonts/Pretendard-900.woff2') format('woff2'); } :root { --c-outline: #f0ebe7; --c-ui-blue: #e9002d; --c-ui-blue-dark: #c00026; --c-ui-cream: #fff3e8; --c-floor-a: #8a8f96; --c-floor-b: #e6ded9; --hard-shadow: 0 4px 0 #f0ebe7; --c-bg-outdoor: #f4f1ee; --c-bg-floor-a: var(--c-floor-a); --c-bg-floor-b: var(--c-floor-b); --c-wall: #ff7a01; --c-panel: var(--c-ui-cream); --c-ink: var(--c-outline); --c-line: var(--c-outline); --c-accent: var(--c-ui-blue); --c-accent-dark: var(--c-ui-blue-dark); --c-warn: #e9002d; --c-ok: #15a34a; --c-gold: #ff7a01; --c-wall-dark: #ff7a01; --c-metal: #1f2429; --c-metal-dark: #9caab1; --c-wood: #d97706; --c-wood-dark: #d97706; --c-screen: #f4f1ee; --c-screen-glow: #c00026; --c-danger: #ff7a01; --c-plant: #15a34a; --c-plant-dark: #15a34a; --c-pot: #d97706; --line-w: 3px; --radius: 10px; --hud-h: 72px; --shadow: var(--hard-shadow); /* ── 플랫 UI 팔레트 (화면기획서 메뉴/팝업 목업 기준) ── */ --flat-bg: #f4f1ee; /* 프레임 뒤 배경 */ --flat-panel: #ffffff; /* 프레임 내부 */ --flat-card: #faf7f5; /* 카드/통계 박스 */ --flat-line: #e6ded9; /* 얇은 테두리 */ --flat-line-in: #e6ded9; /* 입력창 테두리(연파랑) */ --flat-ink: #1f2429; /* 진한 남색 텍스트/제목 */ --flat-sub: #8a8f96; /* 회색 보조 텍스트 */ --flat-blue: #e9002d; /* 주 버튼/강조 */ --flat-blue-dark: #c00026; --flat-red: #e9002d; /* SK hynix / 미션 아이콘 / 위험 */ --flat-peach: #fff3e8; /* 획득 뱃지 배경 */ --flat-peach-line: #ffc99a; --flat-orange: #ff7a01; /* 획득 뱃지 별/강조 */ --flat-navy: #1f2429; /* HUD 칩 / 표 헤더 */ --flat-badge: #8a8f96; /* 결과 화면 원형 뱃지 */ /* ── SK hynix 라이트 팔레트 ── 흰 바탕 + 로고 색(다홍 #e9002d · 주황 #ff7a01). 2026-09-01 발주처 요청으로 남색 다크 테마에서 옮겨왔다. 변수 이름(gs-navy-*, gs-cyan)은 화면 곳곳에서 쓰이고 있어 그대로 두고 값만 바꿨다. 이름과 색이 다르니 값을 보고 판단할 것. 비활성화 버튼의 회색은 발주처 지시로 회색을 유지한다. */ --gs-navy-950: #f4f1ee; --gs-navy-900: #f4f1ee; --gs-navy-800: #ffffff; --gs-navy-700: #f0ebe7; --gs-cyan: #e9002d; --gs-cyan-soft: #c00026; --gs-orange: #ff7a01; --gs-orange-deep: #e06a00; --gs-green: #15a34a; --gs-yellow: #d97706; --gs-red: #e9002d; --gs-text: #1f2429; --gs-muted: #6f757c; --gs-line: #e6ded972; --gs-glass: #f4f1ee8a; /* 0910 S12: 전 화면 SCDream 으로 통일. 폴백만 기존 유지. */ --font: "SCDream", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; /* 로그인·메인 외 화면(발주처 요청 2026-09-08). 아래 화면 루트에서 이 변수를 쓴다. */ --font-game: "SCDream", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; /* Typography 계층 (발주처 요청 2026-09-10 슬라이드 12). 1920x1080 전체화면 가독성 기준. 읽는 텍스트는 16px 미만으로 줄이지 않는다. 넘치면 글자를 줄이지 말고 줄바꿈·여백·높이로 대응한다. 0909 의 80% 축소는 되돌렸고(0910), 이제 이 계층이 크기의 기준이다. */ --ty-title: 32px; /* 메인·팝업 제목 (28~32 / Bold) */ --ty-title-sm: 28px; --ty-question: 22px; /* 핵심 질문·주요 안내 (20~24 / Bold) */ --ty-body: 18px; /* 선택지·카드·주요 본문 (17~19 / Medium~Bold) */ --ty-desc: 16px; /* 일반 설명·안내 (15~17 / Medium) */ --ty-meta: 15px; /* 보조·번호·상태값 (14~15) */ --ty-btn: 18px; /* 버튼 (17~18 / Bold) */ --ty-num: 28px; /* 시간·점수 등 핵심 수치 (26~30 / Extra Bold) */ } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--c-ink); font-weight: 700; } button { font-family: inherit; } /* 게임 화면에서는 글자를 끌어 선택하거나 이미지를 끌어내지 못하게 한다. 조치형·순서형의 카드 드래그는 draggable 요소(div)라 영향을 받지 않는다. */ body { -webkit-user-select: none; -ms-user-select: none; user-select: none; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } img { -webkit-user-drag: none; } /* ── game-site 인터랙션: 버튼 공통 트랜지션 + 눌림 반응 ── */ button, .main-screen__btn, .dlg__btn, .bg-pop__close, .result__btn, .howto__btn, .howto__tab, .tutorial__btn, .admin__logout, .admin__search-btn, .admin__page, .login__submit, .panel__submit, .panel__close, .choice, .card, .list__item, .tab, .reset-btn { transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease, opacity .18s ease; } /* 클릭 순간 살짝 눌리는 반응(누르는 맛) */ button:active:not(:disabled), .main-screen__btn:active:not(:disabled), .dlg__btn:active, .result__btn:active, .bg-pop__close:active, .login__submit:active:not(:disabled), .panel__submit:active:not(:disabled), .choice:active, .card:active, .list__item:active { transform: translateY(1px) scale(.985); } /* 미션 아이콘 통통 떠다니는 애니메이션(game-site markerFloat) */ @keyframes gs-marker-float { 50% { transform: translateX(-50%) translateY(-8px); } } /* 타이머 위험 맥박(game-site dangerPulse) */ @keyframes gs-danger-pulse { to { box-shadow: 0 0 24px #e9002d66; } }