/* ============================================================
   site-frame.css  —  도구 사이트(sols) 기본 틀 · 메인 · 분류 목록 · 모든 도구  (2026-10-13)
   놓을 곳 : resources/nexuscms/css/site-frame.css
   거는 곳 : frameHead.jspf 의 기본 틀 갈래 head, theme-daegu.css "바로 뒤"(항상 마지막).
             그 앞에 bootstrap-icons/bootstrap-icons.min.css 를 건다.
             Layout 틀 갈래에도 같은 순서로 건다(2026-10-13) - "메뉴 목록" 조각(div.nxf-list)이 Layout 사이트에도 나올 수 있다.
             ★ 그래서 이 파일의 선택자는 전부 body.nxf 또는 .nxf-* 로 시작해야 한다. 그 밖의 선택자(bbs-*, 요소 이름)를
               body.nxf 없이 쓰면 Layout 사이트의 화면이 바뀐다.
   범위    : 클래스는 전부 nxf- 접두. 기존 화면(bbs-*, mbr-*)은 ⑦에서 body.nxf 아래로만 다시 칠한다.
   스크립트 없음. 모바일 서랍은 체크상자(.nxf-nav-toggle) 하나로 여닫는다.

   [구성] ① 토큰 덮어쓰기  ② 틀(헤더 · 서랍 단추 · 왼쪽 메뉴 · 본문 칸 · 푸터)  ③ 본문 머리
          ④ 공용 부품(아이콘 상자 · 분류 색 · 검색창 · 칩 · 카드 · 격자 · 빈 상태)
          ⑤ 메인  ⑥ 분류 목록 · 모든 도구  ⑦ 기존 화면 맞춤  ⑧ 900px 이하  ⑨ 600px 이하

   [명도 대비 — 상대휘도 계산, 흰 바탕 기준. 글자 4.5:1 / 비텍스트 3:1]
     본문 #0F172A 17.9 · text-2 #334155 10.4 · text-3 #475569 7.6(가장 밝은 글자색) · 주색 #1A56DB 6.2 ·
     흰/주색 6.2 · 주색-dk #1445B0 8.4 · 주색/primary-50 5.5 · text-3/bg-soft 7.1 · 주색/bg-soft 5.8 ·
     분류색(흰 글자를 얹는다) 주황 5.2 · 청록 5.5 · 파랑 6.2 · 보라 5.7 · 자주 6.0 ·
     포커스 링 #E8590C 3.6(비텍스트).
     입력칸 · 단추 테두리 #CBD5E1 은 1.5 로 비텍스트 3:1 에 못 미친다(2026.10.14 사용자 결정 - 짙은 실선이 투박해 보였다).
       칸은 이름표 · 안의 글자 · 옅은 그림자로 구분하고, 올리면 #94A3B8, 포커스에는 주색 테두리 + 포커스 링이 붙는다.
     gray-500 #64748B 는 흰 바탕 4.8 이지만 bg-soft 위에서는 4.4 → placeholder(흰 칸 안)에만 쓴다.
   ============================================================ */

/* ============ ① 토큰 덮어쓰기 ============ */
/* theme-daegu.css 의 :root 토큰 "이름"에 새 값을 준다. 게시판 · 회원 CSS가 이 이름을 읽으므로 색이 함께 바뀐다.
   ★ --c-bg / --c-text / --c-line 처럼 다른 토큰을 var() 로 가리키는 것은 :root 에서 이미 계산된 값이 내려온다.
     회색 단계만 바꾸면 따라오지 않으므로 여기서 다시 선언한다(빼먹지 말 것). */
/* ★ 색 · 둥글기 · 그림자 토큰과 분류 색은 조각 뿌리 .nxf-list 에도 준다 - Layout 틀(body 에 nxf 가 없다) 안에 나온
     "메뉴 목록" 조각이 그 사이트의 theme-daegu 토큰 값에 기대지 않고 기본 틀과 같은 색으로 나온다.
     글꼴 · 틀 치수는 body.nxf 에만 준다(Layout 사이트의 글꼴은 그 사이트 것을 따른다). */
