/**
 * ✏️ 가져온 템플릿 «화면에서 바로 고치기» — 표시 층. (2026-08-22)
 *
 * ⛔ 전부 `tpe-` 접두. 에디터 본체·템플릿 자체 스타일을 건드리지 않는다.
 * ⛔ 윤곽선은 `outline` 으로만 준다 — `border` 는 템플릿의 레이아웃을 밀어낸다.
 */

/* ── 고칠 수 있는 곳을 «지날 때만» 알려 준다 ── */
.tpe-on .b-html [data-lb-id] h1:hover,
.tpe-on .b-html [data-lb-id] h2:hover,
.tpe-on .b-html [data-lb-id] h3:hover,
.tpe-on .b-html [data-lb-id] h4:hover,
.tpe-on .b-html [data-lb-id] h5:hover,
.tpe-on .b-html [data-lb-id] h6:hover,
.tpe-on .b-html [data-lb-id] p:hover,
.tpe-on .b-html [data-lb-id] li:hover,
.tpe-on .b-html [data-lb-id] cite:hover,
.tpe-on .b-html [data-lb-id] figcaption:hover,
.tpe-on .b-html [data-lb-id] span:hover,
.tpe-on .b-html [data-lb-id] a:hover,
.tpe-on .b-html [data-lb-id] button:hover,
.tpe-on .b-html [data-lb-id] td:hover,
.tpe-on .b-html [data-lb-id] th:hover,
.tpe-on .b-html [data-lb-id] dt:hover,
.tpe-on .b-html [data-lb-id] dd:hover,
.tpe-on .b-html [data-lb-id] small:hover,
.tpe-on .b-html [data-lb-id] time:hover {
    outline: 1px dashed rgba(37, 99, 235, .75);
    outline-offset: 2px;
    cursor: text;
}

/* 사진은 «바꾸는 것»이라 커서를 다르게 */
.tpe-on .b-html [data-lb-id] img:hover {
    outline: 2px dashed rgba(37, 99, 235, .85);
    outline-offset: 2px;
    cursor: pointer;
}

/* 편집 중 — 확실히 보이게 */
.b-html .tpe-editing {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px;
    background: rgba(37, 99, 235, .06);
    cursor: text;
}

