/* UNI Solar — 토스 디자인 토큰 v2.0 */ :root { --blue: #3182F6; --blue-l: #EBF3FF; --green: #00B493; --green-l: #E6FAF5; --red: #F04452; --red-l: #FFF0F0; --orange: #3182F6; --yellow: #F7C948; --bg: #F2F4F6; --bg2: #E8EAED; --surface: #FFFFFF; --surface2:#F8F9FA; --text: #191F28; --text2: #3D4358; --text3: #8B95A1; --border: #E5E8EB; --accent: #3182F6; --accent2: #FF6B35; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 2px 12px rgba(0,0,0,.08); --shadow-lg: 0 4px 24px rgba(0,0,0,.10); --font: 'Pretendard', -apple-system, sans-serif; } /* F-22 (배치 29.5): html.dark / html.light 셀렉터 추가. 인라인 IIFE 가 첫 페인트 전에 클래스 박음 → toss-vars 변수가 첫 페인트부터 정확. F-21 의 body.dark / body.light 와 병기 (specificity 동일 0,0,1,1, header.js 가 둘 다 토글). */ html.dark, body.dark { --bg: #121416; --bg2: #1C1E20; --surface: #1E2025; --surface2:#262A30; --text: #F2F4F6; --text2: #B0B8C1; --text3: #6B7684; --border: #2E3035; --shadow-sm: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 2px 12px rgba(0,0,0,.4); /* Phase 2-A0: 다크모드 액센트 변수 커버리지 보강 */ --blue-l: #1e3a5f; --green-l: #1a3d2e; --red-l: #3d1a1a; --yellow: #c9a227; --orange: #d97706; } /* F-21 (배치 29) + F-22 (배치 29.5): light 명시 override. @media (prefers-color-scheme: dark) :root 가 OS 다크 모드일 때 자동 적용되는데, 사용자가 라이트로 토글해도 body.dark 만 제거되고 light vars 복원이 안 되어 다크가 유지됐음 (C-2-C VPP 강제 다크). html.light / body.light 명시 시 specificity (0,0,1,1) > :root (0,0,1,0) 로 @media 블록을 이긴다. */ html.light, body.light { --bg: #F2F4F6; --bg2: #E8EAED; --surface: #FFFFFF; --surface2:#F8F9FA; --text: #191F28; --text2: #3D4358; --text3: #8B95A1; --border: #E5E8EB; --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 2px 12px rgba(0,0,0,.08); --blue-l: #EBF3FF; --green-l: #E6FAF5; --red-l: #FFF0F0; --yellow: #F7C948; --orange: #3182F6; } /* OS prefers-color-scheme 자동 반영 — body.dark 클래스가 부여되기 전 초기 페인트 구간에도 다크 적용되도록 병존. header.js가 매치 시 body.dark도 함께 붙임. body.light 가 명시되면 위 블록이 이걸 이긴다 (F-21). */ @media (prefers-color-scheme: dark) { :root { --bg: #121416; --bg2: #1C1E20; --surface: #1E2025; --surface2:#262A30; --text: #F2F4F6; --text2: #B0B8C1; --text3: #6B7684; --border: #2E3035; --shadow-sm: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 2px 12px rgba(0,0,0,.4); /* Phase 2-A0+: OS 다크 모드 초기 페인트 대응 */ --blue-l: #1e3a5f; --green-l: #1a3d2e; --red-l: #3d1a1a; --yellow: #c9a227; --orange: #d97706; } } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* 카드 */ .t-card { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); } /* 버튼 */ .t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--r-md); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; } .t-btn-primary { background: var(--accent); color: #fff; } .t-btn-primary:hover { background: #1B64DA; } .t-btn-secondary { background: var(--bg2); color: var(--text); } .t-btn-secondary:hover { background: var(--border); } .t-btn-ghost { background: transparent; color: var(--text2); } /* 배지 */ .t-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; } .t-badge-blue { background: var(--blue-l); color: var(--blue); } .t-badge-green { background: var(--green-l); color: var(--green); } .t-badge-orange { background: #FFF3EE; color: var(--orange); } .t-badge-gray { background: var(--bg2); color: var(--text3); } /* 구분선 */ .t-divider { height: 1px; background: var(--border); margin: 0 -20px; } /* 리스트 행 */ .t-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); } .t-row:last-child { border-bottom: none; } /* 섹션 헤더 */ .t-section-title { font-size: 13px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; } /* 입력 */ .t-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 15px; transition: border-color .15s; outline: none; } .t-input:focus { border-color: var(--accent); }