/* 화면 스펙 편집기 — 핀 추가·디스크립션 편집·서버 저장 (spec-editor.js 전용) */

/* 편집 툴바 — 디스크립션 패널 하단에 고정, 중앙 정렬 */
.se-bar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 14px -16px -40px; padding: 12px 16px; border-top: 1px solid #dde3ea;
  background: #fff; box-shadow: 0 -4px 12px rgba(20,30,45,.06); }
.se-btn { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #dde3ea; background: #fff;
  font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(20,30,45,.12);
  font-family: inherit; color: #1c2430; white-space: nowrap; }
.se-btn:hover { border-color: #FD4F00; color: #FD4F00; }
.se-btn.primary { background: #FD4F00; border-color: #FD4F00; color: #fff; }
.se-btn.primary:hover { background: #D64300; color: #fff; }
.se-btn.dirty { background: #d64545; border-color: #d64545; color: #fff; }
.se-btn.active { background: #1c2430; border-color: #1c2430; color: #fff; }
.se-hide { display: none !important; }

/* 핀(넘버)은 디스크립션이 열려 있을 때만 표시 */
body:not(.spec-mode) .spec-pin,
body:not(.spec-mode) .se-pin,
body:not(.spec-mode) .se-box { display: none !important; }

/* 핀 추가 모드 — 목업 위 십자 커서 */
body.se-pinmode .main-wrapper { cursor: crosshair; }
body.se-pinmode .main-wrapper * { cursor: crosshair !important; }

/* 편집기로 추가한 좌표 핀 */
.main-wrapper { position: relative; }
.se-pin { position: absolute; z-index: 60; transform: translate(-50%, -50%); cursor: grab; }
.se-pin:active { cursor: grabbing; }
.se-pin .spec-pin { margin: 0; min-width: 26px; height: 26px; font-size: 13.5px; padding: 0 6px;
  box-shadow: 0 2px 8px rgba(20,30,45,.3); border: 2px solid #fff; }
.se-pin .se-del { position: absolute; top: -9px; right: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: #d64545; color: #fff; font-size: 10px; line-height: 16px; text-align: center; cursor: pointer;
  display: none; }
body.se-edit .se-pin:hover .se-del { display: block; }

/* 편집 모드 — 디스크립션 편집 가능 표시 */
body.se-edit .spec-card [contenteditable="true"] { outline: 1px dashed #c9d2dc; border-radius: 4px; padding: 1px 4px; }
body.se-edit .spec-card [contenteditable="true"]:focus { outline: 2px solid #FD4F00; background: #fff; }

/* 카드별 블릿(항목) 추가 버튼 */
.se-add-item { display: none; margin-left: 8px; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: #FD4F00; color: #fff; font-size: 13px; line-height: 20px; cursor: pointer; vertical-align: middle; }
body.se-edit .spec-card h6 .se-add-item { display: inline-block; }

/* 카드(칸) 전체 삭제 버튼 */
.se-card-del { display: none; float: right; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #e3c2c2;
  background: #fff; color: #d64545; font-size: 11px; line-height: 18px; cursor: pointer; }
.se-card-del:hover { background: #d64545; color: #fff; }
body.se-edit .spec-card h6 .se-card-del { display: inline-block; }

/* 항목 삭제 버튼 — 편집 모드에서 항상 표시(흐리게), hover 시 진하게 */
.se-li-del { display: none; margin-left: 6px; color: #d64545; cursor: pointer; font-weight: 700; opacity: .35; }
body.se-edit .spec-card li .se-li-del,
body.se-edit .spec-card tr .se-li-del { display: inline; }
body.se-edit .spec-card li:hover .se-li-del,
body.se-edit .spec-card tr:hover .se-li-del { opacity: 1; }

/* 핀 ↔ 항목 하이라이트 */
.se-flash { animation: se-flash 1.2s ease; }
@keyframes se-flash { 0% { background: #ffe3d4; } 100% { background: transparent; } }

/* 어노테이션 박스 — 목업 위 영역 표시 */
body.se-boxmode .main-wrapper { cursor: crosshair; }
body.se-boxmode .main-wrapper * { cursor: crosshair !important; }
.se-box { position: absolute; z-index: 55; border: 2.5px solid #FD4F00; border-radius: 6px;
  background: rgba(253,79,0,.06); cursor: grab; }
.se-box:active { cursor: grabbing; }
.se-box .se-del { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: #d64545; color: #fff; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; display: none; }
body.se-edit .se-box:hover .se-del { display: block; }
.se-box .se-rs { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px;
  background: #FD4F00; border: 2px solid #fff; cursor: nwse-resize; display: none; }
body.se-edit .se-box:hover .se-rs { display: block; }

/* 목업 앵커 폭 고정 — "디스크립션 열림(spec-mode)" 에서만.
 * 열림 = 스토리보드 모드(핀 좌표 안정용 420px 고정) / 닫힘 = 템플릿 원본 반응형 그대로 (인수인계용)
 * 앵커 요소(se-anchor: 편집기가 자동 부여)에만 적용 — 다른 페이지의 일반 .card 는 건드리지 않는다 */
body.spec-mode .se-anchor { width: var(--se-anchor-w, 420px); max-width: none; }
body.spec-mode .se-anchor.se-anchor-auto { width: auto; }
/* 내부 화면: 고정폭 아트보드가 남은 공간보다 넓으면 잘리지 않고 가로 스크롤 */
body.spec-mode .page-wrapper { overflow-x: auto; }
body.spec-mode .se-anchor-wrap {
  width: 420px !important; max-width: calc(100vw - 48px) !important;
  flex: 0 0 auto !important; margin-left: auto !important; margin-right: auto !important;
}

/* Shift 스냅 정렬 가이드라인 */
.se-guide { position: absolute; z-index: 70; background: #FD4F00; opacity: .85; pointer-events: none; display: none; }
.se-guide.v { width: 1px; top: 0; bottom: 0; }
.se-guide.h { height: 1px; left: 0; right: 0; }

/* 디스크립션 링크 — 파란색 + 밑줄 */
.spec-panel .spec-card a { color: #2563eb; text-decoration: underline; }
.spec-panel .spec-card a:hover { color: #1d4ed8; }

/* [미확정] 자동 강조 — 빨간색 */
.spec-undecided { color: #d64545; font-weight: 700; }

/* 확정도 배지 — 편집 모드에서 클릭해 단계 전환 */
body.se-edit .spec-head .spec-badge { cursor: pointer; }
body.se-edit .spec-head .spec-badge:hover { outline: 2px solid #FD4F00; outline-offset: 2px; }

/* 헤더 앵커 핀 — 우측 기준 배치 */
.se-pin[data-a="h"] { transform: translate(50%, -50%); z-index: 1051; }