body.nxf,.nxf-list{
  --c-primary:#1A56DB; --c-primary-dk:#1445B0; --c-primary-lt:#5B8DEF; --c-primary-50:#EAF1FE;
  --c-secondary:#0F766E; --c-secondary-50:#E6F6F3;
  --c-accent:#C2410C; --c-accent-dk:#9A3412; --c-accent-lt:#FDBA74; --c-focus:#E8590C;
  --c-gray-900:#0F172A; --c-gray-800:#1E293B; --c-gray-700:#334155; --c-gray-600:#475569; --c-gray-500:#64748B;
  --c-gray-400:#94A3B8; --c-gray-300:#CBD5E1; --c-gray-200:#E2E8F0; --c-gray-100:#F1F5F9; --c-gray-50:#F5F7FB; --c-white:#FFFFFF;
  --c-bg:var(--c-white); --c-bg-soft:var(--c-gray-50); --c-text:var(--c-gray-900); --c-text-2:var(--c-gray-700); --c-text-3:var(--c-gray-600);
  --c-line:var(--c-gray-200); --c-line-dk:var(--c-gray-300); --c-inverse:var(--c-gray-900);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06); --sh-md:0 6px 16px rgba(15,23,42,.08); --sh-lg:0 16px 40px rgba(15,23,42,.16);

  /* 이 틀이 더하는 토큰 (부품용) */
  --nxf-control-line:#CBD5E1;        /* 입력칸 · 검색창 · 단추 테두리. 2026.10.14 옅게 바꿈(#8492A6 → gray-300) - 짙은 실선이 투박해 보였다 */
  --nxf-control-line-hover:#94A3B8;  /* 마우스를 올린 입력칸 테두리(gray-400) */
  --nxf-hero-line:#D5E3FC;
  /* 분류 색 5개 : 흰 아이콘을 얹는 진한 색 + 옅은 바탕. 1차 메뉴 순서대로 1~5 */
  --nxf-t1:#C2410C; --nxf-t1-50:#FFF1E7;   /* 랜덤 뽑기   주황 */
  --nxf-t2:#0F766E; --nxf-t2-50:#E6F6F3;   /* 생활 계산기 청록 */
  --nxf-t3:#1A56DB; --nxf-t3-50:#EAF1FE;   /* 금융 계산기 파랑 */
  --nxf-t4:#7C3AED; --nxf-t4-50:#F1EBFE;   /* 이미지 도구 보라 */
  --nxf-t5:#BE185D; --nxf-t5-50:#FCE8F1;   /* 디자인 에디터 자주 */
}
/* Layout 틀 안의 조각 : 글자색도 조각의 토큰으로 (기본 틀에서는 body.nxf 의 색과 같은 값이다) */
.nxf-list{color:var(--c-text)}
body.nxf{
  /* 웹폰트를 걸지 않는다. 맑은 고딕에는 굵기가 400 · 700 뿐이다 → 이 파일은 400 과 700 만 쓴다 */
  --font-body:'Pretendard','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-title:var(--font-body); --font-accent:var(--font-body); --font-label:var(--font-body);
  --header-h:64px;
  --nxf-side-w:232px;          /* 왼쪽 메뉴 폭 */
  --nxf-pad:32px;              /* 본문 칸 좌우 여백 */

  position:relative;           /* 서랍 단추(absolute)의 기준 */
  background:var(--c-bg-soft);
  color:var(--c-text);
  font-family:var(--font-body);
}

/* ============ ② 틀 ============ */
/* ---- 헤더 ---- */
.nxf-header{position:sticky;top:0;z-index:50;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
.nxf-header-in{display:flex;align-items:center;gap:var(--sp-4);height:var(--header-h);padding:0 var(--sp-6)}
/* 로고 = 사이트명 글자. 앞의 표식은 CSS 로 그린다(그림 파일 없음). 폭을 왼쪽 메뉴에 맞춰 메뉴 글자가 본문 칸에서 시작한다 */
.nxf-logo{flex:none;display:inline-flex;align-items:center;gap:10px;width:calc(var(--nxf-side-w) - var(--sp-6) - var(--sp-4));min-height:44px;
  font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--c-primary);text-decoration:none;white-space:nowrap}
