/* 손질 — 김반장 시안(20260807_NewDesign_sonjil_interactive) 이식.
   시안은 인라인 스타일로 짜여 있고 마크업은 그대로 옮겼다. 이 파일에는 시안이
   <helmet>에 두었던 전역 스타일과, 시안의 style-hover="..." 속성(dc-runtime 전용 문법이라
   순수 HTML에서는 못 쓴다)을 같은 값 그대로 옮긴 :hover 규칙만 들어간다.
   ⚠️ 시안은 전역 box-sizing 리셋이 없다(content-box) — 여기서도 넣지 않는다. */

/* 시안 폰트는 Pretendard. CDN 대신 프로젝트에 이미 들어있는 파일을 그대로 쓴다
   (오프라인에서도 시안과 같은 글꼴로 보이게. Step5 합성 폰트와도 같은 파일이다). */
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Regular.otf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Bold.otf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Bold.otf"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Nanum Myeongjo"; src: url("/fonts/NanumMyeongjo-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Nanum Myeongjo"; src: url("/fonts/NanumMyeongjo-Bold.ttf"); font-weight: 700; }

/* ---- 시안 <helmet> 전역 스타일 그대로 ---- */
body { margin:0; background:#F4F6F8; font-family:Pretendard, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:#2C5F9E; text-decoration:none; }
a:hover { color:#1D4373; }
@keyframes sonjil-splash-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes sonjil-splash-bar { from { width:0%; } to { width:100%; } }

/* ---- 시안 style-hover="..." → :hover (값은 시안 그대로) ---- */
.h-dropzone:hover      { border-color:#2C5F9E; background:#F3F7FC; }
.h-ghost-blue:hover    { background:#F3F7FC; }
.h-primary:hover       { background:#22497A; }
.h-dark:hover          { background:#0D141C; }
.h-quiet:hover         { border-color:#B9C3CD; color:#16202B; }
.h-quiet-b:hover       { border-color:#B9C3CD; }
.h-dashed:hover        { border-color:#2C5F9E; color:#2C5F9E; }
.h-danger:hover        { border-color:#D9A3A3; color:#B4483F; }
.h-row:hover           { background:#F8FAFC; }
.h-back:hover          { color:#2C5F9E; }
.h-mini:hover          { border-color:#B9C3CD; color:#16202B; }

/* ---- 캔버스 위 조작 요소들. 시안이 인라인으로 잡아둔 모양은 JS가 그대로 넣고,
       여기에는 시안 마크업으로 표현할 수 없는 상호작용 상태(선택/드래그 중)만 둔다. ---- */
.canvas-viewport { overflow:auto; position:relative; }
.canvas-surface  { position:relative; flex-shrink:0; }
.canvas-surface > img { display:block; user-select:none; pointer-events:none; }
.compare-overlay { position:absolute; top:0; left:0; pointer-events:none; display:block; }

.region-box { box-sizing:border-box; cursor:move; }
/* "영역이 바뀌어서 다시 인식이 필요하다" 표시. 시안 팔레트의 경고색(#FDF0D9 / #8A5B12)을 쓴다. */
.region-box.stale { border-color:#8A5B12 !important; background:rgba(253,240,217,0.55) !important; }
.region-box.selected { box-shadow:0 0 0 2px rgba(44,95,158,0.30); }
.region-draft { position:absolute; border:1.5px dashed #2C5F9E; background:rgba(44,95,158,0.08); pointer-events:none; box-sizing:border-box; }

.text-item { box-sizing:border-box; }
.text-item textarea {
  width:100%; height:100%; border:none; background:transparent; resize:none; overflow:hidden;
  white-space:pre; padding:0; margin:0; outline:none; box-sizing:border-box; line-height:1.15;
}
.text-item .text-item-handle { display:none; }
.text-item.selected .text-item-handle { display:flex; }
.text-item .text-item-del { display:none; }
.text-item.selected .text-item-del { display:flex; }
.text-item .text-item-resize { display:none; }
.text-item.selected .text-item-resize { display:block; }
.text-item.selected { box-shadow:0 0 0 2px rgba(44,95,158,0.25); }

/* Step2/4 미리보기 위 하이라이트 — 시안의 "마우스를 올리면 여기서 위치가 표시된다" 동작. */
.preview-wrap { position:relative; }
.preview-wrap img { width:100%; display:block; }
.hl-box { position:absolute; display:none; pointer-events:none; border:1.5px solid #2C5F9E; background:rgba(44,95,158,0.20); }