/* sols-canvas.css - 공개 도구 "솔스 캔버스"(카드뉴스 · 배너 편집기) 조각(WEB-INF/jsp/homepage/tool/solsCanvas.jsp)의 스타일.
   2026.10.13 재구성 2단계(2-3) : 겉 색을 밝게.
   2026.10.14 도구 개편 P4 편집기형 : 편집기 구조(머리 줄 + 3단 본문) · 구역 · 폭(왼쪽 268 · 오른쪽 288) · 색은 그대로 두고 손질만 했다.
     시안 docs/design/2026-10-14_tool_renewal_시안/renewal-p3.css ⑥ · design-notes-p3.md 6절 (표의 값을 옛 규칙에 덮지 않고 그 자리에 넣었다)

   뿌리 : <div class="nxt nxt-sols-canvas nxt-full nxt-light" …>     넓게 보면 is-nxt-max, 좁은 화면에서 [그래도 열기]를 누르면 data-nxt-open="true"
   걸리는 순서 : tool-common.css(폭 옵션 nxt-full · 넓게 보기 · 밝은 토큰) → tool-parts.css(공통 부품) → bootstrap-icons → fonts/fonts.css → 이 파일
                (P4 는 공용 뼈대 파일이 따로 없다 - tool-p3.css 를 걸지 않는다. P4 토큰도 여기 있다)

   [구성] ① 뿌리 · P4 토큰 · 편집기 상자  ② 넓게 보기 줄  ③ 좁은 화면 안내 카드  ④ 편집기 셸 · 머리 줄  ⑤ 왼쪽 도구 패널  ⑥ 가운데 캔버스
          ⑦ 오른쪽 속성 패널  ⑧ 레이어 목록  ⑨ 좁은 화면(880px 이하)

   [2026.10.14 에 바뀐 것]
     - 높이와 overflow:hidden 을 뿌리(.nxt-full - tool-common.css)에서 편집기 상자(.nxt-p4-editor)로 옮겼다. 뿌리는 보통 블록이라 안내 카드 · 사용 안내가 흐름 안에 놓인다
       (사용 안내를 뿌리 아래 바깥으로 빼던 top:100% 규칙은 없앴다). 공용 규칙은 고치지 않고 여기서 무게(0,3,0)로 덮는다.
     - 편집기 높이 = clamp(560px, 100vh - 264px, 1200px). 1400 × 900 에서 636px 이고 아래 끝이 화면 안에 온다(뿌리의 위 끝이 약 207px).
     - [넓게 보기] = 44px 주 단추(.nxt-btn.nxt-btn-primary.nxt-fullbtn). 넓게 본 동안(aria-pressed="true")은 같은 단추가 보조 모양이다.
     - 880px 이하 : 편집기 대신 안내 카드. [그래도 열기] 뒤에는 지금의 편집기가 셸 안에서 가로로 밀린다(문서에는 가로 스크롤이 생기지 않는다).
     - 편집기 안 : 글자 최소 13px(--nxt-cv-fs) · 단추 · 칸 최소 36px(--nxt-cv-h). 넓은 화면 전용 편집기라 44px 가 아니다(기획 6-4).
     - 템플릿 카드 · 이미지 올리기 칸 · 레이어 이름이 button 이 됐다. 여닫기는 hidden 속성이다(display:none 을 기본값으로 두던 규칙을 뺐다).
     - 없앤 것 : 로고 줄(.cv-logo*) · 자체 모달(.cv-modal*) · 자체 토스트(.toast) · 옛 변수 이름 잇기 · 조각에 없는 부품의 규칙(.cv-prop-* · .cv-select · .cv-field-row · .cv-art-* · .cv-opacity-row · .cv-empty-hint).
   [규칙] 전부 .nxt-sols-canvas 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다(그림자의 반투명 남색은 예외).
     공통 부품(.nxt-btn · .nxt-panel · .nxt-guide · .nxt-backdrop · .nxt-toasts)의 모양은 tool-parts.css 가 그린다 - 여기서 다시 적지 않는다.

   ★ 스크립트(sols-canvas.js)가 DOM 에 인라인으로 넣는 것은 자리와 크기뿐이다(캔버스 상자의 width · height, 떠 있는 도구줄의 left · top, 글꼴 이름 미리보기의 font-family).
     Fabric 이 캔버스에 그리는 색(새 도형 · 글자 · 프레임의 기본색, 안내선 #ec4899)은 사용자의 작업물이라 손대지 않는다. 아트보드의 기본 바탕은 흰색(#ffffff)이다.

   [명도 대비] 패널 글자 #475569 / 흰 7.6 · 묶음 제목 #1445B0 / 흰 8.4 · 고른 레이어 줄 #334155 / #EAF1FE 9.1 · 넓게 보기 줄 글 #334155 / #F5F7FB 9.7 */

