/* =========================================================== * RiderMeter 테마 토큰 (라이트/다크) * 로 전환. 기본 dark. * 마크업은 Tailwind 토큰 클래스(bg-bg, bg-surface, text-txt ...) 사용. * =========================================================== */ :root, [data-theme="dark"] { --bg: #0b0f14; --surface: #11161d; --surface2: #1a212b; --line: #273140; --txt: #e2e8f0; --muted: #94a3b8; --faint: #64748b; --brand: #22d3ee; --gold: #fbbf24; --promo: #a78bfa; --danger: #fb7185; --success: #34d399; --btn-bg: #22d3ee; --btn-fg: #06141a; color-scheme: dark; } [data-theme="light"] { --bg: #f6f8fb; --surface: #ffffff; --surface2: #eef2f7; --line: #dbe3ec; --txt: #0f172a; --muted: #5b6776; --faint: #94a3b8; --brand: #0e7490; --gold: #d97706; --promo: #7c3aed; --danger: #e11d48; --success: #059669; --btn-bg: #0e7490; --btn-fg: #ffffff; color-scheme: light; } html, body { background: var(--bg); color: var(--txt); } /* ---------- 적응형 기본 버튼 (라이트/다크 자동) ---------- */ .btn-primary { background: var(--btn-bg); color: var(--btn-fg); } .btn-primary:hover { filter: brightness(1.06); } /* .doc a 브랜드색이 btn-primary 글자색을 덮어씀 → 버튼 안 텍스트 안 보임 */ .doc a.btn-primary { color: var(--btn-fg); text-decoration: none; } .doc a.btn-primary:hover { text-decoration: none; } /* 기록 저장 — 기본은 다른 탭(배민/쿠팡·취소)과 같은 투명+테두리, 호버 시 브랜드 */ .btn-save { background: transparent; color: var(--muted); border: 1px solid var(--line); transition: background .15s, color .15s, border-color .15s, filter .15s; } .btn-save:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); filter: brightness(1.04); } /* 모바일 탭 안정화: 더블탭 줌 대기로 탭이 씹히는 현상 방지 */ button { touch-action: manipulation; } /* ---------- 다크모드 토글 스위치 ---------- */ .theme-switch { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.875rem; color:var(--muted); user-select:none; background:none; border:0; } .theme-switch:hover { color:var(--txt); } .tswitch { position:relative; width:38px; height:22px; border-radius:999px; background:var(--line); transition:background .18s; flex:none; } .tknob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.4); transition:transform .18s, background .18s; } [data-theme="dark"] .tswitch { background:var(--brand); } [data-theme="dark"] .tknob { transform:translateX(16px); background:#06141a; } /* ---------- 컴팩트 인라인 ON/OFF 스위치 (.rm-sw) ---------- */ .rm-sw { position:relative; display:inline-block; width:30px; height:18px; border-radius:999px; background:var(--line); transition:background .18s; flex:none; vertical-align:middle; } .rm-sw-knob { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.4); transition:transform .18s; } [aria-checked="true"] > .rm-sw { background:var(--brand); } [aria-checked="true"] > .rm-sw > .rm-sw-knob { transform:translateX(12px); } .num { font-variant-numeric: tabular-nums; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } input[type=number] { -moz-appearance:textfield; } /* 콘텐츠/법적 페이지 prose */ .doc h2 { color:var(--txt); font-weight:700; font-size:1.05rem; margin:1.6rem 0 .5rem; } .doc h3 { color:var(--txt); font-weight:600; font-size:.95rem; margin:1rem 0 .35rem; } .doc p, .doc li { color:var(--muted); font-size:.9rem; line-height:1.75; word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; } .doc ul { list-style:disc; padding-left:1.2rem; margin:.4rem 0; } .doc ol { list-style:decimal; padding-left:1.3rem; margin:.4rem 0; } .doc li { margin:.2rem 0; } .doc a { color:var(--brand); } .doc a:hover { text-decoration:underline; } .doc table { width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.85rem; } .doc th, .doc td { border:1px solid var(--line); padding:.5rem .6rem; text-align:left; color:var(--muted); } .doc th { background:var(--surface2); color:var(--txt); } .doc .lead { color:var(--muted); font-size:.92rem; } .doc .updated { color:var(--faint); font-size:.8rem; } .doc strong, .doc b { color:var(--txt); } /* ---------- 공통 푸터 (헤더·본문과 동일 3xl 컬럼) ---------- */ .site-foot-inner { max-width: 48rem; margin: 0 auto; padding: 1rem 1rem 1.25rem; text-align: center; } .site-foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.875rem; font-size: 0.75rem; line-height: 1.5; color: var(--faint); } .site-foot-links a { color: inherit; text-decoration: none; } .site-foot-links a:hover { color: var(--muted); } .site-foot-copy { margin: 0.625rem 0 0; font-size: 0.6875rem; line-height: 1.45; color: var(--faint); } /* ---------- 계산기 페이지 ---------- */ .calc-intro { display:flex; flex-direction:column; gap:.2rem; } .calc-intro h1 { margin-bottom:.15rem; } .calc-intro-lead { color:var(--muted); font-size:.875rem; line-height:1.5; margin:0; } .calc-intro-link { font-size:.8125rem; font-weight:600; color:var(--brand); } .calc-intro-link:hover { text-decoration:underline; } /* records: 설정 패널 — 카드(배경·테두리)는 래퍼에만 → 접혀도 전폭 */ .rec-settings-wrap { display:block; width:100%; min-width:0; box-sizing:border-box; } #recSettings { display:block; width:100%; } .rec-settings-summary { list-style:none; display:flex; width:100%; box-sizing:border-box; } .rec-settings-summary::-webkit-details-marker { display:none; } /* records: 안내·설명 문구 통일 */ .rec-hint { font-size:.875rem; line-height:1.65; color:var(--muted); margin:0; word-break:keep-all; overflow-wrap:break-word; } .rec-settings-intro { display:flex; flex-direction:column; gap:.5rem; } .rec-settings-body { display:flex; flex-direction:column; gap:1rem; } .rec-settings-block { display:flex; flex-direction:column; gap:.5rem; } .rec-settings-label { font-size:.875rem; font-weight:600; color:var(--txt); } .rec-settings-label--promo { color:var(--promo); } .rec-empty { text-align:center; padding:2.5rem 1rem; font-size:.875rem; line-height:1.65; color:var(--muted); } .rec-empty-mark { color:var(--brand); font-weight:600; background:none; border:0; padding:0; font:inherit; cursor:pointer; } .rec-empty-mark:hover { text-decoration:underline; } /* records: 일괄 입력 — 주·월 시트 */ .bulk-period-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .bulk-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; width: 7.5rem; flex-shrink: 0; padding: .2rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--bg); } .bulk-mode { padding: .3rem .35rem; border-radius: .375rem; border: 0; font-size: .75rem; font-weight: 600; color: var(--muted); background: none; cursor: pointer; } .bulk-mode--on { background: var(--btn-bg); color: var(--btn-fg); } .bulk-nav { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .bulk-nav-btn { width: 1.75rem; height: 1.75rem; padding: 0; border-radius: .375rem; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; } .bulk-nav-btn:hover { color: var(--txt); } .bulk-nav-label { min-width: 6.5rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--brand); } .bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .bulk-plat-tabs { display: flex; flex: 1; max-width: 11rem; padding: .2rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--bg); } .bulk-plat { flex: 1; padding: .35rem .5rem; border-radius: .375rem; font-size: .8125rem; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; } .bulk-plat--on { background: var(--btn-bg); color: var(--btn-fg); } .bulk-week-sheet { display: flex; flex-direction: column; gap: .5rem; } .bulk-day { border: 1px solid var(--line); border-radius: .625rem; padding: .55rem .65rem; background: var(--bg); } .bulk-day--has { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); } .bulk-day-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .5rem; font-size: .8125rem; line-height: 1.25; } .bulk-day-wd { font-weight: 700; color: var(--txt); min-width: 1.1rem; } .bulk-day-md { font-weight: 600; color: var(--txt); } .bulk-day-hint { font-size: .6875rem; margin-left: auto; } .bulk-day-inps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .45rem; } .bulk-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .bulk-field > span { font-size: .625rem; color: var(--muted); } .bulk-inp { width: 100%; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: .375rem; padding: .45rem .5rem; font-size: .8125rem; color: var(--txt); } .bulk-inp.num { text-align: right; font-variant-numeric: tabular-nums; } .bulk-inp:focus { outline: none; border-color: var(--brand); } /* records: 헤더 액션 버튼 (한번에 · +기록 동일 크기) */ .rec-action-group { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .rec-action-btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; width:100%; height:2.25rem; padding:0 .5rem; border-radius:.5rem; border:1px solid transparent; box-sizing:border-box; font-size:.875rem; font-weight:600; line-height:1; white-space:nowrap; } .rec-action-btn.border-line { border-color:var(--line); } /* records: 계기판 — 모바일=범례→게이지→바 / sm+=게이지 좌·범례+바 우 */ .rec-dashboard { display:flex; flex-direction:column; align-items:stretch; gap:1rem; } @media (min-width:640px) { .rec-dashboard { display:grid; grid-template-columns:152px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:1.25rem; row-gap:.5rem; align-items:start; } .rec-legend-row { grid-column:2; grid-row:1; } .rec-gauge { grid-column:1; grid-row:1 / span 2; align-self:center; } .rec-stack { grid-column:2; grid-row:2; } } /* records: 차트 범례 */ .rec-legend { display:flex; align-items:center; gap:.625rem; font-size:.8125rem; font-weight:500; line-height:1.25; } @media (min-width:640px) { .rec-legend { gap:.75rem; } } .rec-legend-item { display:inline-flex; align-items:center; gap:.35rem; flex-shrink:0; } .rec-legend-swatch { display:inline-block; width:.75rem; height:.75rem; border-radius:.2rem; flex:none; } /* records: 목표월급 칩 — 범례 줄 우측 */ .goal-chip { display:inline-flex; align-items:center; gap:.25rem; flex-shrink:0; padding:.25rem .55rem; border-radius:.4375rem; border:1px solid var(--line); background:var(--surface2); font-size:.75rem; font-weight:600; line-height:1.3; color:var(--muted); transition:color .15s, border-color .15s, box-shadow .15s; white-space:nowrap; cursor:pointer; } .goal-chip:hover { color:var(--gold); border-color:var(--gold); } .goal-chip--set { color:var(--gold); border-color:var(--gold); box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent), 0 0 10px color-mix(in srgb, var(--gold) 14%, transparent); } .goal-edit-row { display:inline-flex; align-items:center; gap:.35rem; } .goal-edit-row input { width:6.5rem; flex:none; background:var(--bg); border:1px solid var(--brand); border-radius:.4375rem; padding:.25rem .4rem; font-size:.75rem; text-align:right; color:var(--txt); } .goal-edit-row input:focus { outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); } .goal-edit-row button { flex:none; padding:.15rem .35rem; font-size:.75rem; font-weight:700; color:var(--brand); background:none; border:0; cursor:pointer; } .calc-settings-note { font-size:.8125rem; line-height:1.55; font-weight:500; color:var(--muted); } [data-theme="dark"] .calc-settings-note { color:var(--txt); opacity:.85; } [data-theme="light"] .calc-settings-note { color:var(--txt); opacity:.9; } /* 설정 행: 라벨(체크) | 입력+단위 — 공제·수수료 동일 그리드 */ .calc-setting-row { display:grid; grid-template-columns:minmax(0,1fr) 7.25rem; align-items:center; gap:.5rem .75rem; min-height:1.625rem; } .calc-setting-label { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--txt); min-width:0; } .calc-setting-input { display:flex; align-items:center; justify-content:flex-end; gap:.35rem; } .calc-setting-input input { width:100%; max-width:4.25rem; background:var(--bg); border:1px solid var(--line); border-radius:.5rem; padding:.3rem .5rem; font-size:.875rem; text-align:right; color:var(--txt); } .calc-setting-input .unit { font-size:.6875rem; color:var(--faint); white-space:nowrap; flex:none; min-width:2rem; text-align:left; } /* 결과 카드 — 상세 내역은 전 화면 동일하게 접이식(native details) */ .calc-result-card { display:flex; flex-direction:column; } #resultBreakdown > summary { list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:.875rem; font-weight:700; color:var(--muted); padding:.35rem 0; transition:color .15s; } #resultBreakdown > summary::-webkit-details-marker { display:none; } #resultBreakdown > summary::after { content:"▾"; font-size:.9rem; color:var(--faint); transition:transform .2s, color .15s; } #resultBreakdown > summary:hover { color:var(--txt); } #resultBreakdown > summary:hover::after { color:var(--txt); } #resultBreakdown[open] > summary { color:var(--brand); } #resultBreakdown[open] > summary::after { transform:rotate(180deg); color:var(--brand); } #resultBreakdown .calc-breakdown-body { font-size:.9375rem; } /* 수수료 공제 설정 아코디언 — 동일한 호버/열림 색상 + 우측 화살표 */ #settleSettings > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.4rem; transition:color .15s; } #settleSettings > summary::-webkit-details-marker { display:none; } #settleSettings > summary::after { content:"▾"; font-size:.9rem; color:var(--faint); transition:transform .2s, color .15s; } #settleSettings > summary:hover { color:var(--txt); } #settleSettings > summary:hover::after { color:var(--txt); } #settleSettings[open] > summary { color:var(--brand); } #settleSettings[open] > summary::after { transform:rotate(180deg); color:var(--brand); }