/* tool-common.css - 공개 도구 프로그램(/tool/{이름}.do) 조각의 공통 스타일. 조각(WEB-INF/jsp/homepage/tool/{이름}.jsp)이 자기 CSS 앞에 이 파일을 건다. 뿌리는
이고 방문자용 메뉴 화면(homepage/page/page.jsp)의 main.bbs-main > div.bbs-body 안, 제목 줄(h1.bbs-title) 바로 아래에 들어간다. [규칙] 사이트 틀의 선택자(.bbs-*, main, body, html)를 쓰는 CSS 는 이 파일에만 둔다. 도구별 CSS (resources/homepage/tool/{이름}/{이름}.css)는 전부 .nxt-{이름} 으로 범위를 한정하고 틀 요소를 건드리지 않는다. 틀 파일(board-public.css, theme-daegu.css, pageHead.jspf)은 고치지 않는다 - 폭 옵션은 :has() 로 여기서 처리한다. [구성] ① 뿌리 기본값 ② 폭 옵션(nxt-normal / nxt-wide / nxt-full) ③ 넓게 본(덮은) 상태(.is-nxt-max) ④~⑧ 밝은 테마(.nxt-light) : ④ 토큰 ⑤ 2단 · 패널 · 빈 상태 · 레이블의 바탕 ⑦ 무대의 바탕 ⑧ 좁은 화면 · 움직임 (⑥ 은 걷어서 비었다) ④~⑧ 은 전부 .nxt-light 아래다 - 16개 도구가 모두 nxt-light 다. 이 파일은 "바탕"이다. 부품의 모양은 tool-parts.css(공통 부품 · 패턴 뼈대) → tool-p2.css | tool-p3.css → {이름}.css 가 뒤에서 덮는다. 같은 선택자(.nxt.nxt-light 토큰 · .nxt-panel-head · .nxt-stage · .nxt-stage-area · .nxt-empty)는 값이 달라도 여기 것을 지우지 않는다 - 시안이 "이 위에 덮은" 상태로 확인됐다. 2026.10.13 최초 생성 / 2026.10.13 밝은 테마(④~⑧) 추가 2026.10.15 도구 개편 묶음 5 : 16개 조각 · JS 가 쓰지 않게 된 옛 이름 규칙을 걷었다(쓰임 0 을 확인한 것만). .nxt-full 의 높이 · 옛 넓게 보기 줄(.nxt-bar · .nxt-fullbtn - 캔버스의 P4 뼈대 sols-canvas.css 가 그린다) · .container · .nxt-panel-solo / -stack · .result-wrap · .nxt-empty-ico / -title / -desc / -list · .toast / .copy-toast · ⑥ .tool-guide 전부 · .step-dot* · .step-nav · .dropzone / .dz-* · .checkerboard · 옛 변수 이름 잇기(--bg-color 등 6개). 계산기 공통 tool-calc.css 는 파일째 지웠다(부품은 tool-parts.css 에 있다) */ /* ============ ① 뿌리 기본값 ============ */ /* 틀(theme-daegu.css 의 body)에서 내려오는 줄 높이 1.6 · word-break:keep-all · overflow-wrap:anywhere 를 도구가 단독 화면일 때의 값(브라우저 기본)으로 되돌린다 - 그대로 두면 버튼 · 칸의 높이와 줄바꿈 자리가 옛 화면과 달라진다. 글꼴과 글자 크기(16px)는 틀 것을 물려받는다. --nxt-z-overlay : 도구의 고정 요소(토스트, 모달 덮개)가 쓸 z-index. 틀 헤더의 메뉴 판(30~60) · 본문 건너뛰기 링크(100)보다 위다. --nxt-z-max : 넓게 보기로 화면을 덮은 뿌리의 z-index. */ .nxt{ --nxt-z-overlay:1000; --nxt-z-max:900; position:relative; line-height:normal; word-break:normal; overflow-wrap:normal; } /* 뿌리는 tabindex="-1" 을 받는다(tool-common.js) - 안쪽을 누르면 포커스가 뿌리 안으로 온다. 키보드로는 닿지 않으므로 테두리를 그리지 않는다 */ .nxt:focus{outline:none} /* 틀의 img,svg{max-width:100%;vertical-align:middle} 은 도구 안의 img · svg 에도 내려온다. 여기서 되돌리지 않는다 - 크기를 직접 정하는 그림(아이콘 격자, 썸네일)이 줄어들면 그 도구의 CSS 에서 .nxt-{이름} img{max-width:none} 으로 푼다. */ /* ============ ② 폭 옵션 ============ */ /* nxt-normal : 본문 칸 폭 그대로(옆 메뉴 유지). 더할 것이 없다. nxt-wide : 옆 메뉴를 본문 위 가로 한 줄로 바꾸고 본문이 1200px 를 다 쓴다(2단 구성 도구). nxt-full : nxt-wide + 본문 최대 폭 해제 + 뿌리에 높이를 준다(앱 셸 도구). [넓게 보기] 버튼이 붙는다. normal · wide 의 뿌리는 모서리를 둥글린다 - 어두운 바탕의 도구가 흰 본문 안에서 각진 상자로 보이지 않게. */ .nxt-normal,.nxt-wide{border-radius:16px} /* 옆 메뉴(nav.bbs-lnb = h2.bbs-lnb-title + ul.bbs-lnb-list)를 가로 줄로 : 틀이 900px 이하에서 하는 세로 쌓기(board-public.css)를 넓은 화면에도 적용하고, 그 안의 목록을 옆으로 흐르게 한다. 숨기지 않는다 - 같은 분류의 다른 도구로 가는 길이다. 900px 이하는 틀의 기존 동작(본문 위에 쌓인 옆 메뉴)을 그대로 둔다. */ @media (min-width:901px){ main.bbs-main.has-lnb:has(.nxt-wide), main.bbs-main.has-lnb:has(.nxt-full){display:block} main.bbs-main:has(.nxt-wide)>.bbs-lnb, main.bbs-main:has(.nxt-full)>.bbs-lnb{ position:static;max-height:none;overflow:visible; display:flex;align-items:flex-start;gap:6px 10px; margin-bottom:28px;padding:8px; } main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-title, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-title{ flex:none;padding:9px 16px;border-radius:8px;font-size:15px;line-height:1.4;white-space:nowrap; } main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list{ flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px; } main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list>li, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list>li{border-top:0} main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list>li>a, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list>li>a, main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list>li>details>summary, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list>li>details>summary{ padding:9px 14px;border-radius:8px;font-size:14px;white-space:nowrap; } main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list>li>details>summary, main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list>li>details>summary{padding-right:34px} main.bbs-main:has(.nxt-wide)>.bbs-lnb summary::after, main.bbs-main:has(.nxt-full)>.bbs-lnb summary::after{right:14px} /* 지금 도구 : 세로 목록의 왼쪽 막대 대신 칸 전체를 칠한다 */ main.bbs-main:has(.nxt-wide)>.bbs-lnb>.bbs-lnb-list>li>a[aria-current="page"], main.bbs-main:has(.nxt-full)>.bbs-lnb>.bbs-lnb-list>li>a[aria-current="page"]{box-shadow:inset 0 0 0 1px #1d4ed8} main.bbs-main:has(.nxt-wide)>.bbs-lnb .bbs-lnb-sub, main.bbs-main:has(.nxt-full)>.bbs-lnb .bbs-lnb-sub{border-radius:8px} } /* nxt-full : 본문 최대 폭(1200px)을 푼다(Layout 틀). 뿌리의 높이 · 편집기 상자 · 넓게 보기 줄(.nxt-bar)과 단추(.nxt-fullbtn)의 모양은 그 도구의 CSS 가 정한다 - P4 뼈대는 sols-canvas.css 에 있다(nxt-full 도구가 캔버스 하나라 공용 뼈대를 두지 않는다). 2026.10.15 : 여기 있던 뿌리 높이(clamp(640px,80vh,1200px) · 세로 flex · overflow:hidden)와 옛 넓게 보기 줄의 어두운 모양을 걷었다 - 캔버스가 전부 덮어쓰기만 하고 있었다. nxt-full 도구를 새로 만들면 줄 · 단추의 모양을 자기 CSS 에 적는다(tool-common.js 는 줄이 없으면 뿌리 맨 앞에 div.nxt-bar > button.nxt-fullbtn 을 만들기만 한다). */ main.bbs-wrap.bbs-main:has(.nxt-full){max-width:none} /* ============ ③ 넓게 본(덮은) 상태 ============ */ /* 덮은 상태 : 뿌리가 화면 전체를 덮는다(전체 화면 API 가 아니다 - 주소창 · 탭은 그대로다). Esc 또는 같은 버튼으로 돌아온다. 덮은 동안에는 뒤의 문서가 스크롤되지 않게 html 에 nxt-max-open 을 건다(tool-common.js). */ .nxt.is-nxt-max{ position:fixed;inset:0;z-index:var(--nxt-z-max); width:auto;height:auto;min-height:0;max-height:none; margin:0;border-radius:0; } html.nxt-max-open{overflow:hidden} /* ========================================================================================== 밝은 테마 (.nxt-light) - 2026.10.13 재구성 2단계 뿌리 :
(nxt-calc 는 읽는 규칙이 없다 - 새 조각에는 달지 않는다) [명도 대비] 흰 패널 위 : 글자 #0F172A 17.9 · #334155 10.4 · #475569 7.6 · 주색 #1A56DB 6.2 · 오류 #B42318 6.6 옅은 파랑(#EAF1FE) 위 : 주색 5.5 · 주색-dk 7.4 · #334155 9.1 / 옅은 회색(#F5F7FB) 위 #475569 7.1 주의 상자(#FFF7E6) 위 #8A4B08 6.4 / placeholder #64748B 4.8 / 포커스 링 #E8590C 3.6 (비텍스트 3:1) 칸 · 단추 테두리 #CBD5E1 1.5 - 3:1 에 못 미친다(2026.10.14 사용자 결정, site-frame.css 머리말 참고). 올리면 #94A3B8, 포커스는 주색 테두리 + 링 그래프 색(흰 바탕, 비텍스트) 파랑 6.2 · 분홍 #DB2777 4.6 · 청록 #0F766E 5.5 · 황갈 #B45309 5.0 ========================================================================================== */ /* ============ ④ 밝은 토큰 ============ */ /* 사이트 토큰(site-frame.css 의 --c-*)을 먼저 읽고, 없으면(Layout 틀 등) 뒤의 값을 쓴다. 선택자를 .nxt.nxt-light(무게 0,2,0)로 적는다. tool-parts.css · tool-p2.css · tool-p3.css 가 같은 선택자로 토큰을 더하거나 바꾼다. 도구가 토큰을 바꾸려면 자기 CSS 에서 .nxt-light.nxt-{이름}{--nxt-…:…} 으로 적는다(같은 무게, 뒤에 걸려 이긴다). */ .nxt.nxt-light{ --nxt-panel:var(--c-bg,#FFFFFF); --nxt-soft:var(--c-bg-soft,#F5F7FB); --nxt-tint:var(--c-primary-50,#EAF1FE); --nxt-tint-line:#BFD3FA; /* 옅은 파랑 상자의 테두리(꾸밈) */ --nxt-tint-dk:#DCE8FD; /* 옅은 파랑의 눌린 상태 */ --nxt-text:var(--c-text,#0F172A); --nxt-text-2:var(--c-text-2,#334155); --nxt-text-3:var(--c-text-3,#475569); /* 가장 밝은 글자색. 이보다 밝은 색을 글자에 쓰지 않는다 */ --nxt-placeholder:var(--c-gray-500,#64748B); /* 흰 칸 안의 placeholder 만 */ --nxt-line:var(--c-line,#E2E8F0); --nxt-line-dk:var(--c-line-dk,#CBD5E1); --nxt-field-line:var(--nxf-control-line,#CBD5E1); /* 입력칸 · 단추 테두리. 2026.10.14 옅게 바꿈(#8492A6 → #CBD5E1) */ --nxt-field-line-hover:var(--nxf-control-line-hover,#94A3B8); /* 마우스를 올린 입력칸 테두리 */ --nxt-field-shadow:0 1px 2px rgba(15,23,42,.05); /* 옅은 테두리의 칸 · 단추를 바닥에서 띄우는 그림자 */ --nxt-primary:var(--c-primary,#1A56DB); --nxt-primary-dk:var(--c-primary-dk,#1445B0); --nxt-focus:var(--c-focus,#E8590C); --nxt-danger:#B42318; --nxt-danger-50:#FEF3F2; --nxt-warn:#8A4B08; --nxt-warn-dk:#6B3A06; --nxt-warn-50:#FFF7E6; --nxt-warn-line:#F2D08A; --nxt-ok:var(--c-secondary,#0F766E); --nxt-inverse:#0F172A; /* 토스트 바탕 */ /* 그래프 색(도넛 · 범례) : 1 · 2 = 기본 묶음, 3 · 4 = 비교(B) 묶음 */ --nxt-series-1:var(--c-primary,#1A56DB); --nxt-series-2:#DB2777; --nxt-series-3:#0F766E; --nxt-series-4:#B45309; --nxt-r:8px; /* 입력칸 · 단추 */ --nxt-r-panel:14px; /* 패널 */ --nxt-h:44px; /* 입력칸 · 단추 높이 */ --nxt-pad:24px; /* 패널 안 여백 */ --nxt-gap:24px; /* 패널 사이 */ padding:0;border-radius:0;background:none;color:var(--nxt-text);line-height:1.5; } .nxt-light *,.nxt-light *::before,.nxt-light *::after{box-sizing:border-box} .nxt-light :focus-visible{outline:3px solid var(--nxt-focus);outline-offset:2px} /* ============ ⑤ 2단 · 패널 · 빈 상태 · 레이블 (바탕) ============ */ /* div.nxt-cols > section.nxt-panel.nxt-panel-in + section.nxt-panel.nxt-panel-out P1 의 2단이다. 다른 패턴의 뼈대(.nxt-p2 · .nxt-p3 …)와 부품은 tool-parts.css 가 그린다 */ .nxt-light .nxt-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--nxt-gap);align-items:start} .nxt-light .nxt-panel{min-width:0;padding:var(--nxt-pad);border:1px solid var(--nxt-line);border-radius:var(--nxt-r-panel);background:var(--nxt-panel);box-shadow:0 1px 2px rgba(15,23,42,.05)} /* 패널 머리 : div.nxt-panel-head > h2.nxt-panel-title (+ 오른쪽에 단추 하나까지) */ .nxt-light .nxt-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;margin:0 0 20px} .nxt-light .nxt-panel-title{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0;border:0;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--nxt-text)} .nxt-light .nxt-panel-title>.bi{color:var(--nxt-primary)} /* 결과 패널의 빈 상태(바탕) : 모양 · 안쪽 구성은 tool-parts.css 가 같은 선택자로 덮는다. 여닫기는 hidden 이다 */ .nxt-light .nxt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:320px;padding:32px 16px; border:1px dashed var(--nxt-line-dk);border-radius:12px;background:var(--nxt-soft);text-align:center} /* 입력칸 없이 단추 묶음에 붙는 레이블(예 : "상환 방식") */ .nxt-light .nxt-label{display:block;margin:0 0 6px;font-size:14px;font-weight:700;line-height:21px;color:var(--nxt-text-2)} /* (⑥ 사용 안내 본문 section.tool-guide 의 규칙은 2026.10.15 에 걷었다 - 지금 본문은 section.nxt-guide 이고 tool-parts.css ③-9 가 그린다. 토스트는 NxTool.toast 의 .nxt-toasts / .nxt-toast 다 - tool-parts.css) */ /* ============ ⑦ 무대 (바탕) ============ */ /* 무대 카드 : 기계 · 판 · 캔버스가 올라가는 곳(로또, 돌림판, 사다리, 제비뽑기). 패널에 nxt-stage 를 더한다. tool-parts.css · tool-p2.css 가 같은 선택자로 덮는다 */ .nxt-light .nxt-stage{display:flex;flex-direction:column;align-items:center;gap:16px;background:linear-gradient(180deg,var(--nxt-panel) 0%,var(--nxt-tint) 100%)} .nxt-light .nxt-stage-area{display:grid;place-items:center;width:100%;min-height:260px;border-radius:12px} /* ============ ⑧ 좁은 화면 · 움직임 ============ */ /* 901~1199px : 2단은 유지하되(왼쪽 메뉴 때문에 본문이 605~900px 다) 안 여백을 줄인다 */ @media (max-width:1199px){ .nxt.nxt-light{--nxt-pad:20px;--nxt-gap:16px} } /* 900px 이하 : 입력 → 결과 순으로 쌓인다 */ @media (max-width:900px){ .nxt.nxt-light{--nxt-pad:16px;--nxt-gap:16px} .nxt-light .nxt-cols{grid-template-columns:minmax(0,1fr)} .nxt-light .nxt-empty{min-height:200px} } @media (prefers-reduced-motion:reduce){ .nxt-light *,.nxt-light *::before,.nxt-light *::after{transition:none!important} }