/* ── 잠깐 뜨는 안내 ── */
.tpe-hint {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(14px);
    z-index: 2300000;
    max-width: min(560px, calc(100vw - 32px));
    padding: 11px 18px;
    border-radius: 999px;
    background: #16181d;
    color: #e8eaed;
    border: 1px solid #343841;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.tpe-hint.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.tpe-hint.is-warn { background: #2e1616; border-color: #7f1d1d; color: #fca5a5; }

/* ── 처음 한 번 뜨는 사용법 ── */
.tpe-guide {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2250000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    width: min(760px, calc(100vw - 24px));
    padding: 14px 18px;
    border-radius: 12px;
    background: #16181d;
    color: #cfd4dc;
    border: 1px solid #2563eb;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: normal;
}
.tpe-guide > b { color: #fff; font-size: 14px; }
.tpe-guide > span > b { color: #93c5fd; }
.tpe-guide-ai { color: #8b93a1; font-size: 12.5px; }
.tpe-guide > button {
    margin-inline-start: auto;
    min-height: 36px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.tpe-guide > button:hover { background: #1d4ed8; }

@media (max-width: 700px) {
    .tpe-guide { gap: 8px; padding: 12px 14px; }
    .tpe-guide > button { margin-inline-start: 0; width: 100%; }
}

/* ══════════════ 서식 도구막대 (2026-08-22 2차) ══════════════
   🎨 클릭한 요소에 «그 자리에서» 색·크기·정렬을 준다.
   ⛔ 속성 패널을 쓰지 않는 이유 = 엔진이 html 블록의 「텍스트」 구획을 숨기고,
      패널 값은 바깥 상자에만 붙어 템플릿 안에는 안 먹는다(둘 다 실측). */

.tpe-bar {
    position: fixed;
    top: 0; left: 0;
    z-index: 2350000;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #16181d;
    border: 1px solid #3a4049;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
    white-space: nowrap;
}
.tpe-bar.is-on { display: flex; }

.tpe-b-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 30px;
    padding: 0 5px;
    border-radius: 6px;
    color: #cfd4dc;
    font-size: 12px;
    cursor: pointer;
}
.tpe-b-item:hover { background: #232833; }
.tpe-b-item > i { font-size: 14px; opacity: .85; }

/* 색 선택기 — 기본 위젯의 두꺼운 테두리를 없애 작은 칩처럼 보이게 */
.tpe-b-item input[type="color"] {
    width: 26px; height: 22px;
    padding: 0;
    border: 1px solid #4a515c;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}
.tpe-b-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.tpe-b-item input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }

.tpe-b-item input[type="number"] {
    width: 52px; height: 24px;
    padding: 0 4px;
    border: 1px solid #4a515c;
    border-radius: 4px;
    background: #10131a;
    color: #e8eaed;
    font-size: 12px;
    text-align: center;
}

.tpe-b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px; height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #cfd4dc;
    font-size: 13px;
    cursor: pointer;
}
.tpe-b-btn:hover { background: #232833; }
.tpe-b-btn.is-on { background: #2563eb; color: #fff; }
.tpe-b-btn.is-off { opacity: .35; }

.tpe-b-reset { font-size: 11.5px; color: #8b93a1; }
.tpe-b-reset:hover { color: #fca5a5; background: #2e1616; }

.tpe-b-sep { width: 1px; height: 20px; margin: 0 2px; background: #343b45; }

/* 고른 요소 — 편집 중(실선)과 구분되게 «점선 파랑» */
.b-html .tpe-picked {
    outline: 2px dashed #2563eb !important;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .tpe-bar { flex-wrap: wrap; max-width: calc(100vw - 16px); white-space: normal; }
}

/* ══════════ 트리에 덧붙인 «템플릿 내부» 노드 (2026-08-22) ══════════
   ⛔ 엔진이 그린 노드와 «구분»되어야 한다 — 손님이 무엇을 고르는지 알아야 하므로. */
.tree-node.tpe-tnode {
    color: #8b93a1;
    font-size: 10.5px;
    border-left: 2px solid #2f3540;
}
.tree-node.tpe-tnode:hover { color: #cfd4dc; background: #232833; border-left-color: #2563eb; }
.tree-node.tpe-tnode.tree-active { color: #93c5fd; background: rgba(37, 99, 235, .16); border-left-color: #2563eb; }
.tree-node.tpe-tnode .tree-icon { opacity: .8; }
.tree-node.tpe-tnode .tree-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════ 진짜 계층 트리 (2026-08-22 3차) ══════════
   🌳 요소 안의 요소 안의 요소 — 부모 상자를 고를 수 있어야 여백·배경·테두리를 만진다. */

.tree-node.tpe-tnode { align-items: center; }

/* 접기/펴기 삼각형 — 자리를 «항상» 차지해야 들여쓰기가 어긋나지 않는다 */
.tpe-caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: #6b7280;
    font-size: 8px;
    line-height: 1;
    cursor: pointer;
}
.tpe-caret:hover { background: #343b45; color: #cfd4dc; }
.tpe-caret.is-leaf { cursor: default; visibility: hidden; }
.tree-node.is-closed .tpe-caret i { transform: rotate(-90deg); }
.tpe-caret i { transition: transform .12s ease; }

/* 상자(컨테이너)는 글 요소와 구분되게 — 무엇을 고르는지 알아야 한다 */
.tree-node.tpe-tnode.is-box { color: #9aa4b2; }
.tree-node.tpe-tnode.is-box .tree-icon { color: #6b8afd; }

/* 도구막대: 지금 무엇을 고쳤는지 이름표 */
.tpe-b-what {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 5px;
    background: #232833;
    color: #93c5fd;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ══════════ 지우기 · 순서 바꾸기 (2026-08-22 · 우선순위 1번) ══════════ */

/* 도구막대 — 지우기는 «위험»이 보여야 한다 */
.tpe-b-del:hover { background: #2e1616; color: #fca5a5; }

/* 트리 노드의 작업 버튼 — 마우스를 올릴 때만 (평소엔 목록이 조용해야 한다) */
.tree-node.tpe-tnode { position: relative; padding-right: 62px; }
.tpe-tacts {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 1px;
}
.tree-node.tpe-tnode:hover .tpe-tacts,
.tree-node.tpe-tnode.tree-active .tpe-tacts { display: flex; }
.tpe-tacts button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #1f242d;
    color: #8b93a1;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}
.tpe-tacts button:hover { background: #2f3540; color: #e8eaed; }
.tpe-tacts button[data-del]:hover { background: #3a1a1a; color: #fca5a5; }

/* 안내 속 «되돌리기» — 안내는 평소 클릭이 안 통하므로 이때만 켠다 */
.tpe-hint.has-undo { pointer-events: auto; }
.tpe-hint-undo {
    margin-inline-start: 10px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.tpe-hint-undo:hover { background: #1d4ed8; }

/* ══════════ 사진 자르기 (2026-08-22 · 우선순위 2번) ══════════
   ⛔ 외부 라이브러리 0 — 틀은 이미 실려 있는 jQuery UI 로 끌고 늘린다. */

.tpe-crop {
    position: fixed;
    inset: 0;
    z-index: 2400000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .72);
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
.tpe-crop.is-on { display: flex; }

.tpe-crop-panel {
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #16181d;
    border: 1px solid #343841;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.tpe-crop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #2a2f38;
    color: #e8eaed;
    font-size: 14px;
    font-weight: 700;
}
.tpe-crop-head select {
    margin-inline-start: auto;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #4a515c;
    border-radius: 6px;
    background: #10131a;
    color: #e8eaed;
    font-size: 12.5px;
}

/* 무대 — 사진과 자르는 틀이 같은 좌표계를 써야 환산이 맞는다 */
.tpe-crop-stage {
    position: relative;
    align-self: center;
    margin: 16px;
    line-height: 0;
    max-height: 62vh;
    overflow: hidden;
}
.tpe-crop-img { display: block; max-width: 100%; max-height: 62vh; }

.tpe-crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #2563eb;
    /* 바깥을 어둡게 — 남길 부분이 한눈에 보인다 */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
    cursor: move;
}
.tpe-crop-box .ui-resizable-handle { background: #2563eb; width: 10px; height: 10px; border-radius: 2px; }
.tpe-crop-box .ui-resizable-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.tpe-crop-box .ui-resizable-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.tpe-crop-box .ui-resizable-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.tpe-crop-box .ui-resizable-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.tpe-crop-box .ui-resizable-n  { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.tpe-crop-box .ui-resizable-s  { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.tpe-crop-box .ui-resizable-w  { top: 50%; left: -5px; margin-top: -5px; cursor: ew-resize; }
.tpe-crop-box .ui-resizable-e  { top: 50%; right: -5px; margin-top: -5px; cursor: ew-resize; }

.tpe-crop-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #2a2f38;
}
.tpe-crop-foot button {
    min-height: 38px;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.tpe-crop-cancel { background: #2a2f38; color: #cfd4dc; }
.tpe-crop-cancel:hover { background: #343b45; }
.tpe-crop-ok { background: #2563eb; color: #fff; }
.tpe-crop-ok:hover { background: #1d4ed8; }

/* 원본복구 — 「처음대로」(요소 하나)와 헷갈리지 않게 색을 달리한다 */
.tpe-b-orig { font-size: 11.5px; color: #93c5fd; }
.tpe-b-orig:hover { background: #1e293b; color: #bfdbfe; }

/* ══════════ 📱 좁은 화면 — 도구막대를 «하단 가로 스크롤 바»로 (2026-08-22 검수) ══════════
   ⛔ 종전엔 flex-wrap 으로 세로로 쌓여 높이 445px(화면 55%)가 되고 화면 밖으로 나갔다(실측). */
@media (max-width: 900px) {
    .tpe-bar {
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 12px 12px 0 0;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
        -webkit-overflow-scrolling: touch;
    }
    .tpe-bar > * { flex: 0 0 auto; }
    .tpe-b-btn { min-width: 38px; height: 38px; }      /* 손가락 크기 */
    .tpe-b-item { height: 38px; }
    .tpe-guide { bottom: 70px; }                        /* 도구막대와 겹치지 않게 */
    .tpe-hint  { bottom: 70px; }
}

/* ══════════ 도구막대 2줄 — 자세한 도구 접기 (2026-08-22) ══════════
   ⛔ 24개를 한 줄에 늘어놓으면 손님이 무엇을 만지는지 모른다. */
.tpe-bar { flex-direction: column; align-items: stretch; gap: 0; }
.tpe-b-row1, .tpe-b-row2 { display: flex; align-items: center; gap: 4px; }
.tpe-b-row2 { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2f38; }
.tpe-bar.is-more .tpe-b-row2 { display: flex; }
.tpe-b-more.is-on { background: #2563eb; color: #fff; }

/* 자세한 도구의 select */
.tpe-b-item select {
    height: 24px;
    padding: 0 4px;
    border: 1px solid #4a515c;
    border-radius: 4px;
    background: #10131a;
    color: #e8eaed;
    font-size: 11.5px;
    max-width: 92px;
}
.tpe-b-btn i, .tpe-b-btn u { font-style: italic; font-size: 13px; }
.tpe-b-btn u { font-style: normal; }

@media (max-width: 900px) {
    /* 모바일에선 두 줄이 화면을 먹는다 — 가로 스크롤 한 줄로 이어 붙인다. */
    .tpe-bar { flex-direction: row; }
    .tpe-b-row1, .tpe-b-row2 { flex: 0 0 auto; }
    .tpe-b-row2 { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid #2a2f38; margin-left: 6px; padding-left: 6px; }
}