/* ==========================================================================================
   ① 뿌리 · P4 토큰 · 편집기 상자
   ==========================================================================================
   <div class="nxt nxt-sols-canvas nxt-full nxt-light" data-nxt="sols-canvas">
     <div class="nxt-panel nxt-p4-notice">…안내 카드 + [그래도 열기]…</div>                      880px 이하에서만 (보이고 감추는 기본값은 tool-parts.css)
     <div class="nxt-p4-editor">                                                               편집기 상자(높이를 가진다)
       <div class="nxt-bar">…안내 글 + [넓게 보기]…</div>
       <div class="cv-shell"> header.cv-header + div.cv-body(aside.cv-left · div.cv-center · aside.cv-right) </div>
     </div>
     <section class="nxt-guide">…사용 안내…</section>                                           편집기 아래에 보인다
     <div class="nxt-backdrop" hidden>…복구 창…</div>  <div class="nxt-toasts" aria-live="polite"></div>
   </div> */
.nxt.nxt-light.nxt-sols-canvas {
    /* 편집기 상자의 높이 : 화면 높이 - (틀 헤더 64 + 본문 머리 + 아래 여유). 1400 × 900 에서 636px */
    --nxt-p4-top: 264px;
    --nxt-p4-min: 560px;
    --nxt-cv-h: 36px;                /* 편집기 안의 단추 · 칸 최소 높이 */
    --nxt-cv-fs: 13px;               /* 편집기 안의 글자 최소 크기 */

    /* 뿌리는 보통 블록이다 - 높이와 overflow:hidden 은 편집기 상자(.nxt-p4-editor)가 갖는다.
       (tool-common.css 의 .nxt-full 에 있던 뿌리 높이 · 세로 flex 는 2026.10.15 에 걷혔다. 여기서 되돌리던 줄도 함께 뺐다) */
}
.nxt-light.nxt-sols-canvas .nxt-p4-editor {
    display: flex; flex-direction: column;
    height: clamp(var(--nxt-p4-min), calc(100vh - var(--nxt-p4-top)), 1200px);
    border: 1px solid var(--nxt-line-dk); border-radius: 12px; background: var(--nxt-panel); overflow: hidden;
}
/* 넓게 본 상태 : 뿌리가 화면을 덮는다(tool-common.css 의 .nxt.is-nxt-max - position:fixed; inset:0). 편집기 상자만 남기고 나머지는 감춘다 */
.nxt.nxt-light.nxt-sols-canvas.is-nxt-max { display: flex; flex-direction: column; background: var(--nxt-panel); overflow: hidden; }
.nxt-light.nxt-sols-canvas.is-nxt-max > .nxt-p4-editor { flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
.nxt-light.nxt-sols-canvas.is-nxt-max > .nxt-guide,
.nxt-light.nxt-sols-canvas.is-nxt-max > .nxt-p4-notice { display: none; }

/* ==========================================================================================
   ② 넓게 보기 줄
   ==========================================================================================
   <div class="nxt-bar">
     <p class="nxt-bar-text" data-nxt-when="min">…</p><p class="nxt-bar-text" data-nxt-when="max" hidden>…</p>
     <button type="button" class="nxt-btn nxt-btn-primary nxt-fullbtn" aria-pressed="false"><i class="bi bi-arrows-fullscreen" aria-hidden="true"></i><span class="nxt-fullbtn-text">넓게 보기</span></button>
   </div>
   글자 · 아이콘 · aria-pressed · 안내 글의 hidden 은 tool-common.js 가 바꾼다. 모양은 aria-pressed 만 보고 바뀐다(클래스를 바꾸지 않는다).
   줄 · 단추의 모양은 전부 여기에 있다 - tool-common.css 의 옛 넓게 보기 줄 규칙(.nxt-bar · .nxt-fullbtn)은 2026.10.15 에 걷혔다
   (그때 그 규칙에 기대던 display:flex · align-items:center 를 이 줄로 옮겼다). */
.nxt-light.nxt-sols-canvas .nxt-bar {
    display: flex; align-items: center;
    flex: none; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 12px;
    border-bottom: 1px solid var(--nxt-line); background: var(--nxt-soft); color: var(--nxt-text-2); font-size: 13px; line-height: 1.5;
}
.nxt-light.nxt-sols-canvas .nxt-bar-text { min-width: 0; margin: 0; }
.nxt-light.nxt-sols-canvas .nxt-fullbtn { flex: none; margin-left: auto; border-radius: var(--nxt-r); font-weight: 700; }
.nxt-light.nxt-sols-canvas .nxt-fullbtn.nxt-btn-primary:hover { border-color: var(--nxt-primary-dk); background: var(--nxt-primary-dk); color: #fff; }
/* 넓게 본 동안 : 같은 단추가 보조 단추 모양 "원래 크기로"가 된다 - 그때 채운 단추는 편집기의 [내려받기] 하나다 */
.nxt-light.nxt-sols-canvas .nxt-fullbtn[aria-pressed="true"] { border-color: var(--nxt-field-line); background: var(--nxt-panel); color: var(--nxt-text); }
.nxt-light.nxt-sols-canvas .nxt-fullbtn[aria-pressed="true"]:hover { border-color: var(--nxt-primary); background: var(--nxt-tint); color: var(--nxt-primary-dk); }

/* ==========================================================================================
   ③ 좁은 화면 안내 카드 (880px 이하)
   ==========================================================================================
   <div class="nxt-panel nxt-p4-notice"><span class="nxt-p4-notice-ico" aria-hidden="true"><i class="bi bi-pc-display"></i></span>
     <h2 class="nxt-p4-notice-title">…</h2><p>…</p><button type="button" class="nxt-btn">그래도 열기</button><p class="nxt-hint">…</p></div>
   [그래도 열기] = 뿌리에 data-nxt-open="true" (같은 탭에서 기억 - sols-canvas.js). 넓게 본 상태로 좁은 화면에 들어와도 편집기는 보인다. */
.nxt-light.nxt-sols-canvas .nxt-p4-notice { line-height: 1.6; }
.nxt-light.nxt-sols-canvas .nxt-p4-notice-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--nxt-tint); color: var(--nxt-primary); font-size: 24px; line-height: 1; }
.nxt-light.nxt-sols-canvas .nxt-p4-notice-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--nxt-text); }
.nxt-light.nxt-sols-canvas .nxt-p4-notice > p { margin: 0; font-size: 15px; color: var(--nxt-text-2); }
.nxt-light.nxt-sols-canvas .nxt-p4-notice > .nxt-hint { font-size: 13px; color: var(--nxt-text-3); }
@media (max-width: 880px) {
    .nxt-light.nxt-sols-canvas:not([data-nxt-open="true"]):not(.is-nxt-max) > .nxt-p4-editor { display: none; }
    .nxt-light.nxt-sols-canvas[data-nxt-open="true"] > .nxt-p4-notice { display: none; }
}

/* ==========================================================================================
   ④ 편집기 셸 · 머리 줄
   ========================================================================================== */
/* 셸 : 편집기 상자(세로 flex)에서 넓게 보기 줄을 뺀 나머지를 쓴다.
   isolation : 셸 안의 z-index(펼침 목록 60 · 내려받기 목록 50 · 떠 있는 도구줄 20)가 틀 헤더(50)와 겨루지 않게 가둔다. 창 · 토스트는 셸 밖(뿌리 바로 아래)이라 틀 위에 뜬다.
   line-height:normal : 공통 밝은 규칙의 1.5 를 편집기 안에서만 되돌린다 - 단추 · 칸이 촘촘하게 놓인다. */
.nxt-sols-canvas .cv-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; line-height: normal; }
.nxt-sols-canvas .cv-shell button { font-family: inherit; }

/* 스크롤 막대 (편집기 안에서만 가늘게) */
.nxt-sols-canvas .cv-shell,
.nxt-sols-canvas .cv-shell * { scrollbar-width: thin; scrollbar-color: var(--nxt-field-line) transparent; }
.nxt-sols-canvas .cv-shell::-webkit-scrollbar,
.nxt-sols-canvas .cv-shell *::-webkit-scrollbar { width: 5px; height: 5px; }
.nxt-sols-canvas .cv-shell::-webkit-scrollbar-track,
.nxt-sols-canvas .cv-shell *::-webkit-scrollbar-track { background: transparent; }
.nxt-sols-canvas .cv-shell::-webkit-scrollbar-thumb,
.nxt-sols-canvas .cv-shell *::-webkit-scrollbar-thumb { background: var(--nxt-field-line); border-radius: 99px; }
.nxt-sols-canvas .cv-shell::-webkit-scrollbar-thumb:hover,
.nxt-sols-canvas .cv-shell *::-webkit-scrollbar-thumb:hover { background: var(--nxt-text-3); }
.nxt-sols-canvas .cv-shell::-webkit-scrollbar-corner,
.nxt-sols-canvas .cv-shell *::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 머리 줄 ---------- */
.nxt-sols-canvas .cv-header {
    height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: 0 12px; background: var(--nxt-panel); border-bottom: 1px solid var(--nxt-line-dk);
}
.nxt-sols-canvas .cv-header-center { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

/* ---------- 펼침 목록 (진짜 <select> 는 감추고 값 · change 이벤트만 쓴다. 이 단추 + 목록이 보이는 UI 다) ----------
   펼친 상태 = .cv-dropdown.open + 단추의 aria-expanded="true". 고른 항목 = .active + aria-pressed="true" */
.nxt-sols-canvas .cv-dropdown { position: relative; }
/* 크기 목록 단추 : 바탕 240px. 사용자 지정 칸이 함께 나와 머리 줄이 모자라면 줄어든다(글자는 말줄임) - 오른쪽의 [내려받기]가 밀려 잘리지 않게 */
.nxt-sols-canvas .cv-ratio-dropdown { flex: 0 1 240px; min-width: 120px; }
.nxt-sols-canvas .cv-font-dropdown { margin-bottom: 8px; }
.nxt-sols-canvas .cv-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    min-height: var(--nxt-cv-h); padding: 6px 12px; border-radius: 10px; border: 1px solid var(--nxt-field-line); background: var(--nxt-panel);
    color: var(--nxt-text); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
}
.nxt-sols-canvas .cv-dropdown-trigger:hover { border-color: var(--nxt-primary); background: var(--nxt-tint); }
.nxt-sols-canvas .cv-dropdown-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxt-sols-canvas .cv-dropdown-trigger i { color: var(--nxt-text-3); transition: transform .15s ease; flex-shrink: 0; }
.nxt-sols-canvas .cv-dropdown.open .cv-dropdown-trigger i { transform: rotate(180deg); }
.nxt-sols-canvas .cv-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--nxt-panel);
    border: 1px solid var(--nxt-line-dk); border-radius: 12px; padding: 6px; min-width: 100%; z-index: 60;
    box-shadow: 0 16px 32px -8px rgba(15,23,42,.28); max-height: 260px; overflow-y: auto;
}
.nxt-sols-canvas .cv-dropdown.open .cv-dropdown-menu { display: block; }
.nxt-sols-canvas .cv-dropdown-item {
    display: block; width: 100%; min-height: var(--nxt-cv-h); text-align: left; padding: 8px 10px; border-radius: 7px; border: none;
    background: none; color: var(--nxt-text); font-size: 14px; cursor: pointer; white-space: nowrap;
}
.nxt-sols-canvas .cv-dropdown-item:hover { background: var(--nxt-soft); }
.nxt-sols-canvas .cv-dropdown-item.active { background: var(--nxt-tint); color: var(--nxt-primary-dk); font-weight: 700; }
.nxt-sols-canvas .cv-dropdown-item:focus-visible { outline-offset: -3px; }
.nxt-sols-canvas .cv-dropdown-item.cv-font-pen { font-size: 16px; }      /* 손글씨 글꼴은 같은 크기에서 작게 보인다 */
.nxt-sols-canvas select.cv-native-hidden { display: none; }