.nxf-logo::before{content:"";flex:none;width:28px;height:28px;border-radius:8px;
  background:radial-gradient(circle,#fff 0 2.6px,transparent 3.2px) 0 0/50% 50%,var(--c-primary)}
.nxf-logo:hover{color:var(--c-primary-dk)}
.nxf-gnb{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.nxf-gnb a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:var(--r-sm);
  font-size:15px;font-weight:700;color:var(--c-text-2);text-decoration:none;white-space:nowrap}
.nxf-gnb a:hover{background:var(--c-gray-100);color:var(--c-text)}
.nxf-gnb a[aria-current="page"]{color:var(--c-primary)}
.nxf-gnb a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-10px;height:3px;border-radius:3px 3px 0 0;background:var(--c-primary)}
.nxf-header .nxf-search{margin-left:auto;flex:0 1 360px}

/* ---- 서랍 단추 : 체크상자 자체가 단추다(900px 이하에서만 보인다). 모양은 ⑧ ---- */
.nxf-nav-toggle{display:none}
.nxf-backdrop{display:none}
.nxf-side-title{display:none}

/* ---- 본문 감싸개 = 왼쪽 메뉴 + 본문 칸 ---- */
.nxf-shell{display:grid;grid-template-columns:var(--nxf-side-w) minmax(0,1fr);align-items:stretch;min-height:calc(100vh - var(--header-h) - 73px)}
.nxf-side{background:var(--c-bg);border-right:1px solid var(--c-line)}
.nxf-side-nav{position:sticky;top:var(--header-h);max-height:calc(100vh - var(--header-h));overflow-y:auto;padding:var(--sp-4) var(--sp-3) var(--sp-6)}
.nxf-side-list,.nxf-side-sub{margin:0;padding:0;list-style:none}
.nxf-side-list{display:flex;flex-direction:column;gap:2px}
/* 1차 : 홈 + 분류 */
.nxf-side-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);
  font-size:15px;font-weight:400;line-height:1.35;color:var(--c-text-2);text-decoration:none}
.nxf-side-link>.bi,.nxf-side-link>.nxf-emo{flex:none;width:20px;font-size:18px;line-height:1;text-align:center;color:var(--c-text-3)}
.nxf-side-link:hover{background:var(--c-gray-100);color:var(--c-text)}
.nxf-side-link:active{background:var(--c-gray-200)}
.nxf-side-link[aria-current]{background:var(--c-primary);color:#fff;font-weight:700}
.nxf-side-link[aria-current]>.bi{color:#fff}
.nxf-side-link[aria-current]:hover{background:var(--c-primary-dk)}
/* 2차 : 지금 분류 아래에만 나온다(도구 이름). 세로 줄 + 지금 도구 표시 */
.nxf-side-sub{margin:4px 0 10px 21px;padding-left:10px;border-left:2px solid var(--c-line)}
.nxf-side-sub a{position:relative;display:flex;align-items:center;min-height:36px;padding:6px 10px;border-radius:var(--r-xs);
  font-size:14px;line-height:1.4;color:var(--c-text-2);text-decoration:none}
.nxf-side-sub a:hover{background:var(--c-gray-100);color:var(--c-text)}
.nxf-side-sub a[aria-current="page"]{background:var(--c-primary-50);color:var(--c-primary);font-weight:700}
.nxf-side-sub a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:4px;bottom:4px;width:2px;background:var(--c-primary)}
/* 지금 메뉴의 조상인 2차 · 3차(aria-current="true") : 굵게만 */
.nxf-side-sub a[aria-current="true"]{color:var(--c-text);font-weight:700}
/* 3차 : 지금 메뉴가 있는 2차 아래에만 나온다. 한 단 더 들여 쓴다 */
.nxf-side-sub .nxf-side-sub{margin:2px 0 6px 10px}

.nxf-main{min-width:0}
/* 본문 칸 : 기존 main.bbs-wrap.bbs-main 이 그대로 열린다 */
body.nxf .bbs-wrap{max-width:1200px;margin:0 auto;padding:0 var(--nxf-pad)}
body.nxf .bbs-main{padding-top:var(--sp-6);padding-bottom:var(--sp-16);min-height:60vh}
body.nxf main:focus{outline:none}

/* ---- 푸터 : 사이트명 + © + 회원 링크(작은 글자). 약관 · 문의 링크 없음 ---- */
.nxf-footer{background:var(--c-bg);border-top:1px solid var(--c-line)}
.nxf-footer-in{display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--sp-4);min-height:72px;padding:var(--sp-4) var(--sp-6);font-size:13px;color:var(--c-text-3)}
.nxf-footer-name{font-weight:700;color:var(--c-text-2)}
.nxf-footer-copy{margin:0 auto 0 0}
.nxf-footer .nx-member-links{display:flex;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.nxf-footer .nx-member-links a{display:inline-flex;align-items:center;min-height:24px;color:var(--c-text-3);text-decoration:underline;text-underline-offset:3px}
.nxf-footer .nx-member-links a:hover{color:var(--c-primary)}

/* ============ ③ 본문 머리 (pageHead.jspf) : 경로 → (아이콘 상자) + h1 + (설명) ============ */
body.nxf .bbs-title-row{display:block;margin:0 0 var(--sp-6);padding:0;border:0}
body.nxf .bbs-path{display:block;margin:0 0 var(--sp-3);font-size:13px;color:var(--c-text-3)}
body.nxf .bbs-path a{color:inherit;text-decoration:none}
body.nxf .bbs-path a:hover{color:var(--c-primary);text-decoration:underline}
.nxf-head-main{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.nxf-head-text{min-width:0}
body.nxf .bbs-title{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.nxf-head-desc{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--c-text-2)}

/* ============ ④ 공용 부품 ============ */
/* ---- 아이콘 상자 + 분류 색 ---- */
/* <span class="nxf-ico nxf-tone-3" aria-hidden="true"><i class="bi bi-bank"></i></span>
   이모지를 쓴 메뉴는 <span class="nxf-ico is-emo …"><span class="nxf-emo">🏦</span></span> — 옅은 바탕에 이모지 */
.nxf-tone-1{--nxf-tone:var(--nxf-t1);--nxf-tone-50:var(--nxf-t1-50)}
.nxf-tone-2{--nxf-tone:var(--nxf-t2);--nxf-tone-50:var(--nxf-t2-50)}
.nxf-tone-3{--nxf-tone:var(--nxf-t3);--nxf-tone-50:var(--nxf-t3-50)}
.nxf-tone-4{--nxf-tone:var(--nxf-t4);--nxf-tone-50:var(--nxf-t4-50)}
.nxf-tone-5{--nxf-tone:var(--nxf-t5);--nxf-tone-50:var(--nxf-t5-50)}
.nxf-ico{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--nxf-tone,var(--c-primary));color:#fff;font-size:22px;line-height:1}
.nxf-ico.is-emo{background:var(--nxf-tone-50,var(--c-primary-50))}
.nxf-ico-lg{width:56px;height:56px;border-radius:14px;font-size:28px}
.nxf-ico-sm{width:32px;height:32px;border-radius:9px;font-size:16px}

/* ---- 검색창 : form.nxf-search[role=search][method=get] > label.sr-only + input[name=q] + button ---- */
.nxf-search{display:flex;align-items:stretch;min-width:0;height:44px;border:1px solid var(--nxf-control-line);border-radius:var(--r-sm);background:var(--c-bg);box-shadow:var(--sh-sm);overflow:hidden}
.nxf-search:hover{border-color:var(--nxf-control-line-hover)}
.nxf-search:focus-within{border-color:var(--c-primary);outline:3px solid var(--c-focus);outline-offset:2px}
.nxf-search input{flex:1 1 auto;min-width:0;padding:0 14px;border:0;background:transparent;font:inherit;font-size:15px;color:var(--c-text)}
.nxf-search input::placeholder{color:var(--c-gray-500)}
.nxf-search input:focus{outline:none}
.nxf-search button{flex:none;display:grid;place-items:center;width:44px;border:0;background:var(--c-primary);color:#fff;font-size:18px;cursor:pointer}
.nxf-search button:hover{background:var(--c-primary-dk)}
.nxf-search button:focus-visible{outline:2px solid #fff;outline-offset:-5px;border-radius:0}
.nxf-search-lg{height:56px;border-radius:var(--r-md);box-shadow:var(--sh-md)}
.nxf-search-lg input{padding:0 18px;font-size:17px}
.nxf-search-lg button{width:60px;font-size:22px}

/* ---- 칩(분류 바로가기) ---- */
.nxf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.nxf-chips-label{margin-right:4px;font-size:14px;font-weight:700;color:var(--c-text)}
.nxf-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--c-line-dk);border-radius:var(--r-pill);
  background:var(--c-bg);font-size:14px;line-height:1.3;color:var(--c-text);text-decoration:none;white-space:nowrap}
.nxf-chip>.bi{font-size:15px;color:var(--nxf-tone,var(--c-primary))}
.nxf-chip:hover{border-color:var(--c-primary);background:var(--c-primary-50);color:var(--c-primary-dk)}
.nxf-chip:active{background:#DCE8FD}

/* ---- 카드 : a.nxf-card > span.nxf-ico + span.nxf-card-body(strong.nxf-card-name + span.nxf-card-desc) + i.nxf-card-go ---- */
.nxf-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);height:100%;padding:var(--sp-5);
  border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg);color:var(--c-text);text-decoration:none;
  transition:border-color var(--dur),box-shadow var(--dur)}
