/* char-count.css - 공개 도구 "글자 수 세기" 조각(WEB-INF/jsp/homepage/tool/charCount.jsp)의 스타일.
   뿌리 : <div class="nxt nxt-char-count nxt-wide nxt-light" …>
   걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → 이 파일

   [이 파일에 두는 것] 이 도구만의 것뿐이다.
     ① 서버로 보내지 않는다는 안내 상자 간격
     ② 글 칸 (여러 줄 칸 .nxt-textarea 는 tool-p2.css 에 있어 이 조각에 걸리지 않는다. 글은 보통 굵기로 쓴다)
     ③ 정리 단추 줄
     ④ 제한을 넘었을 때의 막대 색 (상태는 data-over 속성이다)
   [규칙] 전부 .nxt-light.nxt-char-count 로 범위를 한정한다. 틀 요소를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다. */

/* ============ ① 안내 상자 ============ */
.nxt-light.nxt-char-count .nxt-cc-private{margin:0 0 14px}

/* ============ ② 글 칸 ============ */
.nxt-light.nxt-char-count .nxt-cc-text{display:block;width:100%;min-height:260px;margin:0;padding:12px;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);background:var(--nxt-panel);color:var(--nxt-text);font:inherit;font-size:16px;font-weight:400;line-height:1.7;resize:vertical;box-shadow:var(--nxt-field-shadow)}
.nxt-light.nxt-char-count .nxt-cc-text:hover{border-color:var(--nxt-field-line-hover,#94A3B8)}
.nxt-light.nxt-char-count .nxt-cc-text:focus{border-color:var(--nxt-primary);outline:3px solid var(--nxt-focus);outline-offset:1px}
.nxt-light.nxt-char-count .nxt-cc-text::placeholder{color:var(--nxt-placeholder);opacity:1}
.nxt-light.nxt-char-count .nxt-cc-text[aria-invalid="true"]{border-color:var(--nxt-danger)}

/* ============ ③ 정리 단추 줄 ============ */
.nxt-light.nxt-char-count .nxt-cc-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.nxt-light.nxt-char-count .nxt-cc-tools>.nxt-btn{flex:1 1 0;min-width:110px;font-size:14px}

/* ============ ④ 제한 막대 ============ */
.nxt-light.nxt-char-count .nxt-progress[data-over="true"] .nxt-progress-track>span{background:var(--nxt-danger)}
.nxt-light.nxt-char-count .nxt-progress[data-over="true"] .nxt-progress-head>strong{color:var(--nxt-danger)}