/* 사용자 지정 크기 (크기 목록에서 "사용자 지정"을 골랐을 때만 - hidden) */
.nxt-sols-canvas .cv-custom-size { display: flex; align-items: center; gap: 6px; }
.nxt-sols-canvas .cv-custom-size input {
    width: 76px; min-height: var(--nxt-cv-h); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--nxt-field-line);
    background: var(--nxt-panel); color: var(--nxt-text); font-family: inherit; font-size: 14px;
}
.nxt-sols-canvas .cv-custom-size span { color: var(--nxt-text-3); font-size: 14px; }

/* 머리 줄 단추 */
.nxt-sols-canvas .cv-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nxt-sols-canvas .cv-btn {
    display: flex; align-items: center; gap: 6px; min-height: var(--nxt-cv-h); padding: 6px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--nxt-field-line); background: var(--nxt-panel); color: var(--nxt-text-2);
    font-size: 14px; font-weight: 700; white-space: nowrap; transition: all .15s ease;
}
.nxt-sols-canvas .cv-btn:hover:not(:disabled) { border-color: var(--nxt-primary); background: var(--nxt-tint); color: var(--nxt-primary-dk); }
.nxt-sols-canvas .cv-btn:disabled { border-color: var(--nxt-line-dk); background: var(--nxt-soft); color: var(--nxt-text-3); cursor: not-allowed; }
.nxt-sols-canvas .cv-btn.icon-only { justify-content: center; min-width: var(--nxt-cv-h); padding: 6px; }      /* 아이콘만 : 36 × 36 + aria-label */
.nxt-sols-canvas .cv-btn-main { background: var(--nxt-primary); color: #fff; border: 1px solid var(--nxt-primary); }
.nxt-sols-canvas .cv-btn-main:hover:not(:disabled) { border-color: var(--nxt-primary-dk); background: var(--nxt-primary-dk); color: #fff; }
.nxt-sols-canvas .cv-btn-main .bi-chevron-down { font-size: 13px; }
.nxt-sols-canvas .cv-download-wrap { position: relative; }
.nxt-sols-canvas .cv-download-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--nxt-panel);
    border: 1px solid var(--nxt-line-dk); border-radius: 10px; padding: 6px; min-width: 130px; z-index: 50;
    box-shadow: 0 12px 28px -8px rgba(15,23,42,.28);
}
.nxt-sols-canvas .cv-download-wrap.open .cv-download-menu { display: block; }
.nxt-sols-canvas .cv-download-menu button {
    display: block; width: 100%; min-height: var(--nxt-cv-h); text-align: left; padding: 8px 10px; border-radius: 7px; border: none;
    background: none; color: var(--nxt-text); font-size: 14px; white-space: nowrap; cursor: pointer;
}
.nxt-sols-canvas .cv-download-menu button:hover { background: var(--nxt-soft); }
.nxt-sols-canvas .cv-download-menu button:focus-visible { outline-offset: -3px; }

