/* 페이지 이동을 부드러운 크로스페이드로 — 교차문서 View Transition (미지원 브라우저는 기존 즉시 이동) */
@view-transition{ navigation: auto; }
html{ overflow-y: scroll; scrollbar-gutter: stable; } /* 스크롤바 항상 강제(scroll) → 모든 화면 폭 동일 → 페이지 이동 시 내비 좌우 밀림 방지(구형 브라우저도 적용) */
::view-transition-old(root),::view-transition-new(root){ animation-duration:.32s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } }
/* ==========================================================================
fitting · 디자인 토큰 (단일 출처 / Single Source of Truth)
기준: sohee/디자인가이드.html "딥그린" (2026-07)
구 05_스타일가이드(검정+블루)·--ac/--accent 별칭은 폐기 → 아래로 수렴.
폰트: Pretendard(본문·한글) + SUIT(측정 수치 전용, tabular-nums).
두 폰트 모두 한글 지원(프로젝트 필수 규칙).
---
========================================================================== */
:root{
/* ── 뉴트럴 베이스 (구조: 배경·표면·텍스트·선) ───────────────────── */
--bg:#F6F6F5; /* Paper — 기본 배경(오프화이트) */
--surface:#FFFFFF; /* 카드·표면 */
--ink:#16140F; /* 본문·버튼(순검정 대신 잉크블랙) */
--ink-soft:#3A382F; /* 진한 보조 텍스트 */
--sub:#6E6B63; /* 보조 텍스트 */
--sub2:#A6A29A; /* 옅은 텍스트·플레이스홀더·캡션 */
--line:#E6E5E1; /* 얇은 경계선·카드 테두리 */
--line2:#DAD8D2; /* 입력·옵션 테두리(1.5px) */
--soft:#EDEDEA; /* 태그·연한 면 */
/* ── 딥그린 액센트 (유일한 포인트색) ────────────────────────────── */
--green:#2E4A3B; /* 메인 — 강조 키워드·활성·핵심 포인트 */
--green-mid:#5A7A68; /* 보조 강조 */
--green-light:#9CC1AE; /* 다크 배경 위 강조 텍스트 */
--green-soft:#E7EFEA; /* 활성 메뉴·뱃지 배경 */
--green-line:#CBDDD2; /* 연한초록 버튼·칩 테두리(딥그린 강조의 저채도 라인) */
/* ── 기능색 (분리, 절제) ────────────────────────────────────────── */
--warn:#B0553F; /* 경고·주의·검증 '틀림' (UX라이팅가이드) */
--warn-soft:#F7ECE8; /* 경고 배경 — 연한 면(피해야 할 핏 칩 등) */
/* 성공·'맞음' 신호는 브랜드 --green 겸용. '애매'는 --sub. */
/* ── 타이포 ─────────────────────────────────────────────────────── */
--sans:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
--num:'SUIT Variable','Pretendard',sans-serif; /* 측정 수치(cm·사이즈·매칭도%) 전용 */
/* 굵기 */ --w-light:300; --w-reg:400; --w-book:450; --w-med:500; --w-bold:700; --w-x:800;
/* 크기(위계는 색 아닌 굵기·자간·여백으로) */
--fs-display:44px; /* Display · 800 */
--fs-h1:37px; /* H1 · 800 */
--fs-h2:24px; /* H2 · 800 */
--fs-h3:19px; /* H3 · 800 */
--fs-body:16px; /* 본문 · 450 */
--fs-sm:14px; /* 보조 · 450 */
--fs-label:13px; /* 라벨 · 800 · uppercase */
/* 자간 */
--ls-tight:-.05em; /* 큰 제목 */
--ls-body:-.02em; /* 본문 기본 */
--ls-label:.10em; /* 라벨(양수) */
--ls-code:.20em; /* 코드(STR·HRG) */
/* ── 형태 ───────────────────────────────────────────────────────── */
--r-btn:12px; --r-input:12px; --r-chip:20px; --r-card:18px; --r-modal:24px; --r-rc:24px; /* 결과카드 20~30 */
--bd:1px solid var(--line); /* 카드·구분선 */
--bd-input:1.5px solid var(--line2); /* 입력·옵션 */
--sh-card:0 14px 34px rgba(20,22,28,.09);
--sh-drawer:-22px 0 60px rgba(0,0,0,.18);
/* ── 레이아웃 ───────────────────────────────────────────────────── */
--maxw:1240px; /* 앱 컨테이너(결과는 좌우 2단) */
--pad:26px; /* 좌우 패딩 */
/* ── 8유형 시그니처 색 (결과 카드 전용 · 예외) ──────────────────────
결과 카드는 "다크 배경 + 유형별 포인트색 1개"가 정본. UI 딥그린과 별개, 손대지 않음.
실루엣·코드·궁합·아이콘·상단 글로우에만 사용. */
--rc-bg:#16171b;
--rc-STR:#9DB8FF; --rc-TRI:#76D6C6; --rc-INV:#C2C7D0; --rc-HRG:#CF9BFF;
--rc-BAL:#8FD6A8; --rc-DIA:#FF9EC5; --rc-RND:#FF9D7A; --rc-TUB:#B6A8FF;
}
/* ── 기본 리셋·바디 ───────────────────────────────────────────────── */
*{box-sizing:border-box; margin:0; padding:0;}
/* iOS 자동 글씨 확대 끔 — 없으면 zoom으로 축소한 온보딩(#stage)의 텍스트만
Safari/카톡 인앱브라우저가 임의로 키워 카드 글씨·인트로가 깨짐(fitting.css엔 이미 있음).
index.html은 fitting.css를 안 써서 tokens.css에도 필요. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
font-family:var(--sans); background:var(--bg); color:var(--ink);
line-height:1.5; letter-spacing:var(--ls-body); -webkit-font-smoothing:antialiased;
/* 한국어 어절 단위 줄바꿈 — 없으면 '알려/주세요' '공유/용'처럼 단어 중간이 끊김.
긴 URL·영문은 overflow-wrap으로 예외 처리 */
word-break:keep-all; overflow-wrap:break-word;
}
/* 측정 수치는 SUIT + tabular-nums (자릿수 흔들림 방지) */
.num{font-family:var(--num); font-feature-settings:'tnum'; letter-spacing:0;}
/* ── 컴포넌트 규칙 (참조 구현) ─────────────────────────────────────── */
/* 버튼: 주요=잉크블랙 채움 / 보조=흰 배경+테두리. 초록 버튼 금지(원칙 2) */
.btn{padding:13px 16px; border-radius:var(--r-btn); background:var(--ink); color:#fff;
font-weight:var(--w-x); font-size:var(--fs-sm); text-align:center; border:none; cursor:pointer;}
.btn:hover{background:#000;}
.btn:disabled{background:var(--line2); cursor:not-allowed;}
.btn.ghost{background:transparent; color:var(--ink); border:var(--bd-input);}
.btn.ghost:hover{background:var(--soft);}
/* 칩/필터: 기본 흰배경 → 선택 딥그린 채움 */
.chip{padding:8px 14px; border-radius:var(--r-chip); border:var(--bd-input);
background:var(--surface); color:var(--sub); font-weight:var(--w-med); font-size:12.5px; cursor:pointer;}
.chip.on{background:var(--green); color:#fff; border-color:var(--green); font-weight:var(--w-bold);}
/* pill(뱃지): 그린 소프트 배경 + 딥그린 글자 (매칭도·정확도 등) */
.pill{padding:5px 11px; border-radius:var(--r-chip); background:var(--green-soft);
color:var(--green); font-weight:var(--w-x); font-size:11.5px;}
/* 탭: 회색 → 활성 딥그린 + 밑줄 */
.tab{color:var(--sub); font-weight:var(--w-med); padding-bottom:8px; border-bottom:2px solid transparent; cursor:pointer;}
.tab.on{color:var(--green); font-weight:var(--w-x); border-bottom-color:var(--green);}
/* 카드 */
.card{background:var(--surface); border:var(--bd); border-radius:var(--r-card); padding:24px;}
.card.hoverable{transition:transform .15s, box-shadow .15s;}
.card.hoverable:hover{transform:translateY(-3px); box-shadow:var(--sh-card);}
/* 라벨(키커): 대문자·양수 자간 */
.kicker{font-size:var(--fs-label); font-weight:var(--w-x); color:var(--sub2);
letter-spacing:var(--ls-label); text-transform:uppercase;}
/* ── 마이그레이션 호환 별칭 (임시·폐기예정) ─────────────────────────
구 화면(sohee 핏팅_전체화면=--accent*, sangmin fitting.css=--accent 블랙)을
재스킨하는 동안만 유지. 재스킨 완료 후 이 블록 삭제하고 --green* 직접 참조. */
:root{
--accent:var(--green); --accent-soft:var(--green-soft);
--accent-ink:var(--green); --accent-deep:var(--green);
--canvas:var(--bg);
}
/* ── 접근성: 키보드 포커스 표시 ─────────────────────────────────────────────
a11y.js가 클릭 전용 요소(div/span)를 포커스 가능하게 만든다. 어디에 있는지 안 보이면
키보드 사용자는 길을 잃는다. :focus-visible이라 마우스 클릭엔 뜨지 않고 키보드 이동에만 뜬다. */
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }