/* tool-parts.css - 공개 도구 프로그램(/tool/{이름}.do) 조각의 새 공통 규칙 (밝은 테마 전용). 도구 16개 개편. 담는 것 : ① 토큰(더하거나 바꾼 것) ② 배치 패턴 P1 · P1-L · P2 · P3 · P4 의 뼈대 ③ 공통 부품 + 여닫기(.nxt [hidden]) · 시각 숨김(.nxt .sr-only) 뿌리 :
[거는 순서] tool-common.css → tool-parts.css → (tool-p2.css | tool-p3.css) → {이름}.css 순서를 바꾸면 안 된다 - 이 파일은 tool-common.css 의 바탕 규칙을 "같은 무게로 뒤에서" 덮는다 : 토큰 블록(.nxt.nxt-light) · .nxt-panel-head · .nxt-stage · .nxt-stage-area · .nxt-empty (같은 선택자), 패널에 더하는 클래스(.nxt-stage · .nxt-preview · .nxt-drop 이 .nxt-panel 의 여백 · 테두리 · 바탕을 바꾼다). 조각에는 sols-tool-guide.css 를 걸지 않는다(옛 계산기 공통 tool-calc.css 는 2026.10.15 에 지웠다). [닿는 곳] 이 파일은 전환한 조각만 건다 - 미전환 도구에는 닿지 않는다. (그래서 tool-common.css 에 넣지 않았다. 같은 이름의 값이 달라, 한 파일에 두면 미전환 도구의 무대 · 빈 상태가 어긋난다.) [출처] docs/design/2026-10-14_tool_renewal_시안/renewal.css ①②③ (④ 계산형 도구별은 각 도구 CSS 로 간다) 기획 docs/design/2026-10-13_tool_renewal_기획.md 6절 · 배정 docs/design/2026-10-14_tool_renewal_배정서.md 1절 (a) 시안 노트 A = design-notes.md, B = design-notes-p2.md, C = design-notes-p3.md (같은 시안 폴더) [시안에서 바꾼 값] 시안에서는 renewal-p2.css · renewal-p3.css 가 뒤에서 덮던 것이다. 여기서는 덮는 줄을 더하지 않고 원래 줄을 그 값으로 고쳤다. B 7절 1 .nxt-sticky 의 max-height + 안쪽 스크롤을 무대(.nxt-stage.nxt-sticky)에는 걸지 않는다 B 7절 2 .nxt-stage-area 의 최소 높이 320px → 0 (높이는 판이 정한다) B 7절 3 .nxt-stage-main 의 바탕 폭 200px → 120px C 14절 1 900px 이하 .nxt-p3 → display:block C 14절 2 .nxt-dock : 세로 flex · 900px 이하 position:fixed → sticky; bottom. 쓰이지 않는 .nxt-dock>.nxt-btn 규칙은 뺐다 C 14절 3 .nxt-preview : 격자 + 최소 높이 420px → 세로 flex(무대 + 아래 줄) + PC 위 고정 C 14절 6 전환 단추 안 아이콘의 여백(.nxt-seg>button>.bi)을 공통 규칙으로 올렸다 더한 것 토큰 --nxt-shadow-dock (C 8절. 고친 .nxt-dock 이 읽는다) · .nxt .sr-only (배정서 4절 11) .nxt-icon-btn[disabled] 의 흐림 · 움직임 줄이기에서 .nxt-spinner 멈춤 (묶음 1 공통 후보) 고친 것 .nxt-tabs 의 바닥 줄 : border-bottom + 탭의 margin-bottom:-1px → 안쪽 그림자(inset box-shadow). 탭 줄에 세로 스크롤 막대가 생기던 것(1B 가 화면에서 확인) [공용 수거 2026.10.15] 묶음 1 · 2 의 도구 CSS 에 임시로 있던 줄을 올렸다(전부 추가 - 앞의 이름 · 값은 그대로다) ② .nxt-viewtabs 의 scroll-margin-top(900px 이하) ③-2 글자 칸 .nxt-input-text(보통 굵기) · 줄바꿈하는 가로 줄 .nxt-field-row-wrap(--nxt-row-min) · 입력칸 + [추가] 한 줄 .nxt-add-row ③-3 상세 행 값의 둘째 줄 .nxt-rows-sub ③-4 월별 줄(.nxt-table-sub)의 th 굵기 - 선택자 무게가 모자라 굵게 나오던 것을 고쳤다 ③-5 선택 창의 항목을 단추로 쓰는 꼴(button.nxt-picker-item[aria-pressed]) ③-6 기록 줄의 꼬리표(.nxt-history-item>.nxt-badge) : 줄어들지 않게, 뒤에 삭제 단추가 없으면 오른쪽 여백 ③-9 안내 본문의 목록 · 링크 · 글 표(.nxt-guide ul / ol / li / a, .nxt-guide .nxt-table) [묶음 5 2026.10.15] 묶음 3 · 4 의 도구 CSS 에 임시로 있던 줄을 올렸다 ③-2 접이식 머리의 못 누름 .nxt-more-head[disabled] (로또) ③-9 저장 카드의 주 결과 숫자 .nxt-shot .nxt-hero-num : 줄바꿈 허용(긴 글 결과가 카드 밖으로 나가던 것 - 제비뽑기) [tool-calc.css] 2026.10.15 에 지웠다(어느 조각도 걸지 않는다). 그 파일의 button:disabled 흐림은 부품마다의 [disabled] 규칙이 대신한다 [이름] 새 부품은 전부 nxt- 접두. 상태는 클래스가 아니라 속성으로 그린다. [aria-pressed="true"] 고름 · [aria-selected="true"] 탭 · [aria-expanded="true"] 열림 · [hidden] 숨김 · [aria-invalid="true"] 오류 · [aria-busy="true"] 진행 중 · [aria-current] 지금 · [disabled] / [aria-disabled="true"] 못 누름 [범위] 선택자는 .nxt-light … 로 시작한다(무게 0,2,0 부터). 예외 셋 : .nxt.nxt-light(토큰) · .nxt [hidden] · .nxt .sr-only. 틀 선택자(.bbs-*, .nxf-*, body, main)를 쓰지 않는다. 도구 하나만의 규칙을 두지 않는다(→ {이름}.css, .nxt-light.nxt-{이름} …). [토큰] 색은 ① 과 tool-common.css ④ 의 --nxt-* 로 낸다(색 위의 흰 글자 #fff 와 눌림 · 덮개의 반투명 값은 그 자리에 적었다). [굵기] 400 과 700 만. 글자 최소 13px. [구성] ① 토큰 · [hidden] · .sr-only ② 배치 패턴 : P1 계산형 · P1-L 목록형 · P2 뽑기형 · P3 이미지 작업형 · P4 편집기형 · 패널 머리 ③-1 단추 · 전환 단추 · 탭 · 칩 ③-2 입력칸 · 접이식 · 안내 상자 · 오류 ③-3 결과 영역 · 행동 줄 · 빈 상태 ③-4 아래 패널 · 표 · 차트 ③-5 토스트 · 확인창 · 선택 창 ③-6 기록 목록 · 저장 카드 줄 · 불러오기 ③-7 모바일 결과 막대 ③-8 무대 주 단추 · 상태 안내 · 단계 표시 · 진행 막대 ③-9 저장 이미지 카드 · 안내 본문 P2 · P3 의 안쪽(무대 위 판, 올리기 칸, 미리보기 무대, 조절 패널 …)은 tool-p2.css · tool-p3.css, P4 안쪽은 sols-canvas.css 에 있다. [명도 대비 - 상대휘도 계산. 글자 4.5:1 / 비텍스트 3:1] 바탕 토큰의 수치는 tool-common.css 머리 주석에 있다. 이 파일이 더한 조합 : 주 결과 숫자 #1A56DB / 옅은 파랑 #EAF1FE 5.5 · 결과 막대 값 #1A56DB / 흰 6.2 · 요약 글 #1445B0 / 흰 8.4 상승 #B42318 / 흰 6.6 · 하락 #1A56DB / 흰 6.2 (화살표 아이콘과 부호를 함께 쓴다) 토스트 흰 / #0F172A 17.9 · 토스트 위 포커스 링 #E8590C / #0F172A 5.0 진행 막대 채움 #1A56DB / 받침 #CBD5E1 4.2 (비텍스트) · 진행 중 주 단추 글 #1445B0 / #EAF1FE 7.4 빈 상태 글 #334155 / #F5F7FB 9.7 · 주의 상자 글 #6B3A06 / #FFF7E6 8.8 · 조건 안내 글 #334155 / #EAF1FE 9.1 (시안 머리 주석의 "게이지 5색"은 ④ BMI 것이라 bmi-calculator.css 로 간다) 2026.10.14 최초 생성 (시안 renewal.css ①②③ 이식) */ /* ========================================================================================== ① 토큰 (더하거나 바꾼 것만) ========================================================================================== */ .nxt.nxt-light{ /* 숫자 크기 체계 : xl 주 결과 한 줄 / lg 주 결과 두 줄 · 비교 열 · 날짜형 주 결과 / md 보조 수치 · 결과 막대 / sm 상세 값 · 표 */ --nxt-num-xl:40px; --nxt-num-lg:30px; --nxt-num-md:18px; --nxt-num-sm:15px; --nxt-chip-h:40px; /* 칩 높이(촘촘한 줄). 900px 이하 44px */ --nxt-sticky-top:88px; /* 결과 패널 · 무대 고정의 위 띄움 = 틀 헤더 64 + 24 */ --nxt-bar-h:60px; /* 모바일 결과 막대 높이 */ --nxt-z-bar:40; /* 결과 막대 · 아래 고정 줄. 틀 헤더(50) · 서랍 덮개(65) 아래 */ --nxt-up:var(--nxt-danger); /* 상승 */ --nxt-down:var(--nxt-primary);/* 하락 */ --nxt-scrim:rgba(15,23,42,.5); --nxt-shadow-pop:0 16px 40px rgba(15,23,42,.18); --nxt-shadow-bar:0 -6px 16px rgba(15,23,42,.08); --nxt-shadow-dock:0 8px 24px rgba(15,23,42,.16); /* P3 아래 고정 줄(.nxt-dock)의 그림자 - 시안 노트 C 8절 */ word-break:keep-all; /* 한글은 낱말 단위로 줄을 바꾼다 */ overflow-wrap:anywhere; /* 긴 한 덩어리는 칸 안에서 꺾는다 */ } /* [hidden] 은 display 를 준 요소에서도 반드시 숨는다 (부품의 여닫기는 전부 이 속성이다) */ .nxt [hidden]{display:none!important} /* 시각 숨김 : 낭독기에만 들리는 글(결과 알림, 숨긴 제목, "(끝남)"). 새 마크업 16개가 모두 쓴다. 틀(theme-daegu.css)의 .sr-only 와 같은 선언이다 - 틀이 달라도 도구가 스스로 갖게 여기에 둔다 */ .nxt .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:900px){ .nxt.nxt-light{--nxt-num-xl:34px;--nxt-num-lg:26px;--nxt-num-md:17px;--nxt-chip-h:44px} } /* ========================================================================================== ② 배치 패턴 ========================================================================================== */ /* ---------- P1 계산형 ----------
입력 (5)
결과 (6) - PC 에서 고정
아래 패널 "더 계산하기" (전체 폭)
안내 본문