/* ==========================================================================================
   ⑤ 왼쪽 도구 패널
   ========================================================================================== */
.nxt-sols-canvas .cv-body { display: flex; flex: 1 1 auto; min-height: 0; }
.nxt-sols-canvas .cv-left {
    width: 268px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--nxt-panel);
    border-right: 1px solid var(--nxt-line-dk);
}
/* 탭 4개 : div[role=tablist] > button[role=tab].active[aria-selected] (칸 폭은 글자 길이에 맞춰 나눈다 - "도형/배경"이 가장 넓다) */
.nxt-sols-canvas .cv-left-tabs { display: flex; border-bottom: 1px solid var(--nxt-line-dk); flex-shrink: 0; overflow-x: auto; }
.nxt-sols-canvas .cv-left-tabs::-webkit-scrollbar { height: 0; }
.nxt-sols-canvas .cv-left-tabs button {
    flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 2px; border: none; background: none; color: var(--nxt-text-3); cursor: pointer;
    font-size: var(--nxt-cv-fs); font-weight: 700; border-bottom: 2px solid transparent; transition: all .15s ease; white-space: nowrap;
}
.nxt-sols-canvas .cv-left-tabs button:hover { color: var(--nxt-text); }
.nxt-sols-canvas .cv-left-tabs button.active { color: var(--nxt-primary-dk); border-bottom-color: var(--nxt-primary); background: var(--nxt-tint); }
.nxt-sols-canvas .cv-left-tabs button:focus-visible { outline-offset: -3px; }
.nxt-sols-canvas .cv-left-panel { display: none; flex: 1; overflow-y: auto; padding: 16px; }
.nxt-sols-canvas .cv-left-panel.active { display: block; }
.nxt-sols-canvas .cv-panel-title { font-size: var(--nxt-cv-fs); font-weight: 700; color: var(--nxt-text-3); margin: 0 0 10px; }
.nxt-sols-canvas .cv-panel-title-next { margin-top: 14px; }

/* 템플릿 카드 : button.cv-template-card > span.tpl-name + span.tpl-desc */
.nxt-sols-canvas .cv-template-card {
    display: block; width: 100%; min-height: 64px; margin: 0 0 10px; padding: 16px 12px; border: 1px solid var(--nxt-field-line); border-radius: 14px;
    background: var(--nxt-panel); color: inherit; font: inherit; line-height: 1.4; text-align: left; cursor: pointer; transition: all .15s ease;
}
.nxt-sols-canvas .cv-template-card:hover { background: var(--nxt-tint); border-color: var(--nxt-primary); }
.nxt-sols-canvas .cv-template-card .tpl-name { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--nxt-text); }
.nxt-sols-canvas .cv-template-card .tpl-name .bi { margin-right: 6px; color: var(--nxt-primary); }
.nxt-sols-canvas .cv-template-card .tpl-desc { display: block; font-size: var(--nxt-cv-fs); color: var(--nxt-text-3); }

/* 글자 · 프레임 추가 단추 : button.cv-block-btn > span.ico + span.cv-block-text(span.cv-block-name + span.cv-block-sub) */
.nxt-sols-canvas .cv-block-btn {
    width: 100%; min-height: 44px; padding: 10px 14px; margin-bottom: 7px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--nxt-field-line); background: var(--nxt-panel); color: var(--nxt-text);
    font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left; display: flex; align-items: center; gap: 10px;
    transition: all .15s ease;
}
.nxt-sols-canvas .cv-block-btn:hover { background: var(--nxt-tint); border-color: var(--nxt-primary); }
/* 틀의 .ico{width:1.25em;height:1.25em}(theme-daegu.css 의 SVG 아이콘 규칙)이 아이콘 칸(span.ico)에 내려온다 - 되돌린다 */
.nxt-sols-canvas .cv-block-btn .ico { width: auto; height: auto; font-size: 1.1rem; flex-shrink: 0; color: var(--nxt-primary); }
.nxt-sols-canvas .cv-block-text { min-width: 0; }
.nxt-sols-canvas .cv-block-name { display: block; font-size: 14px; font-weight: 700; }
.nxt-sols-canvas .cv-block-sub { display: block; font-size: var(--nxt-cv-fs); font-weight: 400; color: var(--nxt-text-3); }
.nxt-sols-canvas .cv-frame-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nxt-sols-canvas .cv-frame-row .cv-block-btn { flex: 1; min-width: calc(50% - 3px); margin-bottom: 0; padding: 10px 6px; justify-content: center; }
.nxt-sols-canvas .cv-frame-row .cv-frame-wide { flex: none; width: 100%; }