.nxf-card:hover{border-color:var(--c-primary);box-shadow:var(--sh-md)}
.nxf-card:active{box-shadow:none;background:var(--c-gray-50)}
.nxf-card:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-md)}
.nxf-card-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.nxf-card-name{font-size:16px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.nxf-card-desc{font-size:14px;line-height:1.55;color:var(--c-text-3);overflow-wrap:anywhere}
.nxf-card-go{align-self:flex-end;font-size:18px;line-height:1;color:var(--c-text-3);transition:transform var(--dur),color var(--dur)}
.nxf-card:hover .nxf-card-go{color:var(--c-primary);transform:translateX(3px)}
/* 가로형 : 아이콘 왼쪽 / 글 오른쪽 / 화살표 오른쪽 아래. 목록 화면은 늘 이 모양, 메인의 카드는 600px 이하에서 이 모양(⑨) */
.nxf-card-row{flex-direction:row;align-items:flex-start;gap:var(--sp-4)}
.nxf-card-row .nxf-card-go{align-self:flex-end}
/* 분류 카드 : 머리(아이콘 + 이름 + n개 도구) + 도구 이름 3개 */
.nxf-cat-head{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.nxf-cat-count{display:block;font-size:13px;font-weight:400;color:var(--c-text-3)}
.nxf-cat-tools{display:flex;flex-direction:column;gap:4px;padding-top:var(--sp-3);border-top:1px solid var(--c-line);font-size:14px;line-height:1.45;color:var(--c-text-2)}
.nxf-cat-tools>span{overflow-wrap:anywhere}
.nxf-cat-more{color:var(--c-text-3)}

/* ---- 격자 ---- */
/* 5칸 격자 : 인기 도구 5개 · 분류 카드 5장이 같은 줄 맞춤을 쓴다. 1400px↑ 5열(카드 폭 208px) / 601~1399px 3 + 2(둘째 줄이 폭을 채운다) / 600px↓ 1열.
   분기점은 화면 폭이다 — 왼쪽 메뉴 232px 와 여백 64px 를 뺀 것이 본문 폭이다(1400 → 1104). */
.nxf-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
@media (min-width:601px) and (max-width:1399px){
  .nxf-grid-5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .nxf-grid-5>li{grid-column:span 2}
  /* 딱 5장일 때만 : 넷째 · 다섯째를 반씩 */
  .nxf-grid-5>li:nth-child(4):nth-last-child(2),
  .nxf-grid-5>li:nth-child(4):nth-last-child(2)~li{grid-column:span 3}
}
/* 도구 카드 격자 : 1360px↑ 3열 / 601~1359px 2열 / 600px↓ 1열 */
.nxf-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
@media (max-width:1359px){.nxf-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 구역 머리 ---- */
.nxf-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin:0 0 var(--sp-4)}
.nxf-sec-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.nxf-more{display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:14px;color:var(--c-text-2);text-decoration:none;white-space:nowrap}
.nxf-more:hover{color:var(--c-primary);text-decoration:underline}

/* ---- 빈 상태 : 목록이 0건일 때 ---- */
.nxf-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-12) var(--sp-5);
  border:1px dashed var(--c-line-dk);border-radius:var(--r-lg);background:var(--c-bg);text-align:center}
