@tailwind base; @tailwind components; @tailwind utilities; html, body, #root { height: 100%; } /* darktable 톤: 밀도 높은 프로 도구 느낌. 창 너비에 따라 rem 기준값을 자동 보간 → 폰트·아이콘·사이드바(rem 기반)가 함께 스케일되어 해상도가 달라져도 버튼 라벨이 줄바꿈 없이 들어맞는다. (쉬운 모드는 고정 20px) */ html { font-size: clamp(13px, 0.45vw + 10px, 17px); } body { margin: 0; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; background: #e6e5e3; /* light: 중성 회색 */ color: #2a2926; -webkit-font-smoothing: antialiased; } /* 다크(기본) 테마 = darktable 다크 */ html.dark body { background: #1a1918; color: #cfceca; } /* 파일 목록 가독성용 모노 폰트 */ .mono { font-family: 'Cascadia Code', 'Consolas', monospace; } /* 토스트 등장 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* darktable식 얇은 스크롤바 */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #4a4a48; border-radius: 2px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #5e5e5b; background-clip: content-box; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #bdbcb8; background-clip: content-box; } /* 입력 요소 포커스 링을 앰버로 */ input:focus-visible, select:focus-visible, button:focus-visible { outline: 1px solid #d98c3f; outline-offset: 1px; } /* 슬라이더/체크박스 강조색을 앰버로 (제너릭 파랑 제거) */ input[type='range'], input[type='checkbox'], input[type='radio'] { accent-color: #d98c3f; } /* 4050 쉬운 모드: — rem 기준 전체 확대 + 큰 썸네일 */ html.easy { font-size: 20px; /* 기본 16px → rem 기반 Tailwind 유틸 전반 확대 */ } /* 썸네일 그리드를 더 크게 (열 수 축소) */ html.easy .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.easy .grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }