/* 화면 글 편집(관리자) (assets/js/page-edit.js) */

/* 형광펜 — 방문자 화면에도 보인다 */
mark.pe-hl, mark.pe-hl-g, mark.pe-hl-p { color: inherit; padding: 0 1px; border-radius: 2px; background: linear-gradient(transparent 52%, var(--pe-mk) 52% 94%, transparent 94%); }
mark.pe-hl { --pe-mk: rgba(255, 205, 27, .75); }
mark.pe-hl-g { --pe-mk: rgba(126, 217, 160, .7); }
mark.pe-hl-p { --pe-mk: rgba(255, 168, 190, .7); }

/* 숨긴 글: 방문자에게는 안 보이고, 편집 중에는 흐리게 */
body:not(.pe-editing) .pe-hidden { display: none !important; }
.pe-editing .pe-hidden { opacity: .38; text-decoration: line-through; }

/* 편집 단추(관리자에게만) */
.pe-open { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 800; font-size: 14.5px; box-shadow: 0 8px 22px rgba(1, 45, 99, .18); cursor: pointer; }
.pe-open:hover, .pe-open:focus-visible { border-color: var(--navy); }
.pe-editing .pe-open { display: none; }

/* 편집 중 표시 */
.pe-editing [data-ek] { outline: 1px dashed rgba(36, 121, 247, .45); outline-offset: 3px; border-radius: 3px; cursor: text; }
.pe-editing [data-ek]:hover { outline-color: var(--blue); background: rgba(36, 121, 247, .05); }
.pe-editing [data-ek].pe-changed { outline-color: rgba(240, 125, 0, .8); }
.pe-editing [data-ek][contenteditable="true"] { outline: 2px solid var(--blue); outline-offset: 3px; background: #fff; box-shadow: 0 0 0 6px rgba(36, 121, 247, .12); }
.pe-editing .page-hero .ph-scene { opacity: .35; }

.pe-bar { position: sticky; top: 0; z-index: 400; background: var(--navy); color: #fff; box-shadow: 0 4px 14px rgba(1, 45, 99, .25); }
.pe-bar-in { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 10px var(--gutter, 20px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pe-bar b { font-size: 15px; }
.pe-hint { color: #cfdaeb; flex: 1; min-width: 200px; }
.pe-note { background: var(--yellow, #ffcd1b); color: var(--navy); font-weight: 800; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; }
.pe-count { font-weight: 800; color: var(--yellow, #ffcd1b); }
.pe-btn { border: 0; border-radius: 10px; padding: 8px 16px; font-weight: 800; font-size: 14px; cursor: pointer; }
.pe-save { background: var(--yellow, #ffcd1b); color: var(--navy); }
.pe-cancel { background: rgba(255, 255, 255, .14); color: #fff; }
.pe-btn:disabled { opacity: .6; cursor: wait; }

.pe-tools { position: absolute; z-index: 410; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100vw - 16px); padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(1, 45, 99, .2); font-size: 13.5px; }
.pe-grp { display: inline-flex; gap: 2px; align-items: center; padding-right: 6px; border-right: 1px solid var(--line-2, #eef1f5); }
.pe-grp:last-child { border-right: 0; padding-right: 0; }
.pe-tools button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink); font-weight: 700; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pe-tools button:hover, .pe-tools button:focus-visible { background: var(--bg-2, #f6f8fb); }
.pe-tools .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.pe-tools .sw.y { background: #ffd84d; }
.pe-tools .sw.g { background: #8fdfae; }
.pe-tools .sw.p { background: #ffb1c4; }
.pe-tools .pe-hide { color: #c0392b; }
.pe-tools .pe-done { background: var(--navy); color: #fff; }
.pe-tools .pe-done:hover { background: var(--navy-2); }
/* 글자 크기·글자색·형광펜 펼침 상자 */
.pe-popw { position: relative; }
.pe-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 130px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(1, 45, 99, .18); }
.pe-pop[hidden] { display: none; }
.pe-tools .pe-wide { justify-content: flex-start; width: 100%; white-space: nowrap; }
.pe-sws { display: grid; grid-template-columns: repeat(4, 28px); gap: 6px; padding: 2px; }
.pe-tools .pe-swatch { width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); justify-content: center; }
.pe-tools .pe-swatch:hover, .pe-tools .pe-swatch:focus-visible { box-shadow: 0 0 0 2px var(--blue); background-clip: padding-box; }
.pe-tools .pe-swatch.none { background: #fff; color: var(--ink-3); font-size: 13px; }
.pe-sw-a { color: #c62828; font-weight: 900; text-decoration: underline 3px #c62828; text-underline-offset: 2px; }
.pe-sw-m { background: linear-gradient(transparent 45%, #fff176 45%); font-weight: 900; padding: 0 2px; }

@media print { .pe-open, .pe-bar, .pe-tools { display: none !important; } }