.nxf-empty-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c-gray-100);color:var(--c-text-3);font-size:26px}
.nxf-empty-title{margin:0;font-size:18px;font-weight:700;overflow-wrap:anywhere}
.nxf-empty-desc{margin:0;font-size:14px;color:var(--c-text-3)}
.nxf-empty .nxf-chips{justify-content:center;margin-top:var(--sp-2)}

/* ============ ⑤ 메인 (index.jsp : main#nxMain.nxf-home) ============ */
.nxf-home{display:flex;flex-direction:column;gap:var(--sp-10);max-width:1200px;margin:0 auto;padding:var(--sp-6) var(--nxf-pad) var(--sp-16)}
/* 소개 */
.nxf-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:var(--sp-8);
  padding:var(--sp-10);border:1px solid var(--nxf-hero-line);border-radius:var(--r-xl);
  background:linear-gradient(115deg,var(--c-bg) 0%,var(--c-primary-50) 100%)}
.nxf-hero-text{min-width:0}
.nxf-eyebrow{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--c-primary);border-radius:var(--r-pill);
  background:var(--c-bg);font-size:13px;font-weight:700;color:var(--c-primary)}
.nxf-hero-title{margin:var(--sp-4) 0 var(--sp-3);font-size:clamp(26px,3.3vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.25;text-wrap:balance}
.nxf-hero-title em{font-style:normal;color:var(--c-primary)}
.nxf-hero-lead{max-width:34em;margin:0 0 var(--sp-6);font-size:17px;line-height:1.6;color:var(--c-text-2)}
.nxf-hero .nxf-search{max-width:560px}
.nxf-hero .nxf-chips{margin-top:var(--sp-5)}

/* 소개 그림 : 열린 상자에서 도구 아이콘이 나오는 그림 한 장(2026.10.14 사용자가 준 그림 - resources/homepage/main/hero-toolbox.webp, 투명 바탕).
   <div class="nxf-art" aria-hidden="true"><img class="nxf-art-img" src="…/hero-toolbox.webp" width="680" height="692" alt=""></div>
   뒤의 옅은 원(::before)은 전과 같다. 높이는 그림이 정한다 */
.nxf-art{position:relative;justify-self:center;width:100%;max-width:340px}
.nxf-art::before{content:"";position:absolute;inset:6% 2% 2%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,var(--nxf-hero-line) 72%)}
.nxf-art-img{position:relative;display:block;width:100%;height:auto}

