/* 탄스 화면 토큰: 값만 둔다. 컴포넌트 규칙은 shell.css·work.css 와 화면별 파일에 있다. 글꼴 파일은 fonts.css. * * 2026-10-15 전면 개편(docs/design/ui.md 7절). 참고 전산의 화면 체계를 다시 써서 들였다. 색 값은 브랜드 배색 그대로다. * 같은 날 2차(ui.md 8절): 홈페이지(web/assets/css/base.css)의 분위기를 더했다. 바탕·채움·넓은 띠·옅은 강조·선·입력칸 테두리를 * 홈페이지와 같은 값으로 되돌리고(--t-sunk #F3EFE9, --t-calm #EDE8E3, --t-accent-soft #F4ECE6, --t-rule #BAB3B1, --t-line-strong #8C8381), * 글꼴을 홈페이지와 같은 짝(영문·숫자 Jost + 한글 Pretendard)으로, 위 막대·제목을 홈페이지 머리글·제목 크기에 가깝게 키웠다. * · 색은 예산이다: 화면의 대부분은 무채색(따뜻한 회색)이다. 강조색(#61250F)은 주요 단추 하나·고른 것·초점에만, * 신호색(오류·경고·완료)은 실패·손볼 것·끝난 것에만 쓴다. 주문 상태 색은 판단에 쓰는 값이라 남기되 작고 각지게 그린다. * · 채움 대신 선: 덩어리는 그림자 카드가 아니라 1px 선과 작은 모서리로 나눈다. 카드 안에 카드를 겹치지 않는다. * · 모서리는 작게: 표식 3px(--t-r-sm), 단추·입력·칩 4px(--t-r), 표·칸·대화 상자 6px(--t-r-lg). 알약 모양은 쓰지 않는다 * (2026-10-11 점검 C1: 알약 단추가 손가락 기기에서 동그라미가 되어 단추로 읽히지 않았다). 둥근 것은 색 점뿐이다. * · 조작부 높이를 하나로: PC 단추·입력·고르기 30px, 작은 단추 26px. 줄마다 높이가 들쭉날쭉하지 않게. * · 숫자는 자릿수를 맞춘다(.num, 표는 통째로). 굵기는 본문 400, 이름표·단추·제목 500. * ⚠️ 컴포넌트에 색을 직접 적지 않는다. 어두운 테마는 이 파일의 한 벌로만 돈다. 현장 화면은 field.css 맨 위에서 몇 개만 덮는다. * ⚠️ 글자색은 놓이는 바탕 위에서 명도 대비 4.5:1(WCAG AA) 이상이어야 한다. 값을 바꾸면 다시 잰다 * (계산표 docs/design/redesign-2026-10/contrast.md, 상태 쌍은 docs/design/ui.md 3절). * · --t-line-strong(#8C8381)은 흰 면 3.70 이라 글자로 쓰지 않는다. 입력칸·고르기 칸 테두리(누를 자리의 경계, 3:1)에만. * · --t-rule·--t-line·--t-line-soft·--t-line-control 은 장식 선이다. 글자·입력칸 테두리에 쓰지 않는다. * · 보조 글자(--t-text-2)는 넓은 띠(--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; /* 흰 면 안의 채움: 표 머리줄·달력 칸·품목 고치기 칸(홈페이지 --c-fill 과 같은 값) */ --t-calm: #ede8e3; /* 넓은 띠: 시연 띠·안내 알림·표식·밀림 칸(홈페이지 알림 띠와 같은 값) */ --t-calm-strong: #ddd6d2; /* 넓지 않은 면만. 보조 글자를 두지 않는다 */ --t-hover: #faf8f5; /* 표 줄·목록·메뉴 마우스 올림 */ /* 선. 이 체계의 뼈대다 · --t-rule: 구획 선. 위 막대 아래, 화면 제목 아래, 탭 줄 아래처럼 화면의 큰 틀을 긋는 선. 홈페이지의 선(#BAB3B1)과 같은 값 · --t-line: 칸·표의 바깥 테두리 · --t-line-soft: 표 줄 사이처럼 같은 덩어리 안의 옅은 선 · --t-line-control: 단추·칩 테두리. 단추는 글자로 알아보므로 장식 선(홈페이지 선 값)이면 된다. 올리면 글자색 테두리 · --t-line-strong: 입력칸·고르기 칸·체크 상자 테두리(흰 면 3.70, 누를 자리의 경계 3:1). 홈페이지 입력칸과 같은 값 */ --t-rule: #bab3b1; --t-line: #ded8d2; --t-line-soft: #ebe6e0; --t-line-control: #bab3b1; --t-line-strong: #8c8381; /* 글자 */ --t-text: #2a2521; /* 흰 면 15.16, 바탕 13.92 */ --t-text-2: #6b625f; /* 흰 면 5.94, 바탕 5.45, 채움 5.18, 넓은 띠 4.88, 옅은 강조 바탕 5.08 */ --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; /* 고른 줄·고른 칩의 옅은 강조 바탕(글자 12.99, 보조 5.08). 홈페이지와 같은 값 */ --t-focus: #61250f; --t-focus-ring: rgba(97, 37, 15, 0.14); /* 초점이 간 입력칸 바깥의 옅은 테두리(테두리 색과 함께 쓴다) */ /* 신호색: 오류(주홍)·경고(황토)·완료(초록). 강조색(적갈색)과 헷갈리지 않게 주홍은 더 밝고 붉게 둔다 */ --t-danger: #b0331a; /* 옅은 바탕 5.10, 흰 면 6.30 */ --t-danger-bg: #f8e3dc; --t-danger-line: #dba398; /* 위험 단추 테두리(주홍을 흰 면에 45% 섞은 값). 글자는 --t-danger */ --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절) 주문접수(paid)는 칠하지 않는다(work.css). 제작대기 · 제작완료는 작업지시서 상태 색으로만 남았다(2026-10-17 단계 간소화) */ --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-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(42, 37, 33, 0.16), 0 1px 3px rgba(42, 37, 33, 0.08); --t-shadow-sm: 0 1px 2px rgba(42, 37, 33, 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"); --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"); /* 글꼴. "TANS Sans" 는 fonts.css 의 Pretendard. 뒤는 파일을 못 읽었거나 파일에 없는 드문 글자를 그리는 시스템 글꼴 */ --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배로 줄였다(9~12px). 2026-10-15 개편에서 본문을 13px 로 한 단 되올리고, 대신 칸 안 여백·줄 높이·요약 칸 크기를 줄여 한 화면에 드는 표 줄 수는 오히려 늘렸다 (주문 목록 한 줄 45px → 39px, 1440×900 첫 화면에 보이는 줄 8 → 15). 9~10px 글자는 하루 종일 보는 화면에서 그대로 피로가 됐다. ⚠️ 화면 전체를 CSS zoom 으로 줄이지 않는다. 고정 위치·좌표 계산(중계 화면 누르기)·달력·인쇄가 어긋난다. 토큰 값으로만 바꾼다. */ --t-fs-xs: 11px; /* 힌트·표식·시각 같은 곁다리 */ --t-fs-sm: 12px; /* 보조 글·표 머리줄·칸 이름 */ --t-fs-ui: 13px; /* 단추·탭·칩·표 칸 */ --t-fs: 13px; /* 본문 */ --t-fs-md: 14px; --t-fs-lg: 16px; /* 절 제목 */ --t-fs-nav: 15px; /* 넓은 옆 막대의 메뉴 이름(홈페이지 머리글 메뉴와 같은 15px) */ --t-fs-xl: 20px; /* 화면 제목(폰)·큰 숫자 */ --t-fs-2xl: 24px; /* 화면 제목(PC). 홈페이지처럼 제목은 크게, 굵기는 가볍게(500) */ --t-fs-display: 28px; /* 로그인 제목(홈페이지 로그인 제목과 같은 크기, 폰) */ --t-fs-metric: 26px; /* 오늘 화면의 숫자 칸 */ --t-fs-tab: 12px; /* 폰 아래 탭 막대·좁은 옆 막대의 이름(그림 아래). 엄지로 누르는 칸이라 줄이지 않는다 */ /* ⚠️ 입력칸 글자는 폰·태블릿(손가락 기기 또는 760px 이하)에서 16px 아래로 내리지 않는다. 아이폰은 그보다 작은 입력칸에 초점이 가면 화면을 확대한다. PC(마우스)에서만 본문 크기로 두고, 아래 @media 가 16px 로 되돌린다. */ --t-fs-input: 13px; --t-w-regular: 400; --t-w-medium: 500; --t-w-strong: 600; /* Medium 파일이 그린다(fonts.css). 뜻만 나눠 둔다 */ /* 모양과 크기 ⚠️ 손가락으로 누르는 크기(--t-touch·--t-touch-lg·--t-tab)는 줄이지 않는다. 현장·설치기사가 장갑 낀 손으로 누른다. */ --t-r-sm: 3px; /* 표식(배지) */ --t-r: 4px; /* 단추·입력·칩·작은 칸 */ --t-r-lg: 6px; /* 표·본문 칸·달력·대화 상자 */ --t-r-pill: 999px; /* 색 점처럼 원이어야 하는 것만 */ --t-control: 30px; /* 단추 높이(PC). 손가락 기기는 아래 @media 가 되돌린다 */ --t-control-sm: 26px; --t-input-h: 30px; /* 입력칸·고르기 칸 높이(PC). 손가락 기기는 44px */ --t-touch: 48px; /* 손가락으로 누르는 기기. 줄이지 않는다 */ --t-touch-lg: 56px; /* 현장 태블릿의 큰 버튼. 줄이지 않는다 */ --t-gap: 12px; --t-space-1: 4px; --t-space-2: 6px; --t-space-3: 8px; --t-space-4: 12px; --t-space-5: 16px; --t-space-6: 24px; --t-space-7: 32px; --t-bar: 56px; /* 폰 위 막대(로고 · 내 이름) 높이, 옆 막대 맨 위 로고 칸 높이. 홈페이지 머리글(60px)보다 한 칸 낮게 */ --t-subbar: 40px; /* 본문 위 탭 줄(화면 안의 작은 탭) 높이 */ --t-side: 200px; /* 넓은 옆 막대(1280px 이상) 폭. 메뉴 이름 15px 과 내 이름 · 역할이 줄바꿈 없이 든다 */ --t-rail: 80px; /* 좁은 옆 막대(761~1279px) 폭. 그림 위 + 이름 아래 칸이 들고, 태블릿 본문 폭을 덜 먹는다 */ --t-tab: 64px; /* 폰 아래 탭 막대(그림 + 글자). 엄지로 누르는 칸이라 줄이지 않는다 */ --t-maxw: 1600px; /* 본문 최대 폭 */ --t-gutter: clamp(12px, 2.2vw, 28px); --t-dur: 120ms; /* 로고 높이(여백을 잘라 낸 파일이라 이 값이 곧 글자 높이). 보호 여백은 사방으로 이 높이의 1/2 이상. 화면 최소 16px */ --t-logo-h: 19px; /* 넓은 옆 막대·폰 위 막대. 홈페이지 머리글 로고(PC 19px)와 같다 */ --t-logo-h-rail: 16px; /* 좁은 옆 막대(80px). 브랜드 화면 최소 크기. 가로 56px 에 양옆 보호 여백 12px */ --t-logo-h-lg: 24px; /* 로그인 */ --t-logo-h-md: 22px; /* 권한 없음·찾을 수 없음 */ /* 고르기 칸의 화살표(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"); /* 로고는 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: #1f1c1a; --t-calm: #2f2a26; --t-calm-strong: #3d3733; --t-hover: #2a2622; --t-rule: #4a433e; --t-line: #3a3430; --t-line-soft: #2e2a27; --t-line-control: #4a433e; --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-focus-ring: rgba(217, 162, 138, 0.25); --t-danger: #ff7a5c; --t-danger-bg: #3a1f19; --t-danger-line: #864839; --t-warn: #e8b75a; --t-warn-bg: #33290f; --t-ok: #7fcf98; --t-ok-bg: #1b2f22; --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-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.5), 0 1px 3px rgba(0, 0, 0, 0.3); --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --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 이하. ⚠️ 입력칸 글자 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-subbar: 44px; /* 작은 탭(40px)이 들어가게 */ } } /* 폰(760px 이하): 위 막대를 한 칸 낮추고 로고를 홈페이지 폰 머리글과 같은 18px 로 */ @media (max-width: 760px) { :root { --t-bar: 52px; --t-logo-h: 18px; } } @media (prefers-reduced-motion: reduce) { :root { --t-dur: 0ms; } }