/* 탄스 화면 토큰: 값만 둔다. 컴포넌트 규칙은 shell.css·work.css 에 있다. 글꼴 파일은 fonts.css. * * 2026-10-06 개정(브랜드 가이드 반영, docs/design/redesign-2026-10.md 2·6절). 홈페이지(web/assets/css/base.css)와 같은 값이다. * · 바탕은 따뜻한 밝은 색(#F7F5F1), 표·칸은 흰 면. 면과 바탕의 차이로 덩어리를 나눈다. * · 색은 가이드 참고 배색 4색(#61250F · #3B352E · #8C8381 · #BAB3B1)과 대비를 맞춘 파생색. * ⚠️ 가이드가 "공식 색이 아니라 레퍼런스 배색"이라 적었다. 공식 색이 정해지면 이 파일과 base.css 만 바꾼다. * · 강조색(#61250F, 짙은 적갈색)은 주요 버튼·고른 칩·고른 탭·초점에만 쓴다. 넓은 면을 강조색으로 칠하지 않는다. * · 모서리는 살짝 둥글게: 버튼 안 작은 칸·입력 4px(--t-r), 큰 칸·카드 안 칸 7px(--t-r-lg), 본문 카드 10px(--t-r-card). * 상태·상품구분 표시는 알약 모양(--t-r-pill). (2026-10-11 0.7배 축소 뒤 값. 예전 주석의 6px 는 축소 전 값이었다) * · 주문 상태 9가지와 상품구분은 "옅은 바탕 + 진한 글자" 한 쌍씩 둔다. 같은 단계 묶음은 같은 색 계열로: * 접수(모래) → 제작대기(회색) → 제작중(파랑) → 제작완료(청록) → 출고대기(보라) → 출고완료·설치완료(초록, 설치완료가 더 짙다), * 보류(주황), 취소(붉은 갈색). 회색 쌍(제작대기·기타)과 설치 구분만 새 갈회색·적갈색 축으로 옮겼고, 나머지는 뜻을 지키려 그대로 둔다. * · 굵기는 가볍게. 본문 400, 제목·버튼 500, 강조 600. 800 같은 굵은 글씨는 인쇄물에만. * · 숫자와 시각은 본문 글꼴의 tabular-nums(자릿수 맞춤). 고정폭 글꼴은 임시 비밀번호·엑셀 원문에만. * · 한글 라벨에는 대문자 변환·넓은 자간을 쓰지 않는다. 자간을 좁히지도 않는다(가이드). 위계는 크기와 굵기로. * ⚠️ 컴포넌트에 색을 직접 적지 않는다. 어두운 테마는 이 파일의 한 벌로만 돈다. 현장 화면은 field.css 맨 위에서 몇 개만 덮는다. * ⚠️ 글꼴은 저장소에 둔 Nunito Sans(라틴)·Noto Sans KR(한글) 파일만 쓴다(fonts.css, 같은 서버의 /assets/fonts/). * CSP 가 font-src 'self' 라 외부 CDN·Google Fonts 는 막힌다. 주소를 적지 않는다. * HTML 에서 fonts.css 를 tokens.css 보다 먼저 부른다. 파일을 못 읽거나 잘라 둔 글자에 없는 글자는 뒤의 시스템 글꼴이 그린다. * Noto Sans KR 은 시스템 글꼴보다 위아래 여유가 크다. 줄 높이는 숫자 line-height 로 정해 두어 표 줄 높이는 그대로다. * ⚠️ 글자색은 놓이는 바탕 위에서 명도 대비 4.5:1(WCAG AA) 이상이어야 한다. 값을 바꾸면 다시 잰다 * (계산표 docs/design/redesign-2026-10/contrast.md, 상태 쌍은 docs/design/ui.md 3절). * · #8C8381(--t-line-strong)은 흰 면 3.70 이라 글자로 쓰지 않는다. 입력칸 테두리·아이콘 선(3:1)에만. * · #BAB3B1 은 밝은 바탕에서 2.06 이하라 장식 선에만. --t-line 은 이 계열을 옅게 섞은 값이다. * · 보조 글자(--t-text-2·3)는 넓은 띠(--t-calm) 위에서 4.88 로 겨우 넘는다. --t-calm-strong 위에는 보조 글자를 두지 않는다. * 신호색 글자도 옅은 신호 바탕 위에 놓이므로 바탕을 반투명이 아닌 단색으로 두고 그 위에서 쟀다. * ⚠️ 강조 #61250F 와 글자 #2A2521 은 밝기 차이가 1.29 뿐이다. 고른 상태를 글자색만으로 나타내지 않는다 * (고른 탭은 밑줄, 고른 칩은 채움, 링크는 밑줄). * ⚠️ 색만으로 뜻을 전하지 않는다. 상태·구분 표시에는 늘 글자 라벨이 함께 있다(색약, 흑백 인쇄). */ :root { color-scheme: light dark; /* 바탕·면 */ --t-bg: #f7f5f1; /* 화면 바탕(따뜻한 밝은 색) */ --t-surface: #ffffff; /* 표·칸·입력의 면 */ --t-sunk: #f3efe9; /* 표 머리줄·칸 채움 */ --t-calm: #ede8e3; /* 넓은 띠·로그인 왼쪽 칸·예시 표시 */ --t-calm-strong: #ddd6d2; /* 넓지 않은 면만. 보조 글자를 두지 않는다 */ --t-hover: #faf8f5; /* 표 줄·목록 마우스 올림 */ /* 짙은 면: 왼쪽 메뉴(사이드바)·폰 위 막대·로그인 왼쪽 칸·안내 화면 머리(2026-10-06 배치 개편). 홈페이지 바닥글과 같은 값. ⚠️ 짙은 면 위에서는 강조색(#61250F, 1.03)이 보이지 않는다. 고른 메뉴는 밝은 막대 + 옅은 밝은 바탕으로 가른다. ⚠️ --t-on-ink-2 는 짙은 면 5.86 이지만 옅은 바탕(--t-ink-current) 위에서는 3.99 라 고른 줄·마우스 올림 줄 글자는 --t-on-ink 로 올린다. 대비: --t-on-ink 짙은 면 11.12, 마우스 올림 9.10, 고른 줄 7.57 */ --t-ink: #3b352e; --t-on-ink: #f7f5f1; --t-on-ink-2: #bab3b1; --t-ink-hover: rgba(247, 245, 241, 0.07); --t-ink-current: rgba(247, 245, 241, 0.13); --t-ink-line: rgba(247, 245, 241, 0.14); /* 유리 메뉴(여닫는 왼쪽 메뉴, 761px 이상, 2026-10-11 고객 요청): 짙은 면을 반투명 + 흐림으로 본문 위에 겹친다. ⚠️ 뒤가 비쳐도 글자가 읽혀야 한다. 가장 밝은 뒤(흰 면 #FFFFFF)에 겹친 합성색 위에서 잰 값: 불투명도 0.92 에서 --t-on-ink 8.68, --t-on-ink-2 4.58, 고른 줄 위 글자 6.07, 마우스 올림 위 7.15. 0.72 쯤으로 낮추면 --t-on-ink-2 가 2.46 으로 떨어진다(0.90 도 4.29 라 모자란다). 낮추려면 보조 글자부터 다시 잰다. 흐림을 못 쓰는 브라우저는 shell.css 의 @supports not 이 불투명 --t-ink 로 바꾼다. */ --t-ink-glass: rgba(59, 53, 46, 0.92); --t-glass-blur: blur(20px) saturate(160%); --t-glass-line: rgba(255, 255, 255, 0.16); /* 유리 가장자리의 옅은 흰 선 */ --t-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), /* 안쪽 위 하이라이트 */ 0 18px 48px rgba(42, 37, 33, 0.24), 0 2px 8px rgba(42, 37, 33, 0.12); --t-glass-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(42, 37, 33, 0.18); /* 떠 있는 작은 단추. 큰 그림자는 번져 보인다 */ --t-scrim-soft: rgba(42, 37, 33, 0.12); /* 메뉴를 열었을 때 본문 위 옅은 가림막 */ /* 선: 장식 선(가이드 #BAB3B1 계열)과 부품 선(#8C8381, 흰 면 3.70) */ --t-line: rgba(140, 131, 129, 0.4); --t-line-strong: #8c8381; /* 글자 */ --t-text: #2a2521; /* 흰 면 15.16, 바탕 13.92 */ --t-text-2: #6b625f; /* 흰 면 5.94, 바탕 5.45, 넓은 띠 4.88 */ --t-text-3: #6b625f; /* 힌트도 4.5 를 지키려 --t-text-2 와 같은 값 */ /* 강조(짙은 적갈색): 주요 버튼·선택 표시 */ --t-accent: #61250f; /* 흰 면 11.80 */ --t-accent-hover: #4a1c0b; --t-accent-text: #ffffff; --t-accent-soft: #f4ece6; /* 고른 줄·고른 카드 등 옅은 강조 바탕 */ --t-focus: #61250f; /* 신호색: 오류(주홍)·경고(황토)·완료(초록). 강조색(적갈색)과 헷갈리지 않게 주홍은 더 밝고 붉게 둔다 */ --t-danger: #b0331a; /* 옅은 바탕 5.10, 흰 면 6.30 */ --t-danger-bg: #f8e3dc; --t-warn: #7d5100; /* 옅은 바탕 5.82 */ --t-warn-bg: #f6ebd2; --t-ok: #2a6f3f; /* 옅은 바탕 5.13 */ --t-ok-bg: #e2efe2; /* 주문 상태: 옅은 바탕(-bg) + 진한 글자(-fg). 키는 서버의 상태 키와 같다. 대비는 모두 5.6 이상(ui.md 3절) */ --t-st-received-bg: #f6e7c8; /* 접수 */ --t-st-received-fg: #704600; --t-st-waiting-bg: #ece8e5; /* 제작대기: 새 갈회색 축 */ --t-st-waiting-fg: #4a4340; --t-st-in_production-bg: #dde9f7; /* 제작중 */ --t-st-in_production-fg: #1d4c82; --t-st-produced-bg: #d8efea; /* 제작완료 */ --t-st-produced-fg: #1b5f54; --t-st-ready_to_ship-bg: #ebe3f6; /* 출고대기 */ --t-st-ready_to_ship-fg: #57398a; --t-st-shipped-bg: #e0f0e2; /* 출고완료 */ --t-st-shipped-fg: #27643a; --t-st-installed-bg: #c9e6cf; /* 설치완료 */ --t-st-installed-fg: #1c5229; --t-st-on_hold-bg: #fbe2cc; /* 보류 */ --t-st-on_hold-fg: #8a3f00; --t-st-cancelled-bg: #f6dcd7; /* 취소 */ --t-st-cancelled-fg: #9e2f19; /* 상품구분: 설치·택배·기타, 그리고 아직 정하지 않음(미정) */ --t-kind-install-bg: #f1e6dd; /* 설치: 브랜드 적갈색 축 */ --t-kind-install-fg: #61250f; --t-kind-courier-bg: #dcedf3; --t-kind-courier-fg: #185469; --t-kind-other-bg: #ece8e5; --t-kind-other-fg: #4a4340; --t-kind-none-bg: #ffffff; /* 미정은 비워 둔 느낌으로 흰 면 + 점선 테두리 */ --t-kind-none-fg: #6b625f; --t-scrim: rgba(42, 37, 33, 0.45); --t-shadow: 0 12px 32px rgba(59, 53, 46, 0.14); --t-shadow-sm: 0 1px 2px rgba(59, 53, 46, 0.06); --t-shadow-card: 0 1px 2px rgba(59, 53, 46, 0.05), 0 4px 16px rgba(59, 53, 46, 0.06); /* 메뉴 그림(선 그림). mask-image 로 글자색(currentColor)을 입힌다. 그림 안의 색은 뜻이 없다(가리개로만 쓴다). CSP img-src 'self' data: 안에서 돈다. 외부 주소를 적지 않는다. 회원은 아직 서버가 주지 않지만 자리를 미리 둔다. */ --t-icon-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M9 14.5l2 2 4-4'/%3E%3C/svg%3E"); --t-icon-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 2.8h6v2.6H9zM9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E"); --t-icon-workorders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); --t-icon-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l6 4v-4l6 4V5h6v16z'/%3E%3Cpath d='M7 18h2M12 18h2'/%3E%3C/svg%3E"); --t-icon-shipping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v11H2zM14 10h4l3 3.5V17h-7'/%3E%3Ccircle cx='6.5' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); --t-icon-members: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5M16 4.6a3.2 3.2 0 0 1 0 6.4M18 14.6c1.9.8 3 2.5 3.5 5.4'/%3E%3C/svg%3E"); --t-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); /* 상품(테이블 윗면과 다리)·문의 · A/S(말풍선)·더보기(점 셋). 2026-10-11 점검 C3: 이 셋만 그림이 없어 빠진 항목처럼 보였다 */ --t-icon-products: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='3.5' rx='1'/%3E%3Cpath d='M5 10.5V20M19 10.5V20M8 10.5v5h8v-5'/%3E%3C/svg%3E"); --t-icon-inquiries: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-4.5 3.5V16H4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); --t-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E"); --t-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.4 4-6.5 8-6.5s7 2.1 8 6.5'/%3E%3C/svg%3E"); --t-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h16'/%3E%3C/svg%3E"); --t-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); /* 글꼴. "TANS Sans" 는 fonts.css 에서 라틴(Nunito Sans)과 한글(Noto Sans KR)을 묶은 이름. 뒤는 파일을 못 읽었거나 잘라 둔 글자에 없는 글자가 나왔을 때 쓰는 시스템 글꼴 */ --t-font: "TANS Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --t-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 글자 크기. 이 목록 밖의 크기를 쓰지 않는다. 2026-10-11 고객 요청("한 화면에 더 많은 정보가 보이게")으로 글자·간격·칸을 모두 약 0.7배로 줄였다(docs/design/ui.md 6.6절). 예전에는 "하루 종일 보는 업무 화면이라 너무 작게 두지 않는다"였는데, 이제 한 화면에 들어오는 표 줄 수를 먼저 본다. ⚠️ 가독성 하한: 글자는 9px 아래로 내리지 않는다. 더 줄여 달라고 해도 여기서 멈춘다. ⚠️ 화면 전체를 CSS zoom 으로 줄이지 않는다. 고정 위치(메뉴 단추)·좌표 계산(중계 화면 누르기)·달력·인쇄가 어긋난다. 토큰 값으로만 줄인다. 홈페이지 크기(본문 16~18px)를 들이지 않는다. */ --t-fs-xs: 9px; --t-fs-sm: 10px; --t-fs-ui: 11px; /* 버튼·탭·칩 */ --t-fs: 12px; --t-fs-md: 13px; /* 0.7배면 12px 로 본문과 같아져 한 단계 위로 둔다 */ --t-fs-lg: 14px; --t-fs-xl: 20px; --t-fs-2xl: 22px; /* PC 화면 제목 */ --t-fs-display: 28px; --t-fs-tab: 12px; /* 폰 아래 탭 막대 이름. 엄지로 누르는 칸이라 줄이지 않는다(예전 --t-fs-xs 값) */ /* ⚠️ 입력칸 글자는 폰·태블릿(손가락 기기 또는 760px 이하)에서 16px 아래로 내리지 않는다. 아이폰은 그보다 작은 입력칸에 초점이 가면 화면을 확대한다. PC(마우스)에서만 본문 크기로 줄이고, 아래 @media 가 16px 로 되돌린다. */ --t-fs-input: 12px; --t-w-regular: 400; --t-w-medium: 500; /* 영문은 Nunito SemiBold, 한글은 Noto Medium 으로 그려진다(fonts.css) */ --t-w-strong: 600; /* 모양과 크기. 2026-10-11 약 0.7배로 줄였다(위 글자 크기 주석). 테두리 1px·초점선 2px·그림자 두께는 그대로다. ⚠️ 손가락으로 누르는 크기(--t-touch·--t-touch-lg·--t-tab)는 줄이지 않는다. 현장·설치기사가 장갑 낀 손으로 누른다. */ --t-r: 4px; /* 버튼·입력·칸의 모서리 */ --t-r-lg: 7px; /* 표·큰 칸의 모서리 */ --t-r-card: 10px; /* 본문 카드(검색·표·상세 칸)의 모서리 */ --t-r-pill: 999px; /* 상태·구분 표시(알약 모양) */ --t-control: 28px; /* 버튼 높이(PC). 손가락 기기는 아래 @media 가 되돌린다 */ --t-control-sm: 24px; --t-input-h: 30px; /* 입력칸·고르기 칸 높이(PC). 손가락 기기는 44px */ --t-touch: 48px; /* 손가락으로 누르는 기기. 줄이지 않는다 */ --t-touch-lg: 56px; /* 현장 태블릿의 큰 버튼(3단계). 줄이지 않는다 */ --t-gap: 11px; --t-space-1: 3px; --t-space-2: 6px; --t-space-3: 8px; --t-space-4: 11px; --t-space-5: 17px; --t-space-6: 22px; --t-space-7: 34px; --t-bar: 44px; /* 위 막대 기본 높이(폰은 shell.css 에서 56px 그대로) */ --t-side: 180px; /* 왼쪽 메뉴(여닫는 유리 메뉴) 폭(761px 이상). 이름이 잘리지 않게 0.7배보다 조금 넓게 */ --t-side-inset: 8px; /* 유리 메뉴를 화면 가장자리에서 띄우는 간격 */ --t-menu-btn: 32px; /* 메뉴 여닫기 단추(줄 세 개). 손가락 기기는 44px */ --t-tab: 64px; /* 폰 아래 탭 막대(그림 + 글자). 엄지로 누르는 칸이라 줄이지 않는다 */ --t-maxw: 1600px; /* 본문 최대 폭. 줄이지 않고 1280 에서 넓혀 넓은 화면에서 표 칸을 더 보인다 */ --t-gutter: clamp(11px, 2.1vw, 28px); --t-dur: 150ms; /* 로고 높이(여백을 잘라 낸 파일이라 이 값이 곧 글자 높이). 보호 여백은 사방으로 이 높이의 1/2 이상(문서 4.2절) */ --t-logo-h: 18px; /* 폰 위 막대. 2026-10-11 20px 에서 줄임(고객 요청) */ --t-logo-h-side: 16px; /* 유리 메뉴 맨 위. 2026-10-11 24 → 20 → 15px(메뉴 글자 12px 옆에서 튀지 않게). 같은 날 점검 D4 로 16px: 브랜드 기준의 화면 최소 크기(16px)보다 1px 작았다 */ --t-logo-h-lg: 28px; /* 로그인 */ --t-logo-h-md: 24px; /* 권한 없음·찾을 수 없음 */ /* 고르기 칸의 화살표(CSP 가 data: 그림을 허용한다). 어두운 테마에서 색을 바꾸려고 토큰에 둔다. ⚠️ 그림 안의 색은 currentColor 를 따르지 않는다. 상태 고르기의 옅은 바탕 어느 것 위에서도 보이게 글자색 하나로 둔다. */ --t-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a2521' stroke-width='1.4'/%3E%3C/svg%3E"); /* 짙은 면(사이드바·위 막대) 위의 화살표. 두 테마 모두 짙은 면이라 한 값이다 */ --t-select-arrow-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f7f5f1' stroke-width='1.4'/%3E%3C/svg%3E"); /* 로고는 HTML 의 가 어두운 테마에서 흰색판으로 바꾼다. 필터로 색을 바꾸지 않는다 */ --t-logo-filter: none; } @media (prefers-color-scheme: dark) { :root { /* 같은 갈회색 축의 어두운 판. 대비는 contrast.md 2절과 ui.md 3절 */ --t-bg: #1a1715; --t-surface: #23201d; --t-sunk: #2b2724; --t-calm: #2f2a26; --t-calm-strong: #3d3733; --t-hover: #2a2622; /* 짙은 면이 바탕(#1A1715)보다 어둡다(1.09). 사이드바 경계는 오른쪽 선(--t-ink-line)으로 긋는다. 대비: 글자 16.66, 보조 9.39, 고른 줄 위 글자 12.25 */ --t-ink: #0f0d0c; --t-on-ink: #f2ede7; --t-on-ink-2: #bab3b1; --t-ink-hover: rgba(242, 237, 231, 0.07); --t-ink-current: rgba(242, 237, 231, 0.13); --t-ink-line: rgba(242, 237, 231, 0.12); /* 유리 메뉴. 흰 면에 겹친 최악의 경우 0.80 에서 글자 9.23, 보조 5.21, 고른 줄 위 6.45. 실제 뒤(바탕 #1A1715)에서는 글자 16.42, 보조 9.26 */ --t-ink-glass: rgba(15, 13, 12, 0.8); --t-glass-line: rgba(242, 237, 231, 0.12); --t-glass-shadow: inset 0 1px 0 rgba(242, 237, 231, 0.08), 0 18px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --t-glass-shadow-sm: inset 0 1px 0 rgba(242, 237, 231, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4); --t-scrim-soft: rgba(0, 0, 0, 0.3); --t-line: rgba(242, 237, 231, 0.14); --t-line-strong: #7a716e; /* 면 3.41 */ --t-text: #f2ede7; /* 면 13.92 */ --t-text-2: #bab3b1; /* 면 7.85 */ --t-text-3: #a89f9c; /* 면 6.25 */ --t-accent: #d9a28a; /* 면 7.32 */ --t-accent-hover: #e6b8a3; --t-accent-text: #1f1b18; /* 강조 위 7.72 */ --t-accent-soft: #3a2a22; --t-focus: #d9a28a; --t-danger: #ff7a5c; --t-danger-bg: #3a1f19; --t-warn: #e8b75a; --t-warn-bg: #33290f; --t-ok: #7fcf98; --t-ok-bg: #1b2f22; --t-st-received-bg: #3d3018; --t-st-received-fg: #f0c97a; --t-st-waiting-bg: #2f2b28; --t-st-waiting-fg: #cfc8c0; --t-st-in_production-bg: #1d2e44; --t-st-in_production-fg: #9cc4f0; --t-st-produced-bg: #173733; --t-st-produced-fg: #8fd6c8; --t-st-ready_to_ship-bg: #30264a; --t-st-ready_to_ship-fg: #c9b3f0; --t-st-shipped-bg: #1d3524; --t-st-shipped-fg: #94d6a4; --t-st-installed-bg: #22432b; --t-st-installed-fg: #b2e8bf; --t-st-on_hold-bg: #43280f; --t-st-on_hold-fg: #f5b47a; --t-st-cancelled-bg: #45201a; --t-st-cancelled-fg: #f5a594; --t-kind-install-bg: #3a2620; --t-kind-install-fg: #e8bfa9; --t-kind-courier-bg: #173440; --t-kind-courier-fg: #8fcfe6; --t-kind-other-bg: #2f2b28; --t-kind-other-fg: #cfc8c0; --t-kind-none-bg: #23201d; --t-kind-none-fg: #bab3b1; --t-scrim: rgba(0, 0, 0, 0.6); --t-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --t-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); --t-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2ede7' stroke-width='1.4'/%3E%3C/svg%3E"); } } /* 손가락 기기(폰·태블릿)와 760px 이하: 2026-10-11 축소의 예외. ⚠️ 입력칸 글자 16px: 아이폰은 16px 아래 입력칸에 초점이 가면 화면을 확대하고 되돌리지 않는다. ⚠️ 단추·입력칸·메뉴 단추 높이는 손가락이 닿는 예전 크기로 되돌린다(PC 마우스에서만 작게). */ @media (pointer: coarse), (max-width: 760px) { :root { --t-fs-input: 16px; --t-control: 40px; --t-control-sm: 32px; --t-input-h: 44px; --t-menu-btn: 44px; } } @media (prefers-reduced-motion: reduce) { :root { --t-dur: 0ms; } }