/* ── 마루 부리(네이버 공식) — 한글 세리프 표제용. 2026-08-05 글씨체 검수. 공식 css 는 굵기를 패밀리 이름으로 쪼개 놓아(font-weight 매핑 없음) 600 이 가짜 볼드가 된다 — 여기서 weight 를 제대로 매핑해 선언한다. woff2 만 싣는다. */ @font-face{font-family:'MaruBuri';font-weight:300;font-display:swap; src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2) format('woff2')} @font-face{font-family:'MaruBuri';font-weight:400;font-display:swap; src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format('woff2')} @font-face{font-family:'MaruBuri';font-weight:500;font-display:swap; src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2')} @font-face{font-family:'MaruBuri';font-weight:600;font-display:swap; src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2')} @font-face{font-family:'MaruBuri';font-weight:700;font-display:swap; src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format('woff2')} /* ───────────────────────────────────────────────────────────── LUEUR 공통 디자인 시스템 (B · 모던 프리미엄) - 이 파일이 모든 페이지의 색·서체·기본 컴포넌트 톤을 결정합니다. - 각 페이지 마지막에 링크되어 페이지 내 기존 :root 값을 덮어씁니다. - 서체: 본문 Pretendard / 로고·영문 장식만 Cormorant Garamond ───────────────────────────────────────────────────────────── */ :root{ /* 색 — 아이보리 + 에스프레소 + 샴페인 골드 */ --cream:#f2efe8; /* 페이지 배경 — 킨포크 오트밀 (2026-08-05 세이지 개편) */ --cream-2:#e2ded3; /* 배경 단계 2 */ --paper:#faf8f3; /* 카드/표면 — 밝게 올려 대비 확보 */ --ink:#28241c; /* 본문 잉크 (진하게 — 가독성) */ --ink-soft:#575245; /* 보조 텍스트 (WCAG AA 통과) */ --soft:#575245; /* report.html 별칭 */ --muted:#6e6558; /* 힌트/캡션 */ --line:#e2ded3; /* 기본 선 */ --line-soft:#f2efe8; /* 옅은 선 */ --accent:#51654e; /* 행동색 — 킨포크 세이지 (2026-08-05 개편, 원장 확정) */ --accent-2:#63775f; /* 세이지 밝은 단 (그래프·잔디) */ --accent-deep:#3d4d3a; /* 세이지 텍스트용 */ --accent-soft:#e9ece2; /* 세이지 옅은 배경 (태그·칠) */ --terra:#a04e31; /* 테라코타 — 오답·경고 전용 */ --gold:#b08d45; /* 샴페인 골드 — 별자리·카드·훈장 전용 (행동색 아님) */ --gold-deep:#7e6229; /* 딥 골드 — 별·카드 텍스트 전용 */ --sage:#6e8f7c; /* 세이지 그린 */ --good:#4e8f63; /* 긍정 */ --warn:#c07f2e; /* 주의 */ --bad:#b3564e; /* 부정 */ /* 라운드 눈금(2026-08-05 실측 정렬) — 질감(≤6) · 8 작은 것 · 12 입력·행 · 18 카드 · 28 시트·온보딩 · 999 필. 이 눈금 밖 값을 새로 만들지 않는다 (세이지적용검사 [7]이 지킨다). 그림자는 --shadow-1(카드)·-2(떠 있는 것)·-pop(모달)만. */ --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --shadow-1:0 1px 2px rgba(56,44,25,.05),0 4px 14px rgba(56,44,25,.05); --shadow-2:0 2px 6px rgba(56,44,25,.06),0 14px 34px rgba(56,44,25,.09); --shadow-pop:0 20px 60px rgba(0,0,0,.26); --font-sans:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-serif:'Cormorant Garamond','MaruBuri','Noto Serif KR',serif; } /* 본문 서체 — Pretendard, 얇은 300 대신 표준 400으로 또렷하게 */ body{ font-family:var(--font-sans); font-weight:400; letter-spacing:-0.011em; text-rendering:optimizeLegibility; } /* 한글 큰 제목 — 세리프 대신 단단한 산세리프 디스플레이 */ body .display{font-family:var(--font-sans);font-weight:650;letter-spacing:-0.02em;word-break:keep-all} /* 랜딩 헤드라인 — Pretendard 볼드로 교체 (LUEUR 워드마크·세리프 인용문은 유지) */ body .hero h1, body .ehead h2, body .contact h2, body .manifesto .mlead, body .mrow h3, body .ttCard h3, body .locCard h3{font-family:var(--font-sans);letter-spacing:-0.028em;word-break:keep-all} body .hero h1{font-weight:760;line-height:1.12} body .ehead h2,body .contact h2{font-weight:720;line-height:1.26} body .manifesto .mlead{font-weight:640;line-height:1.42} body .mrow h3,body .ttCard h3,body .locCard h3{font-weight:700;letter-spacing:-0.02em} /* 제목 속 강조(이탤릭 세리프) → 이탤릭 제거, 골드 컬러 강조로 */ body .hero h1 em,body .ehead h2 em,body .manifesto .mlead em{font-style:normal;color:var(--gold-deep)} /* 영문 워드마크·이탤릭 장식은 세리프 유지 */ body .brand{font-family:var(--font-serif)} body .fr{font-family:var(--font-serif);font-style:italic} /* 컨트롤 라운드 통일 (인라인 스타일이 있으면 그쪽이 우선 — 게임 UI 안전) */ body button{border-radius:var(--r-sm)} body .btn{border-radius:var(--r-md)} body input:not([type=checkbox]):not([type=radio]),body select,body textarea{border-radius:10px} /* 카드 — 밝은 표면 + 은은한 입체감 */ body .card{border-radius:var(--r-lg)} /* 포커스 링 — 키보드 접근성 */ body :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} /* 스크롤바 (webkit) — 톤 맞춤 */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#d8cbb0;border-radius:8px;border:2px solid var(--cream)} ::-webkit-scrollbar-track{background:transparent} /* 선택 영역 */ ::selection{background:rgba(176,141,69,.22)} /* 모션 최소화 존중 */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ── 프리미엄 폴리시 토큰 (2026) — 리서치 종합 적용 ────────────── 모션: 마이크로 150 / 표준 220 / 큰 전환 320ms. 진입 ease-out 주력. 숫자: 통계·시간·랭크는 tabular-nums 로 자릿수 정렬(흔들림 제거). 확정 브랜드(크림+골드+네이비)는 유지 — 결과 리듬만 정련. */ :root{ --dur-micro:150ms; --dur-base:220ms; --dur-lg:320ms; --ease-out:cubic-bezier(.4,0,.2,1); --ease-snap:cubic-bezier(.3,.7,.4,1); --ease-in:cubic-bezier(.4,0,1,1); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:48px; } /* 데이터 숫자 자릿수 정렬 — 존재하지 않는 선택자는 무시되므로 안전(가법적) */ .ah-today b,.ah-score b,#ahComp,#ahWk,#ahStk,.ah-lh-time b,.ah-lh-num, .bk-kpis .vl,.bk-tally .vl,.bk-bar .bv,.sp-metric b,.sp-metric .v,.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } /* 탭 피드백 — 카드/칩 살짝 눌림(프리미엄 마이크로인터랙션). transform만 사용해 레이아웃 영향 없음 */ .ahtap{transition:transform var(--dur-micro) var(--ease-snap)} .ahtap:active{transform:scale(.985)} /* ══ 세이지 개편 · 인터랙션 공용 (2026-08-05) ═══════════════════ 누르는 맛(스프링)·순차 등장·잔디 심기. 화면 코드는 클래스만 붙인다. */ .lu-press{transition:transform .18s cubic-bezier(.2,.8,.3,1.2)} .lu-press:active{transform:scale(.966)} .lu-rise{opacity:0;transform:translateY(14px)} .lu-rise.go{animation:luRise .5s cubic-bezier(.2,.7,.2,1) forwards} @keyframes luRise{to{opacity:1;transform:none}} .lu-pop{opacity:0;transform:scale(.4)} .lu-pop.go{animation:luPop .3s forwards} @keyframes luPop{to{opacity:1;transform:scale(1)}} .lu-grade-in{animation:luGrade .3s cubic-bezier(.2,.8,.3,1.2)} @keyframes luGrade{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .lu-press,.lu-rise,.lu-pop,.lu-grade-in{animation:none!important;transition:none!important;opacity:1;transform:none} }