/* ─────────────────────────────────────────────────────────────────────────────
   편집기 좌측 UI 정제 (레일 + 서브 패널) — 데스크톱 전용

   왜 별도 파일인가
   ---------------
   모바일 레이아웃(Editor.cshtml 의 @media (pointer: coarse) and (max-width:1400px)
   블록들)은 .side-menu / .sub-menu 의 좌표·크기 위에 촘촘히 쌓여 있다.
   기존 규칙을 직접 고치면 그 가정이 조용히 무너진다. 그래서

     1) 이 파일 전체를 모바일 게이트의 여집합으로 감싸고
        → @media (pointer: fine), (min-width: 1401px)
     2) Editor.cshtml 의 인라인 <style> "뒤"에 link 를 걸어 소스 순서로 이긴다.

   되돌리려면 link 한 줄만 지우면 된다.

   디자인 방향
   ----------
   기존은 모든 표면(버튼·입력·스와치·구분선)이 인디고 테두리 + 글로우 +
   hover 시 튀어오르는 transform 을 갖고 있어서 위계가 없고 산만했다.
   여기서는
     · 테두리를 중성 회색으로 되돌리고
     · 인디고(--ed-accent)는 "활성 상태 / 포커스 / 주요 버튼"에만 남기고
     · hover 는 배경 톤 변화만 (튀어오르지 않는다)
   ───────────────────────────────────────────────────────────────────────────── */

@media (pointer: fine), (min-width: 1401px) {

    :root {
        /* 표면: 레일(가장 어두움) → 패널 → 카드 → 입력 필드 순으로 밝아진다.
           레이어가 눈에 보여야 "어디가 도구고 어디가 설정인지" 구분된다.

           예전 값(#131924 / 카드 rgba(255,255,255,.028) / #1b2230)은 네 층이
           8단계 안에 몰려 있어서, 카드가 있는지조차 눈에 안 들어오고 패널 전체가
           까만 덩어리로 보였다("묻혀 있다"는 인상의 정체).
           밝기를 올리는 대신 층 사이 간격을 벌린다 — 전체를 밝히면 흰 캔버스
           옆에서 회색 판때기가 되고, 그게 더 촌스럽다. */
        --ed-rail-bg: #0a0e15;
        --ed-panel-bg: #121824;
        --ed-card-bg: #1a2130;      /* 패널 위에 얹히는 설정 묶음 */
        --ed-field-bg: #232c3c;     /* 그 안에서 실제로 만지는 것 */
        --ed-field-bg-hover: #2b3547;

        /* 카드 윗변에 한 줄 하이라이트. 그림자는 어두운 배경에서 거의 안 보이지만
           이 1px 은 확실히 '얹혀 있다'로 읽힌다. 과하면 촌스러우니 5%만. */
        --ed-card-lift: inset 0 1px 0 rgba(255, 255, 255, 0.05);

        /* 선: 인디고가 아니라 중성. 이게 '촌스러움'의 가장 큰 원인이었다. */
        --ed-line: rgba(148, 163, 184, 0.2);
        --ed-line-soft: rgba(148, 163, 184, 0.14);

        --ed-text: #e2e8f0;
        --ed-text-dim: #94a3b8;
        /* #6b7a90 은 패널 배경(#131924) 위에서 4:1 언저리라 라벨·설명이 전부
           "어둡다"는 인상으로 뭉쳤다. 한 단계만 올린다(위계는 그대로 유지된다). */
        --ed-text-faint: #8695ab;

        --ed-accent: #6366f1;
        --ed-accent-hi: #818cf8;
        --ed-accent-text: #c7d2fe;
        --ed-accent-weak: rgba(99, 102, 241, 0.13);
    }

    /* ── 좌측 레일 ─────────────────────────────────────────────────────────── */

    .side-menu {
        width: 84px;
        padding: 10px 8px;
        background: var(--ed-rail-bg);
        border-right: 1px solid var(--ed-line);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .side-menu .menu-item {
        min-height: 62px;          /* 라벨이 1줄이든 2줄이든 높이가 같아야 리듬이 산다 */
        padding: 10px 4px;
        margin: 0;
        gap: 7px;
        border: 0;                 /* 알약 + 구분선이 겹쳐 있던 것을 알약만 남긴다 */
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--ed-text-dim);
        box-shadow: none;
        transition: background 0.16s ease, color 0.16s ease;
    }

    /* 전역 svg { filter: drop-shadow } 가 아이콘을 탁하게 만들고 있었다 */
    .side-menu .menu-item svg,
    .side-menu .menu-item:hover svg {
        width: 22px;
        height: 22px;
        filter: none;
        transition: none;
    }

    .side-menu .menu-item:hover {
        background: rgba(255, 255, 255, 0.055);
        color: var(--ed-text);
        transform: none;           /* translateX(2px) 로 글자가 흔들리던 것 제거 */
        box-shadow: none;
    }

    .side-menu .menu-item.active {
        background: var(--ed-accent-weak);
        color: var(--ed-accent-text);
        box-shadow: none;
        font-weight: 600;
    }

    /* 활성 표시 막대: 기존엔 left:-8px 이라 레일 밖으로 나가 잘려 보였다.
       레일 안쪽 왼쪽 끝(패딩 8px 만큼 당겨서)에 정확히 붙인다. */
    .side-menu .menu-item.active::before {
        left: -8px;
        width: 3px;
        height: 24px;
        border-radius: 0 3px 3px 0;
        background: var(--ed-accent-hi);
        box-shadow: none;
    }

    /* ── 서브 패널 ─────────────────────────────────────────────────────────── */

    .sub-menu {
        background: var(--ed-panel-bg);      /* 레일보다 한 톤 밝게 — 층이 보인다 */
        border-right: 1px solid var(--ed-line);
        box-shadow: none;
    }

    .sub-menu.active {
        width: 320px;
        padding: 20px 16px 32px;
    }

    .sub-menu::-webkit-scrollbar {
        width: 8px;
    }

    .sub-menu::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.22);
        border-radius: 4px;
    }

    .sub-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.38);
    }

    /* 라벨 — 작고 조용하게. 값(입력칸)이 주인공이어야 한다. */
    .sub-menu .form-label {
        display: block;
        margin-bottom: 6px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--ed-text-faint);
    }

    .sub-menu .mb-3 {
        margin-bottom: 16px !important;
    }

    /* 부트스트랩의 hr 은 border 가 아니라 height:1px + background-color:currentColor 로
       그려진다. opacity(.25)만 걷어내면 본문색(#e5e7eb)이 그대로 드러나 흰 줄이 된다.
       background 를 꺼야 실제로 얇은 회색 선이 된다. */
    /* 작은 컨트롤 둘을 한 줄에. (기본값 display:contents 를 여기서만 되돌린다)
       한쪽이 JS 로 숨겨지면 남은 쪽이 자연스럽게 폭을 다 쓴다. */
    .sub-menu .ed-field-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .sub-menu .ed-field-row > .mb-3 {
        flex: 1 1 0;
        min-width: 0;   /* flex 기본 min-width:auto 라 내용보다 안 줄어든다 */
    }

    .sub-menu hr {
        margin: 18px 0;
        height: 0 !important;
        border: 0;
        border-top: 1px solid var(--ed-line-soft) !important;
        background: transparent !important;
        opacity: 1;
    }

    /* 입력 / 셀렉트 */
    .sub-menu .form-control,
    .sub-menu .form-select {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
        background: var(--ed-field-bg) !important;
        border: 1px solid var(--ed-line) !important;
        border-radius: 8px;
        color: var(--ed-text) !important;
        box-shadow: none !important;
    }

    .sub-menu .form-control:hover,
    .sub-menu .form-select:hover {
        border-color: rgba(148, 163, 184, 0.3) !important;
    }

    .sub-menu .form-control:focus,
    .sub-menu .form-select:focus {
        background: var(--ed-field-bg) !important;
        border-color: var(--ed-accent) !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22) !important;
    }

    .sub-menu .form-control-sm,
    .sub-menu .form-select-sm {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12.5px;
    }

    /* 폰트 선택 (커스텀 드롭다운) — form-select 와 같은 옷을 입힌다 */
    .sub-menu .custom-font-select-trigger {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
        background: var(--ed-field-bg) !important;
        border: 1px solid var(--ed-line) !important;
        border-radius: 8px;
        color: var(--ed-text) !important;
        box-shadow: none !important;
    }

    .sub-menu .custom-font-select-trigger:hover {
        border-color: rgba(148, 163, 184, 0.3) !important;
    }

    .sub-menu .custom-font-select-options {
        background: #10151f !important;
        border: 1px solid var(--ed-line) !important;
        border-radius: 8px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    }

    .sub-menu .custom-font-option:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .sub-menu .custom-font-option.selected {
        background: var(--ed-accent-weak) !important;
        color: var(--ed-accent-text) !important;
    }

    /* ── 버튼 위계 ─────────────────────────────────────────────────────────────
       기존: btn-secondary(추가·업로드 = 진짜 주요 액션)는 회색인데
             btn-primary(그라데이션 적용 = 보조)는 보라 그라데이션 + 글로우 →
             위계가 뒤집혀 있었다.
       변경: 패널 안 버튼을 전부 같은 톤의 조용한 표면으로 맞추고,
             강조는 hover 의 인디고 테두리와 btn-primary 의 채움으로만 준다. */

    .sub-menu .btn {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.01em;
        border-radius: 8px;
        box-shadow: none !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .sub-menu .btn:hover,
    .sub-menu .btn:active {
        transform: none !important;   /* translateY(-2px) scale(1.02) 제거 */
    }

    .sub-menu .btn-secondary {
        padding: 9px 14px;
        background: var(--ed-field-bg) !important;
        border: 1px solid var(--ed-line) !important;
        color: var(--ed-text) !important;
        font-weight: 500;
        overflow: visible;
    }

    /* btn-secondary 의 광택 스윕(::before) — 정적인 패널에서는 소음이다 */
    .sub-menu .btn-secondary::before {
        display: none;
    }

    .sub-menu .btn-secondary:hover {
        background: var(--ed-field-bg-hover) !important;
        border-color: rgba(99, 102, 241, 0.5) !important;
        color: #fff !important;
    }

    /* 1단계 — 그 패널의 주된 행동(추가/업로드). 패널당 하나만.
       도형 패널처럼 동등한 선택지가 여러 개인 곳에는 일부러 두지 않는다
       (넷 다 강조하면 강조가 아니다). */
    .sub-menu .ed-primary-action {
        background: var(--ed-accent) !important;
        border-color: var(--ed-accent) !important;
        color: #fff !important;
        font-weight: 600;
    }

    .sub-menu .ed-primary-action:hover {
        background: var(--ed-accent-hi) !important;
        border-color: var(--ed-accent-hi) !important;
        color: #fff !important;
    }

    /* 2단계 — "선택한 것에 적용" 류. 채우지 않고 톤으로만 강조한다.
       예전엔 이쪽이 보라 그라데이션 + 글로우라 정작 주된 행동(텍스트 추가)보다
       더 크게 보이는 위계 역전이 있었다. */
    .sub-menu .btn-primary {
        background: rgba(99, 102, 241, 0.16) !important;
        border: 1px solid rgba(99, 102, 241, 0.5) !important;
        color: var(--ed-accent-text) !important;
    }

    .sub-menu .btn-primary:hover {
        background: rgba(99, 102, 241, 0.28) !important;
        border-color: var(--ed-accent-hi) !important;
        color: #e0e7ff !important;
    }

    .sub-menu .btn-primary:disabled,
    .sub-menu .btn-primary[disabled] {
        background: var(--ed-field-bg) !important;
        border-color: var(--ed-line) !important;
        color: var(--ed-text-faint) !important;
        opacity: 1;
    }

    /* 아웃라인 버튼(배경제거·캐릭터화·크롭·지우개…) — 색상별로 제각각이던 것을
       하나의 중성 테두리로 통일하고, 의미색은 아이콘·글자에만 남긴다. */
    .sub-menu .btn-outline-secondary,
    .sub-menu .btn-outline-primary,
    .sub-menu .btn-outline-info,
    .sub-menu .btn-outline-warning,
    .sub-menu .btn-outline-danger {
        background: transparent !important;
        border: 1px solid var(--ed-line) !important;
        color: var(--ed-text-dim) !important;
    }

    .sub-menu .btn-outline-secondary:hover,
    .sub-menu .btn-outline-primary:hover,
    .sub-menu .btn-outline-info:hover,
    .sub-menu .btn-outline-warning:hover,
    .sub-menu .btn-outline-danger:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(148, 163, 184, 0.34) !important;
        color: var(--ed-text) !important;
    }

    .sub-menu .btn-outline-secondary:disabled,
    .sub-menu .btn-outline-primary:disabled,
    .sub-menu .btn-outline-info:disabled,
    .sub-menu .btn-outline-warning:disabled,
    .sub-menu .btn-outline-danger:disabled {
        opacity: 0.42;
    }

    /* ── 색 관련 컨트롤 ────────────────────────────────────────────────────── */

    .sub-menu .color-swatch-container {
        flex: 1;
        margin-right: 8px;
        padding: 8px;
        background: var(--ed-field-bg);
        border: 1px solid var(--ed-line);
        border-radius: 8px;
        color: var(--ed-text-dim);
        font-size: 11.5px;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .sub-menu .color-swatch-container:last-child {
        margin-right: 0;
    }

    .sub-menu .color-swatch-container:hover {
        background: var(--ed-field-bg-hover);
        border-color: rgba(148, 163, 184, 0.3);
        transform: none;
        box-shadow: none;
    }

    .sub-menu .color-swatch-container.active {
        padding: 8px;
        border-width: 1px;
        border-color: var(--ed-accent);
        background: var(--ed-accent-weak);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
        color: var(--ed-accent-text);
    }

    .sub-menu .color-swatch-preview {
        width: 100%;
        height: 26px;
        margin-top: 6px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        border-radius: 5px;
        box-shadow: none;
    }

    .sub-menu .grad-swatch {
        width: 34px;
        height: 32px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 7px;
    }

    .sub-menu .grad-swatch:hover {
        border-color: var(--ed-accent-hi);
        transform: none;
    }

    .sub-menu .grad-swatch.grad-swatch-active {
        border-color: var(--ed-accent-hi);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }

    /* ── 색상 팔레트 ───────────────────────────────────────────────────────────
       문제였던 것
         · 스와치 192개가 11.75×14px 로 잘게 깔려 있고 hover 에 scale(1.1)+글로우가
           걸려 있어, 마우스를 올릴 때마다 격자가 들썩였다(고르기도 어렵다).
         · 미리보기 바가 220px 고정 + 이중 그림자라 패널 폭과 어긋나고 혼자 튀었다.
         · CMYK 입력칸만 #475569 에 인디고 테두리라 다른 입력칸과 다른 옷을 입고 있었다.
       방향: 스와치는 하나의 '색 시트'로, 나머지는 패널의 공통 표면 규칙으로 되돌린다. */

    .sub-menu #custom-color-picker {
        padding: 12px;
        background: var(--ed-card-bg);
        border: 1px solid var(--ed-line);
        border-radius: 10px;
        box-shadow: var(--ed-card-lift);
    }

    .sub-menu #custom-color-picker .ed-picker-title {
        margin-bottom: 10px;
    }

    /* iro.js 는 지금 이 페이지에서 로드되지 않아 이 컨테이너가 늘 비어 있다.
       (남겨는 두되) 비어 있을 때 여백까지 차지해 제목과 팔레트 사이가 뜨지 않게 한다. */
    .sub-menu #iro-cmyk-picker:not(:empty) {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
    }

    /* 색 시트.
       마크업이 flex column-wrap + 인라인 고정 크기(188×168)라 패널 폭과 무관하게
       한쪽에 몰려 있었다. 12행 고정 그리드로 바꿔 폭을 꽉 채운다
       (192개 = 12행 × 16열 — 열 수는 그리드가 알아서 잡는다).

       #cmyk-color-grid 는 그 자체가 grid + justify-content:center 라, 안의 시트에
       width:100% 를 줘도 트랙이 min-content(0) 으로 접혀 2px 로 사라진다.
       바깥은 그냥 블록으로 돌린다. */
    .sub-menu #cmyk-color-grid {
        display: block;
    }

    .sub-menu .cmyk-color-palette {
        display: grid !important;
        grid-template-rows: repeat(12, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 12;
        overflow: hidden;          /* 바깥 모서리만 둥글게 — 시트 한 장으로 보인다 */
        border-radius: 8px;
        border: 1px solid var(--ed-line);
    }

    .sub-menu .cmyk-color-palette > div {
        width: auto !important;
        height: auto !important;
        transition: none;
    }

    /* hover 는 크기를 바꾸지 않는다. 격자가 움직이면 조준한 칸을 놓친다.
       안쪽 링만 그려 어느 칸인지 정확히 알려 준다. */
    .sub-menu .cmyk-color-palette > div:hover {
        position: relative;
        z-index: 2;
        transform: none !important;
        outline: 2px solid #fff;
        outline-offset: -2px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) !important;
    }

    /* 무채색 줄도 같은 시트 규격으로 */
    .sub-menu .black-pallet {
        gap: 0 !important;
        margin: 12px 0 0 !important;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--ed-line);
    }

    .sub-menu .black-pallet .scv-color-btn {
        flex: 1 1 0;
        width: auto !important;
        height: 22px !important;
        border: 0 !important;
        border-radius: 0 !important;
        transition: none;
    }

    .sub-menu .black-pallet .scv-color-btn:hover {
        position: relative;
        z-index: 2;
        transform: none !important;
        outline: 2px solid #fff;
        outline-offset: -2px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) !important;
    }

    /* 지금 색 미리보기 — 220px 고정이라 패널 폭과 어긋나 있던 것을 폭에 맞춘다.
       테두리는 흰색을 골랐을 때 띠가 배경에 녹지 않게 하는 역할도 한다. */
    .sub-menu .color-values {
        gap: 10px;
        margin-top: 14px;
    }

    .sub-menu .color-preview {
        width: 100%;
        height: 34px;
        margin: 0 0 2px;
        border: 1px solid var(--ed-line);
        border-radius: 8px;
        box-shadow: none;
    }

    .sub-menu .value-inputs {
        width: 100%;
    }

    .sub-menu .cmyk-input-group label {
        margin-bottom: 5px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--ed-text-faint);
    }

    /* newEditorApp.css 의 #custom-color-picker .value-inputs input 이 id 선택자를
       쓰고 있어서, 클래스만으로는 못 이긴다(입력칸만 혼자 #475569 로 남았던 이유). */
    .sub-menu #custom-color-picker .value-inputs input {
        max-width: none;
        padding: 6px 4px;
        background: var(--ed-field-bg);
        border: 1px solid var(--ed-line);
        border-radius: 7px;
        color: var(--ed-text);
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .sub-menu #custom-color-picker .value-inputs input:focus {
        border-color: var(--ed-accent);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
    }

    /* 스포이드 자체의 옷은 아래 '색 관련 컨트롤'의 .eyedropper-btn 이 입힌다.
       여기서는 무채색 줄 바로 아래 붙어 버리던 간격만 잡아 준다. */
    .sub-menu #custom-color-picker .eyedropper-btn {
        margin: 12px 0 0;
    }

    .sub-menu .eyedropper-btn {
        background: var(--ed-field-bg);
        border: 1px solid var(--ed-line);
        color: var(--ed-text-dim);
        font-weight: 500;
    }

    .sub-menu .eyedropper-btn:hover {
        background: var(--ed-field-bg-hover);
        border-color: rgba(148, 163, 184, 0.34);
        color: var(--ed-text);
    }

    .sub-menu .eyedropper-btn.active {
        background: var(--ed-accent);
        border-color: var(--ed-accent);
        color: #fff;
        box-shadow: none;
    }

    /* ── 보조 텍스트 / 안내 ────────────────────────────────────────────────── */

    .sub-menu .form-text {
        font-size: 11.5px !important;
        line-height: 1.55;
        color: var(--ed-text-faint) !important;
    }

    /* 주황 경고문이 본문만큼 커서 시선을 뺏고 있었다.
       한 톤 낮추고 왼쪽에 얇은 띠로 '주의'만 표시한다. */
    .sub-menu .text-stroke-warning {
        margin-top: 8px;
        padding: 7px 9px;
        border-left: 2px solid rgba(224, 122, 58, 0.65);
        border-radius: 0 6px 6px 0;
        background: rgba(224, 122, 58, 0.08);
        font-size: 11.5px !important;
        line-height: 1.5;
        color: #d8996d !important;
    }

    /* 슬라이더 트랙이 흰 막대로 보이던 이유:
       기존 규칙이 ::-webkit-slider-track 을 잡고 있었는데 부트스트랩(과 크롬)이
       실제로 쓰는 이름은 ::-webkit-slider-runnable-track 이라 아무 효과가 없었고,
       BS 기본값(밝은 회색)이 그대로 남아 있었다. */
    .sub-menu .form-range::-webkit-slider-runnable-track {
        height: 6px;
        background: rgba(148, 163, 184, 0.22);
        border: 0;
        border-radius: 3px;
        box-shadow: none;
    }

    .sub-menu .form-range::-moz-range-track {
        height: 6px;
        background: rgba(148, 163, 184, 0.22);
        border: 0;
        border-radius: 3px;
        box-shadow: none;
    }

    .sub-menu .form-range::-webkit-slider-thumb {
        width: 15px;
        height: 15px;
        margin-top: -4.5px;   /* (트랙 6px - 썸 15px) / 2 */
        background: var(--ed-accent-hi);
        border: 2px solid var(--ed-panel-bg);
        box-shadow: none;
    }

    .sub-menu .form-range::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background: var(--ed-accent-hi);
        border: 2px solid var(--ed-panel-bg);
        box-shadow: none;
    }

    /* 체크박스 */
    .sub-menu .form-check-input {
        background-color: var(--ed-field-bg);
        border-color: var(--ed-line);
    }

    .sub-menu .form-check-input:checked {
        background-color: var(--ed-accent);
        border-color: var(--ed-accent);
    }

    .sub-menu .form-check-label {
        color: var(--ed-text-dim);
    }

    /* ── 설정 묶음 카드 ────────────────────────────────────────────────────────
       서체(종류·두께·크기)나 글자 꾸미기(그라데이션·테두리)처럼 "하나의 결정"에
       속하는 컨트롤들을 한 카드로 묶는다. 예전에는 라벨 달린 블록이 같은 간격으로
       주르륵 나열돼 있어서 어디까지가 한 덩어리인지 읽히지 않았다. */

    .sub-menu .ed-group-card {
        margin-bottom: 14px;
        padding: 12px 12px 2px;    /* 마지막 .mb-3 의 16px 아래여백이 바닥을 만든다 */
        background: var(--ed-card-bg);
        border: 1px solid var(--ed-line);
        border-radius: 10px;
        box-shadow: var(--ed-card-lift);
    }

    .sub-menu .ed-group-title {
        margin-bottom: 10px;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ed-text);
    }

    /* 카드 안에서는 컨트롤 사이 간격을 조금 좁힌다 — 한 덩어리로 보여야 하므로 */
    .sub-menu .ed-group-card .mb-3 {
        margin-bottom: 12px !important;
    }

    /* 카드 제목이 이미 말해 주는 접두어('서체 두께' → '두께')는 여기서만 뗀다.
       카드가 없는 모바일 시트에서는 그대로 남아야 무슨 값인지 알 수 있다. */
    .sub-menu .ed-label-scope {
        display: none;
    }

    /* 텍스트 패널의 서체/배치 카드는 글자를 고르지 않았을 때 안쪽 블록이 전부
       display:none 이 된다(updateControlsFromObject). 그때 제목만 남은 빈 카드가
       떠 있으면 안 되므로, 살아 있는 블록이 하나도 없으면 카드째 숨긴다.
       JS 는 인라인 style 로 토글하므로 그 흔적을 그대로 본다. */
    #text-menu .ed-group-card:not(:has(.mb-3:not([style*="none"]))) {
        display: none;
    }

    /* ── 이미지 패널 ───────────────────────────────────────────────────────────
       문제였던 것
         · 묶음 사이가 얇은 hr 하나뿐이라 어디까지가 한 기능인지 안 읽혔다.
         · 위 아웃라인 규칙이 배경제거·캐릭터화·크롭·지우개를 전부 같은 회색으로
           통일해 버려서, 정작 이 편집기의 차별점(AI 두 개)이 크롭·지우개와
           똑같은 무게로 묻혔다.
         · 비활성 opacity 0.42 라 이미지를 고르기 전에는 버튼 글자조차 안 읽혀
           "그런 기능이 있다"는 사실 자체를 알 수 없었다.
       방향: 묶음을 카드로 나누고, 색은 AI 묶음에만 쓰고, 비활성은 흐리게가 아니라
             "지금은 못 누른다"로만 표현한다. */

    /* 카드가 묶음을 보여주므로 구분선은 자리만 차지한다 */
    #image-menu hr {
        display: none;
    }

    #image-menu .form-text {
        color: var(--ed-text-dim) !important;
    }

    /* hr 을 없앴으니 업로드 묶음과 첫 카드 사이가 붙는다 */
    #image-menu > .d-grid {
        margin-bottom: 14px;
    }

    .sub-menu .ed-tool-card {
        margin-bottom: 12px !important;
        padding: 12px 12px 13px;
        background: var(--ed-card-bg);
        border: 1px solid var(--ed-line);
        border-radius: 10px;
        box-shadow: var(--ed-card-lift);
    }

    /* 카드 제목 — 보조 라벨(11.5px faint)이 아니라 그 묶음의 이름이다 */
    .sub-menu .ed-tool-card > .form-label.ed-tool-title {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ed-text);
    }

    .sub-menu .ed-tool-desc {
        margin-bottom: 10px;
        font-size: 11.5px !important;
        line-height: 1.55;
        color: var(--ed-text-dim) !important;
    }

    .sub-menu .ed-tool-time {
        padding: 1px 7px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.15);
        color: var(--ed-text-faint);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0;
    }

    /* AI 묶음 — 패널에서 유일하게 색을 쓰는 자리.
       "여기 특별한 게 있다"를 색 하나로 전달하는 게 목적이라, 다른 데서 색을
       쓰기 시작하면 이 강조는 그 즉시 무의미해진다. */
    .sub-menu .ed-ai-group {
        margin-bottom: 16px;
        padding: 12px;
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.11), rgba(139, 92, 246, 0.05));
        border: 1px solid rgba(99, 102, 241, 0.34);
        border-radius: 12px;
    }

    .sub-menu .ed-ai-group-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 11px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ed-accent-text);
    }

    .sub-menu .ed-ai-badge {
        padding: 2px 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    /* 묶음 안 카드는 다른 카드와 같은 표면을 쓰되 테두리만 보라로 — 보라는 묶음
       테두리와 카드 사이 틈으로 비친다. (배경까지 보라로 물들이면 글자가 뜬다) */
    .sub-menu .ed-ai-group .ed-tool-card {
        background: var(--ed-card-bg);
        border-color: rgba(99, 102, 241, 0.28);
        box-shadow: var(--ed-card-lift);
    }

    .sub-menu .ed-ai-group .ed-tool-card:last-child {
        margin-bottom: 0 !important;
    }

    /* AI 실행 버튼 — 위 아웃라인 통일 규칙(!important)을 이겨 색을 되돌린다.
       비활성일 때는 아래 규칙이 다시 가져간다. */
    .sub-menu .btn.ed-ai-action:not(:disabled) {
        background: rgba(99, 102, 241, 0.2) !important;
        border: 1px solid rgba(99, 102, 241, 0.55) !important;
        color: #dbe1ff !important;
        font-weight: 600;
    }

    .sub-menu .btn.ed-ai-action:not(:disabled):hover {
        background: rgba(99, 102, 241, 0.34) !important;
        border-color: var(--ed-accent-hi) !important;
        color: #fff !important;
    }

    /* 비활성은 "조건이 안 됐다"만 말하면 된다. 흐리게 지워 버리면 기능이 있다는
       것조차 못 읽는다. 점선 테두리가 '아직 잠김'을 대신 말해 준다.
       인라인 <style> 의 #bgRemoveBtn:disabled{opacity:.4!important} 를 이기려면
       id + class 조합이 필요하다. */
    #image-menu .btn:disabled,
    #image-menu .btn[disabled] {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px dashed rgba(148, 163, 184, 0.32) !important;
        color: var(--ed-text-faint) !important;
        cursor: not-allowed !important;
    }

    /* 이미지를 고르기 전 안내. 버튼이 왜 잠겼는지는 툴팁(title)만으로는
       가리키는 곳에 커서를 올려야만 알 수 있다. */
    #image-menu.img-tools-off .ed-need-image {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 10px;
        padding: 7px 10px;
        border-left: 2px solid rgba(245, 158, 11, 0.6);
        border-radius: 0 6px 6px 0;
        background: rgba(245, 158, 11, 0.09);
        color: #dfae72;
        font-size: 11.5px;
        line-height: 1.45;
    }

    /* ── 상단바 ────────────────────────────────────────────────────────────────
       문제였던 것: 버튼 다섯 개가 전부 같은 크기(높이 44px)·같은 무게라 위계가 없고,
       초록(주문)·보라(장바구니)·회색 그라데이션이 나란히 붙어 서로 싸웠다.
       바(bar)는 도구를 담는 그릇이지 그 자체가 주인공이 아니므로 납작하게 낮춘다.

       위계: 주문(초록 채움) > 장바구니(인디고 톤) > 도구 3종(중성) > 되돌리기(아이콘)
       순서는 마크업에서 "도구 → 주문"으로 바꿨다(오른쪽 끝이 결제로 가는 길). */

    .top-bar {
        margin-bottom: 14px;
        padding: 8px 12px;
        background: var(--ed-panel-bg);
        border: 1px solid var(--ed-line);
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
        backdrop-filter: none;
    }

    /* 공통 크기 — 44px → 32px. 캔버스에 12px 을 돌려준다. */
    .top-bar .btn {
        padding: 6px 12px !important;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: -0.01em;
        border-radius: 7px;
        box-shadow: none !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .top-bar .btn:hover,
    .top-bar .btn:active {
        transform: none !important;   /* 눌릴 때마다 위아래로 튀던 것 제거 */
    }

    /* 도구 3종 (내 디자인 저장 / 3D로 보기 / 실물크기 인쇄) — 좌측 패널과 같은 중성 표면 */
    .top-bar .btn-secondary {
        background: var(--ed-field-bg) !important;
        border: 1px solid var(--ed-line) !important;
        color: var(--ed-text) !important;
        overflow: visible;
    }

    .top-bar .btn-secondary::before {
        display: none;               /* 광택 스윕 */
    }

    .top-bar .btn-secondary:hover {
        background: var(--ed-field-bg-hover) !important;
        border-color: rgba(148, 163, 184, 0.34) !important;
        color: #fff !important;
    }

    /* 주문 — 이 화면의 유일한 CTA. 채우되 글로우는 걷어낸다. */
    .top-bar #saveAsPdfBtn {
        background: #10b981 !important;
        border: 1px solid #10b981 !important;
        color: #fff !important;
        font-weight: 600;
    }

    .top-bar #saveAsPdfBtn:hover {
        background: #34d399 !important;
        border-color: #34d399 !important;
    }

    /* 업종 편집기처럼 장바구니 버튼이 유일한 주문 수단일 때는 이쪽이 CTA다.
       (.ed-action-cta 는 '주문 묶음의 첫 버튼'을 뜻한다 — Editor.cshtml 참고) */
    .top-bar #directCartBtn.ed-action-cta {
        background: #10b981 !important;
        border-color: #10b981 !important;
        color: #fff !important;
        font-weight: 600;
    }

    .top-bar #directCartBtn.ed-action-cta:hover {
        background: #34d399 !important;
        border-color: #34d399 !important;
    }

    /* 장바구니 — 같은 주문 경로지만 두 번째 선택지. 채우지 않고 톤으로만.
       예전엔 초록 옆에 보라를 꽉 채워 둘이 서로를 깎아먹었다. */
    .top-bar #directCartBtn {
        background: rgba(99, 102, 241, 0.16) !important;
        border: 1px solid rgba(99, 102, 241, 0.55) !important;
        color: var(--ed-accent-text) !important;
        font-weight: 600;
    }

    .top-bar #directCartBtn:hover {
        background: rgba(99, 102, 241, 0.3) !important;
        border-color: var(--ed-accent-hi) !important;
        color: #e0e7ff !important;
    }

    /* 도구 묶음과 주문 묶음 사이 경계.
       선을 버튼의 border-left 로 그리려 하면 #saveAsPdfBtn 의 border:...!important 에
       먹히고, padding 으로 벌리면 글자가 버튼 안에서 오른쪽으로 밀린다.
       흐름 밖(absolute) 에 그려서 버튼 자체는 건드리지 않는다. */
    .top-bar .ed-action-cta {
        position: relative;
        margin-left: 16px;
    }

    .top-bar .ed-action-cta::before {
        content: '';
        position: absolute;
        left: -9px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: var(--ed-line);
    }

    /* 되돌리기 / 다시실행.
       투명 배경 + 얇은 아이콘만 두니 어두운 바 위에서 아예 안 읽혔다.
       도구 버튼과 같은 표면을 주고 한글 라벨을 붙여 확실히 보이게 한다. */
    .top-bar .undo-redo-buttons {
        gap: 6px !important;
    }

    .top-bar .undo-redo-buttons .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 11px !important;
        font-size: 12.5px;
        background: var(--ed-field-bg) !important;
        border: 1px solid var(--ed-line) !important;
        color: var(--ed-text) !important;
    }

    .top-bar .undo-redo-buttons .btn svg {
        flex-shrink: 0;
        filter: none;
    }

    .top-bar .undo-redo-buttons .btn:hover:not(:disabled) {
        background: var(--ed-field-bg-hover) !important;
        border-color: rgba(148, 163, 184, 0.34) !important;
        color: #fff !important;
    }

    /* 비활성은 "지금은 못 누른다"만 전달되면 된다.
       예전엔 opacity 0.55 위에 흐린 글자색까지 겹쳐 사실상 사라져 있었다. */
    .top-bar .undo-redo-buttons .btn:disabled {
        background: transparent !important;
        border-color: var(--ed-line-soft) !important;
        color: var(--ed-text-faint) !important;
        opacity: 1;
    }

    .top-bar .editor-help-icon {
        filter: none;
    }

    .top-bar .form-check-label {
        font-size: 12.5px;
        color: var(--ed-text-dim);
    }

    .top-bar .form-check-input {
        background-color: var(--ed-field-bg);
        border-color: var(--ed-line);
    }

    .top-bar .form-check-input:checked {
        background-color: var(--ed-accent);
        border-color: var(--ed-accent);
    }

    /* ── 우클릭 안내 칩 ────────────────────────────────────────────────────────
       작업영역(.main-content)은 밝은 회색이므로 어두운 바가 아니라 흰 카드로 얹는다.
       개체를 고르면 카드 바로 아래에 나타난다 — 표시/숨김은 JS가 .is-visible 로 한다.
       모바일은 우클릭이 아니라 길게 누르기라 이 파일(데스크톱 전용) 안에만 둔다.

       주의: 기본 숨김(display:none)은 여기가 아니라 newEditorApp.css 에 있다.
       이 파일은 데스크톱에서만 적용되므로 여기에 두면 모바일에서 규칙이 하나도
       안 걸려 그냥 보이는 div 가 된다. */
    .context-menu-hint {
        align-items: center;
        gap: 9px;
        width: max-content;
        max-width: 560px;
        margin: 12px auto 0;
        padding: 7px 8px 7px 13px;
        background: #ffffff;
        border: 1px solid #dbe3ee;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
        color: #475569;
        font-size: 12.5px;
        line-height: 1.4;
        text-align: left;
    }

    .context-menu-hint.is-visible {
        display: flex;
        animation: edHintIn 0.22s ease-out;
    }

    .context-menu-hint svg {
        flex-shrink: 0;
        filter: none;              /* 전역 svg drop-shadow 해제 */
        color: var(--ed-accent);
    }

    .context-menu-hint b {
        font-weight: 600;
        color: #1e293b;
    }

    .context-menu-hint-close {
        flex-shrink: 0;
        padding: 4px 11px;
        background: #f1f5f9;
        border: 1px solid #dbe3ee;
        border-radius: 999px;
        color: #475569;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .context-menu-hint-close:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    @keyframes edHintIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── 선택 개체 크기 표시 ───────────────────────────────────────────────────
       흰 카드 + 제목 + 여러 줄이던 것을 한 줄로 줄였다.
       display 토글은 JS(updateUI)가 하므로 여기서 display 를 건드리지 않는다. */
    #inspector {
        margin-top: 10px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-align: center;
    }

    #inspector #infoText {
        font-size: 12px;
        font-weight: 500;
        color: #64748b !important;
        font-variant-numeric: tabular-nums;   /* 크기를 바꿀 때 숫자가 덜컹거리지 않게 */
    }

    /* 태블릿 폭에서는 레일·패널을 조금 좁힌다 */
    @media (max-width: 1024px) {
        .side-menu {
            width: 74px;
            padding: 8px 6px;
        }

        .side-menu .menu-item {
            min-height: 56px;
            font-size: 10.5px;
        }

        .side-menu .menu-item.active::before {
            left: -6px;
        }

        .sub-menu.active {
            width: 288px;
        }
    }
}