/* 안내 배너 */
.nxf-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-10);border-radius:var(--r-lg);background:var(--c-primary-50)}
.nxf-banner-title{margin:0 0 var(--sp-3);font-size:20px;font-weight:700;line-height:1.35;color:var(--c-primary-dk)}
.nxf-checks{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nxf-checks li{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.5;color:var(--c-text)}
.nxf-checks .bi{flex:none;margin-top:.2em;font-size:18px;line-height:1;color:var(--c-primary)}
.nxf-banner-art{display:flex;align-items:flex-end;gap:var(--sp-3)}
.nxf-banner-art span{display:grid;place-items:center;border:1px solid #C3D4F5;border-radius:var(--r-md);background:var(--c-bg);color:var(--c-primary);box-shadow:var(--sh-md)}
.nxf-banner-art span:nth-child(1){width:112px;height:84px;font-size:52px}
.nxf-banner-art span:nth-child(2){width:52px;height:84px;font-size:34px}

/* ============ ⑥ 분류 목록 · 모든 도구 (menuindex/list.jsp, all.jsp : 뿌리 div.nxf-list) ============ */
.nxf-list{display:flex;flex-direction:column;gap:var(--sp-8)}
.nxf-list-search{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.nxf-list-search .nxf-search{flex:1 1 320px;max-width:560px;height:48px}
.nxf-list-search .nxf-search button{width:52px;font-size:20px}
.nxf-result{margin:0;font-size:15px;color:var(--c-text-2)}
.nxf-result strong{color:var(--c-primary);font-weight:700}
.nxf-result a{margin-left:var(--sp-3);color:var(--c-text-3);text-underline-offset:3px}
.nxf-group{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.nxf-group-title{display:flex;align-items:center;gap:var(--sp-3);margin:0;font-size:18px;font-weight:700;line-height:1.3}
.nxf-group-title a{color:inherit;text-decoration:none}
.nxf-group-title a:hover{color:var(--c-primary);text-decoration:underline}
.nxf-group-count{font-size:13px;font-weight:400;color:var(--c-text-3)}

/* ============ ⑦ 기존 화면 맞춤 (게시판 · 회원 · 콘텐츠) ============ */
/* 본문 모양은 그대로, 색은 ①의 토큰을 따라온다. 바탕이 옅은 회색이라 본문을 흰 종이 한 장에 올린다.
   도구 조각(.nxt)과 목록 화면(.nxf-list)은 자기 카드가 있으므로 종이를 깔지 않는다(:has 를 모르는 브라우저에서는 종이 안에 들어간다 — 깨지지 않는다). */
body.nxf .bbs-body{min-width:0;padding:var(--sp-8);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-bg)}
body.nxf .bbs-body:has(.nxt),
body.nxf .bbs-body:has(.nxf-list){padding:0;border:0;border-radius:0;background:none}
/* 틀이 옆 메뉴를 내지 않는다(pageHead.jspf 조건). 남은 has-lnb 2단을 풀어 둔다 */
body.nxf .bbs-main.has-lnb{display:block}

/* ============ ⑧ 900px 이하 : 왼쪽 메뉴 = 서랍, 검색창 = 헤더 둘째 줄 ============ */
@media (max-width:900px){
  body.nxf{--nxf-pad:16px}
  .nxf-header{position:static}
  .nxf-header-in{flex-wrap:wrap;gap:0 8px;height:auto;padding:6px 12px 10px 60px}   /* 왼쪽 60px = 서랍 단추 자리 */
  .nxf-logo{width:auto;margin-right:auto}
  .nxf-gnb-home{display:none}                                   /* 홈은 로고와 서랍의 "홈"으로 간다 */
  .nxf-gnb a{padding:0 8px;font-size:14px}
  .nxf-gnb a[aria-current="page"]::after{left:8px;right:8px;bottom:4px}
  .nxf-header .nxf-search{flex:0 0 calc(100% + 48px);margin:4px 0 0 -48px}

  /* 서랍 단추 : 체크상자. 막대 3개(닫힘) ↔ ×(열림) 를 바탕 그림으로 그린다 */
  .nxf-nav-toggle{display:block;-webkit-appearance:none;appearance:none;position:absolute;top:6px;left:8px;z-index:60;width:44px;height:44px;margin:0;
    border:0;border-radius:var(--r-sm);color:var(--c-text);cursor:pointer;
    background:linear-gradient(currentColor,currentColor) center 14px/20px 2px no-repeat,
               linear-gradient(currentColor,currentColor) center 21px/20px 2px no-repeat,
               linear-gradient(currentColor,currentColor) center 28px/20px 2px no-repeat}
  .nxf-nav-toggle:hover{background-color:var(--c-gray-100)}
  .nxf-nav-toggle:checked{position:fixed;top:6px;left:calc(min(86vw,304px) - 52px);z-index:80;
    background:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/18px 18px no-repeat,
               linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/18px 18px no-repeat}

  .nxf-shell{display:block;min-height:0}
  .nxf-side{position:fixed;top:0;bottom:0;left:0;z-index:70;width:min(86vw,304px);padding-top:56px;border-right:0;box-shadow:var(--sh-lg);overflow-y:auto;
    transform:translateX(-104%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}   /* 닫힌 동안 visibility:hidden — Tab 이 들어가지 않는다 */
  .nxf-nav-toggle:checked~.nxf-shell .nxf-side{transform:none;visibility:visible;transition:transform .2s ease}
  .nxf-side-title{display:block;position:absolute;top:0;left:24px;margin:0;font-size:16px;font-weight:700;line-height:56px;color:var(--c-text)}
  .nxf-side-nav{position:static;max-height:none;padding-top:0}
  .nxf-side-sub a{min-height:44px}
  .nxf-backdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(15,23,42,.5);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
  .nxf-nav-toggle:checked~.nxf-shell .nxf-backdrop{opacity:1;visibility:visible;transition:opacity .2s ease}
  body.nxf:has(.nxf-nav-toggle:checked){overflow:hidden}        /* 서랍이 열린 동안 뒤 문서가 굴러가지 않게 */

  body.nxf .bbs-main{padding-top:var(--sp-5);padding-bottom:var(--sp-12)}
  body.nxf .bbs-title{font-size:24px}
  body.nxf .bbs-body{padding:var(--sp-5) var(--sp-4)}
  .nxf-home{gap:var(--sp-8);padding-top:var(--sp-4);padding-bottom:var(--sp-12)}
  .nxf-hero{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-5)}
  .nxf-art{display:none}                            /* 꾸밈 그림 — 좁은 화면에서는 뺀다 */
  .nxf-banner{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-5)}
  .nxf-banner-art{display:none}
  .nxf-footer-in{padding:var(--sp-4)}
}

/* ============ ⑨ 600px 이하 : 격자 1열, 카드는 가로형 ============ */
@media (max-width:600px){
  .nxf-grid-5,.nxf-tool-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .nxf-card{flex-direction:row;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4)}
  .nxf-card.nxf-cat{flex-direction:column}
  .nxf-cat-tools{flex-direction:row;flex-wrap:wrap;gap:2px 10px}
  .nxf-sec-title{font-size:20px}
  .nxf-hero-lead{font-size:15px}
  .nxf-chip{min-height:40px}
  .nxf-head-main{align-items:flex-start;gap:var(--sp-3)}
  .nxf-ico-lg{width:48px;height:48px;font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .nxf-side,.nxf-backdrop,.nxf-card,.nxf-card-go{transition:none}
}

/* ============ ⑩ 왼쪽 메뉴가 없을 때 (body.nxf-noside) — 시안에 없던 것, 퍼블리셔 추가 2026-10-13 ============ */
/* frameHead.jspf 는 nxFrameSideHtml 이 비면(왼쪽 메뉴 생성 실패) aside · 서랍 단추를 내지 않고 body 에 nxf-noside 를 붙인다.
   그대로 두면 본문 칸이 2단 격자의 첫 칸(232px)에 들어가고, 모바일 헤더에 단추 자리(60px)가 빈다.
   이때는 pageHead.jspf 가 옛 옆 메뉴(nav.bbs-lnb)를 내므로 ⑦에서 푼 has-lnb 2단도 되돌린다(2단 값 자체는 board-public.css 의 것이 그대로 쓰인다). */
body.nxf-noside .nxf-shell{display:block}
body.nxf-noside .nxf-logo{width:auto;margin-right:var(--sp-4)}
@media (min-width:901px){
  body.nxf-noside .bbs-main.has-lnb{display:grid}
}
@media (max-width:900px){
  body.nxf-noside .nxf-header-in{padding-left:12px}
  body.nxf-noside .nxf-header .nxf-search{flex:0 0 100%;margin-left:0}
}