/* 도형 추가 (아이콘만 - aria-label) */
.nxt-sols-canvas .cv-shape-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; }
.nxt-sols-canvas .cv-shape-grid button {
    aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--nxt-field-line); background: var(--nxt-panel);
    color: var(--nxt-text-2); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nxt-sols-canvas .cv-shape-grid button:hover { background: var(--nxt-tint); border-color: var(--nxt-primary); color: var(--nxt-primary-dk); }

/* 이미지 올리기 칸 : button.cv-dropzone (끌어놓는 동안 .drag-over) */
.nxt-sols-canvas .cv-dropzone {
    display: block; width: 100%; margin: 0 0 14px; padding: 30px 12px; border: 2px dashed var(--nxt-field-line); border-radius: 14px; background: var(--nxt-soft);
    color: var(--nxt-text-3); font: inherit; font-size: var(--nxt-cv-fs); line-height: 1.6; text-align: center; cursor: pointer; transition: all .15s ease;
}
.nxt-sols-canvas .cv-dropzone:hover, .nxt-sols-canvas .cv-dropzone.drag-over { border-color: var(--nxt-primary); color: var(--nxt-primary-dk); background: var(--nxt-tint); }
.nxt-sols-canvas .cv-dropzone > .bi { display: block; margin-bottom: 4px; font-size: 1.8rem; line-height: 1.2; }
.nxt-sols-canvas .cv-dropzone > span { display: block; }

/* 캔버스 배경 견본 (36 × 36 + aria-label) */
.nxt-sols-canvas .cv-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nxt-sols-canvas .cv-swatch { width: var(--nxt-cv-h); height: var(--nxt-cv-h); padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid var(--nxt-field-line); }
.nxt-sols-canvas .cv-swatch:hover { border-color: var(--nxt-text); }
.nxt-sols-canvas .cv-swatch-custom { width: var(--nxt-cv-h); height: var(--nxt-cv-h); border-radius: 8px; border: 1px solid var(--nxt-field-line); padding: 0; cursor: pointer; background: none; }

/* ==========================================================================================
   ⑥ 가운데 캔버스
   ========================================================================================== */
/* 아트보드 바깥 바탕 = 밝은 회색. 아트보드(.cv-canvas-wrap)는 1px 띠 + 그림자로 구분한다 - 바탕이 흰색이어도, 회색이어도 가장자리가 보인다 */
.nxt-sols-canvas .cv-center {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative;
    background: var(--nxt-line);
    overflow: hidden;
}
.nxt-sols-canvas .cv-canvas-wrap { position: relative; box-shadow: 0 0 0 1px var(--nxt-field-line), 0 16px 40px -12px rgba(15,23,42,.4); }
.nxt-sols-canvas #guideOverlay { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; }
/* 고른 것 위에 뜨는 도구줄 (스크립트가 hidden 과 left · top 을 바꾼다) */
.nxt-sols-canvas .cv-floating-toolbar {
    display: flex; position: absolute; z-index: 20; transform: translate(-50%, -100%);
    background: var(--nxt-panel); border: 1px solid var(--nxt-line-dk); border-radius: 10px; padding: 5px;
    gap: 3px; box-shadow: 0 10px 24px -6px rgba(15,23,42,.3);
}
.nxt-sols-canvas .cv-floating-toolbar button {
    width: var(--nxt-cv-h); height: var(--nxt-cv-h); padding: 0; border-radius: 7px; border: none; background: none; color: var(--nxt-text-2);
    cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.nxt-sols-canvas .cv-floating-toolbar button:hover { background: var(--nxt-tint); color: var(--nxt-primary-dk); }
.nxt-sols-canvas .cv-floating-toolbar button:focus-visible { outline-offset: -3px; }

/* ==========================================================================================
   ⑦ 오른쪽 속성 패널
   ========================================================================================== */
.nxt-sols-canvas .cv-right {
    width: 288px; flex-shrink: 0; background: var(--nxt-panel); border-left: 1px solid var(--nxt-line-dk);
    overflow-y: auto; padding: 18px;
}
.nxt-sols-canvas .rpanel-section { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--nxt-line-dk); }
.nxt-sols-canvas .rpanel-section:last-child { border-bottom: none; margin-bottom: 0; }
.nxt-sols-canvas .rpanel-title { font-size: var(--nxt-cv-fs); font-weight: 700; color: var(--nxt-primary-dk); margin-bottom: 8px; }
.nxt-sols-canvas .rpanel-title .bi { margin-right: 4px; }
.nxt-sols-canvas .rpanel-title-sub { color: var(--nxt-text-3); }
.nxt-sols-canvas .rpanel-divider { height: 1px; background: var(--nxt-line-dk); margin: 8px 0; }

/* 한 줄 : 이름(span.ctrl-label) + 칸 */
.nxt-sols-canvas .ctrl-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.nxt-sols-canvas .ctrl-row-gap { margin-top: 4px; }
.nxt-sols-canvas .ctrl-label { font-size: var(--nxt-cv-fs); color: var(--nxt-text-3); min-width: 56px; flex-shrink: 0; }
.nxt-sols-canvas .ctrl-label-s { min-width: 14px; text-align: center; }      /* 한 글자 이름(Y · H · 색) */
/* 숫자 칸은 줄의 남는 폭을 나눠 쓴다(바탕 60px). 고정 60px 로 두면 14px 글자 + 브라우저가 늘 비워 두는 증감 단추 자리 때문에 네 자리 수(1080)가 잘린다 */
.nxt-sols-canvas .ctrl-input {
    flex: 1 1 60px; width: 60px; min-width: 0; min-height: var(--nxt-cv-h); padding: 4px 8px; background: var(--nxt-panel); border: 1px solid var(--nxt-field-line); border-radius: 7px;
    color: var(--nxt-text); font-family: inherit; font-size: 14px; text-align: right;
}
.nxt-sols-canvas .ctrl-input:focus { border-color: var(--nxt-primary); }
.nxt-sols-canvas .ctrl-range { flex: 1; min-width: 0; height: var(--nxt-cv-h); margin: 0; accent-color: var(--nxt-primary); cursor: pointer; }
.nxt-sols-canvas .ctrl-val { font-size: var(--nxt-cv-fs); color: var(--nxt-primary-dk); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.nxt-sols-canvas .ctrl-color { width: var(--nxt-cv-h); height: var(--nxt-cv-h); border-radius: 6px; border: 1px solid var(--nxt-field-line); padding: 2px; cursor: pointer; background: none; flex-shrink: 0; }
.nxt-sols-canvas .ctrl-select {
    flex: 1; min-width: 0; min-height: var(--nxt-cv-h); padding: 4px 8px; background: var(--nxt-panel); border: 1px solid var(--nxt-field-line); border-radius: 7px;
    color: var(--nxt-text); font-family: inherit; font-size: 14px; cursor: pointer;
}
.nxt-sols-canvas .ctrl-select:focus { border-color: var(--nxt-primary); }

/* 정렬 · 레이어 순서 단추 묶음 (아이콘만 - aria-label. 묶음에 role=group + aria-label) */
.nxt-sols-canvas .align-group { flex: 1 1 auto; display: flex; gap: 4px; flex-wrap: nowrap; }
.nxt-sols-canvas .align-group-layer { margin-bottom: 8px; }
.nxt-sols-canvas .align-btn {
    flex: 1; min-width: 0; height: var(--nxt-cv-h); margin: 0; padding: 0; background: var(--nxt-panel); border: 1px solid var(--nxt-field-line); border-radius: 6px;
    color: var(--nxt-text-2); font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.nxt-sols-canvas .align-btn:hover { background: var(--nxt-tint); color: var(--nxt-primary-dk); border-color: var(--nxt-primary); }

/* 서식 단추 (켠 것 = .active + aria-pressed="true") */
.nxt-sols-canvas .cv-icon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 6px; }
.nxt-sols-canvas .cv-icon-grid.cols2 { grid-template-columns: repeat(2,1fr); }
.nxt-sols-canvas .cv-icon-btn {
    min-height: var(--nxt-cv-h); padding: 8px 4px; border-radius: 9px; border: 1px solid var(--nxt-field-line); background: var(--nxt-panel);
    color: var(--nxt-text-2); cursor: pointer; font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
}
.nxt-sols-canvas .cv-icon-btn:hover { background: var(--nxt-tint); border-color: var(--nxt-primary); color: var(--nxt-primary-dk); }
.nxt-sols-canvas .cv-icon-btn.active { background: var(--nxt-primary); color: #fff; border-color: var(--nxt-primary); }

/* 속성 단추 (글자 있는 것) */
.nxt-sols-canvas .ctrl-btn {
    display: block; width: 100%; min-height: var(--nxt-cv-h); margin-bottom: 5px; padding: 6px 10px; background: var(--nxt-panel); border: 1px solid var(--nxt-field-line);
    border-radius: 7px; color: var(--nxt-text-2); font-size: 14px; line-height: 1.4;
    text-align: left; cursor: pointer; transition: background .12s;
}
.nxt-sols-canvas .ctrl-btn:last-child { margin-bottom: 0; }
.nxt-sols-canvas .ctrl-btn:hover { background: var(--nxt-tint); border-color: var(--nxt-primary); color: var(--nxt-primary-dk); }
/* 강조(단색 배경 지우기) = 청록 5.5 / 위험(삭제) = 빨강 6.6 */
.nxt-sols-canvas .ctrl-btn.primary { color: var(--nxt-ok); border-color: var(--nxt-ok); }
.nxt-sols-canvas .ctrl-btn.primary:hover { background: var(--nxt-soft); border-color: var(--nxt-ok); color: var(--nxt-ok); }
.nxt-sols-canvas .ctrl-btn.danger { color: var(--nxt-danger); border-color: var(--nxt-danger); }
.nxt-sols-canvas .ctrl-btn.danger:hover { background: var(--nxt-danger-50); border-color: var(--nxt-danger); color: var(--nxt-danger); }
.nxt-sols-canvas .ctrl-btn-row { display: flex; gap: 5px; margin-bottom: 5px; }
.nxt-sols-canvas .ctrl-btn-row .ctrl-btn { min-width: 0; margin-bottom: 0; }

/* ==========================================================================================
   ⑧ 레이어 목록
   ==========================================================================================
   <li class="cv-layer-item(.selected)" data-idx="n">
     <span class="cv-layer-handle" aria-hidden="true"><i class="bi bi-grip-vertical"></i></span>       끌어서 순서를 바꾼다(포인터 전용 - 키보드는 "레이어 순서" 단추)
     <span class="cv-layer-ico" aria-hidden="true"><i class="bi bi-fonts"></i></span>                  종류 아이콘
     <button type="button" class="cv-layer-nm" aria-current="true">텍스트 · 가을 플리마켓</button>       누르면 그 객체를 고른다(키보드로 객체를 고르는 길)
     <button type="button" class="cv-layer-eye" aria-label="… 숨기기"><i class="bi bi-eye" aria-hidden="true"></i></button>
   </li> */
.nxt-sols-canvas .cv-layer-panel { margin-top: 14px; border-top: 1px solid var(--nxt-line-dk); padding-top: 12px; }
.nxt-sols-canvas .cv-layer-list { list-style: none; padding: 0; margin: 0; }
.nxt-sols-canvas .cv-layer-item {
    display: flex; align-items: center; gap: 6px; min-height: var(--nxt-cv-h); padding: 0 0 0 8px; border-radius: 8px;
    cursor: pointer; transition: background .1s; margin-bottom: 2px; user-select: none;
}
.nxt-sols-canvas .cv-layer-item:hover { background: var(--nxt-soft); }
.nxt-sols-canvas .cv-layer-item.selected { background: var(--nxt-tint); box-shadow: inset 2px 0 0 var(--nxt-primary); }
.nxt-sols-canvas .cv-layer-handle { flex: none; color: var(--nxt-text-3); cursor: grab; font-size: .9rem; line-height: 1; }
.nxt-sols-canvas .cv-layer-ico { flex: none; font-size: .9rem; line-height: 1; color: var(--nxt-text-2); }
.nxt-sols-canvas .cv-layer-nm {
    flex: 1; align-self: stretch; min-width: 0; min-height: var(--nxt-cv-h); margin: 0; padding: 0 4px; border: 0; border-radius: 6px; background: none;
    color: var(--nxt-text-2); font: inherit; font-size: var(--nxt-cv-fs); text-align: left; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nxt-sols-canvas .cv-layer-nm:focus-visible { outline-offset: -3px; }
.nxt-sols-canvas .cv-layer-eye {
    flex: none; display: grid; place-items: center; width: var(--nxt-cv-h); height: var(--nxt-cv-h); padding: 0; border: none; border-radius: 6px; background: none;
    color: var(--nxt-text-3); font-size: 15px; line-height: 1; cursor: pointer;
}
.nxt-sols-canvas .cv-layer-eye:hover { color: var(--nxt-text); }
.nxt-sols-canvas .cv-layer-eye:focus-visible { outline-offset: -3px; }
.nxt-sols-canvas .cv-layer-empty { font-size: var(--nxt-cv-fs); line-height: 1.5; color: var(--nxt-text-3); text-align: center; padding: 12px 0; }

/* ==========================================================================================
   ⑨ 좁은 화면 (880px 이하 - [그래도 열기] 뒤의 편집기)
   ========================================================================================== */
/* 좌 · 우 패널(줄지 않는다)에 밀려 캔버스 칸의 폭이 0 이 되지 않게 머리 줄 · 본문에 최소 폭을 주고, 셸 안에서 가로로 밀어 본다.
   편집기 상자가 overflow:hidden 이라 문서에는 가로 스크롤이 생기지 않는다(넓게 보기 줄은 셸 밖이라 밀리지 않는다). */
@media (max-width: 880px) {
    .nxt-sols-canvas .cv-left { width: 220px; }
    .nxt-sols-canvas .cv-right { width: 240px; }
    .nxt-sols-canvas .cv-shell { overflow-x: auto; }
    .nxt-sols-canvas .cv-header, .nxt-sols-canvas .cv-body { min-width: 860px; }
    /* 속성 패널이 240px 일 때 : 이름 칸과 숫자 칸의 안 여백을 조금 줄여 세 자리 수(X · Y · W · H)가 잘리지 않게 한다 */
    .nxt-sols-canvas .ctrl-label { min-width: 44px; }
    .nxt-sols-canvas .ctrl-label-s { min-width: 14px; }
    .nxt-sols-canvas .ctrl-input { padding: 4px 6px; }
    /* 두 개가 나란한 단추("좌우 반전" · "상하 반전")가 두 줄로 꺾이지 않게 */
    .nxt-sols-canvas .ctrl-btn-row .ctrl-btn { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}